node_modules/mdl-ext/src/bordered-fields/_bordered-fields.scss

/**
 * Copyright 2016 Leif Olsen. 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.
 */

/*
 * The bordered fields are based on / inspired by this CodePen: http://codepen.io/prajwal078/pen/LVJZXz?editors=010
 */

// Use of this module requires the user to include variables from material-design-lite
//@import "../../node_modules/material-design-lite/src/variables";
//@import "../../node_modules/material-design-lite/src/mixins";

@import "../variables";
@import "../functions";


// "Theme" for this styling
.mdlext-bordered-fields {
  box-sizing: border-box;

  * {
    box-sizing: border-box;
  }

  // Styling for textfield and selectfield.
  .mdl-textfield,
  .mdlext-selectfield {
    padding: 0;
    margin: $mdlext-bordered-field-vertical-spacing-top 0 $mdlext-bordered-field-vertical-spacing-bottom 0;

    .mdl-textfield__input,
    .mdlext-selectfield__select {
      height: $mdlext-bordered-field-height;
      background-color: $mdlext-bordered-field-background-color;
      border: $mdlext-bordered-field-border-width solid $mdlext-bordered-field-border-color;
      border-radius: $mdlext-bordered-field-border-radius;
      padding: $mdlext-bordered-field-padding-top $mdlext-bordered-field-padding $mdlext-bordered-field-padding-bottom $mdlext-bordered-field-padding;
      font-size: $mdlext-bordered-field-input-text-font-size;
      font-weight: $mdlext-bordered-field-font-weight;
      color: $mdlext-bordered-field-input-text-color;

      &:disabled {
        color: $mdlext-bordered-field-input-text-disabled-text-color;
        background-color: $mdlext-bordered-field-disabled-background-color;
        border-color: $mdlext-bordered-field-disabled-border-color;
      }

      // MDL can not handle required attribute properly. Planned for MDL-v2
      //&:required {
      //  background-color: $mdlext-bordered-field-required-background-color;
      //  border-color: $mdlext-bordered-field-required-border-color;
      //}

      &:focus {
        background-color: $mdlext-bordered-field-focus-background-color;
        border-color: $mdlext-bordered-field-focus-border-color;
      }

      // MDL can not handle required. Planned for MDL-v2
      //&:required:focus {
      //  background-color: $mdlext-bordered-field-required-focus-background-color;
      //  border-color: $mdlext-bordered-field-required-focus-border-color;
      //}
    }
    .mdlext-selectfield__select {
      padding-right: calc(1em + #{$mdlext-bordered-field-padding});  // space for down arrow
    }

    /*
    &.is-dirty {
      .mdl-textfield__input,
      .mdlext-selectfield__select {
      }
    }
    */

    &.is-invalid {
      .mdl-textfield__input,
      .mdlext-selectfield__select {
        color: $mdlext-bordered-field-input-text-error-color;
        border-color: $mdlext-bordered-field-error-border-color;
        background-color: $mdlext-bordered-field-error-background-color;

        &:focus {
          //&:required:focus {
          border-color: $mdlext-bordered-field-error-focus-border-color;
          background-color: $mdlext-bordered-field-error-focus-background-color;
        }
      }
    }
  }

  .mdlext-selectfield::after {
    top: auto;
    bottom: $mdlext-bordered-field-padding-bottom;  // Position of down arrow
  }

  fieldset[disabled] .mdlext-selectfield::after,
  .mdlext-selectfield.is-disabled::after {
    color: $mdlext-bordered-field-input-text-disabled-text-color;
    @include mdlext-arrow(bottom, $mdlext-selectfield-arrow-width, $mdlext-selectfield-arrow-length, $mdlext-bordered-field-input-text-disabled-text-color);
  }


  fieldset[disabled] .mdl-textfield .mdl-textfield__input,
  fieldset[disabled] .mdlext-selectfield .mdlext-selectfield__select {
    color: $mdlext-bordered-field-input-text-disabled-text-color;
    background-color: $mdlext-bordered-field-disabled-background-color;
    border-color: $mdlext-bordered-field-disabled-border-color;
  }


  // Styling for the label / floating label.
  .mdl-textfield,
  .mdlext-selectfield {

    &.is-dirty,
    &.has-placeholder {
      .mdl-textfield__label,
      .mdlext-selectfield__label {
        visibility: hidden;
      }
    }
    .mdl-textfield__label,
    .mdlext-selectfield__label {
      color: $mdlext-bordered-field-input-text-label-color;
      font-size: $mdlext-bordered-field-label-font-size;
      font-weight: $mdlext-bordered-field-font-weight;
      padding-left: $mdlext-bordered-field-padding;
      top: auto;
      bottom: $mdlext-bordered-field-padding-bottom;

      // Hides the colored underline for the textField/selectfield.
      &::after {
        background-color: transparent !important;
        visibility: hidden !important;
      }
    }
    &.mdl-textfield--floating-label.is-focused.is-focused,
    &.mdl-textfield--floating-label.is-dirty.is-dirty,
    &.mdl-textfield--floating-label.has-placeholder,
    &.mdlext-selectfield--floating-label.is-focused.is-focused,
    &.mdlext-selectfield--floating-label.is-dirty.is-dirty,
    &.mdlext-selectfield--floating-label.has-placeholder {

      .mdl-textfield__label,
      .mdlext-selectfield__label {
        color: $mdlext-bordered-field-input-text-label-focus-color;
        font-size: $mdlext-bordered-field-floating-label-font-size;
        font-weight: $mdlext-bordered-field-floating-label-font-weight;
        top: auto;
        bottom: $mdlext-bordered-field-floating-label-focus-bottom;
        visibility: visible;
      }
    }
    &.mdl-textfield--floating-label.is-disabled.is-disabled,
    &.mdlext-selectfield--floating-label.is-disabled.is-disabled {

      .mdl-textfield__label,
      .mdlext-selectfield__label {
        color: $mdlext-bordered-field-input-text-label-disabled-color;
      }
    }
    &.mdl-textfield--floating-label.is-invalid.is-invalid,
    &.mdlext-selectfield--floating-label.is-invalid.is-invalid {

      .mdl-textfield__label,
      .mdlext-selectfield__label {
        color: $mdlext-bordered-field-input-text-label-error-color;
      }
    }
  }

  fieldset[disabled] .mdl-textfield .mdl-textfield__label,
  fieldset[disabled] .mdl-selectfield .mdl-selectfield__label {
    color: $mdlext-bordered-field-input-text-label-disabled-color;
  }

  // Icon(s) and/or button(s) inside textfield
  .mdl-textfield,
  .mdlext-selectfield {
    &.mdlext-bordered-fields__icon-left,
    &.mdlext-bordered-fields__icon-right {
      & > i,
      & > .mdl-button {
        position: absolute;
        bottom: $mdlext-bordered-field-padding-bottom - 2px;
      }
      & > i {
        bottom: $mdlext-bordered-field-padding-bottom + 2px;
      }
    }
    &.mdlext-bordered-fields__icon-left {
      & > i:first-child,
      & > .mdl-button:first-child {
        left: $mdlext-bordered-field-padding/2;
      }
      & > i ~ .mdl-textfield__input,
      & > .mdl-button ~ .mdl-textfield__input,
      & > i ~ .mdlext-selectfield__select,
      & > .mdl-button ~ .mdlext-selectfield__select {
        padding-left: $input-text-button-size;
      }
      & > i ~ .mdl-textfield__label,
      & > .mdl-button ~ .mdl-textfield__label {
        left: $input-text-button-size - $mdlext-bordered-field-padding;
      }
      & > i ~ .mdlext-selectfield__label,
      & > .mdl-button ~ .mdlext-selectfield__label {
        left: $input-text-button-size - $mdlext-bordered-field-padding;
      }
    }
    &.mdlext-bordered-fields__icon-right {
      & > .mdl-textfield__input {
        padding-right: $input-text-button-size;
      }
      & > i:last-child,
      & > .mdl-button:last-child {
        left: auto;
        right: $mdlext-bordered-field-padding/2;
      }
    }
    &.is-disabled i,
    &.is-disabled .mdl-button {
      color: $mdlext-bordered-field-disabled-border-color;
      pointer-events: none;
    }
  }

  fieldset[disabled] .mdl-textfield,
  fieldset[disabled] .mdlext-selectfield {
    i,
    .mdl-button {
      color: $mdlext-bordered-field-disabled-border-color;
      pointer-events: none;
    }
  }
}