material 0.9.26 → 0.9.28

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

@@ -1,12 +1,16 @@
+@use "sass:color";
 
 // type floating
 .button.type-floating {
   min-width: 56px;
   min-height: 56px;
-  transition: box-shadow .2s;
+  transition: box-shadow 0.2s;
   border-radius: 28px;
   padding: 6px;
-  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
   .button-label {
     display: none;
   }
@@ -20,12 +24,12 @@
     }
   }
   .material-ripple {
-    opacity: .1;
+    opacity: 0.1;
     background-color: rgba(0, 0, 0, 1);
-
-// states
   }
 }
+
+// states
 .button.type-floating {
   background-color: rgba(0, 0, 0, 0.05);
   &:focus {
@@ -38,11 +42,14 @@
     background-color: rgba(0, 0, 0, 0.1);
   }
   &:active {
-    box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
-
-// color
+    box-shadow:
+      0px 7px 8px -4px rgba(0, 0, 0, 0.2),
+      0px 12px 17px 2px rgba(0, 0, 0, 0.14),
+      0px 5px 22px 4px rgba(0, 0, 0, 0.12);
   }
 }
+
+// color
 .button.type-floating {
   &.primary-color {
     background-color: $primary-color;
@@ -53,21 +60,21 @@
       }
     }
     .material-ripple {
-      opacity: .3;
+      opacity: 0.3;
       background-color: $default-color-dark;
-
     }
+
     &:focus {
-      background-color: lighten($primary-color, 15%);
+      background-color: color.adjust($primary-color, $lightness: 15%);
       &:hover {
-        background-color: lighten($primary-color, 15%);
+        background-color: color.adjust($primary-color, $lightness: 15%);
       }
     }
     &:hover {
-      background-color: lighten($primary-color, 7%);
-
+      background-color: color.adjust($primary-color, $lightness: 7%);
     }
   }
+
   &.secondary-color {
     background-color: $secondary-color;
     color: $secondary-color-text;
@@ -77,28 +84,26 @@
       }
     }
     .material-ripple {
-      opacity: .3;
+      opacity: 0.3;
       background-color: $default-color-dark;
     }
     &:focus {
-      background-color: lighten($secondary-color, 10%);
+      background-color: color.adjust($secondary-color, $lightness: 10%);
       &:hover {
-        background-color: lighten($secondary-color, 10%);
+        background-color: color.adjust($secondary-color, $lightness: 10%);
       }
     }
     &:hover {
-      background-color: lighten($secondary-color, 5%);
-
-// theme
+      background-color: color.adjust($secondary-color, $lightness: 5%);
     }
   }
 }
-.dark-mode .button.type-floating, {
-  /* empty */
-}
+
+// theme
+.dark-mode .button.type-floating,
 .button.type-floating.dark-mode {
   .material-ripple {
-    opacity: .1;
+    opacity: 0.1;
     background-color: rgba(255, 255, 255, 1);
   }
   background-color: rgba(255, 255, 255, 0.1);
@@ -110,7 +115,6 @@
   }
   &:hover {
     background-color: rgba(255, 255, 255, 0.15);
-  //background-color: rgba(255, 255, 255, 0.95)
   }
   color: $primary-color-text-dark;
   .button-icon {
@@ -127,17 +131,16 @@
       }
     }
     &:focus {
-      background-color: lighten($primary-color, 15%);
+      background-color: color.adjust($primary-color, $lightness: 15%);
       &:hover {
-        background-color: lighten($primary-color, 15%);
+        background-color: color.adjust($primary-color, $lightness: 15%);
       }
     }
     &:hover {
-      background-color: lighten($primary-color, 7%);
-
-
+      background-color: color.adjust($primary-color, $lightness: 7%);
     }
   }
+
   &.secondary-color {
     background-color: $secondary-color-dark;
     color: $secondary-color-text-dark;
@@ -147,14 +150,13 @@
       }
     }
     &:focus {
-      background-color: lighten($secondary-color, 10%);
+      background-color: color.adjust($secondary-color, $lightness: 10%);
       &:hover {
-        background-color: lighten($secondary-color, 10%);
+        background-color: color.adjust($secondary-color, $lightness: 10%);
       }
     }
     &:hover {
-      background-color: lighten($secondary-color, 5%);
-
+      background-color: color.adjust($secondary-color, $lightness: 5%);
     }
   }
 }

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

@@ -1,16 +1,20 @@
+@use "sass:color";
 
 // type raised
 .button.type-raised {
   min-width: 36px;
-  transition: box-shadow .2s;
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  transition: box-shadow 0.2s;
+  box-shadow:
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
   .material-ripple {
-    opacity: .1;
+    opacity: 0.1;
     background-color: rgba(0, 0, 0, 1);
-
-// states
   }
 }
