@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/components/selection/_spec.scss

@@ -1,24 +1,26 @@
 // https://material.io/guidelines/components/selection-controls.html#
 // https://material.io/guidelines/patterns/selection.html#selection-item-selection
 
-@import '../../core/_breakpoint.scss';
-@import '../../core/_elevation.scss';
-@import '../../core/_motion.scss';
-@import '../../core/_platform.scss';
-
-$mdw-selection__ripple-size: dp(48) !default;
-$mdw-selection__icon-size: dp(24) !default;
-$mdw-selection__radio-size: dp(20) !default;
-$mdw-selection__checkbox-size: dp(18) !default;
-$mdw-selection__border-size: dp(2) !default;
-$mdw-selection__horizontal-margin: dp(2) !default;
+@use "sass:math";
+
+@use '../../core/_elevation.scss' as elevation;
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
+
+$ripple-size: dp(40) !default;
+$icon-size: dp(24) !default;
+$scale-size: math.div($ripple-size, $icon-size) !default;
+$radio-size: dp(20) !default;
+$checkbox-size: dp(18) !default;
+$border-size: dp(2) !default;
+$horizontal-margin: dp(2) !default;
 // from ic_check_black_18px.svg
 // rotated 45°
-$mdw-selection__checkbox-icon-height: dp(12.73) !default;
-$mdw-selection__checkbox-icon-width: dp(5.93) !default;
-$mdw-selection__checkbox-icon-thickness: dp(1.5) !default;
-$mdw-selection__checkbox-icon-offset-y: dp(2.64) - $mdw-selection__checkbox-icon-thickness - $mdw-selection__border-size !default;
-$mdw-selection__checkbox-icon-offset-x: dp(6.04) - $mdw-selection__border-size !default;
+$checkbox-icon-height: dp(12.73) !default;
+$checkbox-icon-width: dp(5.93) !default;
+$checkbox-icon-thickness: dp(1.5) !default;
+$checkbox-icon-offset-y: dp(2.64) - $checkbox-icon-thickness - $border-size !default;
+$checkbox-icon-offset-x: dp(6.04) - $border-size !default;
 
 .mdw-selection {
   display: inline-flex;
@@ -28,13 +30,12 @@ $mdw-selection__checkbox-icon-offset-x: dp(6.04) - $mdw-selection__border-size !
 
 .mdw-selection__input {
   display: inline-flex;
+  align-self: center;
   order: 1;
 
-  min-height: $mdw-selection__icon-size;
-  min-width: $mdw-selection__icon-size;
-  margin: 0;
-  margin-top: auto;
-  margin-bottom: auto;
+  min-height: $icon-size;
+  min-width: $icon-size;
+  margin: 0 auto;
   padding: 0;
 
   -moz-appearance: none;
@@ -47,7 +48,7 @@ $mdw-selection__checkbox-icon-offset-x: dp(6.04) - $mdw-selection__border-size !
   transition-property: transform, color, opacity;
 
   opacity: 0;
-  transform: scale(0);
+  transform: scale($scale-size);
 
   background-color: currentColor;
   // background-color: var(--button__ripple-color);
@@ -63,27 +64,48 @@ $mdw-selection__checkbox-icon-offset-x: dp(6.04) - $mdw-selection__border-size !
     color: transparent;
   }
 
+  .mdw-selection[aria-disabled="true"] &,
   &:disabled {
     cursor: not-allowed;
   }
 
-  .mdw-selection:active > &:not([disabled]),
-  .mdw-selection:hover > &:not([disabled]),
-  &:active:not([disabled]),
-  &:hover:not([disabled]),
-  &:focus {
-    transform: scale($mdw-selection__ripple-size/$mdw-selection__icon-size);
+  // HTMLInputElement should not have psuedos
+  &.mdw-overlay::before {
+    display: none;
+    content: none;
+  }
+
+  &[role="switch"] {
+    margin-right: dp(12);
+  
+    transform: translateX(#{dp(-2)}) scale($scale-size);
+  
+    &:checked {
+      transform: translateX(#{dp(14)}) scale($scale-size);
+    }
+  
+    label.mdw-selection:active &:not(:disabled),
+    label.mdw-selection:hover &:not(:disabled),
+    &:active:not(:disabled),
+    &:hover:not(:disabled),
+    &:focus {
+      transform: translateX(#{dp(-2)}) scale($scale-size);
+  
+      &:checked {
+        transform: translateX(#{dp(14)}) scale($scale-size);
+      }
+    }
   }
 }
 
 .mdw-selection__icon {
   display: inline-flex;
   position: relative;
-
+  
   box-sizing: border-box;
-  height: $mdw-selection__icon-size;
-  max-width: 0;
-  width: $mdw-selection__icon-size;
+  height: $icon-size;
+  width: $icon-size;
+  flex: none;
   margin: 0;
   margin-top: auto;
   margin-bottom: auto;
@@ -104,12 +126,19 @@ $mdw-selection__checkbox-icon-offset-x: dp(6.04) - $mdw-selection__border-size !
 
   background-color: transparent;
 
-  .mdw-selection__input:disabled ~ & {
-    cursor: not-allowed;
+  :root[dir="rtl"] & {
+    order: 1;
+  }
+
+  .mdw-selection__input ~ & {
+    // width is represented by input element
+    max-width: 0;
   }
 
 
   &::before {
+    content: "";
+
     position: absolute;
     top: 0;
     left: 0;
@@ -122,12 +151,168 @@ $mdw-selection__checkbox-icon-offset-x: dp(6.04) - $mdw-selection__border-size !
 
     background-color: transparent;
     border-color: currentColor;
-    content: "";
   }
 
   &::after {
-    position: absolute;
     content: "";
+
+    position: absolute;
+  }
+
+  .mdw-selection[aria-disabled="true"] &,
+  .mdw-selection__input:disabled ~ & {
+    cursor: not-allowed;
+  }
+
+  &[mdw-checkbox] {
+    // Box outline
+    &::before {
+      top: ($icon-size - $checkbox-size) * 0.5;
+      left: ($icon-size - $checkbox-size) * 0.5;
+  
+      height: $checkbox-size;
+      width: $checkbox-size;
+  
+      border-radius: dp(2);
+  
+      // Checked or Active
+      .mdw-selection[aria-checked="true"] &,
+      .mdw-selection[aria-checked]:not([aria-disabled="true"]):active &,
+      .mdw-selection__input[type="checkbox"]:checked ~ &,
+      .mdw-selection__input[type="checkbox"]:not(:disabled):active ~ & {
+        border-width: $checkbox-size * 0.5;
+      }
+  
+      // Checked not
+      .mdw-selection[aria-checked="true"]:not(:active):not([aria-disabled="true"]) &,
+      .mdw-selection__input[type="checkbox"]:checked:not(:active):not(:disabled) ~ & {
+        background-color: currentColor;
+      }
+    }
+  
+    // Check stencil
+    &::after {
+      top: $border-size + (($icon-size - $checkbox-size) * 0.5);
+      left: $border-size + (($icon-size - $checkbox-size) * 0.5);
+      
+      height: $checkbox-icon-height;
+      width: $checkbox-icon-width;
+      margin-top: $checkbox-icon-offset-y;
+      margin-left: $checkbox-icon-offset-x;
+  
+      .mdw-selection[aria-checked="true"] &,
+      .mdw-selection__input[type="checkbox"]:checked ~ & {
+        box-sizing: border-box;
+        border-right-style: solid;
+        border-bottom-style: solid;
+        // border-width: $checkbox-icon-thickness;
+        // Increase visibility
+        border-width: dp(2);
+  
+        animation-name: showCheck;
+        animation-direction: normal;
+        animation-fill-mode: forwards;
+  
+        transition: none;
+        
+        transform: rotate(45deg);
+        
+        background-color: transparent;
+      }
+    }
+  }
+
+  &[mdw-radio] {
+    // Outer ring
+    &::before {
+      top: ($icon-size - $radio-size) * 0.5;
+      left: ($icon-size - $radio-size) * 0.5;
+  
+      height: $radio-size;
+      width: $radio-size;
+  
+      border-color: currentColor;
+      border-radius: 50%;
+  
+      // Active, not disabled
+      .mdw-selection:active:not([aria-disabled="true"]) &,
+      .mdw-selection__input:active:not(:disabled) ~ & {
+        border-width: $radio-size * 0.5;
+      }
+    }
+  
+    // Center dot
+    &::after {
+      top: ($icon-size - $radio-size) * 0.5;
+      left: ($icon-size - $radio-size) * 0.5;
+  
+      height: $radio-size;
+      width: $radio-size;
+  
+      transition-property: transform, background-color;
+  
+      transform: scale(0);
+  
+      background-color: currentColor;
+      border-radius: 50%;
+  
+      .mdw-selection[aria-checked="true"] &,
+      .mdw-selection__input:checked ~ & {
+        transform: scale(0.5);
+      }
+    }
+  }
+
+  &[mdw-switch] {
+    width: dp(36);
+
+    &::before {
+      top: dp(2);
+      left: 0;
+  
+      height: dp(20);
+      width: dp(20);
+      border-style: none;
+  
+      transition-property: background-color, transform;
+  
+      transform: translateX(0);
+      z-index: 1;
+  
+      background-color: currentColor;
+  
+      border-radius: 50%;
+      box-shadow: elevation.boxShadow(1);
+  
+      .mdw-selection[aria-checked="true"] &,
+      .mdw-selection__input:checked ~ & {
+        transform: translateX(#{dp(16)});
+      }
+    }
+  
+    &::after {
+      top: dp(5);
+      bottom: dp(5);
+      left: 0;
+  
+      height: dp(14);
+      width: dp(36);
+      margin: 0;
+      border-style: none;
+  
+      animation-name: none;
+  
+      transform: none;
+
+      background-color: currentColor;
+  
+      border-radius: dp(7);
+    }
+  
+    .mdw-selection:active:not([aria-disabled="true"]) &,
+    .mdw-selection__input:active:not(:disabled) ~ & {
+      // color: inherit;
+    }
   }
 }
 
@@ -146,223 +331,56 @@ $mdw-selection__checkbox-icon-offset-x: dp(6.04) - $mdw-selection__border-size !
 
   z-index: 1;
 
-  .mdw-selection__input:disabled ~ & {
-    cursor: not-allowed;
+  :root[dir="rtl"] & {
+    padding-right: 0;
+    padding-left: dp(8);
   }
-}
 
-// Label comes after icon
-.mdw-selection__icon ~ .mdw-selection__label {
-  order: 1;
-
-  padding-right: 0;
-  padding-left: dp(8);
-}
-
-:root[dir="rtl"] {
-  .mdw-selection__icon {
+  // Label as suffix
+  .mdw-selection__icon ~ & {
     order: 1;
-  }
 
-  .mdw-selection__label {
     padding-right: 0;
     padding-left: dp(8);
-  }
-  
-  // Label comes after icon
-  .mdw-selection__icon ~ .mdw-selection__label {
-    padding-right: dp(8);
-    padding-left: 0;
-  }
-}
-
-
-.mdw-selection > .mdw-selection__input[type="checkbox"] {
-  & ~ .mdw-selection__icon::before {
-    top: ($mdw-selection__icon-size - $mdw-selection__checkbox-size) / 2;
-    left: ($mdw-selection__icon-size - $mdw-selection__checkbox-size) / 2;
-
-    height: $mdw-selection__checkbox-size;
-    width: $mdw-selection__checkbox-size;
-
-    border-radius: dp(2);
-  }
-
-  &:checked ~ .mdw-selection__icon::before,
-  &:active:not(:disabled) ~ .mdw-selection__icon::before {
-    border-width: $mdw-selection__checkbox-size / 2;
-  }
-
-  &:checked:not(:active):not(:disabled) ~ .mdw-selection__icon::before {
-    background-color: currentColor;
-  }
-
-  & ~ .mdw-selection__icon::after {
-    top: $mdw-selection__border-size + (($mdw-selection__icon-size - $mdw-selection__checkbox-size) / 2);
-    left: $mdw-selection__border-size + (($mdw-selection__icon-size - $mdw-selection__checkbox-size) / 2);
-
-    height: $mdw-selection__checkbox-icon-height;
-    width: $mdw-selection__checkbox-icon-width;
-    margin-top: $mdw-selection__checkbox-icon-offset-y;
-    margin-left: $mdw-selection__checkbox-icon-offset-x;
-
-  }
-
-  &:checked ~ .mdw-selection__icon::after {
-    box-sizing: border-box;
-    border-right-style: solid;
-    border-bottom-style: solid;
-    // border-width: $mdw-selection__checkbox-icon-thickness;
-    // Increase visibility
-    border-width: dp(2);
-    // border-color: unquote("rgba(var(--background-color))");
-    animation-name: showCheck;
-    animation-direction: normal;
-    animation-fill-mode: forwards;
-
-    transform: rotate(45deg);
-
-    background-color: transparent;
-  }
-}
-
-.mdw-selection > .mdw-selection__input[type="radio"] {
-  & ~ .mdw-selection__icon::before {
-    top: ($mdw-selection__icon-size - $mdw-selection__radio-size) / 2;
-    left: ($mdw-selection__icon-size - $mdw-selection__radio-size) / 2;
-
-    height: $mdw-selection__radio-size;
-    width: $mdw-selection__radio-size;
-
-    border-color: currentColor;
-    border-radius: 50%;
-  }
-
-  &:active:not(:disabled) ~ .mdw-selection__icon::before {
-    border-width: $mdw-selection__radio-size / 2;
-  }
-
-  & ~ .mdw-selection__icon::after {
-    top: ($mdw-selection__icon-size - $mdw-selection__radio-size) / 2;
-    left: ($mdw-selection__icon-size - $mdw-selection__radio-size) / 2;
-
-    height: $mdw-selection__radio-size;
-    width: $mdw-selection__radio-size;
 
-    transition-property: transform, background-color;
-
-    transform: scale(0);
-
-    background-color: currentColor;
-    border-radius: 50%;
-  }
-
-  &:checked ~ .mdw-selection__icon::after {
-    transform: scale(0.5);
-  }
-}
-
-.mdw-selection__input.mdw-overlay::before {
-  // HTMLInputElement should not have psuedos
-  display: none;
-  content: none;
-}
-
-.mdw-selection[mdw-switch] > .mdw-selection__input[type="checkbox"] {
-  margin-right: dp(12);
-
-  transform: scale(0) translateX(#{dp(-2)});
-
-  &:checked {
-    transform: scale(0) translateX(#{dp(14)});
-  }
-
-  .mdw-selection:active:not(:disabled) > &,
-  .mdw-selection:hover:not(:disabled) > &,
-  &:active:not(:disabled),
-  &:hover:not(:disabled),
-  &:focus {
-    transform: translateX(#{dp(-2)}) scale(2);
-
-    &:checked {
-      transform: translateX(#{dp(14)}) scale(2);
+    :root[dir="rtl"] & {
+      padding-right: dp(8);
+      padding-left: 0;
     }
   }
 
-  &:active:not(:disabled) ~ .mdw-selection__icon {
-    color: inherit;
-  }
-
-  & ~ .mdw-selection__icon::before {
-    top: dp(2);
-    left: 0;
-
-    height: dp(20);
-    width: dp(20);
-    border-style: none;
-
-    transition-property: background-color, transform;
-
-    transform: translateX(0);
-    z-index: 1;
-
-    border-radius: 50%;
-    box-shadow: mdwElevation(1);
-  }
-
-  &:checked ~ .mdw-selection__icon::before {
-    transform: translateX(#{dp(16)});
-  }
-
-  &:checked ~ .mdw-selection__icon::before,
-  &:active ~ .mdw-selection__icon::before {
-    color: inherit;
-  }
-
-  & ~ .mdw-selection__icon::after {
-    top: dp(5);
-    bottom: dp(5);
-    left: 0;
-
-    height: dp(14);
-    width: dp(36);
-    margin: 0;
-    border-style: none;
-
-    animation-name: none;
-
-    transform: none;
-
-    border-radius: dp(7);
+  .mdw-selection[aria-disabled="true"] &,
+  .mdw-selection__input:disabled ~ & {
+    cursor: not-allowed;
   }
 }
 
+.mdw-selection__input,
 .mdw-selection__icon,
 .mdw-selection__icon::before,
-.mdw-selection__icon::after,
-.mdw-selection__input {
-  animation-duration: $mdw-motion__simple-duration;
-  animation-timing-function: $mdw-motion__standard-easing;
+.mdw-selection__icon::after {
+  animation-duration: motion.$simpleDuration;
+  animation-timing-function: motion.$standardEasing;
   animation-delay: 0s;
 
   transition-delay: 0s;
-  transition-duration: $mdw-motion__simple-duration;
-  transition-timing-function: $mdw-motion__standard-easing;
+  transition-duration: motion.$simpleDuration;
+  transition-timing-function: motion.$standardEasing;
 }
 
 @keyframes showCheck {
   // Animation is applied to pre-rotated box;
   // Clip box completely horizontally and vertically upto bottom border
   0% {
-    clip: rect($mdw-selection__checkbox-icon-height - $mdw-selection__checkbox-icon-thickness, 0, auto, auto);
+    clip: rect($checkbox-icon-height - $checkbox-icon-thickness, 0, auto, auto);
   }
   // Remove horizontal clip
   // % = stroke length upto corner
-  #{$mdw-selection__checkbox-icon-width / ($mdw-selection__checkbox-icon-width + $mdw-selection__checkbox-icon-height) * 100%} {
-    clip: rect($mdw-selection__checkbox-icon-height - $mdw-selection__checkbox-icon-thickness, $mdw-selection__checkbox-icon-width, auto, auto);
+  #{math.div($checkbox-icon-width, $checkbox-icon-width + $checkbox-icon-height) * 100%} {
+    clip: rect($checkbox-icon-height - $checkbox-icon-thickness, $checkbox-icon-width, auto, auto);
   }
   // Remove vertical clip
   100% {
-    clip: rect(0, $mdw-selection__checkbox-icon-width, auto, auto);
+    clip: rect(0, $checkbox-icon-width, auto, auto);
   }
 }