material-sass 4.0.0 → 4.1.0

data/assets/stylesheets/material/material/_text-field.scss

@@ -121,25 +121,19 @@
 }
 
 // stylelint-disable selector-no-qualifying-type
-select {
-  &.form-control {
-    &[multiple],
-    &[size] {
-      @extend %form-textarea;
-    }
+select.form-control {
+  &[multiple],
+  &[size] {
+    @extend %form-textarea;
+  }
 
-    &:not([multiple]):not([size]) {
-      @extend %form-select;
-    }
+  &:not([multiple]):not([size]) {
+    @extend %form-select;
   }
 }
-// stylelint-enable
 
-// stylelint-disable selector-no-qualifying-type
-textarea {
-  &.form-control:not(.textarea-autosize) {
-    @extend %form-textarea;
-  }
+textarea.form-control:not(.textarea-autosize) {
+  @extend %form-textarea;
 }
 // stylelint-enable
 
@@ -149,6 +143,7 @@ textarea {
   @include form-control-size($textfield-font-size, $textfield-height, $textfield-line-height, $textfield-padding-x, $textfield-padding-y);
 
   border-color: transparent;
+  color: $textfield-plaintext-color;
   display: block;
   width: 100%;
 

data/assets/stylesheets/material/material/_toolbar.scss

@@ -8,21 +8,6 @@
   padding: $toolbar-padding-y $toolbar-padding-x;
   position: relative;
 
-  // Horizontally align `.dropdown-menu-right` in `.navbar`
-
-  .dropdown-menu-right {
-    right: 0;
-    left: auto;
-
-    &.menu::before {
-      transform-origin: 100% ($menu-link-height / 2 + $menu-padding-y);
-    }
-
-    &::before {
-      transform-origin: 100% 0;
-    }
-  }
-
   // Vertically align some elements normally placed in `.navbar`
 
   .form-control {
@@ -389,7 +374,6 @@
   @include set-material-icons;
 
   display: block;
-  margin: auto;
 
   &::before {
     content: $toolbar-toggler-icon;

data/assets/stylesheets/material/material/_tooltip.scss

@@ -10,7 +10,7 @@
   word-break: break-word;
   z-index: $tooltip-zindex;
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up($tooltip-breakpoint) {
     font-size: $tooltip-font-size-desktop;
     margin: $tooltip-margin-desktop;
   }
@@ -34,7 +34,7 @@
   text-align: center;
   transform: scale($tooltip-scale);
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up($tooltip-breakpoint) {
     padding: $tooltip-padding-y-desktop $tooltip-padding-x-desktop;
   }
 }

data/assets/stylesheets/material/mixins/_form.scss

@@ -137,7 +137,8 @@
   }
 
   .custom-select,
-  .form-control {
+  .form-control,
+  .form-control-file {
     &.is-#{$state},
     .was-validated &:#{$state} {
       border-color: $color;

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

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

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

@@ -1,7 +1,6 @@
 @mixin sr-only {
   border: 0;
   clip: rect(0, 0, 0, 0);
-  clip-path: inset(50%);
   height: 1px;
   overflow: hidden;
   padding: 0;
@@ -14,7 +13,6 @@
   &:active,
   &:focus {
     clip: auto;
-    clip-path: none;
     height: auto;
     overflow: visible;
     position: static;

data/assets/stylesheets/material/mixins/_text-hide.scss

@@ -4,4 +4,6 @@
   color: transparent;
   font: 0/0 a; // stylelint-disable-line font-family-no-missing-generic-family-keyword
   text-shadow: none;
+
+  @warn 'The `text-hide()` mixin has been deprecated as of v4.1.0. It will be removed entirely in v5.';
 }

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

@@ -12,6 +12,10 @@
   @include media-breakpoint-up(lg) {
     transition-duration: $transition-duration-desktop-leaving;
   }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 
 // Deceleration curve: entering the screen
@@ -28,6 +32,10 @@
   @include media-breakpoint-up(lg) {
     transition-duration: $transition-duration-desktop-entering;
   }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 
 // Sharp curve: temporarily leaving the screen
@@ -44,6 +52,10 @@
   @include media-breakpoint-up(lg) {
     transition-duration: $transition-duration-desktop-leaving;
   }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 
 // Standard curve: relative movement
@@ -60,6 +72,10 @@
   @include media-breakpoint-up(lg) {
     transition-duration: $transition-duration-desktop;
   }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 
 // Standard curve: relative movement - complex, full-screen, large transitions
@@ -76,4 +92,8 @@
   @include media-breakpoint-up(lg) {
     transition-duration: $transition-duration-desktop-complex;
   }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }

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

@@ -17,3 +17,8 @@
 @each $color, $values in $theme-colors {
   @include bg-variant('.bg-#{$color}', theme-color($color), theme-color-dark($color));
 }
+
+@include bg-variant('.bg-primary-dark', theme-color-dark(primary));
+@include bg-variant('.bg-primary-light', theme-color-light(primary));
+@include bg-variant('.bg-secondary-dark', theme-color-dark(secondary));
+@include bg-variant('.bg-secondary-light', theme-color-light(secondary));

data/assets/stylesheets/material/utilities/_flex.scss

@@ -96,16 +96,32 @@
       flex-direction: row-reverse !important;
     }
 
-    // Flex wrap
+    // Flex
 
     .flex#{$infix}-fill {
       flex: 1 1 auto !important;
     }
 
+    .flex#{$infix}-grow-0 {
+      flex-grow: 0 !important;
+    }
+
+    .flex#{$infix}-grow-1 {
+      flex-grow: 1 !important;
+    }
+
     .flex#{$infix}-nowrap {
       flex-wrap: nowrap !important;
     }
 
+    .flex#{$infix}-shrink-0 {
+      flex-shrink: 0 !important;
+    }
+
+    .flex#{$infix}-shrink-1 {
+      flex-shrink: 1 !important;
+    }
+
     .flex#{$infix}-wrap {
       flex-wrap: wrap !important;
     }

