Merge branch '26296-update-styling-disabled-buttons' into 'master'

Resolve "Review styling of disabled buttons"

Closes #26296

See merge request gitlab-org/gitlab-ce!16501

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