@materializecss/materialize 2.2.2 → 2.3.1

package/sass/{components/mixins.module.scss → mixins.module.scss}

@@ -1,159 +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);
-  }
-
-  @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;
-  }
-}
-
+@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
-
-.navbar 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;
-}

package/sass/components/_breadcrumb.scss

@@ -1,27 +0,0 @@
-.breadcrumb-wrapper {
-  display: flex;
-  align-items: center;
-}
-
-.breadcrumb {
-  display: inline-flex;
-  align-items: center;
-
-  i,
-  i.material-icons, i.material-symbols-outlined,
-  i.material-symbols-rounded, i.material-symbols-sharp,
-  &:before {
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-  }
-
-  &:before {
-    content: '\E5CC';
-    font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Symbols Sharp', 'Material Icons';
-  }
-
-  &:first-child:before {
-    visibility: hidden;
-  }
-}