fix: update disabled btn state

techfromsage · Jun 11, 2021 · e30751e · e30751e
1 parent 2ad1a53
commit e30751e
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 29 deletions.
diff --git a/assets/stylesheets/bootstrap/mixins/_buttons.scss b/assets/stylesheets/bootstrap/mixins/_buttons.scss
@@ -3,6 +3,8 @@
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 
+$btn-disabled-color: #69727F;
+
 @mixin button-variant-plain($color, $background) {
   color: $color;
   background-color: $background;
@@ -49,8 +51,8 @@
   &[disabled],
   fieldset[disabled] {
     background-color: $white;
-    border-color: #ADB5BD;
-    color: #ADB5BD;
+    border-color: $btn-disabled-color;
+    color: $btn-disabled-color;
   }
 
   &.disabled,
@@ -60,8 +62,8 @@
     &:focus,
     &.focus {
       background-color: $white;
-      border-color: #ADB5BD;
-      color: #ADB5BD;
+      border-color: $btn-disabled-color;
+      color: $btn-disabled-color;
       box-shadow: none;
     }
   }
@@ -112,8 +114,8 @@
   &.disabled,
   &[disabled],
   fieldset[disabled] {
-    background-color: #ADB5BD;
-    border-color: #ADB5BD;
+    background-color: $btn-disabled-color;
+    border-color: $btn-disabled-color;
     color: $white;
     box-shadow: none;
   }
@@ -127,8 +129,8 @@
     &:hover,
     &:focus,
     &.focus {
-      background-color: #ADB5BD;
-      border-color: #ADB5BD;
+      background-color: $btn-disabled-color;
+      border-color: $btn-disabled-color;
       color: $white;
       box-shadow: none;
     }
@@ -193,8 +195,8 @@
   &.disabled,
   &[disabled],
   fieldset[disabled] {
-    background-color: #ADB5BD;
-    border-color: #ADB5BD;
+    background-color: $btn-disabled-color;
+    border-color: $btn-disabled-color;
     color: $white;
     box-shadow: none;
   }
@@ -208,8 +210,8 @@
     &:hover,
     &:focus,
     &.focus {
-      background-color: #ADB5BD;
-      border-color: #ADB5BD;
+      background-color: $btn-disabled-color;
+      border-color: $btn-disabled-color;
       color: $white;
       box-shadow: none;
     }

diff --git a/dist/app.css b/dist/app.css
diff --git a/dist/app.css.map b/dist/app.css.map
diff --git a/index.html b/index.html
@@ -318,6 +318,8 @@ <h3>Large</h3>
         <h3>XS</h3>
         <button class="btn btn-xs btn-default">XS button</button>
         <button class="btn btn-xs btn-primary">XS button</button>
+        <button class="btn btn-xs btn-primary" disabled>XS button</button>
+        <button class="btn btn-xs btn-default" disabled>XS button</button>
       </div>
     </section>
     <hr>