@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/components/tooltip/_spec.scss

@@ -1,15 +1,17 @@
 // https://material.io/design/components/tooltips.html#spec
 
-@import '../../core/_motion.scss';
-@import '../../core/_platform.scss';
-@import '../../core/_type.scss';
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
+@use '../../core/_platform.scss' as platform;
+@use '../../core/_type.scss' as type;
+
 
 // Guidelines state background is #616161, which is Gray 700
 
-$mdw-tooltip__desktop-margin: dp(14) !default;
-$mdw-tooltip__mobile-margin: dp(24) !default;
-$mdw-tooltip__touch-fade-out-time: 1.5s !default;
-$mdw-tooltip__touch-min-hold-time: 500ms !default;
+$desktop-margin: dp(14) !default;
+$mobile-margin: dp(24) !default;
+$touch-fade-out-time: 1.5s !default;
+$touch-min-hold-time: 500ms !default;
 
 
 .mdw-tooltip__wrapper {
@@ -27,7 +29,7 @@ $mdw-tooltip__touch-min-hold-time: 500ms !default;
 }
 
 .mdw-tooltip {
-  @include type-rules('caption');
+  @include type.addRules('caption');
 
   position: absolute;
 
@@ -42,15 +44,15 @@ $mdw-tooltip__touch-min-hold-time: 500ms !default;
   
   cursor: none;
   
-  transition-duration: $mdw-motion__fade-out-duration;
+  transition-duration: motion.$fadeOutDuration;
   transition-property: opacity;
-  transition-timing-function: $mdw-motion__accelerate-easing;
+  transition-timing-function: motion.$accelerateEasing;
   
   opacity: 0;
   pointer-events: none;
   // Default Alignment is Center
   
-  transform: translateX(-50%) translateY($mdw-tooltip__desktop-margin);
+  transform: translateX(-50%) translateY($desktop-margin);
   z-index: 8;
 
   border-radius: dp(4);
@@ -62,8 +64,8 @@ $mdw-tooltip__touch-min-hold-time: 500ms !default;
   .mdw-tooltip__target:focus > &,
   .mdw-tooltip__wrapper > .mdw-tooltip__target:hover ~ &,
   .mdw-tooltip__wrapper > .mdw-tooltip__target:not([tabindex="-1"]):focus ~ & {
-    transition-duration: $mdw-motion__fade-in-duration;
-    transition-timing-function: $mdw-motion__accelerate-easing;
+    transition-duration: motion.$fadeInDuration;
+    transition-timing-function: motion.$accelerateEasing;
     
     opacity: 0.9;
   }
@@ -82,7 +84,7 @@ $mdw-tooltip__touch-min-hold-time: 500ms !default;
 
   &[mdw-align="start"],
   &[mdw-align="end"] {
-    transform: translateY($mdw-tooltip__desktop-margin);
+    transform: translateY($desktop-margin);
   }
 
   &[mdw-position="start"],
@@ -110,11 +112,11 @@ $mdw-tooltip__touch-min-hold-time: 500ms !default;
   &[mdw-position="top"] {
     top: 0;
 
-    transform: translateX(-50%) translateY(-100%) translateY(-$mdw-tooltip__desktop-margin);
+    transform: translateX(-50%) translateY(-100%) translateY(-$desktop-margin);
 
     &[mdw-align="start"],
     &[mdw-align="end"] {
-      transform: translateY(-100%) translateY(-$mdw-tooltip__desktop-margin);
+      transform: translateY(-100%) translateY(-$desktop-margin);
     }
   }
   
@@ -140,27 +142,27 @@ $mdw-tooltip__touch-min-hold-time: 500ms !default;
   opacity: 0;
 }
 
