@materializecss/materialize 2.2.2 → 2.3.1

package/sass/components/colors.module.scss

@@ -1,74 +0,0 @@
-.primary { background-color: var(--md-sys-color-primary); }
-.primary-text { color: var(--md-sys-color-primary); }
-.on-primary { background-color: var(--md-sys-color-on-primary); }
-.on-primary-text { color: var(--md-sys-color-on-primary); }
-.primary-container { background-color: var(--md-sys-color-primary-container); }
-.primary-container-text { color: var(--md-sys-color-primary-container); }
-.on-primary-container { background-color: var(--md-sys-color-on-primary-container); }
-.on-primary-container-text { color: var(--md-sys-color-on-primary-container); }
-
-.secondary { background-color: var(--md-sys-color-secondary); }
-.secondary-text { color: var(--md-sys-color-secondary); }
-.on-secondary { background-color: var(--md-sys-color-on-secondary); }
-.on-secondary-text { color: var(--md-sys-color-on-secondary); }
-.secondary-container { background-color: var(--md-sys-color-secondary-container); }
-.secondary-container-text { color: var(--md-sys-color-secondary-container); }
-.on-secondary-container { background-color: var(--md-sys-color-on-secondary-container); }
-.on-secondary-container-text { color: var(--md-sys-color-on-secondary-container); }
-
-.tertiary { background-color: var(--md-sys-color-tertiary); }
-.tertiary-text { color: var(--md-sys-color-tertiary); }
-.on-tertiary { background-color: var(--md-sys-color-on-tertiary); }
-.on-tertiary-text { color: var(--md-sys-color-on-tertiary); }
-.tertiary-container { background-color: var(--md-sys-color-tertiary-container); }
-.tertiary-container-text { color: var(--md-sys-color-tertiary-container); }
-.on-tertiary-container { background-color: var(--md-sys-color-on-tertiary-container); }
-.on-tertiary-container-text { color: var(--md-sys-color-on-tertiary-container); }
-
-.error { background-color: var(--md-sys-color-error); }
-.error-text { color: var(--md-sys-color-error); }
-.on-error { background-color: var(--md-sys-color-on-error); }
-.on-error-text { color: var(--md-sys-color-on-error); }
-.error-container { background-color: var(--md-sys-color-error-container); }
-.error-container-text { color: var(--md-sys-color-error-container); }
-.on-error-container { background-color: var(--md-sys-color-on-error-container); }
-.on-error-container-text { color: var(--md-sys-color-on-error-container); }
-
-.background { background-color: var(--md-sys-color-background); }
-.background-text { color: var(--md-sys-color-background); }
-.on-background { background-color: var(--md-sys-color-on-background); }
-.on-background-text { color: var(--md-sys-color-on-background); }
-
-.surface { background-color: var(--md-sys-color-surface); }
-.surface-text { color: var(--md-sys-color-surface); }
-.on-surface { background-color: var(--md-sys-color-on-surface); }
-.on-surface-text { color: var(--md-sys-color-on-surface); }
-
-.surface-variant { background-color: var(--md-sys-color-surface-variant); }
-.surface-variant-text { color: var(--md-sys-color-surface-variant); }
-.on-surface-variant { background-color: var(--md-sys-color-on-surface-variant); }
-.on-surface-variant-text { color: var(--md-sys-color-on-surface-variant); }
-
-.outline { background-color: var(--md-sys-color-outline); }
-.outline-text { color: var(--md-sys-color-outline); }
-
-.inverse-on-surface { background-color: var(--md-sys-color-inverse-on-surface); }
-.inverse-on-surface-text { color: var(--md-sys-color-inverse-on-surface); }
-
-.inverse-surface { background-color: var(--md-sys-color-inverse-surface); }
-.inverse-surface-text { color: var(--md-sys-color-inverse-surface); }
-
-.inverse-primary { background-color: var(--md-sys-color-inverse-primary); }
-.inverse-primary-text { color: var(--md-sys-color-inverse-primary); }
-
-.shadow { background-color: var(--md-sys-color-shadow); }
-.shadow-text { color: var(--md-sys-color-shadow); }
-
-.surface-tint { background-color: var(--md-sys-color-surface-tint); }
-.surface-tint-text { color: var(--md-sys-color-surface-tint); }
-
-.outline-variant { background-color: var(--md-sys-color-outline-variant); }
-.outline-variant-text { color: var(--md-sys-color-outline-variant); }
-
-.scrim { background-color: var(--md-sys-color-scrim); }
-.scrim-text { color: var(--md-sys-color-scrim); }

