diff options
-rw-r--r-- | app/assets/stylesheets/framework/awards.scss | 11 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/buttons.scss | 33 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/dropdowns.scss | 5 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/note_form.scss | 8 | ||||
-rw-r--r-- | changelogs/unreleased/26296-update-styling-disabled-buttons.yml | 5 |
6 files changed, 44 insertions, 19 deletions
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index e0d2ed80de5..a538b5a2946 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -174,12 +174,13 @@ &.user-authored { cursor: default; - opacity: 0.65; + 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..d0b0c69b18f 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -220,14 +220,6 @@ @include btn-with-margin; } - &.disabled { - pointer-events: auto !important; - } - - &[disabled] { - pointer-events: none !important; - } - .fa-caret-down, .fa-chevron-down { margin-left: 5px; @@ -450,3 +442,28 @@ .btn-svg svg { @include btn-svg; } + +// All disabled buttons, regardless of color, type, etc +%disabled { + background-color: $gray-light !important; + border-color: $theme-gray-200 !important; + color: $gl-text-color-disabled !important; + opacity: 1 !important; + cursor: default !important; + + i { + color: $gl-text-color-disabled !important; + } +} + +.btn.disabled, +.btn[disabled], +fieldset[disabled] .btn, +.dropdown-toggle[disabled], +[disabled].dropdown-menu-toggle { + @extend %disabled; + + &:hover { + @extend %disabled; + } +} diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 4c6b32630e1..691df098c70 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 76c0fbdc145..f76c6866463 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 { diff --git a/changelogs/unreleased/26296-update-styling-disabled-buttons.yml b/changelogs/unreleased/26296-update-styling-disabled-buttons.yml new file mode 100644 index 00000000000..5fa109d75e0 --- /dev/null +++ b/changelogs/unreleased/26296-update-styling-disabled-buttons.yml @@ -0,0 +1,5 @@ +--- +title: Set standard disabled state for all buttons +merge_request: +author: +type: other |