@materializecss/materialize 2.2.2 → 2.3.1

package/sass/components/forms/_radio-buttons.scss

@@ -1,112 +0,0 @@
-// Remove default Radio Buttons
-[type="radio"]:not(:checked),
-[type="radio"]:checked {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-[type="radio"]:not(:checked) + span,
-[type="radio"]:checked + span {
-  position: relative;
-  padding-left: 35px;
-  cursor: pointer;
-  display: inline-block;
-  height: 25px;
-  line-height: 25px;
-  font-size: 1rem;
-  transition: .28s ease;
-  user-select: none;
-}
-
-[type="radio"] + span:before,
-[type="radio"] + span:after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  margin: 4px;
-  width: 16px;
-  height: 16px;
-  z-index: 0;
-  transition: .28s ease;
-}
-
-/* Unchecked styles */
-[type="radio"]:not(:checked) + span:before,
-[type="radio"]:not(:checked) + span:after,
-[type="radio"]:checked + span:before,
-[type="radio"]:checked + span:after,
-[type="radio"].with-gap:checked + span:before,
-[type="radio"].with-gap:checked + span:after {
-  border-radius: 50%;
-}
-
-[type="radio"]:not(:checked) + span:before,
-[type="radio"]:not(:checked) + span:after {
-  border: 2px solid var(--md-sys-color-on-surface-variant);
-}
-
-[type="radio"]:not(:checked) + span:after {
-  transform: scale(0);
-}
-
-/* Checked styles */
-[type="radio"]:checked + span:before {
-  border: 2px solid transparent;
-}
-
-[type="radio"]:checked + span:after,
-[type="radio"].with-gap:checked + span:before,
-[type="radio"].with-gap:checked + span:after {
-  border: 2px solid var(--md-sys-color-primary);
-}
-
-[type="radio"]:checked + span:after,
-[type="radio"].with-gap:checked + span:after {
-  background-color: var(--md-sys-color-primary);
-}
-
-[type="radio"]:checked + span:after {
-  transform: scale(1.02);
-}
-
-/* Radio With gap */
-[type="radio"].with-gap:checked + span:after {
-  transform: scale(.5);
-}
-
-/* Focused styles */
-[type="radio"].tabbed:focus + span:before {
-  box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
-}
-
-/* Disabled Radio With gap */
-[type="radio"].with-gap:disabled:checked + span:before {
-  border: 2px solid var(--md-sys-color-on-surface);
-}
-
-[type="radio"].with-gap:disabled:checked + span:after {
-  border: none;
-  background-color: var(--md-sys-color-on-surface);
-}
-
-/* Disabled style */
-[type="radio"]:disabled:not(:checked) + span:before,
-[type="radio"]:disabled:checked + span:before {
-  background-color: transparent;
-  border-color: var(--md-sys-color-on-surface);
-}
-
-[type="radio"]:disabled + span {
-  color: var(--md-sys-color-on-surface);
-}
-
-[type="radio"]:disabled:not(:checked) + span:before {
-  border-color: var(--md-sys-color-on-surface);
-}
-
-[type="radio"]:disabled:checked + span:after {
-  background-color: var(--md-sys-color-on-surface);
-  border-color: var(--md-sys-color-on-surface);
-}

package/sass/components/forms/_range.scss

