@materializecss/materialize 2.0.1-alpha → 2.0.3-alpha

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):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; }
+
+  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,27 +192,15 @@
         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 +216,18 @@
   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;
+  }
+}

package/sass/components/_theme_variables.scss

@@ -1,17 +1,17 @@
-:root {
-    --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);
+:root, :host {
+    --surface-color: var(--md-sys-color-surface);
+    --background-color: var(--md-sys-color-background);
+
+    --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: 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;
 }
 
+//important: when all variables are assigned this could be removed as will be no difference
 :root[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);
@@ -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/_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/_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;

package/sass/components/colors.module.scss

@@ -0,0 +1,180 @@
+.primary {
+  background-color: var(--md-sys-color-primary);
+}
+.primary-text {
+  color: var(--md-sys-color-primary);
+}
+.on-primary {
+  background-color: var(--md-sys-color-on-primary);
+}
+.on-primary-text {
+  color: var(--md-sys-color-on-primary);
+}
+.primary-container {
+  background-color: var(--md-sys-color-primary-container);
+}
+.primary-container-text {
+  color: var(--md-sys-color-primary-container);
+}
+.on-primary-container {
+  background-color: var(--md-sys-color-on-primary-container);
+}
+.on-primary-container-text {
+  color: var(--md-sys-color-on-primary-container);
+}
+.secondary {
+  background-color: var(--md-sys-color-secondary);
+}
+.secondary-text {
+  color: var(--md-sys-color-secondary);
+}
+.on-secondary {
+  background-color: var(--md-sys-color-on-secondary);
+}
+.on-secondary-text {
+  color: var(--md-sys-color-on-secondary);
+}
+.secondary-container {
+  background-color: var(--md-sys-color-secondary-container);
+}
+.secondary-container-text {
+  color: var(--md-sys-color-secondary-container);
+}
+.on-secondary-container {
+  background-color: var(--md-sys-color-on-secondary-container);
+}
+.on-secondary-container-text {
+  color: var(--md-sys-color-on-secondary-container);
+}
+.tertiary {
+  background-color: var(--md-sys-color-tertiary);
+}
+.tertiary-text {
+  color: var(--md-sys-color-tertiary);
+}
+.on-tertiary {
+  background-color: var(--md-sys-color-on-tertiary);
+}
+.on-tertiary-text {
+  color: var(--md-sys-color-on-tertiary);
+}
+.tertiary-container {
+  background-color: var(--md-sys-color-tertiary-container);
+}
+.tertiary-container-text {
+  color: var(--md-sys-color-tertiary-container);
+}
+.on-tertiary-container {
+  background-color: var(--md-sys-color-on-tertiary-container);
+}
+.on-tertiary-container-text {
+  color: var(--md-sys-color-on-tertiary-container);
+}
+.error {
+  background-color: var(--md-sys-color-error);
+}
+.error-text {
+  color: var(--md-sys-color-error);
+}
+.on-error {
+  background-color: var(--md-sys-color-on-error);
+}
+.on-error-text {
+  color: var(--md-sys-color-on-error);
+}
+.error-container {
+  background-color: var(--md-sys-color-error-container);
+}
+.error-container-text {
+  color: var(--md-sys-color-error-container);
+}
+.on-error-container {
+  background-color: var(--md-sys-color-on-error-container);
+}
+.on-error-container-text {
+  color: var(--md-sys-color-on-error-container);
+}
+.background {
+  background-color: var(--md-sys-color-background);
+}
+.background-text {
+  color: var(--md-sys-color-background);
+}
+.on-background {
+  background-color: var(--md-sys-color-on-background);
+}
+.on-background-text {
+  color: var(--md-sys-color-on-background);
+}
+.surface {
+  background-color: var(--md-sys-color-surface);
+}
+.surface-text {
+  color: var(--md-sys-color-surface);
+}
+.on-surface {
+  background-color: var(--md-sys-color-on-surface);
+}
+.on-surface-text {
+  color: var(--md-sys-color-on-surface);
+}
+.surface-variant {
+  background-color: var(--md-sys-color-surface-variant);
+}
+.surface-variant-text {
+  color: var(--md-sys-color-surface-variant);
+}
+.on-surface-variant {
+  background-color: var(--md-sys-color-on-surface-variant);
+}
+.on-surface-variant-text {
+  color: var(--md-sys-color-on-surface-variant);
+}
+.outline {
+  background-color: var(--md-sys-color-outline);
+}
+.outline-text {
+  color: var(--md-sys-color-outline);
+}
+.inverse-on-surface {
+  background-color: var(--md-sys-color-inverse-on-surface);
+}
+.inverse-on-surface-text {
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.inverse-surface {
+  background-color: var(--md-sys-color-inverse-surface);
+}
+.inverse-surface-text {
+  color: var(--md-sys-color-inverse-surface);
+}
+.inverse-primary {
+  background-color: var(--md-sys-color-inverse-primary);
+}
+.inverse-primary-text {
+  color: var(--md-sys-color-inverse-primary);
+}
+.shadow {
+  background-color: var(--md-sys-color-shadow);
+}
+.shadow-text {
+  color: var(--md-sys-color-shadow);
+}
+.surface-tint {
+  background-color: var(--md-sys-color-surface-tint);
+}
+.surface-tint-text {
+  color: var(--md-sys-color-surface-tint);
+}
+.outline-variant {
+  background-color: var(--md-sys-color-outline-variant);
+}
+.outline-variant-text {
+  color: var(--md-sys-color-outline-variant);
+}
+.scrim {
+  background-color: var(--md-sys-color-scrim);
+}
+.scrim-text {
+  color: var(--md-sys-color-scrim);
+}

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/components/theme.dark.module.scss

@@ -0,0 +1,32 @@
+:root[theme='dark'] {
+ --md-sys-color-primary: var(--md-sys-color-primary-dark);
+ --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
+ --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
+ --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
+ --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
+ --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
+ --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
+ --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
+ --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
+ --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
+ --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
+ --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
+ --md-sys-color-error: var(--md-sys-color-error-dark);
+ --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
+ --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
+ --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
+ --md-sys-color-outline: var(--md-sys-color-outline-dark);
+ --md-sys-color-background: var(--md-sys-color-background-dark);
+ --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
+ --md-sys-color-surface: var(--md-sys-color-surface-dark);
+ --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
+ --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
+ --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
+ --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
+ --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
+ --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
+ --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
+ --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
+ --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
+ --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
+}

package/sass/components/theme.light.module.scss

@@ -0,0 +1,32 @@
+:root {
+ --md-sys-color-primary: var(--md-sys-color-primary-light);
+ --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
+ --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
+ --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
+ --md-sys-color-secondary: var(--md-sys-color-secondary-light);
+ --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
+ --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
+ --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
+ --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
+ --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
+ --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
+ --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
+ --md-sys-color-error: var(--md-sys-color-error-light);
+ --md-sys-color-on-error: var(--md-sys-color-on-error-light);
+ --md-sys-color-error-container: var(--md-sys-color-error-container-light);
+ --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
+ --md-sys-color-outline: var(--md-sys-color-outline-light);
+ --md-sys-color-background: var(--md-sys-color-background-light);
+ --md-sys-color-on-background: var(--md-sys-color-on-background-light);
+ --md-sys-color-surface: var(--md-sys-color-surface-light);
+ --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
+ --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
+ --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
+ --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
+ --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
+ --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
+ --md-sys-color-shadow: var(--md-sys-color-shadow-light);
+ --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
+ --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
+ --md-sys-color-scrim: var(--md-sys-color-scrim-light);
+}