material 0.9.26 → 0.9.28

package/src/skin/material/container/tabs.scss

@@ -1,9 +1,10 @@
+
 .material-tabs {
   position: relative;
   text-align: center;
   overflow: hidden;
   white-space: nowrap;
-  >.material-list {
+  > .material-list {
     display: inline-block;
     white-space: nowrap;
     padding: 0;
@@ -30,7 +31,7 @@
       cursor: pointer;
       overflow: hidden;
       vertical-align: middle;
-      transition: .4s;
+      transition: 0.4s;
       margin: 0;
       background-color: transparent;
     }
@@ -40,9 +41,9 @@
     height: 2px;
     bottom: 0;
     background-color: $primary-color;
-    transition: .2s;
-
+    transition: 0.2s;
   }
+
   &.primary-color {
     background-color: $primary-color;
     .material-list {
@@ -69,10 +70,10 @@
     }
     .material-indicator {
       background-color: $secondary-color-text;
-
     }
   }
 }
+
 .material-tabs.small {
   .material-list {
     .material-button {
@@ -87,7 +88,6 @@
       background-color: transparent;
       label {
         padding: 8px;
-
       }
     }
   }

package/src/skin/material/container/toolbar.scss

@@ -1,19 +1,13 @@
+
 .material-toolbar {
   display: flex;
   flex-direction: row;
-  //height: 64px
-
-  // position: absolute
-  // top: 0
-  // left: 0
-  // right: 0
 
   z-index: 3;
   flex: none;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  //padding: 14px 16px
 
   &.type-app {
     z-index: 5;
@@ -23,64 +17,56 @@
       position: fixed;
     }
     &.is-scrolled {
-      transition: box-shadow .3s;
-      box-shadow: 0 0 4px rgba(0, 0, 0, 0.14),0 4px 8px rgba(0, 0, 0, 0.28);
-
-
+      transition: box-shadow 0.3s;
+      box-shadow:
+        0 0 4px rgba(0, 0, 0, 0.14),
+        0 4px 8px rgba(0, 0, 0, 0.28);
     }
   }
+
   &.is-flexible {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
-    //display: block
-
   }
+
   &.is-fixed {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
-    //display: block
     &.is-scrolled {
-      transition: box-shadow .3s;
-      box-shadow: 0 0 4px rgba(0, 0, 0, 0.14),0 4px 8px rgba(0, 0, 0, 0.28);
-
-
-
-
-
-
-
-
+      transition: box-shadow 0.3s;
+      box-shadow:
+        0 0 4px rgba(0, 0, 0, 0.14),
+        0 4px 8px rgba(0, 0, 0, 0.28);
     }
   }
+
   > * {
     &:first-child {
       margin-left: 0;
-
     }
+
     &:last-child {
       margin-right: 0;
-
-
     }
   }
+
   .material-text {
     flex: 1;
     display: inline-block;
     font-size: 1.3rem;
     font-weight: 300;
     line-height: 2.3rem;
-    //color: $primary-color-text
     padding: 0;
     margin-left: 16px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-
   }
+
   .material-checkbox {
     padding: 0;
     .checkbox-control {
@@ -94,20 +80,17 @@
     .checkbox-label {
       color: $primary-color-text;
       padding: 10px 0 6px;
-
-
-
     }
   }
+
   .material-button {
     .button-icon {
       svg {
         fill: $default-color-icon;
-
-
       }
     }
   }
+
   &.transparent-color {
     background-color: transparent;
     .material-text {
@@ -133,10 +116,10 @@
       .checkbox-label {
         color: $default-color-text;
         padding: 10px 0 6px;
-
       }
     }
   }
+
   &.primary-color {
     background-color: $primary-color;
     .material-text {
@@ -162,10 +145,10 @@
       .checkbox-label {
         color: $primary-color-text;
         padding: 10px 0 6px;
-
       }
     }
   }
+
   &.secondary-color {
     background-color: $secondary-color;
     .material-text {
@@ -191,16 +174,6 @@
       .checkbox-label {
         color: $secondary-color-text;
         padding: 10px 0 6px;
-
-
-
-
-// @media only screen and (max-width: 768px)
-//   .material-toolbar
-//     &.type-app
-//       padding: 10px 16px
-
-
       }
     }
   }

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

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .button {
   user-select: none;
   font-size: 0.875rem;
@@ -24,51 +26,52 @@
     height: 24px;
     width: 24px;
     padding: 0;
-
   }
+
   &.hide {
     display: none;
+  }
 
   // pseudo class
-
-
-  }
   &:focus {
-    background-color: rgba(0, 0, 0, .1);
-
+    background-color: rgba(0, 0, 0, 0.1);
   }
-  &:active {
-    background-color: rgba(0, 0, 0, .1);
 
+  &:active {
+    background-color: rgba(0, 0, 0, 0.1);
   }
+
   &:disabled {
-    opacity: .5;
+    opacity: 0.5;
     background-color: transparent;
     &:hover {
       background-color: transparent;
-
     }
   }
+
   &[type="submit"] {
     font-weight: 600;
     padding: 6px 20px;
+  }
 
   // size
-  }
   &.small-size {
     height: 36px;
     padding: 6px 12px;
+  }
 
   // styles
-  }
   &.style-raised {
-    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);
-
+    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);
   }