@@ -1,158 +0,0 @@
-@use '../global' as *;
-@use '../colors.module.scss' as *;
-
-.range-field {
-  position: relative;
-}
-
-input[type=range],
-input[type=range] + .thumb {
-  @extend .no-select;
-  cursor: pointer;
-}
-
-input[type=range] {
-  position: relative;
-  background: linear-gradient(var(--md-sys-color-outline-variant), var(--md-sys-color-outline-variant));
-  border: none;
-  outline: none;
-  width: 100%;
-  margin: 15px 0;
-  padding: 0;
-  height: 3px;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-input[type=range] + .thumb {
-  position: absolute;
-  top: 10px;
-  left: 0;
-  border: none;
-  height: 0;
-  width: 0;
-  border-radius: 50%;
-  background-color: var(--md-sys-color-primary);
-  margin-left: 7px;
-
-  transform-origin: 50% 50%;
-  transform: rotate(-45deg);
-
-  .value {
-    display: block;
-    width: 30px;
-    text-align: center;
-    color: var(--md-sys-color-primary);
-    font-size: 0;
-    transform: rotate(45deg);
-  }
-
-  &.active {
-    border-radius: 50% 50% 50% 0;
-
-    .value {
-      color:  var(--md-sys-color-on-primary);
-      margin-left: -1px;
-      margin-top: 8px;
-      font-size: 10px;
-    }
-  }
-}
-
-// Shared
-@mixin range-track {
-  height: 3px;
-  @extend .surface-variant;
-  border: none;
-}
-
-@mixin range-thumb {
-  border: none;
-  height: 14px;
-  width: 14px;
-  border-radius: 50%;
-  background: var(--md-sys-color-primary);
-  transition: box-shadow .3s;
-}
-
-// WebKit
-input[type=range] {
-  appearance: none;
-  -webkit-appearance: none;
-}
-
-input[type=range]::-webkit-slider-runnable-track {
-  @include range-track;
-}
-
-input[type=range]::-webkit-slider-thumb {
-  @include range-thumb;
-  -webkit-appearance: none;
-  background-color: var(--md-sys-color-primary);
-  transform-origin: 50% 50%;
-  margin: -5px 0 0 0;
-
-}
-
-.keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb {
-  box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
-}
-
-// FireFox
-input[type=range] {
-  /*required for proper track sizing in FF*/
-}
-
-input[type=range]::-moz-range-track {
-  @include range-track;
-}
-
-input[type=range]::-moz-focus-inner {
-  border: 0;
-}
-
-input[type=range]::-moz-range-thumb {
-  @include range-thumb;
-  margin-top: -5px;
-}
-
-// hide the outline behind the border
-input[type=range]:-moz-focusring {
-  outline: 1px solid #fff;
-  outline-offset: -1px;
-}
-
-.keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb {
-  box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
-}
-
-//------------------------------- Remove this?
-// IE 10+
-input[type=range]::-ms-track {
-  height: 3px;
-  // remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead
-  background: transparent;
-  // leave room for the larger thumb to overflow with a transparent border */
-  border-color: transparent;
-  border-width: 6px 0;
-  /*remove default tick marks*/
-  color: transparent;
-}
-input[type=range]::-ms-fill-lower,
-input[type=range]::-moz-range-progress {
-  background: var(--md-sys-color-primary);
-}
-input[type=range]::-ms-fill-upper,
-input[type=range]::-moz-range-track {
-  background: var(--md-sys-color-shadow-light);
-}
-input[type=range]::-ms-thumb {
-  @include range-thumb;
-}
-//--------------------------------
-
-.keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb {
-  box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
-}

package/sass/components/forms/_select.scss

@@ -1,103 +0,0 @@
-@use '../variables' as *;
-
-select.browser-default {
-  opacity: 1;
-  color: var(--md-sys-color-on-background);
-}
-
-// TODO: Change to ".select" and not use tag name directly
-// Keep selects useable without javascript
-
-select {
-  background-color: var(--md-sys-color-surface);
-  width: 100%;
-  padding: 5px;
-  border: 1px solid var(--md-sys-color-outline-variant);
-  border-radius: 2px;
-  height: 3rem;
-}
-
-.select-wrapper:focus-within {
-  outline: 2px solid var(--md-sys-color-primary);
-  border-radius: 4px;
-}
-
-.select-wrapper {
-  position: relative;
-
-  .caret {
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    margin: auto 0;
-    z-index: 0;
-    fill: var(--md-sys-color-on-background);
-    pointer-events: none;
-  }
-
-  // Hide select with overflow hidden instead of using display none
-  // (this prevents form validation errors with hidden form elements)
-  .hide-select {
-    width: 0;
-    height: 0;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    z-index: -1;
-  }
-}
-
-select:disabled {
-  color: var(--md-sys-color-on-surface);
-}
-
-.select-wrapper.disabled {
-  + label {
-    color: var(--md-sys-color-on-surface);
-  }
-  .caret {
-    fill: var(--md-sys-color-on-surface);
-  }
-}
-
-.select-wrapper input.select-dropdown:disabled {
-  color: var(--md-sys-color-on-surface);
-  cursor: default;
-  user-select: none;
-}
-
-.select-wrapper i {
-  color: var(--md-sys-color-on-surface);
-}
-
-.select-dropdown li.disabled,
-.select-dropdown li.disabled > span,
-.select-dropdown li.optgroup {
-  color: var(--md-sys-color-on-surface);
-  //background-color: transparent;
-}
-
-// Icons
-.select-dropdown li {
-  img {
-    height: $dropdown-item-height - 10;
-    width: $dropdown-item-height - 10;
-    margin: 5px 15px;
-    float: right;
-  }
-}
-
-// Optgroup styles
-.select-dropdown li.optgroup {
-  border-top: 1px solid rgba(0, 0, 0, 0.04);
-  &.selected > span {
-    color: var(--md-sys-color-on-background);
-  }
-  & > span {
-    color: var(--md-sys-color-on-surface-variant);
-  }
-  & ~ li.optgroup-option {
-    padding-left: 1rem;
-  }
-}

package/sass/components/forms/_switches.scss

@@ -1,124 +0,0 @@
-@use '../colors.module.scss' as *;
-
-.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;
-  user-select: none;
-}
-
-.switch label {
-  cursor: pointer;
-}
-
-.switch label input[type=checkbox] {
-  opacity: 0;
-  width: 0;
-  height: 0;
-
-  // CHECKED
-  // Track
-  &:checked + .lever{
-    background-color: var(--md-sys-color-primary);
-    border-color:  var(--md-sys-color-primary);
-  }
-  // Dot
-  &:checked + .lever {
-    &:before, &:after {
-      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);
-    }
-    &:after {
-      @extend .surface;
-    }
-  }
-}
-
-.switch label .lever {
-  content: "";
-  display: inline-block;
-  position: relative;
-  width: var(--track-width);
-  height: var(--track-height);
-  border-style: solid;
-  border-width: 2px;
-  border-color: var(--md-sys-color-outline);
-
-  //@extend .surface-variant;
-  background-color: var(--md-sys-color-surface-variant);
-
-  border-radius: 15px;
-  margin-right: 10px;
-  transition: background 0.3s ease;
-  vertical-align: middle;
-  margin: 0 16px;
-
-  // DOT
-  &:before, &:after {
-    content: "";
-    position: absolute;
-    display: inline-block;
-    width: var(--size-off);
-    height: var(--size-off);
-    border-radius: 50%;
-
-    left: var(--gap-off);
-    top: var(--gap-off);
-
-    transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease;
-  }
-
-  // NOT CHECKED [DOT]
-  &:after {
-    @extend .outline; 
-    height: var(--size-off);
-    width: var(--size-off);
-
-    //@extend .surface-variant;
-    //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);
-  }
-}
-
-input[type=checkbox]:not(:disabled) ~ .lever:active:before,
-input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before,
-input[type=checkbox]:not(:disabled) ~ .lever:hover::before {
-    transform: scale(2.4);
-}
-
-input[type=checkbox]:checked:not(:disabled) ~ .lever:hover::before {
-  background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
-}
-
-// Switch active style
-input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
-input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
-  background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
-}
-
-input[type=checkbox]:not(:disabled) ~ .lever:hover::before {
-  background-color: rgba(0, 0, 0, 0.04);
-}
-
-input[type=checkbox]:not(:disabled) ~ .lever:active:before,
-input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
-  background-color: rgba(0, 0, 0, 0.12);
-}
-
-// Disabled Styles
-.switch input[type=checkbox][disabled] + .lever {
-  cursor: default;
-  opacity: 0.5;
-}
-

