@materializecss/materialize 2.0.0-alpha → 2.0.2-alpha

package/package.json

@@ -3,7 +3,7 @@
   "description": "Builds Materialize distribution packages",
   "author": "Alvin Wang, Alan Chang",
   "homepage": "https://materializecss.github.io/materialize/",
-  "version": "2.0.0-alpha",
+  "version": "2.0.2-alpha",
   "main": "dist/js/materialize.js",
   "style": "dist/css/materialize.css",
   "sass": "sass/materialize.scss",

package/sass/components/_collapsible.scss

@@ -43,47 +43,6 @@
   background-color: $collapsible-bg-color;
 }
 
-// Sidenav collapsible styling
-.sidenav,
-.sidenav.sidenav-fixed {
-
-  .collapsible {
-    border: none;
-    box-shadow: none;
-
-    li {
-      padding: 0;
-    }
-  }
-
-  > li:hover,
-  > li.active {
-    background-color: transparent;
-  }
-
-  .collapsible-header {
-    background-color: transparent;
-    border: none;
-    line-height: inherit;
-    height: inherit;
-    padding: 0 $sidenav-padding;
-
-    i {
-      line-height: inherit;
-    }
-  }
-
-  .collapsible-body {
-    border: 0;
-    background-color: $collapsible-bg-color;
-
-    li a {
-      padding: 0 (7.5px + $sidenav-padding) 0 (15px + $sidenav-padding);
-    }
-  }
-
-}
-
 // Popout Collapsible
 
 .collapsible.popout {

package/sass/components/_global.scss

@@ -210,7 +210,8 @@ video.responsive-video {
 
   i,
   [class^="mdi-"], [class*="mdi-"],
-  i.material-icons {
+  i.material-icons, i.material-symbols-outlined,
+  i.material-symbols-rounded, i.material-symbols-sharp {
     display: block;
     float: left;
     font-size: 24px;
@@ -221,7 +222,7 @@ video.responsive-video {
     color: $font-on-primary-color-medium;
     vertical-align: top;
     display: inline-block;
-    font-family: 'Material Icons';
+    font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Symbols Sharp', 'Material Icons';
     font-weight: normal;
     font-style: normal;
     font-size: 25px;

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

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

package/sass/components/_navbar.scss

@@ -27,7 +27,8 @@ nav {
 
   i,
   [class^="mdi-"], [class*="mdi-"],
-  i.material-icons {
+  i.material-icons, i.material-symbols-outlined,
+  i.material-symbols-rounded, i.material-symbols-sharp {
     display: block;
     font-size: 24px;
     height: $navbar-height-mobile;
@@ -97,7 +98,8 @@ nav {
 
     i,
     [class^="mdi-"], [class*="mdi-"],
-    i.material-icons {
+    i.material-icons, i.material-symbols-outlined,
+    i.material-symbols-rounded, i.material-symbols-sharp {
       float: left;
       margin-right: 15px;
     }
@@ -145,7 +147,8 @@ nav {
         margin-right: 15px;
         display: inline-block;
 
-        & > .material-icons {
+        & > .material-icons, & > .material-symbols-outlined,
+        & > .material-symbols-rounded, & > .material-symbols-sharp {
           height: inherit;
           line-height: inherit;
         }

package/sass/components/_sidenav.scss

@@ -1,3 +1,4 @@
+/* This should be an UL-Element*/
 .sidenav {
   position: fixed;
   width: $sidenav-width;
@@ -6,13 +7,14 @@
   margin: 0;
   transform: translateX(-100%);
   height: 100vh;
-  padding-bottom: 60px;
+  padding: 0;
   background-color: $sidenav-bg-color;
   z-index: 999;
   overflow-y: auto;
   will-change: transform;
   backface-visibility: hidden;
-  transform: translateX(-105%);
+  transform: translateX(-105%); 
+  user-select: none;
 
   @extend .z-depth-1;
 
@@ -28,26 +30,49 @@
     margin: 0;
   }
 
-  li {
-    float: none;
-    line-height: $sidenav-line-height;
-
-    &:hover {
-      background-color: $button-flat-hover-background-color;
-    }
+  /* Hover only on top row */
+  a:hover {
+    background-color: $button-flat-hover-background-color;
+  }
+  a:focus {
+    background-color: $button-flat-focus-background-color;
+  }
 
-    &.active {
-      background-color: $button-flat-focus-background-color;
-    }
+  li.active > a:not(.collapsible-header) {
+    color: $font-on-primary-color-main;
+    background-color: $primary-color;
   }
 
+  .collapsible-body > ul { padding-left: 10px; }
+
+  li {    
+    list-style: none;
+    display: grid;
+    align-content: center;
+  }
   li > a {
-    display: block;
+    /* https://stackoverflow.com/questions/5848090/full-width-hover-background-for-nested-lists */
+    //padding-left: calc(100% + $sidenav-padding);
+    //margin-left: -100%;
+    margin: 0 12px;
+    padding: 0 $sidenav-padding;
+    //padding-left: $sidenav-padding;
+
+    // Truncate too long text
+    /*
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    */
+
+    display: flex;
+    height: $sidenav-item-height;
     font-size: $sidenav-font-size;
     font-weight: 500;
-    height: $sidenav-item-height;
-    line-height: $sidenav-line-height;
-    padding: 0 ($sidenav-padding * 2);
+    align-items: center;
+    overflow: hidden;
+    border-radius: 100px;
 
     &:not(.btn):not(.btn-flat):not(.btn-large):not(.btn-floating) {
       color: $sidenav-font-color;
@@ -57,28 +82,21 @@
       margin: 10px 15px;
     }
 
-    & > i,
-    & > [class^="mdi-"], li > a > [class*="mdi-"],
-    & > i.material-icons {
-      float: left;
-      height: $sidenav-item-height;
-      line-height: $sidenav-line-height;
-      margin: 0 ($sidenav-padding * 2) 0 0;
-      width: $sidenav-item-height * 0.5;
+    /* TODO: Use special class in future like "mw-icon" */
+    & > .material-icons, & > .material-symbols-outlined,
+    & > .material-symbols-rounded, & > .material-symbols-sharp {
+      display: inline-flex;
+      vertical-align: middle;
       color: $sidenav-icon-color;
+      margin-right: 12px;
     }
   }
 
-
   .divider {
     margin: ($sidenav-padding * 0.5) 0 0 0;
   }
 
   .subheader {
-    &:hover {
-      background-color: transparent;
-    }
-
     cursor: initial;
     pointer-events: none;
     color: $sidenav-subheader-color;
@@ -87,6 +105,7 @@
     line-height: $sidenav-line-height;
   }
 
+  // Remove this? is very custom
   .user-view {
     position: relative;
     padding: ($sidenav-padding * 2) ($sidenav-padding * 2) 0;
@@ -138,14 +157,12 @@
   }
 }
 
-
 // Touch interaction
 .drag-target {
   // Right Align
   &.right-aligned {
     right: 0;
   }
-
   height: 100%;
   position: fixed;
   top: 0;
@@ -153,7 +170,6 @@
   z-index: 998;
 }
 
-
 // Fixed Sidenav shown
 .sidenav.sidenav-fixed {
   // Right Align
@@ -161,7 +177,6 @@
     right: 0;
     left: auto;
   }
-
   left: 0;
   transform: translateX(0);
   position: fixed;
@@ -177,26 +192,24 @@
         transform: translateX(105%);
       }
     }
-
     > a {
       padding: 0 $sidenav-padding;
     }
-
     .user-view {
       padding: $sidenav-padding $sidenav-padding 0;
     }
   }
 }
 
-
+/*
 .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;
@@ -213,3 +226,19 @@
   z-index: 997;
   display: none;
 }
+
+// Sidenav collapsible styling (Taken from Collapsible.scss)
+.sidenav,
+.sidenav.sidenav-fixed {
+  .collapsible {
+    border: none;
+    box-shadow: none;
+  }
+  .collapsible-header {
+    border: none;
+  }
+  .collapsible-body {
+    border: none;
+    background-color: $collapsible-bg-color;
+  }
+}

package/sass/components/_theme_variables.scss

@@ -0,0 +1,98 @@
+:root, :host {
+    --surface-color: #f3f6fc;
+    --background-color: #ffffff;
+
+    --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-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-disabled: rgba(255, 255, 255, 0.38);
+    --font-on-secondary-color-main: rgba(0, 0, 0, 0.87);
+
+    --hover-color: rgba(0, 0, 0, 0.04);
+    --focus-color: rgba(0, 0, 0, 0.12);
+    --focus-color-solid: #E0E0E0;
+
+    --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-card: var(--surface-color);
+
+    --tooltip-background-color: #313033;
+    --tooltip-font-color: rgba(255, 255, 255, 0.77);
+
+    --separator-color: #DDDDDD; /* borders between components */
+
+    --error-color: #F44336;
+
+    --slider-track-color: rgba(0, 0, 0, 0.26);
+    --switch-thumb-off-color: #ffffff;
+
+    --carousel-indicator-color: rgba(255, 255, 255, 0.45);
+    --carousel-indicator-active-color: #FFF;
+
+    --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-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;
+
+    --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);
+    --font-on-primary-color-disabled: rgba(0, 0, 0, 0.38);
+
+    --hover-color: rgba(255, 255, 255, 0.04);
+    --focus-color: rgba(255, 255, 255, 0.12);
+    --focus-color-solid: #424242;
+
+    --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;
+
+    --secondary-color: #CDDC39;
+    --secondary-color-hover-solid: #DCEB48;
+    --secondary-color-focus-solid: #F5FF61;
+
+    --md_sys_color_on-surface: 230, 225, 229;
+}

package/sass/components/_typography.scss

@@ -6,7 +6,7 @@ a {
 }
 
 html{
-  line-height: 1.5;
+  // line-height: 1.5;
 
   @media only screen and (min-width: 0) {
     font-size: 14px;
@@ -24,6 +24,7 @@ html{
   font-weight: normal;
   color: $text-color;
 }
+
 h1, h2, h3, h4, h5, h6 {
 	font-weight: 400;
 	line-height: 1.3;
@@ -45,7 +46,6 @@ small { font-size: 75%; }
 .light { font-weight: 300; }
 .thin { font-weight: 200; }
 
-
 .flow-text{
   $i: 0;
   @while $i <= $intervals {

package/sass/components/forms/_input-fields.scss

@@ -89,6 +89,7 @@ textarea.materialize-textarea {
       color: $input-focus-color;
     }
     &:focus:not([readonly]) + label,
+    &:not([placeholder=' ']) + label,
     &:not(:placeholder-shown) + label {
       //font-size: 12px; // md.sys.typescale.body-small.size
       // https://stackoverflow.com/questions/34717492/css-transition-font-size-avoid-jittering-wiggling
@@ -187,6 +188,7 @@ textarea.materialize-textarea {
         color: $input-focus-color;
       }
       &:focus:not([readonly]) + label,
+      &:not([placeholder=' ']) + label,
       &:not(:placeholder-shown) + label {
         top: -8px;
         left: 16px;
@@ -271,15 +273,6 @@ textarea.materialize-textarea {
     transform: none;
     left: 1rem;
   }
-  & ~ .mdi-navigation-close,
-  & ~ .material-icons {
-    position: absolute;
-    top: 0;
-    right: 1rem;
-    color: transparent;
-    cursor: pointer;
-    font-size: $input-icon-size;
-  }
 }
 */
 
@@ -291,9 +284,10 @@ textarea {
   background-color: transparent;
 
   &.materialize-textarea {
+    padding-top: 26px !important;
+    padding-bottom: 4px !important;
     line-height: normal;
     overflow-y: hidden; /* prevents scroll bar flash */
-    padding: .8rem 0 .8rem 0; /* prevents text jump on Enter keypress */
     resize: none;
     min-height: $input-height;
     box-sizing: border-box;

package/sass/materialize.scss

@@ -1,15 +1,11 @@
 @charset "UTF-8";
-
 // Color
 @import "components/color-variables";
 @import "components/color-classes";
-
 // Variables;
 @import "components/variables";
-
 // Reset
 @import "components/normalize";
-
 // components
 @import "components/global";
 @import "components/collection";