@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/fab/_spec.scss

@@ -0,0 +1,222 @@
+// 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;
+
+$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;
+  position: relative;
+  align-items: flex-end;
+  flex-direction: column-reverse;
+  justify-content: center;
+
+  height: dp(56);
+
+  pointer-events: none;
+  z-index: 6;
+
+  &[mdw-horizontal] {
+    flex-direction: row-reverse;
+  }
+}
+
+.mdw-fab__close {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  cursor: default;
+
+  pointer-events: auto;
+  visibility: hidden;
+  // z-index: -1; // Safari has a negative z-index bug
+}
+
+.mdw-fab__button.mdw-button {
+  order: -1;
+
+  box-sizing: content-box;
+  height: dp(24);
+  min-width: dp(24);
+  margin: 0;
+  padding: dp(16);
+
+  pointer-events: auto;
+
+  border-radius: dp(32);
+  box-shadow: elevation.boxShadow(6);
+
+  &:active {
+    box-shadow: elevation.boxShadow(12);
+  }
+
+  &[mdw-extended] {
+    padding: dp(12);
+  }
+
+  &[mdw-mini] {
+    padding: dp(8);
+  }
+}
+
+.mdw-fab__speed-dial {
+  display: flex;
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  left: auto;
+  align-items: center;
+  flex-direction: inherit;
+  order: 1;
+
+  pointer-events: none;
+  z-index: inherit;
+
+  :root[dir="rtl"] & {
+    right: auto;
+    left: 0;
+  }
+
+  & > .mdw-fab__button.mdw-button {
+    margin: 0 0 dp(16) 0;
+
+    transition-duration: motion.$collapseDuration;
+    transition-property: transform, opacity;
+    transition-timing-function: motion.$accelerateEasing;
+
+    opacity: 0;
+    transform: scale(0);
+
+    &[mdw-mini] {
+      margin: 0 dp(8) dp(16) dp(8);
+
+      .mdw-fab__button[mdw-mini] ~ & {
+        margin: 0 0 dp(16) 0;
+      }
+
+      .mdw-fab__button[mdw-extended] ~ & {
+        margin: 0 dp(4) dp(16) dp(4);
+      }
+    }
+    @for $i from 1 through 7 {
+      &:nth-last-child(#{$i}) {
+        transition-delay: #{($i - 1) * $delay};
+      }
+    }
+  }
+}
+
+.mdw-fab__icon {
+  position: relative;
+
+  height: $iconSize;
+  width: $iconSize;
+
+  transition-duration: 200ms;
+  transition-property: margin;
+  transition-timing-function: linear;
+}
+
+.mdw-fab__text {
+  overflow: hidden;
+
+  transition-duration: 200ms;
+  transition-property: font-size, margin-left, margin-right;
+  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__text {
+    font-size: inherit;
+    letter-spacing: inherit;
+  }
+
+  .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);
+    }
+  }
+}
+
+.mdw-fab__hidden-icon,
+.mdw-fab__shown-icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.mdw-fab__shown-icon {
+  display: none;
+}
+
+.mdw-fab:target > .mdw-fab__button {
+  // Hack to allow __close to capture click event
+  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 {
+      transition-duration: motion.$expandDuration;
+      transition-timing-function: motion.$decelerateEasing;
+
+      opacity: 1;
+      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) * $delay};
+        }
+      }
+    }
+  }
+}

package/components/fab/index.js

@@ -0,0 +1,103 @@
+import { findElementParentByClassName } from '../../core/dom.js';
+
+/**
+ * @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
+ */
+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;
+}
+
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+export function onCloserClicked(event) {
+  /** @type {HTMLElement} */
+  const closer = (event.currentTarget);
+  const fabElement = findElementParentByClassName(closer, 'mdw-fab');
+  if (!fabElement) {
+    return;
+  }
+  hide(fabElement);
+}
+
+/**
+ * @param {Element} fabElement
+ * @return {void}
+ */
+export function toggle(fabElement) {
+  if (hide(fabElement)) {
+    return;
+  }
+  show(fabElement);
+}
+
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+export function onFabButtonClicked(event) {
+  /** @type {HTMLElement} */
+  const button = (event.currentTarget);
+  const fabElement = findElementParentByClassName(button, 'mdw-fab');
+  if (!fabElement) {
+    return;
+  }
+  toggle(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);
+}
+
+/**
+ * @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,312 @@
+// 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;
+
+$margin: dp(24) !default;
+$gutter: dp(24) !default;
+
+.mdw-grid {
+  display: flex;
+  flex-wrap: wrap;
+  grid-auto-flow: row;
+  grid-auto-rows: auto;
+  grid-template-columns: repeat(12, 1fr);
+
+  margin-top: -$gutter;
+
+  margin-left: -$gutter;
+  padding-right: $margin;
+
+  padding-left: $margin;
+  -ms-grid-columns: unquote("(1fr)[12]");
+  -ms-grid-rows: auto;
+
+  &[mdw-grid] {
+    // IE11 is currently unsupported due to lack of automatic placement
+    display: grid;
+    display: -ms-grid;
+  }
+
+  &[mdw-dense] {
+    grid-auto-flow: row dense;
+  }
+
+  &[mdw-center] {
+    justify-content: center;
+  }
+
+  &[mdw-margin-top] {
+    padding-top: $margin;
+  }
+
+  &[mdw-margin-bottom] {
+    padding-bottom: $margin;
+  }
+
+}
+
+@mixin item($columnCount) {
+  &[mdw-colspan="1"],
+  &:not([mdw-colspan]) {
+    width: #{math.div(100%, $columnCount)};
+  }
+
+  &[mdw-stretch] {
+    max-width: none;
+  }
+  @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)};
+      }
+    }
+  }
+  @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-grid__item {
+
+  @include item(12);
+  box-sizing: border-box;
+  max-width: 100%;
+  flex-grow: 0;
+  flex-shrink: 1;
+  padding-top: $gutter;
+  padding-left: $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%;
+  }
+
+  @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};
+    }
+  }
+}
+
+@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);
+    }
+
+    &[mdw-margin-bottom] {
+      padding-bottom: dp(16);
+    }
+
+    & > .mdw-grid__item {
+      padding-top: dp(16);
+      padding-left: dp(16);
+    }
+  }
+}
+
+.mdw-grid__content {
+  box-sizing: border-box;
+  max-height: 100%;
+  height: 100%;
+  max-width: 100%;
+  width: 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[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);
+    }
+  }
+}
+
+// 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-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);
+      }
+    }
+  }
+}
+
+// 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-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-gutter-4col="#{$value}"] {
+        margin-top: dp(-$value);
+        margin-left: dp(-$value);
+
+        > .mdw-grid__item {
+          padding-top: dp($value);
+          padding-left: dp($value);
+        }
+      }
+    }
+  }
+}

package/components/grid/index.scss

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

package/components/layout/_mixins.scss

@@ -0,0 +1,33 @@
+@use '../../core/_breakpoint.scss' as breakpoint;
+
+@mixin modal($side) {
+  .mdw-layout__body[mdw-#{$side}-style='modal'] {
+    @content;
+  }
+
+  @include breakpoint.maxSmallWindow {
+    @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};
+}
+