@materializecss/materialize 2.2.2 → 2.3.1

package/sass/components/_slider.scss

@@ -1,119 +0,0 @@
-.slider {
-  position: relative;
-  height: 400px;
-  width: 100%;
-
-  // Fullscreen slider
-  &.fullscreen {
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
-    ul.slides {
-      padding-left: 0;
-      list-style-type: none;
-      height: 100%;
-    }
-
-    ul.indicators {
-      padding-left: 0;
-      list-style-type: none;
-      z-index: 2;
-      bottom: 30px;
-
-      .indicator-item {
-        background-color: rgba(255, 255, 255, 0.45);
-
-        &.active {
-          background-color: var(--md-ref-palette-primary100);
-        }
-      }
-
-    }
-  }
-
-  .slides {
-    background-color: var(--md-sys-color-surface);
-    margin: 0;
-    height: 400px;
-    padding-left: 0;
-    list-style-type: none;
-
-    li {
-      padding-left: 0;
-      list-style-type: none; 
-      opacity: 0;
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 1;
-      width: 100%;
-      height: inherit;
-      overflow: hidden;
-
-      img {
-        height: 100%;
-        width: 100%;
-        background-size: cover;
-        background-position: center;
-      }
-
-      .caption {
-        color: #fff;
-        position: absolute;
-        top: 15%;
-        left: 15%;
-        width: 70%;
-        opacity: 0;
-
-        p {
-          color: rgba(255, 255, 255, 0.75);
-        }
-      }
-
-      &.active {
-        z-index: 2;
-      }
-    }
-  }
-
-  .indicators {
-    padding-left: 0;
-    list-style-type: none;
-    position: absolute;
-    text-align: center;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: 0;
-
-    .indicator-item {
-      display: inline-block;
-      position: relative;
-      height: 16px;
-      width: 16px;
-      margin: 0 12px;
-    }
-
-    .indicator-item-btn {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      cursor: pointer;
-      background-color: var(--md-sys-color-shadow-light);
-      transition: background-color .3s;
-      border-radius: 50%;
-      border-width: 0;
-      
-      &.active {
-        background-color: var(--md-sys-color-primary);
-      }
-    }
-  }
-}

package/sass/components/_tabs.scss

