@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/common/functions.scss

@@ -1,174 +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 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 ($type == 'var' or ($type == null and $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)}');
-}
-
-// https://material.io/guidelines/resources/shadows.html
-// from Sketch
-$drop-shadow-values: (
-   0: "none",
-   1: "0 00px 02px 0px rgba(0,0,0,0.14), 0 02px 02px 0px rgba(0,0,0,0.12), 0 01px 03px 0 rgba(0,0,0,0.20)",
-   2: "0 00px 04px 0px rgba(0,0,0,0.14), 0 03px 04px 0px rgba(0,0,0,0.12), 0 01px 05px 0 rgba(0,0,0,0.20)",
-   3: "0 03px 03px 0px rgba(0,0,0,0.14), 0 03px 04px 0px rgba(0,0,0,0.12), 0 01px 08px 0 rgba(0,0,0,0.20)",
-   4: "0 02px 04px 0px rgba(0,0,0,0.14), 0 04px 05px 0px rgba(0,0,0,0.12), 0 01px 10px 0 rgba(0,0,0,0.20)",
-   6: "0 06px 10px 0px rgba(0,0,0,0.14), 0 01px 18px 0px rgba(0,0,0,0.12), 0 03px 05px 0 rgba(0,0,0,0.20)",
-   8: "0 08px 10px 1px rgba(0,0,0,0.14), 0 03px 14px 3px rgba(0,0,0,0.12), 0 04px 15px 0 rgba(0,0,0,0.20)",
-   9: "0 09px 12px 1px rgba(0,0,0,0.14), 0 03px 16px 2px rgba(0,0,0,0.12), 0 05px 06px 0 rgba(0,0,0,0.20)",
-  12: "0 12px 17px 2px rgba(0,0,0,0.14), 0 05px 22px 4px rgba(0,0,0,0.12), 0 07px 08px 0 rgba(0,0,0,0.20)",
-  16: "0 16px 24px 2px rgba(0,0,0,0.14), 0 06px 30px 5px rgba(0,0,0,0.12), 0 08px 10px 0 rgba(0,0,0,0.20)",
-  24: "0 24px 38px 3px rgba(0,0,0,0.14), 0 09px 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,122 +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 {
-  @media
-    screen
-      and (orientation:portrait)
-      and (max-width: $breakpoint-portrait-handset-max - 1),
-    screen
-      and (orientation:landscape)
-      and (max-width: $breakpoint-landscape-handset-max - 1) {
-    @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;
-  }
-}
-
-@mixin gutter16dp {
-  @media
-  screen
-  and (orientation:portrait)
-  and (max-width: dp(600 - 1)),
-screen
-  and (orientation:landscape)
-  and (max-height: dp(600 - 1)) {
-@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/type.scss

@@ -1,104 +0,0 @@
-$mdw-types: (
-  h1: (
-    font-weight: $font-weight-light,
-    letter-spacing: sp(-1.5),
-    font-size: sp(96),
-    line-height: dp(112),
-  ),
-  h2: (
-    font-weight: $font-weight-light,
-    letter-spacing: sp(-0.5),
-    font-size: sp(60),
-    line-height: dp(72),
-  ),
-  h3: (
-    font-weight: $font-weight-regular,
-    letter-spacing: 0,
-    font-size: sp(48),
-    line-height: dp(56),
-  ),
-  h4: (
-    font-weight: $font-weight-regular,
-    letter-spacing: sp(0.25),
-    font-size: sp(34),
-    line-height: dp(40),
-  ),
-  h5: (
-    font-weight: $font-weight-regular,
-    letter-spacing: 0,
-    font-size: sp(24),
-    line-height: dp(28),
-  ),
-  h6: (
-    font-weight: $font-weight-medium,
-    letter-spacing: sp(0.15),
-    font-size: sp(20),
-    line-height: dp(24),
-  ),
-  subtitle: (
-    font-weight: $font-weight-regular,
-    letter-spacing: sp(0.15),
-    font-size: sp(16),
-    line-height: dp(20),
-  ),
-  subtitle-2: (
-    font-weight: $font-weight-medium,
-    letter-spacing: sp(0.1),
-    font-size: sp(14),
-    line-height: dp(16),
-  ),
-  body: (
-    font-weight: $font-weight-regular,
-    letter-spacing: sp(0.5),
-    font-size: sp(16),
-    line-height: dp(24),
-  ),
-  body-2: (
-    font-weight: $font-weight-regular,
-    letter-spacing: sp(0.25),
-    font-size: sp(14),
-    line-height: dp(20),
-  ),
-  button: (
-    font-weight: $font-weight-medium,
-    text-transform: uppercase,
-    letter-spacing: sp(1.25),
-    font-size: sp(14),
-    line-height: dp(16),
-  ),
-  caption: (
-    font-weight: $font-weight-regular,
-    letter-spacing: sp(0.4),
-    font-size: sp(12),
-    line-height: dp(16),
-  ),
-  overline: (
-    font-weight: $font-weight-regular,
-    letter-spacing: sp(1.5),
-    font-size: sp(10),
-    line-height: dp(12),
-  ),
-);
-
-@mixin type-rules($type) {
-  $rules: map-get($mdw-types, $type);
-  @each $key in map-keys($rules) {
-    #{$key}: map-get($rules, $key);
-  }
-}
-
-@mixin baseline-top($dp) {
-  &::before {
-    content: '';
-    display: inline-block;
-    height: dp($dp);
-  }
-}
-
-@mixin baseline-bottom($dp) {
-  &::after {
-    content: '';
-    display: inline-block;
-    vertical-align: dp(-$dp);
-  }
-}

package/components/common/variables.scss

@@ -1,46 +0,0 @@
-$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;