material-sass 4.0.0.beta → 4.0.0.beta2

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

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

data/{app/assets → assets}/stylesheets/material/mixins/_transition.scss

@@ -14,8 +14,6 @@
   }
 }
 
-
-
 // Deceleration curve: entering the screen
 
 @mixin transition-deceleration($property...) {
@@ -32,8 +30,6 @@
   }
 }
 
-
-
 // Sharp curve: temporarily leaving the screen
 
 @mixin transition-sharp($property...) {
@@ -50,8 +46,6 @@
   }
 }
 
-
-
 // Standard curve: relative movement
 
 @mixin transition-standard($property...) {
@@ -68,8 +62,6 @@
   }
 }
 
-
-
 // Standard curve: relative movement - complex, full-screen, large transitions
 
 @mixin transition-standard-complex($property...) {

data/{app/assets → assets}/stylesheets/material/utilities/_align.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 .align-top {
   vertical-align: top !important;
 }

data/{app/assets → assets}/stylesheets/material/utilities/_background.scss

@@ -5,17 +5,13 @@
 @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);
-
 @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-transparent', transparent);
 @include bg-variant('.bg-white', $white);
 
-
-
 // Palette
 
 @each $color, $values in $theme-colors {

data/{app/assets → assets}/stylesheets/material/utilities/_border.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Border
 
 .border-0 {
@@ -67,8 +69,6 @@
   }
 }
 
-
-
 // Border radius
 
 .rounded {

data/{app/assets → assets}/stylesheets/material/utilities/_display.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Utilities for common `display` values
 
 @each $breakpoint in map-keys($grid-breakpoints) {
@@ -35,11 +37,13 @@
     .d#{$infix}-table-cell {
       display: table-cell !important;
     }
+
+    .d#{$infix}-table-row {
+      display: table-row !important;
+    }
   }
 }
 
-
-
 // Utilities for toggling `display` in print
 
 .d-print-block {

data/{app/assets → assets}/stylesheets/material/utilities/_flex.scss

@@ -1,7 +1,11 @@
+// stylelint-disable declaration-no-important
+
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint);
 
+    // Align content
+
     .align-content#{$infix}-around {
       align-content: space-around !important;
     }
@@ -26,7 +30,7 @@
       align-content: stretch !important;
     }
 
-
+    // Align items
 
     .align-items#{$infix}-baseline {
       align-items: baseline !important;
@@ -48,7 +52,7 @@
       align-items: stretch !important;
     }
 
-
+    // Align self
 
     .align-self#{$infix}-auto {
       align-self: auto !important;
@@ -74,7 +78,7 @@
       align-self: stretch !important;
     }
 
-
+    // Flex direction
 
     .flex#{$infix}-column {
       flex-direction: column !important;
@@ -92,7 +96,7 @@
       flex-direction: row-reverse !important;
     }
 
-
+    // Flex wrap
 
     .flex#{$infix}-nowrap {
       flex-wrap: nowrap !important;
@@ -106,7 +110,7 @@
       flex-wrap: wrap-reverse !important;
     }
 
-
+    // Justify content
 
     .justify-content#{$infix}-around {
       justify-content: space-around !important;
@@ -128,7 +132,7 @@
       justify-content: flex-start !important;
     }
 
-
+    // Order
 
     .order#{$infix}-first {
       order: -1;

data/{app/assets → assets}/stylesheets/material/utilities/_float.scss

@@ -3,15 +3,15 @@
     $infix: breakpoint-infix($breakpoint);
 
     .float#{$infix}-left {
-      @include pull-left;
+      @include float-left;
     }
 
     .float#{$infix}-none {
-      float: none !important;
+      @include float-none;
     }
 
     .float#{$infix}-right {
-      @include pull-right;
+      @include float-right;
     }
   }
 }

data/{app/assets → assets}/stylesheets/material/utilities/_position.scss

