material-sass 4.0.0.alpha6 → 4.0.0.beta

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

@@ -1,293 +1,298 @@
 .navdrawer {
   display: none;
-  overflow: hidden;
   outline: 0;
+  overflow: hidden;
   position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   z-index: map-get($navdrawer-elevation-shadow, elevation);
 }
 
-//
-// backdrop
-//
-  .navdrawer-backdrop {
-    background-color: $navdrawer-backdrop-bg;
-    opacity: 0;
-    position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    z-index: (map-get($navdrawer-elevation-shadow, elevation) - 1);
-    @include transition-standard(opacity);
 
-    &.show {
-      opacity: 1;
-    }
-  }
 
-//
-// content
-//
-  .navdrawer-content {
-    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;
-    position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-    transform: translate3d(-100%, 0, 0);
-    width: $navdrawer-width-mobile;
-    @include transition-sharp(transform);
-
-    // direction
-      .navdrawer-right & {
-        // position
-          right: 0;
-          left: auto;
-        transform: translate3d(100%, 0, 0);
-      }
+// Backdrop
 
-    // open
-      .navdrawer.show & {
-        transform: translate3d(0, 0, 0);
-        @include transition-deceleration(transform);
-      }
+.navdrawer-backdrop {
+  @include transition-standard-complex(opacity);
+
+  background-color: $navdrawer-backdrop-bg;
+  opacity: 0;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: (map-get($navdrawer-elevation-shadow, elevation) - 1);
+
+  &.show {
+    opacity: 1;
   }
+}
+
+
 
-//
-// misc
-//
-  .navdrawer-body {
-    margin-bottom: $navdrawer-inner-spacer-y;
-    padding-right: $navdrawer-inner-spacer-x;
-    padding-left: $navdrawer-inner-spacer-x;
+// Content
+
+.navdrawer-content {
+  @include transition-sharp(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;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  transform: translate3d(-100%, 0, 0);
+  width: $navdrawer-width;
+
+  // Direction
+  .navdrawer-right & {
+    right: 0;
+    left: auto;
+    transform: translate3d(100%, 0, 0);
   }
 
-  .navdrawer-divider {
-    @include nav-divider($navdrawer-divider-bg);
+  // Open
+  .navdrawer.show & {
+    @include transition-deceleration(transform);
+
+    transform: translate3d(0, 0, 0);
   }
+}
+
+
+
+// Misc
+
+.navdrawer-body {
+  margin-bottom: $navdrawer-inner-spacer-y;
+  padding-right: $navdrawer-inner-spacer-x;
+  padding-left: $navdrawer-inner-spacer-x;
+}
+
+.navdrawer-divider {
+  @include nav-divider($navdrawer-divider-bg);
+}
 
-  .navdrawer-header {
-    background-color: $navdrawer-header-bg;
-    border-bottom: $navdrawer-header-border-width solid $navdrawer-header-border-color;
-    display: block;
-    margin-bottom: $navdrawer-inner-spacer-y;
-    padding: $toolbar-padding-y $navdrawer-inner-spacer-x;
+.navdrawer-header {
+  background-color: $navdrawer-header-bg;
+  border-bottom: $navdrawer-header-border-width solid $navdrawer-header-border-color;
+  display: block;
+  margin-bottom: $navdrawer-inner-spacer-y;
+  padding: $toolbar-padding-y $navdrawer-inner-spacer-x;
+}
+
+.navdrawer-subheader {
+  @include text-truncate;
+
+  color: $navdrawer-subheader-color;
+  display: block;
+  font-weight: $navdrawer-subheader-font-weight;
+  height: $navdrawer-subheader-height;
+  line-height: 1;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding: (($navdrawer-subheader-height - $navdrawer-subheader-font-size) / 2) $navdrawer-inner-spacer-x;
+
+  .navdrawer-divider + & {
+    margin-top: ($navdrawer-inner-spacer-y * -1);
   }
+}
 
-  .navdrawer-subheader {
-    color: $navdrawer-subheader-color;
-    display: block;
-    font-weight: $navdrawer-subheader-font-weight;
-    height: $navdrawer-subheader-height;
-    line-height: 1;
-    margin-top: 0;
-    margin-bottom: 0;
-    padding: (($navdrawer-subheader-height - $navdrawer-subheader-font-size) / 2) $navdrawer-inner-spacer-x;
+
+
+// Nav
+
+.navdrawer-nav {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin-bottom: $navdrawer-inner-spacer-y;
+  padding-left: 0;
+
+  .nav-link {
     @include text-truncate;
+    @include transition-standard(background-color, color);
 
-    .navdrawer-divider + & {
-      margin-top: ($navdrawer-inner-spacer-y * -1);
-    }
-  }
+    color: $navdrawer-nav-link-color;
+    font-size: $navdrawer-nav-link-font-size;
+    font-weight: $navdrawer-nav-link-font-weight;
+    line-height: 1;
+    padding: (($navdrawer-nav-link-height - $navdrawer-nav-link-font-size) / 2) $navdrawer-inner-spacer-x;
 
-//
-// nav
-//
-  .navdrawer-nav {
-    display: flex;
-    flex-direction: column;
-    list-style: none;
-    margin-bottom: $navdrawer-inner-spacer-y;
-    padding-left: 0;
-
-    .nav-link {
-      color: $navdrawer-nav-link-color;
-      font-size: $navdrawer-nav-link-font-size;
-      font-weight: $navdrawer-nav-link-font-weight;
-      line-height: 1;
-      padding: (($navdrawer-nav-link-height - $navdrawer-nav-link-font-size) / 2) $navdrawer-inner-spacer-x;
-      @include text-truncate;
-      @include transition-standard(background-color, color);
-
-      // active, focus, hover
-        @include active-focus-hover {
-          background-color: $navdrawer-nav-link-bg-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;
-        }
+    @include active-focus-hover {
+      background-color: $navdrawer-nav-link-bg-hover;
     }
 
-    .active > .nav-link {
+    &:active {
       color: $navdrawer-nav-link-color-active;
     }
-  }
 
-  .navdrawer-nav-icon {
-    color: $navdrawer-nav-icon-color;
-    width: $navdrawer-nav-icon-width;
+    &:focus {
+      outline: 0;
+    }
 
-    .nav-link:active &,
-    .nav-link.active & {
+    &.active {
       color: $navdrawer-nav-link-color-active;
     }
+
+    // Disabled
+    &.disabled {
+      background-color: transparent;
+      color: $navdrawer-nav-link-color-disabled;
+    }
   }
 
-  .active > .nav-link .navdrawer-nav-icon {
+  .active > .nav-link {
     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;
-      // position
-        right: auto;
-      width: $navdrawer-width-mobile;
+.navdrawer-nav-icon {
+  color: $navdrawer-nav-icon-color;
+  width: $navdrawer-nav-icon-width;
 
-      &.navdrawer-right {
-        border-right: 0;
-        border-left: $navdrawer-border-width solid $navdrawer-border-color;
-        // position
-          right: 0;
-          left: auto;
-      }
+  .nav-link:active &,
+  .nav-link.active & {
+    color: $navdrawer-nav-link-color-active;
+  }
+}
 
-      .navdrawer-content {
-        box-shadow: none;
-        max-width: none;
-        position: absolute;
-        transform: translate3d(0, 0, 0);
-        width: 100%;
-      }
+.active > .nav-link .navdrawer-nav-icon {
+  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;
+    right: auto;
+    width: $navdrawer-width;
+
+    .navdrawer-content {
+      box-shadow: none;
+      max-width: none;
+      position: absolute;
+      transform: translate3d(0, 0, 0);
+      width: 100%;
     }
 
-    // backdrop
-      .navdrawer-backdrop-permanent {
-        display: none;
-      }
+    // Direction
+    &.navdrawer-right {
+      border-right: 0;
+      border-left: $navdrawer-border-width solid $navdrawer-border-color;
+      right: 0;
+      left: auto;
+    }
+  }
 
-    // variation
-      .navdrawer-permanent-clipped,
-      .navdrawer-permanent-float {
-        // position
-          top: $toolbar-height;
-        z-index: (map-get($toolbar-elevation-shadow, elevation) - 1);
-      }
+  // Backdrop
+  .navdrawer-backdrop-permanent {
+    display: none;
+  }
 
-      .navdrawer-permanent-clipped {
-        border-top: $navdrawer-border-width solid $navdrawer-border-color;
-        margin-top: ($navdrawer-border-width * -1);
-      }
+  // Variation
+  .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;
+    }
+
+    .navdrawer-content {
+      background-color: transparent;
+    }
   }
+}
 
-//
-// persistent
-//
-  @include media-breakpoint-up(lg) {
-    .navdrawer-persistent {
-      // position
-        right: auto;
-      width: $navdrawer-width-mobile;
-
-      &.navdrawer-right {
-        // position
-          right: 0;
-          left: auto;
-      }
 
-      .navdrawer-content {
-        border-right: $navdrawer-border-width solid $navdrawer-border-color;
-        box-shadow: none;
-        max-width: none;
-        position: absolute;
-        width: 100%;
-      }
 
-      &.navdrawer-right .navdrawer-content {
+// Persistent
+
+@include media-breakpoint-up(lg) {
+  .navdrawer-persistent {
+    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;
+
+      .navdrawer-content {
         border-right: 0;
         border-left: $navdrawer-border-width solid $navdrawer-border-color;
       }
     }
+  }
 
-    // backdrop
-      .navdrawer-backdrop-persistent {
-        display: none;
-      }
+  // 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);
-        // position
-          top: $toolbar-height;
-        z-index: (map-get($toolbar-elevation-shadow, elevation) - 1);
-      }
+  // Variation
+  .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);
   }
+}
 
-//
-// temporary
-//
-  @include media-breakpoint-up(lg) {
-    .navdrawer-temporary {
-      overflow: visible;
-      // position
-        right: auto;
-      width: $navdrawer-width-mobile;
-
-      &.navdrawer-right {
-        // position
-          right: 0;
-          left: auto;
-      }
 
-      .navdrawer-content {
-        max-width: none;
-        position: absolute;
-        width: 100%;
-      }
+
+// Temporary
+
+@include media-breakpoint-up(lg) {
+  .navdrawer-temporary {
+    overflow: visible;
+    right: auto;
+    width: $navdrawer-width;
+
+    .navdrawer-content {
+      max-width: none;
+      position: absolute;
+      width: 100%;
     }
 
-    // backdrop
-      .navdrawer-backdrop-temporary {
-        display: none;
-      }
+    // Direction
+    &.navdrawer-right {
+      right: 0;
+      left: auto;
+    }
   }
+
+  // Backdrop
+  .navdrawer-backdrop-temporary {
+    display: none;
+  }
+}