@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/tooltip/_spec.scss

@@ -0,0 +1,188 @@
+// https://material.io/design/components/tooltips.html#spec
+
+@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
+
+$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 {
+  position: relative;
+  overflow: visible;
+}
+
+.mdw-tooltip,
+.mdw-tooltip__target {
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+}
+
+.mdw-tooltip {
+  @include type.addRules('caption');
+
+  position: absolute;
+
+  top: 100%;
+  left: 50%;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+
+  width: auto;
+  padding: dp(6) dp(8);
+  
+  cursor: none;
+  
+  transition-duration: motion.$fadeOutDuration;
+  transition-property: opacity;
+  transition-timing-function: motion.$accelerateEasing;
+  
+  opacity: 0;
+  pointer-events: none;
+  // Default Alignment is Center
+  
+  transform: translateX(-50%) translateY($desktop-margin);
+  z-index: 8;
+
+  border-radius: dp(4);
+
+  line-height: 1;
+  white-space: nowrap;
+
+  .mdw-tooltip__target:hover > &,
+  .mdw-tooltip__target:focus > &,
+  .mdw-tooltip__wrapper > .mdw-tooltip__target:hover ~ &,
+  .mdw-tooltip__wrapper > .mdw-tooltip__target:not([tabindex="-1"]):focus ~ & {
+    transition-duration: motion.$fadeInDuration;
+    transition-timing-function: motion.$accelerateEasing;
+    
+    opacity: 0.9;
+  }
+
+  &[mdw-align="start"],
+  :root[dir="rtl"] &[mdw-align="end"] {
+    right: auto;
+    left: 0;
+  }
+
+  &[mdw-align="end"],
+  :root[dir="rtl"] &[mdw-align="start"] {
+    right: 0;
+    left: auto;
+  }
+
+  &[mdw-align="start"],
+  &[mdw-align="end"] {
+    transform: translateY($desktop-margin);
+  }
+
+  &[mdw-position="start"],
+  &[mdw-position="end"],
+  &[mdw-position="left"],
+  &[mdw-position="right"] {
+    top: 50%;
+    left: 0;
+  }
+
+  &[mdw-position="start"],
+  &[mdw-position="left"],
+  :root[dir="rtl"] &[mdw-position="end"] {
+    margin: 0;
+
+    transform: translateY(-50%) translateX(-100%);
+  }
+
+  &[mdw-position="end"],
+  &[mdw-position="right"],
+  :root[dir="rtl"] &[mdw-position="start"] {
+    transform: translateY(-50%) translateX(100%);
+  }
+
+  &[mdw-position="top"] {
+    top: 0;
+
+    transform: translateX(-50%) translateY(-100%) translateY(-$desktop-margin);
+
+    &[mdw-align="start"],
+    &[mdw-align="end"] {
+      transform: translateY(-100%) translateY(-$desktop-margin);
+    }
+  }
+  
+}
+
+// Button position fix
+.mdw-tooltip__wrapper > .mdw-button[mdw-icon] ~ .mdw-tooltip {
+  &:not([mdw-position]) {
+    // Bottom
+    margin-top: dp(-8);
+  }
+
+  &[mdw-position="top"] {
+    margin-top: dp(8);
+  }
+}
+
+// Menu flicker fix
+.mdw-menu__wrapper > .mdw-menu:target ~ .mdw-tooltip,
+.mdw-menu__wrapper > .mdw-menu[mdw-show]:not([mdw-hide]) ~ .mdw-tooltip {
+  transition-delay: 0;
+
+  opacity: 0;
+}
+
+@include platform.ifHasTouch() {
+  .mdw-tooltip {
+    padding: dp(10) dp(16);
+
+    transition-delay: $touch-min-hold-time;
+
+    transform: translateX(-50%) translateY($mobile-margin);
+
+    font-size: sp(14);
+
+    &[mdw-align="start"],
+    &[mdw-align="end"] {
+      transform: translateY($mobile-margin);
+    }
+
+    &[mdw-position="top"] {
+      transform: translateX(-50%) translateY(-100%) translateY(-$mobile-margin);
+
+      &[mdw-align="start"],
+      &[mdw-align="end"] {
+        transform: translateY(-100%) translateY(-$mobile-margin);
+      }
+    }
+
+    // Don't change opacity unless active
+    .mdw-tooltip__target:hover:not(:active) > &,
+    .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: $touch-fade-out-time;
+
+      opacity: 0;
+    }
+
+    .mdw-tooltip__target:active > &,
+    .mdw-tooltip__wrapper > .mdw-tooltip__target:active ~ .mdw-tooltip {
+      transition-duration: motion.$fadeInDuration;
+      transition-timing-function: motion.$accelerateEasing;
+
+      opacity: 0.9;
+    }
+  }
+
+}

