@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/core/bottomnav/style.scss

@@ -1,173 +0,0 @@
-// https://material.io/guidelines/components/bottom-navigation.html#bottom-navigation-specs
-
-@import '../../common/ripple.scss';
-@import '../../common/functions.scss';
-@import '../../common/motion.scss';
-@import '../../common/variables.scss';
-
-.mdw-bottomnav {
-  min-height: dp(56);
-  overflow-y: hidden;
-  position: relative;
-  display:flex;
-  box-shadow: elevation(8);
-  width: 100%;
-  justify-content: center;
-  flex-direction:row;
-}
-
-.mdw-bottomnav__item {
-  position: relative;
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0;
-  padding: 0;
-  box-shadow: none;
-  box-sizing: content-box;
-  border-radius: 0;
-  z-index: 0;
-  overflow: hidden;
-  user-select: none;
-
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  
-  > .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-bottomnav__icon {
-  padding: 0;
-  margin: 0;
-  user-select: none;
-  pointer-events: none;
-  transition-property: color, transform;
-  transition-duration: 200ms;
-  transition-timing-function: $motion-easing-standard;
-  // color: var(--bottomnav__inactive-color);
-  transform: translateY(dp(8));
-  input:checked ~ &,
-  .mdw-bottomnav__item[selected] > &,
-  input:checked + .mdw-bottomnav__item > & {
-    // color: var(--bottomnav__active-color);
-    transform: translateY(dp(6));
-  }
-}
-
-.mdw-bottomnav__label {
-  display: block;
-  text-align: center;
-  pointer-events: none;
-  min-width: dp(80);
-  max-width: dp(168);
-  
-  padding-left: dp(12);
-  padding-right: dp(12);
-  transition-property: color, font-size, transform, min-width, max-width;
-  transform: translateY(0);
-  transition-duration: 200ms;
-  transition-timing-function: $motion-easing-standard;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-height: 1em; // Prevents stretching when using larger fonts
-  height: auto;
-  font-size: sp(12);
-  text-transform: none;
-  font-weight: normal;
-  // color: var(--bottomnav__inactive-color);
-  input:checked ~ &,
-  .mdw-bottomnav__item[selected] > &,
-  input:checked + .mdw-bottomnav__item > & {
-    // color: var(--bottomnav__active-color);
-    font-size: sp(14);
-  }
-  
-  
-  // 4dp top padding
-  &::before {
-    content: "\200D"; // ‍
-    display: inline-block;
-    margin-top: dp(4);
-    line-height: 1;
-    vertical-align: text-bottom;
-  }
-
-  // 10dp bottom padding from baseline
-  &::after {
-    content: "\200D"; // ‍
-    display: inline-block;
-    line-height: 1;
-    margin-bottom: dp(10);
-    vertical-align: text-top;
-  }
-}
-.mdw-bottomnav input {
-  // Using `display: none` breaks keyboard navigation
-  opacity: 0;
-  height: 0;
-  width: 0;
-  margin: 0;
-  padding: 0;
-  pointer-events: none;
-  position: absolute;
-  display: inline;
-}
-
-.mdw-bottomnav[mdw-shifting] {
-  .mdw-bottomnav__icon {
-    transform: translateY(dp(16));
-  }
-  
-  .mdw-bottomnav__label {
-    opacity: 0;
-    font-size: sp(14);
-    min-width: dp(56);
-    max-width: dp(96);
-    transform: translateY(#{$font-bottom-gap * 1em});
-  }
-  input:checked ~ .mdw-bottomnav__label,
-  .mdw-bottomnav__item[selected] > .mdw-bottomnav__label,
-  input:checked + .mdw-bottomnav__item > .mdw-bottomnav__label {
-    opacity: 1;
-    transform: translateY(0);
-    min-width: dp(96);
-    max-width: dp(168);
-  }
-  input:checked ~ .mdw-bottomnav__icon,
-  .mdw-bottomnav__item[selected] > .mdw-bottomnav__icon,
-  input:checked + .mdw-bottomnav__item > .mdw-bottomnav__icon {
-    transform: translateY(dp(6))
-  }
-}
-
-.mdw-bottomnav[mdw-theme-color] {
-  .mdw-bottomnav__item {
-    color: inherit;
-    & > .mdw-ripple > .mdw-ripple__inner,
-    &:after {
-      color: inherit;
-    }
-  }
-}

package/components/core/bottomnav/theming.scss

@@ -1,42 +0,0 @@
-@import '../../common/functions.scss';
-@import '../../common/mixins.scss';
-
-$bottomnavColors: (
-  active-color:      (inherit,        (#fff, 1.0)),
-  inactive-color:    ((#000, 0.54), (#fff, 0.50)),
-  ripple-color:      ( #000       ,  #fff       ),
-  ripple-opacity:    (         0.12 ,          0.30,           0.20),
-);
-
-@function bottomnavThemeValue($key, $type, $theme) {
-  @return themeValue('bottomnav', $bottomnavColors, $key, $type, $theme);
-}
-
-@mixin bottomnavThemeVariables($color, $lightness) {
-  @include themeVariables('bottomnav', $bottomnavColors, $color, $lightness);
-}
-
-// Vary by contrast
-@mixin bottomnavContrastRules($type: 'var', $theme: null) {
-  .mdw-bottomnav__icon,
-  .mdw-bottomnav__label {
-    color: bottomnavThemeValue("inactive-color", $type, $theme);
-  }
-
-  input:checked ~ .mdw-bottomnav__icon,
-  input:checked ~ .mdw-bottomnav__label,
-  .mdw-bottomnav__item[selected] > .mdw-bottomnav__icon,
-  .mdw-bottomnav__item[selected] > .mdw-bottomnav__label,
-  input:checked + .mdw-bottomnav__item > .mdw-bottomnav__icon,
-  input:checked + .mdw-bottomnav__item > .mdw-bottomnav__label {
-    color: bottomnavThemeValue("active-color", $type, $theme);
-  }
-
-  .mdw-bottomnav__item {
-    & > .mdw-ripple > .mdw-ripple__inner,
-    &:after {
-      opacity: buttonThemeValue("ripple-opacity", $type, $theme);
-      color: buttonThemeValue("ripple-color", $type, $theme);
-    }
-  }
-}

package/components/core/button/index.js

@@ -1,52 +0,0 @@
-class Button {
-  /**
-   * @param {Element} element
-   */
-  constructor(element) {
-    this.element = element;
-    const rippleElements = element.getElementsByClassName('mdw-ripple');
-    this.ripple = rippleElements && rippleElements[0];
-    if (!this.ripple) {
-      const ripple = document.createElement('div');
-      ripple.classList.add('mdw-ripple');
-      this.element.insertBefore(ripple, this.element.firstChild);
-      this.ripple = ripple;
-    }
-    const innerRippleElements = this.ripple.getElementsByClassName('mdw-ripple__inner');
-    this.rippleInner = innerRippleElements && innerRippleElements[0];
-    if (!this.rippleInner) {
-      const rippleInner = document.createElement('div');
-      rippleInner.classList.add('mdw-ripple__inner');
-      this.ripple.appendChild(rippleInner);
-      this.rippleInner = rippleInner;
-    }
-    this.element.setAttribute('mdw-ripple', '');
-    this.element.addEventListener('click', (event) => {
-      this.updateRipplePosition(event);
-    });
-  }
-
-  /**
-   * @param {MouseEvent|PointerEvent} event
-   * @return {void}
-   */
-  updateRipplePosition(event) {
-    if (event.target !== this.element && event.target !== this.ripple) {
-      return;
-    }
-    if (this.element.hasAttribute('mdw-icon') || (!event.pointerType && !event.detail)) {
-      // Ripple from center
-      this.rippleInner.style.removeProperty('left');
-      this.rippleInner.style.removeProperty('top');
-      return;
-    }
-    const x = event.offsetX;
-    const y = event.offsetY;
-    this.rippleInner.style.setProperty('left', `${x}px`);
-    this.rippleInner.style.setProperty('top', `${y}px`);
-  }
-}
-
-export {
-  Button,
-};

package/components/core/button/style.scss

@@ -1,283 +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 '../../common/ripple.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;
-
-.mdw-button {
-  position: relative;
-  min-width: dp(64);
-  min-height: dp(36);
-  padding: 0 dp(8);
-  margin: 0 8px;
-  border-radius: dp(2);
-
-  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;
-  -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;
-  display: inline-flex;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-
-  // Don't override font icon properties
-  &:not([mdw-icon]) {
-    font-family: inherit;
-    font-size: sp(14);
-    line-height: normal;
-    text-transform: uppercase;
-    word-spacing: normal;
-    font-weight: $font-weight-medium;
-  }
-
-  // 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;
-  }
-
-  &[mdw-image] {
-    border-radius: 50%;
-    min-height: dp(24);
-    min-width: dp(24);
-    padding: 0;
-    margin: 0;
-    box-sizing: content-box;
-    user-select: none;
-    > * {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: auto;
-      height: 100%;
-      z-index: -1;
-    }
-  }
-
-  // Button Animations
-  // Ripple doesn't appear until mouse-up
-  // Background color transitions from hover to press
-
-  // ::before - focus overlay
-  // ::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;
-    z-index: -1;
-    border-radius: inherit;
-    user-select: none;
-    pointer-events: none;
-    background-color: currentColor;
-    color: black;
-    opacity: 0;
-    transition-property: opacity, transform;
-    transform: scale(1);
-    transition-duration: 200ms;
-  }
-  &:focus:not(:active)::before {
-    opacity: 0.12;
-  }
-}
-
-// 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;
-  &,
-  &::after {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    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;
-  }
-
-  &[mdw-icon] {
-    & > .mdw-ripple:not(:active) > .mdw-ripple__inner,
-    &:not(:active)::after {
-      transform: translateX(-50%) translateY(-50%) scale(1.5);
-    }
-  }
-}
-
-// 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;
-  }
-  &: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/core/button/theming.scss

@@ -1,131 +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       ,  #fff       ),
-  filled-focus-overlay:       ((#000, 0.12), (#000, 0.12), (#fff, 0.12)),
-  disabled-text-color:        ((#000, 0.26), (#fff, 0.30)),
-  disabled-background-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 overlay
-      &:not([mdw-theme-color]):not([mdw-theme-fill]) {
-        &::before {
-          background-color: buttonThemeValue("transparent-focus-overlay", $type, $theme);
-        }
-        .mdw-button__focus-ring {
-          color: buttonThemeValue("transparent-focus-overlay", $type, $theme);
-        }
-      }
-
-      // Press on transparent button
-      &:active:not([mdw-theme-fill]):not([mdw-theme-color]) {
-        background-color: buttonThemeValue("press-color__transparent", $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);
-        }
-      }
-    }
-  }
-}
-
-// 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);
-    }
-  }
-}