material 0.9.26 → 0.9.27

package/package.json

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

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

@@ -19,9 +19,7 @@
   }
 }
 .button.type-action {
-  &.style-dense, {
-    /* empty */
-  }
+  &.style-dense,
   &.style-compact {
     height: 32px;
     width: 32px;
@@ -43,21 +41,18 @@
 }
 .button.type-action {
   &:hover {
-    /* empty */
-  }
     //background-color: #E0E0E0;
+  }
 
   &:focus {
-    /* empty */
-  }
     //background-color: darken(rgba(255, 255, 255, 0.95), 5%)
+  }
 
   .material-ripple {
-    /* empty */
-  }
     //background-color: rgba(255, 255, 255, 1)
 
 // color
+  }
 }
 .button.type-action {
   &.primary-color {
@@ -90,9 +85,7 @@
     }
   }
 }
-.dark-mode .button.type-action, {
-  /* empty */
-}
+.dark-mode .button.type-action,
 .button.type-action.dark-mode {
 
   //background-color: rgba(255, 255, 255, 0.95)
@@ -113,11 +106,6 @@
     .button-icon {
       svg {
         fill: $secondary-color-text-dark;
-
-
-
-
-
       }
     }
   }

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

@@ -14,8 +14,8 @@
   background-color: transparent;
   > * {
     pointer-events: none;
-
   }
+
   .button-icon {
     flex: none;
     pointer-events: none;
@@ -30,9 +30,9 @@
     background-position: center center;
     svg {
       fill: $default-color-text;
-
     }
   }
+
   .button-label {
     flex: 1;
     order: 2;
@@ -45,8 +45,8 @@
     text-transform: uppercase;
     padding: 3px 8px 3px 8px;
     margin: 0;
-
   }
+
   .material-ripple {
     opacity: 1;
     pointer-events: none;
@@ -56,8 +56,8 @@
     height: 5px;
     width: 5px;
     border-radius: 50%;
-
   }
+
   &.iconend {
     .button-icon {
       order: 2;
@@ -73,30 +73,29 @@
   &.is-disabled {
     pointer-events: none;
     opacity: .3;
-
   }
+
   &:focus {
     //transition-delay: .2s
     transition-duration: .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
-
+    }
   }
+
   &:hover {
     transition-duration: .2s;
     background-color: rgba($default-color-text, 0.03);
-
   }
+
   &:disabled {
     pointer-events: none;
     opacity: .3;
@@ -109,9 +108,9 @@
     > .button-label {
       padding-left: 0;
       padding-right: 0;
-
     }
   }
+
   &.style-dense {
     height: 32px;
     > .button-label {
@@ -134,21 +133,19 @@
     }
     &:hover {
       background-color: rgba($primary-color, .05);
-
     }
+
     .button-icon {
       svg {
         fill: $primary-color;
-
       }
     }
+
     .material-ripple {
       background-color: rgba($primary-color, .1);
-
-
-
     }
   }
+
   &.secondary-color {
     color: $secondary-color;
     .button-icon {
@@ -172,9 +169,7 @@
     }
   }
 }
-.dark-mode .button, {
-  /* empty */
-}
+.dark-mode .button,
 .button.dark-mode {
   color: $default-color-text-dark;
   .button-icon {
@@ -188,9 +183,8 @@
   &:focus {
     //background-color: rgba($default-color-text-dark, .1)
     &:hover {
-      /* empty */
-    }
       //background-color: rgba($default-color-text-dark, .1)
+    }
   }
   &:hover {
     background-color: rgba($default-color-text-dark, .05);
@@ -229,15 +223,15 @@
     }
     .material-ripple {
       background-color: rgba($secondary-color-dark, .3);
-
     }
+
     &:focus {
       background-color: rgba($secondary-color-dark, .2);
       &:hover {
         background-color: rgba($secondary-color-dark, .2);
-
       }
     }
+
     &:hover {
       background-color: rgba($secondary-color-dark, .1);
     }

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

@@ -18,8 +18,8 @@
     cursor: pointer;
     opacity: 0;
     filter: alpha(opacity = 0);
-
   }