+
+// states
 .button.type-raised {
   background-color: rgba(0, 0, 0, 0.05);
   &:focus {
@@ -23,11 +27,14 @@
     background-color: rgba(0, 0, 0, 0.1);
   }
   &:active {
-    box-shadow: 0px 4px 4px -3px rgba(0, 0, 0, 0.2), 0px 6px 8px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
-
-// color
+    box-shadow:
+      0px 4px 4px -3px rgba(0, 0, 0, 0.2),
+      0px 6px 8px 1px rgba(0, 0, 0, 0.14),
+      0px 3px 14px 2px rgba(0, 0, 0, 0.12);
   }
 }
+
+// color
 .button.type-raised {
   &.primary-color {
     background-color: $primary-color;
@@ -38,21 +45,21 @@
       }
     }
     .material-ripple {
-      opacity: .3;
+      opacity: 0.3;
       background-color: $default-color-dark;
-
     }
+
     &:focus {
-      background-color: lighten($primary-color, 15%);
+      background-color: color.adjust($primary-color, $lightness: 15%);
       &:hover {
-        background-color: lighten($primary-color, 15%);
+        background-color: color.adjust($primary-color, $lightness: 15%);
       }
     }
     &:hover {
-      background-color: lighten($primary-color, 7%);
-
+      background-color: color.adjust($primary-color, $lightness: 7%);
     }
   }
+
   &.secondary-color {
     background-color: $secondary-color;
     color: $secondary-color-text;
@@ -62,28 +69,26 @@
       }
     }
     .material-ripple {
-      opacity: .3;
+      opacity: 0.3;
       background-color: $default-color-dark;
     }
     &:focus {
-      background-color: lighten($secondary-color, 10%);
+      background-color: color.adjust($secondary-color, $lightness: 10%);
       &:hover {
-        background-color: lighten($secondary-color, 10%);
+        background-color: color.adjust($secondary-color, $lightness: 10%);
       }
     }
     &:hover {
-      background-color: lighten($secondary-color, 5%);
-
-// theme
+      background-color: color.adjust($secondary-color, $lightness: 5%);
     }
   }
 }
-.dark-mode .button.type-raised, {
-  /* empty */
-}
+
+// theme
+.dark-mode .button.type-raised,
 .button.type-raised.dark-mode {
   .material-ripple {
-    opacity: .1;
+    opacity: 0.1;
     background-color: rgba(255, 255, 255, 1);
   }
   background-color: rgba(255, 255, 255, 0.1);
@@ -95,7 +100,6 @@
   }
   &:hover {
     background-color: rgba(255, 255, 255, 0.15);
-  //background-color: rgba(255, 255, 255, 0.95)
   }
   color: $primary-color-text-dark;
   .button-icon {
@@ -112,17 +116,16 @@
       }
     }
     &:focus {
-      background-color: lighten($primary-color, 15%);
+      background-color: color.adjust($primary-color, $lightness: 15%);
       &:hover {
-        background-color: lighten($primary-color, 15%);
+        background-color: color.adjust($primary-color, $lightness: 15%);
       }
     }
     &:hover {
-      background-color: lighten($primary-color, 7%);
-
-
+      background-color: color.adjust($primary-color, $lightness: 7%);
     }
   }
+
   &.secondary-color {
     background-color: $secondary-color-dark;
     color: $secondary-color-text-dark;
@@ -132,14 +135,13 @@
       }
     }
     &:focus {
-      background-color: lighten($secondary-color, 10%);
+      background-color: color.adjust($secondary-color, $lightness: 10%);
       &:hover {
-        background-color: lighten($secondary-color, 10%);
+        background-color: color.adjust($secondary-color, $lightness: 10%);
       }
     }
     &:hover {
-      background-color: lighten($secondary-color, 5%);
-
+      background-color: color.adjust($secondary-color, $lightness: 5%);
     }
   }
 }

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

@@ -1,32 +1,35 @@
+@use "sass:color";
 
 // type stroked
 .button.type-stroked {
   min-width: 36px;
-  transition: box-shadow .2s;
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  transition: box-shadow 0.2s;
+  box-shadow:
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
   .material-ripple {
-    background-color: rgba(255, 255, 255, .3);
-
-// states
+    background-color: rgba(255, 255, 255, 0.3);
   }
 }
+
+// states
 .button.type-stroked {
-  &:hover {
-    /* empty */
-  }
-    //background-color: #E0E0E0;
   &:focus {
-    background-color: darken(rgba(255, 255, 255, 0.95), 5%);
+    background-color: color.adjust(rgba(255, 255, 255, 0.95), $lightness: -5%);
     &:active {
       background-color: transparent;
     }
   }
   &:active {
-    box-shadow: 0px 4px 4px -3px rgba(0, 0, 0, 0.2), 0px 6px 8px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
-
-// color
+    box-shadow:
+      0px 4px 4px -3px rgba(0, 0, 0, 0.2),
+      0px 6px 8px 1px rgba(0, 0, 0, 0.14),
+      0px 3px 14px 2px rgba(0, 0, 0, 0.12);
   }
 }
