@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/selection/theming.scss

@@ -1,98 +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),
-  disabled-color:         ((#000, 0.26), (#fff, 0.30)),
-  thumb-on-color:         ( currentColor ,  currentColor ),
-  thumb-disabled-color:   (    #BDBDBD ,     #424242 ),
-  thumb-off-color:        (    #FAFAFA ,     #BDBDBD ),
-
-  track-on-color:         ( currentColor ,  currentColor ),
-  track-on-opacity:       (         0.50 ,          0.50 ),
-  
-  track-off-color:        (    #000000 ,     #FFFFFF ),
-  track-off-opacity:      (         0.38 ,          0.30 ),
-  
-  track-disabled-color:   (    #000000 ,     #FFFFFF ),
-  track-disabled-opacity: (         0.12 ,          0.10 ),
-);
-
-@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:not(:disabled),
-    &:focus {
-      opacity: selectionThemeValue("ripple-opacity", $type, $theme);
-    }
-    &[type="checkbox"]:not(:checked) ~ .mdw-selection__icon,
-    &[type="checkbox"]:active:not(:disabled) ~ .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;
-      }
-    }
-    &:disabled ~ .mdw-selection__label,
-    &:disabled ~ .mdw-selection__icon,
-    &:disabled ~ .mdw-selection__icon::before {
-      color: selectionThemeValue("disabled-color", $type, $theme);
-    }
-  }
-  .mdw-selection__label,
-  .mdw-selection[mdw-theme-color] .mdw-selection__input:not(:disabled) ~ .mdw-selection__label {
-    color: selectionThemeValue("text-color", $type, $theme);
-  }
-  .mdw-selection[mdw-switch] .mdw-selection__input[type="checkbox"] {
-
-    & ~ .mdw-selection__icon {
-      &::before {
-        background-color: selectionThemeValue("thumb-off-color", $type, $theme);
-      }
-      &::after {
-        background-color: selectionThemeValue("track-off-color", $type, $theme);
-        opacity: selectionThemeValue("track-off-opacity", $type, $theme);  
-      }
-    }
-    &:checked ~ .mdw-selection__icon {
-      &::before {
-        background-color: selectionThemeValue("thumb-on-color", $type, $theme);
-      }
-      &::after {
-        background-color: selectionThemeValue("track-on-color", $type, $theme);
-      }
-    }
-    &:disabled ~ .mdw-selection__icon {
-      &::before {
-        background-color: selectionThemeValue("thumb-disabled-color", $type, $theme);
-      }
-      &::after {
-        background-color: selectionThemeValue("track-disabled-color", $type, $theme);
-        opacity: selectionThemeValue("track-disabled-opacity", $type, $theme);
-      }
-    }
-    
-
-  }
-}

package/components/snackbar/style.scss

@@ -1,212 +0,0 @@
-// https://material.io/design/components/snackbars.html#spec
-
-// Guidelines conflict stating a background should be fully opaque
-// But says spec says to use #000000 with 87% opacity
-// Calculated against white, opaque value is #212121 (Grey-900)
-
-$snackbar__background-color: #212121;
-$snackbar__color: rgba(255, 255, 255, 0.87);
-$snackbar__scale-up__from: 0.85;
-
-.mdw-snackbar__wrapper {
-  position: relative;
-  z-index: 6;
-}
-
-.mdw-snackbar__container {
-  position: absolute;
-  display: flex;
-  flex-direction: row;
-  z-index: 6;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  justify-content: flex-start;
-  &[mdw-position="end"] {
-    justify-content: flex-end;
-  }
-  &[mdw-position="center"] {
-    justify-content: center;
-  }
-} 
-
-.mdw-snackbar {
-  position: absolute;
-  bottom: 0;
-  padding: 0 dp(16);
-  min-height: dp(48);
-  max-width: 100%;
-  border-radius: dp(4);
-  
-  box-shadow: elevation(6);
-
-  background: $snackbar__background-color;
-  color: $snackbar__color;
-
-  @include type-rules('body-2');
-
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  // Default state is shown
-  opacity: 1;
-  transform: scale(1);
-  will-change: opacity, transform;
-  transition-property: opacity, transform;
-  transition-timing-function: $motion-easing-deceleration;
-  transition-delay: 0s, 0s;
-  transition-duration: $motion-duration-desktop-enter;
-  @include allHandsets {
-    transition-duration: $motion-duration-mobile-enter;
-  }
-  @include allTablets {
-    transition-duration: $motion-duration-tablet-enter;
-  }
-
-  // Disable animations with explicit visibility
-  &[mdw-autohide] {
-    animation-fill-mode: forwards;
-    animation-name: showSnackbar, hideSnackbar;
-    animation-timing-function: $motion-easing-deceleration, $motion-easing-acceleration;
-    animation-delay: 0s, 4s;
-    animation-duration: $motion-duration-desktop-enter, $motion-duration-desktop-leave;
-    @include allHandsets {
-      animation-duration: $motion-duration-mobile-enter, $motion-duration-mobile-leave;
-    }
-    @include allTablets {
-      animation-duration: $motion-duration-tablet-enter, $motion-duration-tablet-leave;
-    }
-  }
-
-  // Disable animation with explicit visibility
-  &[mdw-show],
-  &[mdw-hide] {
-    animation-name: none;
-  }
-
-  &[mdw-consecutive]:not([mdw-hide]) {
-    // Delay showing consecutive snackbar equal to previous snackbar's leave time
-    transition-delay: $motion-duration-desktop-leave;
-    @include allHandsets {
-      transition-delay: $motion-duration-mobile-leave;
-    }
-    @include allTablets {
-      transition-delay: $motion-duration-tablet-leave;
-    }
-  }
-
-  &[mdw-hide] {
-    opacity: 0;
-    transform: scale($snackbar__scale-up__from);
-    
-    transition-timing-function: $motion-easing-acceleration;
-    transition-duration: $motion-duration-desktop-leave;
-    transition-delay: 0s, $motion-duration-desktop-leave;
-    @include allHandsets {
-      transition-duration: $motion-duration-mobile-leave;
-      transition-delay: 0s, $motion-duration-mobile-leave;
-    }
-    @include allTablets {
-      transition-duration: $motion-duration-tablet-leave;
-      transition-delay: 0s, $motion-duration-tablet-leave;
-    }
-  }
-
-  @for $seconds from 5 to 11 {
-    &[mdw-autohide="#{$seconds}"] {
-      animation-delay: 0s, #{$seconds}s;
-    }
-  }
-
-}
-
-@keyframes hideSnackbar {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes showSnackbar {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.mdw-snackbar .mdw-button {
-  order: 1;
-  margin-top: dp(6);
-  margin-bottom: dp(6);
-  margin-left: dp(8);
-  margin-right: dp(-8);
-  html[dir=rtl] & {
-    margin-left: dp(-8);
-    margin-right: dp(8);
-  }
-}
-
-.mdw-snackbar > span {
-  white-space: pre-line;
-  @include baseline-top(30);
-  @include baseline-bottom(48 - 30);
-}
-
-@media screen and (max-width: $breakpoint-portrait-handset-max) {
-  .mdw-snackbar {
-    left: 0;
-    right: 0;
-    &[mdw-stacked] {
-      flex-direction: column;
-      align-items: flex-end;
-      justify-content: center;
-      > span {
-        width: 100%;
-      }
-      .mdw-button {
-        margin-top: dp(2);
-        margin-bottom: dp(8);
-      }
-    }
-  }
-}
-
-@include IEOnly() {
-  // Fix IE flexbug
-  .mdw-snackbar {
-    &::after {
-      content: '';
-      min-width: 0;
-      min-height: inherit;
-    }
-  }
-  .mdw-snackbar__container[mdw-position="center"] {
-    .mdw-snackbar {
-      transform: translateX(-50%);
-      &[mdw-hide] {
-        transform: translateX(-50%) scale($snackbar__scale-up__from);
-      }
-      html[dir=rtl] & {
-        transform: translateX(50%);
-        &[mdw-hide] {
-          transform: translateX(50%) scale($snackbar__scale-up__from);
-        }
-      }
-    }
-  }
-  .mdw-snackbar__container[mdw-position="end"] {
-    .mdw-snackbar {
-      right: 0;
-      html[dir=rtl] & {
-        left: 0;
-        right: auto;
-      }
-    }
-  }
-  
-}

package/components/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
-

package/components/tab/style.scss

@@ -1,275 +0,0 @@
-// https://material.io/design/components/tabs.html#spec
-
-@import '../common/functions.scss';
-@import '../common/motion.scss';
-
-$tab__icon-size: 24;
-$tab__icon-margin-top: 12;
-$tab__icon-to-label-baseline: 20;
-$tab__icon-with-label-height: 72;
-
-.mdw-tab {
-  display: flex;
-  flex-direction: column;
-}
-
-.mdw-tab__items {
-  overflow-y: hidden;
-  position: relative;
-
-  flex: none;
-
-  display: flex; // IE11 doesn't support grid-auto-columns
-  display: grid;
-
-  grid-auto-columns: 1fr;
-
-  justify-content: flex-start;
-  flex-direction: row;
-  &[mdw-scrollable] {
-    display: flex;
-    overflow-x: auto;
-    box-sizing: border-box;
-    > .mdw-tab__item {
-      min-width: dp(90);
-      max-width: 100%;
-      flex: none;
-    }
-    > .mdw-tab__indicator {
-      margin-left: dp(52);
-    }
-    &::before,
-    &::after {
-      // Ensures 52dp blank space at end
-      content: "";
-      min-width: dp(52);
-    }
-  }
-}
-
-.mdw-tab__indicator {
-  position: absolute;
-  bottom: 0;
-  height: 2px;
-  width: 0;
-  left: 0;
-  right: auto;
-  html[dir=rtl] & {
-    right: 0;
-    left: auto;
-  }
-  background-color: currentColor;
-  transform-origin: left center;
-  transition-property: transform;
-  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;
-  }
-  // Indicator width
-  // Element position = 2 * number of input elements + 1 (itself)
-  // Width = 100% / number of input elements
-  @for $j from 1 through 8 {
-    &:nth-child(#{$j + 1}) {
-      width: #{100% / $j};
-    }
-  }
-  // Indicator offset
-  @for $i from 1 through 8 {
-    .mdw-tab__input:checked:nth-of-type(#{$i}) ~ .mdw-tab__items > &,
-    .mdw-tab__input:checked:nth-of-type(#{$i}) ~ .mdw-tab__items-wrapper .mdw-tab__items > &,
-    .mdw-tab__item[mdw-selected]:nth-of-type(#{$i}) ~ & {
-      transform: translateX(#{100% * ($i - 1)});
-    }
-    html[dir=rtl] .mdw-tab__input:checked:nth-of-type(#{$i}) ~ .mdw-tab__items > &,
-    html[dir=rtl] .mdw-tab__input:checked:nth-of-type(#{$i}) ~ .mdw-tab__items-wrapper .mdw-tab__items > &,
-    html[dir=rtl] .mdw-tab__item[mdw-selected]:nth-of-type(#{$i}) ~ & {
-      transform: translateX(#{-100% * ($i - 1)});
-    }
-  }
-  
-  &[mdw-js-indicator] {
-    width: 1px;
-    transform: translateX(0);
-  }
-}
-
-.mdw-tab__item {
-  min-height: dp(48); // Redundant but needed for IE11
-  position: relative;
-  display: flex;
-  flex: auto;
-  flex-direction: column;
-  align-items: center;
-
-  grid-row: 1;
-
-  box-shadow: none;
-  box-sizing: content-box;
-  border-radius: 0;
-  z-index: 0;
-  overflow: hidden;
-  cursor: pointer;
-  user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  -webkit-tap-highlight-color: transparent;
-  .mdw-tab__input:checked + & {
-    cursor: default;
-  }
-
-  > .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-tab__icon {
-  margin-top: dp($tab__icon-margin-top);
-  @include baseline-bottom($tab__icon-to-label-baseline);
-  margin-bottom: dp(-$tab__icon-to-label-baseline);
-  pointer-events: none;
-  transition-property: color;
-  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-tab__label {
-  @include type-rules('button');
-
-  box-sizing: border-box;
-  margin-top: auto;
-  margin-bottom: auto;
-  pointer-events: none;
-  padding: 0 dp(16);
-
-  text-align: center;
-  transition-property: color;
-  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-tab__icon ~ & {
-    margin: 0;
-    min-height: 0;
-    display: block;
-    @include baseline-top($tab__icon-to-label-baseline);
-    @include baseline-bottom($tab__icon-with-label-height
-      - $tab__icon-margin-top
-      - $tab__icon-size
-      - $tab__icon-to-label-baseline
-    );
-  }
-}
-
-.mdw-tab__input {
-  display: inline-block;
-  height: 0;
-  width: 0;
-  margin: 0;
-  padding: 0;
-
-  outline: none;
-  pointer-events: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-}
-
-.mdw-tab__item[mdw-selected] > .mdw-tab__icon,
-.mdw-tab__item[mdw-selected] > .mdw-tab__label {
-  color: inherit;
-}
-@for $i from 1 through 8 {
-  .mdw-tab__input:checked:nth-of-type(#{$i}) ~ .mdw-tab__items,
-  .mdw-tab__input:checked:nth-of-type(#{$i}) ~ .mdw-tab__items-wrapper .mdw-tab__items {
-    & > .mdw-tab__item:nth-child(#{$i}) {
-      > .mdw-tab__icon,
-      > .mdw-tab__label {
-        color: inherit;
-      }
-    }
-  }
-}
-
-.mdw-tab__content {
-  display: flex;
-  flex-direction: row;
-  flex-grow: 1;
-  align-items: stretch;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.mdw-tab__content-item {
-  max-width: 100%;
-  visibility: hidden;
-  flex-basis: 100%;
-  flex-shrink: 0;
-  transition-property: transform, visibility;
-  transition-timing-function: $motion-easing-standard;
-  transition-duration: $motion-duration-desktop-default, 0s;
-  transition-delay: 0s, $motion-duration-desktop-default;
-  @include allHandsets {
-    transition-duration: $motion-duration-mobile-default, 0s;
-    transition-delay: 0s, $motion-duration-mobile-default;
-  }
-  @include allTablets {
-    transition-duration: $motion-duration-tablet-default, 0s;
-    transition-delay: 0s, $motion-duration-tablet-default;
-  }
-  @for $j from 1 through 8 {
-    .mdw-tab__content[mdw-selected-index="#{$j - 1}"] > &,
-    .mdw-tab__input:checked:nth-of-type(#{$j}) ~ .mdw-tab__content > & {
-      transform: translateX(#{-100% * ($j - 1)});
-      &:nth-child(#{$j}) {
-        visibility: visible;
-        transition-delay: 0s, 0s;
-      }
-    }
-    html[dir=rtl] .mdw-tab__content[mdw-selected-index="#{$j - 1}"] > &,
-    html[dir=rtl] .mdw-tab__input:checked:nth-of-type(#{$j}) ~ .mdw-tab__content > & {
-      transform: translateX(#{100% * ($j - 1)});
-    }
-  }
-}
-
-.mdw-tab__content[mdw-scrollsnap] {
-  scroll-snap-type: x mandatory;
-  -ms-scroll-snap-type: x mandatory;
-  overflow-x: scroll;
-  .mdw-tab__content-item {
-    scroll-snap-align: start none;
-  }
-}

package/components/tab/theming.scss

@@ -1,34 +0,0 @@
-@import '../common/functions.scss';
-@import '../common/mixins.scss';
-
-$tabColors: (
-  active-color:      ((#000, 0.87), (#fff, 1.00)),
-  inactive-color:    ((#000, 0.54), (#fff, 0.70)),
-  ripple-opacity:    (         0.26 ,          0.30),
-);
-
-@function tabThemeValue($key, $type, $theme) {
-  @return themeValue('tab', $tabColors, $key, $type, $theme);
-}
-
-@mixin tabThemeVariables($color, $lightness) {
-  @include themeVariables('tab', $tabColors, $color, $lightness);
-}
-
-// Vary by contrast
-@mixin tabContrastRules($type: 'var', $theme: null) {
-  .mdw-tab__items:not([mdw-theme-color]) {
-    color: tabThemeValue("active-color", $type, $theme);
-  }
-  .mdw-tab__icon,
-  .mdw-tab__label {
-    color: tabThemeValue("inactive-color", $type, $theme);
-  }
-
-  .mdw-tab__item {
-    & > .mdw-ripple > .mdw-ripple__inner,
-    &::after {
-      opacity: tabThemeValue("ripple-opacity", $type, $theme);
-    }
-  }
-}

package/components/template/theming.scss

@@ -1,31 +0,0 @@
-@import '../common/functions.scss';
-@import '../common/mixins.scss';
-
-$templateColors: (
-  text-color:    ((#000, 0.54), (#fff, 0.87), (#fff, 1.00)),
-  border-color:  (('primary', '700', 0.87), ('primary', '200', 1.0)),
-);
-
-@function templateThemeValue($key, $type, $theme) {
-  @return themeValue('template', $templateColors, $key, $type, $theme);
-}
-
-@mixin templateThemeVariables($color, $lightness) {
-  @include themeVariables('template', $templateColors, $color, $lightness);
-}
-
-// Vary by contrast
-@mixin templateContrastRules($type: 'var', $theme: null) {
-  @at-root {
-    #{&}.mdw-template {
-      color: templateThemeValue("text-color", $type, $theme);
-    }
-  }
-}
-
-// Varies by theme
-@mixin templateThemeRules($theme: null) {
-  .mdw-template[mdw-theme-fill] {
-    border-color: templateThemeValue('border-color', null, $theme);
-  }
-}