materialize-sass 0.97.0 → 1.0.0.1

data/{app/assets → assets}/stylesheets/materialize/components/_grid.scss

@@ -13,14 +13,14 @@
     width: 70%;
   }
 }
-.container .row {
+.col .row {
   margin-left: (-1 * $gutter-width / 2);
   margin-right: (-1 * $gutter-width / 2);
 }
 
 .section {
-	padding-top: 1rem;
-	padding-bottom: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
 
   &.no-pad {
     padding: 0;
@@ -34,6 +34,25 @@
 }
 
 
+// Mixins to eliminate code repitition
+@mixin reset-offset {
+  margin-left: auto;
+  left: auto;
+  right: auto;
+}
+@mixin grid-classes($size, $i, $perc) {
+  &.offset-#{$size}#{$i} {
+    margin-left: $perc;
+  }
+  &.pull-#{$size}#{$i} {
+    right: $perc;
+  }
+  &.push-#{$size}#{$i} {
+    left: $perc;
+  }
+}
+
+
 .row {
   margin-left: auto;
   margin-right: auto;
@@ -48,24 +67,29 @@
 
   .col {
     float: left;
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     padding: 0 $gutter-width / 2;
+    min-height: 1px;
+
+    &[class*="push-"],
+    &[class*="pull-"] {
+      position: relative;
+    }
 
     $i: 1;
     @while $i <= $num-cols {
       $perc: unquote((100 / ($num-cols / $i)) + "%");
       &.s#{$i} {
         width: $perc;
-        margin-left: 0;
+        @include reset-offset;
       }
       $i: $i + 1;
     }
+
     $i: 1;
     @while $i <= $num-cols {
       $perc: unquote((100 / ($num-cols / $i)) + "%");
-      &.offset-s#{$i} {
-        margin-left: $perc;
-      }
+      @include grid-classes("s", $i, $perc);
       $i: $i + 1;
     }
 
@@ -76,19 +100,17 @@
         $perc: unquote((100 / ($num-cols / $i)) + "%");
         &.m#{$i} {
           width: $perc;
-          margin-left: 0;
+          @include reset-offset;
         }
-        $i: $i + 1;
+        $i: $i + 1
       }
+
       $i: 1;
       @while $i <= $num-cols {
         $perc: unquote((100 / ($num-cols / $i)) + "%");
-        &.offset-m#{$i} {
-          margin-left: $perc;
-        }
+        @include grid-classes("m", $i, $perc);
         $i: $i + 1;
       }
-
     }
 
     @media #{$large-and-up} {
@@ -98,20 +120,37 @@
         $perc: unquote((100 / ($num-cols / $i)) + "%");
         &.l#{$i} {
           width: $perc;
-          margin-left: 0;
+          @include reset-offset;
         }
         $i: $i + 1;
       }
+
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        @include grid-classes("l", $i, $perc);
+        $i: $i + 1;
+      }
+    }
+
+    @media #{$extra-large-and-up} {
+
       $i: 1;
       @while $i <= $num-cols {
         $perc: unquote((100 / ($num-cols / $i)) + "%");
-        &.offset-l#{$i} {
-          margin-left: $perc;
+        &.xl#{$i} {
+          width: $perc;
+          @include reset-offset;
         }
         $i: $i + 1;
       }
 
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        @include grid-classes("xl", $i, $perc);
+        $i: $i + 1;
+      }
     }
-
   }
 }

data/assets/stylesheets/materialize/components/_icons-material-design.scss

@@ -0,0 +1,5 @@
+/* This is needed for some mobile phones to display the Google Icon font properly */
+.material-icons {
+  text-rendering: optimizeLegibility;
+  font-feature-settings: 'liga';
+}

data/{app/assets → assets}/stylesheets/materialize/components/_materialbox.scss

@@ -1,41 +1,43 @@
 .materialboxed {
-  cursor: zoom-in;
-  position: relative;
-  @include transition(opacity .4s);
-
   &:hover {
     &:not(.active) {
       opacity: .8;
     }
-    will-change: left, top, width, height;
   }
-}
 
-.materialboxed.active {
-  cursor: zoom-out;
+  display: block;
+  cursor: zoom-in;
+  position: relative;
+  transition: opacity .4s;
+  -webkit-backface-visibility: hidden;
+
+  &.active {
+    cursor: zoom-out;
+  }
 }
 
 #materialbox-overlay {
   position:fixed;
-  top:0;
-  left:0;
+  top: 0;
   right: 0;
   bottom: 0;
+  left: 0;
   background-color: #292929;
-  z-index: 999;
-
+  z-index: 1000;
   will-change: opacity;
 }
+
 .materialbox-caption {
   position: fixed;
   display: none;
   color: #fff;
   line-height: 50px;
   bottom: 0;
+  left: 0;
   width: 100%;
   text-align: center;
   padding: 0% 15%;
   height: 50px;
   z-index: 1000;
   -webkit-font-smoothing: antialiased;
-}
+}

data/{app/assets → assets}/stylesheets/materialize/components/_modal.scss

