@materializecss/materialize 2.2.1 → 2.2.2

package/sass/components/forms/_checkboxes.scss

@@ -1,5 +1,4 @@
-/* Checkboxes
-   ========================================================================== */
+/* Checkboxes */
 
 /* Remove default checkbox */
 [type="checkbox"]:not(:checked),

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

@@ -1,9 +1,8 @@
 .file-field {
-  //position: relative;
   display: grid;
   grid-template-columns: min-content auto;
   gap: 10px;
-  
+  //position: relative;
 
   .file-path-wrapper {
     overflow: hidden;
@@ -21,17 +20,11 @@
   }
 
   input[type=file] {
-    // Needed to override webkit button
-    &::-webkit-file-upload-button {
-      display: none;
-    }
-    
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
-    bottom: 0;
-    
+    bottom: 0;    
     cursor: pointer;
     width: 100%;
     margin: 0;
@@ -39,5 +32,10 @@
     opacity: 0;
     font-size: 20px;    
     filter: alpha(opacity=0);
+
+    // Needed to override webkit button
+    &::-webkit-file-upload-button {
+      display: none;
+    }
   }
 }

package/sass/components/forms/_forms.scss

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

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

@@ -1,3 +1,5 @@
+@use '../variables' as *;
+
 /* Style Placeholders */
 ::placeholder {
   color: var(--md-sys-color-on-surface-variant);
@@ -23,15 +25,18 @@ textarea.materialize-textarea {
   width: 100%;
   font-size: $md_sys_typescale_body-large_size; //16px; // => 16 dp
   height: 56px; // 56dp
+  background-color: transparent;
 }
 
 %invalid-input-style {
   border-bottom: 2px solid var(--md-sys-color-error);
   box-shadow: 0 1px 0 0 var(--md-sys-color-error);
 }
+
 %hidden-text > span {
   display: none
 }
+
 %custom-error-message {
   content: attr(data-error);
   color: var(--md-sys-color-error);
@@ -47,12 +52,9 @@ textarea.materialize-textarea {
 
   input, textarea {
     box-sizing: border-box; /* https://stackoverflow.com/questions/1377719/padding-within-inputs-breaks-width-100*/
-
     padding: 0 16px;
     padding-top: 20px;
-
-    background-color: var(--md-sys-color-surface);
-
+    //background-color: transparent; //background-color: var(--md-sys-color-surface);
     border: none; // reset
     border-radius: 4px; // md.sys.shape.corner.extra-small.top
     border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
@@ -173,13 +175,14 @@ textarea.materialize-textarea {
 
   // Outlined
 
+  // todo: use this approach for floating labels with outline
+  // https://dev.to/icyjoseph/use-more-html-elements-floating-from-field-37o9
+
   &.outlined {
 
     input, textarea {
       padding-top: 0;
-
-      background-color: var(--md-sys-color-background);
-
+      background-color: transparent; //(--md-sys-color-background);
       border: 1px solid var(--md-sys-color-on-surface-variant);
       border-radius: 4px; // md.sys.shape.corner.extra-small
 
@@ -189,6 +192,7 @@ textarea.materialize-textarea {
         margin-left: -1px; // subtract border-width
 
       }
+
       // Label
       &:focus:not([readonly]) + label {
         color: var(--input-color);
@@ -200,14 +204,13 @@ textarea.materialize-textarea {
         left: 16px;
         margin-left: -4px;
         padding: 0 4px;
-        background-color: var(--md-sys-color-background);
+        background-color: transparent; //var(--md-sys-color-background);
       }
 
       &:disabled, &[readonly="readonly"] {
         color: rgba(var(--md_sys_color_on-surface), 0.38);
         border-color: rgba(var(--md_sys_color_on-surface), 0.12);
       }
-
     }
   }
 
@@ -234,11 +237,15 @@ textarea.materialize-textarea {
   }
 }
 
+/* Inline */
+.inline {
+  display: inline-block;
+}
+
 /* Search Field */
 .searchbar {
   .prefix {
     position: absolute;
-    //left: 12px;
     padding-left: 1rem;
     top: 0;
     user-select: none;
@@ -307,7 +314,6 @@ textarea {
   word-wrap: break-word;
   overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
   padding-top: 1.2rem; /* prevents text jump on Enter keypress */
-
   // Reduces repaints
   position: absolute;
   top: 0;

package/sass/components/forms/_range.scss

@@ -1,3 +1,6 @@
+@use '../global' as *;
+@use '../colors.module.scss' as *;
+
 .range-field {
   position: relative;
 }
@@ -10,12 +13,13 @@ input[type=range] + .thumb {
 
 input[type=range] {
   position: relative;
-  background-color: transparent;
+  background: linear-gradient(var(--md-sys-color-outline-variant), var(--md-sys-color-outline-variant));
   border: none;
   outline: none;
   width: 100%;
   margin: 15px 0;
   padding: 0;
+  height: 3px;
 
   &:focus {
     outline: none;
@@ -75,6 +79,7 @@ input[type=range] + .thumb {
 
 // WebKit
 input[type=range] {
+  appearance: none;
   -webkit-appearance: none;
 }
 

package/sass/components/forms/_select.scss

@@ -1,10 +1,14 @@
+@use '../variables' as *;
+
 select.browser-default {
   opacity: 1;
   color: var(--md-sys-color-on-background);
 }
 
+// TODO: Change to ".select" and not use tag name directly
+// Keep selects useable without javascript
+
 select {
-  opacity: 0;
   background-color: var(--md-sys-color-surface);
   width: 100%;
   padding: 5px;
@@ -13,68 +17,14 @@ select {
   height: 3rem;
 }
 
-.select-wrapper {
-  /*
-  &.valid .helper-text[data-success],
-  &.invalid ~ .helper-text[data-error] {
-    @extend %hidden-text;
-  }
-
-  &.valid {
-    & > input.select-dropdown {
-      @extend %valid-input-style;
-    }
-    & ~ .helper-text:after {
-      //@extend %custom-success-message;
-    }
-  }
-
-  &.invalid {
-    & > input.select-dropdown,
-    & > input.select-dropdown:focus {
-      @extend %invalid-input-style;
-    }
-    & ~ .helper-text:after {
-      //@extend %custom-error-message;
-    }
-  }
-
-  &.valid + label,
-  &.invalid + label {
-    width: 100%;
-    pointer-events: none;
-  }
-  & + label:after {
-    //@extend %input-after-style;
-  }
-  */
+.select-wrapper:focus-within {
+  outline: 2px solid var(--md-sys-color-primary);
+  border-radius: 4px;
+}
 
+.select-wrapper {
   position: relative;
 
-  /*
-  input.select-dropdown {    
-    &:focus {
-      border-bottom: 1px solid var(--md-sys-color-primary);
-    }
-    position: relative;
-    cursor: pointer;
-    background-color: transparent;
-    border: none;
-    border-bottom: 2px solid var(--md-sys-color-on-surface-variant);
-    outline: none;
-    height: 3rem;
-    line-height: 3rem;
-    width: 100%;
-    font-size: 16px;
-    margin: 0 0 8px 0;
-    padding: 0;
-    display: block;
-    user-select:none;
-    z-index: 1;
-    color: var(--md-sys-color-on-background);
-  }
-  */
-
   .caret {
     position: absolute;
     right: 0;
@@ -83,6 +33,7 @@ select {
     margin: auto 0;
     z-index: 0;
     fill: var(--md-sys-color-on-background);
+    pointer-events: none;
   }
 
   // Hide select with overflow hidden instead of using display none
@@ -127,43 +78,6 @@ select:disabled {
   //background-color: transparent;
 }
 
-/*
-body.keyboard-focused {
-  .select-dropdown.dropdown-content li:focus {
-    //background-color: $select-option-focus;
-  }
-}
-
-.select-dropdown.dropdown-content {
-  li {
-    &:hover:not(.disabled) {
-      //background-color: $select-option-hover;
-    }
-
-    &.selected:not(.disabled) {
-      //background-color: $select-option-selected;
-    }
-  }
-}
-*/
-
-/*
-// Prefix Icons
-.prefix ~ .select-wrapper {
-  margin-left: 3rem;
-  width: 92%;
-  width: calc(100% - 3rem);
-}
-.prefix ~ label { margin-left: 3rem; }
-// Suffix Icons
-.suffix ~ .select-wrapper {
-  margin-right: 3rem;
-  width: 92%;
-  width: calc(100% - 3rem);
-}
-.suffix ~ label { margin-right: 3rem; }
-*/
-
 // Icons
 .select-dropdown li {
   img {
@@ -187,9 +101,3 @@ body.keyboard-focused {
     padding-left: 1rem;
   }
 }
-
-/*
-.select-dropdown .selected {
-  color: red;
-}
-*/

package/sass/components/forms/_switches.scss

@@ -1,3 +1,5 @@
+@use '../colors.module.scss' as *;
+
 .switch {
   --track-height: 32px;
   --track-width: 52px;

package/sass/components/mixins.module.scss

@@ -0,0 +1,159 @@
+@use './variables' as *;
+@use './global' as *;
+
+@mixin btn(
+  $height: var(--btn-height),
+  $border-radius: var(--btn-border-radius),
+  $padding-left: var(--btn-padding),
+  $padding-right: var(--btn-padding),
+  $font-size: var(--btn-font-size),
+) {
+  height: $height;
+  border-radius: $border-radius;
+  padding-left: $padding-left;
+  padding-right: $padding-right;
+  font-size: $font-size;
+  font-weight: 500;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
+  white-space: nowrap;
+  outline: 0;
+  user-select: none;
+  transition: background-color .2s ease-out;
+
+  &:focus {
+    background-color: var(--md-sys-color-primary-container);
+  }
+}
+
+@mixin btn-filled {
+  color: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-primary);
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-on-primary);
+  }
+
+  &:hover {
+    @extend .z-depth-1;
+    background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%);
+  }
+
+  &:focus {
+    @extend .z-depth-0;
+    background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-tonal {
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-secondary-container);
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  &:hover {
+    @extend .z-depth-1;
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
+  }
+
+  &:focus {
+    @extend .z-depth-0;
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 20%);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-elevated {
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-secondary-container);
+  @extend .z-depth-1;
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-primary);
+  }
+
+  &:hover {
+    @extend .z-depth-2;
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
+  }
+
+  &:focus {
+    @extend .z-depth-1;
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-outlined {
+  background-color: transparent;
+  color: var(--md-sys-color-primary);
+  border: 1px solid var(--md-sys-color-outline);
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-primary);
+  }
+
+  &:hover {
+    background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 16%);
+  }
+
+  &:focus {
+    background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
+    border: 1px solid var(--md-sys-color-primary);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-flat {
+  @extend .z-depth-0;
+  color: var(--md-sys-color-primary);
+  background-color: transparent;
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-primary);
+  }
+
+  &:hover {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
+  }
+
+  &:focus {
+    background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-disabled {
+  @extend .z-depth-0;
+  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);
+  pointer-events: none;
+  box-shadow: none;
+  cursor: default;
+}
+
+// Focus with Keyboard
+@mixin focus-visible {
+  &:focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
+  }
+}
+

package/sass/materialize.scss

@@ -1,47 +1,43 @@
 @charset "UTF-8";
 
-@import "components/tokens.module";
-@import "components/theme.module";
-//@import "components/_theme_variables";
-@import "components/colors.module";
-@import "components/typography.module";
-
-// Color
-@import "components/color-variables";
-@import "components/color-classes";
-// Variables;
-@import "components/variables";
-
-// Reset
-@import "components/normalize";
+@forward "components/tokens.module";
+@forward "components/theme.module";
+//@forward "components/_theme_variables";
+@forward "components/colors.module";
+@forward "components/typography.module";
+@forward "components/mixins.module";
+@forward "components/color-variables";
+@forward "components/variables";
+@forward "components/normalize";
 
 // components
-@import "components/global";
-@import "components/collection";
-@import "components/badges";
-@import "components/icons-material-design";
-@import "components/grid";
-@import "components/navbar";
-@import "components/typography";
-@import "components/transitions";
-@import "components/cards";
-@import "components/toast";
-@import "components/tabs";
-@import "components/tooltip";
-@import "components/buttons";
-@import "components/dropdown";
-
-@import "components/modal";
-@import "components/collapsible";
-@import "components/chips";
-@import "components/materialbox";
-@import "components/forms/forms";
-@import "components/table_of_contents";
-@import "components/sidenav";
-@import "components/preloader";
-@import "components/slider";
-@import "components/carousel";
-@import "components/tapTarget";
-@import "components/pulse";
-@import "components/datepicker";
-@import "components/timepicker";
+@forward "components/global";
+@forward "components/typography";
+@forward "components/buttons";
+@forward "components/collection";
+@forward "components/badges";
+@forward "components/icons-material-design";
+@forward "components/grid";
+@forward "components/navbar";
+@forward "components/transitions";
+@forward "components/cards";
+@forward "components/toast";
+@forward "components/tabs";
+@forward "components/tooltip";
+@forward "components/dropdown";
+@forward "components/modal";
+@forward "components/collapsible";
+@forward "components/chips";
+@forward "components/materialbox";
+@forward "components/forms/forms";
+@forward "components/table_of_contents";
+@forward "components/sidenav";
+@forward "components/preloader";
+@forward "components/slider";
+@forward "components/carousel";
+@forward "components/tapTarget";
+@forward "components/pulse";
+@forward "components/datepicker";
+@forward "components/timepicker";
+@forward "components/breadcrumb";
+@forward "components/pagination";

package/sass/components/_color-classes.scss

@@ -1,32 +0,0 @@
-// Color Classes
-
-@each $color_name, $color in $colors {
-  @each $color_type, $color_value in $color {
-    @if $color_type == "base" {
-      .#{$color_name} {
-        background-color: $color_value !important;
-      }
-      .#{$color_name}-text {
-        color: $color_value !important;
-      }
-    }
-    @else if $color_name != "shades" {
-      .#{$color_name}.#{$color_type} {
-        background-color: $color_value !important;
-      }
-      .#{$color_name}-text.text-#{$color_type} {
-        color: $color_value !important;
-      }
-    }
-  }
-}
-
-// Shade classes
-@each $color, $color_value in $shades {
-  .#{$color} {
-    background-color: $color_value !important;
-  }
-  .#{$color}-text {
-    color: $color_value !important;
-  }
-}