material 0.9.26 → 0.9.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material",
-  "version": "0.9.26",
+  "version": "0.9.28",
   "description": "A lightweight implementation of Material Design Components for the web - ES6",
   "main": "index.js",
   "type": "module",

package/src/skin/material/_variables.scss

@@ -0,0 +1,30 @@
+// Material Design color variables with defaults
+// These can be overridden by consumers using @use "variables" with (...)
+
+// Background colors
+$background-color: #ffffff !default;
+$background-color-dark: #202124 !default;
+
+// Surface colors
+$surface-color: #ffffff !default;
+$surface-color-dark: #333333 !default;
+
+// Default colors
+$default-color: rgba(0, 0, 0, 1) !default;
+$default-color-dark: rgba(255, 255, 255, 1) !default;
+$default-color-text: rgba(0, 0, 0, 0.87) !default;
+$default-color-text-dark: rgba(255, 255, 255, 0.87) !default;
+$default-color-button: rgba(0, 0, 0, 0.47) !default;
+$default-color-icon: rgba(0, 0, 0, 0.67) !default;
+
+// Primary colors
+$primary-color: #6200ee !default;
+$primary-color-dark: #bb86fc !default;
+$primary-color-text: rgba(255, 255, 255, 0.87) !default;
+$primary-color-text-dark: rgba(255, 255, 255, 0.87) !default;
+
+// Secondary colors
+$secondary-color: #03dac6 !default;
+$secondary-color-dark: #03dac6 !default;
+$secondary-color-text: rgba(0, 0, 0, 0.87) !default;
+$secondary-color-text-dark: rgba(0, 0, 0, 0.87) !default;

package/src/skin/material/base/body.scss

@@ -5,13 +5,11 @@ html {
   line-height: 1.15;
   width: 100%;
   height: 100%;
-
 }
+
 body {
   color: rgba(0, 0, 0, 0.67);
-  font-family: Roboto, arial, serif {
-    /* empty */
-  }
+  font-family: Roboto, arial, serif;
   font-size: 100%;
   // position: relative
   // display: block
@@ -21,28 +19,18 @@ body {
   margin: 0;
   padding: 0;
   // user-select: none
-
-}
-input, {
-  /* empty */
-}
-textarea, {
-  /* empty */
-}
-keygen, {
-  /* empty */
-}
-select, {
-  /* empty */
 }
+
+input,
+textarea,
+keygen,
+select,
 button {
   font-size: 1em;
-  font-family: Roboto, arial, serif {
-    /* empty */
-  }
+  font-family: Roboto, arial, serif;
   color: rgb(51, 51, 51);
-
 }
+
 p {
   line-height: 20px;
   padding-top: 6px;
@@ -52,22 +40,16 @@ p {
 
 // get rid of outline
 }
-select, {
-  /* empty */
-}
-input, {
-  /* empty */
-}
-textarea, {
-  /* empty */
-}
+select,
+input,
+textarea,
 button {
   outline: none;
   &:hover {
     outline: none;
-
   }
 }
+
 button {
   user-select: none;
 
@@ -75,9 +57,8 @@ button {
 }
 * {
   box-sizing: border-box;
-
 }
+
 a {
   color: rgba(0, 0, 0, 0.7);
-
 }

package/src/skin/material/base/elevation.scss

@@ -72,5 +72,4 @@
 }
 .elevation-z24 {
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
-
 }

package/src/skin/material/base/grid.scss

@@ -24,29 +24,26 @@ $total-width: gridsystem-width($columns);
 @mixin clearfix() {
   *zoom:1;
 
-  &:before, {
-    /* empty */
-  }
+  &:before,
   &:after {
       content:"";
       display:table;
-
   }
+
   &:after {
       clear:both;
 
 //////////
 // GRID //
 //////////
-
   }
 }
+
 body {
   width: 100%;
   @include clearfix();
-
-
 }
+
 @mixin row($columns:$columns) {
   display: block;
   width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns));
@@ -54,8 +51,8 @@ body {
   // *width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns))-$correction
   // *margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1)-$correction
   @include clearfix();
-
 }
+
 @mixin column($x,$columns:$columns) {
   display: inline;
   float: left;
@@ -63,13 +60,12 @@ body {
   margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns));
   // *width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns))-$correction
   // *margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns))-$correction
-
 }
