@materializecss/materialize 2.0.2-alpha → 2.0.3-beta

package/sass/components/_global.scss

@@ -78,7 +78,6 @@ a {
 
 .hoverable {
   transition: box-shadow .25s;
-
   &:hover {
     box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   }
@@ -91,7 +90,6 @@ a {
   background-color: $divider-color;
 }
 
-
 //  Blockquote
 blockquote {
   margin: 20px 0;
@@ -102,29 +100,24 @@ blockquote {
 // Icon Styles
 i {
   line-height: inherit;
-
   &.left {
     float: left;
-    margin-right: 15px;
+    margin-left: -8px;
+    // margin-right: 15px;
   }
-
   &.right {
     float: right;
-    margin-left: 15px;
+    // margin-left: 15px;
   }
-
   &.tiny {
     font-size: 1rem;
   }
-
   &.small {
     font-size: 2rem;
   }
-
   &.medium {
     font-size: 4rem;
   }
-
   &.large {
     font-size: 6rem;
   }
@@ -396,6 +389,11 @@ ul.staggered-list li {
   }
 }
 
+.page-footer ul {
+  padding-left: 0;
+  list-style-type: none;
+}
+
 // Tables
 table, th, td {
   border: none;
@@ -520,10 +518,8 @@ td, th {
       border-right: 1px solid $table-border-color;
     }
   }
-
 }
 
-
 // Responsive Videos
 .video-container {
   position: relative;
@@ -540,88 +536,6 @@ td, th {
   }
 }
 
-// Progress Bar
-.progress {
-  position: relative;
-  height: 4px;
-  display: block;
-  width: 100%;
-  background-color: $progress-bar-track-color;
-  border-radius: 2px;
-  margin: $element-top-margin 0 $element-bottom-margin 0;
-  overflow: hidden;
-
-  .determinate {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    background-color: $progress-bar-color;
-    transition: width .3s linear;
-  }
-
-  .indeterminate {
-    background-color: $progress-bar-color;
-
-    &:before {
-      content: '';
-      position: absolute;
-      background-color: inherit;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      will-change: left, right;
-      // Custom bezier
-      animation: indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite;
-
-    }
-
-    &:after {
-      content: '';
-      position: absolute;
-      background-color: inherit;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      will-change: left, right;
-      // Custom bezier
-      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite;
-      animation-delay: 1.15s;
-    }
-  }
-}
-
-@keyframes indeterminate {
-  0% {
-    left: -35%;
-    right: 100%;
-  }
-  60% {
-    left: 100%;
-    right: -90%;
-  }
-  100% {
-    left: 100%;
-    right: -90%;
-  }
-}
-
-@keyframes indeterminate-short {
-  0% {
-    left: -200%;
-    right: 100%;
-  }
-  60% {
-    left: 107%;
-    right: -8%;
-  }
-  100% {
-    left: 107%;
-    right: -8%;
-  }
-}
-
-
 /*******************
   Utility Classes
 *******************/
@@ -639,12 +553,15 @@ td, th {
 .center, .center-align {
   text-align: center;
 }
+
+// TODO: Remove this
 .left {
   float: left !important;
 }
 .right {
   float: right !important;
 }
+
 // No Text Select
 .no-select {
   user-select: none;
@@ -666,3 +583,48 @@ td, th {
 .no-padding {
   padding: 0 !important;
 }
+
+/**************************
+  Utility Spacing Classes
+**************************/
+
+$spacing-shortcuts: ("margin": "m", "padding": "p") !default;
+$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default;
+$spacing-horizontal: "x" !default;
+$spacing-vertical: "y" !default;
+$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default; 
+
+@each $property, $shortcut in $spacing-shortcuts{
+  @each $name, $value in $spacing-values{
+    // All direction spacing
+
+    .#{$shortcut}-#{$name}{
+      #{$property}: $value !important;
+    }
+
+    // (t, b, r, l) spacing
+    @each $direction, $suffix in $spacing-directions{
+      .#{$shortcut}#{$suffix}-#{$name}{
+        #{$property}-#{$direction}: $value !important 
+      }
+    }
+
+    // x spacing
+    @if $spacing-horizontal != null{
+       .#{$shortcut}#{$spacing-horizontal}-#{$name}{
+         #{$property}-left: $value !important;
+         #{$property}-right: $value !important;
+       }
+    }
+
+    // y spacing
+    @if $spacing-vertical != null{
+      .#{$shortcut}#{$spacing-vertical}-#{$name}{
+        #{$property}-top: $value !important;
+        #{$property}-bottom: $value !important;
+      }
+        
+    }
+      
+  }
+} 

package/sass/components/_grid.scss

@@ -16,28 +16,9 @@
     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;
-  }
-  &.no-pad-bot {
-    padding-bottom: 0;
-  }
-  &.no-pad-top {
-    padding-top: 0;
-  }
-  */
+  padding: 1rem 0;
 }
 
 // Mixins to eliminate code repetition