@@ -1,3 +1,17 @@
+// stylelint-disable declaration-no-important
+
+// Common values
+
+$positions: absolute, fixed, relative, static, sticky;
+
+@each $position in $positions {
+  .position-#{$position} {
+    position: $position !important;
+  }
+}
+
+// Shorthand
+
 .fixed-bottom {
   position: fixed;
   right: 0;

data/{app/assets → assets}/stylesheets/material/utilities/_sizing.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 @each $prop, $prop-abbr in (height: h, width: w) {
   @each $size, $value in $sizes {
     .#{$prop-abbr}-#{$size} {

data/{app/assets → assets}/stylesheets/material/utilities/_spacing.scss

@@ -1,40 +1,11 @@
+// stylelint-disable declaration-no-important
+
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint);
 
-    .m#{$infix}-auto {
-      margin: auto !important;
-    }
-
-    .mt#{$infix}-auto {
-      margin-top: auto !important;
-    }
-
-    .mr#{$infix}-auto {
-      margin-right: auto !important;
-    }
-
-    .mb#{$infix}-auto {
-      margin-bottom: auto !important;
-    }
-
-    .ml#{$infix}-auto {
-      margin-left: auto !important;
-    }
-
-    .mx#{$infix}-auto {
-      margin-right: auto !important;
-      margin-left: auto !important;
-    }
-
-    .my#{$infix}-auto {
-      margin-top: auto !important;
-      margin-bottom: auto !important;
-    }
-
     @each $prop, $prop-abbr in (margin: m, padding: p) {
       @each $size, $value in $spacers {
-
         .#{$prop-abbr}#{$infix}-#{$size} {
           #{$prop}: $value !important;
         }
@@ -66,5 +37,35 @@
         }
       }
     }
+
+    .m#{$infix}-auto {
+      margin: auto !important;
+    }
+
+    .mt#{$infix}-auto {
+      margin-top: auto !important;
+    }
+
+    .mr#{$infix}-auto {
+      margin-right: auto !important;
+    }
+
+    .mb#{$infix}-auto {
+      margin-bottom: auto !important;
+    }
+
+    .ml#{$infix}-auto {
+      margin-left: auto !important;
+    }
+
+    .mx#{$infix}-auto {
+      margin-right: auto !important;
+      margin-left: auto !important;
+    }
+
+    .my#{$infix}-auto {
+      margin-top: auto !important;
+      margin-bottom: auto !important;
+    }
   }
 }

data/{app/assets → assets}/stylesheets/material/utilities/_text.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Alignment
 
 .text-justify {
@@ -12,7 +14,6 @@
   @include text-truncate;
 }
 
-// Responsive alignment
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint);
@@ -31,32 +32,24 @@
   }
 }
 
-
-
 // Color
 
-// Black and white
 @include text-emphasis-variant('.text-black', $black);
 @include text-emphasis-variant('.text-black-primary', $black-primary);
 @include text-emphasis-variant('.text-black-secondary', $black-secondary);
 @include text-emphasis-variant('.text-black-hint', $black-hint);
 @include text-emphasis-variant('.text-black-divider', $black-divider);
-
 @include text-emphasis-variant('.text-white', $white);
 @include text-emphasis-variant('.text-white-primary', $white-primary);
 @include text-emphasis-variant('.text-white-secondary', $white-secondary);
 @include text-emphasis-variant('.text-white-hint', $white-hint);
 @include text-emphasis-variant('.text-white-divider', $white-divider);
-
 @include text-emphasis-variant('.text-muted', $text-muted);
 
-// Palette
 @each $color, $values in $theme-colors {
   @include text-emphasis-variant('.text-#{$color}', map-get(theme-color($color), color), map-get(theme-color($color), darker));
 }
 
-
-
 // Italcs and weight
 
 .font-italic {
@@ -77,16 +70,12 @@
   font-weight: $font-weight-regular;
 }
 
-
-
 // Misc
 
 .text-hide {
   @include text-hide;
 }
 
-
-
 // Transformation
 
 .text-capitalize {

data/{app/assets → assets}/stylesheets/material/utilities/_visibility.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Utilities for common `visibility` values
 
 .invisible {

data/{app/assets → assets}/stylesheets/material/utilities/_waves.scss

@@ -16,10 +16,10 @@
     transform: scale(0) translate(0, 0);
     width: $waves-size;
   }
+}
 
