@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/progress/style.scss

@@ -1,136 +0,0 @@
-// https://material.io/guidelines/components/progress-activity.html#
-
-$radius: 8.75;
-$pi: 3.14159265359;
-$circumference: 2 * $pi * $radius;
-$duration: 1500ms;
-
-/* 
- * SVG Animated Material Spin Animation
- * radius = 8.75
- * pi = 3.14159
- * circumference = 2 * pi * r = (54.977825)
- * dash-length = circumference * (100-x)/100 
- *
- * Every cycle rotates entire shape an additional -90deg (CCW)
- * 
- * Entire animation rotates 4x speed (CW)
- * 
- * 1. Start 0.072% from head
- * 2. Increase to 75% from head
- * 3. Reduce tail to 0.521% from tail 
- * 4. Rotate -90 deg
- *
- * Animate with ease-in-out
- */
-
-
-@function circlePercentage($percent, $limit: 100) {
-  @return $circumference * ((3 * ($limit/100)) - $percent/100);
-}
-
-@keyframes rotate-clockwise {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes rotate-counterclockwise {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(-360deg)
-  }
-}
-
-@keyframes mdw-progress-dash {
-  0% {
-    stroke-dashoffset: circlePercentage(0.5, 75);
-  }
-  50% {
-    stroke-dashoffset: circlePercentage(75,75);
-  }
-  100% {
-    stroke-dashoffset: circlePercentage(149.5,75);
-  }
-}
-
-.mdw-progress-circle {
-  width: 48px;
-  height: 48px;
-  stroke-width: 2.5;
-  margin: 8px;
-  svg {
-    width:100%;
-    height:100%;
-    transform: rotate(0deg);
-    will-change: transform;
-    animation-name: rotate-clockwise;
-    animation-duration: $duration;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    & > path {
-      fill: none;
-      stroke-width: inherit;
-      stroke: currentColor;
-      transform-origin: center center;
-      &:nth-child(1) {
-        stroke-linecap: square;
-        stroke-dasharray: $circumference * 0.75;
-        stroke-dashoffset: circlePercentage(33.33, 75);
-        transform: rotate(0deg);
-        will-change: stroke-dashoffset, transform;
-        animation-name: mdw-progress-dash, rotate-counterclockwise;
-        animation-duration: $duration, $duration * 4;
-        animation-timing-function: $motion-easing-standard, steps(4,end);
-        animation-iteration-count: infinite;
-      }
-      &:nth-child(2) {
-        display: none;
-        transition-property: stroke-dashoffset;
-        transition-duration: $duration;
-        stroke-dashoffset: circlePercentage(0, 100);
-        stroke-dasharray: $circumference;
-      }
-      
-    }
-  }
-  
-  // IE and Edge do not support animated SVG
-  @include MSOnly {
-    &:not([mdw-determinate]) svg {
-      animation-duration: $duration / 2;
-    }
-  }
-}
-
-.mdw-progress-circle[mdw-determinate] {
-  svg {
-    animation: none;
-    will-change: none;
-    transform: none;
-    & > path {
-      &:nth-child(1) {
-        display: none;
-        animation: none;
-        will-change: none;
-        transform: none;
-      }
-      &:nth-child(2) {
-        display: inline;
-      }
-    }
-  }
-}
-
-.mdw-progress-circle[value='100'] {
-  svg {
-    & > path:nth-child(2) {
-      stroke-dashoffset: circlePercentage(100);
-    }
-  }
-}

package/components/ripple/index.js

@@ -1,63 +0,0 @@
-import { getChildElementByClass } from '../common/dom';
-
-class Ripple {
-  /**
-   * @param {Element} element
-   * @return {void}
-   */
-  static attach(element) {
-    let ripple = getChildElementByClass(element, 'mdw-ripple');
-    if (!ripple) {
-      ripple = document.createElement('div');
-      ripple.classList.add('mdw-ripple');
-      if (element.firstChild) {
-        element.insertBefore(ripple, element.firstChild);
-      } else {
-        element.appendChild(ripple);
-      }
-    }
-
-    let rippleInner = getChildElementByClass(ripple, 'mdw-ripple__inner');
-    if (!rippleInner) {
-      rippleInner = document.createElement('div');
-      rippleInner.classList.add('mdw-ripple__inner');
-      ripple.appendChild(rippleInner);
-    }
-    element.setAttribute('mdw-ripple', '');
-    ripple.addEventListener('click', Ripple.onClick);
-  }
-
-  /**
-   * @param {PointerEvent|MouseEvent} event
-   * @return {void}
-   */
-  static onClick(event) {
-    /** @type {HTMLElement} */
-    const el = event.currentTarget;
-    const rippleInner = getChildElementByClass(el, 'mdw-ripple__inner');
-    if (!rippleInner) {
-      return;
-    }
-    if (!event.pointerType && !event.detail) {
-      // Ripple from center
-      rippleInner.style.removeProperty('left');
-      rippleInner.style.removeProperty('top');
-      return;
-    }
-    rippleInner.style.setProperty('left', `${event.offsetX}px`);
-    rippleInner.style.setProperty('top', `${event.offsetY}px`);
-  }
-
-  static detach(element) {
-    const ripple = getChildElementByClass(element, 'mdw-ripple');
-    if (ripple) {
-      element.removeChild(ripple);
-    }
-    element.removeAttribute('mdw-ripple');
-    element.removeEventListener('click', Ripple.onClick);
-  }
-}
-
-export {
-  Ripple,
-};