@@ -80,15 +61,15 @@
   .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-s1 { grid-column-start:  3; }
+  .offset-s2 { grid-column-start:  2; }
+  .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; }
 
@@ -107,15 +88,15 @@
     .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-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; }
   }
@@ -163,15 +144,15 @@
     .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-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/_navbar.scss

@@ -15,7 +15,7 @@ nav {
 
   color: $navbar-font-color;
   @extend .z-depth-1;
-  background-color: $primary-color;
+  background-color: $secondary-container-color;
 
   width: 100%;
   height: $navbar-height-mobile;
@@ -119,38 +119,38 @@ nav {
     list-style-type: none;
     margin: 0;
 
-    li {
+    & > li {
       transition: background-color .3s;
       float: left;
       padding: 0;
-    }
 
-    a {
-      transition: background-color .3s;
-      font-size: $navbar-font-size;
-      color: $navbar-font-color;
-      display: block;
-      padding: 0 15px;
-      cursor: pointer;
-
-      &.active {
-        background-color: $navbar-bg-color-focus;
-      }
+      & > a {
+        transition: background-color .3s;
+        font-size: $navbar-font-size;
+        color: $navbar-font-color;
+        display: block;
+        padding: 0 15px;
+        cursor: pointer;
 
-      &:hover:not(.active) {
-        background-color: $navbar-bg-color-hover;
-      }
+        &.active {
+          background-color: $navbar-bg-color-focus;
+        }
 
-      &.btn, &.btn-large, &.btn-flat, &.btn-floating {
-        margin-top: -2px;
-        margin-left: 15px;
-        margin-right: 15px;
-        display: inline-block;
+        &:hover:not(.active) {
+          background-color: $navbar-bg-color-hover;
+        }
 
-        & > .material-icons, & > .material-symbols-outlined,
-        & > .material-symbols-rounded, & > .material-symbols-sharp {
-          height: inherit;
-          line-height: inherit;
+        &.btn, &.btn-large, &.btn-flat, &.btn-floating {
+          margin-top: -2px;
+          margin-left: 15px;
+          margin-right: 15px;
+          display: inline-block;
+
+          & > .material-icons, & > .material-symbols-outlined,
+          & > .material-symbols-rounded, & > .material-symbols-sharp {
+            height: inherit;
+            line-height: inherit;
+          }
         }
       }
     }

package/sass/components/_preloader.scss

@@ -1,3 +1,88 @@
+// Progress Bar
+.progress {
+  position: relative;
+  height: 4px;
+  display: block;
+  width: 100%;
+
+  @extend .surface-variant;
+
+  border-radius: 2px;
+  margin: $element-top-margin 0 $element-bottom-margin 0;
+  overflow: hidden;
+
+  .determinate {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    background-color: $progress-bar-color;
+    transition: width .3s linear;
+  }
+
+  .indeterminate {
+    background-color: $progress-bar-color;
+
+    &:before {
+      content: '';
+      position: absolute;
+      background-color: inherit;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      will-change: left, right;
+      // Custom bezier
+      animation: indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite;
+
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      background-color: inherit;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      will-change: left, right;
+      // Custom bezier
+      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite;
+      animation-delay: 1.15s;
+    }
+  }
+}
+
+@keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+
+@keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+
+
+
 /*
     @license
     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.

package/sass/components/_pulse.scss

@@ -3,6 +3,7 @@
     content: '';
     display: block;
     position: absolute;
+    pointer-events: none;
     width: 100%;
     height: 100%;
     top: 0;

package/sass/components/_sidenav.scss

@@ -38,9 +38,9 @@
     background-color: $button-flat-focus-background-color;
   }
 
-  li.active > a:not(.collapsible-header) {
-    color: $font-on-primary-color-main;
-    background-color: $primary-color;
+  li.active > a:not(.collapsible-header):not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating)  {
+    color: $font-on-secondary-container-color;
+    background-color: $secondary-container-color;
   }
 
   .collapsible-body > ul { padding-left: 10px; }
@@ -201,16 +201,6 @@
   }
 }
 
-/*
-.sidenav .collapsible-body > ul:not(.collapsible) > li.active,
-.sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active {
-  background-color: $primary-color;
-  a:not(.btn) {
-    color: $font-on-primary-color-main;
-  }
-}
-*/
-
 .sidenav .collapsible-body {
   padding: 0;
 }
@@ -239,6 +229,5 @@
   }
   .collapsible-body {
     border: none;
-    background-color: $collapsible-bg-color;
   }
 }

package/sass/components/_theme_variables.scss

@@ -1,17 +1,17 @@
 :root, :host {
-    --surface-color: #f3f6fc;
-    --background-color: #ffffff;
+    --surface-color: var(--md-sys-color-surface);
+    --background-color: var(--md-sys-color-background);
 
-    --font-color-main: rgba(0, 0, 0, 0.87);
-    --font-color-medium: rgba(0, 0, 0, 0.56);
-    --font-color-disabled: rgba(0, 0, 0, 0.38);
+    --font-color-main: var(--md-sys-color-on-background);
+    --font-color-medium: var(--md-sys-color-on-surface-variant);
+    --font-color-disabled: var(--md-sys-color-on-surface);
 
-    --font-on-primary-color-main: rgba(255, 255, 255, 0.87);
-    --font-on-primary-color-dark-main: rgba(255, 255, 255, 0.87);
-    --font-on-primary-color-dark-medium: rgba(255, 255, 255, 0.60);
-    --font-on-primary-color-medium: rgba(255, 255, 255, 0.60);
+    --font-on-primary-color-main: var(--md-sys-color-on-primary);
+    --font-on-primary-color-dark-main: var(--md-sys-color-on-primary-dark);
+    --font-on-primary-color-dark-medium: var(--md-sys-color-on-surface-variant-dark);
+    --font-on-primary-color-medium:  var(--md-sys-color-on-surface-variant);
     --font-on-primary-color-disabled: rgba(255, 255, 255, 0.38);
-    --font-on-secondary-color-main: rgba(0, 0, 0, 0.87);
+    --font-on-secondary-color-main: var(--md-sys-color-on-secondary);
 
     --hover-color: rgba(0, 0, 0, 0.04);
     --focus-color: rgba(0, 0, 0, 0.12);
@@ -20,7 +20,7 @@
     --background-color-disabled: rgba(0, 0, 0, 0.12);
     --background-color-level-4dp: rgba(0, 0, 0, 0.09);
     --background-color-level-16dp-solid: var(--surface-color);
-    --background-color-slight-emphasis: rgba(0, 0, 0, 0.025); /* stripes in table */
+    --background-color-slight-emphasis: rgba(0, 0, 0, 0.08);
     --background-color-card: var(--surface-color);
 
     --tooltip-background-color: #313033;
@@ -30,41 +30,32 @@
 
     --error-color: #F44336;
 
-    --slider-track-color: rgba(0, 0, 0, 0.26);
-    --switch-thumb-off-color: #ffffff;
+    --slider-track-color: var(--md-sys-color-shadow-light);
+    --switch-thumb-off-color: var(--md-ref-palette-primary100);
 
     --carousel-indicator-color: rgba(255, 255, 255, 0.45);
-    --carousel-indicator-active-color: #FFF;
+    --carousel-indicator-active-color: var(--md-ref-palette-primary100);
 
-    --primary-color: #26a69a;
-    --primary-color-dark: #009688;
-    --primary-color-numeric: 38, 166, 154;
-    --primary-color-raised-hover-solid: #30B0A4;
-    --primary-color-raised-focus-solid: #44C4B8;
+    --primary-color: var(--md-sys-color-primary);
+    --primary-color-dark: var(--md-sys-color-primary-dark);    
+    --primary-color-raised-hover-solid: var(--md-ref-palette-primary70);
+    --primary-color-raised-focus-solid: var(--md-ref-palette-primary80);
     --primary-color-font-medium-color: rgba(var(--primary-color-numeric), 0.7);
     --primary-color-font-disabled-color: rgba(var(--primary-color-numeric), 0.4);
     --primary-color-hover-opaque: rgba(var(--primary-color-numeric), 0.06);
     --primary-color-focus-opaque: rgba(var(--primary-color-numeric), 0.18);
 
-    --secondary-color: #EF5350;
-    --secondary-color-hover-solid: #FE625F;
-    --secondary-color-focus-solid: #FF7B78;
+    --secondary-color: var(--md-sys-color-secondary);
+    --secondary-color-hover-solid: var(--md-ref-palette-secondary70);
+    --secondary-color-focus-solid:  var(--md-ref-palette-secondary80);
+    --secondary-container-color: var(--md-sys-color-secondary-container);
+    --font-on-secondary-container-color: var(--md-sys-color-on-secondary-container);
 
     --md_sys_color_on-surface: 28, 27, 31;
 }
 
-:root[theme='dark'], :host[theme='dark'] {
-    --background-color: #121212;
-    --surface-color: #242424;
-
-    --font-color-main: rgba(255, 255, 255, 0.87);
-    --font-color-medium: rgba(255, 255, 255, 0.60);
-    --font-color-disabled: rgba(255, 255, 255, 0.38);
-
-    --font-on-primary-color-main: rgba(0, 0, 0, 0.87);
-    --font-on-primary-color-dark-main: rgba(255, 255, 255, 0.87);
-    --font-on-primary-color-dark-medium: rgba(255, 255, 255, 0.60);
-    --font-on-primary-color-medium: rgba(0, 0, 0, 0.56);
+//important: when all variables are assigned this could be removed as will be no difference
+:root[theme='dark'] {
     --font-on-primary-color-disabled: rgba(0, 0, 0, 0.38);
 
     --hover-color: rgba(255, 255, 255, 0.04);
@@ -73,26 +64,15 @@
 
     --background-color-disabled: rgba(255, 255, 255, 0.12);
     --background-color-level-4dp: rgba(255, 255, 255, 0.09);
-    --background-color-level-16dp-solid: #262626;
-    --background-color-card: var(--surface-color);
     --background-color-slight-emphasis: rgba(255, 255, 255, 0.05);
 
     --separator-color: #424242; /* borders between components */
 
     --error-color: #CF6679;
 
-    --slider-track-color: rgba(255, 255, 255, 0.26);
     --switch-thumb-off-color: #bababa;
 
-    --primary-color: #B39DDB;
-    --primary-color-dark: #9575CD;
-    --primary-color-numeric: 179, 157, 219;
-    --primary-color-raised-hover-solid: #C2ACEA;
-    --primary-color-raised-focus-solid: #DBC5FF;
+    --md_sys_color_on-surface: 230, 225, 229;
+}
 
-    --secondary-color: #CDDC39;
-    --secondary-color-hover-solid: #DCEB48;
-    --secondary-color-focus-solid: #F5FF61;
 
-    --md_sys_color_on-surface: 230, 225, 229;
-}

package/sass/components/_variables.scss

@@ -62,6 +62,8 @@ $font-on-secondary-color-main: var(--font-on-secondary-color-main) !default;
 $secondary-color: var(--secondary-color) !default;
 $secondary-color-when-hovered-solid: var(--secondary-color-hover-solid) !default;
 $secondary-color-when-focused-solid: var(--secondary-color-focus-solid) !default;
+$secondary-container-color: var(--secondary-container-color) !default;
+$font-on-secondary-container-color: var(--font-on-secondary-container-color) !default;
 
 $success-color: color("green", "base") !default;
 $error-color: var(--error-color) !default;
@@ -95,7 +97,7 @@ $button-raised-color: $font-on-primary-color-main !default;
 $button-border: none !default;
 $button-background-focus: $button-raised-background-focus !default;
 $button-font-size: 14px !default;
-$button-icon-font-size: 1.3rem !default;
+$button-icon-font-size: 18px !default;
 $button-height: 40px !default;
 $button-padding: 0 16px !default;
 $button-radius: 4px !default;
@@ -114,6 +116,7 @@ $button-floating-large-size: 56px !default;
 $button-small-font-size: 13px !default;
 $button-small-icon-font-size: 1.2rem !default;
 $button-small-height: $button-height * .75 !default;
+$button-small-padding: 0 8px !default;
 $button-floating-small-size: $button-height * .75 !default;
 
 // Flat buttons
@@ -128,7 +131,7 @@ $button-floating-background-hover: $secondary-color-when-hovered-solid !default;
 $button-floating-background-focus: $secondary-color-when-focused-solid !default;
 $button-floating-color: $font-on-secondary-color-main !default;
 $button-floating-size: 40px !default;
-$button-floating-radius: 50% !default;
+$button-floating-radius: 16px !default;
 
 
 // 4. Cards