material-sass 4.0.0.alpha6 → 4.0.0.beta

data/app/assets/stylesheets/material/mixins/_material-icons.scss

@@ -0,0 +1,36 @@
+@mixin reset-material-icons {
+  font-size: ($material-icon-size / $font-size-base * 1em);
+  line-height: ($font-size-base / $material-icon-size * 1em);
+
+  // The below value is calculated using the technique illustrated in:
+  // https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
+  // Font metrics used in the calculation are from Roboro Regular:
+  // https://github.com/google/fonts/blob/master/apache/roboto/Roboto-Regular.ttf
+
+  $roboto-fm-ascender:        1946 !default;
+  $roboto-fm-capital-height:  1456 !default;
+  $roboto-fm-descender:       512 !default;
+
+  $roboto-capital-height:     (strip-unit($font-size-base) * strip-unit($font-size-root) * strip-unit($line-height-base)) !default;
+  $roboto-computed-font-size: ($roboto-capital-height / $roboto-fm-capital-height) !default;
+  $roboto-distance-bottom:    $roboto-fm-descender !default;
+  $roboto-distance-top:       ($roboto-fm-ascender - $roboto-fm-capital-height) !default;
+
+  vertical-align: (($roboto-distance-bottom - $roboto-distance-top) * $roboto-computed-font-size * -1em);
+}
+
+@mixin set-material-icons {
+  @include reset-material-icons;
+
+  font-family: 'Material Icons';
+  font-feature-settings: 'liga';
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  text-rendering: optimizeLegibility;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}

data/app/assets/stylesheets/material/mixins/_nav-divider.scss

@@ -1,6 +1,6 @@
 @mixin nav-divider($bg: $black-divider) {
   background-color: $bg;
   height: 1px;
-  margin: $spacer-sm-y 0;
+  margin: $spacer-sm 0;
   overflow: hidden;
 }

data/app/assets/stylesheets/material/mixins/_reset-text.scss

@@ -1,12 +1,12 @@
 @mixin reset-text {
+  @include text-align(left);
+
   font-family: $font-family-base;
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;
   line-break: auto;
   line-height: $line-height-base;
-  text-align: left;
-  text-align: start;
   text-decoration: none;
   text-shadow: none;
   text-transform: none;
@@ -14,22 +14,3 @@
   word-break: normal;
   word-spacing: normal;
 }
-
-@mixin reset-to-material-icons($base: $font-size-base) {
-  direction: ltr;
-  display: inline-block;
-  font-family: "Material Icons";
-  font-feature-settings: "liga";
-  font-size: #{($material-icon-size / $font-size-root) / strip-unit($base)}em;
-  font-style: normal;
-  font-weight: normal;
-  letter-spacing: normal;
-  line-height: #{strip-unit($base) / (($material-icon-size / $font-size-root) / strip-unit($base))}em;;
-  text-rendering: optimizeLegibility;
-  text-transform: none;
-  vertical-align: middle;
-  white-space: nowrap;
-  word-wrap: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}

data/app/assets/stylesheets/material/mixins/_screenreader.scss

@@ -1,23 +1,25 @@
 @mixin sr-only {
   border: 0;
-  clip: rect(0,0,0,0);
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   height: 1px;
-  margin: -1px;
   padding: 0;
   overflow: hidden;
   position: absolute;
+  white-space: nowrap;
   width: 1px;
 }
 
 @mixin sr-only-focusable {
-  // active, focus, hover
-    &:active,
-    &:focus {
-      clip: auto;
-      height: auto;
-      margin: 0;
-      overflow: visible;
-      position: static;
-      width: auto;
-    }
+  // Active, focus, hover
+  &:active,
+  &:focus {
+    clip: auto;
+    clip-path: none;
+    height: auto;
+    overflow: visible;
+    position: static;
+    white-space: normal;
+    width: auto;
+  }
 }

data/app/assets/stylesheets/material/mixins/_text-alignment.scss

@@ -0,0 +1,23 @@
+@mixin text-align($direction: 'left') {
+  // scss-lint:disable DuplicateProperty
+  @if $direction == 'left' {
+    text-align: left;
+    text-align: start;
+
+    [dir='rtl'] & {
+      text-align: right;
+      text-align: start;
+    }
+  }
+
+  @if $direction == 'right' {
+    text-align: right;
+    text-align: end;
+
+    [dir='rtl'] & {
+      text-align: left;
+      text-align: end;
+    }
+  }
+  // scss-lint:enable DuplicateProperty
+}

