Easier disabled state customization for button variants (twbs#30639)

* feat(buttons): easier disabled state customization * docs(migration): mention new arguments for disabled state in button-variant() * Update migration.md Co-authored-by: XhmikosR <[email protected]> Co-authored-by: Mark Otto <[email protected]>
olsza · Oct 3, 2020 · 006bb32 · 006bb32
1 parent 8936b50
commit 006bb32
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
@@ -12,7 +12,10 @@
   $hover-color: color-contrast($hover-background),
   $active-background: darken($background, 10%),
   $active-border: darken($border, 12.5%),
-  $active-color: color-contrast($active-background)
+  $active-color: color-contrast($active-background),
+  $disabled-background: $background,
+  $disabled-border: $border,
+  $disabled-color: color-contrast($disabled-background)
 ) {
   color: $color;
   @include gradient-bg($background);
@@ -61,11 +64,11 @@
 
   &:disabled,
   &.disabled {
-    color: $color;
-    background-color: $background;
+    color: $disabled-color;
+    background-color: $disabled-background;
     // Remove CSS gradients if they're enabled
     background-image: if($enable-gradients, none, null);
-    border-color: $border;
+    border-color: $disabled-border;
   }
 }
 

diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
@@ -16,6 +16,10 @@ toc: true
 
 ### Components
 
+#### Buttons
+
+- Disabled states of buttons are easier to customize thanks to additional arguments in the `button-variant()` mixin. [See #30639.](https://github.com/twbs/bootstrap/pull/30639)
+
 #### Popovers
 
 - Renamed `whiteList` option to `allowList`