-  &.waves-light .waves-ripple {
-    background-color: $waves-bg-light;
-  }
+.waves-light .waves-ripple {
+  background-color: $waves-bg-light;
 }
 
 .waves-wrap {

data/assets/stylesheets/material/variables/_elevation-shadow.scss

@@ -0,0 +1,69 @@
+// Elevation
+// Based on https://material.google.com/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android-
+
+$elevation-24dp: 24 * 10 !default;
+$elevation-16dp: 16 * 10 !default;
+$elevation-12dp: 12 * 10 !default;
+$elevation-8dp:  8 * 10 !default;
+$elevation-6dp:  6 * 10 !default;
+$elevation-4dp:  4 * 10 !default;
+$elevation-3dp:  3 * 10 !default;
+$elevation-2dp:  2 * 10 !default;
+$elevation-1dp:  1 * 10 !default;
+
+// Shadow
+// Based on https://material.google.com/what-is-material/elevation-shadows.html#elevation-shadows-shadows
+
+$shadow-color-1: rgba(0, 0, 0, 0.14) !default;
+$shadow-color-2: rgba(0, 0, 0, 0.12) !default;
+$shadow-color-3: rgba(0, 0, 0, 0.2) !default;
+
+$shadow-24dp:    0 24px 38px 3px $shadow-color-1, 0 9px 46px 8px $shadow-color-2, 0 11px 15px 0 $shadow-color-3 !default;
+$shadow-16dp:    0 16px 24px 2px $shadow-color-1, 0 6px 30px 5px $shadow-color-2, 0 8px 10px 0 $shadow-color-3 !default;
+$shadow-12dp:    0 12px 17px 2px $shadow-color-1, 0 5px 22px 4px $shadow-color-2, 0 7px 8px 0 $shadow-color-3 !default;
+$shadow-8dp:     0 8px 10px 1px $shadow-color-1, 0 3px 14px 3px $shadow-color-2, 0 4px 15px 0 $shadow-color-3 !default;
+$shadow-6dp:     0 6px 10px 0 $shadow-color-1, 0 1px 18px 0 $shadow-color-2, 0 3px 5px 0 $shadow-color-3 !default;
+$shadow-4dp:     0 2px 4px 0 $shadow-color-1, 0 4px 5px 0 $shadow-color-2, 0 1px 10px 0 $shadow-color-3 !default;
+$shadow-3dp:     0 3px 3px 0 $shadow-color-1, 0 3px 4px 0 $shadow-color-2, 0 1px 8px 0 $shadow-color-3 !default;
+$shadow-2dp:     0 0 4px 0 $shadow-color-1, 0 3px 4px 0 $shadow-color-2, 0 1px 5px 0 $shadow-color-3 !default;
+$shadow-1dp:     0 0 2px 0 $shadow-color-1, 0 2px 2px 0 $shadow-color-2, 0 1px 3px 0 $shadow-color-3 !default;
+
+// Value pair
+// Combination of elevation and shadow
+
+$elevation-shadow-24dp: (
+  elevation: $elevation-24dp,
+  shadow: $shadow-24dp
+) !default;
+$elevation-shadow-16dp: (
+  elevation: $elevation-16dp,
+  shadow: $shadow-16dp
+) !default;
+$elevation-shadow-12dp: (
+  elevation: $elevation-12dp,
+  shadow: $shadow-12dp
+) !default;
+$elevation-shadow-8dp:  (
+  elevation: $elevation-8dp,
+  shadow: $shadow-8dp
+) !default;
+$elevation-shadow-6dp:  (
+  elevation: $elevation-6dp,
+  shadow: $shadow-6dp
+) !default;
+$elevation-shadow-4dp:  (
+  elevation: $elevation-4dp,
+  shadow: $shadow-4dp
+) !default;
+$elevation-shadow-3dp:  (
+  elevation: $elevation-3dp,
+  shadow: $shadow-3dp
+) !default;
+$elevation-shadow-2dp:  (
+  elevation: $elevation-2dp,
+  shadow: $shadow-2dp
+) !default;
+$elevation-shadow-1dp:  (
+  elevation: $elevation-1dp,
+  shadow: $shadow-1dp
+) !default;