-@include mdw-platform__has-touch-support {
+@include platform.ifHasTouch() {
   .mdw-tooltip {
     padding: dp(10) dp(16);
 
-    transition-delay: $mdw-tooltip__touch-min-hold-time;
+    transition-delay: $touch-min-hold-time;
 
-    transform: translateX(-50%) translateY($mdw-tooltip__mobile-margin);
+    transform: translateX(-50%) translateY($mobile-margin);
 
     font-size: sp(14);
 
     &[mdw-align="start"],
     &[mdw-align="end"] {
-      transform: translateY($mdw-tooltip__mobile-margin);
+      transform: translateY($mobile-margin);
     }
 
     &[mdw-position="top"] {
-      transform: translateX(-50%) translateY(-100%) translateY(-$mdw-tooltip__mobile-margin);
+      transform: translateX(-50%) translateY(-100%) translateY(-$mobile-margin);
 
       &[mdw-align="start"],
       &[mdw-align="end"] {
-        transform: translateY(-100%) translateY(-$mdw-tooltip__mobile-margin);
+        transform: translateY(-100%) translateY(-$mobile-margin);
       }
     }
 
@@ -169,15 +171,15 @@ $mdw-tooltip__touch-min-hold-time: 500ms !default;
     .mdw-tooltip__target:focus:not(:active) > &,
     .mdw-tooltip__wrapper > .mdw-tooltip__target:hover:not(:active) ~ &,
     .mdw-tooltip__wrapper > .mdw-tooltip__target:not([tabindex="-1"]):focus:not(:active) ~ & {
-      transition-delay: $mdw-tooltip__touch-fade-out-time;
+      transition-delay: $touch-fade-out-time;
 
       opacity: 0;
     }
 
     .mdw-tooltip__target:active > &,
     .mdw-tooltip__wrapper > .mdw-tooltip__target:active ~ .mdw-tooltip {
-      transition-duration: $mdw-motion__fade-in-duration;
-      transition-timing-function: $mdw-motion__accelerate-easing;
+      transition-duration: motion.$fadeInDuration;
+      transition-timing-function: motion.$accelerateEasing;
 
       opacity: 0.9;
     }

package/components/tooltip/index.scss

@@ -1,2 +1,2 @@
-@import './_spec.scss';
-@import './_theme.scss';
+@forward './_spec.scss';
+@forward './_theme.scss';

package/components/type/_spec.scss

@@ -1,8 +1,12 @@
 // https://material.io/guidelines/style/typography.html
 
-@import '../../core/_breakpoint.scss';
-@import '../../core/_platform.scss';
-@import '../../core/_type.scss';
+@use '../../core/_breakpoint.scss' as breakpoint;
+@use '../../core/_length.scss' as *;
+@use '../../core/_type.scss' as type;
+
+// 4 dp/sp baselines
+$baselines: (4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 48, 56, 64) !default;
+
 
 h1.mdw-type,
 h2.mdw-type,
@@ -15,151 +19,156 @@ p.mdw-type {
 }
 
 p.mdw-type {
-  hyphens: auto;
-  -webkit-hyphens: auto;
   -ms-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
 }
 
 h1.mdw-type,
 .mdw-type[mdw-style="h1"] {
-  @include type-rules('h1');
+  @include type.addRules('h1');
 }
 
 h2.mdw-type,
 .mdw-type[mdw-style="h2"] {
-  @include type-rules('h2');
+  @include type.addRules('h2');
 }
 
 h3.mdw-type,
 .mdw-type[mdw-style="h3"] {
-  @include type-rules('h3');
+  @include type.addRules('h3');
 }
 
 h4.mdw-type,
 .mdw-type[mdw-style="h4"] {
-  @include type-rules('h4');
+  @include type.addRules('h4');
 }
 
 h5.mdw-type,
 .mdw-type[mdw-style="h5"] {
-  @include type-rules('h5');
+  @include type.addRules('h5');
 }
 
 h6.mdw-type,
 .mdw-type[mdw-style="h6"] {
-  @include type-rules('h6');
+  @include type.addRules('h6');
 }
 
 .mdw-type[mdw-style="subtitle"] {
-  @include type-rules('subtitle');
+  @include type.addRules('subtitle');
 }
 
 .mdw-type[mdw-style="subtitle-2"] {
-  @include type-rules('subtitle-2');
+  @include type.addRules('subtitle-2');
 }
 
 body.mdw-type,
 p.mdw-type,
 .mdw-type[mdw-style="body"] {
-  @include type-rules('body');
+  @include type.addRules('body');
 }
 
 .mdw-type[mdw-style="body-2"] {
-  @include type-rules('body-2');
+  @include type.addRules('body-2');
 }
 
 .mdw-type[mdw-style="button"] {
-  @include type-rules('button');
+  @include type.addRules('button');
 }
 
 .mdw-type[mdw-style="caption"] {
-  @include type-rules('caption');
+  @include type.addRules('caption');
 }
 
 .mdw-type[mdw-style="overline"] {
-  @include type-rules('overline');
+  @include type.addRules('overline');
 }
 
 // MD-2014 Typography
 
 
 .mdw-type[mdw-style|="display"] {
-  font-weight: $font-weight-regular;
+  font-weight: type.$weightRegular;
   font-size: sp(34);
   line-height: sp(40);
 }
+
 .mdw-type[mdw-style="display-4"] {
+  font-weight: type.$weightLight;
   font-size: sp(112);
   line-height: normal;
-  font-weight: $font-weight-light;
   white-space: nowrap;
 }
+
 .mdw-type[mdw-style="display-3"] {
   font-size: sp(56);
   line-height: normal;
   white-space: nowrap;
 }
+
 .mdw-type[mdw-style="display-2"] {
   font-size: sp(45);
   line-height: sp(48);
 }
+
 .mdw-type[mdw-style="headline"] {
+  font-weight: type.$weightRegular;
   font-size: sp(24);
   line-height: sp(32);
-  font-weight: $font-weight-regular;
 }
+
 .mdw-type[mdw-style="title"] {
+  font-weight: type.$weightMedium;
   font-size: sp(20);
-  font-weight: $font-weight-medium;
   white-space: nowrap;
 }
+
 .mdw-type[mdw-style|="subheading"] {
+  font-weight: type.$weightRegular;
   font-size: sp(15);
-  @include mdw-breakpoint__tablet-device__max() {
-      font-size: sp(16);
+  @include breakpoint.maxTabletDevice() {
+    font-size: sp(16);
   }
-  font-weight: $font-weight-regular;
   line-height: sp(24);
 }
+
 .mdw-type[mdw-style="subheading-2"] {
   line-height: sp(28);
-  @include mdw-breakpoint__tablet-device__max() {
-      line-height: sp(28);
+  @include breakpoint.maxTabletDevice() {
+    line-height: sp(28);
   }
 }
 
 .mdw-type[mdw-texttop-top]::before {
-  content: '';
   display: inline-block;
+  content: '';
+
   height: 1em;
 }
 
 .mdw-type[mdw-baseline-top]::before {
-  content: '';
   display: inline-block;
+  content: '';
 }
 
 .mdw-type[mdw-baseline-next],
 .mdw-type[mdw-baseline-bottom] {
   &::after {
-    content: '';
     display: inline-block;
+    content: '';
+
+    min-height: dp(1); // Safari workaround
   }
 }
 
 .mdw-type[mdw-baseline-next] {
   & + .mdw-type::before {
-    content: '';
     display: inline-block;
+    content: '';
   }
 }
 
-// 4 dp/sp baselines
-$mdw-type__baselines: (
-  4, 8, 12, 16, 20, 24, 28, 32, 36,
-  40, 48, 56, 64) !default;
-
-@each $bl in $mdw-type__baselines {
+@each $bl in $baselines {
   .mdw-type[mdw-texttop-top="#{$bl}dp"] {
     &::before {
       margin-top: dp($bl);
@@ -192,20 +201,24 @@ $mdw-type__baselines: (
   }
   .mdw-type[mdw-baseline-next="#{$bl}dp"] {
     margin-bottom: dp(-$bl);
+
     &::after {
       vertical-align: dp(-$bl);
     }
+
     & + .mdw-type::before {
       height: dp($bl);
     }
   }
   .mdw-type[mdw-baseline-next="#{$bl}"] {
     margin-bottom: sp(-$bl);
+
     &::after {
       vertical-align: sp(-$bl);
     }
+
     & + .mdw-type::before {
       height: sp($bl);
     }
   }
-}
+}

package/components/type/index.scss

@@ -1,2 +1,2 @@
-@import './_spec.scss';
-@import './_theme.scss';
+@forward './_spec.scss';
+@forward './_theme.scss';

package/core/_breakpoint.scss

@@ -1,145 +1,137 @@
 // https://material.io/design/layout/responsive-layout-grid.html#breakpoints
 
-@import './_platform.scss';
-
-$mdw-breakpoint__portrait__small-handset: dp(0) !default;
-$mdw-breakpoint__portrait__medium-handset: dp(360) !default;
-$mdw-breakpoint__portrait__large-handset: dp(400) !default;
-$mdw-breakpoint__portrait__small-tablet: dp(600) !default;
-$mdw-breakpoint__portrait__large-tablet: dp(720) !default;
-$mdw-breakpoint__portrait__desktop: dp(960) !default;
-
-$mdw-breakpoint__landscape__small-handset: dp(480) !default;
-$mdw-breakpoint__landscape__medium-handset: dp(600) !default;
-$mdw-breakpoint__landscape__large-handset: dp(720) !default;
-$mdw-breakpoint__landscape__small-tablet: dp(960) !default;
-$mdw-breakpoint__landscape__large-tablet: dp(1024) !default;
-$mdw-breakpoint__landscape__desktop: dp(1440) !default;
-
-$mdw-breakpoint__window__xsmall: dp(0) !default;
-$mdw-breakpoint__window__small: dp(600) !default;
-$mdw-breakpoint__window__medium: dp(1024) !default;
-$mdw-breakpoint__window__large: dp(1440) !default;
-$mdw-breakpoint__window__xlarge: dp(1920) !default;
-
-$mdw-breakpoint__columns__4: dp(0) !default;
-$mdw-breakpoint__columns__8: dp(600) !default;
-$mdw-breakpoint__columns__12: dp(840) !default;
+@use "./_length.scss" as *;
+
+$portraitSmallHandset: dp(0) !default;
+$portraitMediumHandset: dp(360) !default;
+$portraitLargeHandset: dp(400) !default;
+$portraitSmallTablet: dp(600) !default;
+$portraitLargeTablet: dp(720) !default;
+$portraitDesktop: dp(960) !default;
+
+$landscapeSmallHandset: dp(480) !default;
+$landscapeMediumHandset: dp(600) !default;
+$landscapeLargeHandset: dp(720) !default;
+$landscapeSmallTablet: dp(960) !default;
+$landscapeLargeTablet: dp(1024) !default;
+$landscapeDesktop: dp(1440) !default;
+
+$windowXSmall: dp(0) !default;
+$windowSmall: dp(600) !default;
+$windowMedium: dp(1024) !default;
+$windowLarge: dp(1440) !default;
+$windowXLarge: dp(1920) !default;
+
+$columns4: dp(0) !default;
+$columns8: dp(600) !default;
+$columns12: dp(840) !default;
 
 // Column-count based mixins
 
-@mixin mdw-breakpoint__4-columns {
-  @media screen and (max-width: #{$mdw-breakpoint__columns__8 - 1}) {
+@mixin is4Columns {
+  @media (max-width: #{$columns8 - 1}) {
     @content;
   }
 }
 
-@mixin mdw-breakpoint__8-columns__min {
-  @media screen and (min-width: $mdw-breakpoint__columns__8) {
+@mixin min8Columns {
+  @media (min-width: $columns8) {
     @content;
   }
 }
 
-@mixin mdw-breakpoint__8-columns__max {
-  @media screen and (max-width: #{$mdw-breakpoint__columns__12 - 1}) {
+@mixin max8Columns {
+  @media (max-width: #{$columns12 - 1}) {
     @content;
   }
 }
 
-@mixin mdw-breakpoint__8-columns {
-  @media screen
-    and (min-width: $mdw-breakpoint__columns__8)
-    and (max-width: #{$mdw-breakpoint__columns__12 - 1}) {
+@mixin is8Columns {
+  @media (min-width: $columns8) and (max-width: #{$columns12 - 1}) {
     @content;
   }
 }
 
-@mixin mdw-breakpoint__12-columns {
-  @media screen and (min-width: $mdw-breakpoint__columns__12) {
+@mixin is12Columns {
+  @media (min-width: $columns12) {
     @content;
   }
 }
 
 // Smallest width less than 600dp
 
-@mixin mdw-breakpoint__16dp-margin {
+@mixin has16DPMargin {
   @media
-    screen and (orientation:portrait) and (max-width: dp(599)),
-    screen and (orientation:landscape) and (max-height: dp(599)) {
+    (orientation:portrait) and (max-width: dp(599)),
+    (orientation:landscape) and (max-height: dp(599)) {
     @content;
   }
 }
 
 // Window-size based mixins
 
-@mixin mdw-breakpoint__xsmall-window {
-  @media screen and (max-width: #{$mdw-breakpoint__window__small - 1}) {
+@mixin isXSmallWindow {
+  @media (max-width: #{$windowSmall - 1}) {
     @content;
   }
 }
 
-@mixin mdw-breakpoint__small-window__min {
-  @media screen and (min-width: #{$mdw-breakpoint__window__small}) {
+@mixin minSmallWindow {
+  @media (min-width: #{$windowSmall}) {
     @content;
   }
 }
 
-@mixin mdw-breakpoint__small-window__max {
-  @media screen and (max-width: #{$mdw-breakpoint__window__medium - 1}) {
+@mixin maxSmallWindow {
+  @media (max-width: #{$windowMedium - 1}) {
     @content;
   }
 }
 
-@mixin mdw-breakpoint__small-window {
-  @media screen
-    and (min-width: $mdw-breakpoint__window__small)
-    and (max-width: #{$mdw-breakpoint__window__medium - 1}) {
+@mixin isSmallWindow {
+  @media (min-width: $windowSmall) and (max-width: #{$windowMedium - 1}) {
     @content;
   }
 }
 
-@mixin mdw-breakpoint__medium-window__min {
-  @media screen and (min-width: #{$mdw-breakpoint__window__medium}) {
+@mixin minMediumWindow {
+  @media (min-width: #{$windowMedium}) {
     @content;
   }
 }
 
-@mixin mdw-breakpoint__medium-window__max {
-  @media screen and (max-width: #{$mdw-breakpoint__window__large - 1}) {
+@mixin maxMediumWindow {
+  @media (max-width: #{$windowLarge - 1}) {
     @content;
   }
 }
 
-@mixin mdw-breakpoint__medium-window {
-  @media screen
-    and (min-width: $mdw-breakpoint__window__medium)
-    and (max-width: #{$mdw-breakpoint__window__large - 1}) {
+@mixin isMediumWindow {
+  @media (min-width: $windowMedium) and (max-width: #{$windowLarge - 1}) {
     @content;
   }
 }
 
-@mixin mdw-breakpoint__large-window__min {
-  @media screen and (min-width: #{$mdw-breakpoint__window__large}) {
+@mixin minLargeWindow {
+  @media (min-width: #{$windowLarge}) {
     @content;
   }
 }
 
-@mixin mdw-breakpoint__large-window__max {
-  @media screen and (max-width: #{$mdw-breakpoint__window__xlarge - 1}) {
+@mixin maxLargeWindow {
+  @media (max-width: #{$windowXLarge - 1}) {
     @content;
   }
 }
 
-@mixin mdw-breakpoint__large-window {
-  @media screen
-    and (min-width: $mdw-breakpoint__window__large)
-    and (max-width: #{$mdw-breakpoint__window__xlarge - 1}) {
+@mixin isLargeWindow {
+  @media (min-width: $windowLarge) and (max-width: #{$windowXLarge - 1}) {
     @content;
   }
 }
 
-@mixin mdw-breakpoint__xlarge-window {
-  @media screen and (min-width: $mdw-breakpoint__window__xlarge) {
+@mixin isXLargeWindow {
+  @media (min-width: $windowXLarge) {
     @content;
   }
 }
@@ -151,54 +143,46 @@ $mdw-breakpoint__columns__12: dp(840) !default;
 // min-device-width is unsafe due to older Android bugs
 // https://developers.google.com/web/fundamentals/design-and-ux/responsive/
 
-@mixin mdw-breakpoint__mobile-device__portrait {
-  @media screen
-    and (max-device-width: #{$mdw-breakpoint__portrait__small-tablet - 1})
+@mixin isMobileDevicePortrait {
+  @media (max-device-width: #{$portraitSmallTablet - 1})
     and (max-device-aspect-ratio: 1/1) {
     @content;
   }
 }
-@mixin mdw-breakpoint__mobile-device__landscape {
-  @media screen
-    and (max-device-width: #{$mdw-breakpoint__landscape__small-tablet - 1})
+@mixin isMobileDeviceLandscape {
+  @media (max-device-width: #{$landscapeSmallTablet - 1})
     and (min-device-aspect-ratio: 1/1) {
     @content;
   }
 }
 
-@mixin mdw-breakpoint__mobile-device {
+@mixin isMobileDevice {
   @media
-    screen
-    and (max-device-width: #{$mdw-breakpoint__portrait__small-tablet - 1})
+    (max-device-width: #{$portraitSmallTablet - 1})
     and (max-device-aspect-ratio: 1/1),
-    screen
-    and (max-device-width: #{$mdw-breakpoint__landscape__small-tablet - 1})
+    (max-device-width: #{$landscapeSmallTablet - 1})
     and (min-device-aspect-ratio: 1/1) {
     @content;
   }
 }
 
-@mixin mdw-breakpoint__tablet-device {
+@mixin isTabletDevice {
   @media
-    screen
-    and (min-width: $mdw-breakpoint__portrait__small-tablet)
-    and (max-device-width: #{$mdw-breakpoint__portrait__desktop - 1})
+    (min-width: $portraitSmallTablet)
+    and (max-device-width: #{$portraitDesktop - 1})
     and (max-device-aspect-ratio: 1/1),
-    screen
-    and (min-width: $mdw-breakpoint__landscape__small-tablet)
-    and (max-device-width: #{$mdw-breakpoint__landscape__desktop - 1})
+    (min-width: $landscapeSmallTablet)
+    and (max-device-width: #{$landscapeDesktop - 1})
     and (min-device-aspect-ratio: 1/1) {
     @content;
   }
 }
 
-@mixin mdw-breakpoint__tablet-device__max {
+@mixin maxTabletDevice {
   @media
-    screen
-    and (max-device-width: #{$mdw-breakpoint__portrait__desktop - 1})
+    (max-device-width: #{$portraitDesktop - 1})
     and (max-device-aspect-ratio: 1/1),
-    screen
-    and (max-device-width: #{$mdw-breakpoint__landscape__desktop - 1})
+    (max-device-width: #{$landscapeDesktop - 1})
     and (min-device-aspect-ratio: 1/1) {
     @content;
   }