@materializecss/materialize 2.0.3-alpha → 2.0.3

package/sass/components/_buttons.scss

@@ -1,18 +1,58 @@
-// shared styles
-.btn,
-.btn-flat {
-  font-weight: 500;
-  border: $button-border;
-  border-radius: $button-radius;
-  display: inline-block;
+.btn, .btn-floating, .btn-large, .btn-small, .btn-flat {
+  --font-size-icon: 16px;
+  --padding: 24px;
+  --padding-icon: 16px;
+  --gap-icon: 8px;
+  
   height: $button-height;
-  line-height: $button-height;
-  padding: $button-padding;
-  vertical-align: middle;
-  user-select: none;
+  
+  // line-height: $button-height;
+  border: $button-border;
+  border-radius: $button-radius;  
+  
+  // padding: $button-padding;
+  padding-left: var(--padding);
+  padding-right: var(--padding);
+  
+  color: $button-raised-color;
+  font-size: $button-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(--padding-icon) + var(--font-size-icon) + var(--gap-icon));
+}
+.btn.icon-right {
+  padding-right: calc(var(--padding-icon) + var(--font-size-icon) + var(--gap-icon)); 
+}
+.btn.icon-left i, .btn.icon-right i {
+  position: absolute;
+  font-size: var(--font-size-icon);
+}
+.btn.icon-left i {
+  left: var(--padding-icon);
+}
+.btn.icon-right i {
+  right: var(--padding-icon);
+}
+
+
 // Disabled shared style
 .btn.disabled,
 .btn-floating.disabled,
@@ -40,53 +80,103 @@
   }
 }
 
-// Shared icon styles
-.btn,
-.btn-floating,
-.btn-large,
-.btn-small,
-.btn-flat {
-  font-size: $button-font-size;
-  outline: 0;
-  i {
-    font-size: $button-icon-font-size;
-    line-height: inherit;
+//--- Filled Button
+.btn.filled {
+  background-color: var(--md-sys-color-primary);
+}
+//--- Filled Tonal
+.btn.tonal {
+  background-color: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
+}
+//--- Text-Button (Flat)
+.btn.text, .btn-flat {
+  box-shadow: none;
+  background-color: transparent;
+  color: var(--md-sys-color-primary);
+  cursor: pointer;
+  transition: background-color .2s;
+  &:focus,
+  &:hover {
+    box-shadow: none;
+    background-color: $button-flat-hover-background-color;
+  }
+  &:focus {
+    background-color: $button-flat-focus-background-color;
+  }
+  &.disabled,
+  &.btn.text[disabled], &.btn-flat[disabled] {
+    background-color: transparent !important;
+    color: $button-flat-disabled-color !important;
+    cursor: default;
   }
 }
+//--- Outlined-Button
+.btn.outlined {
+  background-color: transparent;
+  color: $button-raised-background;
+  border: 1px solid $button-raised-background;
+}
+//--- Elevated
+.btn.elevated {
+  @extend .tonal;
+  @extend .z-depth-1;
+}
+
+
+//======================== States (Hover, Focused, ...)
 
-// Raised Button
 .btn {
-  text-decoration: none;
-  color: $button-raised-color;
-  background-color: $button-raised-background;
-  text-align: center;
-  letter-spacing: .5px;
-  @extend .z-depth-1;
-  transition: background-color .2s ease-out;
-  cursor: pointer;
+  @extend .filled;
+
   &:hover {
     background-color: $button-raised-background-hover;
     @extend .z-depth-1-half;
   }
+
   &:focus {
     background-color: $button-raised-background-focus;
     @extend .z-depth-1-half;
-  }
+  }  
 }
 
+
+
+//----------
+// .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 {
     background-color: $button-floating-background-hover;
     @extend .z-depth-1-half;
   }
+
   &:focus {
     background-color: $button-floating-background-focus;
     @extend .z-depth-1-half;
   }
+
   &:before {
     border-radius: 0;
   }
+
   &.btn-large {
     &.halfway-fab {
       bottom: -$button-floating-large-size * 0.5;
@@ -94,9 +184,10 @@
     width: $button-floating-large-size;
     height: $button-floating-large-size;
     padding: 0;
-    i {
-      line-height: $button-floating-large-size;
-    }
+    // font-size: 
+    // i {
+    //   // line-height: $button-floating-large-size;
+    // }
   }
 
   &.btn-small {
@@ -105,9 +196,9 @@
     }
     width: $button-floating-small-size;
     height: $button-floating-small-size;
-    i {
-      line-height: $button-floating-small-size;
-    }
+    // i {
+    //   line-height: $button-floating-small-size;
+    // }
   }
 
   &.halfway-fab {
@@ -119,36 +210,48 @@
     right: 24px;
     bottom: -$button-floating-size * 0.5;
   }
