@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/components/textfield/_spec.scss

@@ -1,19 +1,22 @@
 // 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 *;
 
-@import '../../core/_breakpoint.scss';
-@import '../../core/_elevation.scss';
-@import '../../core/_motion.scss';
-@import '../../core/_platform.scss';
-@import '../../core/_type.scss';
+$border-line-height: dp(1) !default;
+$border-line-height__focused: dp(2) !default;
 
-$mdw-textfield__border-line-height: dp(1) !default;
-$mdw-textfield__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;
 
-$mdw-textfield__textarea-padding-horizontal: dp(16) !default;
-$mdw-textfield__outline-start-width: dp(10) !default;
-$mdw-textfield__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
@@ -36,8 +39,8 @@ $mdw-textfield__outline-end-width: dp(8) !default;
 
   padding: dp(8) 0;
 
-  transition-duration: $mdw-motion__simple-duration;
-  transition-timing-function: $mdw-motion__standard-easing;
+  transition-duration: motion.$simpleDuration;
+  transition-timing-function: motion.$standardEasing;
 
 
   &[mdw-solo] {
@@ -59,7 +62,7 @@ $mdw-textfield__outline-end-width: dp(8) !default;
   }
 
   &:not([mdw-solo]) {
-    @include type-rules('subtitle');
+    @include type.addRules('subtitle');
   }
 }
 
@@ -116,9 +119,9 @@ $mdw-textfield__outline-end-width: dp(8) !default;
   -ms-grid-row: 1;
   grid-row: 1;
   
-  transition-duration: $mdw-motion__simple-duration;
+  transition-duration: motion.$simpleDuration;
   transition-property: color;
-  transition-timing-function: $mdw-motion__standard-easing;
+  transition-timing-function: motion.$standardEasing;
   will-change: color;
 
   pointer-events: none;
@@ -146,7 +149,7 @@ $mdw-textfield__outline-end-width: dp(8) !default;
 .mdw-textfield__outline-gap {
   // Using transform would create a new composition layer and cause subpixel rendering issues
   position: absolute;
-  top: $mdw-textfield__border-line-height__focused;
+  top: $border-line-height__focused;
   right: dp(12);
   bottom: 0;
   left: dp(12);
@@ -155,8 +158,22 @@ $mdw-textfield__outline-end-width: dp(8) !default;
   -ms-grid-row: 1;
   grid-row: 1;
 
-  margin-top: -$mdw-textfield__border-line-height__focused;
-  margin-bottom: -$mdw-textfield__border-line-height;
+  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 {
@@ -166,26 +183,30 @@ $mdw-textfield__outline-end-width: dp(8) !default;
     top: 0;
 
     border-top-style: solid;
-    border-top-width: $mdw-textfield__border-line-height;
+    border-top-width: $border-line-height;
 
     transition-delay: 1ms;
-    transition-duration: $mdw-motion__simple-duration / 2;
+    transition-duration: motion.$simpleDuration * 0.5;
     transition-property: left, right;
-    transition-timing-function: $mdw-motion__standard-easing;
+    transition-timing-function: motion.$standardEasing;
 
     border-color: inherit;
-  }
 
-  &::before,
-  :root[dir="rtl"] &::after {
-    right: 100%;
-    left: 0;
-  }
+    .mdw-textfield[mdw-outlined] & {
+      content: "";
 
-  &::after,
-  :root[dir="rtl"] &::before {
-    right: 0;
-    left: 100%;
+      // 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;
+    }
   }
 }
 
@@ -207,15 +228,15 @@ $mdw-textfield__outline-end-width: dp(8) !default;
   border-right-style: none;
   border-bottom-style: solid;
   border-left-style: none;
-  border-width: $mdw-textfield__border-line-height;
+  border-width: $border-line-height;
 
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 
   transition-delay: 1ms;
-  transition-duration: $mdw-motion__simple-duration;
+  transition-duration: motion.$simpleDuration;
   transition-property: color, border-color;
