Update styling of all disabled buttons

5 files changed, 33 insertions, 13 deletions

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;
-
-    &:hover,
-    &:active {
-      background-color: $white-light;
-      border-color: $border-color;
+    cursor: not-allowed;
+    background-color: $gray-light;
+    border-color: $theme-gray-200;
+    color: $gl-text-color-disabled;
+
+    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 {