material_components_web-sass 0.1.1

data/vendor/assets/stylesheets/@material/select/mdc-select.scss

@@ -0,0 +1,174 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "@material/animation/functions";
+@import "@material/typography/mixins";
+@import "@material/theme/mixins";
+@import "@material/rtl/mixins";
+
+@mixin mdc-select-dd-arrow-svg-bg_($fill-hex-number: 000000, $opacity: .54) {
+  // stylelint-disable scss/dollar-variable-pattern
+  background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23#{$fill-hex-number}%22%20fill-rule%3D%22evenodd%22%20opacity%3D%22#{$opacity}%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E);
+  // stylelint-enable scss/dollar-variable-pattern
+}
+
+// postcss-bem-linter: define select
+.mdc-select {
+  @include mdc-typography(subheading2);
+  @include mdc-theme-prop(color, text-primary-on-light);
+  @include mdc-rtl-reflexive-box(padding, right, 24px);
+
+  // Resets for <select> element
+  appearance: none;
+
+  &::-ms-expand {
+    display: none;
+  }
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 32px;
+  transition:
+    mdc-animation-exit(border-bottom-color, 150ms),
+    mdc-animation-exit(background-color, 150ms);
+  border: none;
+  border-bottom: 1px solid rgba(black, .12);
+  border-radius: 0;
+  background: none;
+  background-repeat: no-repeat;
+  background-position: right center;
+
+  @include mdc-select-dd-arrow-svg-bg_;
+
+  font-family: Roboto, sans-serif;
+  font-size: .936rem;
+  cursor: pointer;
+
+  &:focus {
+    @include mdc-theme-prop(border-bottom-color, primary);
+
+    outline: none;
+    background-color: rgba(black, .06);
+  }
+
+  @include mdc-rtl {
+    background-position: left center;
+  }
+
+  @include mdc-theme-dark {
+    @include mdc-theme-prop(color, text-primary-on-dark);
+    @include mdc-select-dd-arrow-svg-bg_(ffffff);
+
+    border-bottom: 1px solid rgba(white, .12);
+
+    &:focus {
+      @include mdc-theme-prop(border-bottom-color, primary);
+
+      background-color: rgba(white, .09);
+    }
+  }
+
+  &__menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    max-height: 100%;
+    transform-origin: center center;
+    overflow-y: scroll;
+  }
+
+  &__selected-text {
+    transition:
+      mdc-animation-exit(opacity, 125ms),
+      mdc-animation-exit(transform, 125ms);
+  }
+}
+
+.mdc-select--open {
+  .mdc-select__selected-text {
+    transform: translateY(8px);
+    transition:
+      mdc-animation-enter(opacity, 125ms, 125ms),
+      mdc-animation-enter(transform, 125ms, 125ms);
+    opacity: 0;
+  }
+}
+
+.mdc-select--disabled,
+.mdc-select[disabled] {
+  @include mdc-theme-prop(color, text-disabled-on-light);
+  @include mdc-select-dd-arrow-svg-bg_(000000, .38);
+
+  border-bottom-style: dotted;
+  cursor: default;
+  pointer-events: none;
+  // Imitate native disabled functionality
+  user-select: none;
+
+  @include mdc-theme-dark(".mdc-select", true) {
+    @include mdc-theme-prop(color, text-disabled-on-dark);
+    @include mdc-select-dd-arrow-svg-bg_(ffffff, .38);
+
+    border-bottom: 1px dotted rgba(white, .38);
+  }
+}
+
+// postcss-bem-linter: end
+
+.mdc-select__menu {
+  .mdc-list-item {
+    @include mdc-typography(subheading2);
+    @include mdc-theme-prop(color, text-secondary-on-light);
+
+    &[aria-selected="true"] {
+      @include mdc-theme-prop(color, text-primary-on-light);
+    }
+
+    @include mdc-theme-dark(".mdc-select") {
+      @include mdc-theme-prop(color, text-secondary-on-dark);
+
+      &[aria-selected="true"] {
+        @include mdc-theme-prop(color, text-primary-on-dark);
+      }
+    }
+  }
+
+  .mdc-list-group,
+  .mdc-list-group > .mdc-list-item:first-child {
+    margin-top: 12px;
+  }
+
+  .mdc-list-group {
+    @include mdc-theme-prop(color, text-hint-on-light);
+
+    font-weight: normal;
+
+    .mdc-list-item {
+      @include mdc-theme-prop(color, text-primary-on-light);
+    }
+  }
+
+  @include mdc-theme-dark(".mdc-select") {
+    .mdc-list-group {
+      @include mdc-theme-prop(color, text-hint-on-dark);
+
+      .mdc-list-item {
+        @include mdc-theme-prop(color, text-primary-on-dark);
+      }
+    }
+  }
+}