-  transition-timing-function: $mdw-motion__standard-easing;
+  transition-timing-function: motion.$standardEasing;
 
   border-top-color: transparent;
   border-right-color: transparent;
@@ -226,6 +247,18 @@ $mdw-textfield__outline-end-width: dp(8) !default;
   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;
   }
@@ -240,40 +273,25 @@ $mdw-textfield__outline-end-width: dp(8) !default;
 
     position: absolute;
     right: 0;
-    bottom: -$mdw-textfield__border-line-height__focused;
+    bottom: -$border-line-height__focused;
     left: 0;
 
     height: 100%;
     border-bottom-style: solid;
-    border-width: $mdw-textfield__border-line-height__focused;
+    border-width: $border-line-height__focused;
 
     transition-delay: 1ms;
-    transition-duration: $mdw-motion__collapse-duration;
+    transition-duration: motion.$collapseDuration;
     transition-property: transform;
-    transition-timing-function: $mdw-motion__accelerate-easing;
+    transition-timing-function: motion.$accelerateEasing;
     will-change: transform;
 
-    transform: scaleX(0) translateY(-$mdw-textfield__border-line-height/2);
+    transform: scaleX(0) translateY(-$border-line-height*0.5);
 
     border-radius: inherit;
     color: transparent;
-  }
-}
-
-.mdw-textfield[mdw-outlined] {
-  .mdw-textfield__border {
-    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);
-
-    &::before,
-    &::after {
+    
+    .mdw-textfield[mdw-outlined] & {
       content: "";
 
       position: relative;
@@ -289,210 +307,103 @@ $mdw-textfield__outline-end-width: dp(8) !default;
 
       color: inherit;
     }
-
-    &::after {
-      flex-grow: 1;
-    }
-
-    &::before,
-    :root[dir="rtl"] &::after {
-      min-width: $mdw-textfield__outline-start-width - $mdw-textfield__border-line-height;
-      margin-top: -$mdw-textfield__border-line-height;
-      margin-right: 0;
-      margin-left: -$mdw-textfield__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;
-    }
-
-    &::after,
-    :root[dir="rtl"] &::before {
-      min-width: $mdw-textfield__outline-end-width - $mdw-textfield__border-line-height;
-      margin-top: -$mdw-textfield__border-line-height;
-      margin-right: -$mdw-textfield__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__outline-gap {
-      position: relative;
-      top: auto;
-      right: auto;
-      bottom: auto;
-      left: auto;
-
-      max-width: calc(100% - #{dp(24)});
-      margin-top: -$mdw-textfield__border-line-height;
-      margin-bottom: -$mdw-textfield__border-line-height;
-      
-      color: inherit;
-
-      &::before,
-      &::after {
-        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__input {
-    -ms-grid-row-align: center;
-    align-self: center;
-
-    margin: dp(8) 0;
-    border-right: none;
-    border-left: dp(2) solid transparent;
-
-    :root[dir="rtl"] & {
-      border-right: dp(2) solid transparent;
-      border-left: none;
-    }
+  .mdw-textfield[mdw-outlined] &::after {
+    flex-grow: 1;
   }
 
-  .mdw-textfield__label {
-    position: relative; // reflow DOM
-    top: 0;
-
-    padding: 0 dp(4);
-
-    transform: translateY(-50%);
-
-    &::before {
-      content: none;
-    }
-  }
-}
-
-// IE11 will ignore entire ruleset if ':placeholder-shown' psuedo is used, requiring duplication.
-.mdw-textfield[mdw-value-empty] > input.mdw-textfield__input,
-.mdw-textfield[mdw-value-empty] > textarea.mdw-textfield__input {
-  &:not(:focus) ~ .mdw-textfield__border {
-    .mdw-textfield__label {
-      @include type-rules('subtitle');
-
-      top: 50%;
-
-      transform: translateY(-50%);
-    }
-
-    .mdw-textfield__outline-gap {
-      &::before,
-      :root[dir="rtl"] &::after {
-        right: 50%;
-        left: 0;
-      }
-
-      &::after,
-      :root[dir="rtl"] &::before {
-        right: 0;
-        left: 50%;
-      }
-    }
-  }
-}
-
-.mdw-textfield > input.mdw-textfield__input,
-.mdw-textfield > textarea.mdw-textfield__input {
-  &:not(:focus):placeholder-shown ~ .mdw-textfield__border {
-    .mdw-textfield__label {
-      @include type-rules('subtitle');
-
-      top: 50%;
-
-      transform: translateY(-50%);
-    }
-
-    .mdw-textfield__outline-gap {
-      &::before,
-      :root[dir="rtl"] &::after {
-        right: 50%;
-        left: 0;
-      }
-
-      &::after,
-      :root[dir="rtl"] &::before {
-        right: 0;
-        left: 50%;
-      }
-    }
+  .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 {
-  // Default state is floating
-  @include type-rules('caption');
-
   position: absolute;
-  top: 0;
   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: $mdw-motion__shape-change-duration;
+  transition-duration: motion.$shapeChangeDuration;
   transition-property: top, transform, font-size;
-  transition-timing-function: $mdw-motion__standard-easing;
+  transition-timing-function: motion.$standardEasing;
   will-change: top, transform, font-size;
 
   pointer-events: none; // allow clickthrough
-  transform: translateY(0);
 
   text-overflow: ellipsis;
   white-space: nowrap;
 
+  .mdw-textfield[mdw-outlined] & {
+    position: relative; // reflow DOM
+
+    padding: 0 dp(4);
+  }
+
 
   &::before {
-    // Add 8dp from text-top to top for positioning
-    // Add 8dp from baseline to keep centering
-    @include type-rules('caption');
+    // 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;
+    }
   }
 }
 
@@ -559,19 +470,17 @@ $mdw-textfield__outline-end-width: dp(8) !default;
   box-sizing: border-box;
   min-width: 0; // Firefox CSS Grid fix
   width: 100%;
-  margin: 0;
   border: none;
   padding: 0;
-  //padding-bottom: dp(8);
-
+  
   -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
 
@@ -581,11 +490,26 @@ $mdw-textfield__outline-end-width: dp(8) !default;
   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: $mdw-motion__simple-duration;
+    transition-duration: motion.$simpleDuration;
     transition-property: color;
-    transition-timing-function: $mdw-motion__standard-easing;
+    transition-timing-function: motion.$standardEasing;
     will-change: color;
   }
 
@@ -596,8 +520,6 @@ $mdw-textfield__outline-end-width: dp(8) !default;
   &:disabled {
     cursor: not-allowed;
   }
-
-  
 }
 
 .mdw-textfield__input,
@@ -606,24 +528,26 @@ $mdw-textfield__outline-end-width: dp(8) !default;
   -ms-grid-row-align: flex-start;
   align-self: flex-start;
 
-  margin-top: calc(#{dp(8 + 4)} + #{sp(12)});
-  margin-bottom: dp(8);
+  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
-  padding-right: $mdw-textfield__textarea-padding-horizontal;
-  padding-bottom: 0;
+  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: $mdw-textfield__textarea-padding-horizontal;
+    padding-left: $textarea-padding-horizontal;
   }
 
   .mdw-textfield[mdw-autosize] > & {
@@ -658,10 +582,8 @@ select.mdw-textfield__input {
     font-size: inherit;
     font-family: inherit;
   }
-
 }
 
-
 .mdw-textfield__error-text {
   opacity: 0;
   transform: translateY(-25%);
@@ -669,8 +591,8 @@ select.mdw-textfield__input {
 
 .mdw-textfield__helper-text,
 .mdw-textfield__error-text {
-  @include texttop-to-top(4);
-  @include type-rules('caption');
+  @include type.textTopToTop(4);
+  @include type.addRules('caption');
   -ms-grid-column: 3;
   grid-column: 3;
   -ms-grid-column-span: 4;
@@ -729,12 +651,14 @@ select.mdw-textfield__input {
   margin-top: 0;
   margin-bottom: dp(8);
 
-  transition-duration: $mdw-motion__collapse-duration;
+  transition-duration: motion.$collapseDuration;
   transition-property: box-shadow, max-height;
-  transition-timing-function: $mdw-motion__accelerate-easing;
+  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);
 
@@ -751,10 +675,10 @@ select.mdw-textfield__input {
   &[mdw-show],
   input:focus ~ & {
     &:not([mdw-hide]) {
-      transition-duration: $mdw-motion__expand-duration;
-      transition-timing-function: $mdw-motion__decelerate-easing;
+      transition-duration: motion.$expandDuration;
+      transition-timing-function: motion.$decelerateEasing;
 
-      box-shadow: mdwElevation(24);
+      box-shadow: elevation.boxShadow(24);
 
       &[mdw-type="list"] {
         max-height: dp(300);
@@ -769,16 +693,40 @@ select.mdw-textfield__input {
 
 }
 
+// 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
   &:invalid {
     & ~ .mdw-textfield__border .mdw-textfield__outline-gap {
       animation-name: labelShake;
-      animation-duration: $mdw-motion__shape-change-duration;
+      animation-duration: motion.$shapeChangeDuration;
       animation-timing-function: linear;
-      animation-delay: $mdw-motion__simple-duration;
+      animation-delay: motion.$simpleDuration;
     }
   }
 }
@@ -789,9 +737,10 @@ select.mdw-textfield__input {
   & > .mdw-textfield__input:not(:disabled):focus {
     & ~ .mdw-textfield__border::before,
     &:invalid ~ .mdw-textfield__border::after {
-      transition-duration: $mdw-motion__expand-duration;
-      transition-timing-function: $mdw-motion__decelerate-easing;
-      transform: scaleX(1) translateY(-$mdw-textfield__border-line-height/2);
+      transition-duration: motion.$expandDuration;
+      transition-timing-function: motion.$decelerateEasing;
+
+      transform: scaleX(1) translateY(-$border-line-height*0.5);
     }
   }
 }
@@ -799,31 +748,31 @@ select.mdw-textfield__input {
 // 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: $mdw-textfield__border-line-height__focused;
+  border-width: $border-line-height__focused;
 
   &::before,
   html[dir="rtl"] &::after {
-    min-width: $mdw-textfield__outline-start-width - $mdw-textfield__border-line-height__focused;
-    margin-top: -$mdw-textfield__border-line-height__focused;
+    min-width: $outline-start-width - $border-line-height__focused;
+    margin-top: -$border-line-height__focused;
     margin-right: 0;
-    margin-left: -$mdw-textfield__border-line-height__focused;
+    margin-left: -$border-line-height__focused;
   }
 
   &::after,
   html[dir="rtl"] &::before {
-    min-width: $mdw-textfield__outline-end-width - $mdw-textfield__border-line-height__focused;
-    margin-top: -$mdw-textfield__border-line-height__focused;
-    margin-right: -$mdw-textfield__border-line-height__focused;
+    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: -$mdw-textfield__border-line-height__focused;
-    margin-bottom: -$mdw-textfield__border-line-height__focused;
+    margin-top: -$border-line-height__focused;
+    margin-bottom: -$border-line-height__focused;
 
     &::before,
     &::after {
-      border-top-width: $mdw-textfield__border-line-height__focused;
+      border-top-width: $border-line-height__focused;
     }
   }
 }
@@ -831,9 +780,9 @@ select.mdw-textfield__input {
 
 // Invalid
 .mdw-textfield__input:focus:invalid ~ .mdw-textfield__error-text {
-  transition-duration: $mdw-motion__fade-in-duration;
+  transition-duration: motion.$fadeInDuration;
   transition-property: transform, opacity;
-  transition-timing-function: $mdw-motion__decelerate-easing;
+  transition-timing-function: motion.$decelerateEasing;
   will-change: transform, opacity;
 
   opacity: 1;