@materializecss/materialize 2.2.1 → 2.3.0

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,153 +0,0 @@
-.range-field {
-  position: relative;
-}
-
-input[type=range],
-input[type=range] + .thumb {
-  @extend .no-select;
-  cursor: pointer;
-}
-
-input[type=range] {
-  position: relative;
-  background-color: transparent;
-  border: none;
-  outline: none;
-  width: 100%;
-  margin: 15px 0;
-  padding: 0;
-
-  &: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] {
-  -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,195 +0,0 @@
-select.browser-default {
-  opacity: 1;
-  color: var(--md-sys-color-on-background);
-}
-
-select {
-  opacity: 0;
-  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 {
-  /*
-  &.valid .helper-text[data-success],
-  &.invalid ~ .helper-text[data-error] {
-    @extend %hidden-text;
-  }
-
-  &.valid {
-    & > input.select-dropdown {
-      @extend %valid-input-style;
-    }
-    & ~ .helper-text:after {
-      //@extend %custom-success-message;
-    }
-  }
-
-  &.invalid {
-    & > input.select-dropdown,
-    & > input.select-dropdown:focus {
-      @extend %invalid-input-style;
-    }
-    & ~ .helper-text:after {
-      //@extend %custom-error-message;
-    }
-  }
-
-  &.valid + label,
-  &.invalid + label {
-    width: 100%;
-    pointer-events: none;
-  }
-  & + label:after {
-    //@extend %input-after-style;
-  }
-  */
-
-  position: relative;
-
-  /*
-  input.select-dropdown {    
-    &:focus {
-      border-bottom: 1px solid var(--md-sys-color-primary);
-    }
-    position: relative;
-    cursor: pointer;
-    background-color: transparent;
-    border: none;
-    border-bottom: 2px solid var(--md-sys-color-on-surface-variant);
-    outline: none;
-    height: 3rem;
-    line-height: 3rem;
-    width: 100%;
-    font-size: 16px;
-    margin: 0 0 8px 0;
-    padding: 0;
-    display: block;
-    user-select:none;
-    z-index: 1;
-    color: var(--md-sys-color-on-background);
-  }
-  */
-
-  .caret {
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    margin: auto 0;
-    z-index: 0;
-    fill: var(--md-sys-color-on-background);
-  }
-
-  // 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;
-}
-
-/*
-body.keyboard-focused {
-  .select-dropdown.dropdown-content li:focus {
-    //background-color: $select-option-focus;
-  }
-}
-
-.select-dropdown.dropdown-content {
-  li {
-    &:hover:not(.disabled) {
-      //background-color: $select-option-hover;
-    }
-
-    &.selected:not(.disabled) {
-      //background-color: $select-option-selected;
-    }
-  }
-}
-*/
-
-/*
-// Prefix Icons
-.prefix ~ .select-wrapper {
-  margin-left: 3rem;
-  width: 92%;
-  width: calc(100% - 3rem);
-}
-.prefix ~ label { margin-left: 3rem; }
-// Suffix Icons
-.suffix ~ .select-wrapper {
-  margin-right: 3rem;
-  width: 92%;
-  width: calc(100% - 3rem);
-}
-.suffix ~ label { margin-right: 3rem; }
-*/
-
-// 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;
-  }
-}
-
-/*
-.select-dropdown .selected {
-  color: red;
-}
-*/

package/sass/components/forms/_switches.scss

@@ -1,122 +0,0 @@
-.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;
-}
-