@materializecss/materialize 2.2.2 → 2.3.0

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

@@ -1,62 +1,59 @@
-
-@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;
-  }
-}
+
+@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,57 +1,57 @@
-// TypeScale
-$md_sys_typescale_body-large_size: 16px;
-
-@use "sass:math";
-@use "./_color-variables";
-
-// 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;
+// 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,18 +1,19 @@
-@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);
-}
-
-label {
-  font-size: .8rem;
-  color: var(--md-sys-color-on-surface-variant);
-}
-
+@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,43 +1,48 @@
-@charset "UTF-8";
-
-@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
-@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";
+@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';