+
 @mixin push($offset:1) {
   margin-left: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns));
-
 }
+
 @mixin pull($offset:1) {
   margin-right: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns));
-
 }

package/src/skin/material/base/typo.scss

@@ -4,130 +4,129 @@
     font-weight: 300;
     letter-spacing: -0.04em;
     line-height: 7rem;
-
   }
+
   &.type-display3 {
     font-size: 3.5rem;
     font-weight: 400;
     letter-spacing: -0.02em;
     line-height: 3.5rem;
-
   }
+
   &.type-display2 {
     font-size: 2.813rem;
     font-weight: 400;
     letter-spacing: normal;
     line-height: 3rem;
-
   }
+
   &.type-display1 {
     font-size: 2.125rem;
     font-weight: 400;
     letter-spacing: normal;
     line-height: 2.5rem;
-
   }
+
   &.type-headline {
     font-size: 1.5rem;
     font-weight: 400;
     letter-spacing: normal;
     line-height: 2rem;
-
   }
+
   &.type-title {
     font-size: 1.25rem;
     font-weight: 500;
     letter-spacing: 0.02em;
     line-height: 2rem;
-
   }
+
   &.type-subheading2 {
     font-size: 1rem;
     font-weight: 400;
     letter-spacing: 0.04em;
     line-height: 1.75rem;
-
   }
+
   &.type-subheading1 {
     font-size: 0.938rem;
     font-weight: 400;
     letter-spacing: 0.04em;
     line-height: 1.5rem;
-
   }
+
   &.type-body1 {
     font-size: 0.875rem;
     font-weight: 400;
     letter-spacing: 0.04em;
     line-height: 1.25rem;
-
   }
+
   &.type-body2 {
     font-size: 0.875rem;
     font-weight: 500;
     letter-spacing: 0.04em;
     line-height: 1.5rem;
-
   }
+
   &.type-caption {
     font-size: 0.75rem;
     font-weight: 400;
     letter-spacing: 0.08em;
     line-height: 1.25rem;
-
   }
+
   &.type-button {
     font-size: 14px;
     font-weight: 500;
 
     // margin-bottom: 30px;
     margin-left: 8px;
-
   }
+
   &.style-adjust {
     &.type-display4 {
       margin: -1rem 0 3.5rem -0.085em;
-
     }
+
     &.type-display3 {
       margin: -8px 0 64px -0.07em;
-
     }
+
     &.type-display2 {
       margin: -0.5rem 0 4rem -0.07em;
-
     }
+
     &.type-display1 {
       margin: -0.5rem 0 4rem -0.07em;
-
     }
+
     &.type-headline {
       margin: -0.5rem 0 1rem -0.06em;
-
     }
+
     &.type-title {
       margin: -0.5rem 0 1rem -0.05em;
-
     }
+
     &.type-subheading2 {
       margin: -0.5rem 0 1rem -0.06em;
-
     }
+
     &.type-subheading1 {
       margin: -0.313rem 0 0.813rem -0.06em;
-
     }
+
     &.type-body1 {
       margin: -0.25rem 0 0.75rem 0;
-
     }
+
     &.type-body2 {
       margin: -0.25rem 0 0.75rem 0;
-
     }
+
     &.type-caption {
       line-height: 1.25rem;
-
     }
   }
 }

package/src/skin/material/button/action.scss

@@ -1,8 +1,9 @@
+@use "sass:color";
 
 // type action
 .button.type-action {
   min-width: 36px;
-  transition: box-shadow .2s;
+  transition: box-shadow 0.2s;
   box-shadow: none;
   border-radius: 50%;
   padding: 6px;
@@ -13,15 +14,13 @@
     margin-left: 0;
     svg {
       fill: $default-color-text;
-
-// styles
     }
   }
 }
