@materializecss/materialize 1.2.2 → 2.0.1-alpha

package/sass/components/_grid.scss

@@ -1,5 +1,6 @@
 @use "sass:math";
 
+// Container
 .container {
   margin: 0 auto;
   max-width: 1280px;
@@ -15,15 +16,18 @@
     width: 70%;
   }
 }
+/*
 .col .row {
   margin-left: (-1 * $gutter-width * 0.5);
   margin-right: (-1 * $gutter-width * 0.5);
 }
+*/
 
 .section {
   padding-top: 1rem;
   padding-bottom: 1rem;
-
+  // No documented
+  /*
   &.no-pad {
     padding: 0;
   }
@@ -33,15 +37,16 @@
   &.no-pad-top {
     padding-top: 0;
   }
+  */
 }
 
-
 // Mixins to eliminate code repetition
 @mixin reset-offset {
   margin-left: auto;
   left: auto;
   right: auto;
 }
+
 @mixin grid-classes($size, $i, $perc) {
   &.offset-#{$size}#{$i} {
     margin-left: $perc;
@@ -54,105 +59,121 @@
   }
 }
 
-
 .row {
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 20px;
-
-  // Clear floating children
-  &:after {
-    content: "";
-    display: table;
-    clear: both;
+  //--grid-gap: 1rem;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr); //repeat(12, calc(8.33% - var(--grid-gap) + (var(--grid-gap) / 12)));
+  //gap: var(--grid-gap);
+
+  //--- S
+
+  .s1  { grid-column: auto / span 1; }
+  .s2  { grid-column: auto / span 2; }
+  .s3  { grid-column: auto / span 3; }
+  .s4  { grid-column: auto / span 4; }
+  .s5  { grid-column: auto / span 5; }
+  .s6  { grid-column: auto / span 6; }
+  .s7  { grid-column: auto / span 7; }
+  .s8  { grid-column: auto / span 8; }
+  .s9  { grid-column: auto / span 9; }
+  .s10 { grid-column: auto / span 10; }
+  .s11 { grid-column: auto / span 11; }
+  .s12 { grid-column: auto / span 12; }
+
+  .offset-s1  { grid-column-start:  2; }
+  .offset-s2  { grid-column-start:  3; }
+  .offset-s3  { grid-column-start:  4; }
+  .offset-s4  { grid-column-start:  5; }
+  .offset-s5  { grid-column-start:  6; }
+  .offset-s6  { grid-column-start:  7; }
+  .offset-s7  { grid-column-start:  8; }
+  .offset-s8  { grid-column-start:  9; }
+  .offset-s9  { grid-column-start: 10; }
+  .offset-s10 { grid-column-start: 11; }
+  .offset-s11 { grid-column-start: 12; }
+
+  //--- M
+  @media #{$medium-and-up} {
+    .m1  { grid-column: auto / span 1; }
+    .m2  { grid-column: auto / span 2; }
+    .m3  { grid-column: auto / span 3; }
+    .m4  { grid-column: auto / span 4; }
+    .m5  { grid-column: auto / span 5; }
+    .m6  { grid-column: auto / span 6; }
+    .m7  { grid-column: auto / span 7; }
+    .m8  { grid-column: auto / span 8; }
+    .m9  { grid-column: auto / span 9; }
+    .m10 { grid-column: auto / span 10; }
+    .m11 { grid-column: auto / span 11; }
+    .m12 { grid-column: auto / span 12; }
+  
+    .offset-m1  { grid-column-start:  2; }
+    .offset-m2  { grid-column-start:  3; }
+    .offset-m3  { grid-column-start:  4; }
+    .offset-m4  { grid-column-start:  5; }
+    .offset-m5  { grid-column-start:  6; }
+    .offset-m6  { grid-column-start:  7; }
+    .offset-m7  { grid-column-start:  8; }
+    .offset-m8  { grid-column-start:  9; }
+    .offset-m9  { grid-column-start: 10; }
+    .offset-m10 { grid-column-start: 11; }
+    .offset-m11 { grid-column-start: 12; }
   }
 
-  .col {
-    float: left;
-    box-sizing: border-box;
-    padding: 0 $gutter-width * 0.5;
-    min-height: 1px;
-
-    &[class*="push-"],
-    &[class*="pull-"] {
-      position: relative;
-    }
-
-    $i: 1;
-    @while $i <= $num-cols {
-      $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
-      &.s#{$i} {
-        width: $perc;
-        @include reset-offset;
-      }
-      $i: $i + 1;
-    }
-
-    $i: 1;
-    @while $i <= $num-cols {
-      $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
-      @include grid-classes("s", $i, $perc);
-      $i: $i + 1;
-    }
-
-    @media #{$medium-and-up} {
-
-      $i: 1;
-      @while $i <= $num-cols {
-        $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
-        &.m#{$i} {
-          width: $perc;
-          @include reset-offset;
-        }
-        $i: $i + 1
-      }
-
-      $i: 1;
-      @while $i <= $num-cols {
-        $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
-        @include grid-classes("m", $i, $perc);
-        $i: $i + 1;
-      }
-    }
-
-    @media #{$large-and-up} {
-
-      $i: 1;
-      @while $i <= $num-cols {
-        $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
-        &.l#{$i} {
-          width: $perc;
-          @include reset-offset;
-        }
-        $i: $i + 1;
-      }
-
-      $i: 1;
-      @while $i <= $num-cols {
-        $perc: unquote(math.div(100, math.div($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(math.div(100, math.div($num-cols, $i)) + "%");
-        &.xl#{$i} {
-          width: $perc;
-          @include reset-offset;
-        }
-        $i: $i + 1;
-      }
+  //--- L
+  @media #{$large-and-up} {
+    .l1  { grid-column: auto / span 1; }
+    .l2  { grid-column: auto / span 2; }
+    .l3  { grid-column: auto / span 3; }
+    .l4  { grid-column: auto / span 4; }
+    .l5  { grid-column: auto / span 5; }
+    .l6  { grid-column: auto / span 6; }
+    .l7  { grid-column: auto / span 7; }
+    .l8  { grid-column: auto / span 8; }
+    .l9  { grid-column: auto / span 9; }
+    .l10 { grid-column: auto / span 10; }
+    .l11 { grid-column: auto / span 11; }
+    .l12 { grid-column: auto / span 12; }
+  
+    .offset-l1  { grid-column-start:  2; }
+    .offset-l2  { grid-column-start:  3; }
+    .offset-l3  { grid-column-start:  4; }
+    .offset-l4  { grid-column-start:  5; }
+    .offset-l5  { grid-column-start:  6; }
+    .offset-l6  { grid-column-start:  7; }
+    .offset-l7  { grid-column-start:  8; }
+    .offset-l8  { grid-column-start:  9; }
+    .offset-l9  { grid-column-start: 10; }
+    .offset-l10 { grid-column-start: 11; }
+    .offset-l11 { grid-column-start: 12; }
+  }
 
-      $i: 1;
-      @while $i <= $num-cols {
-        $perc: unquote(math.div(100, math.div($num-cols, $i)) + "%");
-        @include grid-classes("xl", $i, $perc);
-        $i: $i + 1;
-      }
-    }
+  //--- XL
+  @media #{$extra-large-and-up} {
+    .xl1  { grid-column: auto / span 1; }
+    .xl2  { grid-column: auto / span 2; }
+    .xl3  { grid-column: auto / span 3; }
+    .xl4  { grid-column: auto / span 4; }
+    .xl5  { grid-column: auto / span 5; }
+    .xl6  { grid-column: auto / span 6; }
+    .xl7  { grid-column: auto / span 7; }
+    .xl8  { grid-column: auto / span 8; }
+    .xl9  { grid-column: auto / span 9; }
+    .xl10 { grid-column: auto / span 10; }
+    .xl11 { grid-column: auto / span 11; }
+    .xl12 { grid-column: auto / span 12; }
+  
+    .offset-xl1  { grid-column-start:  2; }
+    .offset-xl2  { grid-column-start:  3; }
+    .offset-xl3  { grid-column-start:  4; }
+    .offset-xl4  { grid-column-start:  5; }
+    .offset-xl5  { grid-column-start:  6; }
+    .offset-xl6  { grid-column-start:  7; }
+    .offset-xl7  { grid-column-start:  8; }
+    .offset-xl8  { grid-column-start:  9; }
+    .offset-xl9  { grid-column-start: 10; }
+    .offset-xl10 { grid-column-start: 11; }
+    .offset-xl11 { grid-column-start: 12; }
   }
