@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/card/_spec.scss

@@ -1,249 +0,0 @@
-// https://material.io/design/components/cards.html#specs
-
-@use "sass:math";
-
-@use '../../core/_breakpoint.scss' as breakpoint;
-@use '../../core/_elevation.scss' as elevation;
-@use '../../core/_length.scss' as *;
-@use '../../core/_motion.scss' as motion;
-@use '../../core/_platform.scss' as platform;
-@use '../../core/_type.scss' as type;
-
-
-$horizontalPadding: dp(16) !default;
-
-.mdw-card {
-  @include type.addRules('body-2');
-
-  display: block;
-  position: relative;
-
-  outline: none;
-
-  transition-duration: motion.$shapeChangeDuration;
-  transition-property: box-shadow;
-  transition-timing-function: motion.$standardEasing;
-
-  border-radius: dp(4);
-  box-shadow: elevation.boxShadow(0);
-
-  &::before {
-    // Outline is behind content, not around it
-    content: "";
-
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-
-    border: solid dp(1);
-    
-    pointer-events: none;
-
-    border-color: inherit;
-    border-radius: inherit;
-  }
-
-  @include breakpoint.maxTabletDevice() {
-    &:not([mdw-elevation]) {
-      box-shadow: elevation.boxShadow(1);
-
-      &::before {
-        border-color: transparent;
-      }
-    }
-  }
-
-  &[mdw-elevation="1"] {
-    box-shadow: elevation.boxShadow(1);
-  }
-
-  &[mdw-elevation="8"],
-  &[mdw-raised~="hover"]:hover,
-  &[mdw-raised~="focus"]:focus,
-  &[mdw-raised~="focus-within"]:focus-within {
-    box-shadow: elevation.boxShadow(8);
-  }
-
-  &[mdw-elevation="1"],
-  &[mdw-elevation="8"] {
-    &::before {
-      border-color: transparent;
-    }
-  }
-}
-
-
-.mdw-card__actions,
-.mdw-card__start,
-.mdw-card__end {
-  // Position z-index higher than .mdw-card__button
-  position: relative;
-  
-  z-index: 2;
-}
-
-.mdw-card__header,
-.mdw-card__subheader,
-.mdw-card__supporting-text,
-.mdw-card__content {
-  padding: 0 $horizontalPadding;
-}
-
-.mdw-card__supporting-text {
-  @include type.textTopToTop(14);
-  @include type.baselineToBottom(16);
-}
-
-.mdw-card > .mdw-divider {
-  width: calc(100% - #{$horizontalPadding * 2});
-  margin-right: $horizontalPadding;
-  margin-left: $horizontalPadding;
-}
-
-.mdw-card__thumbnail {
-  margin-top: dp(16);
-  margin-right: $horizontalPadding;
-  margin-bottom: 0;
-  margin-left: $horizontalPadding;
-}
-
-.mdw-card__start {
-  float: left;
-
-  :root[dir="rtl"] & {
-    float: right;
-  }
-}
-
-.mdw-card__end {
-  float: right;
-
-  :root[dir="rtl"] & {
-    float: left;
-  }
-}
-
-.mdw-card__image {
-  height: auto;
-  width: 100%;
-}
-
-.mdw-card__media {
-  position: relative;
-
-  line-height: 0;
-
-  &[mdw-ratio] > .mdw-card__image {
-    position: absolute;
-
-    height: 100%;
-
-    object-fit: cover;
-  }
-
-  &[mdw-ratio]::after {
-    content: '';
-
-    display: inline-block;
-
-    height: 0;
-    width: auto;
-  }
-
-  &[mdw-ratio="16:9"]::after {
-    padding-bottom: #{math.div(100%, 16) * 9};
-  }
-
-  &[mdw-ratio="3:2"]::after {
-    padding-bottom: #{math.div(100%, 3) * 2};
-  }
-
-  &[mdw-ratio="4:3"]::after {
-    padding-bottom: #{math.div(100%, 4) * 3};
-  }
-
-  &[mdw-ratio="1:1"]::after {
-    padding-bottom: #{math.div(100%, 1) * 1};
-  }
-}
-
-.mdw-card__header-thumbnail {
-  align-self: center;
-
-  min-height: dp(40);
-  min-width: dp(40);
-  margin-right: $horizontalPadding;
-  margin-left: 0;
-
-  :root[dir="rtl"] & {
-    margin-right: 0;
-    margin-left: $horizontalPadding;
-  }
-}
-
-.mdw-card__header {
-  margin: 0;
-}
-
-h5.mdw-card__header {
-  @include type.textTopToTop(16);
-  @include type.addRules('h5');
-  @include type.baselineToBottom(28);
-  margin-bottom: dp(-28);
-}
-
-h6.mdw-card__header {
-  @include type.textTopToTop(14);
-  @include type.addRules('h6');
-}
-
-.mdw-card__header[mdw-two-line] {
-  @include type.baselineToBottom(22);
-  margin-bottom: dp(-22);
-
-  & ~ .mdw-card__subheader {
-    @include type.textTopToTop(8);
-    @include type.baselineToBottom(16);
-  }
-}
-
-.mdw-card__actions {
-  display: flex;
-
-  padding-top: dp(8);
-  padding-right: dp(4);
-  padding-left: dp(4);
-
-  & > .mdw-button {
-    margin: 0 dp(4);
-  }
-
-  & > span {
-    flex: 1;
-  }
-}
-
-.mdw-card__actions,
-.mdw-card__supporting-text {
-  &:last-child {
-    padding-bottom: dp(8);
-  }
-}
-
-.mdw-button.mdw-card__button {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  height: 100%;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-
-  z-index: 1;
-
-  border-radius: inherit;
-}
-

package/components/card/index.scss

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

package/components/chip/_spec.scss

@@ -1,134 +0,0 @@
-// https://material.io/design/components/chips.html
-
-@use '../../core/_length.scss' as *;
-
-$borderWidth: dp(1) !default;
-
-.mdw-chip {
-  margin: 0 0 dp(-8) dp(-8);
-
-  :root[dir="rtl"] & {
-    margin: 0 dp(-8) dp(-8) 0;
-  }
-}
-
-.mdw-chip__item {
-  display: inline-flex;
-  position: relative;
-  align-items: center;
-  overflow: hidden;
-
-  min-height: dp(32);
-  margin: 0 0 dp(8) dp(8);
-  padding: 0 dp(12);
-
-  transition: inherit;
-
-  border-radius: dp(32); // unlikely to be taller than 64dp
-
-  :root[dir="rtl"] & {
-    margin: 0 dp(8) dp(8) 0;
-  }
-}
-
-.mdw-chip__checkmark,
-.mdw-chip__thumbnail {
-  display: flex;
-  align-items: center;
-  order: -1;
-
-  margin-right: dp(8);
-  margin-left: dp(-8);
-
-  transition: inherit;
-  transition-property: max-width, opacity;
-
-
-  :root[dir="rtl"] & {
-    margin-right: dp(-8);
-    margin-left: dp(8);
-  }
-  
-}
-
-.mdw-chip__input {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  box-sizing: border-box;
-  height: 100%;
-  width: 100%;
-  margin: 0;
-  border-style: solid;
-  border-width: $borderWidth;
-
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  outline: none;
-  -webkit-tap-highlight-color: transparent;
-
-  transition: inherit;
-  transition-property: none;
-
-  border-color: transparent;
-  border-radius: inherit;
-
-  &::before {
-    content: '';
-
-    position: absolute;
-    top: -$borderWidth;
-    right: -$borderWidth;
-    bottom: -$borderWidth;
-    left: -$borderWidth;
-
-    transition: inherit;
-    transition-property: background-color, opacity;
-
-    border-radius: inherit;
-  }
-
-  & ~ .mdw-chip__checkmark {
-    max-width: 0;
-
-    opacity: 0;
-  }
-
-  &:checked ~ .mdw-chip__checkmark {
-    max-width: dp(24);
-
-    opacity: 1;
-  }
-
- 
-}
-
-.mdw-chip__text {
-  transition: inherit;
-  transition-property: color;
-}
-
-.mdw-chip__remove {
-  display: flex;
-  align-items: center;
-  order: 1;
-
-  margin-right: dp(-4);
-  margin-left: dp(8);
-  
-  cursor: pointer;
-
-  z-index: 1;
-
-  :root[dir="rtl"] & {
-    margin-right: dp(8);
-    margin-left: dp(-4);
-  }
-
-  /* stylelint-disable-next-line selector-class-pattern */
-  &.material-icons {
-    font-size: dp(18);
-  }
-}

package/components/chip/_theme.scss

@@ -1,177 +0,0 @@
-// https://material.io/design/interaction/states.html
-// https://material.io/design/components/chips.html
-// https://material.io/design/iconography/system-icons.html#color
-
-@use '../../core/theme/_mixins.scss' as theme;
-
-$themeValues: (
-  text-color:                    (('foreground-light', 0.87), ('foreground-dark', 1.00)),
-  background-color:              (('foreground-light', 0.12), ('foreground-dark', 0.24)),
-
-  // icon
-  active-icon-color__focus:      (('foreground-light', 0.87), ('foreground-dark', 1.00)),
-  active-icon-color:             (('foreground-light', 0.54), ('foreground-dark', 0.70)),
-  inactive-icon-color:           (('foreground-light', 0.38), ('foreground-dark', 0.50)),
-
-  // states
-  overlay-color:                 (('foreground-light', 1.00), ('foreground-dark', 1.00)),
-
-  default-opacity:               (0.12              , 0.24),
-  hover-opacity:                 (0.12 + 0.04       , 0.24 + 0.08),
-  focus-opacity:                 (0.12 + 0.12       , 0.24 + 0.24),
-  hover-focus-opacity:           (0.12 + 0.04 + 0.12, 0.24 + 0.08 + 0.24),
-
-  selected-opacity:              (0.12 + 0.08              , 0.24 + 0.16),
-  selected-hover-opacity:        (0.12 + 0.08 + 0.04       , 0.24 + 0.16 + 0.08),
-  selected-focus-opacity:        (0.12 + 0.08 + 0.12       , 0.24 + 0.16 + 0.24),
-  selected-hover-focus-opacity:  (0.12 + 0.08 + 0.04 + 0.12, 0.24 + 0.16 + 0.08 + 0.24),
-
-  outlined-opacity:               (0.00       , 0.00),
-  outlined-hover-opacity:         (0.04       , 0.08),
-  outlined-focus-opacity:         (0.12       , 0.24),
-  outlined-hover-focus-opacity:   (0.04 + 0.12, 0.08 + 0.24),
-
-  outlined-selected-opacity:              (0.08              , 0.16),
-  outlined-selected-hover-opacity:        (0.08 + 0.04       , 0.16 + 0.08),
-  outlined-selected-focus-opacity:        (0.08 + 0.12       , 0.16 + 0.24),
-  outlined-selected-hover-focus-opacity:  (0.08 + 0.04 + 0.12, 0.16 + 0.08 + 0.24),
-
-  activated-opacity:             (0.12, 0.24),
-
-  activated-text-color:           (inherit, ('foreground-dark', 1.00)),
-
-  activated-hover-opacity:       (0.12 + 0.04, 0.24 + 0.4),
-  activated-focus-opacity:       (0.12 + 0.12, 0.24 + 0.12),
-  activated-hover-focus-opacity: (0.12 + 0.04 + 0.12, 0.24 + 0.4 + 0.12),
-
-  pressed-opacity:               (0.16, 0.32),
-
-  // disabled
-  disabled-text-color:           (('foreground-light', 0.26), ('foreground-dark', 0.30)),
-  disabled-background-color:     (('foreground-light', 0.12), ('foreground-dark', 0.12)),
-  outline-color:                 (('foreground-light', 0.12), ('foreground-dark', 0.12)),
-
-) !default;
-
-@function getThemeValue($key, $type) {
-  @return theme.getThemeValue('chip', $themeValues, $key, $type);
-}
-
-@mixin addThemeRules($type: 'var') {
-  .mdw-chip__thumbnail,
-  .mdw-chip__remove,
-  .mdw-chip__text {
-    color: RGBA(getThemeValue("text-color", $type));
-  }
-
-  .mdw-chip__input {
-    color: inherit;
-
-    &::before {
-      opacity: getThemeValue("default-opacity", $type);
-
-      background-color: RGBA(getThemeValue("overlay-color", $type));
-    }
-
-    &:checked::before {
-      color: inherit;
-    }
-
-    &:hover::before {
-      opacity: getThemeValue("hover-opacity", $type);
-    }
-
-    &:focus::before {
-      opacity: getThemeValue("focus-opacity", $type);
-    }
-
-    &:hover:focus::before {
-      opacity: getThemeValue("hover-focus-opacity", $type);
-    }
-
-    &:checked {
-      & ~ .mdw-chip__text {
-        color: RGBA(getThemeValue("activated-text-color", $type));
-      }
-
-      &[type="radio"] {
-        &::before {
-          background: currentColor;
-        }
-      }
-
-      &[type="checkbox"] {
-        &::before {
-          opacity: getThemeValue("selected-opacity", $type);
-        }
-
-        &:hover::before {
-          opacity: getThemeValue("selected-hover-opacity", $type);
-        }
-
-        &:focus::before {
-          opacity: getThemeValue("selected-focus-opacity", $type);
-        }
-
-        &:hover:focus::before {
-          opacity: getThemeValue("selected-hover-focus-opacity", $type);
-        }
-      }
-    }
-  }
-
-  .mdw-chip[mdw-outlined] .mdw-chip__input {
-    border-color: RGBA(getThemeValue('outline-color', $type));
-
-    &:not(:checked) {
-      &::before {
-        opacity: getThemeValue("outlined-opacity", $type);
-      }
-
-      &:hover::before {
-        opacity: getThemeValue("outlined-hover-opacity", $type);
-      }
-
-      &:focus::before {
-        opacity: getThemeValue("outlined-focus-opacity", $type);
-      }
-
-      &:hover:focus::before {
-        opacity: getThemeValue("outlined-hover-focus-opacity", $type);
-      }
-    }
-
-    &:checked {
-      &[type="checkbox"] {
-        &::before {
-          opacity: getThemeValue("outlined-selected-opacity", $type);
-        }
-
-        &:hover::before {
-          opacity: getThemeValue("outlined-selected-hover-opacity", $type);
-        }
-
-        &:focus::before {
-          opacity: getThemeValue("outlined-selected-focus-opacity", $type);
-        }
-
-        &:hover:focus::before {
-          opacity: getThemeValue("outlined-selected-hover-focus-opacity", $type);
-        }
-      }
-    }
-  }
-}
-
-
-@include theme.addComponentFallbackRules('light') {
-  @include addThemeRules('light');
-}
-
-@include theme.addComponentFallbackRules('dark') {
-  @include addThemeRules('dark');
-}
-
-@include theme.addComponentCSSVariableRules('chip', $themeValues) {
-  @include addThemeRules();
-}

package/components/chip/index.js

@@ -1,21 +0,0 @@
-// https://www.w3.org/TR/wai-aria-practices/#Listbox
-
-import { iterateArrayLike } from '../../core/dom.js';
-
-import * as ChipItem from './item.js';
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function attach(element) {
-  iterateArrayLike(element.getElementsByClassName('mdw-chip__item'), ChipItem.attach);
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function detach(element) {
-  iterateArrayLike(element.getElementsByClassName('mdw-chip__item'), ChipItem.detach);
-}

package/components/chip/index.scss

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

package/components/chip/item.js

@@ -1,20 +0,0 @@
-// https://www.w3.org/TR/wai-aria-practices/#Listbox
-
-import * as Ripple from '../../core/ripple/index.js';
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function attach(element) {
-  element.classList.add('mdw-ripple');
-  Ripple.attach(element);
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function detach(element) {
-  Ripple.detach(element);
-}