-  display: inline-block;
+
+  // FIXES
+  // width: unset;  
+  // padding: 16px !important;
+  // padding-right: 24px !important; /* only with icon */
+  // gap: 8px;
+
   color: $button-floating-color;
-  position: relative;
-  overflow: hidden;
-  z-index: 1;
+  
   width: $button-floating-size;
   height: $button-floating-size;
-  line-height: $button-floating-size;
-  padding: 0;
+  // line-height: $button-floating-size;
+
   background-color: $button-floating-background;
   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: $button-large-icon-font-size;
+    // line-height: $button-floating-size;
     width: inherit;
     display: inline-block;
     text-align: center;
-    color: $button-floating-color;
-    font-size: $button-large-icon-font-size;
-    line-height: $button-floating-size;
   }
 }
-
 // button fix
 button.btn-floating {
   border: $button-border;
 }
-
 // Fixed Action Button
 .fixed-action-btn {
   &.active {
@@ -274,37 +377,15 @@ button.btn-floating {
   }
 }
 
-// Flat button
-.btn-flat {
-  box-shadow: none;
-  background-color: transparent;
-  color: $button-flat-color;
-  cursor: pointer;
-  transition: background-color .2s;
-  &:focus,
-  &:hover {
-    box-shadow: none;
-    background-color: $button-flat-hover-background-color;
-  }
-  &:focus {
-    background-color: $button-flat-focus-background-color;
-  }
-  &.disabled,
-  &.btn-flat[disabled]  {
-    background-color: transparent !important;
-    color: $button-flat-disabled-color !important;
-    cursor: default;
-  }
-}
+//--- Helper classes (for all)
 
 // Large button
 .btn-large {
   @extend .btn;
   height: $button-large-height;
-  line-height: $button-large-height;
+  // line-height: $button-large-height;
   font-size: $button-large-font-size;
   padding: 0 28px;
-
   i {
     font-size: $button-large-icon-font-size;
   }
@@ -325,3 +406,7 @@ button.btn-floating {
 .btn-block {
   display: block;
 }
+
+.btn.rounded {
+  border-radius: 99999px;
+}

package/sass/components/_chips.scss

@@ -1,45 +1,87 @@
 .chip {
+  --font-size: 14px;
+  --font-size-icon: 18px;
+  --padding: 8px;
+
+  background-color: $chip-bg-color;
+
+  display: inline-flex;
+  white-space: nowrap;
+  gap: 8px;
+
+  margin: 0;
+  height: 32px;
+
+  padding-left: var(--padding);
+  padding-right: var(--padding);
+  
+  font-size: var(--font-size);
+  font-weight: 500;  
+  color: $chip-font-color;
+  
+  border-radius: 8px;
+
+  align-items: center;
+  user-select: none;
+  vertical-align: top;
+
   &:focus {
     outline: none;
     background-color: $chip-selected-color;
     color: $chip-selected-font-color;
   }
+}
 
-  display: inline-block;
-  height: 32px;
-  font-size: 13px;
-  font-weight: 500;
-  color: $chip-font-color;
-  line-height: 32px;
-  padding: 0 12px;
-  border-radius: 16px;
-  background-color: $chip-bg-color;
-  margin-bottom: $chip-margin;
-  margin-right: $chip-margin;
+.chip.outlined {
+  background-color: transparent;
+  border-color: var(--md-sys-color-outline);
+  border-width: 1px;
+  border-style: solid;
+}
 
-  > img {
-    float: left;
-    margin: 0 8px 0 -12px;
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-  }
+.chip > img {
+  margin: 0;
+  width: 24px;
+  height: 24px;
+  object-fit: cover;
+  border-radius: 12px;
+}
 
-  .close {
-    cursor: pointer;
-    float: right;
-    font-size: 16px;
-    line-height: 32px;
-    padding-left: 8px;
-  }
+.chip > .material-icons {
+  font-size: var(--font-size-icon);
+  @extend .on-surface-variant-text;
+}
+
+.chip .close {
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  padding: 0;
+  display: grid;
+  justify-content: center;
+  align-content: center;
+  cursor: pointer;
+}
+
+.chip .close:hover {
+  background-color: #8888;
 }
 
+//--------------------------
+
 .chips {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+
   border: none;
   border-bottom: 1px solid $chip-border-color;
   box-shadow: none;
   margin: $input-margin;
-  min-height: 45px;
+
+  padding: 4px;
+  // min-height: 45px;
+
   outline: none;
   transition: all .3s;
 
@@ -58,13 +100,18 @@
     color: $input-color;
     display: inline-block;
     font-size: $input-font-size;
-    height: $input-height;
-    line-height: 32px;
+
+    // height: 32px;
+    // height: $input-height;
+    // line-height: 32px;
+    height: 32px;
+
     outline: 0;
     margin: 0;
     padding: 0;
     width: 120px;
 
+
     &:focus {
       border: 0;
       box-shadow: none;

package/sass/components/_collapsible.scss

@@ -31,15 +31,27 @@
   }
 }
 
+.collapsible-header::after {
+  content: '▾';
+  text-align: right;
+  margin-right: 0.25rem;
+  width: 100%;
+}
+.active .collapsible-header::after {
+  content: "▴";
+}
+
+
 .keyboard-focused .collapsible-header:focus {
   background-color: $surface-focus-color-opaque;
 }
 
 .collapsible-body {
-  display: none;
+  max-height: 0;
   border-bottom: 1px solid $collapsible-border-color;
   box-sizing: border-box;
-  padding: 2rem;
+  padding: 0 2rem;
+  overflow: hidden;
   background-color: $collapsible-bg-color;
 }
 

package/sass/components/_global.scss

@@ -78,7 +78,6 @@ a {
 
 .hoverable {
   transition: box-shadow .25s;
-
   &:hover {
     box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   }
@@ -91,7 +90,6 @@ a {
   background-color: $divider-color;
 }
 
-
 //  Blockquote
 blockquote {
   margin: 20px 0;
@@ -102,29 +100,24 @@ blockquote {
 // Icon Styles
 i {
   line-height: inherit;
-
   &.left {
     float: left;
-    margin-right: 15px;
+    margin-left: -8px;
+    // margin-right: 15px;
   }
-
   &.right {
     float: right;
-    margin-left: 15px;
+    // margin-left: 15px;
   }
-
   &.tiny {
     font-size: 1rem;
   }
-
   &.small {
     font-size: 2rem;
   }
-
   &.medium {
     font-size: 4rem;
   }
-
   &.large {
     font-size: 6rem;
   }
@@ -525,10 +518,8 @@ td, th {
       border-right: 1px solid $table-border-color;
     }
   }
-
 }
 
-
 // Responsive Videos
 .video-container {
   position: relative;
@@ -545,88 +536,6 @@ td, th {
   }
 }
 
-// Progress Bar
-.progress {
-  position: relative;
-  height: 4px;
-  display: block;
-  width: 100%;
-  background-color: $progress-bar-track-color;
-  border-radius: 2px;
-  margin: $element-top-margin 0 $element-bottom-margin 0;
-  overflow: hidden;
-
-  .determinate {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    background-color: $progress-bar-color;
-    transition: width .3s linear;
-  }
-
-  .indeterminate {
-    background-color: $progress-bar-color;
-
-    &:before {
-      content: '';
-      position: absolute;
-      background-color: inherit;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      will-change: left, right;
-      // Custom bezier
-      animation: indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite;
-
-    }
-
-    &:after {
-      content: '';
-      position: absolute;
-      background-color: inherit;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      will-change: left, right;
-      // Custom bezier
-      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite;
-      animation-delay: 1.15s;
-    }
-  }
-}
-
-@keyframes indeterminate {
-  0% {
-    left: -35%;
-    right: 100%;
-  }
-  60% {
-    left: 100%;
-    right: -90%;
-  }
-  100% {
-    left: 100%;
-    right: -90%;
-  }
-}
-
-@keyframes indeterminate-short {
-  0% {
-    left: -200%;
-    right: 100%;
-  }
-  60% {
-    left: 107%;
-    right: -8%;
-  }
-  100% {
-    left: 107%;
-    right: -8%;
-  }
-}
-
-
 /*******************
   Utility Classes
 *******************/
@@ -644,12 +553,15 @@ td, th {
 .center, .center-align {
   text-align: center;
 }
+
+// TODO: Remove this
 .left {
   float: left !important;
 }
 .right {
   float: right !important;
 }
+
 // No Text Select
 .no-select {
   user-select: none;

package/sass/components/_materialbox.scss

@@ -22,7 +22,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: #292929;
+  background-color: var(--md-sys-color-background);
   z-index: 1000;
   will-change: opacity;
 }
@@ -30,7 +30,7 @@
 .materialbox-caption {
   position: fixed;
   display: none;
-  color: #fff;
+  color: var(--font-color-main);
   line-height: 50px;
   bottom: 0;
   left: 0;

package/sass/components/_modal.scss

@@ -61,7 +61,6 @@
   width: 100%;
   background: #000;
   display: none;
-
   will-change: opacity;
 }