style(textfield): Fix mdc-text-field__input to be its own stanza (#1849)

material-components · Jan 3, 2018 · 308f600 · 308f600
1 parent 69687be
commit 308f600
Showing 1 changed file with 50 additions and 50 deletions.
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
@@ -41,69 +41,69 @@
   position: relative;
   margin-bottom: 8px;
   will-change: opacity, transform, color;
+}
 
-  &__input {
-    @include mdc-theme-prop(color, text-primary-on-light);
-    @include mdc-typography-base;
-    // We use only a subset of the MDC typography values here as changing things such as line-height
-    // affects how the labels are transformed.
-    // TODO: Re-add setting the font-size from mdc-typography-styles (currently
-    // setting it here has no effect because it is overriden by the font-size
-    // given below).
-    @each $prop in (letter-spacing) {
-      #{$prop}: map-get(map-get($mdc-typography-styles, subheading2), $prop);
-    }
-
-    width: 100%;
-    padding: 0 0 8px;
-    transition: mdc-text-field-transition(opacity);
-    border: none;
-    border-bottom: 1px solid $mdc-text-field-underline-on-light-idle;
-    border-radius: 0;
-    background: none;
-    font-size: inherit;
-    appearance: none;
+.mdc-text-field__input {
+  @include mdc-theme-prop(color, text-primary-on-light);
+  @include mdc-typography-base;
+  // We use only a subset of the MDC typography values here as changing things such as line-height
+  // affects how the labels are transformed.
+  // TODO: Re-add setting the font-size from mdc-typography-styles (currently
+  // setting it here has no effect because it is overriden by the font-size
+  // given below).
+  @each $prop in (letter-spacing) {
+    #{$prop}: map-get(map-get($mdc-typography-styles, subheading2), $prop);
+  }
 
-    &::placeholder {
-      @include mdc-theme-prop(color, text-hint-on-light);
+  width: 100%;
+  padding: 0 0 8px;
+  transition: mdc-text-field-transition(opacity);
+  border: none;
+  border-bottom: 1px solid $mdc-text-field-underline-on-light-idle;
+  border-radius: 0;
+  background: none;
+  font-size: inherit;
+  appearance: none;
 
-      transition: mdc-text-field-transition(color);
-      opacity: 1;
-    }
+  &::placeholder {
+    @include mdc-theme-prop(color, text-hint-on-light);
 
-    &:hover {
-      border-color: $mdc-text-field-underline-on-light;
-    }
+    transition: mdc-text-field-transition(color);
+    opacity: 1;
+  }
 
-    &:focus {
-      outline: none;
+  &:hover {
+    border-color: $mdc-text-field-underline-on-light;
+  }
 
-      &::placeholder {
-        @include mdc-theme-prop(color, $mdc-text-field-light-placeholder);
-      }
-    }
+  &:focus {
+    outline: none;
 
-    // Remove red outline on firefox
-    &:invalid {
-      box-shadow: none;
+    &::placeholder {
+      @include mdc-theme-prop(color, $mdc-text-field-light-placeholder);
     }
+  }
 
-    @include mdc-theme-dark {
-      @include mdc-theme-prop(color, text-primary-on-dark);
+  // Remove red outline on firefox
+  &:invalid {
+    box-shadow: none;
+  }
 
-      border-bottom: 1px solid $mdc-text-field-underline-on-dark-idle;
+  @include mdc-theme-dark {
+    @include mdc-theme-prop(color, text-primary-on-dark);
 
-      &:hover {
-        border-bottom: 1px solid $mdc-text-field-underline-on-dark;
-      }
+    border-bottom: 1px solid $mdc-text-field-underline-on-dark-idle;
 
-      &::placeholder {
-        @include mdc-theme-prop(color, text-hint-on-dark);
-      }
+    &:hover {
+      border-bottom: 1px solid $mdc-text-field-underline-on-dark;
+    }
 
-      &:focus::placeholder {
-        @include mdc-theme-prop(color, $mdc-text-field-dark-placeholder);
-      }
+    &::placeholder {
+      @include mdc-theme-prop(color, text-hint-on-dark);
+    }
+
+    &:focus::placeholder {
+      @include mdc-theme-prop(color, $mdc-text-field-dark-placeholder);
     }
   }
 }