-  &.style-outline {
-    border: 1px solid #E1E1E1;
 
+  &.style-outline {
+    border: 1px solid #e1e1e1;
   }
+
   &.style-action {
     width: 40px;
     height: 40px;
@@ -77,88 +80,87 @@
     background-position: center;
     i {
       pointer-events: none;
-
       height: 24px;
       width: 24px;
       margin-left: 0;
       svg {
         fill: rgba(0, 0, 0, 0.67);
-
       }
     }
-    &:hover {
-      background-color: rgba(0,0,0,.1);
 
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.1);
     }
+
     &.small-size {
       width: 36px;
       height: 36px;
       padding: 6px;
-
     }
   }
+
   &.bold {
     font-weight: 600;
-
   }
+
   &.normal-case {
     text-transform: none;
-
   }
+
   &.color-secondary {
     color: $secondary-color-text;
-    background-color: darken($secondary-color, 10%);
+    background-color: color.adjust($secondary-color, $lightness: -10%);
     &:hover {
-      background-color: darken($secondary-color, 5%);
+      background-color: color.adjust($secondary-color, $lightness: -5%);
       &:focus {
-        background-color: darken($secondary-color, 5%);
+        background-color: color.adjust($secondary-color, $lightness: -5%);
       }
     }
     &:focus {
-      background-color: darken($secondary-color, 10%);
+      background-color: color.adjust($secondary-color, $lightness: -10%);
     }
     &:disabled {
-      background-color: darken($secondary-color, 10%);
+      background-color: color.adjust($secondary-color, $lightness: -10%);
       &:hover {
-        background-color: darken($secondary-color, 10%);
-
+        background-color: color.adjust($secondary-color, $lightness: -10%);
       }
     }
   }
+
   &.color-primary {
     color: $primary-color-text;
-    background-color: darken($primary-color, 10%);
+    background-color: color.adjust($primary-color, $lightness: -10%);
     &:hover {
-      background-color: darken($primary-color, 5%);
+      background-color: color.adjust($primary-color, $lightness: -5%);
       &:focus {
-        background-color: darken($primary-color, 5%);
+        background-color: color.adjust($primary-color, $lightness: -5%);
       }
     }
     &:focus {
-      background-color: darken($primary-color, 10%);
+      background-color: color.adjust($primary-color, $lightness: -10%);
     }
     &:disabled {
-      background-color: darken($primary-color, 10%);
+      background-color: color.adjust($primary-color, $lightness: -10%);
       &:hover {
-        background-color: darken($primary-color, 10%);
-
-
+        background-color: color.adjust($primary-color, $lightness: -10%);
       }
     }
   }
 }
+
 @media only screen and (min-width: 640px) {
   /* empty */
 }
+
 .button {
   &:hover {
-    background-color: rgba(0, 0, 0, .1);
+    background-color: rgba(0, 0, 0, 0.1);
     &:focus {
-      background-color: rgba(0, 0, 0, .1);
-
+      background-color: rgba(0, 0, 0, 0.1);
     }
   }
 }
+
 .ripple {
   opacity: 1;
   pointer-events: none;
@@ -168,5 +170,4 @@
   height: 5px;
   width: 5px;
   border-radius: 50%;
-
 }

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

@@ -1,3 +1,4 @@
+
 .checkbox {
   display: block;
   position: relative;
@@ -16,10 +17,9 @@
     position: absolute;
     left: -10000px;
     order: 2;
-
   }