@@ -1,167 +0,0 @@
-@use './variables' as *;
-
-.tabs {
-  padding-left: 0;
-  list-style-type: none;
-  position: relative;
-  overflow-x: auto;
-  overflow-y: hidden;
-  width: 100%;
-  background-color: var(--md-sys-color-surface);
-  margin: 0 auto;
-  white-space: nowrap;
-
-  &.tabs-transparent {
-    background-color: transparent;
-
-    .tab a {
-      color: var(--font-on-primary-color-medium);
-    }
-
-    .tab.disabled a,
-    .tab.disabled a:hover,
-    .tab.disabled a:focus {
-      color: rgba(255, 255, 255, 0.38);
-    }
-
-    .tab a:hover {
-      background-color: rgba(0, 0, 0, 0.04);
-    }
-
-    .tab a.active,
-    .tab a:focus {
-      background-color: transparent;
-    }
-
-    .tab a:hover,
-    .tab a.active,
-    .tab a:focus {
-      color:  var(--md-sys-color-on-primary);
-    }
-
-    .indicator {
-      background-color:  var(--md-sys-color-on-primary);
-    }
-  }
-
-  &.tabs-fixed-width {
-    display: flex;
-
-    .tab {
-      flex-grow: 1;
-    }
-  }
-
-  .tab {
-    padding-left: 0;
-    list-style-type: none;
-    display: inline-block;
-    text-align: center;
-    line-height: 48px;
-    padding: 0;
-    margin: 0;
-
-    i.material-icons {
-      position: relative;
-      top: 8px;
-      vertical-align: middle;
-    }
-
-    span {
-      height: 24px;
-      line-height: 20px;
-    }
-
-    a {
-      color: var(--md-sys-color-on-surface-variant);
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      height: 100%;
-      min-height: 48px;  //needed for only-icons tabs
-      padding: 0 24px;
-      font-size: 14px;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      transition: color .28s ease, background-color .28s ease;
-
-      &.active {
-        background-color: transparent;
-      }
-
-      &.active,
-      &:focus,
-      &:hover {
-        color: var(--md-sys-color-primary);
-      }
-
-      &:hover {
-        background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
-      }
-
-      &:focus {
-        background-color: var(--md-sys-color-primary-container);
-      }
-
-      &.active {
-        background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
-      }
-
-      &:focus,
-      &.active {
-        outline: none;
-      }
-    }
-
-    &.disabled a,
-    &.disabled a:hover {
-      color: var(--md-sys-color-on-surface);
-      cursor: default;
-      background-color: transparent;
-
-      &:not(:focus) {
-        background-color: transparent;
-      }
-    }
-  }
-
-  .indicator {
-    position: absolute;
-    bottom: 0;
-    height: 3px;
-    background-color: var(--md-sys-color-primary);
-    will-change: left, right;
-    border-radius: 3px 3px 0 0;
-  }
-
-  &.tabs-horizontal .tab {
-    height: 48px;
-
-    a {
-      display: block;
-    }
-
-    i.material-icons {
-      padding: 0 4px;
-      position: relative;
-      top: -2px;
-      vertical-align: middle;
-    }
-  }
-}
-
-/* Fixed Sidenav hide on smaller */
-
-@media #{$medium-and-down} {
-  .tabs {
-    display: flex;
-
-    .tab {
-      flex-grow: 1;
-
-      a {
-        padding: 0 12px;
-      }
-    }
-  }
-}

package/sass/components/_timepicker.scss