package/components/ripple/ripple.scss

@@ -1,122 +0,0 @@
-@import "../common/mixins.scss";
-
-$ripple-duration: 500ms;
-
-/**
- * --Issues rendering a circle inside an element--
- * See: https://codepen.io/shortfuse/pen/VxYxYj
- *
- * When using block display:
- * - Firefox incorrectly stretches ripple when inside flexbox
- * - Safari incorrectly inherit parent's padding
- *
- * Using using table display:
- * - Firefox renders correctly
- * - Safari renders correctly
- * - IE and Edge don't animate opacity correctly
- * - Ripples don't show if inside actual table
- *
- * When using JS (wrapped with block element):
- * - Firefox renders correctly
- * - Safari renders correctly
- * - IE and Edge renders correctly but still has forced 0.26 opacity
- *
- * Chrome works fine under all conditions
- *
- */
-
-@mixin mdw-ripple__container {
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-  border-radius: inherit;
-  > .mdw-ripple__inner {
-    display: block !important;
-  }
-}
-
-@mixin mdw-ripple__inner {
-  content: '';
-  display: table; // See above
-  padding: 50%;
-  height: 0;
-  width: 0;
-  border-radius: 50%;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  // z-index: -1; // Safari has a negative z-index scrolling bug (hides elements)
-  user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  pointer-events: none;
-  background-color: transparent;
-  color: inherit;
-  opacity: 0.26;
-  @include MSOnly() {
-    // Microsoft browsers don't handle low opacity (12%) properly with table display
-    opacity: 0.26 !important;
-  }
-  transform: translateX(-50%) translateY(-50%) scale(1);
-  transition-delay:
-    0s,
-    0s,
-    $motion-duration-desktop-max / 2;
-  transition-duration:
-    $motion-duration-desktop-max,
-    $motion-duration-desktop-max / 2,
-    $motion-duration-desktop-max / 2;
-    
-  @include allHandsets {
-    transition-delay:
-      0s,
-      0s,
-      $motion-duration-mobile-max / 2;
-    transition-duration:
-      $motion-duration-mobile-max,
-      $motion-duration-mobile-max / 2,
-      $motion-duration-mobile-max / 2;
-  }
-  @include allTablets {
-    transition-delay:
-      0s,
-      0s,
-      $motion-duration-tablet-max / 2;
-    transition-duration:
-      $motion-duration-tablet-max,
-      $motion-duration-tablet-max / 2,
-      $motion-duration-tablet-max / 2;
-  }
-  transition-property:
-    transform,
-    opacity,
-    background-color;
-  transition-timing-function: $motion-easing-sharp;
-  will-change:
-    transform,
-    opacity,
-    background-color;
-}
-
-@mixin mdw-ripple__active {
-  transition-duration: 0s;
-  transition-delay: 0s;
-  transform: translateX(-50%) translateY(-50%) scale(0);
-  opacity: 0;
-  background-color: currentColor;
-}
-
-
-// Target
-// size     0.000   -->   0.500   -->   1.000
-// opacity  0.000   -->   1.000   -->   0.000
-
-// Implemenation
-// scale   - 0.000   -->   0.500   -->   1.000 -  0% delay 100% duration
-// opacity - 0.000   -->   1.000   -->   1.000 -  0% delay  50% duration
-// color   - solid   -->   solid   -->   trans - 50% delay  50% duration
-

package/components/selection/style.scss

