@materializecss/materialize 2.2.1 → 2.3.0

package/sass/{components/_typography.scss → _typography.scss}

@@ -1,62 +1,59 @@
-
-@use "sass:math";
-
-a {
-  text-decoration: none;
-}
-
-html{
-  // line-height: 1.5;
-
-  @media only screen and (min-width: 0) {
-    font-size: 14px;
-  }
-
-  @media only screen and (min-width: $medium-screen-up) {
-    font-size: 14.5px;
-  }
-
-  @media only screen and (min-width: $large-screen-up) {
-    font-size: 15px;
-  }
-
-  font-family: $font-stack;
-  font-weight: normal;
-  color: $text-color;
-}
-
-h1, h2, h3, h4, h5, h6 {
-	font-weight: 400;
-	line-height: 1.3;
-}
-
-// Header Styles
-h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
-h1 { font-size: $h1-fontsize; line-height: 110%; margin: math.div($h1-fontsize, 1.5) 0 math.div($h1-fontsize, 2.5) 0;}
-h2 { font-size: $h2-fontsize; line-height: 110%; margin: math.div($h2-fontsize, 1.5) 0 math.div($h2-fontsize, 2.5) 0;}
-h3 { font-size: $h3-fontsize; line-height: 110%; margin: math.div($h3-fontsize, 1.5) 0 math.div($h3-fontsize, 2.5) 0;}
-h4 { font-size: $h4-fontsize; line-height: 110%; margin: math.div($h4-fontsize, 1.5) 0 math.div($h4-fontsize, 2.5) 0;}
-h5 { font-size: $h5-fontsize; line-height: 110%; margin: math.div($h5-fontsize, 1.5) 0 math.div($h5-fontsize, 2.5) 0;}
-h6 { font-size: $h6-fontsize; line-height: 110%; margin: math.div($h6-fontsize, 1.5) 0 math.div($h6-fontsize, 2.5) 0;}
-
-// Text Styles
-em { font-style: italic; }
-strong { font-weight: 500; }
-small { font-size: 75%; }
-.light { font-weight: 300; }
-.thin { font-weight: 200; }
-
-.flow-text{
-  $i: 0;
-  @while $i <= $intervals {
-    @media only screen and (min-width : 360 + ($i * $interval-size)) {
-      font-size: 1.2rem * (1 + (.02 * $i));
-    }
-    $i: $i + 1;
-  }
-
-  // Handle below 360px screen
-  @media only screen and (max-width: 360px) {
-    font-size: 1.2rem;
-  }
-}
+
+@use "sass:math";
+@use './variables' as *;
+
+a {
+  text-decoration: none;
+}
+
+html{
+  // line-height: 1.5;
+  font-family: $font-stack;
+  font-weight: normal;
+  color: $text-color;
+  @media only screen and (min-width: 0) {
+    font-size: 14px;
+  }
+  @media only screen and (min-width: $medium-screen-up) {
+    font-size: 14.5px;
+  }
+  @media only screen and (min-width: $large-screen-up) {
+    font-size: 15px;
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+	font-weight: 400;
+	line-height: 1.3;
+}
+
+// Header Styles
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
+h1 { font-size: $h1-fontsize; line-height: 110%; margin: math.div($h1-fontsize, 1.5) 0 math.div($h1-fontsize, 2.5) 0;}
+h2 { font-size: $h2-fontsize; line-height: 110%; margin: math.div($h2-fontsize, 1.5) 0 math.div($h2-fontsize, 2.5) 0;}
+h3 { font-size: $h3-fontsize; line-height: 110%; margin: math.div($h3-fontsize, 1.5) 0 math.div($h3-fontsize, 2.5) 0;}
+h4 { font-size: $h4-fontsize; line-height: 110%; margin: math.div($h4-fontsize, 1.5) 0 math.div($h4-fontsize, 2.5) 0;}
+h5 { font-size: $h5-fontsize; line-height: 110%; margin: math.div($h5-fontsize, 1.5) 0 math.div($h5-fontsize, 2.5) 0;}
+h6 { font-size: $h6-fontsize; line-height: 110%; margin: math.div($h6-fontsize, 1.5) 0 math.div($h6-fontsize, 2.5) 0;}
+
+// Text Styles
+em { font-style: italic; }
+strong { font-weight: 500; }
+small { font-size: 75%; }
+.light { font-weight: 300; }
+.thin { font-weight: 200; }
+
+.flow-text{
+  $i: 0;
+  @while $i <= $intervals {
+    @media only screen and (min-width : (360 + ($i * $interval-size))) {
+      font-size: 1.2rem * (1 + (.02 * $i));
+    }
+    $i: $i + 1;
+  }
+
+  // Handle below 360px screen
+  @media only screen and (max-width: 360px) {
+    font-size: 1.2rem;
+  }
+}

package/sass/{components/_variables.scss → _variables.scss}

@@ -1,56 +1,57 @@
-// TypeScale
-$md_sys_typescale_body-large_size: 16px;
-
-@use "sass:math";
-
-// Colors
-$success-color: color("green", "base") !default;
-$link-color: color("light-blue", "darken-1") !default;
-
-// Floating buttons
-$button-floating-background: var(--md-sys-color-secondary) !default;
-$button-floating-background-hover: var(--md-ref-palette-secondary70) !default;
-$button-floating-background-focus: var(--md-ref-palette-secondary80) !default;
-$button-floating-color: var(--md-sys-color-on-secondary) !default;
-$button-floating-size: 40px !default;
-$button-floating-radius: 16px !default;
-
-// Dropdown
-$dropdown-item-height: 50px !default;
-
-// Media Query Ranges
-$small-screen-up: 601px !default;
-$medium-screen-up: 993px !default;
-$large-screen-up: 1201px !default;
-$small-screen: 600.99px !default;
-$medium-screen: 992.99px !default;
-$large-screen: 1200.99px !default;
-
-$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
-$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
-$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})" !default;
-$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
-$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
-$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
-
-// Grid
-$num-cols: 12 !default;
-$gutter-width: 1.5rem !default;
-$element-top-margin: math.div($gutter-width, 3) !default;
-$element-bottom-margin: math.div($gutter-width * 2, 3) !default;
-
-// Typography
-$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
-$text-color: var(--md-sys-color-on-background) !default;
-
-// Header Styles
-$h1-fontsize: 4.2rem !default;
-$h2-fontsize: 3.56rem !default;
-$h3-fontsize: 2.92rem !default;
-$h4-fontsize: 2.28rem !default;
-$h5-fontsize: 1.64rem !default;
-$h6-fontsize: 1.15rem !default;
-
-// Flow Text
-$intervals: 20 !default;
-$interval-size: math.div($large-screen - $small-screen, $intervals) !default;
+// TypeScale
+$md_sys_typescale_body-large_size: 16px;
+
+@use "sass:math";
+@use "./_colors";
+
+// Colors
+$success-color: colorFunc("green", "base") !default;
+$link-color: colorFunc("light-blue", "darken-1") !default;
+
+// Floating buttons
+$button-floating-background: var(--md-sys-color-secondary) !default;
+$button-floating-background-hover: var(--md-ref-palette-secondary70) !default;
+$button-floating-background-focus: var(--md-ref-palette-secondary80) !default;
+$button-floating-color: var(--md-sys-color-on-secondary) !default;
+$button-floating-size: 40px !default;
+$button-floating-radius: 16px !default;
+
+// Dropdown
+$dropdown-item-height: 50px !default;
+
+// Media Query Ranges
+$small-screen-up: 601px !default;
+$medium-screen-up: 993px !default;
+$large-screen-up: 1201px !default;
+$small-screen: 600.99px !default;
+$medium-screen: 992.99px !default;
+$large-screen: 1200.99px !default;
+
+$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
+$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
+$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})" !default;
+$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
+$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
+$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
+
+// Grid
+$num-cols: 12 !default;
+$gutter-width: 1.5rem !default;
+$element-top-margin: math.div($gutter-width, 3) !default;
+$element-bottom-margin: math.div($gutter-width * 2, 3) !default;
+
+// Typography
+$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
+$text-color: var(--md-sys-color-on-background) !default;
+
+// Header Styles
+$h1-fontsize: 4.2rem !default;
+$h2-fontsize: 3.56rem !default;
+$h3-fontsize: 2.92rem !default;
+$h4-fontsize: 2.28rem !default;
+$h5-fontsize: 1.64rem !default;
+$h6-fontsize: 1.15rem !default;
+
+// Flow Text
+$intervals: 20 !default;
+$interval-size: math.div($large-screen - $small-screen, $intervals) !default;