@@ -1,5 +1,9 @@
 .modal {
-  @extend .z-depth-4;
+  &:focus {
+    outline: none;
+  }
+
+  @extend .z-depth-5;
 
   display: none;
   position: fixed;
@@ -36,26 +40,26 @@
     padding: 4px 6px;
     height: 56px;
     width: 100%;
+    text-align: right;
 
     .btn, .btn-flat {
-      float: right;
       margin: 6px 0;
     }
   }
 }
-.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: -25%;
+  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 → assets}/stylesheets/materialize/components/_navbar.scss

@@ -1,39 +1,57 @@
 nav {
+  &.nav-extended {
+    height: auto;
+
+    .nav-wrapper {
+      min-height: $navbar-height-mobile;
+      height: auto;
+    }
+
+    .nav-content {
+      position: relative;
+      line-height: normal;
+    }
+  }
+
   color: $navbar-font-color;
   @extend .z-depth-1;
   background-color: $primary-color;
   width: 100%;
   height: $navbar-height-mobile;
-  line-height: $navbar-height-mobile;
+  line-height: $navbar-line-height-mobile;
 
   a { color: $navbar-font-color; }
 
+  i,
+  [class^="mdi-"], [class*="mdi-"],
+  i.material-icons {
+    display: block;
+    font-size: 24px;
+    height: $navbar-height-mobile;
+    line-height: $navbar-line-height-mobile;
+  }
+
   .nav-wrapper {
     position: relative;
     height: 100%;
-
-    i {
-      display: block;
-      font-size: 2rem;
-    }
   }
 
   @media #{$large-and-up} {
-    a.button-collapse { display: none; }
+    a.sidenav-trigger { display: none; }
   }
 
 
   // Collapse button
-  .button-collapse {
+  .sidenav-trigger {
     float: left;
     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;
+      line-height: $navbar-line-height-mobile;
     }
   }
 
@@ -45,22 +63,47 @@ nav {
     display: inline-block;
     font-size: $navbar-brand-font-size;
     padding: 0;
-    white-space: nowrap;
 
     &.center {
       left: 50%;
-      @include transform(translateX(-50%));
+      transform: translateX(-50%);
     }
 
     @media #{$medium-and-down} {
       left: 50%;
-      @include transform(translateX(-50%));
+      transform: translateX(-50%);
+
+      &.left, &.right {
+        padding: 0;
+        transform: none;
+      }
+
+      &.left { left: 0.5rem; }
+      &.right {
+        right: 0.5rem;
+        left: auto;
+      }
     }
 
     &.right {
       right: 0.5rem;
       padding: 0;
     }
+
+    i,
+    [class^="mdi-"], [class*="mdi-"],
+    i.material-icons {
+      float: left;
+      margin-right: 15px;
+    }
+  }
+
+
+  // Title
+  .nav-title {
+    display: inline-block;
+    font-size: 32px;
+    padding: 28px 0;
   }
 
 
@@ -69,19 +112,36 @@ nav {
     margin: 0;
 
     li {
-      @include transition(background-color .3s);
+      transition: background-color .3s;
       float: left;
       padding: 0;
 
-      &:hover, &.active {
+      &.active {
         background-color: rgba(0,0,0,.1);
       }
     }
     a {
-      font-size: 1rem;
+      transition: background-color .3s;
+      font-size: $navbar-font-size;
       color: $navbar-font-color;
       display: block;
       padding: 0 15px;
+      cursor: pointer;
+
+      &.btn, &.btn-large, &.btn-flat, &.btn-floating {
+        margin-top: -2px;
+        margin-left: 15px;
+        margin-right: 15px;
+
+        & > .material-icons {
+          height: inherit;
+          line-height: inherit;
+        }
+      }
+
+      &:hover {
+        background-color: rgba(0,0,0,.1);
+      }
     }
 
     &.left {
@@ -90,8 +150,13 @@ nav {
   }
 
   // Navbar Search Form
+  form {
+    height: 100%;
+  }
+
   .input-field {
     margin: 0;
+    height: 100%;
 
     input {
       height: 100%;
@@ -105,38 +170,37 @@ nav {
         box-shadow: none;
       }
     }
+
     label {
       top: 0;
       left: 0;
 
       i {
         color: rgba(255,255,255,.7);
-        @include transition(color .3s);
+        transition: color .3s;
       }
       &.active i { color: $navbar-font-color; }
-      &.active {
-        @include transform(translateY(0));
-      }
     }
-
   }
-
 }
 
 // Fixed Navbar
 .navbar-fixed {
   position: relative;
   height: $navbar-height-mobile;
-  z-index: 998;
+  z-index: 997;
 
   nav {
     position: fixed;
   }
 }
 @media #{$medium-and-up} {
-  nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
+  nav.nav-extended .nav-wrapper {
+    min-height: $navbar-height;
+  }
+  nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
     height: $navbar-height;
-    line-height: $navbar-height;
+    line-height: $navbar-line-height;
   }
   .navbar-fixed {
     height: $navbar-height;