feat(button): Move disabled style into private base mixin (#1255)

material-components · Sep 8, 2017 · 2336128 · 2336128
1 parent 5266776
commit 2336128
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 38 deletions.
diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss
@@ -51,8 +51,37 @@
   }
 
   &:disabled {
+    @include mdc-theme-prop(background-color, transparent);
+    @include mdc-theme-prop(color, text-disabled-on-light);
+
     cursor: default;
     pointer-events: none;
+
+    @include mdc-theme-dark(".mdc-button") {
+      @include mdc-theme-prop(color, text-disabled-on-dark);
+    }
+  }
+}
+
+@mixin mdc-button--stroked_() {
+  &:disabled {
+    @include mdc-theme-prop(border-color, text-disabled-on-light);
+
+    @include mdc-theme-dark(".mdc-button") {
+      @include mdc-theme-prop(border-color, text-disabled-on-dark);
+    }
+  }
+}
+
+@mixin mdc-button--filled_() {
+  &:disabled {
+    @include mdc-theme-prop(background-color, rgba(black, .12));
+    @include mdc-theme-prop(color, text-disabled-on-light);
+
+    @include mdc-theme-dark(".mdc-button") {
+      @include mdc-theme-prop(background-color, rgba(white, .12));
+      @include mdc-theme-prop(color, text-disabled-on-light);
+    }
   }
 }
 

diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss
@@ -37,6 +37,7 @@
 
 .mdc-button--raised,
 .mdc-button--unelevated {
+  @include mdc-button--filled_;
   @include mdc-button-container-fill-color(black);
   @include mdc-button-ink-color(text-primary-on-dark);
   @include mdc-button-ripple((base-color: white, opacity: .32));
@@ -53,6 +54,7 @@
 }
 
 .mdc-button--stroked {
+  @include mdc-button--stroked_;
   @include mdc-button-stroke-width(2px);
   @include mdc-button-stroke-style(solid);
   @include mdc-button-stroke-color(text-primary-on-light);
@@ -116,42 +118,4 @@
     }
   }
 }
-
-// Disabled button styles need to be last to ensure they override other primary/accent/dark styles
-
-.mdc-button {
-  &:disabled {
-    background-color: transparent;
-    color: rgba(black, .38);
-
-    @include mdc-theme-dark(".mdc-button") {
-      @include mdc-theme-prop(color, text-disabled-on-dark);
-    }
-  }
-}
-
-.mdc-button--raised,
-.mdc-button--unelevated {
-  &:disabled {
-    @include mdc-theme-prop(color, text-primary-on-dark);
-
-    background-color: rgba(black, .15);
-
-    @include mdc-theme-dark(".mdc-button") {
-      @include mdc-theme-prop(color, text-disabled-on-dark);
-
-      background-color: rgba(255, 255, 255, .15);
-    }
-  }
-}
-
-.mdc-button--stroked {
-  &:disabled {
-    border-color: rgba(black, .38);
-
-    @include mdc-theme-dark(".mdc-button") {
-      @include mdc-theme-prop(border-color, text-disabled-on-dark);
-    }
-  }
-}
 // postcss-bem-linter: end