+
+// color
 .button.type-stroked {
   &.primary-color {
     background-color: $primary-color;
@@ -37,65 +40,59 @@
       }
     }
     &:focus {
-      background-color: lighten($primary-color, 10%);
+      background-color: color.adjust($primary-color, $lightness: 10%);
       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%);
+      background-color: color.adjust($secondary-color, $lightness: 5%);
       color: $secondary-color-text;
       &:active {
         background-color: $secondary-color;
-
-// theme
       }
     }
   }
 }
-.dark-mode .button.type-stroked, {
-  /* empty */
-}
-.button.type-stroked.dark-mode {
 
-  //background-color: rgba(255, 255, 255, 0.95)
+// theme
+.dark-mode .button.type-stroked,
+.button.type-stroked.dark-mode {
   color: $primary-color-text-dark;
   .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,9 @@
+
 .material-component {
   background-color: $background-color;
-
-
-}
-.dark-mode .material-component, {
-  /* empty */
 }
+
+.dark-mode .material-component,
 .material-component.dark-mode {
   background-color: $background-color-dark;
 }

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

@@ -17,6 +17,5 @@
     margin: 0;
     height: 16px;
     border-bottom: none;
-
   }
 }

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

@@ -4,6 +4,5 @@
     background-size: cover;
     width: 300px;
     height: 200px;
-
   }
 }

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

@@ -1,4 +1,3 @@
 .material-label {
   line-height: 1.3rem;
-
 }

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

@@ -1,24 +1,25 @@
-// Here is where the magic happens
+@use "sass:color";
 
+// Here is where the magic happens
 
 .material-progress {
   width: 100%;
   height: 4px;
-  background-color: lighten($primary-color, 30%);
+  background-color: color.adjust($primary-color, $lightness: 30%);
   .bar {
     width: 0%;
     height: 100%;
     background-color: $primary-color;
     transition: width 3s;
-
   }
 }
+
 .material-progress.type-indeterminate {
   position: relative;
   height: 4px;
   display: block;
   width: 100%;
-  background-color: lighten($primary-color, 30%);
+  background-color: color.adjust($primary-color, $lightness: 30%);
   overflow: hidden;
   .determinate {
     position: absolute;
@@ -26,151 +27,145 @@
     top: 0;
     bottom: 0;
     background-color: $primary-color;
-    transition: width .3s linear;
+    transition: width 0.3s linear;
   }
   .bar {
     background-color: $primary-color;
     &:before {
-      content: '';
+      content: "";
       position: absolute;
       background-color: inherit;
       top: 0;
       left: 0;
       bottom: 0;
-      will-change: left, right {
-        /* empty */
-      }
-      -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-      animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      will-change: left, right;
+      -webkit-animation: indeterminate 2.1s
+        cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
+        infinite;
     }
     &:after {
-      content: '';
+      content: "";
       position: absolute;
       background-color: inherit;
       top: 0;
       left: 0;
       bottom: 0;
-      will-change: left, right {
-        /* empty */
-      }
-      -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+      will-change: left, right;
+      -webkit-animation: indeterminate-short 2.1s
+        cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
+        infinite;
       -webkit-animation-delay: 1.15s;
       animation-delay: 1.15s;
-
     }
   }
 }
+
 @-webkit-keyframes indeterminate {
   0% {
     left: -35%;
     right: 100%;
-
   }
+
   60% {
     left: 100%;
     right: -90%;
-
   }
+
   100% {
     left: 100%;
     right: -90%;
-
-
   }
 }
+
 @keyframes indeterminate {
   0% {
     left: -35%;
     right: 100%;
-
   }
+
   60% {
     left: 100%;
     right: -90%;
-
   }
+
   100% {
     left: 100%;
     right: -90%;
-
-
   }
 }
+
 @-webkit-keyframes indeterminate-short {
   0% {
     left: -200%;
     right: 100%;
-
   }
+
   60% {
     left: 107%;
     right: -8%;
-
   }
+
   100% {
     left: 107%;
     right: -8%;
-
-
   }
 }
+
 @keyframes indeterminate-short {
   0% {
     left: -200%;
     right: 100%;
-
   }
+
   60% {
     left: 107%;
     right: -8%;
-
   }
+
   100% {
     left: 107%;
     right: -8%;
-
-
-
   }
 }
+
 .material-progress.type-circular {
   .progress {
     animation: rotator 1.4s linear infinite;
-
   }
+
   @keyframes rotator {
     0% {
       transform: rotate(0deg);
-
     }
+
     100% {
       transform: rotate(270deg);
-
     }
   }
+
   .path {
-    stroke: #4285F4;
+    stroke: #4285f4;
     stroke-dasharray: 187;
     stroke-dashoffset: 0;
     transform-origin: center;
     animation: dash 1.4s ease-in-out infinite;
-
   }
+
   @keyframes dash {
     0% {
       stroke-dashoffset: 187;
-
     }
+
     50% {
       stroke-dashoffset: 187 / 4;
       transform: rotate(135deg);
-
     }
+
     100% {
       stroke-dashoffset: 187;
       transform: rotate(450deg);
-
     }
   }
 }