Review styling of disabled buttons

Our disabled buttons currently use an opacity of 0.65.

Examples:

Screen_Shot_2017-01-03_at_11.25.00_AM emoji

Proposal

  • Redesign all disabled buttons to be gray filled and always have a disabled cursor when hovering. No matter if they are green, red, or other color, when in their resting state (cc: @pedroms )

This is confirmed by what google does in the google material guidelines buttons: img

We should review these buttons and ensure that the disabled state looks visually disabled.

Related issues

https://gitlab.com/gitlab-org/gitlab-ce/issues/32614

Design

  • All buttons, including colored buttons, will become this default styling.
  • Have not hovered/active/focus state except for different cursor on hover (should already be implemented)
background-color: #FAFAFA;
border-color: #DFDFDF;
text-color: #919191;

As for Emoji buttons:

  • 40% opacity + grayscaled emoji
  • rest of the button is similar to the rest of the buttons

image

Edited by Dimitrie Hoekstra