@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/components/tooltip/_spec.scss

@@ -1,185 +0,0 @@
-// 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

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

package/components/type/_spec.scss

@@ -1,227 +0,0 @@
-// 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

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

package/core/_breakpoint.scss

@@ -1,189 +0,0 @@
-// 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

@@ -1,78 +0,0 @@
-@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

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