@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/button/style.scss

@@ -1,315 +0,0 @@
-// https://material.io/guidelines/components/buttons.html#buttons-raised-buttons
-// https://material.io/guidelines/style/icons.html#
-
-@import '../common/functions.scss';
-@import '../common/motion.scss';
-@import '../common/mixins.scss';
-@import '../ripple/ripple.scss';
-@import '../common//type.scss';
-
-$button__external-padding: dp(8);
-$button__minimum-click-target: dp(48);
-$button__background-color-pressed: rgba(#999, 0.40);
-$button__focus-animation-delay: 1667ms;
-$button__focus-animation-duration: 1667ms;
-$button__long-press-timeout: 500ms;
-$button__click-timeout: 100ms;
-$button__outline-size: dp(1);
-
-.mdw-button {
-  position: relative;
-  min-width: dp(64);
-  min-height: dp(36);
-  padding: 0 dp(8);
-
-  &[mdw-outline],
-  &[mdw-theme-fill] {
-    padding: 0 dp(16);
-  }
-
-  margin: 0 dp(8);
-  border-radius: dp(4);
-
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  &[disabled] {
-    cursor: not-allowed;
-  }
-
-  overflow: hidden;
-  transition-property: box-shadow, background-color;
-  transition-duration: $button__click-timeout, $button__long-press-timeout;
-  transition-delay: 0s;
-  transition-timing-function: $motion-easing-acceleration;
-  &:active {
-    transition-duration: $button__click-timeout, $button__long-press-timeout - $button__click-timeout;
-    transition-delay: 0s, $button__click-timeout;
-    transition-timing-function: $motion-easing-deceleration;
-  }
-  z-index: 0;
-
-  // Override browser button defaults
-  box-sizing: border-box;
-  outline: none;
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  border: none;
-  text-decoration: none;
-  &:not([mdw-theme-fill]) {
-    background-color: transparent;
-  }
-  
-  // Remove Firefox inner
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  // Support any HTMLElement (not just HTMLButtonElement)
-  user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  display: inline-flex;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-
-  // Don't override font icon properties
-  &:not([mdw-icon]) {
-    font-family: inherit;
-    word-spacing: normal;
-    @include type-rules('button');
-  }
-
-  &[mdw-outline] {
-    border-width: $button__outline-size;
-    border-style: solid;
-    &::before,
-    & > .mdw-ripple {
-      margin-left: -$button__outline-size;
-      margin-top: -$button__outline-size;
-      padding-right: 2 * $button__outline-size;
-      padding-bottom: 2 * $button__outline-size;
-    }
-  }
-
-  // Icon properties
-  &[mdw-icon] {
-    border-radius: 50%;
-    min-height: 1em;
-    min-width: 1em;
-    padding: dp(8);
-    font-size: dp(24); // Internal padding provided by font
-    box-sizing: content-box;
-    user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-  }
-
-  &[mdw-image] {
-    border-radius: 50%;
-    min-height: dp(24);
-    min-width: dp(24);
-    padding: 0;
-    margin: 0;
-    box-sizing: content-box;
-    user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    > * {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: auto;
-      height: 100%;
-      // z-index: -1; // Safari has a negative z-index bug
-    }
-  }
-
-  // Button Animations
-  // Ripple doesn't appear until mouse-up
-  // Background color transitions from hover to press
-
-  // ::before - focus and press background
-  // ::after  - ripple
-
-  &[disabled] > .mdw-ripple,
-  &[disabled] > .mdw-button__focus-ring,
-  &[disabled]::before,
-  &[disabled]::after {
-    content: none;
-    display: none;
-  }
-
-  
-}
-
-.mdw-button {
-  &::before {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    // Safari has a negative z-index bug
-    // Might be related to display rule
-    z-index: -1;
-    border-radius: inherit;
-    user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    pointer-events: none;
-    background-color: currentColor;
-    color: rgba(0, 0, 0, 0.12);
-    opacity: 0;
-    transition-property: opacity, transform;
-    transform: scale(1);
-    transition-duration: 200ms;
-  }
-  &:focus::before {
-    opacity: 1;
-  }
-}
-
-// Fix anchor line-height on IE11
-@include IEOnly {
-  a.mdw-button:not([mdw-icon]) {
-    line-height: 2.5em !important;
-  }
-}
-
-// Extended touch target
-@mixin mdw-button__touch-target {
-  @media (any-pointer: coarse) {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: $button__minimum-click-target;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-}
-
-.mdw-button__focus-ring {
-  overflow: hidden;
-  // z-index: -1; // Safari has a negative z-index bug
-  &,
-  &::after {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    pointer-events: none;
-  }
-
-  &::after {
-    content: '';
-    // Background-size does not animate smoothly.
-    // Focus circle: inner-radius - 10% - fully transparent
-    // Scale up by 10.0 to become 100% when not focused
-    background-position: center center;
-    transform: scale(10); // 10.0 has subpixel rendering issues
-    transition-property: transform;
-    transition-duration: 200ms;
-    transition-delay: 5ms;
-    transition-timing-function: $motion-easing-standard;
-    background-image: radial-gradient(
-      circle at center,
-      transparent 10%,
-      currentColor 10.0001%);
-    color: black;
-    opacity: 0;
-    .mdw-button:focus:not(:active) > & {
-      transform: scale(7.5);
-      transition-delay: $button__focus-animation-delay;
-      transition-duration: $button__focus-animation-delay;
-      animation-duration: $button__focus-animation-duration;
-      animation-timing-function: $motion-easing-standard;
-      animation-delay: $button__focus-animation-delay * 2;
-      animation-iteration-count: infinite;
-      animation-direction: alternate;
-      animation-name: focus-pulse;
-      opacity: 0.12;
-    }
-  }
-}
-
-.mdw-button[mdw-ripple] {
-  overflow: visible;
-  &::after {
-    // If using custom ripple, destroy ::after object
-    content: none;
-  }
-}
-
-.mdw-button > .mdw-ripple {
-  @include mdw-ripple__container;
-}
-
-.mdw-button {
-  & > .mdw-ripple > .mdw-ripple__inner,
-  &::after {
-    @include mdw-ripple__inner;
-  }
-
-  & > .mdw-ripple:active > .mdw-ripple__inner,
-  &:active::after {
-    @include mdw-ripple__active;
-  }
-}
-
-// Raised
-.mdw-button[mdw-raised]:not([disabled]) {
-  box-shadow: elevation(2);
-  &:active {
-    box-shadow: elevation(8);
-  }
-  @media (any-pointer: fine) {
-    &:not([mdw-raised="always"]) {
-      box-shadow: elevation(0);
-      &:hover {
-        box-shadow: elevation(2);
-      }
-      &:active,
-      &:hover:active {
-        box-shadow: elevation(8);
-      }
-    }
-  }
-}
-
-@keyframes focus-pulse {
-  from { transform: scale(7.5); }
-  to { transform: scale(8.0) }
-}
-
-.mdw-button[mdw-theme-color] {
-  &::before {
-    color: inherit;
-  }
-  &:focus::before {
-    opacity: 0.12;
-  }
-  &:active::before {
-    // Colored buttons have undocumented press color
-    opacity: 0.26;
-    transition-delay: $button__click-timeout;
-    transition-duration: $button__long-press-timeout - $button__click-timeout;
-    transition-timing-function: $motion-easing-deceleration;
-  }
-  &:focus:not(:active) > .mdw-button__focus-ring::after {
-    color: inherit;
-    opacity: 0.26;
-  }
-}

package/components/button/theming.scss

@@ -1,134 +0,0 @@
-// https://material.io/guidelines/components/buttons.html
-// https://material.io/guidelines/style/icons.html
-
-@import '../common/functions.scss';
-@import '../common/mixins.scss';
-
-$buttonColors: (
-  text-color:                 ((#000, 0.87), (#fff, 1.00)),
-  active-color__focus:        ((#000, 0.87), (#fff, 1.00)),
-  active-color:               ((#000, 0.54), (#fff, 0.70)),
-  inactive-color:             ((#000, 0.38), (#fff, 0.50)),
-
-  press-color__transparent:   ((#999, 0.40), (#CCC, 0.25)),
-  ripple-color:               ( #000       ,  #fff       ),
-  ripple-opacity:             (         0.12 ,          0.30,           0.20),
-
-  icon-press-opacity:         (         0.12 ,          0.30,           0.20),
-  //icon-ripple-opacity:        (         0.36 ,          0.90,           0.60), // 3x for visibility
-  icon-ripple-color:          ( #000       ,  #fff       ),
-  transparent-focus-overlay:  ((#000, 0.12), (#fff, 0.12)),
-  disabled-text-color:        ((#000, 0.26), (#fff, 0.30)),
-  disabled-background-color:  ((#000, 0.12), (#fff, 0.12)),
-  outline-color:              ((#000, 0.12), (#fff, 0.12)),
-  filled-press-primary-color: (('primary', '700', 1.0), ('primary', '700', 1.0)),
-  filled-press-accent-color:  (('accent',  '700', 1.0), ('accent',  '700', 1.0)),
-  filled-press-warn-color:    (('warn',    '700', 1.0), ('warn',    '700', 1.0))
-);
-
-@function buttonThemeValue($key, $type, $theme) {
-  @return themeValue('button', $buttonColors, $key, $type, $theme);
-}
-
-@mixin buttonThemeVariables($color, $lightness) {
-  @include themeVariables('button', $buttonColors, $color, $lightness);
-}
-
-@mixin internalButtonContrastRules($type, $theme: null) {
-  @at-root {
-    #{&}.mdw-button {
-      // Disabled
-      &[disabled] {
-        color: buttonThemeValue("disabled-text-color", $type, $theme);
-        &[mdw-theme-fill] {
-          // Disabled filled buttons use parent's theming context
-          @if ($type == 'var') {
-            --button__disabled-text-color: inherit;
-            --button__disabled-background-color: inherit;
-            color: buttonThemeValue("disabled-text-color", 'var', $theme);
-            background-color: buttonThemeValue("disabled-background-color", 'var', $theme);
-          } @else {
-            // Average color and opacity
-            color: mix(
-              buttonThemeValue("disabled-text-color", 'light', $theme),
-              buttonThemeValue("disabled-text-color", 'dark', $theme)
-            );
-            background-color: mix(
-              buttonThemeValue("disabled-background-color", 'light', $theme),
-              buttonThemeValue("disabled-background-color", 'dark', $theme)
-            );
-          }
-        }
-      }
-
-      // Foreground Color
-      &:not([mdw-theme-color]):not([disabled]) {
-        color: buttonThemeValue("text-color", $type, $theme);
-      }
-      &[mdw-inactive]:not([disabled]) {
-        color: buttonThemeValue("inactive-color", $type, $theme);
-      }
-      &[mdw-active]:not([mdw-theme-color]):not([disabled]) {
-        color: buttonThemeValue("active-color", $type, $theme);
-        &:focus {
-          color: buttonThemeValue("active-color__focus", $type, $theme);
-        }
-      }
-
-      // Focus and press colors
-      &:not([mdw-theme-color]):not([mdw-theme-fill]) {
-        &::before {
-          background-color: buttonThemeValue("transparent-focus-overlay", $type, $theme);
-        }
-        &:active::before {
-          background-color: buttonThemeValue("press-color__transparent", $type, $theme);
-        }
-        .mdw-button__focus-ring {
-          color: buttonThemeValue("transparent-focus-overlay", $type, $theme);
-        }
-      }
-
-      // Can be overridden by theme-color
-      &:not([mdw-theme-color]) {
-        & > .mdw-ripple > .mdw-ripple__inner,
-        &:after {
-          opacity: buttonThemeValue("ripple-opacity", $type, $theme);
-          color: buttonThemeValue("ripple-color", $type, $theme);
-        }
-      }
-
-      // Outline colors
-      &[mdw-outline] {
-        border-color: buttonThemeValue('outline-color', $type, $theme);
-      }
-    }
-  }
-}
-
-// Vary by contrast
-@mixin buttonContrastRules($type: 'var', $theme: null) {
-  @include internalButtonContrastRules($type, $theme);
-  @if ($type != 'var') {
-    :not([mdw-theme-fill]) {
-      @include internalButtonContrastRules($type, $theme);
-    }
-  }
-}
-
-// Varies by theme
-@mixin buttonThemeRules($theme: null) {
-  .mdw-button[mdw-theme-fill~=dark]:not([disabled]):active {
-    &[mdw-theme-fill~="primary"],
-    &[mdw-theme-fill|="primary"] {
-      background-color: buttonThemeValue("filled-press-primary-color", null, $theme);
-    }
-    &[mdw-theme-fill~="accent"],
-    &[mdw-theme-fill|="accent"] {
-      background-color: buttonThemeValue("filled-press-accent-color", null, $theme);
-    }
-    &[mdw-theme-fill~="warn"],
-    &[mdw-theme-fill|="warn"] {
-      background-color: buttonThemeValue("filled-press-warn-color", null, $theme);
-    }
-  }
-}

package/components/card/style.scss

@@ -1,175 +0,0 @@
-// https://material.io/guidelines/components/cards.html
-
-@import '../common/functions.scss';
-@import '../common/motion.scss';
-@import '../common/variables.scss';
-
-.mdw-card {
-  box-shadow: elevation(0);
-  display: block;
-  outline: none;
-  @include type-rules('body-2');
-
-  position: relative;
-
-  &::before {
-    // Outline is behind content, not around it
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: inherit;
-    border: solid dp(1);
-    border-color: inherit;
-  }
-
-  @include allHandsetsAndTablets() {
-    box-shadow: elevation(1);
-    &::before {
-      border-color: transparent;
-    }
-  }
-
-  &[mdw-elevation="1"] {
-    box-shadow: elevation(1);
-    &::before {
-      border-color: transparent;
-    }
-  }
-
-  &:hover,
-  &:focus,
-  &:focus-within,
-  &[mdw-raised] {
-    box-shadow: elevation(8);
-  }
-
-  transition-property: box-shadow;
-  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;
-  }
-}
-
-
-
-.mdw-card__supporting-text,
-.mdw-card > .mdw-divider {
-  padding: 0 dp(16);
-}
-
-.mdw-card__thumbnail {
-  margin-top: dp(16);
-  margin-bottom: 0;
-  margin-right: dp(16);
-  margin-left: dp(16);
-  float: left;
-  html[dir=rtl] & {
-    float: right;
-  }
-}
-
-.mdw-card__image {
-  width: 100%;
-  height: auto;
-}
-
-.mdw-card__media {
-  // In front of outline
-  line-height: 0;
-  z-index: 1;
-  position: relative;
-  &[mdw-ratio] > .mdw-card__image {
-    position: absolute;
-    height: 100%;
-    object-fit: cover;
-  }
-  &[mdw-ratio]::after {
-    content: '';
-    display: inline-block;
-    width: auto;
-    height: 0;
-  }
-  &[mdw-ratio="16:9"]::after {
-    padding-bottom: calc(100% / 16 * 9);
-  }
-  &[mdw-ratio="3:2"]::after {
-    padding-bottom: calc(100% / 3 * 2);
-  }
-  &[mdw-ratio="4:3"]::after {
-    padding-bottom: calc(100% / 4 * 3);
-  }
-  &[mdw-ratio="1:1"]::after {
-    padding-bottom: calc(100% / 1 * 1);
-  }
-}
-
-.mdw-card__header-thumbnail {
-  align-self: center;
-  min-height: 40px;
-  min-width: 40px;
-  margin-left: 0;
-  margin-right: dp(16);
-  html[dir=rtl] & {
-    margin-left: dp(16);
-    margin-right: 0;
-  }
-}
-
-.mdw-card__header {
-  white-space: nowrap;
-  margin: 0;
-}
-
-h5.mdw-card__header {
-  @include baseline-top(40);
-  @include type-rules('h5');
-  @include baseline-bottom(28);
-  margin-bottom: dp(-28);
-}
-
-h6.mdw-card__header {
-  @include baseline-top(34);
-  @include type-rules('h6');
-}
-
-.mdw-card__header[mdw-two-line] {
-  @include baseline-bottom(22);
-  margin-bottom: dp(-22);
-  & ~ .mdw-card__subheader {
-    @include baseline-top(22);
-    @include baseline-bottom(16);
-  }
-}
-
-.mdw-card__supporting-text {
-  @include baseline-top(28);
-  @include baseline-bottom(16);
-}
-
-.mdw-card__actions {
-  display: flex;
-  padding-top: dp(8);
-  padding-right: dp(4);
-  padding-left: dp(4);
-
-  > .mdw-button {
-    margin: 0 dp(4);
-  }
-  > span {
-    flex: 1;
-  }
-}
-
-.mdw-card__actions,
-.mdw-card__supporting-text {
-  &:last-child {
-    padding-bottom: dp(8);
-  }
-}

package/components/card/theming.scss

@@ -1,43 +0,0 @@
-@import '../common/functions.scss';
-@import '../common/mixins.scss';
-
-$cardColors: (
-  background:   ((#fff, 1.00), ('background', '800', 1.00)),
-  text-color:   ((#000, 0.87), (#fff,              1.00)),
-  border-color: ((#000, 0.12), (#fff, 0.12)),
-  focus-color:  ((#000, 0.06), (#fff, 0.10)),
-);
-
-@function cardThemeValue($key, $type, $theme) {
-  @return themeValue('card', $cardColors, $key, $type, $theme);
-}
-
-@mixin cardThemeVariables($color, $lightness) {
-  @include themeVariables('card', $cardColors, $color, $lightness);
-}
-
-@mixin internalCardContrastRules($type, $theme: null) {
-  @at-root {
-    #{&}.mdw-card{
-      &:not([mdw-theme-fill]) {
-        background-color: cardThemeValue("background", $type, $theme);
-      }
-      &:not([mdw-theme-color]) {
-        color: cardThemeValue("text-color", $type, $theme);
-      }
-      border-color: cardThemeValue("border-color", $type, $theme);
-      &:focus::before {
-        background-color: cardThemeValue("focus-color", $type, $theme);
-      }
-    }
-  }
-}
-// Vary by contrast or theme
-@mixin cardContrastRules($type: 'var', $theme: null) {
-  @include internalCardContrastRules($type, $theme);
-  @if ($type != 'var') {
-    :not([mdw-theme-fill]) {
-      @include internalCardContrastRules($type, $theme);
-    }
-  }
-}

package/components/common/dom.js

@@ -1,51 +0,0 @@
-/**
- * @param {Element} element
- * @param {string} className
- * @return {Element}
- */
-export function getChildElementByClass(element, className) {
-  const child = element.getElementsByClassName(className)[0];
-  if (child && child.parentElement !== element) {
-    return null;
-  }
-  return child;
-}
-
-/**
- * @param {Element} element
- * @param {string} className
- * @param {boolean=} [includeSelf=true]
- * @return {Element}
- */
-export function findElementParentByClassName(element, className, includeSelf) {
-  /** @type {Element} */
-  let el;
-  if (includeSelf === false) {
-    el = element.parentElement;
-  } else {
-    el = element;
-  }
-  while (el != null && !el.classList.contains(className)) {
-    el = el.parentElement;
-  }
-  return el;
-}
-
-/** @return {boolean} */
-export function isRtl() {
-  return document.documentElement.hasAttribute('dir')
-    && document.documentElement.getAttribute('dir').toLowerCase() === 'rtl';
-}
-
-/**
- * @param {Element} element
- * @param {string} type
- * @return {boolean}
- */
-export function dispatchDomEvent(element, type) {
-  const event = document.createEvent('Event');
-  event.initEvent(type, true, true);
-  return element.dispatchEvent(event);
-}
-
-export const nextTick = window.requestAnimationFrame || (cb => setTimeout(cb, 17));