@@ -1,294 +0,0 @@
-@use './variables' as *;
-
-.timepicker-container {
-  display: flex;
-  flex-direction: column;
-  max-width: 325px;
-  padding: 0;
-  background-color: var(--md-sys-color-inverse-on-surface);
-}
-
-.text-primary {
-  color:  var(--md-sys-color-on-primary);
-}
-
-/* Clock Digital Display */
-.timepicker-digital-display {
-  width: auto;
-  flex: 1 auto;
-  // background-color: var(--md-sys-color-surface);
-  padding: 2rem .67rem .67rem .67rem;
-  font-weight: 300;
-}
-
-.timepicker-text-container {
-  display: flex;
-  font-size: 4rem;
-  text-align: left;
-  color: var(--font-on-primary-color-medium);
-  font-weight: 400;
-  /*position: relative;*/
-  user-select: none;
-  padding: 1rem 1rem 1.3rem 1rem;
-
-  input[type=text]{
-    height: 4rem;
-    color: var(--md-sys-color-secondary);
-    border-bottom: 0px;
-    font-size: 4rem;
-    direction: ltr;
-  }
-}
-
-.timepicker-display-column {
-  display: inline-flex;
-}
-
-.timepicker-display-digital-clock {
-  flex-grow: 1;
-  display: inline-flex;
-}
-
-.timepicker-input-hours-wrapper,
-.timepicker-input-minutes-wrapper {
-  width: 6.9rem;
-  height: 5.75rem;
-}
-
-.timepicker-input-hours,
-.timepicker-input-minutes,
-.timepicker-span-am-pm div {
-  cursor: pointer;
-}
-
-input[type=text].timepicker-input-hours,
-input[type=text].timepicker-input-minutes {
-  height: 100%;
-  padding: 1.33rem .8rem;
-  border: 0;
-  text-align: center;
-  color: var(--md-sys-color-on-background);
-  background-color: var(--md-sys-color-surface-variant);
-
-  &:focus {
-    background-color: var(--md-sys-color-primary-container);
-  }
-}
-
-.timepicker-input-divider-wrapper {
-  width: 1.6rem;
-  text-align: center;
-}
-
-/*input[type=text].text-primary {
-  color: var(--md-sys-color-on-background);
-}*/
-
-.timepicker-display-am-pm {
-  font-size: 1.3rem;
-  /*position: absolute;
-  top: 1rem;
-  right: 1rem;*/
-  font-weight: 400;
-}
-
-.timepicker-span-am-pm {
-  height: 5.75rem;
-  max-width: 3.5rem;
-}
-
-.timepicker-container .am-btn,
-.timepicker-container .pm-btn {
-  width: 3.6rem;
-  height: 50%;
-  padding-left: calc(var(--btn-padding) / 1.8);
-  padding-right: calc(var(--btn-padding) / 1.8);
-  line-height: 2rem;
-  vertical-align: middle;
-  text-align: center;
-  // background-color: transparent;
-  border: 1px solid var(--md-sys-color-outline);
-}
-
-.timepicker-container .am-btn {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.timepicker-container .pm-btn {
-  border-top: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-/* Analog Clock Display */
-.timepicker-analog-display {
-  flex: 2.5 auto;
-  padding: .67rem;
-  // background-color: var(--md-sys-color-surface);
-}
-
-.timepicker-plate {
-  background-color: var(--md-sys-color-surface-variant);
-  border-radius: 50%;
-  width: 260px;
-  height: 260px;
-  overflow: visible;
-  position: relative;
-  margin: 0 1.6rem 1.6rem 1.6rem;
-  user-select: none;
-}
-
-.timepicker-canvas,
-.timepicker-dial {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
-
-.timepicker-minutes {
-  visibility: hidden;
-}
-
-.timepicker-tick {
-  border-radius: 50%;
-  color: var(--md-sys-color-on-background);
-  line-height: 40px;
-  text-align: center;
-  width: 40px;
-  height: 40px;
-  position: absolute;
-  cursor: pointer;
-  font-size: 15px;
-}
-
-.timepicker-tick.active,
-.timepicker-tick:hover {
-  background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
-}
-
-.timepicker-dial {
-  transition: transform 350ms, opacity 350ms;
-}
-
-.timepicker-dial-out {
-  opacity: 0;
-
-  &.timepicker-hours {
-    transform: scale(1.1, 1.1);
-  }
-
-  &.timepicker-minutes {
-    transform: scale(.8, .8);
-  }
-}
-
-.timepicker-canvas {
-  transition: opacity 175ms;
-
-  line {
-    stroke: var(--md-sys-color-primary);
-    stroke-width: 4;
-    stroke-linecap: round;
-  }
-}
-
-.timepicker-canvas-out {
-  opacity: 0.25;
-}
-
-.timepicker-canvas-bearing {
-  stroke: none;
-  fill: var(--md-sys-color-primary);
-}
-
-.timepicker-canvas-bg {
-  stroke: none;
-  fill: var(--md-sys-color-primary);
-}
-
-
-/* Footer */
-.timepicker-footer {
-  margin: 0 auto;
-  padding: 5px 1rem;
-  display: flex;
-  justify-content: space-between;
-}
-
-.timepicker-clear {
-  color: var(--md-sys-color-error);
-}
-
-.timepicker-close {
-  color: var(--md-sys-color-primary);
-}
-
-.timepicker-clear,
-.timepicker-close {
-  padding: 0 20px;
-}
-
-/* Media Queries */
-@media #{$large-and-up} {
-  .timepicker-container {
-    width: auto;
-    max-width: 620px;
-  }
-
-  .timepicker-container {
-    flex-direction: row;
-  }
-
-  .timepicker-digital-display {
-    padding: .67rem;
-  }
-
-  .timepicker-text-container {
-    /*top: 31%;*/
-    flex-direction: column;
-    margin-top: 4.8rem;
-    text-align: center;
-  }
-
-  .timepicker-display-column {
-    padding: 0 3%;
-  }
-
-  .timepicker-display-am-pm {
-    margin-top: 1.1rem;
-  }
-
-  .timepicker-span-am-pm {
-    display: flex;
-    flex-grow: 1;
-    max-width: unset;
-  }
-
-  .timepicker-container .am-btn,
-  .timepicker-container .pm-btn {
-    flex-grow: 1;
-    /*width: auto;*/
-    padding-left: calc(var(--btn-padding) / .565);
-    padding-right: calc(var(--btn-padding) / .565);
-    border-radius: var(--btn-border-radius);
-    border: 1px solid var(--md-sys-color-outline);
-  }
-
-  .timepicker-container .am-btn {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  .timepicker-container .pm-btn {
-    border-left: 0;
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-  }
-
-  .timepicker-plate {
-    margin-top: 1.6rem;
-  }
-}

package/sass/components/_toast.scss

@@ -1,68 +0,0 @@
-@use './variables' as *;
-@use './global' as *;
-
-#toast-container {
-  display:block;
-  position: fixed;
-  z-index: 10000;
-
-  @media #{$small-and-down} {
-    min-width: 100%;
-    bottom: 0%;
-  }
-  @media #{$medium-only} {
-    left: 5%;
-    bottom: 7%;
-    max-width: 90%;
-  }
-  @media #{$large-and-up} {
-    top: 10%;
-    right: 7%;
-    max-width: 86%;
-  }
-}
-
-.toast {
-  @extend .z-depth-3;
-  border-radius: 4px;
-  top: 35px;
-  width: auto;
-  margin-top: 10px;
-  position: relative;
-  max-width: 100%;
-  height: auto;
-  min-height: 48px;
-  
-  //line-height: 1.5em;
-  //padding: 10px 25px;
-  padding-left: 16px;
-  padding-right: 12px;
-
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-
-  color: var(--md-sys-color-inverse-on-surface);
-  background-color: var(--md-sys-color-inverse-surface);
-
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: default;
-
-  .toast-action {
-    color: var(--md-sys-color-inverse-primary);
-    font-weight: 500;
-    margin-right: -25px;
-    margin-left: 3rem;
-  }
-
-  &.rounded{
-    border-radius: 24px;
-  }
-
-  @media #{$small-and-down} {
-    width: 100%;
-    border-radius: 0;
-  }
-}

