material-sass 4.0.0.beta → 4.0.0.beta2

data/{app/assets → assets}/stylesheets/material/material/_menu.scss

@@ -1,10 +1,12 @@
 .dropdown,
+.dropleft,
+.dropright,
 .dropup {
   position: relative;
 }
 
 .dropdown-menu {
-  @include border-bottom-radius($menu-border-radius);
+  @include border-radius($menu-border-radius);
   @include text-align(left);
 
   background-color: transparent;
@@ -12,6 +14,7 @@
   display: none;
   float: left;
   font-size: $menu-font-size;
+  font-weight: $menu-font-weight;
   line-height: $menu-line-height;
   list-style: none;
   margin: 0;
@@ -20,23 +23,6 @@
   position: absolute;
   z-index: map-get($menu-elevation-shadow, elevation);
 
-  &::before {
-    @include border-bottom-radius($menu-border-radius);
-
-    background-clip: padding-box;
-    background-color: $menu-bg;
-    box-shadow: map-get($menu-elevation-shadow, shadow);
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transform-origin: 0 0;
-    z-index: -1;
-  }
-
   &.show {
     display: block;
 
@@ -75,19 +61,32 @@
     }
   }
 
+  &::before {
+    @include border-radius($menu-border-radius);
+
+    background-clip: padding-box;
+    background-color: $menu-bg;
+    box-shadow: map-get($menu-elevation-shadow, shadow);
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform-origin: 0 0;
+    z-index: -1;
+  }
+
   .nav:not(.flex-column):not(.flex-column-reverse) & {
     min-width: 100%;
   }
 }
 
 .menu {
-  @include border-radius($menu-border-radius);
-
   margin-top: (($menu-link-height - ($menu-link-height - $menu-line-height) / 2) * -1 + $menu-padding-y * -1);
 
   &::before {
-    @include border-radius($menu-border-radius);
-
     transform-origin: 0 ($menu-link-height / 2 + $menu-padding-y);
   }
 }
@@ -162,15 +161,15 @@
   }
 
   40% {
-    transform: scale((2 / 3), .25);
+    transform: scale((2 / 3), 0.25);
   }
 
   60% {
-    transform: scale(1, .5);
+    transform: scale(1, 0.5);
   }
 
   80% {
-    transform: scale(1, .75);
+    transform: scale(1, 0.75);
   }
 
   100% {
@@ -188,67 +187,60 @@
   }
 }
 