+
+// styles
 .button.type-action {
-  &.style-dense, {
-    /* empty */
-  }
+  &.style-dense,
   &.style-compact {
     height: 32px;
     width: 32px;
@@ -34,31 +33,18 @@
         width: 20px;
         height: 20px;
         viewbox: 0 0 20 20;
-
-
-// states
       }
     }
   }
 }
-.button.type-action {
-  &:hover {
-    /* empty */
-  }
-    //background-color: #E0E0E0;
-
-  &:focus {
-    /* empty */
-  }
-    //background-color: darken(rgba(255, 255, 255, 0.95), 5%)
 
+// states
+.button.type-action {
   .material-ripple {
-    /* empty */
   }
-    //background-color: rgba(255, 255, 255, 1)
+}
 
 // color
-}
 .button.type-action {
   &.primary-color {
     background-color: $primary-color;
@@ -69,7 +55,7 @@
       }
     }
     &:focus {
-      background-color: lighten($primary-color, 10%);
+      background-color: color.adjust($primary-color, $lightness: 10%);
       color: $primary-color-text;
     }
   }
@@ -82,20 +68,15 @@
       }
     }
     &:focus {
-      background-color: lighten($secondary-color, 5%);
+      background-color: color.adjust($secondary-color, $lightness: 5%);
       color: $secondary-color-text;
-
-
-// theme
     }
   }
 }
