@materializecss/materialize 2.0.4 → 2.1.0

package/sass/components/forms/_checkboxes.scss

@@ -33,7 +33,7 @@
     width: 18px;
     height: 18px;
     z-index: 0;
-    border: 2px solid $radio-empty-color;
+    border: 2px solid var(--md-sys-color-on-surface-variant);
     border-radius: 1px;
     margin-top: 3px;
     transition: .2s;
@@ -46,7 +46,7 @@
 
   &:not(:checked):disabled + span:not(.lever):before {
     border: none;
-    background-color: $input-disabled-color;
+    background-color: var(--md-sys-color-on-surface);
   }
 
   // Focused styles
@@ -54,8 +54,8 @@
     transform: scale(1);
     border: 0;
     border-radius: 50%;
-    box-shadow: 0 0 0 10px $surface-focus-color-opaque;
-    background-color: $surface-focus-color-opaque;
+    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.12);
+    background-color: rgba(0, 0, 0, 0.12);
   }
 }
 
@@ -67,16 +67,16 @@
     height: 22px;
     border-top: 2px solid transparent;
     border-left: 2px solid transparent;
-    border-right: $radio-border;
-    border-bottom: $radio-border;
+    border-right: 2px solid var(--md-sys-color-primary);
+    border-bottom: 2px solid var(--md-sys-color-primary);
     transform: rotate(40deg);
     backface-visibility: hidden;
     transform-origin: 100% 100%;
   }
 
   &:disabled + span:before {
-    border-right: 2px solid $input-disabled-color;
-    border-bottom: 2px solid $input-disabled-color;
+    border-right: 2px solid var(--md-sys-color-on-surface);
+    border-bottom: 2px solid var(--md-sys-color-on-surface);
   }
 }
 
@@ -89,7 +89,7 @@
     height: 22px;
     border-top: none;
     border-left: none;
-    border-right: $radio-border;
+    border-right: 2px solid var(--md-sys-color-primary);
     border-bottom: none;
     transform: rotate(90deg);
     backface-visibility: hidden;
@@ -98,7 +98,7 @@
 
   // Disabled indeterminate
   &:disabled + span:not(.lever):before {
-    border-right: 2px solid $input-disabled-color;
+    border-right: 2px solid var(--md-sys-color-on-surface);
     background-color: transparent;
   }
 }
@@ -135,7 +135,7 @@
     height: 20px;
     width: 20px;
     background-color: transparent;
-    border: 2px solid $radio-empty-color;
+    border: 2px solid var(--md-sys-color-on-surface-variant);
     top: 0px;
     z-index: 0;
   }
@@ -149,8 +149,8 @@
       height: 13px;
       border-top: 2px solid transparent;
       border-left: 2px solid transparent;
-      border-right: 2px solid $font-on-primary-color-main;
-      border-bottom: 2px solid $font-on-primary-color-main;
+      border-right: 2px solid  var(--md-sys-color-on-primary);
+      border-bottom: 2px solid  var(--md-sys-color-on-primary);
       transform: rotateZ(37deg);
       transform-origin: 100% 100%;
     }
@@ -159,8 +159,8 @@
       top: 0;
       width: 20px;
       height: 20px;
-      border: 2px solid $primary-color;
-      background-color: $primary-color;
+      border: 2px solid var(--md-sys-color-primary);
+      background-color: var(--md-sys-color-primary);
       z-index: 0;
     }
   }
@@ -168,14 +168,14 @@
   // Focused styles
   &.tabbed:focus + span:not(.lever):after {
     border-radius: 2px;
-    border-color: $radio-empty-color;
-    background-color: $surface-focus-color-opaque;
+    border-color: var(--md-sys-color-on-surface-variant)r;
+    background-color: rgba(0, 0, 0, 0.12);
   }
 
   &.tabbed:checked:focus + span:not(.lever):after {
     border-radius: 2px;
-    background-color: $primary-color;
-    border-color: $primary-color;
+    background-color: var(--md-sys-color-primary);
+    border-color: var(--md-sys-color-primary);
   }
 
   // Disabled style
@@ -186,7 +186,7 @@
 
   &:disabled:not(:checked) + span:not(.lever):after {
     border-color: transparent;
-    background-color: $input-disabled-solid-color;
+    background-color: var(--md-sys-color-on-surface);
   }
 
   &:disabled:checked + span:not(.lever):before {
@@ -194,7 +194,7 @@
   }
 
   &:disabled:checked + span:not(.lever):after {
-    background-color: $input-disabled-solid-color;
-    border-color: $input-disabled-solid-color;
+    background-color: var(--md-sys-color-on-surface);
+    border-color: var(--md-sys-color-on-surface);
   }
 }

package/sass/components/forms/_file-input.scss

