@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/common/functions.scss

@@ -1,173 +0,0 @@
-@import '../theming/palettes';
-
-@function sp($multiplier) {
-  @return ($multiplier/16.0) * 1rem;
-}
-
-@function dp($multiplier) {
-  @return $multiplier * 1px;
-}
-
-@function elevation($dp) {
-  @return unquote(map-get($drop-shadow-values, $dp));
-}
-
-@function parseThemeItem($item, $type, $theme: null) {
-  $length: length($item);
-  @if ($length == 1) {
-    @return $item;
-  } @else if ($length == 2) {
-    @return rgba(nth($item, 1), nth($item, 2));
-  } @else {
-    $color: nth($item, 1);
-    $tone: nth($item, 2);
-    $opacity: nth($item, 3);
-    @return unquote("rgba(#{getThemePaletteColor($color, $tone, $type, $theme)}, #{$opacity})");
-  }
-  @return null;
-}
-
-@function getThemeMapItem($colorMap, $key, $type) {
-  $list: map-get($colorMap, $key);
-  $length: length($list);
-  @if ($type == 'dark-background') {
-    @if ($length >= $dark-background) {
-      @return nth($list, $dark-background);
-    }
-    $type: 'dark';
-  }
-
-  @if ($type == 'dark') {
-    @if ($length >= $dark) {
-      @return nth($list, $dark);
-    }
-  }
-  @return nth($list, $light);
-}
-
-@function themeValue($component, $colorMap, $key, $type, $theme: null) {
-  @if ($type == 'var') {
-    @return unquote("var(--#{$component}__#{$key})");
-  }
-  $item: getThemeMapItem($colorMap, $key, $type);
-  @return parseThemeItem($item, $type, $theme);
-}
-
-@function getThemePalette($color, $theme) {
-  @if ($color == 'primary') {
-    @if ($theme != null) {
-      @return map-get($palettes, nth($theme, 1));
-    }
-    @error 'Missing primary color!'
-  } @else if ($color == 'accent') {
-    @if (length($theme) > 1) {
-      @return map-get($palettes, nth($theme, 2));
-    }
-    @error 'Missing accent color!'
-  } @else if ($color == 'warn') {
-    @if (length($theme) > 2) {
-      @return map-get($palettes, nth($theme, 3));
-    }
-    @return map-get($palettes, 'red');
-  } @else if ($color == 'background') {
-    @if (length($theme) > 3) {
-      @return map-get($palettes, nth($theme, 4));
-    }
-    @return map-get($palettes, 'grey');
-  }
-  @error "Unrecognized Theme Palette!";
-}
-
-@function getThemePaletteColor($color, $tone, $type, $theme: null) {
-  @if ($theme == null) {
-    @if ($tone == null) {
-      @return "var(--#{$color}-color)";
-    }
-    @return "var(--#{$color}-#{$tone}-color)";
-  }
-  @if ($tone == null) {
-    $tone: '500';
-  }
-
-  $palette: getThemePalette($color, $theme);
-  $value: map-get($palette, $tone);
-  $rgbValue: red($value), green($value), blue($value);
-  @return $rgbValue;
-}
-
-// Replace letters
-@function str-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-  }
-  @return $string;
-}
-
-// Encode symbols
-@function url-encode($string) {
-  $map: (
-      "%": "%25",
-      "<": "%3C",
-      ">": "%3E",
-      " ": "%20",
-      "!": "%21",
-      "*": "%2A",
-      "'": "%27",
-      '"': "%22",
-      "(": "%28",
-      ")": "%29",
-      ";": "%3B",
-      ":": "%3A",
-      "@": "%40",
-      "&": "%26",
-      "=": "%3D",
-      "+": "%2B",
-      "$": "%24",
-      ",": "%2C",
-      "/": "%2F",
-      "?": "%3F",
-      "#": "%23",
-      "[": "%5B",
-      "]": "%5D"
-  );
-  $new: $string;
-  @each $search, $replace in $map {
-    $new: str-replace($new, $search, $replace);
-  }
-  @return $new;
-}
-
-// Format the SVG as a URL
-@function inline-svg($string) {
-  @return url('data:image/svg+xml,#{url-encode($string)}');
-}
-
-// from Sketch
-$drop-shadow-values: (
-  0: "none",
-  1: "0 0 2px 0 rgba(0,0,0,0.14), 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20)",
-  2: "0 2px 4px 0 rgba(0,0,0,0.14), 0 3px 4px 0 rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20)",
-  3: "0 3px 3px 0 rgba(0,0,0,0.14), 0 3px 4px 0 rgba(0,0,0,0.12), 0 1px 8px 0 rgba(0,0,0,0.20)",
-  4: "0 2px 4px 0 rgba(0,0,0,0.14), 0 4px 5px 0 rgba(0,0,0,0.12), 0 1px 10px 0 rgba(0,0,0,0.20)",
-  6: "0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px 0 rgba(0,0,0,0.20)",
-  8: "0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 3px rgba(0,0,0,0.12), 0 4px 5px 0 rgba(0,0,0,0.20)",
-  9: "0 9px 12px 1px rgba(0,0,0,0.14), 0 3px 16px 2px rgba(0,0,0,0.12), 0 5px 6px 0 rgba(0,0,0,0.20)",
-  12: "0 12px 17px 2px rgba(0,0,0,0.14), 0 5px 22px 4px rgba(0,0,0,0.12), 0 7px 8px 0 rgba(0,0,0,0.20)",
-  16: "0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px 0 rgba(0,0,0,0.20)",
-  24: "0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px 0 rgba(0,0,0,0.20)"
-);
-
-@function insetPaddingTop($padding, $line-height: normal) {
-  @if ($line-height == normal) {
-    @return calc(#{$padding} - #{$font-top-gap * 1em});
-  }
-  @return calc(#{$padding} - #{$font-top-gap * 1em} - ((#{$line-height} - (#{$font-line-height * 1em})) / 2));
-}
-
-@function insetPaddingBottom($padding, $line-height: normal) {
-  @if ($line-height == normal) {
-    @return calc(#{$padding} - #{$font-bottom-gap * 1em});
-  }
-  @return calc(#{$padding} - #{$font-bottom-gap * 1em} - ((#{$line-height} - (#{$font-line-height * 1em})) / 2));
-}

package/components/common/mixins.scss

@@ -1,107 +0,0 @@
-@import './variables.scss';
-
-@mixin portraitHandsets {
-  @media screen
-    and (orientation:portrait)
-    and (max-width: $breakpoint-portrait-handset-max - 1) {
-      @content;
-    }
-}
-@mixin landscapeHandsets {
-  @media screen
-    and (orientation:landscape)
-    and (max-width: $breakpoint-landscape-handset-max - 1) {
-      @content;
-    }
-}
-
-@mixin allHandsets {
-  @include portraitHandsets {
-    @content;
-  }
-  @include landscapeHandsets {
-    @content;
-  }
-}
-
-@mixin allTablets {
-  @media
-    screen
-      and (orientation:portrait)
-      and (min-width: $breakpoint-portrait-tablet-small)
-      and (max-width: $breakpoint-portrait-tablet-max - 1),
-    screen
-      and (orientation:landscape)
-      and (min-width: $breakpoint-landscape-tablet-small)
-      and (max-width: $breakpoint-landscape-tablet-max - 1) {
-    @content;
-  }
-}
-
-@mixin allHandsetsAndTablets {
-  @media
-    screen
-      and (orientation:portrait)
-      and (max-width: $breakpoint-portrait-tablet-max - 1),
-    screen
-      and (orientation:landscape)
-      and (max-width: $breakpoint-landscape-tablet-max - 1) {
-    @content;
-  }
-}
-
-$light: 1;
-$dark: 2;
-$dark-background: 3;
-
-@mixin themeVariables($component, $map, $color, $contrast) {
-  @each $key in map-keys($map) {
-    $type: 'light';
-    @if ($contrast == 'dark') {
-      @if ($color == 'background') {
-        $type: 'dark-background';
-      } @else {
-        $type: 'dark';
-      }
-    }
-    $item: getThemeMapItem($map, $key, $type);
-    $value: null;
-    $length: length($item);
-    @if ($length == 1) {
-      $value: $item;
-    } @else if ($length == 2) {
-      $value: rgba(nth($item, 1), nth($item, 2));
-    } @else {
-      $color: nth($item,1);
-      $tone: nth($item,2);
-      $opacity: nth($item,3);
-      @if ($tone == null or tone == '500') {
-        $value: unquote("rgba(var(--#{$color}-color), #{$opacity})");
-      } @else {
-        $value: unquote("rgba(var(--#{$color}-#{$tone}-color), #{$opacity})");
-      }
-    }
-    --#{$component}__#{$key}: $value;
-  }
-}
-
-@mixin IEOnly {
-  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    @content;
-  }
-}
-
-@mixin EdgeOnly {
-  @supports (-ms-ime-align:auto) {
-    @content;
-  }
-}
-
-@mixin MSOnly {
-  @include IEOnly {
-    @content;
-  }
-  @include EdgeOnly {
-    @content;
-  }
-}

package/components/common/motion.scss

@@ -1,36 +0,0 @@
-// Motion Durations
-// https://material.io/guidelines/motion/duration-easing.html#duration-easing-dynamic-durations
-
-$motion-duration-mobile-default: 300ms;
-$motion-duration-mobile-complex: 375ms;
-$motion-duration-mobile-enter: 225ms;
-$motion-duration-mobile-leave: 195ms;
-$motion-duration-mobile-max: 400ms;
-
-$motion-duration-tablet-default: $motion-duration-mobile-default * 1.30;
-$motion-duration-tablet-complex: $motion-duration-mobile-complex * 1.30;
-$motion-duration-tablet-enter: $motion-duration-mobile-enter * 1.30;
-$motion-duration-tablet-leave: $motion-duration-mobile-leave * 1.30;
-$motion-duration-tablet-max: $motion-duration-mobile-max * 1.30;
-
-$motion-duration-wearable-default: $motion-duration-mobile-default * 0.70;
-$motion-duration-wearable-complex: $motion-duration-mobile-complex * 0.70;
-$motion-duration-wearable-enter: $motion-duration-mobile-enter * 0.70;
-$motion-duration-wearable-leave: $motion-duration-mobile-leave * 0.70;
-$motion-duration-wearable-max: $motion-duration-mobile-max * 0.70;
-
-// Self-estimated
-$motion-duration-desktop-default: 175ms;
-$motion-duration-desktop-complex: 200ms;
-$motion-duration-desktop-enter: 185ms;
-$motion-duration-desktop-leave: 150ms;
-$motion-duration-desktop-max: 300ms;
-
-// Motion Easing Curves
-// https://material.io/guidelines/motion/duration-easing.html#duration-easing-natural-easing-curves
-
-$motion-easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
-$motion-easing-deceleration: cubic-bezier(0.0, 0.0, 0.2, 1);
-$motion-easing-acceleration: cubic-bezier(0.4, 0.0, 1, 1);
-$motion-easing-sharp: cubic-bezier(0.4, 0.0, 0.6, 1);
-

package/components/common/ripple.scss

@@ -1,92 +0,0 @@
-@import "./mixins.scss";
-
-$ripple-duration: 500ms;
-@mixin mdw-ripple__container {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  border-radius: inherit;
-}
-
-@mixin mdw-ripple__inner {
-  content: '';
-  display: table; // Fixes Safari flexbox bug
-  border-radius: 50%;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  z-index: -1;
-  user-select: none;
-  pointer-events: none;
-  height: 0;
-  width: 100%;
-  padding-top: 100%;
-  background-color: transparent;
-  color: inherit;
-  opacity: 0.26;
-  @include MSOnly() {
-    // Microsoft browsers don't handle low opacity (12%) properly
-    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/common/variables.scss

@@ -1,48 +0,0 @@
-$desktop-breakpoint-offset: dp(16);
-
-$breakpoint-portrait-handset-small: dp(0);
-$breakpoint-portrait-handset-medium: dp(360);
-$breakpoint-portrait-handset-large: dp(400);
-$breakpoint-portrait-handset-max: dp(600);
-
-$breakpoint-portrait-tablet-small: dp(600);
-$breakpoint-portrait-tablet-large: dp(720);
-$breakpoint-portrait-tablet-max: dp(840);
-
-$breakpoint-landscape-handset-small: dp(480);
-$breakpoint-landscape-handset-medium: dp(600);
-$breakpoint-landscape-handset-large: dp(720);
-$breakpoint-landscape-handset-max: dp(960);
-
-$breakpoint-landscape-tablet-small: dp(960);
-$breakpoint-landscape-tablet-large: dp(1024);
-$breakpoint-landscape-tablet-max: dp(1280);
-
-$breakpoint-window-xsmall: dp(0);
-$breakpoint-window-small: dp(600);
-$breakpoint-window-medium: dp(1024);
-$breakpoint-window-large: dp(1440);
-$breakpoint-window-xlarge: dp(1920);
-
-$font-weight-thin: 100;
-$font-weight-light: 300;
-$font-weight-regular: 400; // normal
-$font-weight-medium: 500;
-$font-weight-bold: 700;
-$font-weight-black: 900;
-
-// From Roboto fontinfo.plist
-
-$font-line-gap: 0;
-$font-em-square: 2048;
-$font-cap-height: 1456;
-$font-ascender: 2146;
-$font-descender: -555;
-
-// Calculated
-$font-line-height: ($font-ascender - $font-descender + $font-line-gap) / $font-em-square;
-$font-top-gap: ($font-ascender - $font-cap-height) / $font-em-square;
-$font-bottom-gap: -$font-descender / $font-em-square;
-
-// Temporary workaround because ascent seems incorrect
-$font-top-gap: $font-bottom-gap;

package/components/complex/dialog/style.scss

@@ -1,159 +0,0 @@
-// https://material.io/guidelines/components/dialogs.html
-
-// https://material.io/guidelines/components/menus.html
-
-
-$dialog__unit-width: dp(56);
-
-.mdw-dialog__close {
-  visibility: hidden;
-  pointer-events: inherit;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-  cursor: default;
-  background-color: rgba(black, 0.50);
-}
-
-.mdw-dialog {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-
-  pointer-events: none;
-  z-index: 1;
-  transition-property: 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(#{$dialog__unit-width} * #{$i});
-    }
-  }
-  opacity: 0;
-  &[mdw-show]:not([mdw-hide]),
-  &:target {
-    pointer-events: auto;
-    transition-timing-function: $motion-easing-acceleration;
-    transition-duration: $motion-duration-desktop-enter;
-    opacity: 1;
-    @include allHandsets {
-      transition-duration: $motion-duration-mobile-enter;
-    }
-    @include allTablets {
-      transition-duration: $motion-duration-tablet-enter;
-    }
-    .mdw-dialog__close {
-      visibility: visible;
-    }
-  }
-}
-
-.mdw-dialog__popup {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 1;
-  min-width: dp(224);
-  border-radius: dp(2);
-  box-shadow: elevation(24);
-  transition-duration: inherit;
-  transition-timing-function: inherit;
-  margin: dp(40);
-}
-
-.mdw-dialog__content {
-  display: flex;
-  flex-direction: column;
-  padding: 0 dp(24);
-}
-.mdw-dialog__title {
-  font-weight: $font-weight-medium;
-  line-height: dp(28);
-  font-size: sp(20);
-  
-  // 24dp top padding
-  &::before {
-    content: "\200D"; // ‍
-    display: inline-block;
-    margin-top: dp(24);
-    line-height: 1;
-    vertical-align: text-bottom;
-  }
-
-  // 20dp bottom padding from baseline
-  // 10dp from self and 10dp from next
-  &::after {
-    content: "\200D"; // ‍
-    display: inline-block;
-    line-height: 1;
-    margin-bottom: dp(10);
-    vertical-align: text-top;
-  }
-  &:last-child::after {
-    content: "\200D"; // ‍
-    display: inline-block;
-    line-height: 1;
-    margin-bottom: dp(20);
-    vertical-align: text-top;
-  }
-}
-
-.mdw-dialog__body {
-  font-weight: $font-weight-regular;
-  line-height: dp(24);
-  font-size: sp(16);
-  
-  // 24dp top padding or 10+10 if followed by title
-  &::before {
-    content: "\200D"; // ‍
-    display: inline-block;
-    margin-top: dp(24);
-    line-height: 1;
-    vertical-align: text-bottom;
-    .mdw-dialog__title ~ & {
-      margin-top: dp(10);
-    }
-  }
-
-  // 20dp bottom padding from baseline
-  &::after {
-    content: "\200D"; // ‍
-    display: inline-block;
-    line-height: 1;
-    vertical-align: text-top;
-    margin-bottom: dp(20);
-  }
-}
-
-
-
-// 10dp top padding to complete previous item
-.mdw-dialog__button-area {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  margin-top: dp(8);
-  margin-bottom: dp(8);
-  .mdw-button {
-    margin: 0;
-    &:last-child {
-      margin: 0 dp(8);
-    }
-  }
-}

package/components/complex/dialog/theming.scss

@@ -1,29 +0,0 @@
-@import '../../common/functions.scss';
-@import '../../common/mixins.scss';
-
-$dialogColors: (
-  text-color:           ((#000, 0.87), (#fff,              1.00)),
-  secondary-text-color: ((#000, 0.54), (#fff,              0.70)),
-  background-color:     ((#fff, 1.00), ('background', '800', 1.00)),
-);
-
-@function dialogThemeValue($key, $type, $theme) {
-  @return themeValue('dialog', $dialogColors, $key, $type, $theme);
-}
-
-@mixin dialogThemeVariables($color, $lightness) {
-  @include themeVariables('dialog', $dialogColors, $color, $lightness);
-}
-
-// Vary by contrast or theme
-@mixin dialogContrastRules($type: 'var', $theme: null) {
-  .mdw-dialog__popup {
-    background-color: dialogThemeValue("background-color", $type, $theme);
-  }
-  .mdw-dialog__title {
-    color: dialogThemeValue("text-color", $type, $theme);
-  }
-  .mdw-dialog__body {
-    color: dialogThemeValue("secondary-text-color", $type, $theme);
-  }
-}