data/app/assets/stylesheets/material/mixins/_text-emphasis.scss

@@ -1,14 +1,14 @@
-@mixin text-emphasis-variant($class, $color, $color-dark: "") {
+@mixin text-emphasis-variant($class, $color, $color-dark: '') {
   #{$class} {
     color: $color !important;
   }
 
-  @if $color-dark != "" {
+  @if $color-dark != '' {
     a#{$class} {
-      // active, focus, hover
-        @include active-focus-hover {
-          color: $color-dark !important;
-        }
+      // Active, focus, hover
+      @include active-focus-hover {
+        color: $color-dark !important;
+      }
     }
   }
 }

data/app/assets/stylesheets/material/mixins/_transition.scss

@@ -1,47 +1,61 @@
+// Acceleration curve: permanently leaving the screen
+
 @mixin transition-acceleration($property...) {
-  transition-duration: $transition-duration-sm;
+  transition-duration: $transition-duration-mobile-leaving;
   transition-property: $property;
   transition-timing-function: $transition-timing-function-acceleration;
 
   @include media-breakpoint-up(sm) {
-    transition-duration: $transition-duration-tablet-sm;
+    transition-duration: $transition-duration-tablet-leaving;
   }
 
   @include media-breakpoint-up(lg) {
-    transition-duration: $transition-duration-desktop-sm;
+    transition-duration: $transition-duration-desktop-leaving;
   }
 }
 
+
+
+// Deceleration curve: entering the screen
+
 @mixin transition-deceleration($property...) {
-  transition-duration: $transition-duration-lg;
+  transition-duration: $transition-duration-mobile-entering;
   transition-property: $property;
   transition-timing-function: $transition-timing-function-deceleration;
 
   @include media-breakpoint-up(sm) {
-    transition-duration: $transition-duration-tablet-lg;
+    transition-duration: $transition-duration-tablet-entering;
   }
 
   @include media-breakpoint-up(lg) {
-    transition-duration: $transition-duration-desktop-lg;
+    transition-duration: $transition-duration-desktop-entering;
   }
 }
 
+
+
+// Sharp curve: temporarily leaving the screen
+
 @mixin transition-sharp($property...) {
-  transition-duration: $transition-duration-sm;
+  transition-duration: $transition-duration-mobile-leaving;
   transition-property: $property;
   transition-timing-function: $transition-timing-function-sharp;
 
   @include media-breakpoint-up(sm) {
-    transition-duration: $transition-duration-tablet-sm;
+    transition-duration: $transition-duration-tablet-leaving;
   }
 
   @include media-breakpoint-up(lg) {
-    transition-duration: $transition-duration-desktop-sm;
+    transition-duration: $transition-duration-desktop-leaving;
   }
 }
 
+
+
+// Standard curve: relative movement
+
 @mixin transition-standard($property...) {
-  transition-duration: $transition-duration;
+  transition-duration: $transition-duration-mobile;
   transition-property: $property;
   transition-timing-function: $transition-timing-function-standard;
 
@@ -53,3 +67,21 @@
     transition-duration: $transition-duration-desktop;
   }
 }
+
+
+
+// Standard curve: relative movement - complex, full-screen, large transitions
+
+@mixin transition-standard-complex($property...) {
+  transition-duration: $transition-duration-mobile-complex;
+  transition-property: $property;
+  transition-timing-function: $transition-timing-function-standard;
+
+  @include media-breakpoint-up(sm) {
+    transition-duration: $transition-duration-tablet-complex;
+  }
+
+  @include media-breakpoint-up(lg) {
+    transition-duration: $transition-duration-desktop-complex;
+  }
+}

data/app/assets/stylesheets/material/utilities/_background.scss

@@ -1,23 +1,23 @@
-// dark and light theme
-// based on https://material.google.com/style/color.html#color-themes
-  @include bg-variant('.bg-dark-1', $dark-theme-1);
-  @include bg-variant('.bg-dark-2', $dark-theme-2);
-  @include bg-variant('.bg-dark-3', $dark-theme-3);
-  @include bg-variant('.bg-dark-4', $dark-theme-4);
+// Dark and light theme
+// Based on https://material.google.com/style/color.html#color-themes
 