package/sass/components/forms/_forms.scss

@@ -1,24 +1,19 @@
-// 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';
+@forward 'input-fields';
+@forward 'radio-buttons';
+@forward 'checkboxes';
+@forward 'switches';
+@forward 'select';
+@forward 'file-input';
+@forward 'range';
+@forward 'form-field';
+
+// Remove Focus Boxes
+select:focus {
+  outline: 1px solid var(--md-ref-palette-primary80);
+}
+
+label {
+  font-size: .8rem;
+  color: var(--md-sys-color-on-surface-variant);
+}
+

package/sass/materialize.scss

@@ -1,47 +1,48 @@
-@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";
-
-// 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";
+@charset "UTF-8";
+
+@forward "../node_modules/normalize.css/normalize.css";
+@forward "./tokens.module.css";
+@forward "./theme.module.css";
+@forward "./typography.module.css";
+@forward "./colors.module.css";
+@forward "./typography";
+@forward "./mixins.module";
+// @forward "./colors"; // => put in seperate file
+@forward "./variables";
+@forward "./global";
+@forward "./grid";
+// animations
+@forward "./transitions.css";
+@forward "./pulse.css";
+// custom
+@forward "./table_of_contents";
+@forward "./tapTarget";
+
+@forward "../components/buttons/buttons";
+@forward "../components/lists/collection";
+@forward "../components/collapsible/collapsible"; // custom
+@forward "../components/badges/badges";
+@forward "../components/cards/cards";
+@forward "../components/snackbar/toast";
+@forward "../components/tabs/tabs";
+@forward "../components/tooltips/tooltip";
+@forward "../components/dropdown/dropdown";
+@forward "../components/dialog/modal";
+@forward "../components/dialog/materialbox"; // custom
+@forward "../components/chips/chips";
+@forward "../components/navigation-bar/navbar";
+@forward "../components/navigation-drawer/sidenav";
+@forward "../components/progress-indicators/preloader";
+@forward "../components/carousel/slider";
+@forward "../components/carousel/carousel";
+@forward "../components/datepicker/datepicker";
+@forward "../components/timepicker/timepicker";
+@forward "../components/breadcrumb/breadcrumb"; // custom
+@forward "../components/pagination/pagination"; //custom
+@forward '../components/radio-button/radio-buttons';
+@forward '../components/checkbox/checkboxes';
+@forward '../components/switch/switches';
+@forward '../components/sliders/range';
+@forward '../components/text-fields/input-fields';
+@forward '../components/text-fields/select';
+@forward '../components/text-fields/file-input';

