@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/tooltip/_spec.scss

@@ -0,0 +1,185 @@
+// 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: 14px !default;
+$mobile-margin: 24px !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;
+
+  inset-block-start: 100%;
+  inset-inline-start: 50%;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+
+  inline-size: auto;
+  padding: 6px 8px;
+
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  cursor: none;
+  pointer-events: none;
+
+  transition-duration: motion.$fadeOutDuration;
+  transition-property: opacity;
+  transition-timing-function: motion.$accelerateEasing;
+
+  opacity: 0;
+  // Default Alignment is Center
+
+  transform: translateX(-50%) translateY($desktop-margin);
+  z-index: 8;
+
+  border-radius: 4px;
+
+  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"] {
+    inset-inline: 0 auto;
+  }
+
+  &[mdw-align="end"],
+  :root[dir="rtl"] &[mdw-align="start"] {
+    inset-inline: auto 0;
+  }
+
+  &[mdw-align="start"],
+  &[mdw-align="end"] {
+    transform: translateY($desktop-margin);
+  }
+
+  &[mdw-position="start"],
+  &[mdw-position="end"],
+  &[mdw-position="left"],
+  &[mdw-position="right"] {
+    inset-block-start: 50%;
+    inset-inline-start: 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"] {
+    inset-block-start: 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-block-start: -8px;
+  }
+
+  &[mdw-position="top"] {
+    margin-block-start: 8px;
+  }
+}
+
+// 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: 10px 16px;
+
+    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,227 @@
+// 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;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  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 {
+  content: '';
+
+  display: inline-block;
+
+  block-size: 1em;
+}
+
+.mdw-type[mdw-baseline-top]::before {
+  content: '';
+
+  display: inline-block;
+}
+
+.mdw-type[mdw-baseline-next],
+.mdw-type[mdw-baseline-bottom] {
+  &::after {
+    content: '';
+
+    display: inline-block;
+
+    min-block-size: 1px; // Safari workaround
+  }
+}
+
+.mdw-type[mdw-baseline-next] {
+  & + .mdw-type::before {
+    content: '';
+
+    display: inline-block;
+  }
+}
+
+@each $bl in $baselines {
+  .mdw-type[mdw-texttop-top="#{$bl}dp"] {
+    &::before {
+      margin-block-start: dp($bl);
+    }
+  }
+  .mdw-type[mdw-texttop-top="#{$bl}"] {
+    &::before {
+      margin-block-start: sp($bl);
+    }
+  }
+  .mdw-type[mdw-baseline-top="#{$bl}dp"] {
+    &::before {
+      block-size: dp($bl);
+    }
+  }
+  .mdw-type[mdw-baseline-top="#{$bl}"] {
+    &::before {
+      block-size: 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-block-end: dp(-$bl);
+
+    &::after {
+      vertical-align: dp(-$bl);
+    }
+
+    & + .mdw-type::before {
+      block-size: dp($bl);
+    }
+  }
+  .mdw-type[mdw-baseline-next="#{$bl}"] {
+    margin-block-end: sp(-$bl);
+
+    &::after {
+      vertical-align: sp(-$bl);
+    }
+
+    & + .mdw-type::before {
+      block-size: 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: 0 !default;
+$portraitMediumHandset: 360px !default;
+$portraitLargeHandset: 400px !default;
+$portraitSmallTablet: 600px !default;
+$portraitLargeTablet: 720px !default;
+$portraitDesktop: 960px !default;
+
+$landscapeSmallHandset: 480px !default;
+$landscapeMediumHandset: 600px !default;
+$landscapeLargeHandset: 720px !default;
+$landscapeSmallTablet: 960px !default;
+$landscapeLargeTablet: 1024px !default;
+$landscapeDesktop: 1440px !default;
+
+$windowXSmall: 0 !default;
+$windowSmall: 600px !default;
+$windowMedium: 1024px !default;
+$windowLarge: 1440px !default;
+$windowXLarge: 1920px !default;
+
+$columns4: 0 !default;
+$columns8: 600px !default;
+$columns12: 840px !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: 599px),
+    (orientation:landscape) and (max-height: 599px) {
+    @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,78 @@
+@use 'sass:map';
+@use 'sass:string';
+
+// 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;
+
+// https://material.io/design/color/dark-theme.html#properties
+$dark-theme-filter: (
+  0:  "none",
+  1:  "brightness(1.05)",
+  2:  "brightness(1.07)",
+  3:  "brightness(1.08)",
+  4:  "brightness(1.09)",
+  6:  "brightness(1.11)",
+  8:  "brightness(1.12)",
+  9:  "brightness(1.13)",
+  12: "brightness(1.14)",
+  16: "brightness(1.15)",
+  24: "brightness(1.16)"
+) !default;
+
+// https://material.io/design/color/dark-theme.html#properties
+$dark-theme-opacity: (
+  0:  0,
+  1:  0.05,
+  2:  0.07,
+  3:  0.08,
+  4:  0.09,
+  6:  0.11,
+  8:  0.12,
+  9:  0.13,
+  12: 0.14,
+  16: 0.15,
+  24: 0.16,
+) !default;
+
+@mixin boxShadowMixin($dp) {
+  box-shadow: #{string.unquote(map.get($shadowValues, $dp))};
+
+  &::before {
+    --mdw-overlay__base-opacity: var(--mdw-overlay__base-opacity-elevation_#{$dp});
+  }
+}
+
+@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,8 @@
+@use "sass:math";
+
+@function dp($multiplier) {
+  @return $multiplier * 1px;
+}
+@function sp($multiplier) {
+  @return math.div($multiplier,16.0) * 1rem;
+}