materialize-sass 0.97.7 → 0.97.8

data/app/assets/stylesheets/materialize/components/_global.scss

@@ -18,16 +18,13 @@ main {
 }
 
 ul {
-  &.browser-default,
-  &.browser-default li {
-    list-style-type: initial;
-  }
-
-  padding: 0;
-  list-style-type: none;
-
-  li {
+  &:not(.browser-default) {
+    padding-left: 0;
     list-style-type: none;
+
+    li {
+      list-style-type: none;
+    }
   }
 }
 
@@ -61,23 +58,23 @@ a {
 .z-depth-0 {
   box-shadow: none !important;
 }
-.z-depth-1{
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+.z-depth-1 {
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
 }
-.z-depth-1-half{
-  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+.z-depth-1-half {
+  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
 }
-.z-depth-2{
-  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+.z-depth-2 {
+  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
 }
-.z-depth-3{
-  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
+.z-depth-3 {
+  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
 }
-.z-depth-4{
-  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
+.z-depth-4 {
+  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
 }
-.z-depth-5{
-  box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
+.z-depth-5 {
+  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
 }
 
 .hoverable {
@@ -599,12 +596,12 @@ td, th{
 span.badge {
   min-width: 3rem;
   padding: 0 6px;
+  margin-left: 14px;
   text-align: center;
   font-size: 1rem;
   line-height: inherit;
   color: color('grey', 'darken-1');
-  position: absolute;
-  right: 15px;
+  float: right;
   box-sizing: border-box;
 
   &.new {
@@ -621,14 +618,36 @@ span.badge {
   &[data-badge-caption]::after {
     content: " " attr(data-badge-caption);
   }
-
-
 }
 nav ul a span.badge {
-  position: static;
+  display: inline-block;
+  float: none;
   margin-left: 4px;
-  line-height: 0;
+  line-height: 22px;
+  height: 22px;
 }
+.side-nav span.badge.new,
+.collapsible span.badge.new {
+  &::before {
+    content: '';
+    position: absolute;
+    top: 10px;
+    right: 0;
+    bottom: 10px;
+    left: 0;
+    background-color: $badge-bg-color;
+    border-radius: 2px;
+    z-index: -1;
+  }
+
+  position: relative;
+  background-color: transparent;
+}
+.collapsible span.badge.new {
+  z-index: 1;
+}
+
+
 
 // Responsive Videos
 .video-container {

data/app/assets/stylesheets/materialize/components/_materialbox.scss

@@ -39,4 +39,4 @@
   height: 50px;
   z-index: 1000;
   -webkit-font-smoothing: antialiased;
-}
+}

data/app/assets/stylesheets/materialize/components/_mixins.scss

@@ -2,4 +2,4 @@
 //     -webkit-box-shadow: $args1, $args2;
 //     -moz-box-shadow: $args1, $args2;
 //     box-shadow: $args1, $args2;
-// }
+// }

data/app/assets/stylesheets/materialize/components/_modal.scss

@@ -43,19 +43,19 @@
     }
   }
 }
-.lean-overlay {
-    position: fixed;
-    z-index:999;
-    top: -100px;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    height: 125%;
-    width: 100%;
-    background: #000;
-    display: none;
+.modal-overlay {
+  position: fixed;
+  z-index: 999;
+  top: -100px;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 125%;
+  width: 100%;
+  background: #000;
+  display: none;
 
-    will-change: opacity;
+  will-change: opacity;
 }
 
 // Modal with fixed action footer

data/app/assets/stylesheets/materialize/components/_navbar.scss

@@ -1,4 +1,12 @@
 nav {
+  &.nav-extended {
+    height: auto;
+
+    .nav-wrapper {
+      height: auto;
+    }
+  }
+
   color: $navbar-font-color;
   @extend .z-depth-1;
   background-color: $primary-color;
@@ -12,7 +20,7 @@ nav {
   [class^="mdi-"], [class*="mdi-"],
   i.material-icons {
     display: block;
-    font-size: 2rem;
+    font-size: 24px;
     height: $navbar-height-mobile;
     line-height: $navbar-height-mobile;
   }
@@ -33,9 +41,9 @@ nav {
     position: relative;
     z-index: 1;
     height: $navbar-height-mobile;
+    margin: 0 18px;
 
     i {
-      font-size: 2.7rem;
       height: $navbar-height-mobile;
       line-height: $navbar-height-mobile;
     }
@@ -165,7 +173,7 @@ nav {
 .navbar-fixed {
   position: relative;
   height: $navbar-height-mobile;
-  z-index: 998;
+  z-index: 997;
 
   nav {
     position: fixed;

data/app/assets/stylesheets/materialize/components/_preloader.scss

@@ -331,4 +331,4 @@
 @keyframes fade-out {
   from { opacity: 1; }
   to { opacity: 0; }
-}
+}

data/app/assets/stylesheets/materialize/components/_sideNav.scss

@@ -11,7 +11,6 @@
   padding-bottom: 60px;
   background-color: $sidenav-bg-color;
   z-index: 999;
-  backface-visibility: hidden;
   overflow-y: auto;
   will-change: transform;
   backface-visibility: hidden;
@@ -68,6 +67,7 @@
   li > a > [class^="mdi-"], li > a > [class*="mdi-"],
   li > a > i.material-icons {
     float: left;
+    height: $sidenav-item-height;
     line-height: $sidenav-item-height;
     margin: 0 ($sidenav-padding * 2) 0 0;
     width: $sidenav-item-height / 2;
@@ -92,18 +92,18 @@
   }
 
   .userView {
-    overflow: hidden;
     position: relative;
     padding: ($sidenav-padding * 2) ($sidenav-padding * 2) 0;
     margin-bottom: $sidenav-padding / 2;
 
-    a {
+    & > a {
       &:hover { background-color: transparent; }
       height: auto;
       padding: 0;
     }
 
     .background {
+      overflow: hidden;
       position: absolute;
       top: 0;
       right: 0;
@@ -123,7 +123,7 @@
 
     .name,
     .email {
-      font-weight: $sidenav-font-size;
+      font-size: $sidenav-font-size;
       line-height: 24px;
     }
 
@@ -150,16 +150,6 @@
 }
 
 
-// Hidden side-nav for all sizes
-.side-nav.fixed {
-  a {
-    display: block;
-    padding: 0 $sidenav-padding;
-    color: $sidenav-font-color;
-  }
-}
-
-
 // Fixed side-nav shown
 .side-nav.fixed {
   left: 0;
@@ -195,8 +185,8 @@
 }
 
 
-.side-nav .collapsible-body li.active,
-.side-nav.fixed .collapsible-body li.active {
+.side-nav .collapsible-body > ul:not(.collapsible) > li.active,
+.side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active {
   background-color: $primary-color;
   a {
     color: $sidenav-bg-color;

data/app/assets/stylesheets/materialize/components/_slider.scss

@@ -89,4 +89,4 @@
     }
   }
 
-}
+}

data/app/assets/stylesheets/materialize/components/_tabs.scss

@@ -1,48 +1,73 @@
 .tabs {
-  display: flex;
+  &.tabs-transparent {
+    background-color: transparent;
+
+    .tab a,
+    .tab.disabled a,
+    .tab.disabled a:hover {
+      color: rgba(255,255,255,0.7);
+    }
+
+    .tab a:hover,
+    .tab a.active {
+      color: #fff;
+    }
+
+    .indicator {
+      background-color: #fff;
+    }
+  }
+
+  &.tabs-fixed-width {
+    display: flex;
+
+    .tab {
+      -webkit-box-flex: 1;
+      -webkit-flex-grow: 1;
+          -ms-flex-positive: 1;
+              flex-grow: 1;
+    }
+  }
+
   position: relative;
   overflow-x: auto;
   overflow-y: hidden;
   height: 48px;
+  width: 100%;
   background-color: $tabs-bg-color;
   margin: 0 auto;
-  width: 100%;
   white-space: nowrap;
 
   .tab {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1;
-    display: block;
-    float: left;
+    display: inline-block;
     text-align: center;
     line-height: 48px;
     height: 48px;
     padding: 0;
     margin: 0;
     text-transform: uppercase;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    letter-spacing: .8px;
-    width: 15%;
-    min-width: 80px;
 
     a {
-      color: $tabs-text-color;
+      &:hover,
+      &.active {
+        background-color: transparent;
+        color: $tabs-text-color;
+      }
+
+      color: rgba($tabs-text-color, .7);
       display: block;
       width: 100%;
       height: 100%;
+      padding: 0 24px;
+      font-size: 14px;
       text-overflow: ellipsis;
       overflow: hidden;
       transition: color .28s ease;
-      &:hover {
-        color: lighten($tabs-text-color, 20%);
-      }
     }
 
-    &.disabled a {
-      color: lighten($tabs-text-color, 20%);
+    &.disabled a,
+    &.disabled a:hover {
+      color: rgba($tabs-text-color, .7);
       cursor: default;
     }
   }
@@ -54,3 +79,21 @@
     will-change: left, right;
   }
 }
+
+// Fixed sideNav hide on smaller
+@media #{$medium-and-down} {
+  .tabs {
+    display: flex;
+
+    .tab {
+      -webkit-box-flex: 1;
+      -webkit-flex-grow: 1;
+      -ms-flex-positive: 1;
+      flex-grow: 1;
+
+      a {
+        padding: 0 12px;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/materialize/components/_typography.scss

@@ -58,4 +58,4 @@ small { font-size: 75%; }
   @media only screen and (max-width: 360px) {
     font-size: 1.2rem;
   }
-}
+}

data/app/assets/stylesheets/materialize/components/_variables.scss

@@ -1,37 +1,37 @@
-/* ==========================================================================
-   Materialize variables
-   ========================================================================== */
-/**
- * Table of Contents:
- *
- *  1. Colors
- *  2. Badges
- *  3. Buttons
- *  4. Cards
- *  5. Collapsible
- *  6. Chips
- *  7. Date Picker
- *  8. Dropdown
- *  10. Forms
- *  11. Global
- *  12. Grid
- *  13. Navigation Bar
- *  14. Side Navigation
- *  15. Photo Slider
- *  16. Spinners | Loaders
- *  17. Tabs
- *  18. Tables
- *  19. Toasts
- *  20. Typography
- *  21. Footer
- *  22. Flow Text
- *  23. Collections
- *  24. Progress Bar
- */
-
-
-/* 1. Colors
-   ========================================================================== */
+// ==========================================================================
+// Materialize variables
+// ==========================================================================
+//
+// Table of Contents:
+//
+//  1. Colors
+//  2. Badges
+//  3. Buttons
+//  4. Cards
+//  5. Collapsible
+//  6. Chips
+//  7. Date Picker
+//  8. Dropdown
+//  10. Forms
+//  11. Global
+//  12. Grid
+//  13. Navigation Bar
+//  14. Side Navigation
+//  15. Photo Slider
+//  16. Spinners | Loaders
+//  17. Tabs
+//  18. Tables
+//  19. Toasts
+//  20. Typography
+//  21. Footer
+//  22. Flow Text
+//  23. Collections
+//  24. Progress Bar
+
+
+
+// 1. Colors
+// ==========================================================================
 
 $primary-color: color("materialize-red", "lighten-2") !default;
 $primary-color-light: lighten($primary-color, 15%) !default;
@@ -43,14 +43,14 @@ $error-color: color("red", "base") !default;
 $link-color: color("light-blue", "darken-1") !default;
 
 
-/* 2. Badges
-   ========================================================================== */
+// 2. Badges
+// ==========================================================================
 
 $badge-bg-color: $secondary-color !default;
 
 
-/* 3. Buttons
-   ========================================================================== */
+// 3. Buttons
+// ==========================================================================
 
 // Shared styles
 $button-border: none !default;
@@ -81,13 +81,13 @@ $button-flat-disabled-color: lighten(#999, 10%) !default;
 $button-floating-background: $secondary-color !default;
 $button-floating-background-hover: $button-floating-background !default;
 $button-floating-color: #fff !default;
-$button-floating-size: 37px !default;
-$button-floating-large-size: $button-floating-size * 1.5 !default;
+$button-floating-size: 40px !default;
+$button-floating-large-size: 56px !default;
 $button-floating-radius: 50% !default;
 
 
-/* 4. Cards
-   ========================================================================== */
+// 4. Cards
+// ==========================================================================
 
 $card-padding: 20px !default;
 $card-bg-color: #fff !default;
@@ -95,16 +95,16 @@ $card-link-color: color("orange", "accent-2") !default;
 $card-link-color-light: lighten($card-link-color, 20%) !default;
 
 
-/* 5. Collapsible
-   ========================================================================== */
+// 5. Collapsible
+// ==========================================================================
 
 $collapsible-height: 3rem !default;
 $collapsible-header-color: #fff !default;
 $collapsible-border-color: #ddd !default;
 
 
-/* 6. Chips
-   ========================================================================== */
+// 6. Chips
+// ==========================================================================
 
 $chip-bg-color: #e4e4e4 !default;
 $chip-border-color: #9e9e9e !default;
@@ -112,8 +112,8 @@ $chip-selected-color: #26a69a !default;
 $chip-margin: 5px !default;
 
 
-/* 7. Date Picker
-   ========================================================================== */
+// 7. Date Picker
+// ==========================================================================
 
 $datepicker-weekday-bg: darken($secondary-color, 7%) !default;
 $datepicker-date-bg: $secondary-color !default;
@@ -123,8 +123,8 @@ $datepicker-selected: $secondary-color !default;
 $datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%) !default;
 
 
-/* 8. Dropdown
-   ========================================================================== */
+// 8. Dropdown
+// ==========================================================================
 
 $dropdown-bg-color: #fff !default;
 $dropdown-hover-bg-color: #eee !default;
@@ -132,14 +132,14 @@ $dropdown-color: $secondary-color !default;
 $dropdown-item-height: 50px !default;
 
 
-/* 9. Fonts
-   ========================================================================== */
+// 9. Fonts
+// ==========================================================================
 
 $roboto-font-path: "roboto/" !default;
 
 
-/* 10. Forms
-   ========================================================================== */
+// 10. Forms
+// ==========================================================================
 
 // Text Inputs + Textarea
 $input-height: 3rem !default;
@@ -186,8 +186,8 @@ $switch-unchecked-lever-bg: #818181 !default;
 $switch-radius: 15px !default;
 
 
-/* 11. Global
-   ========================================================================== */
+// 11. Global
+// ==========================================================================
 
 // Media Query Ranges
 $small-screen-up: 601px !default;
@@ -204,8 +204,8 @@ $medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
 $medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
 
 
-/* 12. Grid
-   ========================================================================== */
+// 12. Grid
+// ==========================================================================
 
 $num-cols: 12 !default;
 $gutter-width: 1.5rem !default;
@@ -213,8 +213,8 @@ $element-top-margin: $gutter-width/3 !default;
 $element-bottom-margin: ($gutter-width*2)/3 !default;
 
 
-/* 13. Navigation Bar
-   ========================================================================== */
+// 13. Navigation Bar
+// ==========================================================================
 
 $navbar-height: 64px !default;
 $navbar-height-mobile: 56px !default;
@@ -222,8 +222,8 @@ $navbar-font-size: 1rem !default;
 $navbar-font-color: #fff !default;
 $navbar-brand-font-size: 2.1rem !default;
 
-/* 14. Side Navigation
-   ========================================================================== */
+// 14. Side Navigation
+// ==========================================================================
 
 $sidenav-font-size: 14px !default;
 $sidenav-font-color: rgba(0,0,0,.87) !default;
@@ -232,45 +232,45 @@ $sidenav-padding: 16px !default;
 $sidenav-item-height: 48px !default;
 
 
-/* 15. Photo Slider
-   ========================================================================== */
+// 15. Photo Slider
+// ==========================================================================
 
 $slider-bg-color: color('grey', 'base') !default;
 $slider-bg-color-light: color('grey', 'lighten-2') !default;
 $slider-indicator-color: color('green', 'base') !default;
 
 
-/* 16. Spinners | Loaders
-   ========================================================================== */
+// 16. Spinners | Loaders
+// ==========================================================================
 
 $spinner-default-color: $secondary-color !default;
 
 
-/* 17. Tabs
-   ========================================================================== */
+// 17. Tabs
+// ==========================================================================
 
 $tabs-underline-color: $primary-color-light !default;
 $tabs-text-color: $primary-color !default;
 $tabs-bg-color: #fff !default;
 
 
-/* 18. Tables
-   ========================================================================== */
+// 18. Tables
+// ==========================================================================
 
 $table-border-color: #d0d0d0 !default;
 $table-striped-color: #f2f2f2 !default;
 
 
-/* 19. Toasts
-   ========================================================================== */
+// 19. Toasts
+// ==========================================================================
 
 $toast-height: 48px !default;
 $toast-color: #323232 !default;
 $toast-text-color: #fff !default;
 
 
-/* 20. Typography
-   ========================================================================== */
+// 20. Typography
+// ==========================================================================
 
 $off-black: rgba(0, 0, 0, 0.87) !default;
 // Header Styles
@@ -282,22 +282,22 @@ $h5-fontsize: 1.64rem !default;
 $h6-fontsize: 1rem !default;
 
 
-/* 21. Footer
-   ========================================================================== */
+// 21. Footer
+// ==========================================================================
 
 $footer-bg-color: $primary-color !default;
 
 
-/* 22. Flow Text
-   ========================================================================== */
+// 22. Flow Text
+// ==========================================================================
 
 $range : $large-screen - $small-screen !default;
 $intervals: 20 !default;
 $interval-size: $range / $intervals !default;
 
 
-/* 23. Collections
-   ========================================================================== */
+// 23. Collections
+// ==========================================================================
 
 $collection-border-color: #e0e0e0 !default;
 $collection-bg-color: #fff !default;
@@ -307,7 +307,7 @@ $collection-hover-bg-color: #ddd !default;
 $collection-link-color: $secondary-color !default;
 
 
-/* 24. Progress Bar
-   ========================================================================== */
+// 24. Progress Bar
+// ==========================================================================
 
 $progress-bar-color: $secondary-color !default;