@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/card/_spec.scss

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

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

package/components/chip/_spec.scss

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

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

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

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

package/components/chip/item.js

@@ -0,0 +1,20 @@
+// 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);
+}