+
   .control {
-    //flex: none;
     order: 1;
     cursor: pointer;
     position: relative;
@@ -29,26 +29,24 @@
     margin: 4px;
     border-radius: 50%;
 
-    //margin: 10px 10px 10px 4px;
     .icon {
       position: absolute;
       top: 11px;
       left: 11px;
       border: 2px solid rgba(0, 0, 0, 0.5);
       border-radius: 2px;
-      transition: .3s;
+      transition: 0.3s;
 
-      //stroke: rgba(0, 0, 0, 0.5);
       .check {
         opacity: 0;
         position: absolute;
         fill: rgba(255, 255, 255, 0.95);
         top: 8px;
         left: 8px;
-
       }
     }
   }
+
   label {
     flex: 1;
     order: 3;
@@ -58,12 +56,12 @@
     padding: 15px 0 9px;
     margin: 0px 2px 0px 12px;
     overflow: hidden;
-
   }
+
   &.is-checked {
     .control {
       .icon {
-        transition: .3s;
+        transition: 0.3s;
         border-color: $secondary-color;
         background-color: $secondary-color;
 
@@ -73,62 +71,58 @@
           fill: rgba(255, 255, 255, 0.95);
           top: 8px;
           left: 8px;
-
         }
       }
     }
   }
+
   &.is-disabled {
     label {
-      opacity: .4;
-
+      opacity: 0.4;
     }
+
     .icon {
       background-color: rgba(0, 0, 0, 0.26);
       border-color: rgba(0, 0, 0, 0.26);
-      //opacity: .4
-
     }
+
     .control {
       .icon {
-        opacity: .4;
-
+        opacity: 0.4;
       }
     }
   }
+
   &.is-focused {
     .control {
       background-color: rgba(34, 31, 31, 0.05);
-
     }
   }
+
   &:active {
     .control {
       background-color: transparent;
-
     }
   }
 }
-.dark-mode .checkbox, {
-  /* empty */
-}
+
+.dark-mode .checkbox,
 .checkbox.dark-mode {
   .control {
     .icon {
       border: 2px solid rgba(255, 255, 255, 0.5);
-
     }
   }
+
   &.is-focused {
     .control {
       background-color: rgba(255, 255, 255, 0.05);
-
     }
   }
+
   &.is-checked {
     .control {
       background-color: rgba(255, 255, 255, 0.5);
-
     }
   }
 }

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

@@ -42,9 +42,7 @@
       }
     }
   }
-  .hue, {
-    /* empty */
-  }
+  .hue,
   .alpha {
     position: relative;
     width: 100%;
@@ -60,8 +58,8 @@
       opacity: 0;
       cursor: pointer;
       appearance: none;
-
     }
+
     .marker {
       position: absolute;
       width: 20px;
@@ -72,13 +70,13 @@
       background-color: currentColor;
       box-shadow: 0 1px 4px rgba(0,0,0,0.2);
       pointer-events: none;
-
     }
   }
+
   .hue {
     background-image: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
-
   }
+
   .alpha {
     background-image: linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);
     background-size: 8px 8px;
@@ -111,9 +109,9 @@
     &:focus {
       outline: none;
       border-color: var(--md-sys-color-primary);
-
     }
   }
+
   .preview {
     position: relative;
     width: 40px;
@@ -151,8 +149,8 @@
 
       &:hover {
         transform: scale(1.1);
-
       }
+
       &:focus {
         outline: 2px solid var(--md-sys-color-primary);
         outline-offset: 2px;
@@ -163,13 +161,13 @@
   }
   &.is-open {
     display: block;
-
   }
+
   &[data-inline="true"] {
     position: relative;
     display: block;
-
   }
+
   &[data-alpha="false"] {
     .alpha {
       display: none;
@@ -185,8 +183,8 @@
 
   input {
     padding-right: 40px;
-
   }
+
   .preview {
     position: absolute;
     right: 8px;

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

@@ -1,16 +1,15 @@
 .menu {
   //display: none
   &.show {
-    /* empty */
-  }
     //display: block
+  }
   .list {
     background: white;
     .item {
       color: rgba(0,0,0,.87);
-
     }
   }
+
   &.floating {
     display: flex;
     align-items: center;
@@ -18,8 +17,5 @@
     overflow: hidden;
     opacity: 0;
     transition: 0.2s;
-
-
-
   }
 }