+
 }

package/sass/components/_modal.scss

@@ -9,7 +9,7 @@
   position: fixed;
   left: 0;
   right: 0;
-  background-color: #fafafa;
+  background-color: $modal-background-color;
   padding: 0;
   max-height: 70%;
   width: 55%;
@@ -38,7 +38,7 @@
 
   .modal-footer {
     border-radius: 0 0 2px 2px;
-    background-color: #fafafa;
+    background-color: $modal-background-color;
     padding: 4px 6px;
     height: 56px;
     width: 100%;
@@ -79,7 +79,7 @@
   }
 
   .modal-footer {
-    border-top: 1px solid rgba(0,0,0,.1);
+    border-top: 1px solid $divider-color;
     position: absolute;
     bottom: 0;
   }

package/sass/components/_navbar.scss

@@ -16,11 +16,14 @@ nav {
   color: $navbar-font-color;
   @extend .z-depth-1;
   background-color: $primary-color;
+
   width: 100%;
   height: $navbar-height-mobile;
   line-height: $navbar-line-height-mobile;
 
-  a { color: $navbar-font-color; }
+  a {
+    color: $navbar-font-color;
+  }
 
   i,
   [class^="mdi-"], [class*="mdi-"],
@@ -37,10 +40,11 @@ nav {
   }
 
   @media #{$large-and-up} {
-    a.sidenav-trigger { display: none; }
+    a.sidenav-trigger {
+      display: none;
+    }
   }
 
