material-sass 4.0.0 → 4.1.0

data/assets/javascripts/material/components/util.js

@@ -1,9 +1,10 @@
 /*
  * Global util js
- * Based on Bootstrap's (v4.0.0) `util.js`
+ * Based on Bootstrap's (v4.1.0) `util.js`
  */
 var Util = function ($) {
   var MAX_UID = 1000000;
+  var MILLISECONDS_MULTIPLIER = 1000;
   var transition = false;
 
   function getSpecialTransitionEndEvent() {
@@ -74,6 +75,20 @@ var Util = function ($) {
         return null;
       }
     },
+    getTransitionDurationFromElement: function getTransitionDurationFromElement(element) {
+      if (!element) {
+        return 0;
+      }
+
+      var transitionDuration = $(element).css('transition-duration');
+
+      if (!transitionDuration) {
+        return 0;
+      }
+
+      transitionDuration = transitionDuration.split(',')[0];
+      return parseFloat(transitionDuration) * MILLISECONDS_MULTIPLIER;
+    },
     getUID: function getUID(prefix) {
       do {
         // eslint-disable-next-line no-bitwise

data/assets/stylesheets/material/_colors.scss

@@ -274,6 +274,7 @@ $material-color-yellow-a200:      #ffff00 !default;
 $material-color-yellow-a400:      #ffea00 !default;
 $material-color-yellow-a700:      #ffd600 !default;
 
+// stylelint-disable scss/dollar-variable-default
 $ambers: () !default;
 $ambers: map-merge(
   (
@@ -686,6 +687,7 @@ $colors: map-merge(
   ),
   $colors
 );
+// stylelint-enable
 
 // Black and white
 // Based on https://material.google.com/style/color.html#color-text-background-colors

data/assets/stylesheets/material/_functions.scss

@@ -69,3 +69,9 @@
 @function theme-color-light($key: primary) {
   @return map-get(map-get($theme-colors, $key), light);
 }
+
+// Strip unit
+
+@function strip-unit($val) {
+  @return $val / ($val * 0 + 1);
+}

data/assets/stylesheets/material/_mixins.scss

@@ -6,7 +6,6 @@
 @import 'mixins/form';
 @import 'mixins/grid';
 @import 'mixins/grid-framework';
-@import 'mixins/hex-to-rgba';
 @import 'mixins/hover';
 @import 'mixins/image';
 @import 'mixins/list';
@@ -14,7 +13,6 @@
 @import 'mixins/nav-divider';
 @import 'mixins/reset-text';
 @import 'mixins/screenreader';
-@import 'mixins/strip-unit';
 @import 'mixins/text-alignment';
 @import 'mixins/text-emphasis';
 @import 'mixins/text-hide';

data/assets/stylesheets/material/_print.scss

@@ -1,4 +1,4 @@
-// stylelint-disable declaration-no-important, selector-no-qualifying-type
+// stylelint-disable declaration-no-important
 
 @if $enable-print-styles {
   @media print {
@@ -17,6 +17,7 @@
       text-decoration: underline;
     }
 
+    // stylelint-disable-next-line selector-no-qualifying-type
     abbr[title]::after {
       content: ' (" attr(title) ") ';
     }
@@ -106,8 +107,32 @@
       border: $border-width solid $border-color-solid;
     }
 
+    .table {
+      td,
+      th {
+        background-color: $white !important;
+      }
+    }
+
     .table-bordered {
       border: $border-width solid $border-color-solid;
     }
+
+    .table-dark {
+      color: inherit;
+
+      td,
+      th,
+      .table {
+        border-color: $border-color-solid;
+      }
+    }
+
+    .table .thead-dark {
+      td,
+      th {
+        color: inherit;
+      }
+    }
   }
 }

data/assets/stylesheets/material/_utilities.scss

@@ -9,6 +9,7 @@
 @import 'utilities/float';
 @import 'utilities/position';
 @import 'utilities/screenreader';
+@import 'utilities/shadows';
 @import 'utilities/sizing';
 @import 'utilities/spacing';
 @import 'utilities/text';

data/assets/stylesheets/material/base/_base.scss

@@ -22,7 +22,7 @@
   --font-family-serif: #{inspect($font-family-serif)};
 }
 
-// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
+// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
 
 // Box sizing
 
@@ -33,6 +33,7 @@
 }
 
 @at-root {
+  // stylelint-disable-next-line at-rule-no-vendor-prefix
   @-ms-viewport {
     width: device-width;
   }
@@ -61,6 +62,8 @@ body {
   color: $body-color;
   font-family: $font-family-base;
   font-size: $font-size-base;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
   font-weight: $font-weight-base;
   line-height: $line-height-base;
   margin: 0;
@@ -307,7 +310,7 @@ table {
 }
 
 th {
-  text-align: inherit;
+  @include text-align(left);
 }
 
 // Typography

data/assets/stylesheets/material/bootstrap/_breadcrumb.scss

@@ -32,13 +32,16 @@
     text-decoration: none;
   }
 
-  + .breadcrumb-item::before {
-    @include set-material-icons;
-
-    color: $breadcrumb-item-color;
-    content: $breadcrumb-item-icon;
-    display: inline-block;
-    margin-right: $breadcrumb-inner-spacer-x;
+  + .breadcrumb-item {
     margin-left: $breadcrumb-inner-spacer-x;
+
+    &::before {
+      @include set-material-icons;
+
+      color: $breadcrumb-item-color;
+      content: $breadcrumb-item-icon;
+      display: inline-block;
+      margin-right: $breadcrumb-inner-spacer-x;
+    }
   }
 }

data/assets/stylesheets/material/bootstrap/_popover.scss

@@ -6,7 +6,6 @@
   @include reset-text;
   @include border-radius($popover-border-radius);
 
-  background-clip: padding-box;
   background-color: $popover-bg;
   box-shadow: map-get($popover-elevation-shadow, shadow);
   display: block;
@@ -44,7 +43,7 @@
 
 // Desktop
 
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up($popover-breakpoint) {
   .popover {
     margin: $popover-margin-desktop;
   }

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

@@ -1,5 +1,3 @@
-// stylelint-disable selector-no-qualifying-type
-
 .collapse {
   display: none;
 
@@ -8,16 +6,14 @@
   }
 }
 
-tbody {
-  &.collapse.show {
-    display: table-row-group;
-  }
+// stylelint-disable-next-line selector-no-qualifying-type
+tbody.collapse.show {
+  display: table-row-group;
 }
 
-tr {
-  &.collapse.show {
-    display: table-row;
-  }
+// stylelint-disable-next-line selector-no-qualifying-type
+tr.collapse.show {
+  display: table-row;
 }
 
 .collapsing {

data/assets/stylesheets/material/material.scss

@@ -47,6 +47,8 @@
 @import 'material/progress';
 @import 'material/progress-circular';
 @import 'material/selection-control';
+@import 'material/slider';
+@import 'material/snackbar';
 @import 'material/stepper';
 @import 'material/tab';
 @import 'material/text-field';

data/assets/stylesheets/material/material/_card.scss

@@ -1,7 +1,6 @@
 .card {
   @include border-radius($card-border-radius);
 
-  background-clip: border-box;
   background-color: $card-bg;
   box-shadow: map-get($card-elevation-shadow, shadow);
   display: flex;
@@ -12,12 +11,12 @@
 
   @each $color, $values in $theme-colors {
     &.border-#{$color} {
-      box-shadow: map-get($card-elevation-shadow, shadow), inset 0 0 0 1px theme-color($color);
+      box-shadow: map-get($card-elevation-shadow, shadow), inset 0 0 0 $card-border-width theme-color($color);
 
       &[href],
       &[tabindex] {
         @include active-focus-hover {
-          box-shadow: map-get($card-elevation-shadow-hover, shadow), inset 0 0 0 1px theme-color($color);
+          box-shadow: map-get($card-elevation-shadow-hover, shadow), inset 0 0 0 $card-border-width theme-color($color);
         }
       }
     }
@@ -36,6 +35,47 @@
   }
 }
 
+// Accordion
+
+.accordion {
+  .card:first-of-type {
+    @include border-bottom-radius(0);
+  }
+
+  .card:last-of-type {
+    @include border-top-radius(0);
+  }
+
+  .card:not(:first-of-type):not(:last-of-type) {
+    border-radius: 0;
+  }
+
+  .card:not(:first-of-type) {
+    .card-body:first-child,
+    .card-footer:first-child,
+    .card-header:first-child {
+      @include border-top-radius(0);
+    }
+  }
+
+  .card:not(:last-of-type) {
+    .card-body:last-child,
+    .card-footer:last-child,
+    .card-header:last-child {
+      @include border-bottom-radius(0);
+    }
+  }
+
+  .collapse,
+  .collapsing {
+    .card-body:first-child,
+    .card-footer:first-child,
+    .card-header:first-child {
+      @include border-top-radius(0);
+    }
+  }
+}
+
 // Action
 
 .card-actions {
@@ -61,20 +101,17 @@
     padding-right: $card-action-inner-spacer-x;
     padding-left: $card-action-inner-spacer-x;
   }
+
+  .dropdown-toggle::after {
+    margin-right: 0;
+  }
 }
 
 // Body
 
 .card-body {
   flex: 1 1 auto;
-  padding: $card-inner-spacer-y $card-padding-x;
-
-  &:first-child,
-  .card-header[class*='border-'] + &,
-  .card-img-top + &,
-  .list-group + & {
-    padding-top: $card-padding-y;
-  }
+  padding: $card-padding-y $card-padding-x;
 
   &:first-child {
     @include border-top-radius($card-border-radius);
@@ -82,34 +119,18 @@
 
   &:last-child {
     @include border-bottom-radius($card-border-radius);
-
-    padding-bottom: $card-padding-y;
-  }
-
-  .card-header:not([class*='border-']) + & {
-    padding-top: 0;
   }
 
   > :last-child {
     margin-bottom: 0;
   }
-
-  + .card-img-bottom,
-  + .list-group {
-    margin-top: ($card-padding-y - $card-inner-spacer-y);
-  }
 }
 
 // Footer
 
 .card-footer {
-  padding: $card-inner-spacer-y $card-padding-x;
-
-  @each $color, $values in $theme-colors {
-    &.border-#{$color} {
-      border-top: $card-border-width solid theme-color($color);
-    }
-  }
+  border-top: $card-border-width solid $card-border-color;
+  padding: $card-padding-y $card-padding-x;
 
   &:first-child {
     @include border-top-radius($card-border-radius);
@@ -121,23 +142,6 @@
     @include border-bottom-radius($card-border-radius);
   }
 
-  .card-body + &,
-  .card-header + & {
-    &[class*='border-'] {
-      margin-top: ($card-padding-y - $card-inner-spacer-y);
-    }
-
-    &:not[class*='border-'] {
-      padding-top: 0;
-    }
-  }
-
-  .card-header[class*='border-'] + & {
-    &[class*='border-'] {
-      margin-top: ($card-border-width * -1);
-    }
-  }
-
   > :last-child {
     margin-bottom: 0;
   }
@@ -146,25 +150,9 @@
 // Header
 
 .card-header {
+  border-bottom: $card-border-width solid $card-border-color;
   margin-bottom: 0;
-  padding: $card-inner-spacer-y $card-padding-x;
-
-  @each $color, $values in $theme-colors {
-    &.border-#{$color} {
-      border-bottom: $card-border-width solid theme-color($color);
-    }
-  }
-
-  &[class*='border-'] {
-    padding-top: $card-padding-y;
-    padding-bottom: $card-padding-y;
-  }
-
-  &:first-child,
-  .card-img-top + &,
-  .list-group + & {
-    padding-top: $card-padding-y;
-  }
+  padding: $card-padding-y $card-padding-x;
 
   &:first-child {
     @include border-top-radius($card-border-radius);
@@ -174,32 +162,17 @@
     @include border-bottom-radius($card-border-radius);
 
     border-bottom: 0;
-    padding-bottom: $card-padding-y;
   }
 
-  &:not([class*='border-']) {
-    + .card-img-bottom,
-    + .list-group {
-      margin-top: ($card-padding-y - $card-inner-spacer-y);
-    }
+  + .list-group .list-group-item:first-child {
+    border-top: 0;
   }
 }
 
 .card-header-pills {
-  margin: ($card-inner-spacer-y * -1) ($card-inner-spacer-x * -1) 0;
+  margin: ($card-padding-y * -1) ($card-padding-x * -1);
   padding: $card-action-padding-y ($card-action-padding-x - $card-action-inner-spacer-x) ($card-action-padding-y - $card-action-inner-spacer-y) $card-action-padding-x;
 
-  .card-header:first-child &,
-  .card-header[class*='border-'] &,
-  .card-img-top + .card-header & {
-    margin-top: ($card-padding-y * -1);
-  }
-
-  .card-header:last-child &,
-  .card-header[class*='border-'] & {
-    margin-bottom: ($card-padding-y * -1);
-  }
-
   .nav-link {
     margin-right: $card-action-inner-spacer-x;
     margin-bottom: $card-action-inner-spacer-y;
@@ -209,19 +182,7 @@
 }
 
 .card-header-tabs {
-  margin: ($card-inner-spacer-y * -1) ($card-inner-spacer-x * -1) ($card-padding-y - $card-inner-spacer-y);
-
-  .card-header:first-child &,
-  .card-header[class*='border-'] &,
-  .card-img-top + .card-header &,
-  .list-group + .card-header & {
-    margin-top: ($card-padding-y * -1);
-  }
-
-  .card-header[class*='border-'] &,
-  .card-header:last-child & {
-    margin-bottom: ($card-padding-y * -1);
-  }
+  margin: ($card-padding-y * -1) ($card-padding-x * -1) calc(#{$card-padding-y * -1} - #{$card-border-width});
 }
 
 // Image
@@ -256,6 +217,8 @@
   column-gap: $card-margin-x;
   margin-top: ($card-margin-y / -2);
   margin-bottom: ($card-margin-y / 2);
+  orphans: 1;
+  widows: 1;
 
   @include media-breakpoint-up(md) {
     column-count: $card-columns-count-desktop;
@@ -295,7 +258,6 @@
   }
 
   .card {
-    box-shadow: $shadow-1dp;
     margin-bottom: $card-margin-y;
 
     @include media-breakpoint-up(sm) {