data/assets/stylesheets/material/utilities/_position.scss

@@ -2,6 +2,7 @@
 
 // Common values
 
+// stylelint-disable-next-line scss/dollar-variable-default
 $positions: absolute, fixed, relative, static, sticky;
 
 @each $position in $positions {

data/assets/stylesheets/material/utilities/_shadows.scss

@@ -0,0 +1,23 @@
+// stylelint-disable declaration-no-important
+
+.shadow {
+  box-shadow: map-get($shadows, 8) !important;
+}
+
+.shadow-lg {
+  box-shadow: map-get($shadows, 24) !important;
+}
+
+.shadow-none {
+  box-shadow: none !important;
+}
+
+.shadow-sm {
+  box-shadow: map-get($shadows, 2) !important;
+}
+
+@each $shadow, $value in $shadows {
+  .shadow-#{$shadow} {
+    box-shadow: $value !important;
+  }
+}

data/assets/stylesheets/material/utilities/_text.scss

@@ -50,6 +50,24 @@
   @include text-emphasis-variant('.text-#{$color}', theme-color($color), theme-color-dark($color));
 }
 
+.text-black-50 {
+  color: rgba($black, 0.5) !important;
+}
+
+.text-body {
+  color: $body-color !important;
+}
+
+.text-white-50 {
+  color: rgba($white, 0.5) !important;
+}
+
+// Family
+
+.text-monospace {
+  font-family: $font-family-monospace;
+}
+
 // Italcs and weight
 
 .font-italic {

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

@@ -1,14 +1,16 @@
 // 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-2dp:  2 * 10 !default;
-$elevation-1dp:  1 * 10 !default;
+$elevations: (
+  24: (24 * 10),
+  16: (16 * 10),
+  12: (12 * 10),
+  8:  (8 * 10),
+  6:  (6 * 10),
+  4:  (4 * 10),
+  2:  (2 * 10),
+  1:  (1 * 10)
+) !default;
 
 // Shadow
 // Based on https://material.google.com/what-is-material/elevation-shadows.html#elevation-shadows-shadows
@@ -17,47 +19,51 @@ $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-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;
+$shadows: (
+  24: unquote('0 24px 38px 3px #{$shadow-color-1}, 0 9px 46px 8px #{$shadow-color-2}, 0 11px 15px 0 #{$shadow-color-3}'),
+  16: unquote('0 16px 24px 2px #{$shadow-color-1}, 0 6px 30px 5px #{$shadow-color-2}, 0 8px 10px 0 #{$shadow-color-3}'),
+  12: unquote('0 12px 17px 2px #{$shadow-color-1}, 0 5px 22px 4px #{$shadow-color-2}, 0 7px 8px 0 #{$shadow-color-3}'),
+  8:  unquote('0 8px 10px 1px #{$shadow-color-1}, 0 3px 14px 3px #{$shadow-color-2}, 0 4px 15px 0 #{$shadow-color-3}'),
+  6:  unquote('0 6px 10px 0 #{$shadow-color-1}, 0 1px 18px 0 #{$shadow-color-2}, 0 3px 5px 0 #{$shadow-color-3}'),
+  4:  unquote('0 2px 4px 0 #{$shadow-color-1}, 0 4px 5px 0 #{$shadow-color-2}, 0 1px 10px 0 #{$shadow-color-3}'),
+  2:  unquote('0 0 4px 0 #{$shadow-color-1}, 0 3px 4px 0 #{$shadow-color-2}, 0 1px 5px 0 #{$shadow-color-3}'),
+  1:  unquote('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-2dp:  (
-  elevation: $elevation-2dp,
-  shadow: $shadow-2dp
-) !default;
-$elevation-shadow-1dp:  (
-  elevation: $elevation-1dp,
-  shadow: $shadow-1dp
+$elevation-shadows: (
+  24: (
+    elevation: map-get($elevations, 24),
+    shadow: map-get($shadows, 4)
+  ),
+  16: (
+    elevation: map-get($elevations, 16),
+    shadow: map-get($shadows, 6)
+  ),
+  12: (
+    elevation: map-get($elevations, 12),
+    shadow: map-get($shadows, 2)
+  ),
+  8:  (
+    elevation: map-get($elevations, 8),
+    shadow: map-get($shadows, 8)
+  ),
+  6:  (
+    elevation: map-get($elevations, 6),
+    shadow: map-get($shadows, 6)
+  ),
+  4:  (
+    elevation: map-get($elevations, 4),
+    shadow: map-get($shadows, 4)
+  ),
+  2:  (
+    elevation: map-get($elevations, 2),
+    shadow: map-get($shadows, 2)
+  ),
+  1:  (
+    elevation: map-get($elevations, 1),
+    shadow: map-get($shadows, 1)
+  )
 ) !default;

data/assets/stylesheets/material/variables/_palette.scss

@@ -50,16 +50,17 @@ $light: (
 ) !default;
 
 $theme-colors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
 $theme-colors: map-merge(
   (
-    'primary':   $primary,
-    'secondary': $secondary,
-    'danger':    $danger,
-    'info':      $info,
-    'success':   $success,
-    'warning':   $warning,
-    'dark':      $dark,
-    'light':     $light
+    primary:   $primary,
+    secondary: $secondary,
+    danger:    $danger,
+    info:      $info,
+    success:   $success,
+    warning:   $warning,
+    dark:      $dark,
+    light:     $light
   ),
   $theme-colors
 );

data/assets/stylesheets/material/variables/_spacer.scss

@@ -4,6 +4,7 @@ $border-radius:      2px !default;
 $border-width:       1px !default;
 
 $sizes: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
 $sizes: map-merge(
   (
     25: 25%,
@@ -23,6 +24,7 @@ $spacer-lg:   ($spacer * 1.5) !default;
 $spacer-xl:   ($spacer * 3) !default;
 
 $spacers: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
 $spacers: map-merge(
   (
     0: 0,