File "_textfield-mdc.scss"

Full Path: /home/vantageo/public_html/cache/.wp-cli/wp-content/plugins/material-design-for-contact-form-7/v1/scss/_textfield-mdc.scss
File size: 11.18 KB
MIME-type: text/plain
Charset: utf-8

@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;
    }
  }
}

// Move label when textfield gets autofilled in Chrome
.mdc-textfield__input {
  // stylelint-disable plugin/selector-bem-pattern
  &:-webkit-autofill + .mdc-textfield__label {
    transform: translateY(-100%) scale(.75, .75);
    cursor: auto;
  }
  // stylelint-enable plugin/selector-bem-pattern  
}

.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 {
  $padding-inset: 4px;
  $label-offset-y: $padding-inset + 2;
  $label-offset-x: $padding-inset;

  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