package/sass/components/forms/_checkboxes.scss

@@ -1,199 +0,0 @@
-/* Checkboxes */
-
-/* Remove default checkbox */
-[type="checkbox"]:not(:checked),
-[type="checkbox"]:checked {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-// Checkbox Styles
-[type="checkbox"] {
-  // Text Label Style
-  + span:not(.lever) {
-    position: relative;
-    padding-left: 35px;
-    cursor: pointer;
-    display: inline-block;
-    height: 25px;
-    line-height: 25px;
-    font-size: 1rem;
-    user-select: none;
-  }
-
-  /* checkbox aspect */
-  + span:not(.lever):before,
-  &:not(.filled-in) + span:not(.lever):after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 18px;
-    height: 18px;
-    z-index: 0;
-    border: 2px solid var(--md-sys-color-on-surface-variant);
-    border-radius: 1px;
-    margin-top: 3px;
-    transition: .2s;
-  }
-
-  &:not(.filled-in) + span:not(.lever):after {
-    border: 0;
-    transform: scale(0);
-  }
-
-  &:not(:checked):disabled + span:not(.lever):before {
-    border: none;
-    background-color: var(--md-sys-color-on-surface);
-  }
-
-  // Focused styles
-  &.tabbed:focus + span:not(.lever):after {
-    transform: scale(1);
-    border: 0;
-    border-radius: 50%;
-    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.12);
-    background-color: rgba(0, 0, 0, 0.12);
-  }
-}
-
-[type="checkbox"]:checked {
-  + span:not(.lever):before {
-    top: -4px;
-    left: -5px;
-    width: 12px;
-    height: 22px;
-    border-top: 2px solid transparent;
-    border-left: 2px solid transparent;
-    border-right: 2px solid var(--md-sys-color-primary);
-    border-bottom: 2px solid var(--md-sys-color-primary);
-    transform: rotate(40deg);
-    backface-visibility: hidden;
-    transform-origin: 100% 100%;
-  }
-
-  &:disabled + span:before {
-    border-right: 2px solid var(--md-sys-color-on-surface);
-    border-bottom: 2px solid var(--md-sys-color-on-surface);
-  }
-}
-
-/* Indeterminate checkbox */
-[type="checkbox"]:indeterminate {
-  + span:not(.lever):before {
-    top: -11px;
-    left: -12px;
-    width: 10px;
-    height: 22px;
-    border-top: none;
-    border-left: none;
-    border-right: 2px solid var(--md-sys-color-primary);
-    border-bottom: none;
-    transform: rotate(90deg);
-    backface-visibility: hidden;
-    transform-origin: 100% 100%;
-  }
-
-  // Disabled indeterminate
-  &:disabled + span:not(.lever):before {
-    border-right: 2px solid var(--md-sys-color-on-surface);
-    background-color: transparent;
-  }
-}
-
-// Filled in Style
-[type="checkbox"].filled-in {
-  // General
-  + span:not(.lever):after {
-    border-radius: 2px;
-  }
-
-  + span:not(.lever):before,
-  + span:not(.lever):after {
-    content: '';
-    left: 0;
-    position: absolute;
-    /* .1s delay is for check animation */
-    transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
-    z-index: 1;
-  }
-
-  // Unchecked style
-  &:not(:checked) + span:not(.lever):before {
-    width: 0;
-    height: 0;
-    border: 3px solid transparent;
-    left: 6px;
-    top: 10px;
-    transform: rotateZ(37deg);
-    transform-origin: 100% 100%;
-  }
-
-  &:not(:checked) + span:not(.lever):after {
-    height: 20px;
-    width: 20px;
-    background-color: transparent;
-    border: 2px solid var(--md-sys-color-on-surface-variant);
-    top: 0px;
-    z-index: 0;
-  }
-
-  // Checked style
-  &:checked {
-    + span:not(.lever):before {
-      top: 0;
-      left: 1px;
-      width: 8px;
-      height: 13px;
-      border-top: 2px solid transparent;
-      border-left: 2px solid transparent;
-      border-right: 2px solid  var(--md-sys-color-on-primary);
-      border-bottom: 2px solid  var(--md-sys-color-on-primary);
-      transform: rotateZ(37deg);
-      transform-origin: 100% 100%;
-    }
-
-    + span:not(.lever):after {
-      top: 0;
-      width: 20px;
-      height: 20px;
-      border: 2px solid var(--md-sys-color-primary);
-      background-color: var(--md-sys-color-primary);
-      z-index: 0;
-    }
-  }
-
-  // Focused styles
-  &.tabbed:focus + span:not(.lever):after {
-    border-radius: 2px;
-    border-color: var(--md-sys-color-on-surface-variant)r;
-    background-color: rgba(0, 0, 0, 0.12);
-  }
-
-  &.tabbed:checked:focus + span:not(.lever):after {
-    border-radius: 2px;
-    background-color: var(--md-sys-color-primary);
-    border-color: var(--md-sys-color-primary);
-  }
-
-  // Disabled style
-  &:disabled:not(:checked) + span:not(.lever):before {
-    background-color: transparent;
-    border: 2px solid transparent;
-  }
-
-  &:disabled:not(:checked) + span:not(.lever):after {
-    border-color: transparent;
-    background-color: var(--md-sys-color-on-surface);
-  }
-
-  &:disabled:checked + span:not(.lever):before {
-    background-color: transparent;
-  }
-
-  &:disabled:checked + span:not(.lever):after {
-    background-color: var(--md-sys-color-on-surface);
-    border-color: var(--md-sys-color-on-surface);
-  }
-}

