@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/components/dialog/index.scss

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

package/components/divider/_spec.scss

@@ -1,11 +1,13 @@
-@import '../../core/_platform.scss';
+@use '../../core/_length.scss' as *;
 
 .mdw-divider {
-  
-  min-height: dp(1);
-  height: dp(1);
   width: 100%;
   margin-top: dp(-1);
-  
-  background-color: currentColor;
+  border-bottom: dp(1) solid;
+}
+
+.mdw-divider__vertical {
+  height: 100%;
+  margin-right: dp(-1);
+  border-left: dp(1) solid;
 }

package/components/divider/index.scss

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

package/components/elevation/_spec.scss

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

package/components/elevation/index.scss

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

package/components/fab/_spec.scss

@@ -1,16 +1,15 @@
 // https://material.io/guidelines/components/buttons-floating-action-button.html
 
-@import '../../core/_breakpoint.scss';
-@import '../../core/_elevation.scss';
-@import '../../core/_motion.scss';
-@import '../../core/_platform.scss';
-
-$mdw-fab__delay: 40ms !default;
-$mdw-fab__padding: dp(16) !default;
-$mdw-fab__size: dp(56) !default;
-$mdw-fab__mini-size: dp(40) !default;
-$mdw-fab__mini-padding: dp(8) !default;
-$mdw-fab__icon-size: dp(24) !default;
+@use '../../core/_elevation.scss' as elevation;
+@use '../../core/_length.scss' as *;
+@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;
 
 .mdw-fab {
   display: flex;
@@ -55,10 +54,10 @@ $mdw-fab__icon-size: dp(24) !default;
   pointer-events: auto;
 
   border-radius: dp(32);
-  box-shadow: mdwElevation(6);
+  box-shadow: elevation.boxShadow(6);
 
   &:active {
-    box-shadow: mdwElevation(12);
+    box-shadow: elevation.boxShadow(12);
   }
 
   &[mdw-extended] {
@@ -91,9 +90,9 @@ $mdw-fab__icon-size: dp(24) !default;
   & > .mdw-fab__button.mdw-button {
     margin: 0 0 dp(16) 0;
 
-    transition-duration: $mdw-motion__collapse-duration;
+    transition-duration: motion.$collapseDuration;
     transition-property: transform, opacity;
-    transition-timing-function: $mdw-motion__accelerate-easing;
+    transition-timing-function: motion.$accelerateEasing;
 
     opacity: 0;
     transform: scale(0);
@@ -111,7 +110,7 @@ $mdw-fab__icon-size: dp(24) !default;
     }
     @for $i from 1 through 7 {
       &:nth-last-child(#{$i}) {
-        transition-delay: #{($i - 1) * $mdw-fab__delay};
+        transition-delay: #{($i - 1) * $delay};
       }
     }
   }
@@ -120,8 +119,8 @@ $mdw-fab__icon-size: dp(24) !default;
 .mdw-fab__icon {
   position: relative;
 
-  height: $mdw-fab__icon-size;
-  width: $mdw-fab__icon-size;
+  height: $iconSize;
+  width: $iconSize;
 
   transition-duration: 200ms;
   transition-property: margin;
@@ -141,7 +140,7 @@ $mdw-fab__icon-size: dp(24) !default;
 }
 
 .mdw-fab__button[mdw-extended]:not([mdw-extended="hover"]),
-.mdw-fab__button[mdw-extended="hover"]:hover, {
+.mdw-fab__button[mdw-extended="hover"]:hover {
   padding: dp(12) dp(16);
 
   .mdw-fab__text {
@@ -202,20 +201,20 @@ $mdw-fab__icon-size: dp(24) !default;
     pointer-events: auto;
 
     > .mdw-fab__button.mdw-button {
-      transition-duration: $mdw-motion__expand-duration;
-      transition-timing-function: $mdw-motion__decelerate-easing;
+      transition-duration: motion.$expandDuration;
+      transition-timing-function: motion.$decelerateEasing;
 
       opacity: 1;
       transform: scale(1);
 
-      box-shadow: mdwElevation(6);
+      box-shadow: elevation.boxShadow(6);
 
       &:active {
-        box-shadow: mdwElevation(12);
+        box-shadow: elevation.boxShadow(12);
       }
       @for $i from 1 through 6 {
         &:nth-child(#{$i}) {
-          transition-delay: #{($i - 1) * $mdw-fab__delay};
+          transition-delay: #{($i - 1) * $delay};
         }
       }
     }

package/components/fab/index.js

@@ -1,32 +1,37 @@
-import { findElementParentByClassName } from '../../core/dom';
+import { findElementParentByClassName } from '../../core/dom.js';
 
 /**
  * @param {Element} fabElement
- * @return {void}
+ * @return {boolean} handled
  */
-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);
+export function show(fabElement) {
+  let changed = false;
+  if (fabElement.hasAttribute('mdw-hide')) {
+    fabElement.removeAttribute('mdw-hide');
+    changed = true;
   }
-  closer.addEventListener('click', onCloserClicked);
-  const fabButton = fabElement.getElementsByClassName('mdw-fab__button')[0];
-  fabButton.addEventListener('click', onFabButtonClicked);
+  if (!fabElement.hasAttribute('mdw-show')) {
+    fabElement.setAttribute('mdw-show', '');
+    changed = true;
+  }
+  return changed;
 }
 
 /**
  * @param {Element} fabElement
- * @return {void}
+ * @return {boolean} handled
  */
-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);
+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;
 }
 
 /**
@@ -43,6 +48,17 @@ export function onCloserClicked(event) {
   hide(fabElement);
 }
 
+/**
+ * @param {Element} fabElement
+ * @return {void}
+ */
+export function toggle(fabElement) {
+  if (hide(fabElement)) {
+    return;
+  }
+  show(fabElement);
+}
+
 /**
  * @param {MouseEvent} event
  * @return {void}
@@ -59,45 +75,29 @@ export function onFabButtonClicked(event) {
 
 /**
  * @param {Element} fabElement
- * @return {boolean} handled
- */
-export function 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 {boolean} handled
+ * @return {void}
  */
-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;
+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);
   }