data/vendor/assets/stylesheets/@material/snackbar/_variables.scss

@@ -0,0 +1,22 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Hard coded since the color is not present in any palette.
+$mdc-snackbar-background-color: #323232;
+$mdc-snackbar-foreground-color: white;
+// TODO: Better spot to pull this breakpoint?
+//$snackbar-tablet-breakpoint: $grid-tablet-breakpoint;
+$mdc-snackbar-tablet-breakpoint: 600px;

data/vendor/assets/stylesheets/@material/snackbar/mdc-snackbar.scss

@@ -0,0 +1,126 @@
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "@material/animation/functions";
+@import "@material/rtl/mixins";
+@import "@material/theme/mixins";
+@import "@material/typography/mixins";
+@import "./variables";
+
+/* postcss-bem-linter: define snackbar */
+.mdc-snackbar {
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  align-items: center;
+  justify-content: flex-start;
+  padding-right: 24px;
+  padding-left: 24px;
+  transform: translate(0, 100%);
+  transition: mdc-animation-exit(transform, .25s);
+  background-color: $mdc-snackbar-background-color;
+  will-change: transform;
+  pointer-events: none;
+
+  @media (max-width: ($mdc-snackbar-tablet-breakpoint - 1)) {
+    left: 0;
+    width: calc(100% - 48px);
+  }
+
+  @media (min-width: $mdc-snackbar-tablet-breakpoint) {
+    min-width: 288px;
+    max-width: 568px;
+    transform: translate(-50%, 100%);
+    border-radius: 2px;
+  }
+
+  &--active {
+    transform: translate(0, 0);
+    pointer-events: auto;
+    transition: mdc-animation-enter(transform, .25s);
+
+    @media (min-width: $mdc-snackbar-tablet-breakpoint) {
+      transform: translate(-50%, 0);
+    }
+  }
+
+  &--action-on-bottom {
+    flex-direction: column;
+  }
+
+  &--action-on-bottom &__text {
+    margin-right: inherit;
+  }
+
+  &--action-on-bottom &__action-wrapper {
+    flex-direction: column;
+    justify-content: flex-start;
+    margin-top: -12px;
+    margin-bottom: 8px;
+
+    @include mdc-rtl-reflexive-box(margin, left, auto);
+  }
+
+  &__text {
+    @include mdc-typography(body1);
+    @include mdc-rtl-reflexive-box(margin, right, auto, ".mdc-snackbar");
+
+    display: flex;
+    align-items: center;
+    height: 48px;
+    transition: mdc-animation-exit(opacity, .3s);
+    color: $mdc-snackbar-foreground-color;
+    opacity: 0;
+  }
+
+  &--multiline &__text {
+    height: 80px;
+  }
+
+  /* stylelint-disable plugin/selector-bem-pattern */
+  &--multiline#{&}--action-on-bottom &__text {
+    margin: 0;
+  }
+  /* stylelint-enable plugin/selector-bem-pattern */
+
+  &__action-button {
+    @include mdc-theme-prop(color, accent);
+    @include mdc-rtl-reflexive-box(margin, right, -16px, ".mdc-snackbar");
+
+    min-width: auto;
+    height: inherit;
+    transition: mdc-animation-exit(opacity, .3s);
+    opacity: 0;
+    visibility: hidden;
+
+    &::-moz-focus-inner {
+      border: 0;
+    }
+
+    &:not([aria-hidden]) {
+      visibility: inherit;
+    }
+  }
+
+  &--active &__text,
+  &--active &__action-button:not([aria-hidden]) {
+    transition: mdc-animation-exit(opacity, .3s);
+    opacity: 1;
+  }
+}
+
+/* postcss-bem-linter: end */

data/vendor/assets/stylesheets/@material/textfield/mdc-textfield.scss

