material-sass 4.0.0.beta3 → 4.0.0

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

@@ -134,7 +134,7 @@
     @each $color, $values in $theme-colors {
       &-#{$color} {
         @include plain-active-focus-hover {
-          color: map-get(theme-color($color), color);
+          color: theme-color($color);
         }
 
         &.disabled,

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

@@ -75,18 +75,18 @@
 
 @each $color, $values in $theme-colors {
   .list-group-item-#{$color} {
-    background-color: map-get(theme-color($color), lighter);
-    color: color-yiq(map-get(theme-color($color), lighter));
+    background-color: theme-color-light($color);
+    color: color-yiq(theme-color-light($color));
 
     &.active {
-      background-color: map-get(theme-color($color), color);
-      color: color-yiq(map-get(theme-color($color), color));
+      background-color: theme-color($color);
+      color: color-yiq(theme-color($color));
     }
 
     &.list-group-item-action {
       @include active-focus-hover {
-        background-color: map-get(theme-color($color), color);
-        color: color-yiq(map-get(theme-color($color), color));
+        background-color: theme-color($color);
+        color: color-yiq(theme-color($color));
       }
     }
   }

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

@@ -338,6 +338,19 @@
   }
 }
 
+.dropdown-item-text {
+  color: $menu-link-color;
+  display: block;
+  font-weight: inherit;
+  padding: $menu-link-padding-y $menu-link-padding-x;
+  transform-origin: 0 0;
+
+  .dropdown-menu-sm &,
+  .menu-cascading & {
+    padding: $menu-link-padding-y-cascading $menu-link-padding-x-cascading;
+  }
+}
+
 // Toggle
 
 .dropdown-toggle {
@@ -348,6 +361,7 @@
     display: inline-block;
     margin-right: ($caret-spacer-x * -1);
     margin-left: $caret-spacer-x;
+    vertical-align: top;
 
     .dropright & {
       content: $caret-icon-right;

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

@@ -32,10 +32,9 @@
 // Content
 
 .navdrawer-content {
-  @include transition-sharp(transform);
+  @include transition-sharp(box-shadow, transform);
 
   background-color: $navdrawer-content-bg;
-  box-shadow: map-get($navdrawer-elevation-shadow, shadow);
   max-width: calc(100% - #{$navdrawer-gutter-width});
   overflow-x: hidden;
   overflow-y: auto;
@@ -53,8 +52,9 @@
   }
 
   .navdrawer.show & {
-    @include transition-deceleration(transform);
+    @include transition-deceleration(box-shadow, transform);
 
+    box-shadow: map-get($navdrawer-elevation-shadow, shadow);
     transform: translate3d(0, 0, 0);
   }
 }
@@ -102,9 +102,15 @@
   display: flex;
   flex-direction: column;
   list-style: none;
+  margin-top: $navdrawer-inner-spacer-y;
   margin-bottom: $navdrawer-inner-spacer-y;
   padding-left: 0;
 
+  .navdrawer-header + &,
+  .navdrawer-subheader + & {
+    margin-top: 0;
+  }
+
   .nav-link {
     @include text-truncate;
     @include transition-standard(background-color, color);
@@ -153,118 +159,121 @@
   color: $navdrawer-nav-link-color-active;
 }
 
-// Permanent
+// Permanent, persistent and temporary variations
 
-@include media-breakpoint-up(lg) {
-  .navdrawer-permanent {
-    border-right: $navdrawer-border-width solid $navdrawer-border-color;
-    display: block !important; // stylelint-disable-line declaration-no-important
-    right: auto;
-    width: $navdrawer-width;
+@each $breakpoint in map-keys($grid-breakpoints) {
+  $next: breakpoint-next($breakpoint);
+  $infix: breakpoint-infix($next);
 
-    &.navdrawer-right {
-      border-right: 0;
-      border-left: $navdrawer-border-width solid $navdrawer-border-color;
-      right: 0;
-      left: auto;
+  @include media-breakpoint-up($next) {
+    .navdrawer-backdrop-permanent#{$infix} {
+      display: none;
     }
 
-    .navdrawer-content {
-      box-shadow: none;
-      max-width: none;
-      position: absolute;
-      transform: translate3d(0, 0, 0);
-      width: 100%;
+    .navdrawer-backdrop-persistent#{$infix} {
+      display: none;
     }
-  }
 
-  .navdrawer-backdrop-permanent {
-    display: none;
-  }
-
-  .navdrawer-permanent-clipped,
-  .navdrawer-permanent-float {
-    top: $toolbar-height;
-    z-index: (map-get($toolbar-elevation-shadow, elevation) - 1);
-  }
+    .navdrawer-backdrop-temporary#{$infix} {
+      display: none;
+    }
 
-  .navdrawer-permanent-clipped {
-    border-top: $navdrawer-border-width solid $navdrawer-border-color;
-    margin-top: ($navdrawer-border-width * -1);
-  }
+    .navdrawer-permanent#{$infix} {
+      border-right: $navdrawer-border-width solid $navdrawer-border-color;
+      display: block !important; // stylelint-disable-line declaration-no-important
+      right: auto;
+      width: $navdrawer-width;
+
+      &.navdrawer-permanent-clipped,
+      &.navdrawer-permanent-float {
+        top: $toolbar-height;
+        z-index: (map-get($toolbar-elevation-shadow, elevation) - 1);
+      }
 
-  .navdrawer-permanent-float {
-    border-right: 0;
+      &.navdrawer-permanent-clipped {
+        border-top: $navdrawer-border-width solid $navdrawer-border-color;
+        margin-top: ($navdrawer-border-width * -1);
+      }
 
-    &.navdrawer-right {
-      border-left: 0;
-    }
+      &.navdrawer-permanent-float {
+        border-right: 0;
 
-    .navdrawer-content {
-      background-color: transparent;
-    }
-  }
-}
+        &.navdrawer-right {
+          border-left: 0;
+        }
 
-// Persistent
+        .navdrawer-content {
+          background-color: transparent;
+        }
+      }
 
-@include media-breakpoint-up(lg) {
-  .navdrawer-persistent {
-    right: auto;
-    width: $navdrawer-width;
+      &.navdrawer-right {
+        border-right: 0;
+        border-left: $navdrawer-border-width solid $navdrawer-border-color;
+        right: 0;
+        left: auto;
+      }
 
-    &.navdrawer-right {
-      right: 0;
-      left: auto;
+      &.show .navdrawer-content {
+        box-shadow: none;
+      }
 
       .navdrawer-content {
-        border-right: 0;
-        border-left: $navdrawer-border-width solid $navdrawer-border-color;
+        max-width: none;
+        position: absolute;
+        transform: translate3d(0, 0, 0);
+        width: 100%;
       }
     }
 
-    .navdrawer-content {
-      border-right: $navdrawer-border-width solid $navdrawer-border-color;
-      box-shadow: none;
-      max-width: none;
-      position: absolute;
-      width: 100%;
-    }
-  }
+    .navdrawer-persistent#{$infix} {
+      right: auto;
+      width: $navdrawer-width;
 
-  .navdrawer-backdrop-persistent {
-    display: none;
-  }
+      &.navdrawer-persistent-clipped {
+        border-top: $navdrawer-border-width solid $navdrawer-border-color;
+        margin-top: ($navdrawer-border-width * -1);
+        top: $toolbar-height;
+        z-index: (map-get($toolbar-elevation-shadow, elevation) - 1);
+      }
 
-  .navdrawer-persistent-clipped {
-    border-top: $navdrawer-border-width solid $navdrawer-border-color;
-    margin-top: ($navdrawer-border-width * -1);
-    top: $toolbar-height;
-    z-index: (map-get($toolbar-elevation-shadow, elevation) - 1);
-  }
-}
+      &.navdrawer-right {
+        right: 0;
+        left: auto;
 
-// Temporary
+        .navdrawer-content {
+          border-right: 0;
+          border-left: $navdrawer-border-width solid $navdrawer-border-color;
+        }
+      }
 
-@include media-breakpoint-up(lg) {
-  .navdrawer-temporary {
-    overflow: visible;
-    right: auto;
-    width: $navdrawer-width;
+      &.show .navdrawer-content {
+        box-shadow: none;
+      }
 
-    &.navdrawer-right {
-      right: 0;
-      left: auto;
+      .navdrawer-content {
+        border-right: $navdrawer-border-width solid $navdrawer-border-color;
+        max-width: none;
+        position: absolute;
+        width: 100%;
+      }
     }
 
-    .navdrawer-content {
-      max-width: none;
-      position: absolute;
-      width: 100%;
-    }
-  }
+    .navdrawer-temporary#{$infix} {
+      overflow: visible;
+      right: auto;
+      width: $navdrawer-width;
 
-  .navdrawer-backdrop-temporary {
-    display: none;
+      &.navdrawer-right {
+        right: 0;
+        left: auto;
+      }
+
+      .navdrawer-content {
+        max-width: none;
+        position: absolute;
+        width: 100%;
+      }
+    }
   }
 }

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

@@ -1,5 +1,3 @@
-// Todo: landscape picker
-
 .picker {
   position: absolute;
   user-select: none;
@@ -101,6 +99,11 @@
   transform: scale(0.87);
   vertical-align: middle;
 
+  @media (orientation: landscape) {
+    display: inline-flex;
+    max-width: none;
+  }
+
   .picker-opened & {
     transform: scale(1);
   }
@@ -113,6 +116,11 @@
   justify-content: flex-end;
   padding: $picker-inner-spacer-y $picker-inner-spacer-x;
 
+  @media (orientation: landscape) {
+    padding-right: ($picker-inner-spacer-x * 1.5);
+    padding-left: ($picker-inner-spacer-x * 1.5);
+  }
+
   button {
     flex: 0 1 auto;
     margin-left: $picker-inner-spacer-x;
@@ -133,6 +141,12 @@
   margin-left: $picker-inner-spacer-x;
   position: relative;
   vertical-align: middle;
+
+  @media (orientation: landscape) {
+    margin-top: $picker-inner-spacer-y;
+    margin-right: ($picker-inner-spacer-x * 1.5);
+    margin-left: ($picker-inner-spacer-x * 1.5);
+  }
 }
 
 .picker-month,
@@ -184,6 +198,11 @@
   background-color: $picker-header-bg;
   color: color-yiq($picker-header-bg);
   padding: $picker-header-padding-y $picker-header-padding-x;
+
+  @media (orientation: landscape) {
+    min-width: ($picker-cell-size * 3.5 + $picker-inner-spacer-x * 2);
+    white-space: nowrap;
+  }
 }
 
 .picker-date-display-bottom {
@@ -198,6 +217,11 @@
 .picker-weekday-display {
   margin-right: $picker-inner-spacer-x;
 
+  @media (orientation: landscape) {
+    display: block;
+    margin-right: 0;
+  }
+
   &::after {
     content: ',';
   }
@@ -214,6 +238,11 @@
   vertical-align: middle;
   width: $picker-cell-size;
 
+  @media (orientation: landscape) {
+    margin-right: ($picker-inner-spacer-x / 2);
+    margin-left: ($picker-inner-spacer-x / 2);
+  }
+
   &.picker-day-selected {
     background-color: $picker-day-bg-selected;
     color: color-yiq($picker-day-bg-selected);
@@ -259,11 +288,41 @@
   width: $picker-cell-size;
 }
 
-// .picker-select-month,
-// .picker-select-year {
-//   // @extend .form-control;
-//   // @extend .form-control-sm;
-//   display: inline-block !important;
-//   margin: 0 $spacer-sm !important;
-//   width: auto !important;
-// }
+.picker-select-month,
+.picker-select-year {
+  @include border-radius($picker-select-border-radius);
+  @include transition-standard(opacity);
+
+  appearance: none;
+  background-clip: padding-box;
+  background-color: $picker-select-bg;
+  background-image: none;
+  background-position: 100% 50%;
+  background-size: auto 100%;
+  border: 0;
+  box-shadow: none;
+  color: $textfield-color;
+  display: inline-block;
+  font-size: inherit;
+  height: ($picker-cell-size / 2);
+  line-height: ($picker-cell-size / 2);
+  opacity: $picker-select-opacity;
+  padding: 0 ($picker-cell-size / 2) 0 $picker-inner-spacer-x;
+
+  @include focus-hover {
+    opacity: 1;
+  }
+
+  @include media-moz-webkit {
+    background-image: $caret-bg;
+    background-repeat: no-repeat;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+.picker-select-month {
+  margin-left: $picker-inner-spacer-x;
+}

data/assets/stylesheets/material/material/_progress-circular.scss

@@ -129,15 +129,15 @@
   .progress-circular-#{$color} {
     .progress-circular-gap,
     .progress-circular-spinner {
-      border-top-color: map-get(theme-color($color), color);
+      border-top-color: theme-color($color);
     }
 
     .progress-circular-left .progress-circular-spinner {
-      border-left-color: map-get(theme-color($color), color);
+      border-left-color: theme-color($color);
     }
 
     .progress-circular-right .progress-circular-spinner {
-      border-right-color: map-get(theme-color($color), color);
+      border-right-color: theme-color($color);
     }
   }
 }