@materializecss/materialize 2.2.2 → 2.3.1

package/sass/components/_buttons.scss

@@ -1,348 +0,0 @@
-@use './mixins.module.scss' as *;
-@use './variables' as *;
-
-:root {
-  --btn-height: 40px;
-  --btn-font-size-icon: 16px;
-  --btn-padding: 24px;
-  --btn-padding-icon: 16px;
-  --btn-gap-icon: 8px;
-  --btn-border-radius: 4px;
-  --btn-font-size: 14px;
-}
-
-.btn, .btn-floating, .btn-large, .btn-small, .btn-flat {
-  @include btn(
-    var(--btn-height),
-    var(--btn-border-radius),
-    var(--btn-padding),
-    var(--btn-padding),
-    var(--btn-font-size)
-  );
-}
-
-// Icon
-.btn.icon-left, .btn.icon-right {
-  position: relative;
-}
-
-.btn.icon-left {
-  padding-left: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon));
-}
-
-.btn.icon-right {
-  padding-right: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon));
-}
-
-.btn.icon-left i, .btn.icon-right i {
-  position: absolute;
-  font-size: var(--btn-font-size-icon);
-}
-
-.btn.icon-left i {
-  left: var(--btn-padding-icon);
-}
-
-.btn.icon-right i {
-  right: var(--btn-padding-icon);
-}
-
-//------------------ Enabled
-
-.btn.filled {
-  @include btn-filled;
-}
-
-.btn.tonal {
-  @include btn-tonal;
-}
-
-.btn.elevated {
-  @include btn-elevated;
-}
-
-.btn.outlined {
-  @include btn-outlined;
-}
-
-.btn.text, .btn-flat {
-  @include btn-flat;
-}
-
-//------------------ Disabled
-
-.btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled,
-.btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled,
-.btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled] {
-  @include btn-disabled();
-}
-
-//------------------ Hover
-
-//------------------ Focus
-
-// Floating button
-.btn-floating {
-  // FIXES
-  // width: unset;
-  // padding: 16px !important;
-  // padding-right: 24px !important; /* only with icon */
-  // gap: 8px;
-  width: $button-floating-size;
-  height: $button-floating-size;
-  color: var(--md-sys-color-on-primary-container);
-  background-color: var(--md-sys-color-primary-container);
-  border-radius: $button-floating-radius;
-  padding: 0;
-  display: grid;
-  grid-auto-flow: column;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-  z-index: 1;
-  @extend .z-depth-1;
-  transition: background-color .3s;
-  cursor: pointer;
-  vertical-align: middle;
-
-  &:hover {
-    @extend .z-depth-1-half;
-    background-color: color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-on-primary-container) 16%);
-  }
-
-  &:focus {
-    background-color: $button-floating-background-focus;
-    @extend .z-depth-1-half;
-  }
-
-  &:before {
-    border-radius: 0;
-  }
-
-  &.btn-large {
-    width: 56px;
-    height: 56px;
-    padding: 0;
-    &.halfway-fab {
-      bottom: -56px * 0.5;
-    }
-    // font-size:
-    // i {
-    //   // line-height: 56px;
-    // }
-  }
-
-  &.btn-small {
-    --btn-small-height: calc(0.75 * var(--btn-height));
-    width: var(--btn-small-height);
-    height: var(--btn-small-height);
-
-    &.halfway-fab {
-      bottom: calc(var(--btn-small-height) * -0.5);
-    }
-    // i {
-    //   line-height: $button-floating-small-size;
-    // }
-  }
-
-  &.halfway-fab {
-    position: absolute;
-    right: 24px;
-    bottom: -$button-floating-size * 0.5;
-
-    &.left {
-      right: auto;
-      left: 24px;
-    }
-  }
-
-  i {
-    color: $button-floating-color;
-    font-size: 1.6rem;
-    width: inherit;
-    display: inline-block;
-    text-align: center;
-  }
-}
-
-// button fix
-button.btn-floating {
-  border: none;
-}
-
-// Fixed Action Button
-.fixed-action-btn {
-  position: fixed;
-  right: 23px;
-  bottom: 23px;
-  padding-top: 15px;
-  margin-bottom: 0;
-  z-index: 997;
-
-  &.active {
-    ul {
-      visibility: visible;
-      padding-left: 0;
-      list-style-type: none;
-    }
-  }
-
-  // Directions
-  &.direction-left,
-  &.direction-right {
-    padding: 0 0 0 15px;
-
-    ul {
-      text-align: right;
-      right: 64px;
-      top: 50%;
-      transform: translateY(-50%);
-      height: 100%;
-      left: auto;
-      /*width 100% only goes to width of button container */
-      width: 500px;
-
-      li {
-        display: inline-block;
-        margin: 7.5px 15px 0 0;
-      }
-    }
-  }
-
-  &.direction-right {
-    padding: 0 15px 0 0;
-
-    ul {
-      text-align: left;
-      direction: rtl;
-      left: 64px;
-      right: auto;
-
-      li {
-        margin: 7.5px 0 0 15px;
-      }
-    }
-  }
-
-  &.direction-bottom {
-    padding: 0 0 15px 0;
-
-    ul {
-      top: 64px;
-      bottom: auto;
-      display: flex;
-      flex-direction: column-reverse;
-
-      li {
-        margin: 15px 0 0 0;
-      }
-    }
-  }
-
-  &.toolbar {
-    padding: 0;
-    height: 56px;
-
-    &.active {
-      & > a i {
-        opacity: 0;
-      }
-    }
-
-    ul {
-      display: flex;
-      top: 0;
-      bottom: 0;
-      z-index: 1;
-
-      li {
-        flex: 1;
-        display: inline-block;
-        margin: 0;
-        height: 100%;
-        transition: none;
-
-        a {
-          display: block;
-          overflow: hidden;
-          position: relative;
-          width: 100%;
-          height: 100%;
-          background-color: transparent;
-          box-shadow: none;
-          color: $button-floating-color;
-          line-height: 56px;
-          z-index: 1;
-
-          i {
-            line-height: inherit;
-          }
-        }
-      }
-    }
-  }
-
-  ul {
-    left: 0;
-    right: 0;
-    text-align: center;
-    position: absolute;
-    bottom: 64px;
-    margin: 0;
-    visibility: hidden;
-
-    li {
-      margin-bottom: 15px;
-    }
-
-    a.btn-floating {
-      opacity: 0;
-    }
-  }
-
-  .fab-backdrop {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    width: $button-floating-size;
-    height: $button-floating-size;
-    background-color: $button-floating-background;
-    border-radius: $button-floating-radius;
-    transform: scale(0);
-  }
-}
-
-//--- Helper classes (for all)
-
-// Large button
-.btn-large {
-  @extend .btn;
-  height: calc(1.5 * var(--btn-height));
-  font-size: 18px;
-  padding: 0 28px;
-
-  i {
-    font-size: 1.6rem;
-  }
-}
-
-// Small button
-.btn-small {
-  @extend .btn;
-  height: calc(0.75 * var(--btn-height));
-  font-size: 13px;
-
-  i {
-    font-size: 1.2rem;
-  }
-}
-
-// Block button
-.btn-block {
-  display: block;
-}
-
-.btn.rounded {
-  border-radius: 99999px;
-}

