Improvement/Disabled buttons styling (#96)

weglot · Jan 13, 2025 · d5aa247 · d5aa247
1 parent 2cdaea2
commit d5aa247
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 8 deletions.
diff --git a/scss/_button.scss b/scss/_button.scss
@@ -1,3 +1,21 @@
+@each $color, $value in $theme-colors {
+    .btn-#{$color} {
+        @include button-variant(
+            $value,
+            $value,
+            $disabled-background: $gray-500,
+            $disabled-border: $border-color,
+            $disabled-color: $light
+        );
+    }
+}
+
+@each $color, $value in $theme-colors {
+    .btn-outline-#{$color} {
+        @include button-outline-variant($value);
+    }
+}
+
 .btn-link {
     font-weight: 500;
 }
@@ -25,12 +43,6 @@
         background-color: $blue;
         border-color: $blue;
     }
-
-    &.disabled,
-    &:disabled {
-        background-color: $primary;
-        border-color: $primary;
-    }
 }
 
 .btn-secondary {

diff --git a/styleguide/_docs/components/buttons.html b/styleguide/_docs/components/buttons.html
@@ -5,4 +5,5 @@
 {% include component.html url='/patterns/components/buttons/buttons.html' %}
 {% include component.html url='/patterns/components/buttons/outline-buttons.html' %}
 {% include component.html url='/patterns/components/buttons/buttons-sizes.html' %}
-{% include component.html url='/patterns/components/buttons/buttons-states.html' %}
+{% include component.html url='/patterns/components/buttons/buttons-states.html' %}
+{% include component.html url='/patterns/components/buttons/buttons-disabled.html' %}
diff --git a/styleguide/patterns/components/buttons/buttons-disabled.html b/styleguide/patterns/components/buttons/buttons-disabled.html
@@ -0,0 +1,16 @@
+---
+title: Disabled button
+category: button
+category_order: 4
+---
+<button type="button" class="btn btn-primary disabled">Primary</button>
+<button type="button" class="btn btn-secondary disabled">Secondary</button>
+<button type="button" class="btn btn-success disabled">Success</button>
+<button type="button" class="btn btn-danger disabled">Danger</button>
+<button type="button" class="btn btn-warning disabled">Warning</button>
+<button type="button" class="btn btn-info disabled">Info</button>
+<button type="button" class="btn btn-light disabled">Light</button>
+<button type="button" class="btn btn-dark disabled">Dark</button>
+<button type="button" class="btn btn-link disabled">Link</button>
+<button type="button" class="btn btn-primary btn-icon disabled"><i class="material-icons">check</i></button>
+
diff --git a/styleguide/patterns/components/buttons/buttons-states.html b/styleguide/patterns/components/buttons/buttons-states.html
@@ -4,4 +4,4 @@
 category_order: 4
 ---
 <button type="button" class="btn btn-primary active">Active button</button>
-<button type="button" class="btn btn-primary disabled">Disabled button</button>
+<button type="button" class="btn btn-primary disabled">Disabled button</button>