@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/fab/_spec.scss

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

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

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

package/components/grid/_spec.scss

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

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

package/components/layout/_mixins.scss

@@ -1,33 +0,0 @@
-@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};
-}
-