@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/textfield/_spec.scss

@@ -1,809 +0,0 @@
-// https://material.io/design/components/text-fields.html
-// https://material.io/archive/guidelines/components/text-fields.html
-
-@use '../../core/_elevation.scss' as elevation;
-@use '../../core/_length.scss' as *;
-@use '../../core/_motion.scss' as motion;
-@use '../../core/_platform.scss' as platform;
-@use '../../core/_type.scss' as type;
-@use './_mixins.scss' as *;
-
-$border-line-height: dp(1) !default;
-$border-line-height__focused: dp(2) !default;
-
-$textarea-padding-horizontal: dp(16) !default;
-$outline-start-width: dp(10) !default;
-$outline-end-width: dp(8) !default;
-
-$input-top-alignment: calc(#{dp(8 + 4)} + #{sp(12)} + 0.125em) !default; // Extra 1/8em for font alignment
-$input-bottom-alignment: dp(8) !default;
-
-// CSS Grid Layout
-//     1   |  2  |   3    |   4   |        5        |    6   |  7
-//   -------------------------------------------------------------
-// 1: Gap |      | Label ----------------------------------- | Gap
-// 1: Gap | Icon | Prefix | Input | Dropdown Button | Suffix | Gap
-// 1: Border -----------------------------------------------------
-// 2: Gap |      | Helper/Error                              | Gap
-// 2: Dropdown ---------------------------------------------------
-
-.mdw-textfield {
-  display: -ms-grid;
-  display: grid;
-  position: relative;
-  align-items: baseline;
-  grid-template-columns: dp(12) auto auto 1fr auto auto dp(8);
-  -ms-grid-columns: dp(12) auto auto 1fr auto auto dp(8);
-  grid-template-rows: auto auto;
-  -ms-grid-rows: auto auto;
-
-  padding: dp(8) 0;
-
-  transition-duration: motion.$simpleDuration;
-  transition-timing-function: motion.$standardEasing;
-
-
-  &[mdw-solo] {
-    grid-template-columns: 0 auto auto 1fr auto auto 0;
-    -ms-grid-columns: 0 auto auto 1fr auto auto 0;
-
-    padding: 0;
-
-    .mdw-textfield__input {
-      -ms-grid-row-align: center;
-      align-self: center;
-
-      margin: 0;
-    }
-
-    .mdw-textfield__border {
-      display: none;
-    }
-  }
-
-  &:not([mdw-solo]) {
-    @include type.addRules('subtitle');
-  }
-}
-
-.mdw-textfield::before {
-  // 8dp margin
-  // 12sp label
-  // 4dp margin
-  // 1em input
-  // 16dp margin
-  // = 56dp at 16sp
-
-  content: "";
-
-  display: inline-block;
-
-  -ms-grid-column: 4;
-  grid-column: 4;
-  -ms-grid-row: 1;
-  grid-row: 1;
-
-  box-sizing: content-box; // Don't allow global override
-  height: 1em;
-  margin-top: dp(8 + 4);
-  margin-bottom: dp(16);
-  padding-top: sp(12);
-}
-
-.mdw-textfield[mdw-solo],
-.mdw-textfield[mdw-outlined] {
-  .mdw-textfield__prefix,
-  .mdw-textfield__suffix,
-  .mdw-textfield__icon {
-    -ms-grid-row-align: center;
-    align-self: center;
-
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  textarea.mdw-textfield__input {
-    & ~ .mdw-textfield__prefix,
-    & ~ .mdw-textfield__suffix {
-      -ms-grid-row-align: start;
-      align-self: flex-start;
-
-      margin-top: dp(8);
-      margin-bottom: dp(8);
-    }
-  }
-}
-
-.mdw-textfield__prefix,
-.mdw-textfield__suffix {
-  -ms-grid-row: 1;
-  grid-row: 1;
-  
-  transition-duration: motion.$simpleDuration;
-  transition-property: color;
-  transition-timing-function: motion.$standardEasing;
-  will-change: color;
-
-  pointer-events: none;
-}
-
-.mdw-textfield__prefix {
-  -ms-grid-column: 3;
-  grid-column: 3;
-}
-
-.mdw-textfield__suffix {
-  -ms-grid-column: 6;
-  grid-column: 6;
-}
-
-.mdw-textfield__prefix::after,
-.mdw-textfield__suffix::before {
-  content: "";
-
-  display: inline-block;
-
-  width: dp(4);
-}
-
-.mdw-textfield__outline-gap {
-  // Using transform would create a new composition layer and cause subpixel rendering issues
-  position: absolute;
-  top: $border-line-height__focused;
-  right: dp(12);
-  bottom: 0;
-  left: dp(12);
-  -ms-grid-column: 2;
-  grid-column: 2;
-  -ms-grid-row: 1;
-  grid-row: 1;
-
-  margin-top: -$border-line-height__focused;
-  margin-bottom: -$border-line-height;
-
-  .mdw-textfield[mdw-outlined] & {
-    position: relative;
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
-
-    max-width: calc(100% - #{dp(24)});
-    margin-top: -$border-line-height;
-    margin-bottom: -$border-line-height;
-    
-    color: inherit;
-  }
-
-  &::before,
-  &::after {
-    content: none;
-
-    position: absolute;
-    top: 0;
-
-    border-top-style: solid;
-    border-top-width: $border-line-height;
-
-    transition-delay: 1ms;
-    transition-duration: motion.$simpleDuration * 0.5;
-    transition-property: left, right;
-    transition-timing-function: motion.$standardEasing;
-
-    border-color: inherit;
-
-    .mdw-textfield[mdw-outlined] & {
-      content: "";
-
-      // Height must exactly match parent to avoid subpixel rendering issues
-      bottom: 0;
-      
-      border-style: none;
-      border-top-style: solid;
-      border-bottom-style: solid;
-      
-      border-top-color: currentColor;
-      border-bottom-color: transparent;
-      border-radius: 0;
-      color: inherit;
-    }
-  }
-}
-
-.mdw-textfield__border {
-  display: flex;
-  position: relative;
-  -ms-grid-row-align: stretch;
-  align-self: stretch;
-  -ms-grid-column: 1;
-  grid-column-start: 1;
-  -ms-grid-column-span: 7;
-  grid-column-end: span 7;
-  -ms-grid-row: 1;
-  grid-row: 1;
-
-  box-sizing: border-box;
-  min-width: 100%; // Fixes FireFox Grid bug
-  border-top-style: none;
-  border-right-style: none;
-  border-bottom-style: solid;
-  border-left-style: none;
-  border-width: $border-line-height;
-
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-
-  transition-delay: 1ms;
-  transition-duration: motion.$simpleDuration;
-  transition-property: color, border-color;
-  transition-timing-function: motion.$standardEasing;
-
-  border-top-color: transparent;
-  border-right-color: transparent;
-  border-bottom-color: currentColor;
-  border-left-color: transparent;
-  border-top-left-radius: dp(4);
-  border-top-right-radius: dp(4);
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-
-  .mdw-textfield[mdw-outlined] & {
-    border-top-style: solid;
-    border-right-style: solid;
-    border-bottom-style: solid;
-    border-left-style: solid;
-
-    transition: none;
-
-    border-bottom-right-radius: dp(4);
-    border-bottom-left-radius: dp(4);
-  }
-
-  .mdw-textfield__input:focus ~ & {
-    pointer-events: none;
-  }
-
-  .mdw-textfield__input:disabled ~ & {
-    cursor: not-allowed;
-  }
-
-  &::before,
-  &::after {
-    content: "";
-
-    position: absolute;
-    right: 0;
-    bottom: -$border-line-height__focused;
-    left: 0;
-
-    height: 100%;
-    border-bottom-style: solid;
-    border-width: $border-line-height__focused;
-
-    transition-delay: 1ms;
-    transition-duration: motion.$collapseDuration;
-    transition-property: transform;
-    transition-timing-function: motion.$accelerateEasing;
-    will-change: transform;
-
-    transform: scaleX(0) translateY(-$border-line-height*0.5);
-
-    border-radius: inherit;
-    color: transparent;
-    
-    .mdw-textfield[mdw-outlined] & {
-      content: "";
-
-      position: relative;
-      top: auto;
-      right: auto;
-      bottom: auto;
-      left: auto;
-
-      transition: none;
-      will-change: auto;
-
-      transform: none;
-
-      color: inherit;
-    }
-  }
-
-  .mdw-textfield[mdw-outlined] &::after {
-    flex-grow: 1;
-  }
-
-  .mdw-textfield[mdw-outlined] &::before,
-  :root[dir="rtl"] .mdw-textfield[mdw-outlined] &::after {
-    min-width: $outline-start-width - $border-line-height;
-    margin-top: -$border-line-height;
-    margin-right: 0;
-    margin-left: -$border-line-height;
-    border-top-style: solid;
-    border-right-style: none;
-    border-bottom-style: solid;
-    border-left-style: solid;
-    border-width: inherit;
-
-    border-top-color: currentColor;
-    border-right-color: transparent;
-    border-bottom-color: transparent;
-    border-left-color: currentColor;
-    border-top-left-radius: inherit;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: inherit;
-  }
-
-  .mdw-textfield[mdw-outlined] &::after,
-  :root[dir="rtl"] .mdw-textfield[mdw-outlined] &::before {
-    min-width: $outline-end-width - $border-line-height;
-    margin-top: -$border-line-height;
-    margin-right: -$border-line-height;
-    margin-left: 0;
-    border-top-style: solid;
-    border-right-style: solid;
-    border-bottom-style: solid;
-    border-left-style: none;
-    border-width: inherit;
-
-    border-top-color: currentColor;
-    border-right-color: currentColor;
-    border-bottom-color: transparent;
-    border-left-color: transparent;
-    border-top-left-radius: 0;
-    border-top-right-radius: inherit;
-    border-bottom-right-radius: inherit;
-    border-bottom-left-radius: 0;
-  }
-}
-
-.mdw-textfield__label {
-  position: absolute;
-  right: 0;
-  left: 0;
-  -ms-grid-row-align: start;
-  align-self: flex-start;
-  overflow-x: hidden;
-  overflow-y: hidden;
-
-  margin: 0;
-  padding: 0;
-
-  transition-duration: motion.$shapeChangeDuration;
-  transition-property: top, transform, font-size;
-  transition-timing-function: motion.$standardEasing;
-  will-change: top, transform, font-size;
-
-  pointer-events: none; // allow clickthrough
-
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  .mdw-textfield[mdw-outlined] & {
-    position: relative; // reflow DOM
-
-    padding: 0 dp(4);
-  }
-
-
-  &::before {
-    // Add upper 8dp from text-top to top for positioning
-    // Add lower 8dp from baseline to keep vertically centered
-    @include type.addRules('caption');
-    content: "";
-    
-    display: inline-block;
-    vertical-align: dp(-8);
-
-    box-sizing: content-box; // Don't allow global override
-    height: 1em;
-    margin-top: dp(8);
-    padding-top: dp(8);
-
-    .mdw-textfield[mdw-outlined] & {
-      content: none;
-    }
-  }
-}
-
-.mdw-textfield__signifier {
-  -ms-grid-row-align: center;
-  align-self: center;
-  -ms-grid-column: 2;
-  grid-column: 2;
-  -ms-grid-row: 1;
-  grid-row: 1;
-
-  margin-top: dp(8);
-  margin-bottom: dp(8);
-
-  &::after {
-    content: "";
-
-    display: inline-block;
-
-    width: dp(8);
-  }
-
-  & ~ .mdw-textfield__border .mdw-textfield__outline-gap {
-    margin-right: 0;
-    margin-left: dp(24 + 8);
-
-    :root[dir="rtl"] & {
-      margin-right: dp(24 + 8);
-      margin-left: 0;
-    }
-  }
-
-  .mdw-textfield[mdw-outlined] & ~ .mdw-textfield__border {
-    &::before {
-      padding-right: dp(24 + 8);
-      padding-left: 0;
-
-      :root[dir="rtl"] & {
-        padding-right: 0;
-        padding-left: dp(24 + 8);
-      }
-    }
-
-    .mdw-textfield__outline-gap {
-      max-width: calc(100% - #{dp(24 + 24 + 8)});
-      margin-left: 0;
-
-      :root[dir="rtl"] & {
-        margin-right: 0;
-      }
-
-    }
-  }
-}
-
-.mdw-textfield__input {
-  -ms-grid-column: 4;
-  grid-column-start: 4;
-  -ms-grid-column-span: 2;
-  grid-column-end: span 2;
-  -ms-grid-row: 1;
-  grid-row: 1;
-  
-  box-sizing: border-box;
-  min-width: 0; // Firefox CSS Grid fix
-  width: 100%;
-  border: none;
-  padding: 0;
-  
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  outline: none;
-  -webkit-tap-highlight-color: transparent;
-  
-  z-index: 1;
-  
-  background: none;
-  box-shadow: none; // Firefox :invalid styling
-
-  font-weight: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  font-family: inherit;
-  letter-spacing: inherit;
-
-  .mdw-textfield[mdw-outlined] & {
-    -ms-grid-row-align: center;
-    align-self: center;
-
-    margin-top: calc(#{sp(6)} + #{dp(2)}); // Half of label + 2px
-    margin-bottom: calc(#{sp(6)} + #{dp(2)}); // Equidistant from border
-    border-right: none;
-    border-left: dp(2) solid transparent;
-
-    :root[dir="rtl"] & {
-      border-right: dp(2) solid transparent;
-      border-left: none;
-    }
-  }
-
-  &::placeholder {
-    transition-delay: 1ms;
-    transition-duration: motion.$simpleDuration;
-    transition-property: color;
-    transition-timing-function: motion.$standardEasing;
-    will-change: color;
-  }
-
-  &:not(:focus) {
-    cursor: pointer;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-}
-
-.mdw-textfield__input,
-.mdw-textfield__prefix,
-.mdw-textfield__suffix {
-  -ms-grid-row-align: flex-start;
-  align-self: flex-start;
-
-  margin-top: $input-top-alignment;
-  margin-bottom: $input-bottom-alignment;
-}
-
-textarea.mdw-textfield__input {
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-
-  min-height: 1em; // Avoid clipping on resize
-  min-width: 100%; // Always fill container horizontally
-  max-width: 100%; // Don't allow resize beyond bounds
-  margin-top: $input-top-alignment;
-  margin-bottom: $input-bottom-alignment;
-  padding-right: $textarea-padding-horizontal;
-  padding-left: 0;
-
-  :root[dir="rtl"] & {
-    padding-right: 0;
-    padding-left: $textarea-padding-horizontal;
-  }
-
-  .mdw-textfield[mdw-autosize] > & {
-    min-height: 1em;
-
-    resize: none;
-  }
-}
-
-select.mdw-textfield__input {
-  padding-right: dp(24);
-  padding-left: 0;
-
-  cursor: pointer;
-
-  :root[dir="rtl"] & {
-    padding-right: 0;
-    padding-left: dp(24);
-  }
-
-  &::-ms-expand {
-    // Remove IE11 dropdown button
-    display: none;
-  }
-
-  option {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-
-    font-weight: inherit;
-    font-size: inherit;
-    font-family: inherit;
-  }
-}
-
-.mdw-textfield__error-text {
-  opacity: 0;
-  transform: translateY(-25%);
-}
-
-.mdw-textfield__helper-text,
-.mdw-textfield__error-text {
-  @include type.textTopToTop(4);
-  @include type.addRules('caption');
-  -ms-grid-column: 3;
-  grid-column: 3;
-  -ms-grid-column-span: 4;
-  grid-column-end: span 4;
-  -ms-grid-row: 2;
-  grid-row: 2;
-  overflow: hidden;
-
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.mdw-textfield__icon {
-  display: flex;
-  -ms-grid-row-align: center;
-  align-self: center;
-  -ms-grid-column: 5;
-  grid-column: 5;
-  -ms-grid-row: 1;
-  grid-row: 1;
-  
-  height: dp(24);
-  width: dp(24);
-
-  &[mdw-dropdown] {
-    pointer-events: none;
-
-    &::after {
-      content: "";
-
-      // Triangle shape
-      width: 0;
-      margin-top: dp(10);
-      margin-right: auto;
-      margin-left: auto;
-      border-top: dp(5) solid currentColor;
-      border-right: dp(5) solid transparent;
-      border-left: dp(5) solid transparent;
-    }
-  }
-}
-
-.mdw-textfield__dropdown {
-  position: absolute;
-  -ms-grid-column: 1;
-  grid-column: 1;
-  -ms-grid-column-span: 7;
-  grid-column-end: span 7;
-  -ms-grid-row: 2;
-  grid-row: 2;
-  overflow: hidden;
-
-  max-height: 0;
-  max-width: 100%;
-  width: 100%;
-  margin-top: 0;
-  margin-bottom: dp(8);
-
-  transition-duration: motion.$collapseDuration;
-  transition-property: box-shadow, max-height;
-  transition-timing-function: motion.$accelerateEasing;
-
-  z-index: 2;
-
-  border-top-left-radius: dp(0);
-  border-top-right-radius: dp(0);
-  border-bottom-right-radius: dp(4);
-  border-bottom-left-radius: dp(4);
-
-  box-shadow: none;
-
-  .mdw-textfield[mdw-outlined] & {
-    margin-top: dp(8);
-
-    border-top-left-radius: dp(4);
-    border-top-right-radius: dp(4);
-  }
-
-  &:active,
-  &[mdw-show],
-  input:focus ~ & {
-    &:not([mdw-hide]) {
-      transition-duration: motion.$expandDuration;
-      transition-timing-function: motion.$decelerateEasing;
-
-      box-shadow: elevation.boxShadow(24);
-
-      &[mdw-type="list"] {
-        max-height: dp(300);
-      }
-    }
-  }
-
-  &[mdw-type="list"] {
-    -ms-overflow-style: -ms-autohiding-scrollbar;
-    overflow-y: auto;
-  }
-
-}
-
-// Default state of centered or when [mdw-value-empty] is present (IE)
-@include centerLabel();
-
-.mdw-textfield[mdw-value-empty] {
-  @include centerLabel();
-}
-
-// Floating states:
-// IE/Edge, HTMLSelectElement, :focus, :autofill, or has texted (unfocused with placeholder)
-
-@include platform.ifMS() {
-  @include floatLabel();
-}
-
-select.mdw-textfield__input ~ .mdw-textfield__border,
-.mdw-textfield__input:focus ~ .mdw-textfield__border {
-  @include floatLabel();
-}
-
-// Rules are intentionally separated because IE won't parse rules with unknown psuedos
-.mdw-textfield__input:-webkit-autofill ~ .mdw-textfield__border,
-.mdw-textfield__input:not(:placeholder-shown):not(:focus) ~ .mdw-textfield__border {
-  @include floatLabel();
-}
-
-// Invalid state
-.mdw-textfield:active > .mdw-textfield__input:not(:disabled),
-.mdw-textfield > .mdw-textfield__input:not(:disabled):focus {
-  &:invalid {
-    & ~ .mdw-textfield__border .mdw-textfield__outline-gap {
-      animation-name: labelShake;
-      animation-duration: motion.$shapeChangeDuration;
-      animation-timing-function: linear;
-      animation-delay: motion.$simpleDuration;
-    }
-  }
-}
-
-// Focus
-.mdw-textfield:not([mdw-outlined]) {
-  &:active > .mdw-textfield__input:not(:disabled),
-  & > .mdw-textfield__input:not(:disabled):focus {
-    & ~ .mdw-textfield__border::before,
-    &:invalid ~ .mdw-textfield__border::after {
-      transition-duration: motion.$expandDuration;
-      transition-timing-function: motion.$decelerateEasing;
-
-      transform: scaleX(1) translateY(-$border-line-height*0.5);
-    }
-  }
-}
-
-// Border change on outlined active or focus
-.mdw-textfield[mdw-outlined]:active > .mdw-textfield__input:not(:disabled) ~ .mdw-textfield__border,
-.mdw-textfield[mdw-outlined] > .mdw-textfield__input:not(:disabled):focus ~ .mdw-textfield__border {
-  border-width: $border-line-height__focused;
-
-  &::before,
-  html[dir="rtl"] &::after {
-    min-width: $outline-start-width - $border-line-height__focused;
-    margin-top: -$border-line-height__focused;
-    margin-right: 0;
-    margin-left: -$border-line-height__focused;
-  }
-
-  &::after,
-  html[dir="rtl"] &::before {
-    min-width: $outline-end-width - $border-line-height__focused;
-    margin-top: -$border-line-height__focused;
-    margin-right: -$border-line-height__focused;
-    margin-left: 0;
-  }
-
-  .mdw-textfield__outline-gap {
-    margin-top: -$border-line-height__focused;
-    margin-bottom: -$border-line-height__focused;
-
-    &::before,
-    &::after {
-      border-top-width: $border-line-height__focused;
-    }
-  }
-}
-
-
-// Invalid
-.mdw-textfield__input:focus:invalid ~ .mdw-textfield__error-text {
-  transition-duration: motion.$fadeInDuration;
-  transition-property: transform, opacity;
-  transition-timing-function: motion.$decelerateEasing;
-  will-change: transform, opacity;
-
-  opacity: 1;
-  transform: translateY(0);
-}
-
-
-@keyframes labelShake {
-  0% {
-    transform: translateX(0);
-  }
-
-  33% {
-    transform: translateX(dp(4));
-  }
-
-  66% {
-    transform: translateX(dp(-4));
-  }
-
-  100% {
-    transform: translateX(0);
-  }
-}