@@ -0,0 +1,512 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "@material/animation/variables";
+@import "@material/rtl/mixins";
+@import "@material/theme/variables";
+@import "@material/theme/mixins";
+@import "@material/typography/mixins";
+@import "@material/typography/variables";
+
+$mdc-textfield-error-on-light: #d50000;
+$mdc-textfield-error-on-dark: #ff6e6e;
+$mdc-textfield-divider-on-light: rgba(black, .12);
+$mdc-textfield-divider-on-dark: rgba(white, .12);
+$mdc-textfield-disabled-border-on-light: rgba(#231f20, .26);
+$mdc-textfield-disabled-border-on-dark: rgba(white, .3);
+
+@function mdc-textfield-transition($property) {
+  @return #{$property} 180ms $mdc-animation-fast-out-slow-in-timing-function;
+}
+
+/* postcss-bem-linter: define textfield */
+.mdc-textfield {
+  @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.
+  @each $prop in (font-size, letter-spacing) {
+    #{$prop}: map-get(map-get($mdc-typography-styles, subheading2), $prop);
+  }
+
+  display: inline-block;
+  margin-bottom: 8px;
+  will-change: opacity, transform, color;
+
+  &__input {
+    @include mdc-theme-prop(color, text-primary-on-light);
+
+    padding: 0 0 8px;
+    border: none;
+    background: none;
+    font-size: inherit;
+    appearance: none;
+
+    &::placeholder {
+      @include mdc-theme-prop(color, text-hint-on-light);
+
+      transition: mdc-textfield-transition(color);
+      opacity: 1;
+    }
+
+    &:focus {
+      outline: none;
+
+      &::placeholder {
+        @include mdc-theme-prop(color, text-secondary-on-light);
+      }
+    }
+
+    // Remove red outline on firefox
+    &:invalid {
+      box-shadow: none;
+    }
+
+    @include mdc-theme-dark {
+      color: white;
+
+      &::placeholder {
+        @include mdc-theme-prop(color, text-hint-on-dark);
+      }
+
+      &:focus::placeholder {
+        @include mdc-theme-prop(color, text-secondary-on-dark);
+      }
+    }
+  }
+
+  &__label {
+    @include mdc-theme-prop(color, text-hint-on-light);
+
+    position: absolute;
+    bottom: 8px;
+    left: 0;
+    transform-origin: left top;
+    transition: mdc-textfield-transition(transform), mdc-textfield-transition(color);
+    cursor: text;
+
+    /* stylelint-disable plugin/selector-bem-pattern */
+    @include mdc-rtl(".mdc-textfield") {
+      right: 0;
+      left: auto;
+      transform-origin: right top;
+    }
+    /* stylelint-enable plugin/selector-bem-pattern */
+
+    @include mdc-theme-dark(".mdc-textfield") {
+      @include mdc-theme-prop(color, text-hint-on-dark);
+    }
+
+    &--float-above {
+      transform: translateY(-100%) scale(.75, .75);
+      cursor: auto;
+    }
+  }
+}
+
+.mdc-textfield--upgraded:not(.mdc-textfield--fullwidth) {
+  display: inline-flex;
+  position: relative;
+  box-sizing: border-box;
+  align-items: flex-end;
+  margin-top: 16px;
+
+  &:not(.mdc-textfield--multiline) {
+    height: 48px;
+
+    &::after {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      transform: translateY(50%) scaleY(1);
+      transform-origin: center bottom;
+      transition: mdc-textfield-transition(background-color), mdc-textfield-transition(transform);
+      background-color: $mdc-textfield-divider-on-light;
+      content: "";
+
+      @include mdc-theme-dark(".mdc-textfield") {
+        background-color: $mdc-textfield-divider-on-dark;
+      }
+    }
+  }
+
+  .mdc-textfield__label {
+    pointer-events: none;
+  }
+}
+
+.mdc-textfield--focused {
+  @mixin mdc-textfield-after-styles {
+    @include mdc-theme-prop(background-color, primary);
+
+    transform: translateY(100%) scaleY(2);
+    transition: mdc-textfield-transition(transform);
+  }
+
+  @mixin mdc-textfield-label-styles {
+    @include mdc-theme-prop(color, primary);
+  }
+
+  &.mdc-textfield--upgraded:not(.mdc-textfield--fullwidth):not(.mdc-textfield--multiline)::after {
+    @include mdc-textfield-after-styles;
+
+    @include mdc-theme-dark(".mdc-textfield", true) {
+      @include mdc-textfield-after-styles;
+    }
+  }
+
+  .mdc-textfield__label {
+    @include mdc-textfield-label-styles;
+
+    @include mdc-theme-dark(".mdc-textfield") {
+      @include mdc-textfield-label-styles;
+    }
+  }
+}
+
+.mdc-textfield--dense {
+  margin-top: 12px;
+  margin-bottom: 4px;
+  font-size: .813rem;
+
+  .mdc-textfield__label--float-above {
+    // NOTE: This is an eyeball'd approximation of what's in the mocks.
+    transform: translateY(calc(-100% - 2px)) scale(.923, .923);
+  }
+}
+
+.mdc-textfield--invalid {
+  &:not(.mdc-textfield--focused) {
+    &::after {
+      background-color: $mdc-textfield-error-on-light;
+    }
+
+    .mdc-textfield__label {
+      color: $mdc-textfield-error-on-light;
+    }
+  }
+
+  @include mdc-theme-dark(".mdc-textfield", true) {
+    &:not(.mdc-textfield--focused) {
+      &::after {
+        background-color: $mdc-textfield-error-on-dark;
+      }
+
+      .mdc-textfield__label {
+        color: $mdc-textfield-error-on-dark;
+      }
+    }
+  }
+}
+
+.mdc-textfield--disabled {
+  &::after {
+    display: none;
+  }
+
+  // Account for offset by border
+  .mdc-textfield__input {
+    padding-bottom: 7px;
+  }
+
+  border-bottom: 1px dotted $mdc-textfield-disabled-border-on-light;
+
+  @include mdc-theme-dark(".mdc-textfield", true) {
+    border-bottom: 1px dotted $mdc-textfield-disabled-border-on-dark;
+  }
+
+  /* stylelint-disable plugin/selector-bem-pattern */
+  .mdc-textfield__input,
+  .mdc-textfield__label,
+  & + .mdc-textfield-helptext {
+    @include mdc-theme-prop(color, text-disabled-on-light);
+  }
+  /* stylelint-enable plugin/selector-bem-pattern */
+
+  .mdc-textfield__input,
+  .mdc-textfield__label {
+    @include mdc-theme-dark(".mdc-textfield") {
+      @include mdc-theme-prop(color, text-disabled-on-dark);
+    }
+  }
+
+  @include mdc-theme-dark(".mdc-textfield", true) {
+    /* stylelint-disable plugin/selector-bem-pattern */
+    + .mdc-textfield-helptext {
+      @include mdc-theme-prop(colr, text-disabled-on-dark);
+    }
+    /* stylelint-enable plugin/selector-bem-pattern */
+  }
+
+  .mdc-textfield__label {
+    bottom: 7px;
+    cursor: default;
+  }
+}
+
+.mdc-textfield__input:required + .mdc-textfield__label::after {
+  margin-left: 1px;
+  content: "*";
+
+  .mdc-textfield--focused & {
+    color: $mdc-textfield-error-on-light;
+  }
+
+  @include mdc-theme-dark(".mdc-textfield") {
+    .mdc-textfield--focused & {
+      color: $mdc-textfield-error-on-dark;
+    }
+  }
+}
+
+.mdc-textfield--multiline {
+  /* stylelint-disable scss/dollar-variable-pattern */
+  $padding-inset: 4px;
+  $label-offset-y: $padding-inset + 2;
+  $label-offset-x: $padding-inset;
+  /* stylelint-enable scss/dollar-variable-pattern */
+
+  display: flex;
+  height: initial;
+  transition: none;
+
+  &::after {
+    content: initial;
+  }
+
+  /* stylelint-disable plugin/selector-bem-pattern */
+
+  .mdc-textfield__input {
+    padding: $padding-inset;
+    transition: mdc-textfield-transition(border-color);
+    border: 1px solid $mdc-textfield-divider-on-light;
+    border-radius: 2px;
+
+    @include mdc-theme-dark(".mdc-textfield") {
+      border-color: $mdc-textfield-divider-on-dark;
+    }
+
+    &:focus {
+      @include mdc-theme-prop(border-color, primary);
+    }
+
+    &:invalid:not(:focus) {
+      border-color: $mdc-textfield-error-on-light;
+    }
+
+    @include mdc-theme-dark(".mdc-textfield") {
+      &:invalid:not(:focus) {
+        border-color: $mdc-textfield-error-on-dark;
+      }
+    }
+  }
+
+  .mdc-textfield__label {
+    top: $label-offset-y;
+    bottom: initial;
+    left: $label-offset-x;
+
+    @include mdc-rtl(".mdc-textfield--multiline") {
+      right: $label-offset-x;
+      left: auto;
+    }
+
+    &--float-above {
+      // Translate above the top of the input, and compensate for the amount of offset needed
+      // to position the label within the bounds of the inset padding.
+      // Note that the scale factor is an eyeball'd approximation of what's shown in the mocks.
+      transform: translateY(calc(-100% - #{$label-offset-y})) scale(.923, .923);
+    }
+  }
+
+  &.mdc-textfield--disabled {
+    border-bottom: none;
+
+    .mdc-textfield__input {
+      border: 1px dotted $mdc-textfield-disabled-border-on-light;
+
+      @include mdc-theme-dark(".mdc-textfield") {
+        border-color: $mdc-textfield-disabled-border-on-dark;
+      }
+    }
+  }
+  /* stylelint-enable plugin/selector-bem-pattern */
+}
+
+.mdc-textfield--fullwidth {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  border-bottom: 1px solid $mdc-textfield-divider-on-light;
+  outline: none;
+
+  /* stylelint-disable plugin/selector-bem-pattern */
+
+  &:not(.mdc-textfield--multiline) {
+    height: 56px;
+  }
+
+  &.mdc-textfield--multiline {
+    padding: 20px 0 0;
+  }
+
+  &.mdc-textfield--dense {
+    &:not(.mdc-textfield--multiline) {
+      height: 48px;
+    }
+
+    &.mdc-textfield--multiline {
+      padding: 16px 0 0;
+    }
+  }
+
+  &.mdc-textfield--disabled {
+    &,
+    &.mdc-textfield--multiline {
+      border-bottom: 1px dotted $mdc-textfield-divider-on-light;
+    }
+  }
+
+  @include mdc-theme-dark {
+    border-bottom: 1px solid $mdc-textfield-divider-on-dark;
+
+    &.mdc-textfield--disabled {
+      &,
+      &.mdc-textfield--multiline {
+        border-bottom: 1px dotted $mdc-textfield-divider-on-dark;
+      }
+    }
+  }
+
+  /* stylelint-enable plugin/selector-bem-pattern */
+
+  .mdc-textfield__input {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    resize: none;
+    // Use !important here to override all other border treatments
+    border: none !important;
+  }
+}
+
+// Graceful degredation for css-only inputs
+
+.mdc-textfield {
+  &:not(.mdc-textfield--upgraded):not(.mdc-textfield--multiline) .mdc-textfield__input {
+    transition: mdc-textfield-transition(border-bottom-color);
+    border-bottom: 1px solid $mdc-textfield-divider-on-light;
+  }
+
+  &:not(.mdc-textfield--upgraded) .mdc-textfield__input {
+    &:focus {
+      @include mdc-theme-prop(border-color, primary);
+    }
+
+    &:disabled {
+      @include mdc-theme-prop(color, text-disabled-on-light);
+
+      border-style: dotted;
+      border-color: $mdc-textfield-disabled-border-on-light;
+    }
+
+    &:invalid:not(:focus) {
+      border-color: $mdc-textfield-error-on-light;
+    }
+  }
+
+  @include mdc-theme-dark {
+    &:not(.mdc-textfield--upgraded) .mdc-textfield__input {
+      &:not(:focus) {
+        border-color: rgba(white, .12);
+      }
+
+      &:disabled {
+        @include mdc-theme-prop(color, text-disabled-on-dark);
+
+        border-color: $mdc-textfield-disabled-border-on-dark;
+      }
+
+      &:invalid:not(:focus) {
+        border-color: $mdc-textfield-error-on-dark;
+      }
+    }
+  }
+}
+
+/* postcss-bem-linter: end */
+
+/* postcss-bem-linter: define textfield-helptext */
+
+.mdc-textfield-helptext {
+  @include mdc-theme-prop(color, text-hint-on-light);
+
+  margin: 0;
+  transition: mdc-textfield-transition(opacity);
+  font-size: .75rem;
+  opacity: 0;
+  will-change: opacity;
+
+  @include mdc-theme-dark {
+    @include mdc-theme-prop(color, text-hint-on-dark);
+  }
+
+  /* stylelint-disable plugin/selector-bem-pattern */
+  .mdc-textfield + & {
+    margin-bottom: 8px;
+  }
+
+  .mdc-textfield--dense + & {
+    margin-bottom: 4px;
+  }
+
+  .mdc-textfield--focused + &:not(#{&}--validation-msg) {
+    opacity: 1;
+  }
+
+  /* stylelint-enable plugin/selector-bem-pattern */
+}
+
+.mdc-textfield-helptext--persistent {
+  transition: none;
+  opacity: 1;
+  will-change: initial;
+}
+
+/* postcss-bem-linter: end */
+
+.mdc-textfield--invalid {
+  + .mdc-textfield-helptext--validation-msg {
+    color: $mdc-textfield-error-on-light;
+    opacity: 1;
+  }
+
+  @include mdc-theme-dark(".mdc-textfield", true) {
+    + .mdc-textfield-helptext--validation-msg {
+      color: $mdc-textfield-error-on-dark;
+    }
+  }
+}
+
+// mdc-form-field tweaks to align text field label correctly
+/* stylelint-disable selector-no-type */
+.mdc-form-field > .mdc-textfield + label {
+  align-self: flex-start;
+}
+/* stylelint-enable selector-no-type */