@@ -1,320 +0,0 @@
-// https://material.io/guidelines/components/selection-controls.html#
-// https://material.io/guidelines/patterns/selection.html#selection-item-selection
-
-@import '../common/variables.scss';
-
-$ripple-size: dp(48);
-$icon-size: dp(24);
-$radio-size: dp(20);
-$checkbox-size: dp(18);
-$border-size: dp(2);
-$horizontal-margin: dp(2);
-// from ic_check_black_18px.svg
-// rotated 45°
-$checkbox-icon-height: dp(12.73);
-$checkbox-icon-width: dp(5.93);
-$checkbox-icon-thickness: dp(1.5);
-$checkbox-icon-offset-y: dp(2.64) - $checkbox-icon-thickness - $border-size;
-$checkbox-icon-offset-x: dp(6.04) - $border-size;
-
-.mdw-selection {
-  display: inline-flex;
-  flex-direction: row;
-  position: relative;
-  animation-duration: $motion-duration-desktop-enter;
-  @include allHandsets {
-    animation-duration: $motion-duration-mobile-enter;
-  }
-  @include allTablets {
-    animation-duration: $motion-duration-tablet-enter;
-  }
-  transition-duration: $motion-duration-desktop-default;
-  @include allHandsets {
-    transition-duration: $motion-duration-mobile-default;
-  }
-  @include allTablets {
-    transition-duration: $motion-duration-tablet-default;
-  }
-}
-.mdw-selection__input {
-  display: inline-flex;
-  order: 1;
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  outline: none;
-  padding: 0;
-  margin: 0;
-  margin-top: auto;
-  margin-bottom: auto;
-  width: $icon-size;
-  height: $icon-size;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  &:disabled {
-    cursor: not-allowed;
-  }
-
-  // background-color: var(--button__ripple-color);
-  border-radius: 50%;
-  transform: scale(1);
-  opacity: 0;
-  background-color: transparent;
-  transition-property: transform, color, opacity;
-  transition-timing-function: $motion-easing-standard;
-  transition-duration: inherit;
-  &:checked {
-    // background-color: unquote("rgba(var(--accent-color), 0.26)");
-  }
-  &::-ms-check {
-    // IE11
-    border-radius: 50%;
-    color: transparent;
-    background-color: transparent;
-    border-color: transparent;
-  }
-  &:active:not(:disabled),
-  &:focus {
-    background-color: currentColor;
-    transform: scale($ripple-size/$icon-size);
-  }
-}
-.mdw-selection__icon {
-  display: inline-flex;
-  position: relative;
-  box-sizing: border-box;
-  width: $icon-size;
-  height: $icon-size;
-  max-width: 0;
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  padding: 0;
-  margin: 0;
-  margin-top: auto;
-  margin-bottom: auto;
-  outline: none;
-  
-  z-index: 1;
-  animation-timing-function: $motion-easing-deceleration;
-  animation-duration: inherit;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  .mdw-selection__input:disabled ~ & {
-    cursor: not-allowed;
-  }
-
-  transition-property: background-color, border-color;
-  transition-timing-function: $motion-easing-standard;
-  transition-duration: inherit;
-  background-color: transparent;
-
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    border-color: currentColor;
-    border-width: dp(2);
-    border-style: solid;
-    box-sizing: border-box;
-    background-color: transparent;
-    transition-property: border-width, border-color, background-color;
-    transition-duration: inherit;
-    transition-timing-function: $motion-easing-standard;
-  }
-  &::after {
-    content: "";
-    position: absolute;
-  }
-}
-
-.mdw-selection__label {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  -webkit-tap-highlight-color: transparent;
-  order: -1;
-  padding-left: 0;
-  padding-right: dp(8);
-  z-index: 1;
-  .mdw-selection__input:disabled ~ & {
-    cursor: not-allowed;
-  }
-}
-
-// Label comes after icon
-.mdw-selection__icon ~ .mdw-selection__label {
-  order: 1;
-  padding-left: dp(8);
-  padding-right: 0;
-}
-
-[dir=rtl] {
-  .mdw-selection__icon {
-    order: 1;
-  }
-
-  .mdw-selection__label {
-    padding-left: dp(8);
-    padding-right: 0;
-  }
-  
-  // Label comes after icon
-  .mdw-selection__icon ~ .mdw-selection__label {
-    padding-left: 0;
-    padding-right: dp(8);
-  }
-}
-
-
-.mdw-selection > .mdw-selection__input[type="checkbox"] {
-  & ~ .mdw-selection__icon::before {
-    left: ($icon-size - $checkbox-size) / 2;
-    top: ($icon-size - $checkbox-size) / 2;
-    width: $checkbox-size;
-    height: $checkbox-size;
-    border-radius: dp(2);
-  }
-  &:checked ~ .mdw-selection__icon::before,
-  &:active:not(:disabled) ~ .mdw-selection__icon::before {
-    border-width: $checkbox-size / 2;
-  }
-  &:checked:not(:active):not(:disabled) ~ .mdw-selection__icon::before {
-    background-color: currentColor;
-  }
-
-  & ~ .mdw-selection__icon::after {
-    top: $border-size + (($icon-size - $checkbox-size) / 2);
-    left: $border-size + (($icon-size - $checkbox-size) / 2);
-    margin-left: $checkbox-icon-offset-x;
-    margin-top: $checkbox-icon-offset-y;
-    height: $checkbox-icon-height;
-    width: $checkbox-icon-width;
-    animation-timing-function: $motion-easing-deceleration;
-    animation-duration: inherit;
-  }
-  &:checked ~ .mdw-selection__icon::after {
-    // border-width: $checkbox-icon-thickness;
-    // Increase visibility
-    border-width: dp(2);
-    background-color: transparent;
-    box-sizing: border-box;
-    transform: rotate(45deg);
-    border-bottom-style: solid;
-    border-right-style: solid;
-    // border-color: unquote("rgb(var(--background-color))");
-    animation-name: showCheck;
-    animation-direction: normal;
-    animation-fill-mode: forwards;
-  }
-}
-
-.mdw-selection > .mdw-selection__input[type="radio"] {
-  & ~ .mdw-selection__icon::before {
-    left: ($icon-size - $radio-size) / 2;
-    top: ($icon-size - $radio-size) / 2;
-    width: $radio-size;
-    height: $radio-size;
-    border-radius: 50%;
-    border-color: currentColor;
-  }
-  &:active:not(:disabled) ~ .mdw-selection__icon::before {
-    border-width: $radio-size / 2;
-  }
-  & ~ .mdw-selection__icon::after {
-    left: ($icon-size - $radio-size) / 2;
-    top: ($icon-size - $radio-size) / 2;
-    height: $radio-size;
-    width: $radio-size;
-    border-radius: 50%;
-    background-color: currentColor;
-    transform: scale(0);
-    transition-property: transform, background-color;
-    transition-timing-function: $motion-easing-standard;
-    transition-duration: inherit;
-  }
-  &:checked ~ .mdw-selection__icon::after {
-    transform: scale(0.5);
-  }
-}
-
-.mdw-selection[mdw-theme-color] {
-  .mdw-selection__input[type="checkbox"]:checked:not(:active),
-  .mdw-selection__input[type="radio"]:checked {
-    color: inherit;
-    opacity: 0.26;
-  }
-}
-
-.mdw-selection[mdw-switch] > .mdw-selection__input[type="checkbox"]  {
-  margin-right: 12px;
-  transform: scale(1) translateX(-2px);
-  &:checked {
-    transform: scale(1) translateX(14px);
-  }
-  &:focus,
-  &:active {
-    transform: translateX(-2px) scale(2);
-  }
-  &:focus:checked,
-  &:active:checked {
-    transform: translateX(14px) scale(2);
-  }
-  &:active:not(:disabled) ~ .mdw-selection__icon {
-    color: inherit;
-  }
-  & ~ .mdw-selection__icon::before {
-    left: 0;
-    top: 2px;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    border-style: none;
-    z-index: 1;
-    transform: translateX(0);
-    box-shadow: elevation(1);
-    transition-property: background-color, transform;
-  }
-  &:checked ~ .mdw-selection__icon::before {
-    transform: translateX(16px);
-  }
-  &:checked ~ .mdw-selection__icon::before,
-  &:active ~ .mdw-selection__icon::before {
-    color: inherit;
-  }
-  & ~ .mdw-selection__icon::after {
-    top: 5px;
-    bottom: 5px;
-    width: 36px;
-    height: 14px;
-    border-radius: 7px;
-    left: 0;
-    animation-name: none;
-    border-style: none;
-    transform: none;
-    margin: 0;
-  }
-}
-
-@keyframes showCheck {
-  // Animation is applied to pre-rotated box;
-  // Clip box completely horizontally and vertically upto bottom border
-  0% {
-    clip: rect($checkbox-icon-height - $checkbox-icon-thickness, 0, auto, auto)
-  }
-  // Remove horizontal clip
-  // % = stroke length upto corner
-  #{$checkbox-icon-width / ($checkbox-icon-width + $checkbox-icon-height) * 100%} {
-    clip: rect($checkbox-icon-height - $checkbox-icon-thickness, $checkbox-icon-width, auto, auto)
-  }
-  // Remove vertical clip
-  100% {
-    clip: rect(0, $checkbox-icon-width, auto, auto)
-  }
-}