@materializecss/materialize 2.2.1 → 2.3.0

package/sass/components/_buttons.scss

@@ -1,455 +0,0 @@
-.btn, .btn-floating, .btn-large, .btn-small, .btn-flat {
-  --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;
-
-  height: var(--btn-height);
-  border: none;
-  border-radius: var(--btn-border-radius);
-  padding-left: var(--btn-padding);
-  padding-right: var(--btn-padding);
-  font-size: var(--btn-font-size);
-  font-weight: 500;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
-  white-space: nowrap;
-  outline: 0;
-  user-select: none;
-  transition: background-color .2s ease-out;
-}
-
-// 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 {
-  color: var(--md-sys-color-on-primary);
-  background-color: var(--md-sys-color-primary);
-}
-
-.btn.tonal {
-  color: var(--md-sys-color-on-secondary-container);
-  background-color: var(--md-sys-color-secondary-container);
-}
-
-.btn.elevated {
-  color: var(--md-sys-color-on-secondary-container);
-  background-color: var(--md-sys-color-secondary-container);
-  @extend .z-depth-1;
-}
-
-.btn.outlined {
-  background-color: transparent;
-  color: var(--md-sys-color-primary);
-  border: 1px solid var(--md-sys-color-outline);
-}
-
-.btn.text, .btn-flat {
-  @extend .z-depth-0;
-  color: var(--md-sys-color-primary);
-  background-color: transparent;
-}
-
-//------------------ 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] {
-  @extend .z-depth-0;
-  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);
-  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);
-  pointer-events: none;
-  box-shadow: none;
-  cursor: default;
-}
-
-//------------------ Hover
-
-.btn.elevated:hover {
-  @extend .z-depth-2;
-  color: var(--md-sys-color-primary);
-  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
-}
-
-.btn.filled:hover {
-  @extend .z-depth-1;
-  color: var(--md-sys-color-on-primary);
-  background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%);
-}
-
-.btn.tonal:hover {
-  @extend .z-depth-1;
-  color: var(--md-sys-color-on-secondary-container);
-  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
-}
-
-.btn.outlined:hover {
-  color: var(--md-sys-color-primary);
-  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 16%);
-}
-
-.btn.text:hover {
-  color: var(--md-sys-color-primary);
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
-}
-
-//------------------ Focus
-
-.btn:focus.elevated {
-  @extend .z-depth-1;
-  color: var(--md-sys-color-primary);
-  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%);
-}
-
-.btn:focus.filled {
-  @extend .z-depth-0;
-  color: var(--md-sys-color-on-primary);
-  background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%);
-}
-
-.btn:focus.tonal {
-  @extend .z-depth-0;
-  color: var(--md-sys-color-on-secondary-container);
-  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 20%);
-}
-
-.btn:focus.outlined {
-  color: var(--md-sys-color-primary);
-  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
-  border: 1px solid var(--md-sys-color-primary);
-}
-
-.btn:focus.text {
-  color: var(--md-sys-color-primary);
-  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
-}
-
-// Focus with Keyboard
-.btn:focus-visible {
-  &.filled,
-  &.elevated,
-  &.tonal,
-  &.outlined,
-  &.text {
-    outline: 3px solid var(--md-sys-color-secondary);
-    outline-offset: 2px;
-  }
-}
-
-//----------
-
-// .btn-floating {
-//   border-radius: 16px;
-//   width: unset;
-//   display: grid;
-//   grid-auto-flow: column;
-//   align-items: center;
-//   padding: 16px !important;
-//   padding-right: 24px !important; /* only with icon */
-//   gap: 8px;
-// }
-// .btn-floating.btn-large {
-//   width: unset;
-// }
-// .btn-large {
-//   font-size: 14px;
-// }
-//-----
-// Floating button
-.btn-floating {
-  &: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 {
-    &.halfway-fab {
-      bottom: -56px * 0.5;
-    }
-
-    width: 56px;
-    height: 56px;
-    padding: 0;
-    // font-size:
-    // i {
-    //   // line-height: 56px;
-    // }
-  }
-
-  &.btn-small {
-    --btn-small-height: calc(0.75 * var(--btn-height));
-
-    &.halfway-fab {
-      bottom: calc(var(--btn-small-height) * -0.5);
-    }
-
-    width: var(--btn-small-height);
-    height: var(--btn-small-height);
-    // i {
-    //   line-height: $button-floating-small-size;
-    // }
-  }
-
-  &.halfway-fab {
-    &.left {
-      right: auto;
-      left: 24px;
-    }
-
-    position: absolute;
-    right: 24px;
-    bottom: -$button-floating-size * 0.5;
-  }
-
-  // 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;
-
-  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 {
-  &.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 {
-    &.active {
-      & > a i {
-        opacity: 0;
-      }
-    }
-
-    padding: 0;
-    height: 56px;
-
-    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;
-          }
-        }
-      }
-    }
-  }
-
-  position: fixed;
-  right: 23px;
-  bottom: 23px;
-  padding-top: 15px;
-  margin-bottom: 0;
-  z-index: 997;
-
-  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,210 +0,0 @@
-.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 {
-  overflow: hidden;
-  position: relative;
-  //margin: $element-top-margin 0 $element-bottom-margin 0;
-  background-color: var(--md-sys-color-surface);
-  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 {
-    &.small, &.medium, &.large {
-      .card-image {
-        height: 100%;
-        max-height: none;
-        overflow: visible;
-
-        img {
-          height: 100%;
-        }
-      }
-    }
-
-    display: flex;
-
-    .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;
-    }
-  }
-
-  .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 {
-    &:last-child {
-      border-radius: 0 0 2px 2px;
-    }
-
-    border-top: 1px solid var(--md-sys-color-outline-variant);
-    position: relative;
-    background-color: inherit;
-
-    a {
-      padding: 16px 24px;
-      display: inline-block;
-    }
-
-    a:not(.btn):not(.btn-large):not(.btn-floating) {
-      color: var(--md-sys-color-primary);
-      transition: color .3s ease;
-
-      &:hover {
-        background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
-      }
-    }
-  }
-
-  .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;
-    }
-  }
-}