@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/dialog/index.scss

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

package/components/divider/_spec.scss

@@ -0,0 +1,11 @@
+@use '../../core/_length.scss' as *;
+
+.mdw-divider {
+  inline-size: 100%;
+  margin-block-start: -1px;
+  border-block-end: 1px solid;
+
+  &[mdw-vertical] {
+    writing-mode: vertical-lr;
+  }
+}

package/components/divider/index.scss

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

package/components/elevation/_spec.scss

@@ -0,0 +1,9 @@
+@use '../../core/_elevation.scss' as elevation;
+
+.mdw-elevation {
+  @each $value in (1, 2, 3, 4, 6, 8, 9, 12, 16, 24) {
+    &[mdw-elevation="#{$value}"] {
+      @include elevation.boxShadowMixin($value);
+    }
+  }
+}

package/components/elevation/index.scss

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

package/components/fab/{style.scss → _spec.scss}

@@ -1,90 +1,111 @@
 // https://material.io/guidelines/components/buttons-floating-action-button.html
 
+@use '../../core/_elevation.scss' as elevation;
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
 
-$fab-button__delay: 40ms;
-$fab-button__padding: dp(16);
-$fab-button__size: dp(56);
-$fab-button__mini-size: dp(40);
-$fab-button__mini-padding: dp(8);
-$fab-button__icon-size: dp(24);
+$delay: 40ms !default;
+$padding: 16px !default;
+$size: 56px !default;
+$miniSize: 40px !default;
+$miniPadding: 8px !default;
+$iconSize: 24px !default;
 
 .mdw-fab {
-  position: relative;
   display: flex;
+  position: relative;
+  align-items: flex-end;
   flex-direction: column-reverse;
+  justify-content: center;
+
+  block-size: 56px;
+
+  pointer-events: none;
+
   z-index: 6;
-  align-items: flex-end;
+
   &[mdw-horizontal] {
     flex-direction: row-reverse;
   }
-  pointer-events: none;
 }
 
 .mdw-fab__close {
-  visibility: hidden;
-  pointer-events: auto;
   position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
+  inset: 0;
+
   cursor: default;
+
+  pointer-events: auto;
+
+  visibility: hidden;
   // z-index: -1; // Safari has a negative z-index bug
 }
 
 .mdw-fab__button.mdw-button {
-  pointer-events: auto;
   order: -1;
 
-  border-radius: dp(56 / 2);
-  
-  min-height: 0;
-  min-width: 0;
-  box-shadow: elevation(6);
+  box-sizing: content-box;
+  block-size: 24px;
+  min-inline-size: 24px;
+  margin: 0;
+  padding: 16px;
+
+  pointer-events: auto;
+
+  border-radius: 32px;
+  box-shadow: elevation.boxShadow(6);
+
   &:active {
-    box-shadow: elevation(12);
+    box-shadow: elevation.boxShadow(12);
   }
-  padding: dp(16);
-  margin: 0;
+
   &[mdw-extended] {
-    padding: dp(12);
-    margin: 0 dp(4) dp(4) dp(4);
+    padding: 12px;
   }
+
   &[mdw-mini] {
-    padding: dp(8);
-    margin: 0 dp(8) dp(8) dp(8);
+    padding: 8px;
   }
 }
 
 .mdw-fab__speed-dial {
-  position: absolute;
-  bottom: 100%;
-  order: 1;
   display: flex;
-  flex-direction: inherit;
+  position: absolute;
+  inset-block-end: 100%;
+  inset-inline: auto 0;
+
   align-items: center;
+  flex-direction: inherit;
+  order: 1;
+
   pointer-events: none;
+
   z-index: inherit;
-  > .mdw-fab__button.mdw-button {
-    &,
-    &[mdw-mini]
-    &[mdw-extended] {
-      margin-bottom: dp(16);
-    }
+
+  & > .mdw-fab__button.mdw-button {
+    margin: 0 0 16px 0;
+
+    transition-duration: motion.$collapseDuration;
     transition-property: transform, opacity;
-    transition-timing-function: $motion-easing-deceleration;
-    transition-duration: $motion-duration-desktop-leave;
-    @include allHandsets {
-      transition-duration: $motion-duration-mobile-leave;
-    }
-    @include allTablets {
-      transition-duration: $motion-duration-tablet-leave;
-    }
-    transform: scale(0);
+    transition-timing-function: motion.$accelerateEasing;
+
     opacity: 0;
+    transform: scale(0);
+
+    &[mdw-mini] {
+      margin: 0 8px 16px 8px;
+
+      .mdw-fab__button[mdw-mini] ~ & {
+        margin: 0 0 16px 0;
+      }
+
+      .mdw-fab__button[mdw-extended] ~ & {
+        margin: 0 4px 16px 4px;
+      }
+    }
     @for $i from 1 through 7 {
       &:nth-last-child(#{$i}) {
-        transition-delay: #{($i - 1) * $fab-button__delay};
+        transition-delay: #{($i - 1) * $delay};
       }
     }
   }
@@ -92,42 +113,46 @@ $fab-button__icon-size: dp(24);
 
 .mdw-fab__icon {
   position: relative;
-  min-width: $fab-button__icon-size;
-  min-height: $fab-button__icon-size;
-  transition-property: margin;
+
+  block-size: $iconSize;
+  inline-size: $iconSize;
+
   transition-duration: 200ms;
+  transition-property: margin;
   transition-timing-function: linear;
 }
 
 .mdw-fab__text {
   overflow: hidden;
-  font-size: 0;
-  will-change: font-size;
-  transition-property: font-size, margin-left, margin-right;
+
   transition-duration: 200ms;
+  transition-property: font-size, margin-inline;
   transition-timing-function: linear;
+  will-change: font-size;
+
+  font-size: 0;
+  letter-spacing: 0;
 }
+
 .mdw-fab__button[mdw-extended]:not([mdw-extended="hover"]),
-.mdw-fab__button[mdw-extended="hover"]:hover, {
-  padding: dp(12) dp(16);
+.mdw-fab__button[mdw-extended="hover"]:hover {
+  padding: 12px 16px;
+
   .mdw-fab__text {
-    font-size: 1em;
+    font-size: inherit;
+    letter-spacing: inherit;
   }
+
   .mdw-fab__icon + .mdw-fab__text {
-    margin-left: 8px;
-    margin-right: 4px;
-    html[dir=rtl] & {
-      margin-left: 4px;
-      margin-right: 8px;
-    }
+    margin-inline: 8px 4px;
   }
 }
 
 .mdw-fab__hidden-icon,
 .mdw-fab__shown-icon {
   position: absolute;
-  left: 0;
-  top: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
 }
 
 .mdw-fab__shown-icon {
@@ -139,47 +164,47 @@ $fab-button__icon-size: dp(24);
   pointer-events: none;
 }
 
-
 .mdw-fab:target,
 .mdw-fab[mdw-show]:not([mdw-hide]) {
   > .mdw-fab__button {
     .mdw-fab__hidden-icon {
       display: none;
     }
+
     .mdw-fab__shown-icon {
       display: block;
     }
   }
+
   > .mdw-fab__close {
     visibility: visible;
   }
 }
+
 .mdw-fab__speed-dial {
   .mdw-fab:target > &,
   .mdw-fab[mdw-show]:not([mdw-hide]) > &,
   .mdw-fab__button:hover + &[mdw-hover],
   &[mdw-hover]:hover {
     pointer-events: auto;
+
     > .mdw-fab__button.mdw-button {
-      transform: scale(1);
+      transition-duration: motion.$expandDuration;
+      transition-timing-function: motion.$decelerateEasing;
+
       opacity: 1;
-      transition-timing-function: $motion-easing-acceleration;
-      transition-duration: $motion-duration-desktop-enter;
-      @include allHandsets {
-        transition-duration: $motion-duration-mobile-enter;
-      }
-      @include allTablets {
-        transition-duration: $motion-duration-tablet-enter;
+      transform: scale(1);
+
+      box-shadow: elevation.boxShadow(6);
+
+      &:active {
+        box-shadow: elevation.boxShadow(12);
       }
       @for $i from 1 through 6 {
         &:nth-child(#{$i}) {
-          transition-delay: #{($i - 1) * $fab-button__delay};
+          transition-delay: #{($i - 1) * $delay};
         }
       }
-      box-shadow: elevation(6);
-      &:active {
-        box-shadow: elevation(12);
-      }
     }
   }
 }

package/components/fab/index.js

@@ -1,93 +1,99 @@
-import { findElementParentByClassName } from '../common/dom';
-
-class Fab {
-  /**
-   * @param {Element} fabElement
-   * @return {void}
-   */
-  static attach(fabElement) {
-    let closer = fabElement.getElementsByClassName('mdw-fab__close')[0];
-    if (!closer) {
-      closer = document.createElement('div');
-      closer.classList.add('mdw-fab__close');
-      fabElement.appendChild(closer);
-    }
-    closer.addEventListener('click', Fab.onCloserClicked);
-    const fabButton = fabElement.getElementsByClassName('mdw-fab__button')[0];
-    fabButton.addEventListener('click', Fab.onFabButtonClicked);
+/**
+ * @param {Element} fabElement
+ * @return {boolean} handled
+ */
+export function show(fabElement) {
+  let changed = false;
+  if (fabElement.hasAttribute('mdw-hide')) {
+    fabElement.removeAttribute('mdw-hide');
+    changed = true;
   }
-
-  static detach(fabElement) {
-    const fabButton = fabElement.getElementsByClassName('mdw-fab__button')[0];
-    fabButton.removeEventListener('click', Fab.onFabButtonClicked);
-    const closer = fabElement.getElementsByClassName('mdw-fab__close')[0];
-    if (closer) {
-      closer.removeEventListener('click', Fab.onCloserClicked);
-    }
+  if (!fabElement.hasAttribute('mdw-show')) {
+    fabElement.setAttribute('mdw-show', '');
+    changed = true;
   }
+  return changed;
+}
 
-  static onCloserClicked(event) {
-    const fabElement = findElementParentByClassName(event.target, 'mdw-fab');
-    if (!fabElement) {
-      return;
-    }
-    Fab.hide(fabElement);
+/**
+ * @param {Element} fabElement
+ * @return {boolean} handled
+ */
+export function hide(fabElement) {
+  if (!fabElement.hasAttribute('mdw-hide')) {
+    fabElement.setAttribute('mdw-hide', '');
+  } else {
+    return false;
+  }
+  if (fabElement.hasAttribute('mdw-show')) {
+    fabElement.removeAttribute('mdw-show');
+    return true;
   }
+  return false;
+}
 
-  static onFabButtonClicked(event) {
-    const fabElement = findElementParentByClassName(event.target, 'mdw-fab');
-    if (!fabElement) {
-      return;
-    }
-    Fab.toggle(fabElement);
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+export function onCloserClicked(event) {
+  const closer = /** @type {HTMLElement} */ (event.currentTarget);
+  const fabElement = closer.closest('.mdw-fab');
+  if (!fabElement) {
+    return;
   }
+  hide(fabElement);
+}
 
-  /**
-   * @param {Element} fabElement
-   * @return {boolean} handled
-   */
-  static show(fabElement) {
-    let changed = false;
-    if (fabElement.hasAttribute('mdw-hide')) {
-      fabElement.removeAttribute('mdw-hide');
-      changed = true;
-    }
-    if (!fabElement.hasAttribute('mdw-show')) {
-      fabElement.setAttribute('mdw-show', '');
-      changed = true;
-    }
-    return changed;
+/**
+ * @param {Element} fabElement
+ * @return {void}
+ */
+export function toggle(fabElement) {
+  if (hide(fabElement)) {
+    return;
   }
+  show(fabElement);
+}
 
-  /**
-   * @param {Element} fabElement
-   * @return {boolean} handled
-   */
-  static hide(fabElement) {
-    if (!fabElement.hasAttribute('mdw-hide')) {
-      fabElement.setAttribute('mdw-hide', '');
-    } else {
-      return false;
-    }
-    if (fabElement.hasAttribute('mdw-show')) {
-      fabElement.removeAttribute('mdw-show');
-      return true;
-    }
-    return false;
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+export function onFabButtonClicked(event) {
+  const button = /** @type {HTMLElement} */ (event.currentTarget);
+  const fabElement = button.closest('.mdw-fab');
+  if (!fabElement) {
+    return;
   }
+  toggle(fabElement);
+}
 
-  /**
-   * @param {Element} fabElement
-   * @return {void}
-   */
-  static toggle(fabElement) {
-    if (Fab.hide(fabElement)) {
-      return;
-    }
-    Fab.show(fabElement);
+/**
+ * @param {Element} fabElement
+ * @return {void}
+ */
+export function attach(fabElement) {
+  let closer = fabElement.getElementsByClassName('mdw-fab__close')[0];
+  if (!closer) {
+    closer = document.createElement('div');
+    closer.classList.add('mdw-fab__close');
+    fabElement.appendChild(closer);
   }
+  closer.addEventListener('click', onCloserClicked);
+  const fabButton = fabElement.getElementsByClassName('mdw-fab__button')[0];
+  fabButton.addEventListener('click', onFabButtonClicked);
 }
 
-export {
-  Fab,
-};
+/**
+ * @param {Element} fabElement
+ * @return {void}
+ */
+export function detach(fabElement) {
+  const fabButton = fabElement.getElementsByClassName('mdw-fab__button')[0];
+  fabButton.removeEventListener('click', onFabButtonClicked);
+  const closer = fabElement.getElementsByClassName('mdw-fab__close')[0];
+  if (closer) {
+    closer.removeEventListener('click', onCloserClicked);
+  }
+}

package/components/fab/index.scss

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

package/components/grid/_spec.scss

@@ -0,0 +1,169 @@
+// https://material.io/guidelines/layout/responsive-ui.html
+// https://material.io/archive/guidelines/layout/responsive-ui.html
+
+@use "sass:math";
+
+@use '../../core/_breakpoint.scss' as breakpoint;
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
+
+:root {
+  --mdw-grid__margin: 24px;
+  --mdw-grid__gutter: 24px;
+  @include breakpoint.has16DPMargin() {
+    --mdw-grid__margin: 16px;
+    --mdw-grid__gutter: 16px;
+  }
+}
+
+.mdw-grid {
+  --mdw-grid__columns: 12;
+  --mdw-grid__item-flex-grow: 0;
+  --mdw-grid__item-min-width: none;
+
+  display: flex;
+  flex-wrap: wrap;
+  grid-auto-flow: row;
+  grid-auto-rows: auto;
+  grid-template-columns: repeat(var(--mdw-grid__columns), 1fr);
+
+  margin-block-start: calc(-1 * var(--mdw-grid__gutter));
+  margin-inline-start: calc(-1 * var(--mdw-grid__gutter));
+  padding-inline: var(--mdw-grid__margin);
+
+  &[mdw-grid] {
+    --mdw-grid__item-min-width: 100%;
+    display: grid;
+  }
+
+  &[mdw-dense] {
+    grid-auto-flow: row dense;
+  }
+
+  &[mdw-center] {
+    justify-content: center;
+  }
+
+  &[mdw-margin-top] {
+    padding-block-start: var(--mdw-grid__margin);
+  }
+
+  &[mdw-margin-bottom] {
+    padding-block-end: var(--mdw-grid__margin);
+  }
+
+  &[mdw-columns="8"] {
+    --mdw-grid__columns: 8;
+  }
+
+  &[mdw-columns="4"] {
+    --mdw-grid__columns: 4;
+  }
+
+  &[mdw-columns="1"] {
+    --mdw-grid__columns: 1;
+
+    & > .mdw-grid__item {
+      inline-size: 100%;
+    }
+  }
+
+  &[mdw-stretch] {
+    --mdw-grid__item-flex-grow: 1;
+  }
+
+}
+
+.mdw-grid__item {
+  box-sizing: border-box;
+  min-inline-size: var(--mdw-grid__item-min-width);
+  max-inline-size: 100%;
+
+  inline-size: calc(100% / var(--mdw-grid__columns));
+  flex-grow: var(--mdw-grid__item-flex-grow);
+  flex-shrink: 1;
+  padding-block-start: var(--mdw-grid__gutter);
+  padding-inline-start: var(--mdw-grid__gutter);
+
+  transition-duration: motion.$shapeChangeDuration;
+  transition-property: flex, width, padding;
+  transition-timing-function: motion.$standardEasing;
+
+  &[mdw-stretch] {
+    max-inline-size: none;
+  }
+
+  @for $i from 2 to 12 {
+    &[mdw-colspan="#{$i}"] {
+      grid-column-end: span min(#{$i}, var(--mdw-grid__columns));
+
+      inline-size: calc(#{$i} * 100% / var(--mdw-grid__columns));
+    }
+    &[mdw-rowspan="#{$i}"] {
+      grid-row-end: span #{$i};
+    }
+  }
+  @each $percent in (25, 50, 75, 100) {
+    &[mdw-colspan="#{$percent}%"] {
+      grid-column-end: span calc($percent / 100 * var(--mdw-grid__columns));
+
+      inline-size: #{$percent + '%'};
+    }
+  }
+}
+
+.mdw-grid__content {
+  box-sizing: border-box;
+  max-block-size: 100%;
+  block-size: 100%;
+  max-inline-size: 100%;
+  inline-size: 100%;
+  flex: 100%;
+}
+
+// 1-column uses same margin values as 12-column
+@each $value in (0, 8, 16, 24, 40) {
+  .mdw-grid[mdw-margin="#{$value}"],
+  .mdw-grid[mdw-columns="1"][mdw-margin="#{$value}"],
+  .mdw-grid[mdw-columns="8"][mdw-margin-8col="#{$value}"],
+  .mdw-grid[mdw-columns="4"][mdw-margin-4col="#{$value}"] {
+    --mdw-grid__margin: #{dp($value)};
+  }
+
+  .mdw-grid[mdw-gutter="#{$value}"],
+  .mdw-grid[mdw-columns="1"][mdw-gutter="#{$value}"],
+  .mdw-grid[mdw-columns="8"][mdw-gutter-8col="#{$value}"],
+  .mdw-grid[mdw-columns="4"][mdw-gutter-4col="#{$value}"] {
+    --mdw-grid__gutter: #{dp($value)};
+  }
+}
+
+@include breakpoint.max8Columns() {
+  .mdw-grid {
+    --mdw-grid__columns: 8;
+    @each $value in (0, 8, 16, 24, 40) {
+      &[mdw-margin-8col="#{$value}"] {
+        --mdw-grid__margin: #{dp($value)};
+      }
+
+      &[mdw-gutter-8col="#{$value}"] {
+        --mdw-grid__gutter: #{dp($value)};
+      }
+    }
+  }
+}
+
+@include breakpoint.is4Columns() {
+  .mdw-grid {
+    --mdw-grid__columns: 4;
+    @each $value in (0, 8, 16, 24, 40) {
+      &[mdw-margin-4col="#{$value}"] {
+        --mdw-grid__margin: #{dp($value)};
+      }
+
+      &[mdw-gutter-4col="#{$value}"] {
+        --mdw-grid__gutter: #{dp($value)};
+      }
+    }
+  }
+}

package/components/grid/index.scss

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