@materializecss/materialize 1.1.0-alpha → 1.1.0

package/sass/components/_grid.scss

@@ -1,156 +1,158 @@
-.container {
-  margin: 0 auto;
-  max-width: 1280px;
-  width: 90%;
-}
-@media #{$medium-and-up} {
-  .container {
-    width: 85%;
-  }
-}
-@media #{$large-and-up} {
-  .container {
-    width: 70%;
-  }
-}
-.col .row {
-  margin-left: (-1 * $gutter-width / 2);
-  margin-right: (-1 * $gutter-width / 2);
-}
-
-.section {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-
-  &.no-pad {
-    padding: 0;
-  }
-  &.no-pad-bot {
-    padding-bottom: 0;
-  }
-  &.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;
-  }
-  &.pull-#{$size}#{$i} {
-    right: $perc;
-  }
-  &.push-#{$size}#{$i} {
-    left: $perc;
-  }
-}
-
-
-.row {
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 20px;
-
-  // Clear floating children
-  &:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
-  .col {
-    float: left;
-    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;
-        @include reset-offset;
-      }
-      $i: $i + 1;
-    }
-
-    $i: 1;
-    @while $i <= $num-cols {
-      $perc: unquote((100 / ($num-cols / $i)) + "%");
-      @include grid-classes("s", $i, $perc);
-      $i: $i + 1;
-    }
-
-    @media #{$medium-and-up} {
-
-      $i: 1;
-      @while $i <= $num-cols {
-        $perc: unquote((100 / ($num-cols / $i)) + "%");
-        &.m#{$i} {
-          width: $perc;
-          @include reset-offset;
-        }
-        $i: $i + 1
-      }
-
-      $i: 1;
-      @while $i <= $num-cols {
-        $perc: unquote((100 / ($num-cols / $i)) + "%");
-        @include grid-classes("m", $i, $perc);
-        $i: $i + 1;
-      }
-    }
-
-    @media #{$large-and-up} {
-
-      $i: 1;
-      @while $i <= $num-cols {
-        $perc: unquote((100 / ($num-cols / $i)) + "%");
-        &.l#{$i} {
-          width: $perc;
-          @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)) + "%");
-        &.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;
-      }
-    }
-  }
-}
+@use "sass:math";
+
+.container {
+  margin: 0 auto;
+  max-width: 1280px;
+  width: 90%;
+}
+@media #{$medium-and-up} {
+  .container {
+    width: 85%;
+  }
+}
+@media #{$large-and-up} {
+  .container {
+    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-pad {
+    padding: 0;
+  }
+  &.no-pad-bot {
+    padding-bottom: 0;
+  }
+  &.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;
+  }
+  &.pull-#{$size}#{$i} {
+    right: $perc;
+  }
+  &.push-#{$size}#{$i} {
+    left: $perc;
+  }
+}
+
+
+.row {
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 20px;
+
+  // Clear floating children
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  .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;
+      }
+
+      $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;
+      }
+    }
+  }
+}

package/sass/components/_icons-material-design.scss

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

package/sass/components/_materialbox.scss

@@ -1,43 +1,43 @@
-.materialboxed {
-  &:hover {
-    &:not(.active) {
-      opacity: .8;
-    }
-  }
-
-  display: block;
-  cursor: zoom-in;
-  position: relative;
-  transition: opacity .4s;
-  -webkit-backface-visibility: hidden;
-
-  &.active {
-    cursor: zoom-out;
-  }
-}
-
-#materialbox-overlay {
-  position:fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: #292929;
-  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;
+.materialboxed {
+  &:hover {
+    &:not(.active) {
+      opacity: .8;
+    }
+  }
+
+  display: block;
+  cursor: zoom-in;
+  position: relative;
+  transition: opacity .4s;
+  -webkit-backface-visibility: hidden;
+
+  &.active {
+    cursor: zoom-out;
+  }
+}
+
+#materialbox-overlay {
+  position:fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #292929;
+  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;
 }

package/sass/components/_modal.scss

@@ -1,97 +1,97 @@
-.modal {
-  &:focus {
-    outline: none;
-  }
-
-  @extend .z-depth-5;
-
-  display: none;
-  position: fixed;
-  left: 0;
-  right: 0;
-  background-color: #fafafa;
-  padding: 0;
-  max-height: 70%;
-  width: 55%;
-  margin: auto;
-  overflow-y: auto;
-
-  border-radius: 2px;
-  will-change: top, opacity;
-
-  @media #{$medium-and-down} {
-    width: 80%;
-  }
-
-  h1,h2,h3,h4 {
-    margin-top: 0;
-  }
-
-  .modal-content {
-    padding: 24px;
-    overflow-y: hidden;
-  }
-
-  .modal-close {
-    cursor: pointer;
-  }
-
-  .modal-footer {
-    border-radius: 0 0 2px 2px;
-    background-color: #fafafa;
-    padding: 4px 6px;
-    height: 56px;
-    width: 100%;
-    text-align: right;
-
-    .btn, .btn-flat {
-      margin: 6px 0;
-    }
-  }
-}
-
-.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;
-}
-
-// Modal with fixed action footer
-.modal.modal-fixed-footer {
-  padding: 0;
-  height: 70%;
-
-  .modal-content {
-    position: absolute;
-    height: calc(100% - 56px);
-    max-height: 100%;
-    width: 100%;
-    overflow-y: auto;
-  }
-
-  .modal-footer {
-    border-top: 1px solid rgba(0,0,0,.1);
-    position: absolute;
-    bottom: 0;
-  }
-}
-
-// Modal Bottom Sheet Style
-.modal.bottom-sheet {
-  top: auto;
-  bottom: -100%;
-  margin: 0;
-  width: 100%;
-  max-height: 45%;
-  border-radius: 0;
-  will-change: bottom, opacity;
-}
+.modal {
+  &:focus {
+    outline: none;
+  }
+
+  @extend .z-depth-5;
+
+  display: none;
+  position: fixed;
+  left: 0;
+  right: 0;
+  background-color: #fafafa;
+  padding: 0;
+  max-height: 70%;
+  width: 55%;
+  margin: auto;
+  overflow-y: auto;
+
+  border-radius: 2px;
+  will-change: top, opacity;
+
+  @media #{$medium-and-down} {
+    width: 80%;
+  }
+
+  h1,h2,h3,h4 {
+    margin-top: 0;
+  }
+
+  .modal-content {
+    padding: 24px;
+    overflow-y: hidden;
+  }
+
+  .modal-close {
+    cursor: pointer;
+  }
+
+  .modal-footer {
+    border-radius: 0 0 2px 2px;
+    background-color: #fafafa;
+    padding: 4px 6px;
+    height: 56px;
+    width: 100%;
+    text-align: right;
+
+    .btn, .btn-flat {
+      margin: 6px 0;
+    }
+  }
+}
+
+.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;
+}
+
+// Modal with fixed action footer
+.modal.modal-fixed-footer {
+  padding: 0;
+  height: 70%;
+
+  .modal-content {
+    position: absolute;
+    height: calc(100% - 56px);
+    max-height: 100%;
+    width: 100%;
+    overflow-y: auto;
+  }
+
+  .modal-footer {
+    border-top: 1px solid rgba(0,0,0,.1);
+    position: absolute;
+    bottom: 0;
+  }
+}
+
+// Modal Bottom Sheet Style
+.modal.bottom-sheet {
+  top: auto;
+  bottom: -100%;
+  margin: 0;
+  width: 100%;
+  max-height: 45%;
+  border-radius: 0;
+  will-change: bottom, opacity;
+}