@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/textfield/_spec.scss

@@ -0,0 +1,809 @@
+// 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);
+  }
+}