kmaterialize 2.0.0 → 2.3.3-1.0.0

package/sass/_tapTarget.scss

@@ -0,0 +1,102 @@
+.tap-target-wrapper {
+  width: 800px;
+  height: 800px;
+  position: fixed;
+  z-index: 1000;
+  visibility: hidden;
+  transition: visibility 0s .3s;
+}
+
+.tap-target-wrapper.open {
+  visibility: visible;
+  transition: visibility 0s;
+
+  .tap-target {
+    transform: scale(1);
+    opacity: .95;
+    transition:
+      transform .3s cubic-bezier(.42,0,.58,1),
+      opacity .3s cubic-bezier(.42,0,.58,1);
+  }
+
+  .tap-target-wave::before {
+    transform: scale(1);
+  }
+  .tap-target-wave::after {
+    visibility: visible;
+    animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
+    transition:
+      opacity .3s,
+      transform .3s,
+      visibility 0s 1s;
+  }
+}
+
+.tap-target {
+  position: absolute;
+  font-size: 1rem;
+  border-radius: 50%;
+  background-color: var(--md-sys-color-primary-container);
+  color: var(--md-sys-color-primary);
+  box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2);
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transform: scale(0);
+  transition: transform .3s cubic-bezier(.42, 0, .58, 1),
+  opacity .3s cubic-bezier(.42, 0, .58, 1);
+}
+
+.tap-target-content {
+  position: relative;
+  display: table-cell;
+}
+
+.tap-target-wave {
+  position: absolute;
+  border-radius: 50%;
+  z-index: 10001;
+
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: var(--md-sys-color-surface)
+  }
+  &::before {
+    transform: scale(0);
+    transition: transform .3s;
+  }
+  &::after {
+    visibility: hidden;
+    transition:
+      opacity .3s,
+      transform .3s,
+      visibility 0s;
+    z-index: -1;
+  }
+}
+
+.tap-target-origin {
+  top: 50%;
+  left: 50%;
+  z-index: 10002;
+  position: absolute !important;
+  transform: translate(-50%,-50%);
+
+  &:not(.btn),
+  &:not(.btn):hover {
+    background: none;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .tap-target, .tap-target-wrapper {
+    width: 600px;
+    height: 600px;
+  }
+}

package/sass/_typography.scss

@@ -0,0 +1,58 @@
+@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/_variables.scss

@@ -0,0 +1,56 @@
+@use "sass:math";
+
+// TypeScale
+$md_sys_typescale_body-large_size: 16px;
+
+// 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/materialize.scss

@@ -0,0 +1,51 @@
+@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 './colors'; // legacy .red/.pink/etc palette classes (materialize.com/color.html) - was missing entirely
+@forward './typography';
+@forward './mixins.module';
+@forward './variables';
+@forward './global';
+@forward './grid';
+// animations
+@forward './transitions.css';
+@forward './pulse.css';
+// custom
+@forward './table_of_contents';
+@forward './tapTarget';
+
+@forward '../components/button/buttons';
+@forward '../components/collapsible/collapsible'; // custom
+@forward '../components/badge/badges';
+@forward '../components/card/cards';
+@forward '../components/snackbar/toast';
+@forward '../components/tabs/tabs';
+@forward '../components/tooltip/tooltip';
+@forward '../components/dropdown/dropdown';
+@forward '../components/list/collection';
+@forward '../components/list/list';
+@forward '../components/dialog/modal';
+@forward '../components/dialog/materialbox'; // custom
+@forward '../components/chip/chips';
+//@forward '../components/appbar/navbar';
+@forward '../components/appbar/appbar.css';
+@forward '../components/navigation-drawer/sidenav';
+@forward '../components/progress/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/slider/range';
+@forward '../components/textfield/input-fields';
+@forward '../components/textfield/select';
+@forward '../components/textfield/file-input';
+@forward '../components/textfield/formfields.css';

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;
+  }
+}
+