package/sass/components/_cards.scss

@@ -1,229 +0,0 @@
-@use './variables' as *;
-@use './mixins.module.scss' as *;
-
-.card-panel {
-  transition: box-shadow .25s;
-  padding: 24px;
-  margin: $element-top-margin 0 $element-bottom-margin 0;
-  border-radius: 12px;
-  @extend .z-depth-1;
-  background-color: var(--md-sys-color-surface);
-}
-
-.card {
-  --background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
-
-  position: relative;
-  //margin: $element-top-margin 0 $element-bottom-margin 0;
-  background-color: var(--background-color);
-  transition: box-shadow .25s;
-  border-radius: 12px;
-  @extend .z-depth-1;
-
-  .card-title {
-    font-size: 24px;
-    font-weight: 300;
-  }
-
-  // Card Sizes
-  &.small, &.medium, &.large {
-    position: relative;
-
-    .card-image {
-      max-height: 60%;
-      overflow: hidden;
-    }
-
-    .card-image + .card-content {
-      max-height: 40%;
-    }
-
-    .card-content {
-      max-height: 100%;
-      overflow: hidden;
-    }
-
-    .card-action {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-  }
-
-  &.small {
-    height: 300px;
-  }
-
-  &.medium {
-    height: 400px;
-  }
-
-  &.large {
-    height: 500px;
-  }
-
-  // Horizontal Cards
-  &.horizontal {
-    display: flex;
-
-    &.small, &.medium, &.large {
-      .card-image {
-        height: 100%;
-        max-height: none;
-        overflow: visible;
-
-        img {
-          height: 100%;
-        }
-      }
-    }
-
-    .card-image {
-      max-width: 50%;
-
-      img {
-        border-radius: 2px 0 0 2px;
-        max-width: 100%;
-        width: auto;
-      }
-    }
-
-    .card-stacked {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      position: relative;
-
-      .card-content {
-        flex-grow: 1;
-      }
-    }
-  }
-
-  // Sticky Action Section
-  &.sticky-action {
-    .card-action {
-      z-index: 2;
-    }
-
-    .card-reveal {
-      z-index: 1;
-      padding-bottom: 64px;
-    }
-  }
-
-  .card-image {
-    position: relative;
-
-    // Image background for content
-    img {
-      display: block;
-      border-radius: 2px 2px 0 0;
-      position: relative;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      width: 100%;
-    }
-
-    .card-title {
-      color: var(--md-sys-color-surface);
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      max-width: 100%;
-      padding: 24px;
-    }
-
-    .activator {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top:0;
-      bottom: 0;
-      cursor: pointer;
-    }
-
-    img.activator {
-      position: relative;
-    }
-  }
-
-  .card-content {
-    padding: 24px;
-    border-radius: 0 0 2px 2px;
-
-    p {
-      margin: 0;
-    }
-
-    .card-title {
-      display: block;
-      line-height: 32px;
-      margin-bottom: 8px;
-
-      i {
-        line-height: 32px;
-      }
-
-      &.activator {
-        cursor: pointer;
-      }
-    }
-  }
-
-  .card-action {
-    padding: 0 1.6rem;
-
-    &:last-child {
-      border-radius: 0 0 2px 2px;
-    }
-    // Replaced card links with buttons (Accessibility, @see https://github.com/materializecss/materialize/issues/565)
-    a {
-      @include btn(
-        var(--btn-height),
-        var(--btn-border-radius),
-        var(--btn-padding),
-        var(--btn-padding),
-        var(--btn-font-size)
-      );
-
-      &:first-child {
-        margin-left: -1.6rem;
-      }
-
-      &:last-child {
-        margin-right: -1.6rem;
-      }
-    }
-
-    .btn {
-      &.filled,
-      &.tonal,
-      &.elevated,
-      &.outlined {
-        margin: 0 .26rem 1.6rem 0;
-      }
-    }
-  }
-
-  .card-reveal {
-    padding: 24px;
-    position: absolute;
-    background-color: var(--md-sys-color-surface);
-    width: 100%;
-    overflow-y: auto;
-    left: 0;
-    top: 100%;
-    height: 100%;
-    z-index: 3;
-    display: none;
-
-    .card-title {
-      cursor: pointer;
-      display: block;
-    }
-  }
-}

package/sass/components/_carousel.scss

@@ -1,93 +0,0 @@
-.carousel {
-  --carousel-height: 400px;
-
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-  height: var(--carousel-height);
-  perspective: 500px;
-  transform-style: preserve-3d;
-  transform-origin: 0% 50%;
-
-  &.carousel-slider {
-    top: 0;
-    left: 0;
-
-    .carousel-fixed-item {
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 20px;
-      z-index: 1;
-
-      &.with-indicators {
-        bottom: 68px;
-      }
-    }
-
-    .carousel-item {
-      width: 100%;
-      height: 100%;
-      min-height: var(--carousel-height);
-      position: absolute;
-      top: 0;
-      left: 0;
-
-      h2 {
-        font-size: 24px;
-        font-weight: 500;
-        line-height: 32px;
-      }
-
-      p {
-        font-size: 15px;
-      }
-    }
-  }
-
-  .carousel-item {
-    visibility: hidden;
-    width: calc(var(--carousel-height) * 0.5);
-    height: calc(var(--carousel-height) * 0.5);
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    & > img {
-      width: 100%;
-    }
-  }
-
-  .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;
-      cursor: pointer;
-      height: 8px;
-      width: 8px;
-      margin: 24px 4px;
-      background-color: rgba(255, 255, 255, 0.45);
-      transition: background-color .3s;
-      border-radius: 50%;
-
-      &.active {
-        background-color: var(--md-ref-palette-primary100);
-      }
-    }
-  }
-
-  // Materialbox compatibility
-  &.scrolling .carousel-item .materialboxed,
-  .carousel-item:not(.active) .materialboxed {
-    pointer-events: none;
-  }
-}