@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/core/menu/style.scss

@@ -1,239 +0,0 @@
-// https://material.io/guidelines/components/menus.html
-
-@import '../../common/ripple.scss';
-@import '../../common/variables.scss';
-
-$menu__unit-width: dp(56);
-$menu__animation-duration: 200ms;
-$menu__margin-top: dp(8);
-$menu__margin-bottom: dp(14);
-
-// 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;
-$checkbox-icon-offset-x: dp(6.04);
-
-
-.mdw-menu__wrapper {
-  position: relative;
-  display: inline-block;
-}
-
-.mdw-menu__close {
-  visibility: hidden;
-  pointer-events: inherit;
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: -1;
-  cursor: default;
-}
-
-.mdw-menu {
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  z-index: 1;
-  pointer-events: none;
-  transition-property: transform box-shadow opacity;
-  transition-timing-function: $motion-easing-deceleration;
-  transition-duration: $motion-duration-desktop-leave;
-  @include allHandsets {
-    transition-duration: $motion-duration-mobile-leave;
-  }
-  @include allTablets {
-    transition-duration: $motion-duration-tablet-leave;
-  }
-  @for $i from 3 to 7 {
-    &[mdw-width-units="#{$i}"] {
-      width: calc(#{$menu__unit-width} * #{$i});
-    }
-  }
-  transform-origin: top left;
-  transform: scaleX(0) scaleY(0);
-  box-shadow: elevation(0);
-  opacity: 0;
-  margin-left: dp(8);
-  margin-right: dp(8);
-  padding-top: dp(8);
-  padding-bottom: dp(8);
-  border-radius: dp(2);
-  min-width: $menu__unit-width * 2;
-  max-width: $menu__unit-width * 5;
-  top: 0;
-  left: 0;
-
-  &[mdw-position~="end"] {
-    left: auto;
-    right: 0;
-    transform-origin: top right;
-  }
-  &[mdw-position~="bottom"] {
-    top: auto;
-    bottom: 0;
-    transform-origin: bottom left;
-    &[mdw-position~="end"] {
-        transform-origin: bottom right;
-    }
-  }
-
-  [dir=rtl] & {
-    left: auto;
-    right: 0;
-    transform-origin: top right;
-    &[mdw-position~="end"] {
-      left: 0;
-      right: auto;
-      transform-origin: top left;
-    }
-    &[mdw-position~="bottom"] {
-      transform-origin: bottom right;
-      &[mdw-position~="end"] {
-        left: 0;
-        right: auto;
-        transform-origin: bottom left;
-      }
-    }
-  }
-
-  &[mdw-show]:not([mdw-hide]),
-  &:target {
-    pointer-events: auto;
-    transition-timing-function: $motion-easing-acceleration;
-    transition-duration: $motion-duration-desktop-enter;
-    opacity: 1;
-    transform: none;
-    box-shadow: elevation(8);
-    @include allHandsets {
-      transition-duration: $motion-duration-mobile-enter;
-    }
-    @include allTablets {
-      transition-duration: $motion-duration-tablet-enter;
-    }
-    .mdw-menu__close {
-      visibility: visible;
-    }
-  }
-}
-
-.mdw-menu__text {
-  white-space: nowrap;
-  flex-grow: 1;
-}
-
-.mdw-menu__check,
-.mdw-menu__icon {
-  min-width: dp(40);
-}
-
-.mdw-menu__check {
-  position: relative;
-  &::after {
-    content: "";
-    position: absolute;
-    bottom: dp(20);
-    left: dp(4);
-    margin-left: $checkbox-icon-offset-x;
-    [dir=rtl] & {
-      right: dp(4);
-      left: auto;
-      margin-left: 0;
-      margin-right: $checkbox-icon-offset-x;
-    }
-    margin-top: $checkbox-icon-offset-y;
-    height: $checkbox-icon-height;
-    width: $checkbox-icon-width;
-    color: inherit;
-  }
-  &[checked]::after {
-    // border-width: $checkbox-icon-thickness;
-    // Increase visibility
-    border-width: dp(2);
-    background-color: transparent;
-    box-sizing: border-box;
-    transform: rotate(45deg) scale(1.11);
-    border-bottom-style: solid;
-    border-right-style: solid;
-    border-color: currentColor;
-    // border-color: unquote("rgb(var(--background-color))");
-  }
-}
-
-.mdw-menu__item {
-  display: flex;
-  align-items: flex-end;
-}
-
-.mdw-menu > .mdw-menu__text,
-.mdw-menu__item, {
-  position: relative;
-  overflow: hidden;
-  z-index: 0;
-  padding-left: dp(16);
-  padding-right: dp(16);
-  font-size: sp(16);
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  min-height: dp(48);
-  box-sizing: border-box;
-  flex-direction: row;
-
-  > .mdw-ripple {
-    @include mdw-ripple__container;
-  }
-
-  & > .mdw-ripple > .mdw-ripple__inner,
-  &::after {
-    @include mdw-ripple__inner;
-  }
-
-  & > .mdw-ripple:active > .mdw-ripple__inner,
-  &:active::after {
-    @include mdw-ripple__active;
-  }
-
-  &[mdw-ripple] {
-    overflow: visible;
-    &::after {
-      // If using custom ripple, destroy ::after object
-      content: none;
-    }
-  }
-}
-
-.mdw-menu__info {
-  text-align: end;
-}
-
-.mdw-menu__check,
-.mdw-menu__info,
-.mdw-menu__text {
-  // Text is padded 20dp from baseline
-  &::before {
-    content: "\200D"; // ‍
-    display: inline-block;
-    line-height: 1;
-    margin-bottom: dp(20);
-    vertical-align: text-top;
-  }
-}
-
-.mdw-menu > .mdw-menu__text::before {
-  // Ensures min-height of 48dp
-  // Use padding-top since negative values are ignored
-  padding-top: calc(#{dp(48 - 20)} - 1em);
-  vertical-align: baseline;
-}
-
-.mdw-menu__icon {
-  align-self: flex-end;
-  padding-bottom: dp(20);
-  &.material-icons {
-    padding-bottom: dp(14);
-  }
-}

package/components/core/menu/theming.scss

@@ -1,55 +0,0 @@
-@import '../../common/functions.scss';
-@import '../../common/mixins.scss';
-
-$menuColors: (
-  text-color:       ((#000,              0.87), (#fff,              1.00)),
-  secondary-color:  ((#000,              0.54), (#fff,              0.70)),
-  background-color: ((#fff,              1.00), ('background', '800', 1.00)),
-  hover-color:      (('background', '200', 1.00), ('background', '700', 1.00)),
-  press-color:      ((#999,              0.40), (#CCC,              0.25)),
-  selected-color:   ((#999,              0.40), (#CCC,              0.25)),
-  ripple-color:     ( #000                    ,  #fff                    ),
-  ripple-opacity:   (                      0.12 ,                       0.30,   0.20),
-);
-
-@function menuThemeValue($key, $type, $theme) {
-  @return themeValue('menu', $menuColors, $key, $type, $theme);
-}
-
-@mixin menuThemeVariables($color, $lightness) {
-  @include themeVariables('menu', $menuColors, $color, $lightness);
-}
-
-@mixin internalMenuContrastRules($type: 'var', $theme: null) {
-  @at-root {
-    #{&}.mdw-menu {
-      background-color: menuThemeValue("background-color", $type, $theme);
-      & > .mdw-menu__text,
-      .mdw-menu__item {
-        color: menuThemeValue("text-color", $type, $theme);
-        &:hover {
-          background-color: menuThemeValue("hover-color", $type, $theme);
-        }
-        & > .mdw-ripple > .mdw-ripple__inner,
-        &:after {
-          color: buttonThemeValue("ripple-color", $type, $theme);
-          opacity: buttonThemeValue("ripple-opacity", $type, $theme);
-        }
-      }
-    }
-  }
-}
-
-// Vary by contrast or theme
-@mixin menuContrastRules($type: 'var', $theme: null) {
-  @include internalMenuContrastRules($type, $theme);
-  @if ($type != 'var') {
-    :not([mdw-theme-fill]) {
-      @include internalMenuContrastRules($type, $theme);
-    }
-  }
-  .mdw-menu__icon,
-  .mdw-menu__check {
-    color: menuThemeValue("secondary-color", $type, $theme);
-  }
-}

package/components/core/progress/index.js

@@ -1,33 +0,0 @@
-const radius = 8.75;
-const circumference = 2 * Math.PI * radius;
-
-class ProgressCircle {
-  /**
-   * @param {Element} element
-   */
-  constructor(element) {
-    this.element = element;
-    this.pathElements = this.element.getElementsByTagName('path');
-    // this.pathElement = pathElements[pathElements.length - 1];
-
-    // TODO: Upgrade IE/Edge browsers to animate with rAF
-  }
-
-  detach() {
-    this.element = null;
-  }
-
-  /**
-   * Clear and detach all children
-   * @param {number} value Percentage value (0-100);
-   * @return {void}
-   */
-  setValue(value) {
-    const dashOffset = circumference * (3 - (value / 100));
-    this.pathElements[this.pathElements.length - 1].style.setProperty('stroke-dashoffset', dashOffset.toString());
-  }
-}
-
-export {
-  ProgressCircle,
-};

package/components/core/selection/style.scss

@@ -1,249 +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: flex;
-  flex-direction: row;
-  align-items: center;
-  position: relative;
-  justify-content: space-between;
-}
-.mdw-selection__input {
-  display: inline-flex;
-  order: 1;
-  appearance: none;
-  outline: none;
-  padding: 0;
-  margin: 0;
-  position: absolute;
-  min-width: $icon-size;
-  min-height: $icon-size;
-  top: 50%;
-  cursor: pointer;
-  &:disabled {
-    cursor: not-allowed;
-  }
-
-  // background-color: var(--button__ripple-color);
-  border-radius: 50%;
-  transform: translateY(-50%) scale(1);
-  opacity: 0;
-  background-color: transparent;
-  transition-property: transform, color, opacity;
-  transition-timing-function: $motion-easing-standard;
-  transition-duration: $motion-duration-desktop-default;
-  @include allHandsets {
-    transition-duration: $motion-duration-mobile-default;
-  }
-  @include allTablets {
-    transition-duration: $motion-duration-tablet-default;
-  }
-  &: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,
-  &:focus {
-    background-color: currentColor;
-    transform: translateY(-50%) scale($ripple-size/$icon-size);
-  }
-}
-.mdw-selection__icon {
-  display: inline-flex;
-  position: relative;
-  box-sizing: border-box;
-  min-width: $icon-size;
-  min-height: $icon-size;
-  appearance: none;
-  outline: none;
-  padding: 0;
-  z-index: 0;
-  margin: 0;
-  cursor: pointer;
-  .mdw-selection__input:disabled ~ & {
-    cursor: not-allowed;
-  }
-
-  transition-property: background-color, border-color;
-  transition-timing-function: $motion-easing-standard;
-  transition-duration: 200ms;
-  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: $motion-duration-desktop-enter;
-    @include allHandsets {
-      transition-duration: $motion-duration-mobile-enter;
-    }
-    @include allTablets {
-      transition-duration: $motion-duration-tablet-enter;
-    }
-  }
-  &::after {
-    content: "";
-    position: absolute;
-  }
-}
-
-.mdw-selection__label ~ .mdw-selection__input {
-  right: 0;
-}
-.mdw-selection__label ~ .mdw-selection__input,
-.mdw-selection__label ~ .mdw-selection__icon,
-.mdw-selection__input ~ .mdw-selection__label {
-  margin-left: 8px;
-}
-
-[dir=rtl] {
-  .mdw-selection__label ~ .mdw-selection__input {
-    right: auto;
-    left: 0;
-  }
-  .mdw-selection__label ~ .mdw-selection__input,
-  .mdw-selection__label ~ .mdw-selection__icon,
-  .mdw-selection__input ~ .mdw-selection__label {
-    margin-left: 0;
-    margin-right: 8px;
-  }
-}
-
-
-.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 ~ .mdw-selection__icon::before {
-    border-width: $checkbox-size / 2;
-  }
-  &:checked:not(:active) ~ .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: $motion-duration-desktop-enter;
-    @include allHandsets {
-      animation-duration: $motion-duration-mobile-enter;
-    }
-    @include allTablets {
-      animation-duration: $motion-duration-tablet-enter;
-    }
-  }
-  &: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 ~ .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: transform, background-color;
-    transition-timing-function: $motion-easing-standard;
-    transition-duration: $motion-duration-desktop-enter;
-    @include allHandsets {
-      transition-duration: $motion-duration-mobile-enter;
-    }
-    @include allTablets {
-      transition-duration: $motion-duration-tablet-enter;
-    }
-  }
-  &: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;
-  }
-}
-
-@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)
-  }
-}

package/components/core/selection/theming.scss

@@ -1,49 +0,0 @@
-@import '../../common/functions.scss';
-@import '../../common/mixins.scss';
-
-$selectionColors: (
-  text-color:            ((#000, 0.87), (#fff, 1.00)),
-  color:                 ((#000, 0.54), (#fff, 0.70)),
-  ripple-color:          ( #000       ,  #fff       ),
-  ripple-opacity:        (         0.12 ,          0.30  , 0.20),
-);
-
-@function selectionThemeValue($key, $type, $theme) {
-  @return themeValue('selection', $selectionColors, $key, $type, $theme);
-}
-
-@mixin selectionThemeVariables($color, $lightness) {
-  @include themeVariables('selection', $selectionColors, $color, $lightness);
-}
-
-// Vary by contrast
-@mixin selectionContrastRules($type: 'var', $theme: null) {
-  .mdw-selection__input {
-    color: selectionThemeValue("ripple-color", $type, $theme);
-    &:active,
-    &:focus {
-      opacity: selectionThemeValue("ripple-opacity", $type, $theme);
-    }
-    &[type="checkbox"]:not(:checked) ~ .mdw-selection__icon,
-    &[type="checkbox"]:active ~ .mdw-selection__icon {
-      color: selectionThemeValue("color", $type, $theme);
-    }
-
-    &[type="radio"]:not(:checked) ~ .mdw-selection__icon {
-      color: selectionThemeValue("color", $type, $theme);
-    }
-    &[type="checkbox"]:checked ~ .mdw-selection__icon::after {
-      // Checkbox color is based on currently filled background-color
-      @if($type == 'var') {
-        border-color: unquote("rgb(var(--background-color))");
-      } @else {
-        // IE11 Fallback
-        border-color: white;
-      }
-    }
-  }
-  .mdw-selection__label,
-  .mdw-selection[mdw-theme-color] .mdw-selection__label {
-    color: selectionThemeValue("text-color", $type, $theme);
-  }
-}

package/components/core/switch/style.scss

@@ -1,3 +0,0 @@
-// https://material.io/guidelines/components/selection-controls.html#
-// https://material.io/guidelines/patterns/selection.html#selection-item-selection
-