feat(text-field): Update mixins

material-components · Jan 16, 2018 · 3e8aac1 · 3e8aac1
1 parent 326c665
commit 3e8aac1
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 37 deletions.
diff --git a/demos/text-field.scss b/demos/text-field.scss
@@ -25,9 +25,9 @@
   @include mdc-text-field-focused-bottom-line-color(blue);
   @include mdc-text-field-ink-color(black);
   @include mdc-text-field-label-color(rgba(blue, .5));
-  @include mdc-text-field-outline-stroke-color(rgba(blue, .38));
-  @include mdc-text-field-hover-outline-stroke-color(rgba(blue, .6));
-  @include mdc-text-field-focused-outline-stroke-color(rgba(blue, 1));
+  @include mdc-text-field-outline-color(rgba(blue, .38));
+  @include mdc-text-field-hover-outline-color(rgba(blue, .6));
+  @include mdc-text-field-focused-outline-color(rgba(blue, 1));
   @include mdc-text-field-helper-text-color(rgba(blue, .38));
 
   &.mdc-text-field--focused {
@@ -41,9 +41,9 @@
   @include mdc-text-field-focused-bottom-line-color(orange);
   @include mdc-text-field-ink-color(orange);
   @include mdc-text-field-label-color(rgba(orange, .87));
-  @include mdc-text-field-outline-stroke-color(rgba(orange, .38));
-  @include mdc-text-field-hover-outline-stroke-color(rgba(orange, .6));
-  @include mdc-text-field-focused-outline-stroke-color(rgba(orange, 1));
+  @include mdc-text-field-outline-color(rgba(orange, .38));
+  @include mdc-text-field-hover-outline-color(rgba(orange, .6));
+  @include mdc-text-field-focused-outline-color(rgba(orange, 1));
   @include mdc-text-field-helper-text-validation-color(rgba(orange, .6));
 }
 // stylelint-enable selector-class-pattern
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
@@ -210,9 +210,9 @@ Mixin | Description
 `mdc-text-field-focused-bottom-line-color($color)` | Customizes the bottom-line ripple color when the text-field is focused.  
 `mdc-text-field-ink-color($color)` | Customizes the text entered into the text-field. 
 `mdc-text-field-label-color($color)` | Customizes the label color of the text-field. 
-`mdc-text-field-outline-stroke-color($color)` | Customizes the color of the border of the outlined text-field. 
-`mdc-text-field-hover-outline-stroke-color($color)` | Customizes the hover color of the border of the outlined text-field.
-`mdc-text-field-focused-outline-stroke-color($color)` | Customizes the outlined border color when the text-field is focused.
+`mdc-text-field-outline-color($color)` | Customizes the color of the border of the outlined text-field. 
+`mdc-text-field-hover-outline-color($color)` | Customizes the hover color of the border of the outlined text-field.
+`mdc-text-field-focused-outline-color($color)` | Customizes the outlined border color when the text-field is focused.
 `mdc-text-field-helper-text-color($color)` | Customizes the color of the helper text following a text-field.
 `mdc-text-field-helper-text-validation-color($color)` | Customizes the color of the helper text when it's used as a validation message. 
 }

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
@@ -74,12 +74,6 @@
   }
 }
 
-@mixin mdc-text-field-input-hover-outline-stroke-color($color) {
-  &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-input-hover-outline-stroke-color_($color);
-  }
-}
-
 // Private mixins
 
 // Common
@@ -128,9 +122,9 @@
   @include mdc-text-field-helper-text-validation-color($mdc-text-field-error-on-light);
 
   // Outline specific mixins
-  @include mdc-text-field-outline-stroke-color($mdc-text-field-error-on-light);
-  @include mdc-text-field-hover-outline-stroke-color($mdc-text-field-error-on-light);
-  @include mdc-text-field-focused-outline-stroke-color($mdc-text-field-error-on-light);
+  @include mdc-text-field-outline-color($mdc-text-field-error-on-light);
+  @include mdc-text-field-hover-outline-color($mdc-text-field-error-on-light);
+  @include mdc-text-field-focused-outline-color($mdc-text-field-error-on-light);
 
   + .mdc-text-field-helper-text--validation-msg {
     opacity: 1;
@@ -167,7 +161,7 @@
 
 @mixin mdc-text-field-outline-disabled_ {
   @include mdc-text-field-ink-color_($mdc-text-field-light-placeholder);
-  @include mdc-text-field-outline-stroke-color_($mdc-text-field-outlined-disabled-border);
+  @include mdc-text-field-outline-color_($mdc-text-field-outlined-disabled-border);
 
   .mdc-text-field__input {
     border-bottom: none;
@@ -242,9 +236,3 @@
     @include mdc-theme-prop(color, $color);
   }
 }
-
-@mixin mdc-text-field-input-hover-outline-stroke-color_($color) {
-  .mdc-text-field__input:hover ~ .mdc-text-field__idle-outline {
-    @include mdc-theme-prop(border-color, $color);
-  }
-}
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
@@ -46,9 +46,9 @@
   @include mdc-text-field-helper-text-color(text-hint-on-light);
 
   // Outline specific colors
-  @include mdc-text-field-outline-stroke-color($mdc-text-field-outlined-idle-border);
-  @include mdc-text-field-hover-outline-stroke-color($mdc-text-field-outlined-hover-border);
-  @include mdc-text-field-focused-outline-stroke-color(primary);
+  @include mdc-text-field-outline-color($mdc-text-field-outlined-idle-border);
+  @include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border);
+  @include mdc-text-field-focused-outline-color(primary);
 
   display: inline-block;
   position: relative;

diff --git a/packages/mdc-textfield/outline/_mixins.scss b/packages/mdc-textfield/outline/_mixins.scss
@@ -16,27 +16,27 @@
 
 // Public mixins
 
-@mixin mdc-text-field-outline-stroke-color($color) {
+@mixin mdc-text-field-outline-color($color) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-outline-stroke-color_($color);
+    @include mdc-text-field-outline-color_($color);
   }
 }
 
-@mixin mdc-text-field-hover-outline-stroke-color($color) {
+@mixin mdc-text-field-hover-outline-color($color) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-hover-outline-stroke-color_($color);
+    @include mdc-text-field-hover-outline-color_($color);
   }
 }
 
-@mixin mdc-text-field-focused-outline-stroke-color($color) {
+@mixin mdc-text-field-focused-outline-color($color) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-focused-outline-stroke-color_($color);
+    @include mdc-text-field-focused-outline-color_($color);
   }
 }
 
 // Private mixins
 
-@mixin mdc-text-field-outline-stroke-color_($color) {
+@mixin mdc-text-field-outline-color_($color) {
   .mdc-text-field__idle-outline {
     @include mdc-theme-prop(border-color, $color);
   }
@@ -46,14 +46,14 @@
   }
 }
 
-@mixin mdc-text-field-hover-outline-stroke-color_($color) {
+@mixin mdc-text-field-hover-outline-color_($color) {
   .mdc-text-field__input:hover ~ .mdc-text-field__idle-outline,
   .mdc-text-field__icon:hover ~ .mdc-text-field__idle-outline {
     @include mdc-theme-prop(border-color, $color);
   }
 }
 
-@mixin mdc-text-field-focused-outline-stroke-color_($color) {
+@mixin mdc-text-field-focused-outline-color_($color) {
   &.mdc-text-field--focused .mdc-text-field__outline-path {
     @include mdc-theme-prop(stroke, $color);
   }