mdc-notched-outline.scss

//
// Copyright 2017 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//

@import "@material/animation/variables";
@import "@material/base/mixins";
@import "@material/rtl/mixins";
@import "./mixins";
@import "./variables";

// Notched Outline is intended for use by multiple components, but its styles should only be emitted once when bundled
@include mdc-base-emit-once("mdc-notched-outline") {
  .mdc-notched-outline {
    display: flex;
    position: absolute;
    right: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: 100%;
    /* @noflip */
    text-align: left;
    pointer-events: none;

    @include mdc-rtl {
      /* @noflip */
      text-align: right;
    }

    &__leading,
    &__notch,
    &__trailing {
      box-sizing: border-box;
      height: 100%;
      transition: border $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function;
      border-top: 1px solid;
      border-bottom: 1px solid;
      pointer-events: none;
    }

    &__leading {
      @include mdc-rtl-reflexive-property(border, 1px solid, none);

      width: $mdc-notched-outline-leading-width;
    }

    &__trailing {
      @include mdc-rtl-reflexive-property(border, none, 1px solid);

      flex-grow: 1;
    }

    &__notch {
      flex: 0 0 auto;
      width: auto;
      max-width: calc(100% - #{$mdc-notched-outline-leading-width} * 2);
    }

    .mdc-floating-label {
      display: inline-block;
      position: relative;
      top: 17px;
      bottom: auto;
      max-width: 100%;
    }

    .mdc-floating-label--float-above {
      text-overflow: clip;
    }

    &--upgraded .mdc-floating-label--float-above {
      max-width: calc(100% / .75);
    }
  }

  .mdc-notched-outline--notched {
    .mdc-notched-outline__notch {
      @include mdc-rtl-reflexive-box(padding, right, 8px);

      border-top: none;
    }
  }

  .mdc-notched-outline--no-label {
    .mdc-notched-outline__notch {
      padding: 0;
    }
  }
}