-.dark-mode .button.type-action, {
-  /* empty */
-}
-.button.type-action.dark-mode {
 
-  //background-color: rgba(255, 255, 255, 0.95)
+// theme
+.dark-mode .button.type-action,
+.button.type-action.dark-mode {
   color: $primary-color-text-dark;
 
   &.primary-color {
@@ -113,11 +94,6 @@
     .button-icon {
       svg {
         fill: $secondary-color-text-dark;
-
-
-
-
-
       }
     }
   }

package/src/skin/material/button/button.scss

@@ -1,3 +1,4 @@
+
 .button {
   display: flex;
   -webkit-font-smoothing: antialiased;
@@ -14,8 +15,8 @@
   background-color: transparent;
   > * {
     pointer-events: none;
-
   }
+
   .button-icon {
     flex: none;
     pointer-events: none;
@@ -30,9 +31,9 @@
     background-position: center center;
     svg {
       fill: $default-color-text;
-
     }
   }
+
   .button-label {
     flex: 1;
     order: 2;
@@ -45,8 +46,8 @@
     text-transform: uppercase;
     padding: 3px 8px 3px 8px;
     margin: 0;
-
   }
+
   .material-ripple {
     opacity: 1;
     pointer-events: none;
@@ -56,99 +57,92 @@
     height: 5px;
     width: 5px;
     border-radius: 50%;
-
   }
+
   &.iconend {
     .button-icon {
       order: 2;
     }
     .button-label {
       order: 1;
-
-// states
     }
   }
 }
+
+// states
 .button {
   &.is-disabled {
     pointer-events: none;
-    opacity: .3;
-
+    opacity: 0.3;
   }
+
   &:focus {
-    //transition-delay: .2s
-    transition-duration: .3s;
+    transition-duration: 0.3s;
     background-color: rgba($default-color-text, 0.05);
     &:hover {
       background-color: rgba($default-color-text, 0.05);
-
     }
   }
-  &:active {
-    transition-duration: .2s;
-    &:focus {
-      /* empty */
-    }
-      //transition-delay: .2s
 
+  &:active {
+    transition-duration: 0.2s;
   }
+
   &:hover {
-    transition-duration: .2s;
+    transition-duration: 0.2s;
     background-color: rgba($default-color-text, 0.03);
-
   }
+
   &:disabled {
     pointer-events: none;
-    opacity: .3;
-
-// styles
+    opacity: 0.3;
   }
 }
+
+// styles
 .button {
   &.style-compact {
     > .button-label {
       padding-left: 0;
       padding-right: 0;
-
     }
   }
+
   &.style-dense {
     height: 32px;
     > .button-label {
       font-size: 0.8125rem;
       padding-top: 2px;
       padding-bottom: 2px;
-
-// color
     }
   }
 }
+
+// color
 .button {
   &.primary-color {
     color: $primary-color;
     &:focus {
-      background-color: rgba($primary-color, .1);
+      background-color: rgba($primary-color, 0.1);
       &:hover {
-        background-color: rgba($primary-color, .1);
+        background-color: rgba($primary-color, 0.1);
       }
     }
     &:hover {
-      background-color: rgba($primary-color, .05);
-
+      background-color: rgba($primary-color, 0.05);
     }
+
     .button-icon {
       svg {
         fill: $primary-color;
-
       }
     }
-    .material-ripple {
-      background-color: rgba($primary-color, .1);
-
-
 
+    .material-ripple {
+      background-color: rgba($primary-color, 0.1);
     }
   }
+
   &.secondary-color {
     color: $secondary-color;
     .button-icon {
@@ -157,24 +151,22 @@
       }
     }
     .material-ripple {
-      background-color: rgba($secondary-color, .1);
+      background-color: rgba($secondary-color, 0.1);
     }
     &:focus {
-      background-color: rgba($secondary-color, .10);
+      background-color: rgba($secondary-color, 0.1);
       &:hover {
-        background-color: rgba($secondary-color, .10);
+        background-color: rgba($secondary-color, 0.1);
       }
     }
     &:hover {
-      background-color: rgba($secondary-color, .05);
-
-// theme
+      background-color: rgba($secondary-color, 0.05);
     }
   }
 }
-.dark-mode .button, {
-  /* empty */
-}
+
+// theme
+.dark-mode .button,
 .button.dark-mode {
   color: $default-color-text-dark;
   .button-icon {
@@ -183,22 +175,14 @@
     }
   }
   .material-ripple {
-    background-color: rgba($default-color-text-dark, .1);
-  }
-  &:focus {
-    //background-color: rgba($default-color-text-dark, .1)
-    &:hover {
-      /* empty */
-    }
-      //background-color: rgba($default-color-text-dark, .1)
+    background-color: rgba($default-color-text-dark, 0.1);
   }
   &:hover {
-    background-color: rgba($default-color-text-dark, .05);
+    background-color: rgba($default-color-text-dark, 0.05);
+  }
 
   // primary color
-  }
   &.primary-color {
-    //background-color: $primary-color;
     color: $primary-color-dark;
     .button-icon {
       svg {
@@ -206,20 +190,20 @@
       }
     }
     .material-ripple {
-      background-color: rgba($primary-color-dark, .3);
+      background-color: rgba($primary-color-dark, 0.3);
     }
     &:focus {
-      background-color: rgba($primary-color-dark, .2);
+      background-color: rgba($primary-color-dark, 0.2);
       &:hover {
-        background-color: rgba($primary-color-dark, .2);
+        background-color: rgba($primary-color-dark, 0.2);
       }
     }
     &:hover {
-      background-color: rgba($primary-color-dark, .1);
-
-  // secondary color
+      background-color: rgba($primary-color-dark, 0.1);
     }
   }
+
+  // secondary color
   &.secondary-color {
     color: $secondary-color-dark;
     .button-icon {
@@ -228,18 +212,18 @@
       }
     }
     .material-ripple {
-      background-color: rgba($secondary-color-dark, .3);
-
+      background-color: rgba($secondary-color-dark, 0.3);
     }
+
     &:focus {
-      background-color: rgba($secondary-color-dark, .2);
+      background-color: rgba($secondary-color-dark, 0.2);
       &:hover {
-        background-color: rgba($secondary-color-dark, .2);
-
+        background-color: rgba($secondary-color-dark, 0.2);
       }
     }
+
     &:hover {
-      background-color: rgba($secondary-color-dark, .1);
+      background-color: rgba($secondary-color-dark, 0.1);
     }
   }
 }