-  return false;
+  closer.addEventListener('click', onCloserClicked);
+  const fabButton = fabElement.getElementsByClassName('mdw-fab__button')[0];
+  fabButton.addEventListener('click', onFabButtonClicked);
 }
 
 /**
  * @param {Element} fabElement
  * @return {void}
  */
-export function toggle(fabElement) {
-  if (hide(fabElement)) {
-    return;
+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);
   }
-  show(fabElement);
 }

package/components/fab/index.scss

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

package/components/grid/_spec.scss

@@ -1,12 +1,14 @@
 // https://material.io/guidelines/layout/responsive-ui.html
 // https://material.io/archive/guidelines/layout/responsive-ui.html
 
-@import '../../core/_motion.scss';
-@import '../../core/_platform.scss';
-@import '../../core/_breakpoint.scss';
+@use "sass:math";
 
-$mdw-grid__margin: dp(24) !default;
-$mdw-grid__gutter: dp(24) !default;
+@use '../../core/_breakpoint.scss' as breakpoint;
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
+
+$margin: dp(24) !default;
+$gutter: dp(24) !default;
 
 .mdw-grid {
   display: flex;
@@ -15,12 +17,12 @@ $mdw-grid__gutter: dp(24) !default;
   grid-auto-rows: auto;
   grid-template-columns: repeat(12, 1fr);
 
-  margin-top: -$mdw-grid__gutter;
+  margin-top: -$gutter;
 
-  margin-left: -$mdw-grid__gutter;
-  padding-right: $mdw-grid__margin;
+  margin-left: -$gutter;
+  padding-right: $margin;
 
-  padding-left: $mdw-grid__margin;
+  padding-left: $margin;
   -ms-grid-columns: unquote("(1fr)[12]");
   -ms-grid-rows: auto;
 
@@ -39,19 +41,19 @@ $mdw-grid__gutter: dp(24) !default;
   }
 
   &[mdw-margin-top] {
-    padding-top: $mdw-grid__margin;
+    padding-top: $margin;
   }
 
   &[mdw-margin-bottom] {
-    padding-bottom: $mdw-grid__margin;
+    padding-bottom: $margin;
   }
 
 }
 
