diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index e0d2ed80de5..0f45e499162 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -173,13 +173,14 @@ } &.user-authored { - cursor: default; - opacity: 0.65; + cursor: not-allowed; + background-color: $gray-light; + border-color: $theme-gray-200; + color: $gl-text-color-disabled; - &:hover, - &:active { - background-color: $white-light; - border-color: $border-color; + gl-emoji { + opacity: 0.4; + filter: grayscale(100%); } } diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index fcc420923f9..5cb34a0771d 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -450,3 +450,20 @@ .btn-svg svg { @include btn-svg; } + +// All disabled buttons, regardless of color +.btn.disabled, +.btn[disabled], +fieldset[disabled] .btn, +.dropdown-toggle[disabled], +[disabled].dropdown-menu-toggle { + background-color: $gray-light; + border-color: $theme-gray-200; + color: $gl-text-color-disabled; + opacity: 1; + cursor: not-allowed; + + i { + color: $gl-text-color-disabled; + } +} diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 1d2303a3a2b..4109da4d382 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -63,11 +63,6 @@ border-radius: $border-radius-base; white-space: nowrap; - &[disabled] { - opacity: .65; - cursor: not-allowed; - } - &.no-outline { outline: 0; } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index da18ddf78d3..4ae65e25393 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -164,6 +164,7 @@ $gl-text-color-tertiary: #949494; $gl-text-color-quaternary: #d6d6d6; $gl-text-color-inverted: rgba(255, 255, 255, 1); $gl-text-color-secondary-inverted: rgba(255, 255, 255, .85); +$gl-text-color-disabled: #919191; $gl-text-green: $green-600; $gl-text-green-hover: $green-700; $gl-text-red: $red-500; diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 6d4ccd53e12..bf8eb4c1f06 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -391,11 +391,17 @@ .dropdown-toggle { float: right; - .toggle-icon { + i { color: $white-light; padding-right: 2px; margin-top: 2px; } + + &[disabled] { + i { + color: $gl-text-color-disabled; + } + } } .dropdown-menu {