package/components/tooltip/index.scss

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

package/components/type/_spec.scss

@@ -0,0 +1,224 @@
+// https://material.io/guidelines/style/typography.html
+
+@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,
+h3.mdw-type,
+h4.mdw-type,
+h5.mdw-type,
+h6.mdw-type,
+p.mdw-type {
+  margin: 0;
+}
+
+p.mdw-type {
+  -ms-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+
+h1.mdw-type,
+.mdw-type[mdw-style="h1"] {
+  @include type.addRules('h1');
+}
+
+h2.mdw-type,
+.mdw-type[mdw-style="h2"] {
+  @include type.addRules('h2');
+}
+
+h3.mdw-type,
+.mdw-type[mdw-style="h3"] {
+  @include type.addRules('h3');
+}
+
+h4.mdw-type,
+.mdw-type[mdw-style="h4"] {
+  @include type.addRules('h4');
+}
+
+h5.mdw-type,
+.mdw-type[mdw-style="h5"] {
+  @include type.addRules('h5');
+}
+
+h6.mdw-type,
+.mdw-type[mdw-style="h6"] {
+  @include type.addRules('h6');
+}
+
+.mdw-type[mdw-style="subtitle"] {
+  @include type.addRules('subtitle');
+}
+
+.mdw-type[mdw-style="subtitle-2"] {
+  @include type.addRules('subtitle-2');
+}
+
+body.mdw-type,
+p.mdw-type,
+.mdw-type[mdw-style="body"] {
+  @include type.addRules('body');
+}
+
+.mdw-type[mdw-style="body-2"] {
+  @include type.addRules('body-2');
+}
+
+.mdw-type[mdw-style="button"] {
+  @include type.addRules('button');
+}
+
+.mdw-type[mdw-style="caption"] {
+  @include type.addRules('caption');
+}
+
+.mdw-type[mdw-style="overline"] {
+  @include type.addRules('overline');
+}
+
+// MD-2014 Typography
+
+
+.mdw-type[mdw-style|="display"] {
+  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;
+  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);
+}
+
+.mdw-type[mdw-style="title"] {
+  font-weight: type.$weightMedium;
+  font-size: sp(20);
+  white-space: nowrap;
+}
+
+.mdw-type[mdw-style|="subheading"] {
+  font-weight: type.$weightRegular;
+  font-size: sp(15);
+  @include breakpoint.maxTabletDevice() {
+    font-size: sp(16);
+  }
+  line-height: sp(24);
+}
+
+.mdw-type[mdw-style="subheading-2"] {
+  line-height: sp(28);
+  @include breakpoint.maxTabletDevice() {
+    line-height: sp(28);
+  }
+}
+
+.mdw-type[mdw-texttop-top]::before {
+  display: inline-block;
+  content: '';
+
+  height: 1em;
+}
+
+.mdw-type[mdw-baseline-top]::before {
+  display: inline-block;
+  content: '';
+}
+
+.mdw-type[mdw-baseline-next],
+.mdw-type[mdw-baseline-bottom] {
+  &::after {
+    display: inline-block;
+    content: '';
+
+    min-height: dp(1); // Safari workaround
+  }
+}
+
+.mdw-type[mdw-baseline-next] {
+  & + .mdw-type::before {
+    display: inline-block;
+    content: '';
+  }
+}
+
+@each $bl in $baselines {
+  .mdw-type[mdw-texttop-top="#{$bl}dp"] {
+    &::before {
+      margin-top: dp($bl);
+    }
+  }
+  .mdw-type[mdw-texttop-top="#{$bl}"] {
+    &::before {
+      margin-top: sp($bl);
+    }
+  }
+  .mdw-type[mdw-baseline-top="#{$bl}dp"] {
+    &::before {
+      height: dp($bl);
+    }
+  }
+  .mdw-type[mdw-baseline-top="#{$bl}"] {
+    &::before {
+      height: sp($bl);
+    }
+  }
+  .mdw-type[mdw-baseline-bottom="#{$bl}dp"] {
+    &::after {
+      vertical-align: dp(-$bl);
+    }
+  }
+  .mdw-type[mdw-baseline-bottom="#{$bl}"] {
+    &::after {
+      vertical-align: sp(-$bl);
+    }
+  }
+  .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

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

package/core/_breakpoint.scss

@@ -0,0 +1,189 @@
+// https://material.io/design/layout/responsive-layout-grid.html#breakpoints
+
+@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 is4Columns {
+  @media (max-width: #{$columns8 - 1}) {
+    @content;
+  }
+}
+
+@mixin min8Columns {
+  @media (min-width: $columns8) {
+    @content;
+  }
+}
+
+@mixin max8Columns {
+  @media (max-width: #{$columns12 - 1}) {
+    @content;
+  }
+}
+
+@mixin is8Columns {
+  @media (min-width: $columns8) and (max-width: #{$columns12 - 1}) {
+    @content;
+  }
+}
+
+@mixin is12Columns {
+  @media (min-width: $columns12) {
+    @content;
+  }
+}
+
+// Smallest width less than 600dp
+
+@mixin has16DPMargin {
+  @media
+    (orientation:portrait) and (max-width: dp(599)),
+    (orientation:landscape) and (max-height: dp(599)) {
+    @content;
+  }
+}
+
+// Window-size based mixins
+
+@mixin isXSmallWindow {
+  @media (max-width: #{$windowSmall - 1}) {
+    @content;
+  }
+}
+
+@mixin minSmallWindow {
+  @media (min-width: #{$windowSmall}) {
+    @content;
+  }
+}
+
+@mixin maxSmallWindow {
+  @media (max-width: #{$windowMedium - 1}) {
+    @content;
+  }
+}
+
+@mixin isSmallWindow {
+  @media (min-width: $windowSmall) and (max-width: #{$windowMedium - 1}) {
+    @content;
+  }
+}
+
+@mixin minMediumWindow {
+  @media (min-width: #{$windowMedium}) {
+    @content;
+  }
+}
+
+@mixin maxMediumWindow {
+  @media (max-width: #{$windowLarge - 1}) {
+    @content;
+  }
+}
+
+@mixin isMediumWindow {
+  @media (min-width: $windowMedium) and (max-width: #{$windowLarge - 1}) {
+    @content;
+  }
+}
+
+@mixin minLargeWindow {
+  @media (min-width: #{$windowLarge}) {
+    @content;
+  }
+}
+
+@mixin maxLargeWindow {
+  @media (max-width: #{$windowXLarge - 1}) {
+    @content;
+  }
+}
+
+@mixin isLargeWindow {
+  @media (min-width: $windowLarge) and (max-width: #{$windowXLarge - 1}) {
+    @content;
+  }
+}
+
+@mixin isXLargeWindow {
+  @media (min-width: $windowXLarge) {
+    @content;
+  }
+}
+
+// Device-based mixins
+// Detect size and orientation based on window.screen variables (device-width/device-height)
+// max-device-width is deprecated for promotion of better heuristics (touch, viewport, hover, etc)
+// https://drafts.csswg.org/mediaqueries-4/#mf-deprecated
+// min-device-width is unsafe due to older Android bugs
+// https://developers.google.com/web/fundamentals/design-and-ux/responsive/
+
+@mixin isMobileDevicePortrait {
+  @media (max-device-width: #{$portraitSmallTablet - 1})
+    and (max-device-aspect-ratio: 1/1) {
+    @content;
+  }
+}
+@mixin isMobileDeviceLandscape {
+  @media (max-device-width: #{$landscapeSmallTablet - 1})
+    and (min-device-aspect-ratio: 1/1) {
+    @content;
+  }
+}
+
+@mixin isMobileDevice {
+  @media
+    (max-device-width: #{$portraitSmallTablet - 1})
+    and (max-device-aspect-ratio: 1/1),
+    (max-device-width: #{$landscapeSmallTablet - 1})
+    and (min-device-aspect-ratio: 1/1) {
+    @content;
+  }
+}
+
+@mixin isTabletDevice {
+  @media
+    (min-width: $portraitSmallTablet)
+    and (max-device-width: #{$portraitDesktop - 1})
+    and (max-device-aspect-ratio: 1/1),
+    (min-width: $landscapeSmallTablet)
+    and (max-device-width: #{$landscapeDesktop - 1})
+    and (min-device-aspect-ratio: 1/1) {
+    @content;
+  }
+}
+
+@mixin maxTabletDevice {
+  @media
+    (max-device-width: #{$portraitDesktop - 1})
+    and (max-device-aspect-ratio: 1/1),
+    (max-device-width: #{$landscapeDesktop - 1})
+    and (min-device-aspect-ratio: 1/1) {
+    @content;
+  }
+}

package/core/_elevation.scss

@@ -0,0 +1,38 @@
+
+// https://material.io/archive/guidelines/resources/shadows.html#shadows-sketch
+$shadowValues: (
+  0:  "none",
+  1:  "0 00px 02px 0px rgba(0,0,0,0.14), 0 02px 02px 0px rgba(0,0,0,0.12), 0 01px 03px 0 rgba(0,0,0,0.20)",
+  2:  "0 00px 04px 0px rgba(0,0,0,0.14), 0 03px 04px 0px rgba(0,0,0,0.12), 0 01px 05px 0 rgba(0,0,0,0.20)",
+  3:  "0 03px 03px 0px rgba(0,0,0,0.14), 0 03px 04px 0px rgba(0,0,0,0.12), 0 01px 08px 0 rgba(0,0,0,0.20)",
+  4:  "0 02px 04px 0px rgba(0,0,0,0.14), 0 04px 05px 0px rgba(0,0,0,0.12), 0 01px 10px 0 rgba(0,0,0,0.20)",
+  6:  "0 06px 10px 0px rgba(0,0,0,0.14), 0 01px 18px 0px rgba(0,0,0,0.12), 0 03px 05px 0 rgba(0,0,0,0.20)",
+  8:  "0 08px 10px 1px rgba(0,0,0,0.14), 0 03px 14px 3px rgba(0,0,0,0.12), 0 04px 15px 0 rgba(0,0,0,0.20)",
+  9:  "0 09px 12px 1px rgba(0,0,0,0.14), 0 03px 16px 2px rgba(0,0,0,0.12), 0 05px 06px 0 rgba(0,0,0,0.20)",
+  12: "0 12px 17px 2px rgba(0,0,0,0.14), 0 05px 22px 4px rgba(0,0,0,0.12), 0 07px 08px 0 rgba(0,0,0,0.20)",
+  16: "0 16px 24px 2px rgba(0,0,0,0.14), 0 06px 30px 5px rgba(0,0,0,0.12), 0 08px 10px 0 rgba(0,0,0,0.20)",
+  24: "0 24px 38px 3px rgba(0,0,0,0.14), 0 09px 46px 8px rgba(0,0,0,0.12), 0 11px 15px 0 rgba(0,0,0,0.20)"
+) !default;
+
+// https://material.io/archive/guidelines/resources/shadows.html#shadows-illustrator
+$filterValues: (
+  0:  "none",
+  1:  "drop-shadow(0 00.92px 00.5px rgba(0,0,0,0.26)) drop-shadow(0 0 00.67px rgba(0,0,0,0.08))",
+  2:  "drop-shadow(0 01.83px 01.0px rgba(0,0,0,0.26)) drop-shadow(0 0 01.33px rgba(0,0,0,0.08))",
+  3:  "drop-shadow(0 02.75px 01.5px rgba(0,0,0,0.26)) drop-shadow(0 0 02.00px rgba(0,0,0,0.08))",
+  4:  "drop-shadow(0 03.67px 02.0px rgba(0,0,0,0.26)) drop-shadow(0 0 02.67px rgba(0,0,0,0.08))",
+  6:  "drop-shadow(0 05.50px 03.0px rgba(0,0,0,0.26)) drop-shadow(0 0 04.00px rgba(0,0,0,0.08))",
+  8:  "drop-shadow(0 07.33px 04.0px rgba(0,0,0,0.26)) drop-shadow(0 0 05.33px rgba(0,0,0,0.08))",
+  9:  "drop-shadow(0 08.25px 04.5px rgba(0,0,0,0.26)) drop-shadow(0 0 06.00px rgba(0,0,0,0.08))",
+  12: "drop-shadow(0 11.00px 06.0px rgba(0,0,0,0.26)) drop-shadow(0 0 08.00px rgba(0,0,0,0.08))",
+  16: "drop-shadow(0 14.67px 08.0px rgba(0,0,0,0.26)) drop-shadow(0 0 10.67px rgba(0,0,0,0.08))",
+  24: "drop-shadow(0 22.12px 12.0px rgba(0,0,0,0.26)) drop-shadow(0 0 16.00px rgba(0,0,0,0.08))",
+) !default;
+
+@function boxShadow($dp) {
+  @return unquote(map-get($shadowValues, $dp));
+}
+
+@function filter($dp) {
+  @return unquote(map-get($filterValues, $dp));
+}

package/core/_length.scss

@@ -0,0 +1,9 @@
+@use "sass:math";
+
+@function dp($multiplier) {
+  @return $multiplier * 1px;
+}
+
+@function sp($multiplier) {
+  @return math.div($multiplier,16.0) * 1rem;
+}

package/core/_motion.scss

@@ -0,0 +1,31 @@
+// Motion Durations
+// https://material.io/guidelines/motion/duration-easing.html#duration-easing-dynamic-durations
+
+$simpleDuration: 100ms !default;
+$fadeInDuration: 150ms !default;
+$fadeOutDuration: 75ms !default;
+
+$shapeChangeDuration: 200ms !default;
+$iconDuration: 500ms !default;
+
+$expandDuration: 250ms !default;
+$collapseDuration: 200ms !default;
+
+$expandDurationFull: 300ms !default;
+$collapseDurationFull: 250ms !default;
+
+// Motion Easing Curves
+// https://material.io/guidelines/motion/duration-easing.html#duration-easing-natural-easing-curves
+
+// FastOutSlowInInterpolator
+$standardEasing: cubic-bezier(0.4, 0.0, 0.2, 1) !default;
+$standardPeakVelocity: 0.30 !default;
+
+// LinearOutSlowInInterpolator
+$decelerateEasing: cubic-bezier(0.0, 0.0, 0.2, 1) !default;
+
+// FastOutLinearInInterpolator
+$accelerateEasing: cubic-bezier(0.4, 0.0, 1, 1) !default;
+
+// FastOutLinearInInterpolator
+$sharpEasing: cubic-bezier(0.4, 0.0, 0.6, 1) !default;