material-sass 4.0.0 → 4.1.0

data/assets/stylesheets/material/material/_chip.scss

@@ -26,6 +26,7 @@
     line-height: inherit;
     margin-right: ($chip-inner-spacer-x - $chip-padding-x);
     margin-left: $chip-inner-spacer-x;
+    min-height: $material-icon-size;
     min-width: $material-icon-size;
     order: 1;
   }

data/assets/stylesheets/material/material/_data-table.scss

@@ -61,6 +61,54 @@
     }
   }
 
+  .card > & {
+    &:first-child {
+      &,
+      > :first-child,
+      > :first-child > tr:first-child {
+        @include border-top-radius($card-border-radius);
+      }
+
+      > :first-child > tr:first-child {
+        // stylelint-disable selector-max-compound-selectors
+        td,
+        th {
+          &:first-child {
+            border-top-left-radius: $card-border-radius;
+          }
+
+          &:last-child {
+            border-top-right-radius: $card-border-radius;
+          }
+        }
+        // stylelint-enable
+      }
+    }
+
+    &:last-child {
+      &,
+      > :last-child,
+      > :last-child > tr:last-child {
+        @include border-bottom-radius($card-border-radius);
+      }
+
+      > :last-child > tr:last-child {
+        // stylelint-disable selector-max-compound-selectors
+        td,
+        th {
+          &:first-child {
+            border-bottom-left-radius: $card-border-radius;
+          }
+
+          &:last-child {
+            border-bottom-right-radius: $card-border-radius;
+          }
+        }
+        // stylelint-enable
+      }
+    }
+  }
+
   .table {
     border-top: $table-border-width solid $table-border-color;
   }
