@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/core/textfield/style.scss

@@ -1,672 +0,0 @@
-// https://material.io/guidelines/components/textfields.html
-
-
-@import '../../common/ripple.scss';
-@import '../../common/functions.scss';
-@import '../../common/variables.scss';
-@import '../../common/motion.scss';
-@import '../../common/mixins.scss';
-
-
-$label__padding-top: dp(16);
-$label__padding-top__boxed: dp(8);
-$label__padding-bottom: dp(8);
-$label__padding-horizontal__boxed: dp(16);
-$label__padding-top__boxed__idle: dp(20);
-$label__font-size: sp(12);
-
-
-$textarea__label__extra_padding-top: dp(10);
-$textarea__label__padding-bottom: dp(10);
-
-$border-line__height: dp(1);
-$border-line__focused__height: dp(2);
-
-$helper-text__padding-top: dp(8);
-$helper-text__font-size: sp(12);
-
-$textarea__padding-horizontal: dp(16);
-
-$icon-signifier__width: dp(24);
-$icon-signifier__padding-end: dp(16);
-
-// Grid Layout
-//     1   |  2  |   3    |   4   |        5        |    6   |  7
-//   -------------------------------------------------------------
-// 1:      | Gap | Label------------------------------------ | Gap
-// 2: Icon | Gap | Prefix | Input | Dropdown Button | Suffix | Gap
-// 3:      | Border-----------------------------------------------
-// 4:      | Gap | Helper/Error/Dropdown-------------------- | Gap
-
-.mdw-textfield {
-  position: relative;
-  display: grid;
-  justify-content: flex-start;
-  grid-template-columns: auto 0 auto 1fr auto auto 0;
-  grid-template-rows: calc(#{$label__padding-top} + #{$label__font-size} + #{$label__padding-bottom}) auto;
-  &[mdw-solo] {
-    grid-template-rows: 0 auto;
-    margin-bottom: 0;
-  }
-  align-items: baseline;
-  flex-direction: column;
-  // font-size: sp(16);
-  &[mdw-textarea],
-  &[mdw-box] {
-    grid-template-rows: calc(#{$label__padding-top__boxed} + #{$label__font-size} + #{$label__padding-bottom}) auto;
-    grid-template-columns: auto 16px auto 1fr auto auto 16px;
-    // Out-of-spec: Makes all types top-aligned
-    margin-top: 8px;
-  }
-  margin-bottom: 8px;
-}
-
-.mdw-textfield__prefix,
-.mdw-textfield__suffix {
-  grid-row: 2;
-  //margin-top: calc(#{$label__padding-top} + #{$label__font-size} + #{$label__padding-bottom});
-  
-  // color: transparent;
-  pointer-events: none;
-  will-change: color;
-  transition-property: color;
-  transition-timing-function: $motion-easing-standard;
-  transition-duration: $motion-duration-desktop-default;
-  @include allHandsets {
-    transition-duration: $motion-duration-mobile-default;
-  }
-  @include allTablets {
-    transition-duration: $motion-duration-tablet-default;
-  }
-}
-.mdw-textfield__prefix {
-  grid-column: 3;
-  margin-right: 4px;
-  [dir=rtl] & {
-    margin-right: 0;
-    margin-left: 4px;
-  }
-}
-.mdw-textfield__suffix {
-  grid-column: 6;
-  margin-left: 4px;
-  [dir=rtl] & {
-    margin-left: 0;
-    margin-right: 4px;
-  }
-}
-
-.mdw-textfield__label {
-  // Default state is floating
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  @include IEOnly() {
-    // IE11 positions label based on container, not grid cell
-    .mdw-textfield__icon ~ & {
-      left: dp(44);
-    }
-    .mdw-textfield[mdw-box] > &,
-    .mdw-textfield[mdw-textarea] > & {
-      left: dp(16);
-    }
-    html[dir=rtl] .mdw-textfield__icon ~ & {
-      left: 0;
-      right: dp(44);
-    }
-    .mdw-textfield[mdw-box] > .mdw-textfield__icon ~ &,
-    .mdw-textfield[mdw-textarea] > .mdw-textfield__icon ~ & {
-      left: dp(16 + 44);
-    }
-    html[dir=rtl] .mdw-textfield[mdw-box] > &,
-    html[dir=rtl] .mdw-textfield[mdw-textarea] > & {
-      left: 0;
-      right: dp(16);
-    }
-    html[dir=rtl] .mdw-textfield[mdw-box] > .mdw-textfield__icon ~ &,
-    html[dir=rtl] .mdw-textfield[mdw-textarea] > .mdw-textfield__icon ~ & {
-      left: 0;
-      right: dp(16 + 44);
-    }
-  }
-
-  padding: 0;
-  margin: 0;
-  grid-row: 1;
-  grid-column-start: 3;
-  grid-column-end: 7;
-  -ms-grid-column-span: 4;
-  
-  align-self: flex-start;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-top: $label__padding-top;
-  padding-bottom: $label__padding-bottom;
-  
-  pointer-events: none; // allow clickthrough
-  will-change: transform, font-size;
- 
-  transform: translateY(0);
-  font-size: $label__font-size;
-  transition-property: transform, font-size;
-  transition-timing-function: $motion-easing-standard;
-  transition-duration: $motion-duration-desktop-default;
-  @include allHandsets {
-    transition-duration: $motion-duration-mobile-default;
-  }
-  @include allTablets {
-    transition-duration: $motion-duration-tablet-default;
-  }
-  
-  z-index: 1;
-  .mdw-textfield[mdw-box] > &,
-  .mdw-textfield[mdw-textarea] > & {
-    padding-top: $label__padding-top__boxed;
-  }
-
-  /* Rules must be separated for IE11 support */
-  .mdw-textfield[mdw-value-empty] > & {
-    transform: translateY($label__font-size) translateY($label__padding-bottom);
-    font-size: inherit;
-  }
-  .mdw-textfield[mdw-value-empty][mdw-textarea] > & {
-    transform: translateY($label__font-size) translateY(-4px);
-  }
-  .mdw-textfield[mdw-value-empty][mdw-box] > & {
-    transform: translateY($label__font-size);
-  }
-
-  .mdw-textfield__input:placeholder-shown ~ & {
-    transform: translateY($label__font-size) translateY($label__padding-bottom);
-    font-size: inherit;
-  }
-  .mdw-textfield[mdw-textarea] > .mdw-textfield__input:placeholder-shown ~ & {
-    transform: translateY($label__font-size) translateY(-4px);
-  }
-  .mdw-textfield[mdw-box] > .mdw-textfield__input:placeholder-shown ~ & {
-    transform: translateY($label__padding-top__boxed__idle - $label__padding-top__boxed);
-  }
-}
-
-.mdw-textfield__icon {
-  min-width: dp(20 + 24);
-  grid-column: 1;
-  grid-row-start: 2;
-  grid-row-end: 3;
-  -ms-grid-row-span: 1;
-  align-self: flex-start;
-  -ms-grid-row-align: start;
-
-  .mdw-textfield[mdw-box] > &{
-    grid-row-start: 1;
-    grid-row-end: 3;
-    -ms-grid-row-span: 2;
-    align-self: center;
-    -ms-grid-row-align: center;
-  }
-}
-
-.mdw-textfield__input {
-  padding: 0;
-  margin: 0;
-  background: none;
-  border: none;
-  outline: none;
-  
-  
-  grid-row: 2;
-  grid-column-start: 4;
-  grid-column-end: 5;
-  -ms-grid-column-span: 1;
-  width: 100%;
-  box-sizing: border-box;
-
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: $font-weight-regular;
-  appearance: none;
-  box-shadow: none; // Firefox :invalid styling
-
-  padding-bottom: dp(8);
-
-  min-width: 0; // Firefox CSS Grid fix
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-
-  .mdw-textfield[mdw-box] > & {
-    z-index: 1;
-    &:not(:focus) {
-      pointer-events: none;
-    }
-  }
-  
-  &::placeholder {
-    will-change: color;
-    transition-property: color;
-    transition-timing-function: $motion-easing-standard;
-    transition-delay: 1ms;
-    transition-duration: $motion-duration-desktop-default;
-    @include allHandsets {
-      transition-duration: $motion-duration-mobile-default;
-    }
-    @include allTablets {
-      transition-duration: $motion-duration-tablet-default;
-    }
-  }
-
-  .mdw-textfield[mdw-solo] > & {
-    margin-top: 0;
-    padding-bottom: 0;
-  }
-}
-
-textarea.mdw-textfield__input {
-  resize: none;
-  overflow-y: auto;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-  padding-bottom: 0;
-  margin-bottom: 8px;
-  padding-left: 0;
-  padding-right: $textarea__padding-horizontal;
-  [dir=rtl] & {
-    padding-left: $textarea__padding-horizontal;
-    padding-right: 0
-  }
-  grid-column-end: 8;
-  -ms-grid-column-span: 4;
-  .mdw-textfield[mdw-multiline] > & {
-    min-height: 1em;
-  }
-  .mdw-textfield[mdw-textarea] > & {
-    margin-bottom: 16px;
-  }
-  .mdw-textfield[mdw-box][mdw-textarea] > & {
-    margin-bottom: dp(8);
-  }
-}
-
-select.mdw-textfield__input {
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  option {
-    font-size: inherit;
-    font-family: inherit;
-    font-weight: $font-weight-regular;
-    appearance: none;
-    &[value=""]:first-of-type {
-      display: none;
-    }
-  }
-  &::-ms-expand {
-    // Remove IE11 dropdown button
-    display: none;
-  }
-  grid-column-end: 6;
-  
-  [dir=rtl] & {
-    padding-left: 24px;
-    padding-right: 0;
-  }
-  padding-right: 24px;
-
-  -ms-grid-column-span: 2;
-  &:-moz-focusring {
-    color: black;
-    text-shadow: none;
-  }
-  .mdw-textfield[mdw-box] > & {
-    &:not(:focus) {
-      pointer-events: auto;
-    }
-  }
-}
-
-.mdw-textfield__border-line {
-  // Default:
-  // self     - black line
-  // ::before - colored line
-  // ::after  - warn line
-
-  // mdw-textarea:
-  // self     - border box
-  // ::before - hidden
-  // ::after  - hidden
-
-  // mdw-box:
-  // self     - bottom border
-  // ::before - background fill
-  // ::after  - ripple
-
-  &::before,
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    transform: scaleX(0);
-    border-style: inherit;
-    border-radius: inherit;
-    border-bottom-style: inherit;
-    border-width: inherit;
-    will-change: transform;
-    transition-property: transform;
-    transition-delay: inherit;
-    transition-duration: inherit;
-    border-color: currentColor;
-    color: transparent;
-  }
-
-  grid-column-start: 2;
-  grid-column-end: 8;
-  -ms-grid-column-span: 6;
-  grid-row-start: 3;
-  grid-row-end: 4;
-  -ms-grid-row-span: 1;
-  position: relative;
-  pointer-events: none;
-  cursor: text;
-  .mdw-textfield[mdw-box] > &,
-  .mdw-textfield[mdw-textarea] > & {
-    grid-row-start: 1;
-    grid-row-end: 4;
-    -ms-grid-row-span: 3;
-    top: 0;
-    position: absolute;
-    bottom: 0;
-    height: 100%;
-    @include IEOnly {
-      position: relative;
-    }
-    
-    width: 100%;
-    border-color: currentColor;
-  }
-  .mdw-textfield[mdw-textarea]:not([mdw-box]) > & {
-    border-radius: dp(2);
-    border-width: $border-line__height;
-    border-style: solid;
-    &::before,
-    &::after {
-      content: none;
-    }
-  }
-  
-  height: 0;
-  margin-top: -$border-line__height;
-  border-style: none;
-  border-bottom-style: solid;
-  box-sizing: border-box;
-
-  border-width: $border-line__height;
-  transition-delay: 1ms;
-  transition-timing-function: $motion-easing-deceleration;
-  transition-duration: $motion-duration-desktop-leave;
-  @include allHandsets {
-    transition-duration: $motion-duration-mobile-leave;
-  }
-  @include allTablets {
-    transition-duration: $motion-duration-tablet-leave;
-  }
-
-  
-  
-  & > .mdw-ripple {
-    @include mdw-ripple__container;
-    display: none;
-  }
-
-  .mdw-textfield[mdw-box] > & {
-    z-index: 0;
-    overflow: hidden;
-    border-radius: dp(4);
-    border-width: 0;
-    border-bottom-width: $border-line__focused__height;
-    margin-top: 0;
-    pointer-events: auto;
-    cursor: pointer;
-    &::before {
-      z-index: -1;
-      transform: none;
-      border-style: none;
-      transition-delay: 0s;
-    }
-    > .mdw-ripple {
-      display: block;
-    }
-    > .mdw-ripple > .mdw-ripple__inner,
-    &::after {
-      @include mdw-ripple__inner;
-      border-style: none;
-    }
-    > .mdw-ripple:active > .mdw-ripple__inner,
-    &:active::after {
-      @include mdw-ripple__active;
-    }
-  }
-
-  .mdw-textfield[mdw-box] > .mdw-textfield__input:focus ~ & {
-    // Disable interactions when focus is received
-    pointer-events: none;
-    cursor: auto;
-  }
-
-  .mdw-textfield[mdw-box][mdw-ripple] > & {
-    overflow: visible;
-    &::after {
-      // If using custom ripple, destroy ::after object
-      content: none;
-    }
-  }
-}
-
-.mdw-textfield__error-text {
-  transform: translateY(-$helper-text__font-size / 4);
-}
-
-.mdw-textfield__helper-text,
-.mdw-textfield__error-text {
-  font-size: $helper-text__font-size;
-  grid-row: 4;
-  grid-column-start: 3;
-  grid-column-end: 7;
-  -ms-grid-column-span: 4;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  padding-top: $helper-text__padding-top;
-}
-
-select.mdw-textfield__input:not(:focus) {
-  .mdw-textfield[mdw-box][mdw-value-empty] > & ~ .mdw-textfield__label,
-  & ~ .mdw-textfield__label {
-    transform: translateY(0);
-    font-size: $label__font-size;
-  }
-}
-
-.mdw-textfield__dropdown-button {
-  &::after {
-    content: "";
-    width: 0;
-    border-right: 5px solid transparent;
-    border-left: 5px solid transparent;
-    border-top: 5px solid currentColor;
-    margin-top: 10px;
-  }
-  margin-bottom: 8px;
-  pointer-events: none;
-  align-self: flex-end;
-  -ms-grid-row-align: end;
-  margin-left: auto;
-  margin-right: 0;
-  [dir=rtl] & {
-    margin-left: 0;
-    margin-right: auto;
-  }
-  grid-row-start: 1;
-  grid-row-end: 3;
-  -ms-grid-row-span: 2;
-  grid-column: 5;
-
-  width: 24px;
-  height: 24px;
-  display: flex;
-  justify-content: center;
-}
-
-.mdw-textfield__dropdown {
-  position: absolute;
-  grid-row: 4;
-  margin-top: 8px;
-  margin-bottom: 8px;
-  .mdw-textfield[mdw-box] > & {
-    grid-row: 3;
-  }
-  grid-column-start: 2;
-  grid-column-end: 8;
-  -ms-grid-column-span: 4;
-  box-shadow: none;
-  max-height: 0;
-  overflow: hidden;
-  z-index: 2;
-  width: 100%;
-  max-width: 100%;
-  transition-property: box-shadow, max-height;
-  transition-duration: $motion-duration-desktop-leave;
-  @include allHandsets {
-    transition-duration: $motion-duration-mobile-leave;
-  }
-  @include allTablets {
-    transition-duration: $motion-duration-tablet-leave;
-  }
-  &[mdw-type=list] {
-    overflow-y: scroll;
-  }
-  &[mdw-show],
-  &:active,
-  input:focus ~ & {
-    &:not([mdw-hide]) {
-      &[mdw-type=list] {
-        max-height: calc(300px);
-      }
-      transition-duration: $motion-duration-desktop-enter;
-      @include allHandsets {
-        transition-duration: $motion-duration-mobile-enter;
-      }
-      @include allTablets {
-        transition-duration: $motion-duration-tablet-enter;
-      }
-      box-shadow: elevation(24);
-    }
-  }
-
-}
-
-// On Focus
-.mdw-textfield:active > .mdw-textfield__input:not(:disabled),
-.mdw-textfield > .mdw-textfield__input:not(:disabled):focus,
-.mdw-textfield[mdw-box]:active > .mdw-textfield__input:not(:disabled),
-.mdw-textfield[mdw-box] > .mdw-textfield__input:not(:disabled):focus {
-  & ~ .mdw-textfield__label {
-    transform: translateY(0);
-    font-size: $label__font-size;
-  }
-  // Invalid
-  &:invalid {
-    & ~ .mdw-textfield__label {
-      animation-name: labelShake;
-      animation-duration: 250ms;
-      animation-delay: $motion-duration-desktop-default;
-      @include allHandsets {
-        animation-delay: $motion-duration-mobile-default;
-      }
-      @include allTablets {
-        animation-delay: $motion-duration-tablet-default;
-      }
-    }
-  }
-  
-  & ~ .mdw-textfield__border-line {
-    transition-timing-function: $motion-easing-acceleration;
-    transition-duration: $motion-duration-desktop-enter;
-    @include allHandsets {
-      transition-duration: $motion-duration-mobile-enter;
-    }
-    @include allTablets {
-      transition-duration: $motion-duration-tablet-enter;
-    }
-  }
-}
-
-.mdw-textfield:not([mdw-box]):not([mdw-textarea]) {
-  // Focus
-  &:active > .mdw-textfield__input:not(:disabled),
-  > .mdw-textfield__input:not(:disabled):focus {
-    & ~ .mdw-textfield__border-line::before,
-    &:invalid ~ .mdw-textfield__border-line::after {
-      transform: scaleX(1);
-    }
-    & ~ .mdw-textfield__border-line {
-      margin-top: -$border-line__focused__height;
-    }
-  }
-
-  // Hover
-  .mdw-textfield__input:not(:disabled):hover {
-    & ~ .mdw-textfield__border-line {
-      margin-top: -$border-line__focused__height;
-    }
-  }
-}
-
-//Hover and focus
-.mdw-textfield:active > .mdw-textfield__input:not(:disabled),
-.mdw-textfield__input:not(:disabled):focus,
-.mdw-textfield__input:not(:disabled):hover {
-  & ~ .mdw-textfield__border-line {
-    border-width: $border-line__focused__height;
-  }
-}
-
-// Disabled
-.mdw-textfield__input:disabled  ~ .mdw-textfield__border-line {
-  border-style: dotted;
-}
-
-// Invalid
-.mdw-textfield__error-text {
-  .mdw-textfield__input:focus:invalid ~ & {
-    transform: translateY(0);
-    will-change: transform, color;
-    transition-property: transform, color;
-    transition-timing-function: $motion-easing-standard;
-    transition-duration: $motion-duration-desktop-default;
-    @include allHandsets {
-      transition-duration: $motion-duration-mobile-default;
-    }
-    @include allTablets {
-      transition-duration: $motion-duration-tablet-default;
-    }
-  }
-}
-
-@keyframes labelShake {
-  0% {
-    transform: translateX(0);
-  }
-  33% {
-    transform: translateX(1ch);
-  }
-  66% {
-    transform: translateX(-1ch);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}