@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/components/fab/_spec.scss

@@ -5,11 +5,11 @@
 @use '../../core/_motion.scss' as motion;
 
 $delay: 40ms !default;
-$padding: dp(16) !default;
-$size: dp(56) !default;
-$miniSize: dp(40) !default;
-$miniPadding: dp(8) !default;
-$iconSize: dp(24) !default;
+$padding: 16px !default;
+$size: 56px !default;
+$miniSize: 40px !default;
+$miniPadding: 8px !default;
+$iconSize: 24px !default;
 
 .mdw-fab {
   display: flex;
@@ -18,9 +18,10 @@ $iconSize: dp(24) !default;
   flex-direction: column-reverse;
   justify-content: center;
 
-  height: dp(56);
+  block-size: 56px;
 
   pointer-events: none;
+
   z-index: 6;
 
   &[mdw-horizontal] {
@@ -30,14 +31,12 @@ $iconSize: dp(24) !default;
 
 .mdw-fab__close {
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
 
   cursor: default;
 
   pointer-events: auto;
+
   visibility: hidden;
   // z-index: -1; // Safari has a negative z-index bug
 }
@@ -46,14 +45,14 @@ $iconSize: dp(24) !default;
   order: -1;
 
   box-sizing: content-box;
-  height: dp(24);
-  min-width: dp(24);
+  block-size: 24px;
+  min-inline-size: 24px;
   margin: 0;
-  padding: dp(16);
+  padding: 16px;
 
   pointer-events: auto;
 
-  border-radius: dp(32);
+  border-radius: 32px;
   box-shadow: elevation.boxShadow(6);
 
   &:active {
@@ -61,34 +60,30 @@ $iconSize: dp(24) !default;
   }
 
   &[mdw-extended] {
-    padding: dp(12);
+    padding: 12px;
   }
 
   &[mdw-mini] {
-    padding: dp(8);
+    padding: 8px;
   }
 }
 
 .mdw-fab__speed-dial {
   display: flex;
   position: absolute;
-  right: 0;
-  bottom: 100%;
-  left: auto;
+  inset-block-end: 100%;
+  inset-inline: auto 0;
+
   align-items: center;
   flex-direction: inherit;
   order: 1;
 
   pointer-events: none;
-  z-index: inherit;
 
-  :root[dir="rtl"] & {
-    right: auto;
-    left: 0;
-  }
+  z-index: inherit;
 
   & > .mdw-fab__button.mdw-button {
-    margin: 0 0 dp(16) 0;
+    margin: 0 0 16px 0;
 
     transition-duration: motion.$collapseDuration;
     transition-property: transform, opacity;
@@ -98,14 +93,14 @@ $iconSize: dp(24) !default;
     transform: scale(0);
 
     &[mdw-mini] {
-      margin: 0 dp(8) dp(16) dp(8);
+      margin: 0 8px 16px 8px;
 
       .mdw-fab__button[mdw-mini] ~ & {
-        margin: 0 0 dp(16) 0;
+        margin: 0 0 16px 0;
       }
 
       .mdw-fab__button[mdw-extended] ~ & {
-        margin: 0 dp(4) dp(16) dp(4);
+        margin: 0 4px 16px 4px;
       }
     }
     @for $i from 1 through 7 {
@@ -119,8 +114,8 @@ $iconSize: dp(24) !default;
 .mdw-fab__icon {
   position: relative;
 
-  height: $iconSize;
-  width: $iconSize;
+  block-size: $iconSize;
+  inline-size: $iconSize;
 
   transition-duration: 200ms;
   transition-property: margin;
@@ -131,7 +126,7 @@ $iconSize: dp(24) !default;
   overflow: hidden;
 
   transition-duration: 200ms;
-  transition-property: font-size, margin-left, margin-right;
+  transition-property: font-size, margin-inline;
   transition-timing-function: linear;
   will-change: font-size;
 
@@ -141,7 +136,7 @@ $iconSize: dp(24) !default;
 
 .mdw-fab__button[mdw-extended]:not([mdw-extended="hover"]),
 .mdw-fab__button[mdw-extended="hover"]:hover {
-  padding: dp(12) dp(16);
+  padding: 12px 16px;
 
   .mdw-fab__text {
     font-size: inherit;
@@ -149,21 +144,15 @@ $iconSize: dp(24) !default;
   }
 
   .mdw-fab__icon + .mdw-fab__text {
-    margin-right: dp(4);
-    margin-left: dp(8);
-
-    :root[dir="rtl"] & {
-      margin-right: dp(8);
-      margin-left: dp(4);
-    }
+    margin-inline: 8px 4px;
   }
 }
 
 .mdw-fab__hidden-icon,
 .mdw-fab__shown-icon {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
 }
 
 .mdw-fab__shown-icon {
@@ -175,7 +164,6 @@ $iconSize: dp(24) !default;
   pointer-events: none;
 }
 
-
 .mdw-fab:target,
 .mdw-fab[mdw-show]:not([mdw-hide]) {
   > .mdw-fab__button {

package/components/fab/index.js

@@ -1,5 +1,3 @@
-import { findElementParentByClassName } from '../../core/dom.js';
-
 /**
  * @param {Element} fabElement
  * @return {boolean} handled
@@ -39,9 +37,8 @@ export function hide(fabElement) {
  * @return {void}
  */
 export function onCloserClicked(event) {
-  /** @type {HTMLElement} */
-  const closer = (event.currentTarget);
-  const fabElement = findElementParentByClassName(closer, 'mdw-fab');
+  const closer = /** @type {HTMLElement} */ (event.currentTarget);
+  const fabElement = closer.closest('.mdw-fab');
   if (!fabElement) {
     return;
   }
@@ -64,9 +61,8 @@ export function toggle(fabElement) {
  * @return {void}
  */
 export function onFabButtonClicked(event) {
-  /** @type {HTMLElement} */
-  const button = (event.currentTarget);
-  const fabElement = findElementParentByClassName(button, 'mdw-fab');
+  const button = /** @type {HTMLElement} */ (event.currentTarget);
+  const fabElement = button.closest('.mdw-fab');
   if (!fabElement) {
     return;
   }

package/components/grid/_spec.scss

@@ -7,29 +7,33 @@
 @use '../../core/_length.scss' as *;
 @use '../../core/_motion.scss' as motion;
 
-$margin: dp(24) !default;
-$gutter: dp(24) !default;
+: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(12, 1fr);
+  grid-template-columns: repeat(var(--mdw-grid__columns), 1fr);
 
-  margin-top: -$gutter;
-
-  margin-left: -$gutter;
-  padding-right: $margin;
-
-  padding-left: $margin;
-  -ms-grid-columns: unquote("(1fr)[12]");
-  -ms-grid-rows: auto;
+  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] {
-    // IE11 is currently unsupported due to lack of automatic placement
+    --mdw-grid__item-min-width: 100%;
     display: grid;
-    display: -ms-grid;
   }
 
   &[mdw-dense] {
@@ -41,271 +45,124 @@ $gutter: dp(24) !default;
   }
 
   &[mdw-margin-top] {
-    padding-top: $margin;
+    padding-block-start: var(--mdw-grid__margin);
   }
 
   &[mdw-margin-bottom] {
-    padding-bottom: $margin;
+    padding-block-end: var(--mdw-grid__margin);
   }
 
-}
-
-@mixin item($columnCount) {
-  &[mdw-colspan="1"],
-  &:not([mdw-colspan]) {
-    width: #{math.div(100%, $columnCount)};
+  &[mdw-columns="8"] {
+    --mdw-grid__columns: 8;
   }
 
-  &[mdw-stretch] {
-    max-width: none;
+  &[mdw-columns="4"] {
+    --mdw-grid__columns: 4;
   }
-  @for $i from 2 to 12 {
-    &[mdw-colspan="#{$i}"] {
-      @if ($i > $columnCount) {
-        -ms-grid-column-span: #{$columnCount};
-        grid-column-end: span #{$columnCount};
 
-        width: 100%;
-      } @else {
-        width: #{math.div($i * 100%, $columnCount)};
-      }
+  &[mdw-columns="1"] {
+    --mdw-grid__columns: 1;
+
+    & > .mdw-grid__item {
+      inline-size: 100%;
     }
   }
-  @each $percent in (25, 50, 75, 100) {
-    &[mdw-colspan="#{$percent}%"] {
-      $value: $percent * 0.01 * $columnCount;
-      -ms-grid-column-span: #{$value};
-      grid-column-end: span #{$value};
-      @if ($value < 1) {
-        $value: $columnCount;
-        width: 100%;
-      }
-    }
+
+  &[mdw-stretch] {
+    --mdw-grid__item-flex-grow: 1;
   }
+
 }
 
 .mdw-grid__item {
-
-  @include item(12);
   box-sizing: border-box;
-  max-width: 100%;
-  flex-grow: 0;
+  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-top: $gutter;
-  padding-left: $gutter;
+  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-grid[mdw-grid] > & {
-    min-width: 100%;
-  }
-
-  .mdw-grid[mdw-stretch] > & {
-    flex-grow: 1;
-  }
-
-  &[mdw-colspan="25%"] {
-    width: 25%;
-  }
-
-  &[mdw-colspan="50%"] {
-    width: 50%;
-  }
-
-  &[mdw-colspan="75%"] {
-    width: 75%;
-  }
-
-  &[mdw-colspan="100%"] {
-    width: 100%;
+  &[mdw-stretch] {
+    max-inline-size: none;
   }
 
   @for $i from 2 to 12 {
-    &[mdw-rowspan="#{$i}"] {
-      -ms-grid-row-span: #{$i};
-      grid-row-end: span #{$i};
-    }
-
     &[mdw-colspan="#{$i}"] {
-      -ms-grid-column-span: #{$i};
-      grid-column-end: span #{$i};
-    }
-  }
-}
+      grid-column-end: span min(#{$i}, var(--mdw-grid__columns));
 
-@include breakpoint.has16DPMargin() {
-  .mdw-grid {
-    margin-top: dp(-16);
-    margin-left: dp(-16);
-    padding-right: dp(16);
-    padding-left: dp(16);
-
-    &[mdw-margin-top] {
-      padding-top: dp(16);
+      inline-size: calc(#{$i} * 100% / var(--mdw-grid__columns));
     }
-
-    &[mdw-margin-bottom] {
-      padding-bottom: dp(16);
+    &[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));
 
-    & > .mdw-grid__item {
-      padding-top: dp(16);
-      padding-left: dp(16);
+      inline-size: #{$percent + '%'};
     }
   }
 }
 
 .mdw-grid__content {
   box-sizing: border-box;
-  max-height: 100%;
-  height: 100%;
-  max-width: 100%;
-  width: 100%;
+  max-block-size: 100%;
+  block-size: 100%;
+  max-inline-size: 100%;
+  inline-size: 100%;
   flex: 100%;
 }
 
-// 8 Columns (Explicit on >=840dp, Implicit on < 840dp)
-.mdw-grid[mdw-columns="8"] {
-  grid-template-columns: repeat(8, 1fr);
-  -ms-grid-columns: unquote("(1fr)[8]");
-
-  & > .mdw-grid__item {
-    @include item(8);
-  }
-}
-@include breakpoint.max8Columns() {
-  .mdw-grid {
-    grid-template-columns: repeat(8, 1fr);
-    -ms-grid-columns: unquote("(1fr)[8]");
-  }
-
-  .mdw-grid__item {
-    @include item(8);
-  }
-}
-
-// 4 Columns (Explicit on >=600dp, Implicit on <600dp)
-.mdw-grid[mdw-columns="4"] {
-  grid-template-columns: repeat(4, 1fr);
-  -ms-grid-columns: unquote("(1fr)[4]");
-
-  & > .mdw-grid__item {
-    @include item(4);
-  }
-}
-
-@include breakpoint.is4Columns() {
-  .mdw-grid,
-  .mdw-grid[mdw-columns="8"] {
-    grid-template-columns: repeat(4, 1fr);
-    -ms-grid-columns: unquote("(1fr)[4]");
-  }
-
-  .mdw-grid__item,
-  .mdw-grid[mdw-columns="8"] > .mdw-grid__item {
-    @include item(4);
-  }
-}
-
-// 1 Column (Explicit on all)
-.mdw-grid[mdw-columns="1"] {
-  grid-template-columns: 1fr;
-  -ms-grid-columns: 1fr;
-
-  & > .mdw-grid__item {
-    @include item(1);
-  }
-}
-
 // 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}"] {
-    padding-right: dp($value);
-    padding-left: dp($value);
-
-    &[mdw-margin-bottom] {
-      padding-bottom: dp($value);
-    }
-
-    &[mdw-margin-top] {
-      padding-top: dp($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}"] {
-    margin-top: dp(-$value);
-    margin-left: dp(-$value);
-
-    & > .mdw-grid__item {
-      padding-top: dp($value);
-      padding-left: dp($value);
-    }
+    --mdw-grid__gutter: #{dp($value)};
   }
 }
 
-// 8-col grids use 8col variable
 @include breakpoint.max8Columns() {
-  @each $value in (0, 8, 16, 24, 40) {
-    .mdw-grid[mdw-margin-8col="#{$value}"] {
-      padding-right: dp($value);
-      padding-left: dp($value);
-
-      &[mdw-margin-bottom] {
-        padding-bottom: dp($value);
+  .mdw-grid {
+    --mdw-grid__columns: 8;
+    @each $value in (0, 8, 16, 24, 40) {
+      &[mdw-margin-8col="#{$value}"] {
+        --mdw-grid__margin: #{dp($value)};
       }
 
-      &[mdw-margin-top] {
-        padding-top: dp($value);
-      }
-    }
-
-    .mdw-grid[mdw-gutter-8col="#{$value}"] {
-      margin-top: dp(-$value);
-      margin-left: dp(-$value);
-
-      & > .mdw-grid__item {
-        padding-top: dp($value);
-        padding-left: dp($value);
+      &[mdw-gutter-8col="#{$value}"] {
+        --mdw-grid__gutter: #{dp($value)};
       }
     }
   }
 }
 
-// 4col grids use 4col variable
-// Overrides 8col and 12col
 @include breakpoint.is4Columns() {
-  @each $value in (0, 8, 16, 24, 40) {
-    .mdw-grid,
-    .mdw-grid[mdw-columns="8"] {
+  .mdw-grid {
+    --mdw-grid__columns: 4;
+    @each $value in (0, 8, 16, 24, 40) {
       &[mdw-margin-4col="#{$value}"] {
-        padding-right: dp($value);
-        padding-left: dp($value);
-
-        &[mdw-margin-bottom] {
-          padding-bottom: dp($value);
-        }
-
-        &[mdw-margin-top] {
-          padding-top: dp($value);
-        }
+        --mdw-grid__margin: #{dp($value)};
       }
 
       &[mdw-gutter-4col="#{$value}"] {
-        margin-top: dp(-$value);
-        margin-left: dp(-$value);
-
-        > .mdw-grid__item {
-          padding-top: dp($value);
-          padding-left: dp($value);
-        }
+        --mdw-grid__gutter: #{dp($value)};
       }
     }
   }

package/components/layout/_mixins.scss

@@ -9,25 +9,3 @@
     @content;
   }
 }
-
-@mixin gridColumn($start, $end: null) {
-  @if ($end == null) {
-    $end: $start;
-  }
-  -ms-grid-column: $start;
-  grid-column-start: $start;
-  -ms-grid-column-span: #{($end - $start) + 1};
-  grid-column-end: span #{($end - $start) + 1};
-}
-
-
-@mixin gridRow($top, $bottom: null) {
-  @if ($bottom == null) {
-    $bottom: $top;
-  }
-  -ms-grid-row: $top;
-  grid-row-start: $top;
-  -ms-grid-row-span: #{($bottom  - $top) + 1};
-  grid-row-end: span #{($bottom  - $top) + 1};
-}
-