@@ -1,6 +1,3 @@
-/* File Input
-   ========================================================================== */
-
 .file-field {
   //position: relative;
   display: grid;
@@ -15,8 +12,8 @@
   input.file-path { width: 100%; }
 
   .btn {
-    height: $input-height;
-    line-height: $input-height;
+    height: 3rem;
+    line-height: 3rem;
   }
 
   span {

package/sass/components/forms/_forms.scss

@@ -1,16 +1,18 @@
 // Remove Focus Boxes
 select:focus {
-  outline: $select-focus;
+  outline: 1px solid var(--md-ref-palette-primary80);
 }
 
+/*
 button:focus {
   outline: none;
   background-color: $button-background-focus;
 }
+*/
 
 label {
-  font-size: $label-font-size;
-  color: $input-border-color;
+  font-size: .8rem;
+  color: var(--md-sys-color-on-surface-variant);
 }
 
 @import 'input-fields';

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

@@ -1,9 +1,6 @@
-/* Text Inputs + Textarea
-   ========================================================================== */
-
 /* Style Placeholders */
 ::placeholder {
-  color: $placeholder-text-color;
+  color: var(--md-sys-color-on-surface-variant);
 }
 
 /* Text inputs */
@@ -22,20 +19,20 @@ input[type=number]:not(.browser-default),
 input[type=search]:not(.browser-default),
 textarea.materialize-textarea { 
   outline: none;
-  color: $input-color;
+  color: var(--md-sys-color-on-background);
   width: 100%;  
-  font-size: $md_sys_typescale_body-large_size; //$input-font-size; // => 16 dp
-  height: 56px; // 56dp $input-height;
+  font-size: $md_sys_typescale_body-large_size; //16px; // => 16 dp
+  height: 56px; // 56dp
 }
 
 /* Validation Sass Placeholders */
 %valid-input-style {
-  border-bottom: 1px solid $input-success-color;
-  box-shadow: 0 1px 0 0 $input-success-color;
+  border-bottom: 1px solid $success-color;
+  box-shadow: 0 1px 0 0 $success-color;
 }
 %invalid-input-style {
-  border-bottom: $input-invalid-border;
-  box-shadow: 0 1px 0 0 $input-error-color;
+  border-bottom: 2px solid var(--md-sys-color-error);
+  box-shadow: 0 1px 0 0 var(--md-sys-color-error);
 }
 %hidden-text {
   color: transparent;
@@ -45,15 +42,17 @@ textarea.materialize-textarea {
 /*
 %custom-success-message {
   content: attr(data-success);
-  color: $input-success-color;
+  color: $success-color;
 }
 %custom-error-message {
   content: attr(data-error);
-  color: $input-error-color;
+  color: var(--md-sys-color-error);
 }
 */
 
 .input-field {
+  --input-color: var(--md-sys-color-primary);
+
   position: relative;
   clear: both;
  
@@ -65,28 +64,28 @@ textarea.materialize-textarea {
     padding: 0 16px;
     padding-top: 20px;
 
-    background-color: $surface-color;
+    background-color: var(--md-sys-color-surface);
 
     border: none; // reset
     border-radius: 4px; // md.sys.shape.corner.extra-small.top
-    border-bottom: 1px solid $input-border-color;
+    border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
    
     &:focus:not([readonly]) {
-      border-bottom: 2px solid $input-focus-color;
+      border-bottom: 2px solid var(--input-color);
       padding-top: 20px + 1px; // add border-width
     }
 
     &:disabled, &[readonly="readonly"] {
-      color: $textfield_disabled_color;
-      border-color: $textfield_disabled_outlinecolor;
-      background-color: $textfield_disabled_containercolor;
+      color: rgba(var(--md_sys_color_on-surface), 0.38);
+      border-color: rgba(var(--md_sys_color_on-surface), 0.12);
+      background-color: rgba(var(--md_sys_color_on-surface), 0.04);
     }
 
     // Label
     &:focus:not([readonly]) + label {
-      color: $input-focus-color;
+      color: var(--input-color);
     }
     &:focus:not([readonly]) + label,
     &:not([placeholder=' ']) + label,
@@ -98,7 +97,7 @@ textarea.materialize-textarea {
     }
 
     &:disabled + label, &[readonly="readonly"] + label {
-      color: $textfield_disabled_color;
+      color: rgba(var(--md_sys_color_on-surface), 0.38);
     }
   }
 
@@ -107,7 +106,7 @@ textarea.materialize-textarea {
   }
 
   & > label {
-    color: $input-border-color;
+    color: var(--md-sys-color-on-surface-variant);
     user-select: none;
     font-size: 16px;
     position: absolute;
@@ -125,14 +124,14 @@ textarea.materialize-textarea {
   // Sub-Infos
 
   .supporting-text {
-    color: $input-border-color;
+    color: var(--md-sys-color-on-surface-variant);
     font-size: 12px;
     padding: 0 16px;
     margin-top: 4px;
   }
 
   .character-counter {
-    color: $input-border-color;
+    color: var(--md-sys-color-on-surface-variant);
     font-size: 12px;
     float: right;
     padding: 0 16px;
@@ -172,20 +171,20 @@ textarea.materialize-textarea {
     input, textarea {
       padding-top: 0;
 
-      background-color: var(--background-color);
+      background-color: var(--md-sys-color-background);
 
-      border: 1px solid $input-border-color;
+      border: 1px solid var(--md-sys-color-on-surface-variant);
       border-radius: 4px; // md.sys.shape.corner.extra-small
 
       &:focus:not([readonly]) {
-        border: 2px solid $input-focus-color;
+        border: 2px solid var(--input-color);
         padding-top: 0;
         margin-left: -1px; // subtract border-width
 
       }
       // Label
       &:focus:not([readonly]) + label {
-        color: $input-focus-color;
+        color: var(--input-color);
       }
       &:focus:not([readonly]) + label,
       &:not([placeholder=' ']) + label,
@@ -194,12 +193,12 @@ textarea.materialize-textarea {
         left: 16px;
         margin-left: -4px;
         padding: 0 4px;
-        background-color: var(--background-color);
+        background-color: var(--md-sys-color-background);
       }
 
       &:disabled, &[readonly="readonly"] {
-        color: $textfield_disabled_color;
-        border-color: $textfield_disabled_outlinecolor;
+        color: rgba(var(--md_sys_color_on-surface), 0.38);
+        border-color: rgba(var(--md_sys_color_on-surface), 0.12);
       }
       
     }
@@ -208,22 +207,22 @@ textarea.materialize-textarea {
   // Error
   &.error {
     input, textarea {
-      border-color: var(--error-color);
+      border-color: var(--md-sys-color-error);
     }
     input:focus:not([readonly]), textarea:focus:not([readonly]) {
-      border-color: var(--error-color);
+      border-color: var(--md-sys-color-error);
     }
     input:focus:not([readonly]) + label, textarea:focus:not([readonly]) + label {
-      color: var(--error-color);
+      color: var(--md-sys-color-error);
     }
     label {
-      color: var(--error-color);
+      color: var(--md-sys-color-error);
     }
     .supporting-text {
-      color: var(--error-color);
+      color: var(--md-sys-color-error);
     }
     .suffix {
-      color: var(--error-color);
+      color: var(--md-sys-color-error);
     }
   }
 }
@@ -249,7 +248,7 @@ textarea.materialize-textarea {
 .searchbar.has-sidebar {
   margin-left: 0;
   @media #{$large-and-up} {
-    margin-left: $sidenav-width;
+    margin-left: 300px;
   }
 }
 
@@ -280,7 +279,7 @@ textarea.materialize-textarea {
 // Default textarea
 textarea {
   width: 100%;
-  height: $input-height;
+  height: 3rem;
   background-color: transparent;
 
   &.materialize-textarea {
@@ -289,7 +288,7 @@ textarea {
     line-height: normal;
     overflow-y: hidden; /* prevents scroll bar flash */
     resize: none;
-    min-height: $input-height;
+    min-height: 3rem;
     box-sizing: border-box;
   }
 }
@@ -311,7 +310,7 @@ textarea {
 /* Autocomplete Items */
 .autocomplete-content {
   li {
-    .highlight { color: $font-color-main; }
+    .highlight { color: var(--md-sys-color-on-background); }
     img {
       height: $dropdown-item-height - 10;
       width: $dropdown-item-height - 10;

package/sass/components/forms/_radio-buttons.scss

@@ -1,6 +1,3 @@
-/* Radio Buttons
-   ========================================================================== */
-
 // Remove default Radio Buttons
 [type="radio"]:not(:checked),
 [type="radio"]:checked {
@@ -47,7 +44,7 @@
 
 [type="radio"]:not(:checked) + span:before,
 [type="radio"]:not(:checked) + span:after {
-  border: 2px solid $radio-empty-color;
+  border: 2px solid var(--md-sys-color-on-surface-variant);
 }
 
 [type="radio"]:not(:checked) + span:after {
@@ -62,12 +59,12 @@
 [type="radio"]:checked + span:after,
 [type="radio"].with-gap:checked + span:before,
 [type="radio"].with-gap:checked + span:after {
-  border: $radio-border;
+  border: 2px solid var(--md-sys-color-primary);
 }
 
 [type="radio"]:checked + span:after,
 [type="radio"].with-gap:checked + span:after {
-  background-color: $radio-fill-color;
+  background-color: var(--md-sys-color-primary);
 }
 
 [type="radio"]:checked + span:after {
@@ -81,35 +78,35 @@
 
 /* Focused styles */
 [type="radio"].tabbed:focus + span:before {
-  box-shadow: 0 0 0 10px $primary-color-focus-opaque;
+  box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
 }
 
 /* Disabled Radio With gap */
 [type="radio"].with-gap:disabled:checked + span:before {
-  border: 2px solid $input-disabled-color;
+  border: 2px solid var(--md-sys-color-on-surface);
 }
 
 [type="radio"].with-gap:disabled:checked + span:after {
   border: none;
-  background-color: $input-disabled-color;
+  background-color: var(--md-sys-color-on-surface);
 }
 
 /* Disabled style */
 [type="radio"]:disabled:not(:checked) + span:before,
 [type="radio"]:disabled:checked + span:before {
   background-color: transparent;
-  border-color: $input-disabled-color;
+  border-color: var(--md-sys-color-on-surface);
 }
 
 [type="radio"]:disabled + span {
-  color: $input-disabled-color;
+  color: var(--md-sys-color-on-surface);
 }
 
 [type="radio"]:disabled:not(:checked) + span:before {
-  border-color: $input-disabled-color;
+  border-color: var(--md-sys-color-on-surface);
 }
 
 [type="radio"]:disabled:checked + span:after {
-  background-color: $input-disabled-color;
-  border-color: $input-disabled-solid-color;
+  background-color: var(--md-sys-color-on-surface);
+  border-color: var(--md-sys-color-on-surface);
 }

package/sass/components/forms/_range.scss

@@ -1,6 +1,3 @@
-/* Range
-   ========================================================================== */
-
 .range-field {
   position: relative;
 }
@@ -33,7 +30,7 @@ input[type=range] + .thumb {
   height: 0;
   width: 0;
   border-radius: 50%;
-  background-color: $radio-fill-color;
+  background-color: var(--md-sys-color-primary);
   margin-left: 7px;
 
   transform-origin: 50% 50%;
@@ -43,7 +40,7 @@ input[type=range] + .thumb {
     display: block;
     width: 30px;
     text-align: center;
-    color: $radio-fill-color;
+    color: var(--md-sys-color-primary);
     font-size: 0;
     transform: rotate(45deg);
   }
@@ -52,7 +49,7 @@ input[type=range] + .thumb {
     border-radius: 50% 50% 50% 0;
 
     .value {
-      color: $font-on-primary-color-main;
+      color:  var(--md-sys-color-on-primary);
       margin-left: -1px;
       margin-top: 8px;
       font-size: 10px;
@@ -62,17 +59,17 @@ input[type=range] + .thumb {
 
 // Shared
 @mixin range-track {
-  height: $track-height;
+  height: 3px;
   @extend .surface-variant;
   border: none;
 }
 
 @mixin range-thumb {
   border: none;
-  height: $range-height;
-  width: $range-width;
+  height: 14px;
+  width: 14px;
   border-radius: 50%;
-  background: $radio-fill-color;
+  background: var(--md-sys-color-primary);
   transition: box-shadow .3s;
 }
 
@@ -88,19 +85,18 @@ input[type=range]::-webkit-slider-runnable-track {
 input[type=range]::-webkit-slider-thumb {
   @include range-thumb;
   -webkit-appearance: none;
-  background-color: $radio-fill-color;
+  background-color: var(--md-sys-color-primary);
   transform-origin: 50% 50%;
   margin: -5px 0 0 0;
 
 }
 
 .keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb {
-  box-shadow: 0 0 0 10px $radio-focus-color;
+  box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
 }
 
 // FireFox
 input[type=range] {
-
   /*required for proper track sizing in FF*/
 }
 
@@ -124,38 +120,34 @@ input[type=range]:-moz-focusring {
 }
 
 .keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb {
-  box-shadow: 0 0 0 10px $radio-focus-color;
+  box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
 }
 
+//------------------------------- Remove this?
 // IE 10+
 input[type=range]::-ms-track {
-  height: $track-height;
-
+  height: 3px;
   // remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead
   background: transparent;
-
   // leave room for the larger thumb to overflow with a transparent border */
   border-color: transparent;
   border-width: 6px 0;
-
   /*remove default tick marks*/
   color: transparent;
 }
-
 input[type=range]::-ms-fill-lower,
 input[type=range]::-moz-range-progress {
-  background: $primary-color;
+  background: var(--md-sys-color-primary);
 }
-
 input[type=range]::-ms-fill-upper,
 input[type=range]::-moz-range-track {
-  background: $range-track-color;
+  background: var(--md-sys-color-shadow-light);
 }
-
 input[type=range]::-ms-thumb {
   @include range-thumb;
 }
+//--------------------------------
 
 .keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb {
-  box-shadow: 0 0 0 10px $radio-focus-color;
+  box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
 }