package/sass/components/_tooltip.scss

@@ -1,40 +0,0 @@
-.material-tooltip {
-  padding: 0 8px;  
-  border-radius: 4px;
-  color: var(--md-sys-color-inverse-on-surface);
-  background-color: var(--md-sys-color-inverse-surface);
-  font-family: var(--md-sys-typescale-body-small-font-family-name);
-  font-size: var(--md-sys-typescale-body-small-font-size);
-  line-height: var(--md-sys-typescale-body-small-line-height);
-  font-weight: var(--md-sys-typescale-body-small-font-weight);
-  min-height: 24px;
-  opacity: 0;
-  padding-top: 6px;
-  padding-bottom: 6px;
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 400;
-  letter-spacing: 0.4px;
-  position: absolute;
-  max-width: 300px;
-  overflow: hidden;
-  left: 0;
-  top: 0;
-  pointer-events: none;
-  display: flex;
-  align-items: center;
-  visibility: hidden;
-  z-index: 2000;
-}
-
-.backdrop {
-  position: absolute;
-  opacity: 0;
-  height: 7px;
-  width: 14px;
-  border-radius: 0 0 50% 50%;
-  background-color: var(--md-sys-color-inverse-surface);
-  z-index: -1;
-  transform-origin: 50% 0;
-  visibility: hidden;
-}

package/sass/components/_transitions.scss

@@ -1,12 +0,0 @@
-.scale-transition {
-  transition: transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
-
-  &.scale-out {
-    transform: scale(0);
-    transition: transform .2s !important;
-  }
-
-  &.scale-in {
-    transform: scale(1);
-  }
-}