material 0.9.26 → 0.9.28

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

@@ -1,24 +1,25 @@
-// Here is where the magic happens
+@use "sass:color";
 
+// Here is where the magic happens
 
 .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;
-
   }
 }
+
 .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,149 +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%;
-
   }
 }
+
 .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);
-
     }
   }
 }

package/src/skin/material/control/search.scss

@@ -1,49 +1,50 @@
+
 .search-input {
   position: relative;
   height: 40px;
   width: 100%;
   display: none;
   flex-direction: row;
-  border-bottom: 1px solid rgba(0,0,0,.1);
-  background-color: rgba(0,0,0,.02);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, 0.02);
   &.show {
     display: flex;
   }
-  >.icon {
+  > .icon {
     padding: 8px 0 8px 24px;
     svg {
       fill: $primary-color;
     }
   }
-  >.input {
+  > .input {
     flex: 1;
     font-size: 1.2em;
     padding: 8px 16px 8px 16px;
     border: none;
     margin: 0;
     background-color: transparent;
-
   }
-  >.clear {
+
+  > .clear {
     cursor: pointer;
-    opacity: .4;
+    opacity: 0.4;
     flex: none;
     width: 46px;
     height: 40px;
     margin: 0;
     background-color: transparent;
     &:focus {
-      opacity: .4;
+      opacity: 0.4;
       background-color: transparent;
     }
-    &:hover, &:active {
-      opacity: .7;
+    &:hover,
+    &:active {
+      opacity: 0.7;
       background-color: transparent;
     }
     .icon {
       svg {
         fill: $primary-color;
-
       }
     }
   }

package/src/skin/material/control/selecter.scss

@@ -53,9 +53,9 @@
     &:disabled {
       color: rgba(0,0,0,.57);
       background-color: rgba(255,255,255,.27);
-
     }
   }
+
   .list {
     display: none;
     flex-direction: column;
@@ -90,9 +90,9 @@
         height: 40px;
         width: 40px;
         background-image: url(/theme/common/icon/close.svg);
-
       }
     }
+
     .body {
       flex: 1;
       overflow: auto;
@@ -100,17 +100,17 @@
         padding: 16px 20px;
         &:hover {
           background-color: rgba(0,0,0,.05);
-
         }
+
         &.selected {
           label {
             font-weight: 700px;
-
           }
         }
       }
     }
   }
+
   input {
     display: none;
     cursor: pointer;
@@ -135,9 +135,9 @@
     &:disabled {
       color: rgba(0,0,0,.57);
       background-color: rgba(255,255,255,.27);
-
     }
   }
+
   .error {
     color: rgba(0,0,0,.87);
     float: none;
@@ -146,7 +146,5 @@
     margin: 0;
     background-color: rgba(255,255,255,.87);
     border-radius: 0;
-
-
   }
 }

package/src/skin/material/control/selector.scss

@@ -40,7 +40,5 @@
     bottom: -5;
     right: -5;
     // background-color: #326FB6
-
-
   }
 }

package/src/skin/material/control/slider.scss