-  @include bg-variant('.bg-light-1', $light-theme-1);
-  @include bg-variant('.bg-light-2', $light-theme-2);
-  @include bg-variant('.bg-light-3', $light-theme-3);
-  @include bg-variant('.bg-light-4', $light-theme-4);
+@include bg-variant('.bg-dark-1', $dark-theme-1);
+@include bg-variant('.bg-dark-2', $dark-theme-2);
+@include bg-variant('.bg-dark-3', $dark-theme-3);
+@include bg-variant('.bg-dark-4', $dark-theme-4);
 
-// offwhite
-  @include bg-variant('.bg-faded', $offwhite, $offwhite-dark);
+@include bg-variant('.bg-light-1', $light-theme-1);
+@include bg-variant('.bg-light-2', $light-theme-2);
+@include bg-variant('.bg-light-3', $light-theme-3);
+@include bg-variant('.bg-light-4', $light-theme-4);
 
-// palette
-  @each $color in $palettes {
-    $i: index($palettes, $color);
+@include bg-variant('.bg-transparent', transparent);
+@include bg-variant('.bg-white', $white);
 
-    @include bg-variant('.bg-#{$color}', nth($palettes-color, $i), nth($palettes-color-dark, $i));
-  }
 
-  @include bg-variant('.bg-inverse', $dark-theme-4, $dark-theme-3);
+
+// Palette
+
+@each $color, $values in $theme-colors {
+  @include bg-variant('.bg-#{$color}', map-get(theme-color($color), color), map-get(theme-color($color), darker));
+}

data/app/assets/stylesheets/material/utilities/_border.scss

@@ -1,53 +1,100 @@
-//
-// border
-//
-  .border-0 {
-    border: 0 !important;
-  }
+// Border
 
-  .border-top-0 {
-    border-top: 0 !important;
-  }
+.border-0 {
+  border: 0 !important;
+}
 
-  .border-right-0 {
-    border-right: 0 !important;
-  }
+.border-top-0 {
+  border-top: 0 !important;
+}
 
-  .border-bottom-0 {
-    border-bottom: 0 !important;
-  }
+.border-right-0 {
+  border-right: 0 !important;
+}
 
-  .border-left-0 {
-    border-left: 0 !important;
-  }
+.border-bottom-0 {
+  border-bottom: 0 !important;
+}
 
-//
-// border radius
-//
-  .rounded {
-    @include border-radius($border-radius);
-  }
+.border-left-0 {
+  border-left: 0 !important;
+}
 
-  .rounded-0 {
-    border-radius: 0;
-  }
+// Colour
+.border-black {
+  border-color: $black !important;
+}
 
-  .rounded-circle {
-    border-radius: 50%;
-  }
+.border-black-primary {
+  border-color: $black-primary !important;
+}
 
-  .rounded-top {
-    @include border-top-radius($border-radius);
-  }
+.border-black-secondary {
+  border-color: $black-secondary !important;
+}
 
-  .rounded-right {
-    @include border-right-radius($border-radius);
-  }
+.border-black-hint {
+  border-color: $black-hint !important;
+}
 
-  .rounded-bottom {
-    @include border-bottom-radius($border-radius);
-  }
+.border-black-divider {
+  border-color: $black-divider !important;
+}
+
+.border-white {
+  border-color: $white !important;
+}
+
+.border-white-primary {
+  border-color: $white-primary !important;
+}
 
-  .rounded-left {
-    @include border-left-radius($border-radius);
+.border-white-secondary {
+  border-color: $white-secondary !important;
+}
+
+.border-white-hint {
+  border-color: $white-hint !important;
+}
+
+.border-white-divider {
+  border-color: $white-divider !important;
+}
+
+@each $color, $values in $theme-colors {
+  .border-#{$color} {
+    border-color: map-get(theme-color($color), color) !important;
   }
+}
+
+
+
+// Border radius
+
+.rounded {
+  @include border-radius($border-radius);
+}
+
+.rounded-0 {
+  border-radius: 0;
+}
+
+.rounded-circle {
+  border-radius: 50%;
+}
+
+.rounded-top {
+  @include border-top-radius($border-radius);
+}
+
+.rounded-right {
+  @include border-right-radius($border-radius);
+}
+
+.rounded-bottom {
+  @include border-bottom-radius($border-radius);
+}
+
+.rounded-left {
+  @include border-left-radius($border-radius);
+}