package/sass/components/theme.module.scss

@@ -1,140 +0,0 @@
-/* System Defaults */
-:root, :host {
-  color-scheme: light;
-  --md-sys-color-primary: var(--md-sys-color-primary-light);
-  --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
-  --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
-  --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
-  --md-sys-color-secondary: var(--md-sys-color-secondary-light);
-  --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
-  --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
-  --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
-  --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
-  --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
-  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
-  --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
-  --md-sys-color-error: var(--md-sys-color-error-light);
-  --md-sys-color-on-error: var(--md-sys-color-on-error-light);
-  --md-sys-color-error-container: var(--md-sys-color-error-container-light);
-  --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
-  --md-sys-color-outline: var(--md-sys-color-outline-light);
-  --md-sys-color-background: var(--md-sys-color-background-light);
-  --md-sys-color-on-background: var(--md-sys-color-on-background-light);
-  --md-sys-color-surface: var(--md-sys-color-surface-light);
-  --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
-  --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
-  --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
-  --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
-  --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
-  --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
-  --md-sys-color-shadow: var(--md-sys-color-shadow-light);
-  --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
-  --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
-  --md-sys-color-scrim: var(--md-sys-color-scrim-light);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root, :host {
-    color-scheme: dark;
-    --md-sys-color-primary: var(--md-sys-color-primary-dark);
-    --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
-    --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
-    --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
-    --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
-    --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
-    --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
-    --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
-    --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
-    --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
-    --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
-    --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
-    --md-sys-color-error: var(--md-sys-color-error-dark);
-    --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
-    --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
-    --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
-    --md-sys-color-outline: var(--md-sys-color-outline-dark);
-    --md-sys-color-background: var(--md-sys-color-background-dark);
-    --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
-    --md-sys-color-surface: var(--md-sys-color-surface-dark);
-    --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
-    --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
-    --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
-    --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
-    --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
-    --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
-    --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
-    --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
-    --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
-    --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
-  }
-}
-
-/* ===================================================================== Themes */
-
-:root[theme='light'] {
-  color-scheme: light;
-  --md-sys-color-primary: var(--md-sys-color-primary-light);
-  --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
-  --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
-  --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
-  --md-sys-color-secondary: var(--md-sys-color-secondary-light);
-  --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
-  --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
-  --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
-  --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
-  --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
-  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
-  --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
-  --md-sys-color-error: var(--md-sys-color-error-light);
-  --md-sys-color-on-error: var(--md-sys-color-on-error-light);
-  --md-sys-color-error-container: var(--md-sys-color-error-container-light);
-  --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
-  --md-sys-color-outline: var(--md-sys-color-outline-light);
-  --md-sys-color-background: var(--md-sys-color-background-light);
-  --md-sys-color-on-background: var(--md-sys-color-on-background-light);
-  --md-sys-color-surface: var(--md-sys-color-surface-light);
-  --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
-  --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
-  --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
-  --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
-  --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
-  --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
-  --md-sys-color-shadow: var(--md-sys-color-shadow-light);
-  --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
-  --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
-  --md-sys-color-scrim: var(--md-sys-color-scrim-light);
-}
- 
-:root[theme='dark'] {
-  color-scheme: dark;
-  --md-sys-color-primary: var(--md-sys-color-primary-dark);
-  --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
-  --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
-  --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
-  --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
-  --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
-  --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
-  --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
-  --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
-  --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
-  --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
-  --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
-  --md-sys-color-error: var(--md-sys-color-error-dark);
-  --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
-  --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
-  --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
-  --md-sys-color-outline: var(--md-sys-color-outline-dark);
-  --md-sys-color-background: var(--md-sys-color-background-dark);
-  --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
-  --md-sys-color-surface: var(--md-sys-color-surface-dark);
-  --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
-  --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
-  --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
-  --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
-  --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
-  --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
-  --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
-  --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
-  --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
-  --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
-}