@@ -1,3 +1,4 @@
+
 .material-slider {
   display: block;
   position: relative;
@@ -9,13 +10,11 @@
   flex-direction: column;
   flex-wrap: nowrap;
 
-  //overflow: hidden;
-  //border-bottom: 1px solid rgba(100, 100, 100, 0.1);
   input {
     position: absolute;
     left: -10000px;
-
   }
+
   .slider-label {
     flex: 1;
     order: 1;
@@ -23,8 +22,8 @@
     padding: 16px 0;
     margin: 0px 2px 0px 0;
     overflow: hidden;
-
   }
+
   .slider-control {
     order: 3;
     position: relative;
@@ -41,17 +40,15 @@
       display: block;
       height: 48px;
       padding: 0;
-
-      //background-color: rgba(34, 31, 31, .26);
-      transition: .3s;
-
+      transition: 0.3s;
     }
+
     .slider-canvas {
       position: absolute;
       top: 0;
       left: 0;
-
     }
+
     .slider-track-value {
       position: absolute;
       width: 0;
@@ -61,10 +58,10 @@
       display: block;
       height: 2px;
       padding: 0;
-      background-color: #4054B2;
+      background-color: #4054b2;
       border-radius: 7px;
-
     }
+
     .slider-marker {
       opacity: 0;
       transform: scale(0.1) translateY(60px);
@@ -79,13 +76,13 @@
       cursor: pointer;
       margin: auto;
       border-radius: 50%;
-      transition: .2s;
+      transition: 0.2s;
 
       .slider-pin {
         fill: $secondary-color;
-
       }
     }
+
     .slider-knob {
       z-index: 3;
       cursor: pointer;
@@ -100,45 +97,35 @@
       border-radius: 50%;
       background-color: white;
       border: 2px solid rgba(241, 241, 241, 100);
-
-      //box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
-      transition: .2s;
+      transition: 0.2s;
 
       &.notnull {
-        background-color: #4054B2;
-        border: 2px solid #4054B2;
-
+        background-color: #4054b2;
+        border: 2px solid #4054b2;
       }
-      &:active {
-        background-color: #4054B2;
-        border: 2px solid #4054B2;
 
+      &:active {
+        background-color: #4054b2;
+        border: 2px solid #4054b2;
       }
-      &:hover {
-        /* empty */
-      }
-        // background-color: #4054B2;
-        // border: 2px solid #4054B2;
-
     }
+
     &.dragging {
       .slider-knob {
         top: 50%;
         background-color: white;
         border: 2px solid rgba(241, 241, 241, 100);
-
-        //box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
         transition: none;
         transform: scale(1.5) translateY(-4px);
 
         &.notnull {
-          background-color: #4054B2;
-          border: 2px solid #4054B2;
-
+          background-color: #4054b2;
+          border: 2px solid #4054b2;
         }
       }
     }
   }
+
   &.is-checked {
     .slider-track {
       background-color: rgba(0, 150, 136, 0.5);
@@ -146,46 +133,42 @@
       .slider-knob {
         background-color: rgba(0, 150, 136, 1);
         left: 15px;
-
       }
     }
   }
+
   &.is-disabled {
     .slider-label {
-      opacity: .5;
-
+      opacity: 0.5;
     }
+
     .slider-control {
       .slider-track {
         .slider-knob {
-          background-color: #BDBDBD;
+          background-color: #bdbdbd;
           border: 2px solid white;
-
         }
-        .slider-track-value {
-          background-color: #BDBDBD;
 
+        .slider-track-value {
+          background-color: #bdbdbd;
         }
       }
+
       order: 3;
       cursor: pointer;
-
-      // .slider-track
-
-      // .slider-knob
-
     }
   }
+
   &.is-focused {
     .slider-control {
       .slider-knob {
         height: 18px;
         width: 18px;
         border: 32px solid rgba(0, 0, 0, 0.05);
-
       }
     }
   }
+
   &.type-discrete {
     .slider-control {
       &.dragging {
@@ -194,26 +177,25 @@
           transform: scale(1) translateY(0);
           display: block;
           transition: none;
-
         }
+
         .slider-knob {
           opacity: 0;
           transform: scale(0.2);
           display: block;
-          transition: .2s;
-
+          transition: 0.2s;
         }
       }
     }
   }
 }
+
 .dark-mode {
   .material-slider {
     .slider-control {
       .slider-track {
         .slider-tarck-value {
-          background-color: #5C5C5C;
-
+          background-color: #5c5c5c;
         }
       }
     }

package/src/skin/material/control/snackbar.scss

@@ -54,12 +54,11 @@ $width: 500px;
       }
       &.show {
         display: inline-block;
-
-
       }
     }
   }
 }
+
 @media only screen and (min-width: $desktop_switch) {
   .snackbars {
     left: 50%;
@@ -70,8 +69,6 @@ $width: 500px;
     &.up {
       bottom: 500px;
       transition: 225ms bottom cubic-bezier(0.4, 0, 0.2, 1);
-
-
     }
   }
 }