package/sass/components/forms/_file-input.scss

@@ -1,41 +0,0 @@
-.file-field {
-  display: grid;
-  grid-template-columns: min-content auto;
-  gap: 10px;
-  //position: relative;
-
-  .file-path-wrapper {
-    overflow: hidden;
-  }
-
-  input.file-path { width: 100%; }
-
-  .btn {
-    height: 3rem;
-    line-height: 3rem;
-  }
-
-  span {
-    cursor: pointer;
-  }
-
-  input[type=file] {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;    
-    cursor: pointer;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    opacity: 0;
-    font-size: 20px;    
-    filter: alpha(opacity=0);
-
-    // Needed to override webkit button
-    &::-webkit-file-upload-button {
-      display: none;
-    }
-  }
-}

package/sass/components/forms/_input-fields.scss

@@ -1,356 +0,0 @@
-@use '../variables' as *;
-
-/* Style Placeholders */
-::placeholder {
-  color: var(--md-sys-color-on-surface-variant);
-}
-
-/* Text inputs */
-input:not([type]):not(.browser-default),
-input[type=text]:not(.browser-default),
-input[type=password]:not(.browser-default),
-input[type=email]:not(.browser-default),
-input[type=url]:not(.browser-default),
-input[type=time]:not(.browser-default),
-input[type=date]:not(.browser-default),
-input[type=datetime]:not(.browser-default),
-input[type=datetime-local]:not(.browser-default),
-input[type=month]:not(.browser-default),
-input[type=tel]:not(.browser-default),
-input[type=number]:not(.browser-default),
-input[type=search]:not(.browser-default),
-textarea.materialize-textarea {
-  outline: none;
-  color: var(--md-sys-color-on-background);
-  width: 100%;
-  font-size: $md_sys_typescale_body-large_size; //16px; // => 16 dp
-  height: 56px; // 56dp
-  background-color: transparent;
-}
-
-%invalid-input-style {
-  border-bottom: 2px solid var(--md-sys-color-error);
-  box-shadow: 0 1px 0 0 var(--md-sys-color-error);
-}
-
-%hidden-text > span {
-  display: none
-}
-
-%custom-error-message {
-  content: attr(data-error);
-  color: var(--md-sys-color-error);
-}
-
-.input-field {
-  --input-color: var(--md-sys-color-primary);
-
-  position: relative;
-  clear: both;
-
-  // Default
-
-  input, textarea {
-    box-sizing: border-box; /* https://stackoverflow.com/questions/1377719/padding-within-inputs-breaks-width-100*/
-    padding: 0 16px;
-    padding-top: 20px;
-    //background-color: transparent; //background-color: var(--md-sys-color-surface);
-    border: none; // reset
-    border-radius: 4px; // md.sys.shape.corner.extra-small.top
-    border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-
-    &:focus:not([readonly]) {
-      border-bottom: 2px solid var(--input-color);
-      padding-top: 20px + 1px; // add border-width
-    }
-
-    &:disabled, &[readonly="readonly"] {
-      color: rgba(var(--md_sys_color_on-surface), 0.38);
-      border-color: rgba(var(--md_sys_color_on-surface), 0.12);
-      background-color: rgba(var(--md_sys_color_on-surface), 0.04);
-    }
-
-    // Label
-    &:focus:not([readonly]) + label {
-      color: var(--input-color);
-    }
-    &:focus:not([readonly]) + label,
-    &:not([placeholder=' ']) + label,
-    &:not(:placeholder-shown) + label {
-      //font-size: 12px; // md.sys.typescale.body-small.size
-      // https://stackoverflow.com/questions/34717492/css-transition-font-size-avoid-jittering-wiggling
-      transform: scale(calc(12 / 16));
-      top: 8px;
-    }
-
-    &:disabled + label, &[readonly="readonly"] + label {
-      color: rgba(var(--md_sys_color_on-surface), 0.38);
-    }
-
-    // Hide helper text on data message
-    &.invalid ~ .supporting-text[data-error] {
-      @extend %hidden-text;
-    }
-
-    // Invalid Input Style
-    &.invalid {
-      @extend %invalid-input-style;
-    }
-
-    // Custom Error message
-    &.invalid ~ .supporting-text:after {
-      @extend %custom-error-message;
-    }
-
-    &.invalid ~ label,
-    &:focus.invalid ~ label {
-      color: var(--md-sys-color-error);
-    }
-  }
-
-  input::placeholder {
-    user-select: none;
-  }
-
-  & > label {
-    color: var(--md-sys-color-on-surface-variant);
-    user-select: none;
-    font-size: 16px;
-    position: absolute;
-    left: 16px;
-    top: 16px;
-    cursor: text;
-    transform-origin: top left;
-    transition:
-      left 0.2s ease-out,
-      top 0.2s ease-out,
-      transform 0.2s ease-out
-    ;
-  }
-
-  // Sub-Infos
-
-  .supporting-text {
-    color: var(--md-sys-color-on-surface-variant);
-    font-size: 12px;
-    padding: 0 16px;
-    margin-top: 4px;
-  }
-
-  .character-counter {
-    color: var(--md-sys-color-on-surface-variant);
-    font-size: 12px;
-    float: right;
-    padding: 0 16px;
-    margin-top: 4px;
-  }
-
-  .prefix {
-    position: absolute;
-    left: 12px;
-    top: 16px;
-    user-select: none;
-    display: flex;
-    align-self: center;
-  }
-
-  .suffix {
-    position: absolute;
-    right: 12px;
-    top: 16px;
-    user-select: none;
-  }
-
-  .prefix ~ input, .prefix ~ textarea {
-    padding-left: calc(12px + 24px + 16px);
-  }
-  .suffix ~ input, .suffix ~ textarea {
-    padding-right: calc(12px + 24px + 16px);
-  }
-  .prefix ~ label {
-    left: calc(12px + 24px + 16px);
-  }
-
-  // Outlined
-
-  // todo: use this approach for floating labels with outline
-  // https://dev.to/icyjoseph/use-more-html-elements-floating-from-field-37o9
-
-  &.outlined {
-
-    input, textarea {
-      padding-top: 0;
-      background-color: transparent; //(--md-sys-color-background);
-      border: 1px solid var(--md-sys-color-on-surface-variant);
-      border-radius: 4px; // md.sys.shape.corner.extra-small
-
-      &:focus:not([readonly]) {
-        border: 2px solid var(--input-color);
-        padding-top: 0;
-        margin-left: -1px; // subtract border-width
-
-      }
-
-      // Label
-      &:focus:not([readonly]) + label {
-        color: var(--input-color);
-      }
-      &:focus:not([readonly]) + label,
-      &:not([placeholder=' ']) + label,
-      &:not(:placeholder-shown) + label {
-        top: -8px;
-        left: 16px;
-        margin-left: -4px;
-        padding: 0 4px;
-        background-color: transparent; //var(--md-sys-color-background);
-      }
-
-      &:disabled, &[readonly="readonly"] {
-        color: rgba(var(--md_sys_color_on-surface), 0.38);
-        border-color: rgba(var(--md_sys_color_on-surface), 0.12);
-      }
-    }
-  }
-
-  // Error
-  &.error {
-    input, textarea {
-      border-color: var(--md-sys-color-error);
-    }
-    input:focus:not([readonly]), textarea:focus:not([readonly]) {
-      border-color: var(--md-sys-color-error);
-    }
-    input:focus:not([readonly]) + label, textarea:focus:not([readonly]) + label {
-      color: var(--md-sys-color-error);
-    }
-    label {
-      color: var(--md-sys-color-error);
-    }
-    .supporting-text {
-      color: var(--md-sys-color-error);
-    }
-    .suffix {
-      color: var(--md-sys-color-error);
-    }
-  }
-}
-
-/* Inline */
-.inline {
-  display: inline-block;
-}
-
-/* Search Field */
-.searchbar {
-  .prefix {
-    position: absolute;
-    padding-left: 1rem;
-    top: 0;
-    user-select: none;
-    display: flex;
-    align-self: center;
-  }
-
-  & > input {
-    border-width: 0;
-    background-color: transparent;
-    padding-left: 3rem;
-  }
-}
-.searchbar.has-sidebar {
-  margin-left: 0;
-  @media #{$large-and-up} {
-    margin-left: 300px;
-  }
-}
-
-/*
-.input-field input[type=search] {
-  display: block;
-  line-height: inherit;
-
-  .nav-wrapper & {
-    height: inherit;
-    padding-left: 4rem;
-    width: calc(100% - 4rem);
-    border: 0;
-    box-shadow: none;
-  }
-  &:focus:not(.browser-default) {
-    border: 0;
-    box-shadow: none;
-  }
-  & + .label-icon {
-    transform: none;
-    left: 1rem;
-  }
-}
-*/
-
-/* Textarea */
-// Default textarea
-textarea {
-  width: 100%;
-  height: 3rem;
-  background-color: transparent;
-
-  &.materialize-textarea {
-    padding-top: 26px !important;
-    padding-bottom: 4px !important;
-    line-height: normal;
-    overflow-y: hidden; /* prevents scroll bar flash */
-    resize: none;
-    min-height: 3rem;
-    box-sizing: border-box;
-  }
-}
-
-// For textarea autoresize
-.hiddendiv {
-  visibility: hidden;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
-  padding-top: 1.2rem; /* prevents text jump on Enter keypress */
-  // Reduces repaints
-  position: absolute;
-  top: 0;
-  z-index: -1;
-}
-
-/* Autocomplete Items */
-.autocomplete-content {
-  li {
-    .highlight { color: var(--md-sys-color-on-background); }
-    img {
-      height: $dropdown-item-height - 10;
-      width: $dropdown-item-height - 10;
-      margin: 5px 15px;
-    }
-  }
-}
-
-/* Datepicker date input fields */
-.datepicker-date-input {
-  position: relative;
-  text-indent: -9999px;
-
-  &::after {
-    display: block;
-    position: absolute;
-    top: 1.10rem;
-    content: attr(data-date);
-    color: var(--input-color);
-    text-indent: 0;
-  }
-
-  &:focus-visible {
-    text-indent: 0;
-  }
-
-  &:focus-visible:after {
-    text-indent: -9999px;
-  }
-}