-
   // Collapse button
   .sidenav-trigger {
     float: left;
@@ -55,7 +59,6 @@ nav {
     }
   }
 
-
   // Logo
   .brand-logo {
     position: absolute;
@@ -78,7 +81,9 @@ nav {
         transform: none;
       }
 
-      &.left { left: 0.5rem; }
+      &.left {
+        left: 0.5rem;
+      }
       &.right {
         right: 0.5rem;
         left: auto;
@@ -108,18 +113,16 @@ nav {
 
 
   // Navbar Links
-  ul {
+  ul:not(.dropdown-content) {
+    list-style-type: none;
     margin: 0;
 
     li {
       transition: background-color .3s;
       float: left;
       padding: 0;
-
-      &.active {
-        background-color: rgba(0,0,0,.1);
-      }
     }
+
     a {
       transition: background-color .3s;
       font-size: $navbar-font-size;
@@ -128,20 +131,25 @@ nav {
       padding: 0 15px;
       cursor: pointer;
 
+      &.active {
+        background-color: $navbar-bg-color-focus;
+      }
+
+      &:hover:not(.active) {
+        background-color: $navbar-bg-color-hover;
+      }
+
       &.btn, &.btn-large, &.btn-flat, &.btn-floating {
         margin-top: -2px;
         margin-left: 15px;
         margin-right: 15px;
+        display: inline-block;
 
         & > .material-icons {
           height: inherit;
           line-height: inherit;
         }
       }
-
-      &:hover {
-        background-color: rgba(0,0,0,.1);
-      }
     }
 
     &.left {
@@ -158,11 +166,12 @@ nav {
     margin: 0;
     height: 100%;
 
-    input {
+    input[type=search] {
       height: 100%;
       font-size: 1.2rem;
       border: none;
       padding-left: 2rem;
+      color: #888; //$navbar-font-color;
 
       &:focus, &[type=text]:valid, &[type=password]:valid,
       &[type=email]:valid, &[type=url]:valid, &[type=date]:valid {
@@ -176,10 +185,13 @@ nav {
       left: 0;
 
       i {
-        color: rgba(255,255,255,.7);
+        color: $font-on-primary-color-medium;
         transition: color .3s;
       }
-      &.active i { color: $navbar-font-color; }
+
+      &.active i {
+        color: $navbar-font-color;
+      }
     }
   }
 }
@@ -192,8 +204,10 @@ nav {
 
   nav {
     position: fixed;
+    right: 0;
   }
 }
+
 @media #{$medium-and-up} {
   nav.nav-extended .nav-wrapper {
     min-height: $navbar-height;