@shortfuse/materialdesignweb 0.5.0 → 0.7.1-0

package/components/fab/_spec.scss

@@ -1,210 +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: 16px !default;
-$size: 56px !default;
-$miniSize: 40px !default;
-$miniPadding: 8px !default;
-$iconSize: 24px !default;
-
-.mdw-fab {
-  display: flex;
-  position: relative;
-  align-items: flex-end;
-  flex-direction: column-reverse;
-  justify-content: center;
-
-  block-size: 56px;
-
-  pointer-events: none;
-
-  z-index: 6;
-
-  &[mdw-horizontal] {
-    flex-direction: row-reverse;
-  }
-}
-
-.mdw-fab__close {
-  position: fixed;
-  inset: 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;
-  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.boxShadow(12);
-  }
-
-  &[mdw-extended] {
-    padding: 12px;
-  }
-
-  &[mdw-mini] {
-    padding: 8px;
-  }
-}
-
-.mdw-fab__speed-dial {
-  display: flex;
-  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 {
-    margin: 0 0 16px 0;
-
-    transition-duration: motion.$collapseDuration;
-    transition-property: transform, opacity;
-    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) * $delay};
-      }
-    }
-  }
-}
-
-.mdw-fab__icon {
-  position: relative;
-
-  block-size: $iconSize;
-  inline-size: $iconSize;
-
-  transition-duration: 200ms;
-  transition-property: margin;
-  transition-timing-function: linear;
-}
-
-.mdw-fab__text {
-  overflow: hidden;
-
-  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: 12px 16px;
-
-  .mdw-fab__text {
-    font-size: inherit;
-    letter-spacing: inherit;
-  }
-
-  .mdw-fab__icon + .mdw-fab__text {
-    margin-inline: 8px 4px;
-  }
-}
-
-.mdw-fab__hidden-icon,
-.mdw-fab__shown-icon {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 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,99 +0,0 @@
-/**
- * @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) {
-  const closer = /** @type {HTMLElement} */ (event.currentTarget);
-  const fabElement = closer.closest('.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) {
-  const button = /** @type {HTMLElement} */ (event.currentTarget);
-  const fabElement = button.closest('.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,169 +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;
-
-: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

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

package/components/layout/_mixins.scss

@@ -1,11 +0,0 @@
-@use '../../core/_breakpoint.scss' as breakpoint;
-
-@mixin modal($side) {
-  .mdw-layout__body[mdw-#{$side}-style='modal'] {
-    @content;
-  }
-
-  @include breakpoint.maxSmallWindow {
-    @content;
-  }
-}