-// Positioning
-.dropdown-menu[x-placement="bottom-end"]::before {
+.dropdown-menu[x-placement='bottom-end']::before,
+.dropdown-menu[x-placement='left-start']::before {
   transform-origin: 100% 0;
 }
 
-.dropdown-menu[x-placement="top-end"],
-.dropdown-menu[x-placement="top-start"] {
-  &,
-  &::before {
-    @include border-top-radius($menu-border-radius);
-    @include border-bottom-radius(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;
   }
 
-  &.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(1) {
+    animation-name: dropdown-item-show-1;
+  }
 
-    > :nth-last-child(2) {
-      animation-name: dropdown-item-show-2;
-    }
+  > :nth-last-child(2) {
+    animation-name: dropdown-item-show-2;
+  }
 
-    > :nth-last-child(3) {
-      animation-name: dropdown-item-show-3;
-    }
+  > :nth-last-child(3) {
+    animation-name: dropdown-item-show-3;
   }
 }
 
-.dropdown-menu[x-placement="top-end"]::before {
+.dropdown-menu[x-placement='top-end']::before {
   transform-origin: 100% 100%;
 }
 
-.dropdown-menu[x-placement="top-start"]::before {
+.dropdown-menu[x-placement='top-start']::before {
   transform-origin: 0 100%;
 }
 
-.menu[x-placement="bottom-end"]::before {
+.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"] {
+.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 {
+.menu[x-placement='top-end']::before {
   transform-origin: 100% calc(100% - #{$menu-link-height / 2 + $menu-padding-y});
 }
 
-.menu[x-placement="top-start"]::before {
+.menu[x-placement='top-start']::before {
   transform-origin: 0 calc(100% - #{$menu-link-height / 2 + $menu-padding-y});
 }
 
-// Size
+// Cascading menu for desktop
+
 .dropdown-menu-sm,
 .menu-cascading {
   font-size: $menu-font-size-cascading;
@@ -264,24 +256,48 @@
 .menu-cascading {
   margin-top: (($menu-link-height-cascading - ($menu-link-height-cascading - $menu-line-height-cascading) / 2) * -1 + $menu-padding-y-cascading * -1);
 
-  &[x-placement="top-end"],
-  &[x-placement="top-start"] {
+  &[x-placement='top-end'],
+  &[x-placement='top-start'] {
     margin-top: 0;
     margin-bottom: (($menu-link-height-cascading - ($menu-link-height-cascading - $menu-line-height-cascading) / 2) * -1 + $menu-padding-y-cascading * -1);
   }
 
-  &[x-placement="top-end"]::before {
+  &[x-placement='top-end']::before {
     transform-origin: 100% calc(100% - #{$menu-link-height-cascading / 2 + $menu-padding-y-cascading});
   }
 
-  &[x-placement="top-start"]::before {
+  &[x-placement='top-start']::before {
     transform-origin: 0 calc(100% - #{$menu-link-height-cascading / 2 + $menu-padding-y-cascading});
   }
 }
 
+// Divider
+
+.dropdown-divider {
+  @include nav-divider($menu-divider-bg);
+}
+
+// Header
 
+.dropdown-header {
+  color: $menu-header-color;
+  display: block;
+  font-size: $menu-font-size;
+  font-weight: bolder;
+  line-height: $menu-line-height;
+  margin: 0;
+  padding: $menu-link-padding-y $menu-link-padding-x;
+  white-space: nowrap;
+
+  .dropdown-menu-sm &,
+  .menu-cascading & {
+    font-size: $menu-font-size-cascading;
+    line-height: $menu-line-height-cascading;
+    padding: $menu-link-padding-y-cascading $menu-link-padding-x-cascading;
+  }
+}
 
-// Button, link and more within the dropdown menu
+// Link
 
 .dropdown-item {
   @include transition-standard(background-color, color);
@@ -291,7 +307,7 @@
   clear: both;
   color: $menu-link-color;
   display: block;
-  font-weight: normal;
+  font-weight: inherit;
   padding: $menu-link-padding-y $menu-link-padding-x;
   position: relative;
   text-align: inherit;
@@ -322,38 +338,6 @@
   }
 }
 
-
-
-// Divider
-
-.dropdown-divider {
-  @include nav-divider($menu-divider-bg);
-}
-
-
-
-// Header
-
-.dropdown-header {
-  color: $menu-header-color;
-  display: block;
-  font-size: $menu-font-size;
-  font-weight: bolder;
-  line-height: $menu-line-height;
-  margin: 0;
-  padding: $menu-link-padding-y $menu-link-padding-x;
-  white-space: nowrap;
-
-  .dropdown-menu-sm &,
-  .menu-cascading & {
-    font-size: $menu-font-size-cascading;
-    line-height: $menu-line-height-cascading;
-    padding: $menu-link-padding-y-cascading $menu-link-padding-x-cascading;
-  }
-}
-
-
-
 // Toggle
 
 .dropdown-toggle {
@@ -365,12 +349,31 @@
     margin-right: ($caret-spacer-x * -1);
     margin-left: $caret-spacer-x;
 
+    .dropright & {
+      content: $caret-icon-right;
+    }
+
     .dropup & {
-      content: $caret-icon-dropup;
+      content: $caret-icon-up;
     }
   }
 
   &:empty::after {
     margin-left: ($caret-spacer-x * -1);
   }
+
+  .dropleft & {
+    &::after {
+      display: none;
+    }
+
+    &::before {
+      @include set-material-icons;
+
+      content: $caret-icon-left;
+      display: inline-block;
+      margin-right: $caret-spacer-x;
+      margin-left: ($caret-spacer-x * -1);
+    }
+  }
 }

data/{app/assets → assets}/stylesheets/material/material/_navdrawer.scss

@@ -10,8 +10,6 @@
   z-index: map-get($navdrawer-elevation-shadow, elevation);
 }
 
-
-
 // Backdrop
 
 .navdrawer-backdrop {
@@ -31,8 +29,6 @@
   }
 }
 
-
-
 // Content
 
 .navdrawer-content {
@@ -50,14 +46,12 @@
   transform: translate3d(-100%, 0, 0);
   width: $navdrawer-width;
 
-  // Direction
   .navdrawer-right & {
     right: 0;
     left: auto;
     transform: translate3d(100%, 0, 0);
   }
 
-  // Open
   .navdrawer.show & {
     @include transition-deceleration(transform);
 
@@ -65,8 +59,6 @@
   }
 }
 
-
-
 // Misc
 
 .navdrawer-body {
@@ -104,8 +96,6 @@
   }
 }
 
-
-
 // Nav
 
 .navdrawer-nav {
@@ -129,23 +119,19 @@
       background-color: $navdrawer-nav-link-bg-hover;
     }
 
+    &.active,
     &:active {
       color: $navdrawer-nav-link-color-active;
     }
 
-    &:focus {
-      outline: 0;
-    }
-
-    &.active {
-      color: $navdrawer-nav-link-color-active;
-    }
-
-    // Disabled
     &.disabled {
       background-color: transparent;
       color: $navdrawer-nav-link-color-disabled;
     }
+
+    &:focus {
+      outline: 0;
+    }
   }
 
   .active > .nav-link {
@@ -167,17 +153,22 @@
   color: $navdrawer-nav-link-color-active;
 }
 
-
-
 // Permanent
 
 @include media-breakpoint-up(lg) {
   .navdrawer-permanent {
     border-right: $navdrawer-border-width solid $navdrawer-border-color;
-    display: block !important;
+    display: block !important; // stylelint-disable-line declaration-no-important
     right: auto;
     width: $navdrawer-width;
 
+    &.navdrawer-right {
+      border-right: 0;
+      border-left: $navdrawer-border-width solid $navdrawer-border-color;
+      right: 0;
+      left: auto;
+    }
+
     .navdrawer-content {
       box-shadow: none;
       max-width: none;
@@ -185,22 +176,12 @@
       transform: translate3d(0, 0, 0);
       width: 100%;
     }
-
-    // Direction
-    &.navdrawer-right {
-      border-right: 0;
-      border-left: $navdrawer-border-width solid $navdrawer-border-color;
-      right: 0;
-      left: auto;
-    }
   }
 
-  // Backdrop
   .navdrawer-backdrop-permanent {
     display: none;
   }
 
-  // Variation
   .navdrawer-permanent-clipped,
   .navdrawer-permanent-float {
     top: $toolbar-height;
@@ -225,8 +206,6 @@
   }
 }
 
-
-
 // Persistent
 
 @include media-breakpoint-up(lg) {
@@ -234,15 +213,6 @@
     right: auto;
     width: $navdrawer-width;
 
-    .navdrawer-content {
-      border-right: $navdrawer-border-width solid $navdrawer-border-color;
-      box-shadow: none;
-      max-width: none;
-      position: absolute;
-      width: 100%;
-    }
-
-    // Direction
     &.navdrawer-right {
       right: 0;
       left: auto;
@@ -252,14 +222,20 @@
         border-left: $navdrawer-border-width solid $navdrawer-border-color;
       }
     }
+
+    .navdrawer-content {
+      border-right: $navdrawer-border-width solid $navdrawer-border-color;
+      box-shadow: none;
+      max-width: none;
+      position: absolute;
+      width: 100%;
+    }
   }
 
-  // Backdrop
   .navdrawer-backdrop-persistent {
     display: none;
   }
 
-  // Variation
   .navdrawer-persistent-clipped {
     border-top: $navdrawer-border-width solid $navdrawer-border-color;
     margin-top: ($navdrawer-border-width * -1);
@@ -268,8 +244,6 @@
   }
 }
 
-
-
 // Temporary
 
 @include media-breakpoint-up(lg) {
@@ -278,20 +252,18 @@
     right: auto;
     width: $navdrawer-width;
 
+    &.navdrawer-right {
+      right: 0;
+      left: auto;
+    }
+
     .navdrawer-content {
       max-width: none;
       position: absolute;
       width: 100%;
     }
-
-    // Direction
-    &.navdrawer-right {
-      right: 0;
-      left: auto;
-    }
   }
 
-  // Backdrop
   .navdrawer-backdrop-temporary {
     display: none;
   }