@materializecss/materialize 2.0.3-alpha → 2.0.3-beta

package/dist/css/materialize.css

@@ -1,5 +1,5 @@
 /*!
- * Materialize v2.0.3-alpha (https://materializecss.github.io/materialize)
+ * Materialize v2.0.3-beta (https://materializecss.github.io/materialize)
  * Copyright 2014-2023 Materialize
  * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
  */
@@ -421,7 +421,7 @@
   color: var(--md-sys-color-on-background);
 }
 
-.surface {
+.surface, .switch label input[type=checkbox]:checked + .lever:after {
   background-color: var(--md-sys-color-surface);
 }
 
@@ -437,7 +437,7 @@
   color: var(--md-sys-color-on-surface);
 }
 
-.surface-variant {
+.surface-variant, .progress, input[type=range]::-moz-range-track, input[type=range]::-webkit-slider-runnable-track, .switch label .lever {
   background-color: var(--md-sys-color-surface-variant);
 }
 
@@ -449,11 +449,11 @@
   background-color: var(--md-sys-color-on-surface-variant);
 }
 
-.on-surface-variant-text {
+.on-surface-variant-text, .chip > .material-icons {
   color: var(--md-sys-color-on-surface-variant);
 }
 
-.outline {
+.outline, .switch label .lever:after {
   background-color: var(--md-sys-color-outline);
 }
 
@@ -3331,7 +3331,7 @@ a {
 }
 
 /* 2dp elevation modified*/
-.z-depth-1, .sidenav, .collapsible, .dropdown-content, .btn-floating, .btn, .btn-small, .btn-large, .toast, .card, .card-panel, nav {
+.z-depth-1, .sidenav, .collapsible, .dropdown-content, .btn-floating, .btn.elevated, .elevated.btn-small, .elevated.btn-large, .toast, .card, .card-panel, nav {
   -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
           box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
 }
@@ -3393,11 +3393,10 @@ i {
 }
 i.left {
   float: left;
-  margin-right: 15px;
+  margin-left: -8px;
 }
 i.right {
   float: right;
-  margin-left: 15px;
 }
 i.tiny {
   font-size: 1rem;
@@ -3778,110 +3777,6 @@ table.responsive-table td {
   height: 100%;
 }
 
-.progress {
-  position: relative;
-  height: 4px;
-  display: block;
-  width: 100%;
-  background-color: rgba(var(--primary-color-numeric), 40%);
-  border-radius: 2px;
-  margin: 0.5rem 0 1rem 0;
-  overflow: hidden;
-}
-.progress .determinate {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  background-color: var(--primary-color);
-  -webkit-transition: width 0.3s linear;
-  transition: width 0.3s linear;
-}
-.progress .indeterminate {
-  background-color: var(--primary-color);
-}
-.progress .indeterminate:before {
-  content: "";
-  position: absolute;
-  background-color: inherit;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  will-change: left, right;
-  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-          animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-}
-.progress .indeterminate:after {
-  content: "";
-  position: absolute;
-  background-color: inherit;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  will-change: left, right;
-  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-          animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-  -webkit-animation-delay: 1.15s;
-          animation-delay: 1.15s;
-}
-
-@-webkit-keyframes indeterminate {
-  0% {
-    left: -35%;
-    right: 100%;
-  }
-  60% {
-    left: 100%;
-    right: -90%;
-  }
-  100% {
-    left: 100%;
-    right: -90%;
-  }
-}
-
-@keyframes indeterminate {
-  0% {
-    left: -35%;
-    right: 100%;
-  }
-  60% {
-    left: 100%;
-    right: -90%;
-  }
-  100% {
-    left: 100%;
-    right: -90%;
-  }
-}
-@-webkit-keyframes indeterminate-short {
-  0% {
-    left: -200%;
-    right: 100%;
-  }
-  60% {
-    left: 107%;
-    right: -8%;
-  }
-  100% {
-    left: 107%;
-    right: -8%;
-  }
-}
-@keyframes indeterminate-short {
-  0% {
-    left: -200%;
-    right: 100%;
-  }
-  60% {
-    left: 107%;
-    right: -8%;
-  }
-  100% {
-    left: 107%;
-    right: -8%;
-  }
-}
 /*******************
   Utility Classes
 *******************/
@@ -5701,21 +5596,63 @@ small {
   visibility: hidden;
 }
 
-.btn, .btn-small, .btn-large,
-.btn-flat {
-  font-weight: 500;
+.btn, .btn-small, .btn-large, .btn-floating, .btn-flat {
+  --font-size-icon: 16px;
+  --padding: 24px;
+  --padding-icon: 16px;
+  --gap-icon: 8px;
+  height: 40px;
   border: none;
   border-radius: 4px;
-  display: inline-block;
-  height: 40px;
-  line-height: 40px;
-  padding: 0 16px;
-  vertical-align: middle;
+  padding-left: var(--padding);
+  padding-right: var(--padding);
+  color: var(--font-on-primary-color-main);
+  font-size: 14px;
+  font-weight: 500;
+  text-decoration: none;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  white-space: nowrap;
+  outline: 0;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  -webkit-tap-highlight-color: transparent;
+  -webkit-transition: background-color 0.2s ease-out;
+  transition: background-color 0.2s ease-out;
+}
+
+.btn.icon-left, .icon-left.btn-small, .icon-left.btn-large, .btn.icon-right, .icon-right.btn-small, .icon-right.btn-large {
+  position: relative;
+}
+
+.btn.icon-left, .icon-left.btn-small, .icon-left.btn-large {
+  padding-left: calc(var(--padding-icon) + var(--font-size-icon) + var(--gap-icon));
+}
+
+.btn.icon-right, .icon-right.btn-small, .icon-right.btn-large {
+  padding-right: calc(var(--padding-icon) + var(--font-size-icon) + var(--gap-icon));
+}
+
+.btn.icon-left i, .icon-left.btn-small i, .icon-left.btn-large i, .btn.icon-right i, .icon-right.btn-small i, .icon-right.btn-large i {
+  position: absolute;
+  font-size: var(--font-size-icon);
+}
+
+.btn.icon-left i, .icon-left.btn-small i, .icon-left.btn-large i {
+  left: var(--padding-icon);
+}
+
+.btn.icon-right i, .icon-right.btn-small i, .icon-right.btn-large i {
+  right: var(--padding-icon);
 }
 
 .btn.disabled,
@@ -5759,33 +5696,44 @@ small {
   color: var(--font-color-disabled) !important;
 }
 
-.btn,
-.btn-small,
-.btn-large,
-.btn-floating,
-.btn-flat {
-  font-size: 14px;
-  outline: 0;
+.btn.filled, .btn, .btn-small, .btn-large {
+  background-color: var(--md-sys-color-primary);
 }
-.btn i,
-.btn-floating i,
-.btn-large i,
-.btn-small i,
-.btn-flat i {
-  font-size: 1.3rem;
-  line-height: inherit;
+
+.btn.tonal, .tonal.btn-small, .tonal.btn-large, .btn.elevated, .elevated.btn-small, .elevated.btn-large {
+  background-color: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
 }
 
-.btn, .btn-small, .btn-large {
-  text-decoration: none;
-  color: var(--font-on-primary-color-main);
-  background-color: var(--primary-color);
-  text-align: center;
-  letter-spacing: 0.5px;
-  -webkit-transition: background-color 0.2s ease-out;
-  transition: background-color 0.2s ease-out;
+.btn.text, .text.btn-small, .text.btn-large, .btn-flat {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  background-color: transparent;
+  color: var(--md-sys-color-primary);
   cursor: pointer;
+  -webkit-transition: background-color 0.2s;
+  transition: background-color 0.2s;
+}
+.btn.text:focus, .text.btn-small:focus, .text.btn-large:focus, .btn.text:hover, .text.btn-small:hover, .text.btn-large:hover, .btn-flat:focus, .btn-flat:hover {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  background-color: var(--hover-color);
+}
+.btn.text:focus, .text.btn-small:focus, .text.btn-large:focus, .btn-flat:focus {
+  background-color: var(--focus-color);
+}
+.btn.text.disabled, .text.disabled.btn-small, .text.disabled.btn-large, .btn.text.btn.text[disabled], .text.text[disabled].btn-small, .text.text[disabled].btn-large, .btn.text.btn-flat[disabled], .btn-flat.disabled, .btn-flat.btn.text[disabled], .btn-flat.btn-flat[disabled] {
+  background-color: transparent !important;
+  color: var(--font-color-disabled) !important;
+  cursor: default;
+}
+
+.btn.outlined, .outlined.btn-small, .outlined.btn-large {
+  background-color: transparent;
+  color: var(--primary-color);
+  border: 1px solid var(--primary-color);
 }
+
 .btn:hover, .btn-small:hover, .btn-large:hover {
   background-color: var(--primary-color-raised-hover-solid);
 }
@@ -5794,17 +5742,21 @@ small {
 }
 
 .btn-floating {
-  display: inline-block;
   color: var(--font-on-secondary-color-main);
-  position: relative;
-  overflow: hidden;
-  z-index: 1;
   width: 40px;
   height: 40px;
-  line-height: 40px;
-  padding: 0;
   background-color: var(--secondary-color);
-  border-radius: 50%;
+  border-radius: 16px;
+  padding: 0;
+  display: grid;
+  grid-auto-flow: column;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
   -webkit-transition: background-color 0.3s;
   transition: background-color 0.3s;
   cursor: pointer;
@@ -5827,9 +5779,6 @@ small {
 .btn-floating.btn-large.halfway-fab {
   bottom: -28px;
 }
-.btn-floating.btn-large i {
-  line-height: 56px;
-}
 .btn-floating.btn-small {
   width: 30px;
   height: 30px;
@@ -5837,9 +5786,6 @@ small {
 .btn-floating.btn-small.halfway-fab {
   bottom: -15px;
 }
-.btn-floating.btn-small i {
-  line-height: 30px;
-}
 .btn-floating.halfway-fab {
   position: absolute;
   right: 24px;
@@ -5850,12 +5796,11 @@ small {
   left: 24px;
 }
 .btn-floating i {
+  color: var(--font-on-secondary-color-main);
+  font-size: 1.6rem;
   width: inherit;
   display: inline-block;
   text-align: center;
-  color: var(--font-on-secondary-color-main);
-  font-size: 1.6rem;
-  line-height: 40px;
 }
 
 button.btn-floating {
@@ -5990,37 +5935,13 @@ button.btn-floating {
   width: 40px;
   height: 40px;
   background-color: var(--secondary-color);
-  border-radius: 50%;
+  border-radius: 16px;
   -webkit-transform: scale(0);
           transform: scale(0);
 }
 
-.btn-flat {
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  background-color: transparent;
-  color: var(--font-color-medium);
-  cursor: pointer;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-.btn-flat:focus, .btn-flat:hover {
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  background-color: var(--hover-color);
-}
-.btn-flat:focus {
-  background-color: var(--focus-color);
-}
-.btn-flat.disabled, .btn-flat.btn-flat[disabled] {
-  background-color: transparent !important;
-  color: var(--font-color-disabled) !important;
-  cursor: default;
-}
-
 .btn-large {
   height: 60px;
-  line-height: 60px;
   font-size: 18px;
   padding: 0 28px;
 }
@@ -6041,6 +5962,10 @@ button.btn-floating {
   display: block;
 }
 
+.btn.rounded, .rounded.btn-large, .rounded.btn-small {
+  border-radius: 99999px;
+}
+
 .dropdown-content {
   padding-left: 0;
   list-style-type: none;
@@ -6264,45 +6189,95 @@ body.keyboard-focused .dropdown-content li:focus {
 }
 
 .chip {
-  display: inline-block;
+  --font-size: 14px;
+  --font-size-icon: 18px;
+  --padding: 8px;
+  background-color: var(--background-color-level-4dp);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  white-space: nowrap;
+  gap: 8px;
+  margin: 0;
   height: 32px;
-  font-size: 13px;
+  padding-left: var(--padding);
+  padding-right: var(--padding);
+  font-size: var(--font-size);
   font-weight: 500;
   color: var(--font-color-medium);
-  line-height: 32px;
-  padding: 0 12px;
-  border-radius: 16px;
-  background-color: var(--background-color-level-4dp);
-  margin-bottom: 5px;
-  margin-right: 5px;
+  border-radius: 8px;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  vertical-align: top;
 }
 .chip:focus {
   outline: none;
   background-color: var(--primary-color);
   color: var(--font-on-primary-color-main);
 }
+
+.chip.outlined {
+  background-color: transparent;
+  border-color: var(--md-sys-color-outline);
+  border-width: 1px;
+  border-style: solid;
+}
+
 .chip > img {
-  float: left;
-  margin: 0 8px 0 -12px;
-  height: 32px;
-  width: 32px;
-  border-radius: 50%;
+  margin: 0;
+  width: 24px;
+  height: 24px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 12px;
+}
+
+.chip > .material-icons {
+  font-size: var(--font-size-icon);
 }
+
 .chip .close {
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  padding: 0;
+  display: grid;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-align-content: center;
+      -ms-flex-line-pack: center;
+          align-content: center;
   cursor: pointer;
-  float: right;
-  font-size: 16px;
-  line-height: 32px;
-  padding-left: 8px;
+}
+
+.chip .close:hover {
+  background-color: rgba(136, 136, 136, 0.5333333333);
 }
 
 .chips {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 4px;
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
   border: none;
   border-bottom: 1px solid var(--font-color-medium);
   -webkit-box-shadow: none;
           box-shadow: none;
   margin: 0 0 8px 0;
-  min-height: 45px;
+  padding: 4px;
   outline: none;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
@@ -6321,8 +6296,7 @@ body.keyboard-focused .dropdown-content li:focus {
   color: var(--font-color-main);
   display: inline-block;
   font-size: 16px;
-  height: 3rem;
-  line-height: 32px;
+  height: 32px;
   outline: 0;
   margin: 0;
   padding: 0;
@@ -7024,6 +6998,17 @@ textarea.materialize-textarea {
 
 /* Switch
    ========================================================================== */
+.switch {
+  --track-height: 32px;
+  --track-width: 52px;
+  --border-width: 2px;
+  --size-off: 16px;
+  --size-on: 24px;
+  --icon-size: 16px;
+  --gap-on: calc(((var(--track-height) - var(--size-on)) / 2) - var(--border-width));
+  --gap-off: calc(((var(--track-height) - var(--size-off)) / 2) - var(--border-width));
+}
+
 .switch,
 .switch * {
   -webkit-tap-highlight-color: transparent;
@@ -7043,22 +7028,24 @@ textarea.materialize-textarea {
   height: 0;
 }
 .switch label input[type=checkbox]:checked + .lever {
-  background-color: rgba(var(--primary-color-numeric), 0.32);
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
 }
 .switch label input[type=checkbox]:checked + .lever:before, .switch label input[type=checkbox]:checked + .lever:after {
-  left: 18px;
+  top: var(--gap-on);
+  left: calc(var(--track-width) - var(--size-on) - var(--gap-on) - 2 * var(--border-width));
+  width: var(--size-on);
+  height: var(--size-on);
 }
-.switch label input[type=checkbox]:checked + .lever:after {
-  background-color: var(--primary-color);
-}
-
 .switch label .lever {
   content: "";
   display: inline-block;
   position: relative;
-  width: 36px;
-  height: 14px;
-  background-color: var(--slider-track-color);
+  width: var(--track-width);
+  height: var(--track-height);
+  border-style: solid;
+  border-width: 2px;
+  border-color: var(--md-sys-color-outline);
   border-radius: 15px;
   margin-right: 10px;
   -webkit-transition: background 0.3s ease;
@@ -7070,20 +7057,19 @@ textarea.materialize-textarea {
   content: "";
   position: absolute;
   display: inline-block;
-  width: 20px;
-  height: 20px;
+  width: var(--size-off);
+  height: var(--size-off);
   border-radius: 50%;
-  left: 0;
-  top: -3px;
+  left: var(--gap-off);
+  top: var(--gap-off);
   -webkit-transition: left 0.3s ease, background 0.3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
   transition: left 0.3s ease, background 0.3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
   transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease, transform 0.1s ease;
   transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease, transform 0.1s ease, -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
 }
 .switch label .lever:after {
-  background-color: var(--switch-thumb-off-color);
-  -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-          box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  height: var(--size-off);
+  width: var(--size-off);
 }
 
 input[type=checkbox]:not(:disabled) ~ .lever:active:before,
@@ -7399,7 +7385,6 @@ input[type=range] {
 
 input[type=range]::-webkit-slider-runnable-track {
   height: 3px;
-  background: var(--slider-track-color);
   border: none;
 }
 
@@ -7431,7 +7416,6 @@ input[type=range] {
 
 input[type=range]::-moz-range-track {
   height: 3px;
-  background: var(--slider-track-color);
   border: none;
 }
 
@@ -7743,6 +7727,109 @@ input[type=range]::-ms-thumb {
   border: none;
 }
 
+.progress {
+  position: relative;
+  height: 4px;
+  display: block;
+  width: 100%;
+  border-radius: 2px;
+  margin: 0.5rem 0 1rem 0;
+  overflow: hidden;
+}
+.progress .determinate {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background-color: var(--primary-color);
+  -webkit-transition: width 0.3s linear;
+  transition: width 0.3s linear;
+}
+.progress .indeterminate {
+  background-color: var(--primary-color);
+}
+.progress .indeterminate:before {
+  content: "";
+  position: absolute;
+  background-color: inherit;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  will-change: left, right;
+  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+          animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+.progress .indeterminate:after {
+  content: "";
+  position: absolute;
+  background-color: inherit;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  will-change: left, right;
+  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+          animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+  -webkit-animation-delay: 1.15s;
+          animation-delay: 1.15s;
+}
+
+@-webkit-keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+
+@keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+@-webkit-keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+@keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
 /*
     @license
     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.