@@ -82,7 +130,11 @@
 }
 
 .table-bordered {
-  box-shadow: map-get($table-elevation-shadow, shadow);
+  border: $table-border-width solid $table-border-color;
+
+  .card > & {
+    border: 0;
+  }
 }
 
 .table-sm {
@@ -210,6 +262,10 @@
   background-color: $table-dark-bg;
   color: $table-dark-color;
 
+  &.table-bordered {
+    border-color: $table-dark-border-color;
+  }
+
   &.table-striped {
     tbody tr:nth-of-type(odd) {
       background-color: $table-dark-bg-accent;

data/assets/stylesheets/material/material/_dialog.scss

@@ -15,7 +15,7 @@
     .modal-dialog {
       @include transition-standard-complex(transform);
 
-      transform: scale($dialog-scale);
+      transform: scale($dialog-transition-scale);
     }
   }
 
@@ -50,7 +50,6 @@
 .modal-content {
   @include border-radius($dialog-border-radius);
 
-  background-clip: padding-box;
   background-color: $dialog-content-bg;
   box-shadow: map-get($dialog-elevation-shadow, shadow);
   display: flex;
@@ -59,6 +58,7 @@
   pointer-events: auto;
   position: relative;
   vertical-align: baseline;
+  width: 100%;
 }
 
 .modal-dialog {

data/assets/stylesheets/material/material/_expansion-panel.scss

@@ -121,6 +121,10 @@
     + .expansion-panel {
       @include border-top-radius($expansion-panel-border-radius);
 
+      &.show {
+        margin-top: 0;
+      }
+
       .card & {
         @include border-top-radius(0);
       }

data/assets/stylesheets/material/material/_menu.scss

@@ -21,6 +21,8 @@
   min-width: $menu-min-width;
   padding: $menu-padding-y 0;
   position: absolute;
+  top: 100%;
+  left: 0;
   z-index: map-get($menu-elevation-shadow, elevation);
 
   &.show {
@@ -38,6 +40,10 @@
       @include media-breakpoint-up(lg) {
         animation-duration: $transition-duration-desktop;
       }
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
     }
 
     &::before {
@@ -64,7 +70,6 @@
   &::before {
     @include border-radius($menu-border-radius);
 
-    background-clip: padding-box;
     background-color: $menu-bg;
     box-shadow: map-get($menu-elevation-shadow, shadow);
     content: '';
@@ -84,7 +89,7 @@
 }
 
 .menu {
-  margin-top: (($menu-link-height - ($menu-link-height - $menu-line-height) / 2) * -1 + $menu-padding-y * -1);
+  margin-top: (($btn-height + $menu-padding-y) * -1 + ($menu-link-height - $btn-height) / -2);
 
   &::before {
     transform-origin: 0 ($menu-link-height / 2 + $menu-padding-y);
@@ -95,6 +100,163 @@
   outline: 0;
 }
 
+.dropdown-menu-right:not([x-placement]) {
+  right: 0;
+  left: auto;
+
+  &.menu::before {
+    transform-origin: 100% ($menu-link-height / 2 + $menu-padding-y);
+  }
+
+  &::before {
+    transform-origin: 100% 0;
+  }
+}
+
+.dropleft {
+  .dropdown-menu:not([x-placement]) {
+    top: 0;
+    right: 100%;
+    left: auto;
+
+    &.menu {
+      margin-top: 0;
+    }
+
+    &::before {
+      transform-origin: 100% 0;
+    }
+  }
+}
+
+.dropright {
+  .dropdown-menu:not([x-placement]) {
+    top: 0;
+    left: 100%;
+
+    &.menu {
+      margin-top: 0;
+    }
+
+    &::before {
+      transform-origin: 0 0;
+    }
+  }
+}
+
+.dropup {
+  .dropdown-menu:not([x-placement]) {
+    top: auto;
+    bottom: 100%;
+
+    &.menu {
+      margin-top: 0;
+      margin-bottom: (($btn-height + $menu-padding-y) * -1 + ($menu-link-height - $btn-height) / -2);
+
+      &::before {
+        transform-origin: 0 calc(100% - #{$menu-link-height / 2 + $menu-padding-y});
+      }
+    }
+
+    &::before {
+      transform-origin: 0 100%;
+    }
+
+    > :nth-child(1),
+    > :nth-child(2),
+    > :nth-child(3) {
+      animation-name: dropdown-item-show;
+    }
+
+    > :nth-last-child(1) {
+      animation-name: dropdown-item-show-1;
+    }
+
+    > :nth-last-child(2) {
+      animation-name: dropdown-item-show-2;
+    }
+
+    > :nth-last-child(3) {
+      animation-name: dropdown-item-show-3;
+    }
+  }
+
+  .dropdown-menu-right:not([x-placement]) {
+    &.menu::before {
+      transform-origin: 100% calc(100% - #{$menu-link-height / 2 + $menu-padding-y});
+    }
+
+    &::before {
+      transform-origin: 100% 100%;
+    }
+  }
+}
+
+.dropdown-menu[x-placement='bottom-end']::before,
+.dropdown-menu[x-placement='left-start']::before {
+  transform-origin: 100% 0;
+}
+
+.dropdown-menu[x-placement='top-end'].show,
+.dropdown-menu[x-placement='top-start'].show {
+  > :nth-child(1),
+  > :nth-child(2),
+  > :nth-child(3) {
+    animation-name: dropdown-item-show;
+  }
+
+  > :nth-last-child(1) {
+    animation-name: dropdown-item-show-1;
+  }
+
+  > :nth-last-child(2) {
+    animation-name: dropdown-item-show-2;
+  }
+
+  > :nth-last-child(3) {
+    animation-name: dropdown-item-show-3;
+  }
+}
+
+.dropdown-menu[x-placement='top-end']::before {
+  transform-origin: 100% 100%;
+}
+
+.dropdown-menu[x-placement='top-start']::before {
+  transform-origin: 0 100%;
+}
+
+.menu[x-placement='bottom-end']::before {
+  transform-origin: 100% ($menu-link-height / 2 + $menu-padding-y);
+}
+
+.menu[x-placement='left-start'],
+.menu[x-placement='right-start'] {
+  margin-top: 0;
+}
+
+.menu[x-placement='left-start']::before {
+  transform-origin: 100% 0;
+}
+
+.menu[x-placement='right-start']::before {
+  transform-origin: 0 0;
+}
+
+.menu[x-placement='top-end'],
+.menu[x-placement='top-start'] {
+  margin-top: 0;
+  margin-bottom: (($btn-height + $menu-padding-y) * -1 + ($menu-link-height - $btn-height) / -2);
+}
+
+.menu[x-placement='top-end']::before {
+  transform-origin: 100% calc(100% - #{$menu-link-height / 2 + $menu-padding-y});
+}
+
+.menu[x-placement='top-start']::before {
+  transform-origin: 0 calc(100% - #{$menu-link-height / 2 + $menu-padding-y});
+}
+
 @keyframes dropdown-item-show {
   0% {
     opacity: 0;
@@ -187,58 +349,6 @@
   }
 }
 
-.dropdown-menu[x-placement='bottom-end']::before,
-.dropdown-menu[x-placement='left-start']::before {
-  transform-origin: 100% 0;
-}
-
-.dropdown-menu[x-placement='top-end'].show,
-.dropdown-menu[x-placement='top-start'].show {
-  > :nth-child(1),
-  > :nth-child(2),
-  > :nth-child(3) {
-    animation-name: dropdown-item-show;
-  }
-
-  > :nth-last-child(1) {
-    animation-name: dropdown-item-show-1;
-  }
-
-  > :nth-last-child(2) {
-    animation-name: dropdown-item-show-2;
-  }
-
-  > :nth-last-child(3) {
-    animation-name: dropdown-item-show-3;
-  }
-}
-
-.dropdown-menu[x-placement='top-end']::before {
-  transform-origin: 100% 100%;
-}
-
-.dropdown-menu[x-placement='top-start']::before {
-  transform-origin: 0 100%;
-}
-
-.menu[x-placement='bottom-end']::before {
-  transform-origin: 100% ($menu-link-height / 2 + $menu-padding-y);
-}
-
-.menu[x-placement='top-end'],
-.menu[x-placement='top-start'] {
-  margin-top: 0;
-  margin-bottom: (($menu-link-height - ($menu-link-height - $menu-line-height) / 2) * -1 + $menu-padding-y * -1);
-}
-
-.menu[x-placement='top-end']::before {
-  transform-origin: 100% calc(100% - #{$menu-link-height / 2 + $menu-padding-y});
-}
-
-.menu[x-placement='top-start']::before {
-  transform-origin: 0 calc(100% - #{$menu-link-height / 2 + $menu-padding-y});
-}
-
 // Cascading menu for desktop
 
 .dropdown-menu-sm,

data/assets/stylesheets/material/material/_navdrawer.scss

@@ -168,14 +168,17 @@
   @include media-breakpoint-up($next) {
     .navdrawer-backdrop-permanent#{$infix} {
       display: none;
+      transition: none;
     }
 
     .navdrawer-backdrop-persistent#{$infix} {
       display: none;
+      transition: none;
     }
 
     .navdrawer-backdrop-temporary#{$infix} {
       display: none;
+      transition: none;
     }
 
     .navdrawer-permanent#{$infix} {
@@ -183,16 +186,11 @@
       display: block !important; // stylelint-disable-line declaration-no-important
       right: auto;
       width: $navdrawer-width;
+      z-index: auto;
 
       &.navdrawer-permanent-clipped,
       &.navdrawer-permanent-float {
         top: $toolbar-height;
-        z-index: (map-get($toolbar-elevation-shadow, elevation) - 1);
-      }
-
-      &.navdrawer-permanent-clipped {
-        border-top: $navdrawer-border-width solid $navdrawer-border-color;
-        margin-top: ($navdrawer-border-width * -1);
       }
 
       &.navdrawer-permanent-float {
@@ -229,6 +227,7 @@
     .navdrawer-persistent#{$infix} {
       right: auto;
       width: $navdrawer-width;
+      z-index: auto;
 
       &.navdrawer-persistent-clipped {
         border-top: $navdrawer-border-width solid $navdrawer-border-color;

data/assets/stylesheets/material/material/_picker.scss

@@ -1,110 +1,88 @@
 .picker {
-  position: absolute;
-  user-select: none;
-  z-index: map-get($picker-elevation-shadow, elevation);
-}
-
-.picker-box {
-  @include border-bottom-radius($picker-border-radius);
-
-  background-color: $picker-content-bg;
-  overflow: hidden;
-}
-
-.picker-frame {
-  @include transition-standard-complex(opacity);
-
-  background-color: $picker-holder-bg;
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  text-align: center;
-  vertical-align: middle;
-  white-space: nowrap;
-
-  &::after {
-    content: '';
-    display: inline-block;
-    height: 100%;
-    vertical-align: middle;
-    width: 1px;
-  }
-
-  .picker-opened & {
-    opacity: 1;
-  }
-}
-
-.picker-holder {
   outline: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden;
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   transform: translate3d(0, 100%, 0);
-  transition-delay: $transition-duration-mobile-complex;
+  transition-delay: ($transition-duration-mobile + $transition-duration-mobile-complex);
   transition-duration: 0;
   transition-property: transform;
+  z-index: map-get($picker-elevation-shadow, elevation);
 
   @include media-breakpoint-up(sm) {
-    transition-delay: $transition-duration-tablet-complex;
+    transition-delay: ($transition-duration-tablet + $transition-duration-tablet-complex);
   }
 
   @include media-breakpoint-up(lg) {
-    transition-delay: $transition-duration-desktop-complex;
+    transition-delay: ($transition-duration-desktop + $transition-duration-desktop-complex);
   }
 
-  .picker-opened & {
-    opacity: 1;
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  &.picker-opened {
     overflow-x: hidden;
     overflow-y: auto;
     transform: translate3d(0, 0, 0);
     transition: none;
-
-    &::before {
-      opacity: 1;
-    }
   }
 }
 
-.picker-input {
-  &.form-control[readonly] {
-    border-bottom-style: solid;
-    color: inherit;
-    cursor: text;
+.picker-frame {
+  margin: $picker-margin-y $picker-margin-x;
+}
+
+.picker-holder {
+  @include transition-standard(opacity);
+
+  align-items: center;
+  background-color: $picker-holder-bg;
+  display: flex;
+  justify-content: center;
+  min-height: 100%;
+  min-width: 100%;
+  opacity: 0;
+  pointer-events: none;
+  transition-delay: $transition-duration-mobile-complex;
+
+  @include media-breakpoint-up(sm) {
+    transition-delay: $transition-duration-tablet-complex;
   }
 
-  &.picker-input-active {
-    border-bottom-color: $textfield-border-color-focus;
+  @include media-breakpoint-up(lg) {
+    transition-delay: $transition-duration-desktop-complex;
+  }
+
+  .picker-opened & {
+    opacity: 1;
+    transition-delay: 0s;
   }
 }
 
 .picker-wrap {
   @include border-radius($picker-border-radius);
-  @include transition-standard-complex(transform);
+  @include transition-standard-complex(opacity, transform);
   @include typography-body-1;
 
   box-shadow: map-get($picker-elevation-shadow, shadow);
-  display: inline-block;
-  margin: $picker-margin-y $picker-margin-x;
   max-width: ($picker-cell-size * 7 + $picker-inner-spacer-x * 2);
+  opacity: 0;
   outline: 0;
+  pointer-events: auto;
   position: relative;
-  transform: scale(0.87);
-  vertical-align: middle;
+  transform: scale($picker-transition-scale);
 
   @media (orientation: landscape) {
-    display: inline-flex;
+    display: flex;
     max-width: none;
   }
 
   .picker-opened & {
+    opacity: 1;
     transform: scale(1);
   }
 }
@@ -112,11 +90,14 @@
 // Footer
 
 .picker-footer {
+  @include border-bottom-radius($picker-border-radius);
+
   display: flex;
   justify-content: flex-end;
   padding: $picker-inner-spacer-y $picker-inner-spacer-x;
 
   @media (orientation: landscape) {
+    border-radius: 0 0 $picker-border-radius 0;
     padding-right: ($picker-inner-spacer-x * 1.5);
     padding-left: ($picker-inner-spacer-x * 1.5);
   }
@@ -139,8 +120,10 @@
   line-height: $picker-cell-size;
   margin-right: $picker-inner-spacer-x;
   margin-left: $picker-inner-spacer-x;
+  padding-right: ($picker-cell-size + $picker-inner-spacer-x);
+  padding-left: ($picker-cell-size + $picker-inner-spacer-x);
   position: relative;
-  vertical-align: middle;
+  text-align: center;
 
   @media (orientation: landscape) {
     margin-top: $picker-inner-spacer-y;
@@ -193,13 +176,15 @@
 
 .picker-date-display {
   @include border-top-radius($picker-border-radius);
-  @include text-align(left);
 
   background-color: $picker-header-bg;
   color: color-yiq($picker-header-bg);
   padding: $picker-header-padding-y $picker-header-padding-x;
 
   @media (orientation: landscape) {
+    @include border-left-radius($picker-border-radius);
+
+    border-top-right-radius: 0;
     min-width: ($picker-cell-size * 3.5 + $picker-inner-spacer-x * 2);
     white-space: nowrap;
   }
@@ -227,6 +212,33 @@
   }
 }
 
+// Misc
+
+.picker-box {
+  @include border-bottom-radius($picker-border-radius);
+
+  background-color: $picker-content-bg;
+  overflow: hidden;
+
+  @media (orientation: landscape) {
+    @include border-right-radius($picker-border-radius);
+
+    border-bottom-left-radius: 0;
+  }
+}
+
+.picker-input {
+  &.form-control[readonly] {
+    border-bottom-style: solid;
+    color: inherit;
+    cursor: text;
+  }
+
+  &.picker-input-active {
+    border-bottom-color: $textfield-border-color-focus;
+  }
+}
+
 // Table
 
 .picker-day {
@@ -294,7 +306,6 @@
   @include transition-standard(opacity);
 
   appearance: none;
-  background-clip: padding-box;
   background-color: $picker-select-bg;
   background-image: none;
   background-position: 100% 50%;