package/sass/mixins.module.scss

@@ -0,0 +1,168 @@
+@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);
+  }
+
+  &.disabled {
+    background-color: unset;
+    border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+  }
+
+  @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%);
+  }
+
+  &.disabled {
+    background-color: unset;
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-disabled {
+  @extend .z-depth-0;
+  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);
+  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/components/_badges.scss

@@ -1,75 +0,0 @@
-// TODO: Make better structure
-:root {
-  --bagde-height: 22px;
-}
-
-span.badge {
-  min-width: 3rem;
-  padding: 0 6px;
-  margin-left: 14px;
-  text-align: center;
-  font-size: 1rem;
-  line-height: var(--bagde-height);
-  height: var(--bagde-height);
-  color: var(--md-sys-color-on-surface-variant);
-  float: right;
-  box-sizing: border-box;
-
-  &.new {
-    font-weight: 300;
-    font-size: 0.8rem;
-    color:  var(--md-sys-color-on-primary);
-    background-color: var(--md-sys-color-primary);
-    border-radius: 2px;
-  }
-  &.new:after {
-    content: " new";
-  }
-
-  &[data-badge-caption]::after {
-    content: " " attr(data-badge-caption);
-  }
-}
-
-.active span.badge {
-  color: var(--md-sys-color-on-primary);
-}
-
-// Special cases
-
-nav ul a span.badge {
-  display: inline-block;
-  float: none;
-  margin-left: 4px;
-  line-height: var(--bagde-height);
-  height: var(--bagde-height);
-  -webkit-font-smoothing: auto;
-}
-
-// Line height centering
-.collection-item span.badge {
-  margin-top: calc(calc(1.5rem * 0.5) - calc(var(--bagde-height) * 0.5));
-}
-
-.collapsible span.badge {
-  margin-left: auto;
-
-  &.leading {
-    margin-right: 7px;
-    order: -1;
-  }
-}
-
-.collapsible .active span.badge:not(.new) {
-  color: var(--md-sys-color-on-surface-variant);
-}
-
-.sidenav span.badge {
-  margin-top: calc(calc(var(--sidenav-line-height) * 0.5) - calc(22px * 0.5));
-}
-
-table span.badge {
-  display: inline-block;
-  float: none;
-  margin-left: auto;
-}