-@mixin mdw-grid__item($columnCount) {
+@mixin item($columnCount) {
   &[mdw-colspan="1"],
   &:not([mdw-colspan]) {
-    width: calc(100% / #{$columnCount});
+    width: #{math.div(100%, $columnCount)};
   }
 
   &[mdw-stretch] {
@@ -65,13 +67,13 @@ $mdw-grid__gutter: dp(24) !default;
 
         width: 100%;
       } @else {
-        width: calc((#{$i} * 100% / #{$columnCount}));
+        width: #{math.div($i * 100%, $columnCount)};
       }
     }
   }
   @each $percent in (25, 50, 75, 100) {
     &[mdw-colspan="#{$percent}%"] {
-      $value: $percent / 100 * $columnCount;
+      $value: $percent * 0.01 * $columnCount;
       -ms-grid-column-span: #{$value};
       grid-column-end: span #{$value};
       @if ($value < 1) {
@@ -84,17 +86,17 @@ $mdw-grid__gutter: dp(24) !default;
 
 .mdw-grid__item {
 
-  @include mdw-grid__item(12);
+  @include item(12);
   box-sizing: border-box;
   max-width: 100%;
   flex-grow: 0;
   flex-shrink: 1;
-  padding-top: $mdw-grid__gutter;
-  padding-left: $mdw-grid__gutter;
+  padding-top: $gutter;
+  padding-left: $gutter;
 
-  transition-duration: $mdw-motion__shape-change-duration;
+  transition-duration: motion.$shapeChangeDuration;
   transition-property: flex, width, padding;
-  transition-timing-function: $mdw-motion__standard-easing;
+  transition-timing-function: motion.$standardEasing;
 
   .mdw-grid[mdw-grid] > & {
     min-width: 100%;
@@ -133,7 +135,7 @@ $mdw-grid__gutter: dp(24) !default;
   }
 }
 
-@include mdw-breakpoint__16dp-margin {
+@include breakpoint.has16DPMargin() {
   .mdw-grid {
     margin-top: dp(-16);
     margin-left: dp(-16);
@@ -170,17 +172,17 @@ $mdw-grid__gutter: dp(24) !default;
   -ms-grid-columns: unquote("(1fr)[8]");
 
   & > .mdw-grid__item {
-    @include mdw-grid__item(8);
+    @include item(8);
   }
 }
-@include mdw-breakpoint__8-columns__max {
+@include breakpoint.max8Columns() {
   .mdw-grid {
     grid-template-columns: repeat(8, 1fr);
     -ms-grid-columns: unquote("(1fr)[8]");
   }
 
   .mdw-grid__item {
-    @include mdw-grid__item(8);
+    @include item(8);
   }
 }
 
@@ -190,11 +192,11 @@ $mdw-grid__gutter: dp(24) !default;
   -ms-grid-columns: unquote("(1fr)[4]");
 
   & > .mdw-grid__item {
-    @include mdw-grid__item(4);
+    @include item(4);
   }
 }
 
-@include mdw-breakpoint__4-columns() {
+@include breakpoint.is4Columns() {
   .mdw-grid,
   .mdw-grid[mdw-columns="8"] {
     grid-template-columns: repeat(4, 1fr);
@@ -203,7 +205,7 @@ $mdw-grid__gutter: dp(24) !default;
 
   .mdw-grid__item,
   .mdw-grid[mdw-columns="8"] > .mdw-grid__item {
-    @include mdw-grid__item(4);
+    @include item(4);
   }
 }
 
@@ -213,7 +215,7 @@ $mdw-grid__gutter: dp(24) !default;
   -ms-grid-columns: 1fr;
 
   & > .mdw-grid__item {
-    @include mdw-grid__item(1);
+    @include item(1);
   }
 }
 
@@ -222,7 +224,7 @@ $mdw-grid__gutter: dp(24) !default;
   .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[mdw-columns="4"][mdw-margin-4col="#{$value}"] {
     padding-right: dp($value);
     padding-left: dp($value);
 
@@ -250,7 +252,7 @@ $mdw-grid__gutter: dp(24) !default;
 }
 
 // 8-col grids use 8col variable
-@include mdw-breakpoint__8-columns__max {
+@include breakpoint.max8Columns() {
   @each $value in (0, 8, 16, 24, 40) {
     .mdw-grid[mdw-margin-8col="#{$value}"] {
       padding-right: dp($value);
@@ -279,7 +281,7 @@ $mdw-grid__gutter: dp(24) !default;
 
 // 4col grids use 4col variable
 // Overrides 8col and 12col
-@include mdw-breakpoint__4-columns {
+@include breakpoint.is4Columns() {
   @each $value in (0, 8, 16, 24, 40) {
     .mdw-grid,
     .mdw-grid[mdw-columns="8"] {

package/components/grid/index.scss

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

package/components/layout/_mixins.scss

@@ -1,16 +1,16 @@
-@import '../../core/_breakpoint.scss';
+@use '../../core/_breakpoint.scss' as breakpoint;
 
-@mixin mdw-layout__modal($side) {
+@mixin modal($side) {
   .mdw-layout__body[mdw-#{$side}-style='modal'] {
     @content;
   }
 
-  @include mdw-breakpoint__small-window__max {
+  @include breakpoint.maxSmallWindow {
     @content;
   }
 }
 
-@mixin mdw-layout__grid-column($start, $end: null) {
+@mixin gridColumn($start, $end: null) {
   @if ($end == null) {
     $end: $start;
   }
@@ -21,7 +21,7 @@
 }
 
 
-@mixin mdw-layout__grid-row($top, $bottom: null) {
+@mixin gridRow($top, $bottom: null) {
   @if ($bottom == null) {
     $bottom: $top;
   }