+
   .button-icon {
     z-index: 1;
     padding-right: 6px;

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

@@ -55,8 +55,8 @@
     .material-ripple {
       opacity: .3;
       background-color: $default-color-dark;
-
     }
+
     &:focus {
       background-color: lighten($primary-color, 15%);
       &:hover {
@@ -65,9 +65,9 @@
     }
     &:hover {
       background-color: lighten($primary-color, 7%);
-
     }
   }
+
   &.secondary-color {
     background-color: $secondary-color;
     color: $secondary-color-text;
@@ -93,9 +93,7 @@
     }
   }
 }
-.dark-mode .button.type-floating, {
-  /* empty */
-}
+.dark-mode .button.type-floating,
 .button.type-floating.dark-mode {
   .material-ripple {
     opacity: .1;
@@ -134,10 +132,9 @@
     }
     &:hover {
       background-color: lighten($primary-color, 7%);
-
-
     }
   }
+
   &.secondary-color {
     background-color: $secondary-color-dark;
     color: $secondary-color-text-dark;
@@ -154,7 +151,6 @@
     }
     &:hover {
       background-color: lighten($secondary-color, 5%);
-
     }
   }
 }

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

@@ -40,8 +40,8 @@
     .material-ripple {
       opacity: .3;
       background-color: $default-color-dark;
-
     }
+
     &:focus {
       background-color: lighten($primary-color, 15%);
       &:hover {
@@ -50,9 +50,9 @@
     }
     &:hover {
       background-color: lighten($primary-color, 7%);
-
     }
   }
+
   &.secondary-color {
     background-color: $secondary-color;
     color: $secondary-color-text;
@@ -78,9 +78,7 @@
     }
   }
 }
-.dark-mode .button.type-raised, {
-  /* empty */
-}
+.dark-mode .button.type-raised,
 .button.type-raised.dark-mode {
   .material-ripple {
     opacity: .1;
@@ -119,10 +117,9 @@
     }
     &:hover {
       background-color: lighten($primary-color, 7%);
-
-
     }
   }
+
   &.secondary-color {
     background-color: $secondary-color-dark;
     color: $secondary-color-text-dark;
@@ -139,7 +136,6 @@
     }
     &:hover {
       background-color: lighten($secondary-color, 5%);
-
     }
   }
 }

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

@@ -12,9 +12,8 @@
 }
 .button.type-stroked {
   &:hover {
-    /* empty */
-  }
     //background-color: #E0E0E0;
+  }
   &:focus {
     background-color: darken(rgba(255, 255, 255, 0.95), 5%);
     &:active {
@@ -41,19 +40,19 @@
       color: $primary-color-text;
       &:active {
         background-color: $primary-color;
-
       }
     }
   }
+
   &.secondary-color {
     background-color: $secondary-color;
     color: $secondary-color-text;
     .button-icon {
       svg {
         fill: $secondary-color-text;
-
       }
     }
+
     &:focus {
       background-color: lighten($secondary-color, 5%);
       color: $secondary-color-text;
@@ -65,9 +64,7 @@
     }
   }
 }
-.dark-mode .button.type-stroked, {
-  /* empty */
-}
+.dark-mode .button.type-stroked,
 .button.type-stroked.dark-mode {
 
   //background-color: rgba(255, 255, 255, 0.95)
@@ -75,27 +72,25 @@
   .button-icon {
     svg {
       fill: $primary-color-text-dark;
-
     }
   }
+
   &.primary-color {
     background-color: $primary-color-dark;
     color: $primary-color-text-dark;
     .button-icon {
       svg {
         fill: $primary-color-text-dark;
-
       }
     }
   }
+
   &.secondary-color {
     background-color: $secondary-color-dark;
     color: $secondary-color-text-dark;
     .button-icon {
       svg {
         fill: $secondary-color-text-dark;
-
-
       }
     }
   }

package/src/skin/material/component/component.scss

@@ -1,11 +1,8 @@
 .material-component {
   background-color: $background-color;
-
-
-}
-.dark-mode .material-component, {
-  /* empty */
 }
+
+.dark-mode .material-component,
 .material-component.dark-mode {
   background-color: $background-color-dark;
 }