material 0.9.26 → 0.9.27

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

@@ -23,35 +23,33 @@
     //height: initial
     //width: initial
     //opacity: 1
-
   }
+
   .material-list {
     position: relative;
     bottom: 0;
     padding: 8px 0;
-
-  }
-  .material-list .material-item, {
-    /* empty */
   }
+
+  .material-list .material-item,
   .material-item {
     display: block;
     padding: 8px 64px 8px 16px;
     &:active {
       transition: .2s;
       background-color: rgba(0, 0, 0, 0.05);
-
     }
   }
+
   .material-divider {
     display: block;
     height: 1px;
     padding: 0;
     background-color: rgba(0, 0, 0, 0.05);
     margin: 8px 0;
-
   }
 }
+
 .menu-mask {
   top: 0;
   pointer-events: none;
@@ -64,6 +62,5 @@
     transition: .3s;
     pointer-events: auto;
     background-color: rgba(0,0,0,.05);
-
   }
 }

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

@@ -41,8 +41,8 @@
     bottom: 0;
     background-color: $primary-color;
     transition: .2s;
-
   }
+
   &.primary-color {
     background-color: $primary-color;
     .material-list {
@@ -69,10 +69,10 @@
     }
     .material-indicator {
       background-color: $secondary-color-text;
-
     }
   }
 }
+
 .material-tabs.small {
   .material-list {
     .material-button {
@@ -87,7 +87,6 @@
       background-color: transparent;
       label {
         padding: 8px;
-
       }
     }
   }

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

@@ -25,18 +25,17 @@
     &.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);
-
-
     }
   }
+
   &.is-flexible {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     //display: block
-
   }
+
   &.is-fixed {
     position: absolute;
     top: 0;
@@ -46,27 +45,19 @@
     &.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);
-
-
-
-
-
-
-
-
     }
   }
+
   > * {
     &:first-child {
       margin-left: 0;
-
     }
+
     &:last-child {
       margin-right: 0;
-
-
     }
   }
+
   .material-text {
     flex: 1;
     display: inline-block;
@@ -79,8 +70,8 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-
   }
+
   .material-checkbox {
     padding: 0;
     .checkbox-control {
@@ -94,20 +85,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 +121,10 @@
       .checkbox-label {
         color: $default-color-text;
         padding: 10px 0 6px;
-
       }
     }
   }
+
   &.primary-color {
     background-color: $primary-color;
     .material-text {
@@ -162,10 +150,10 @@
       .checkbox-label {
         color: $primary-color-text;
         padding: 10px 0 6px;
-
       }
     }
   }
+
   &.secondary-color {
     background-color: $secondary-color;
     .material-text {
@@ -199,8 +187,6 @@
 //   .material-toolbar
 //     &.type-app
 //       padding: 10px 16px
-
-
       }
     }
   }

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

@@ -24,31 +24,30 @@
     height: 24px;
     width: 24px;
     padding: 0;
-
   }
+
   &.hide {
     display: none;
 
   // pseudo class
-
-
   }
+
   &:focus {
     background-color: rgba(0, 0, 0, .1);
-
   }
+
   &:active {
     background-color: rgba(0, 0, 0, .1);
-
   }
+
   &:disabled {
     opacity: .5;
     background-color: transparent;
     &:hover {
       background-color: transparent;
-
     }
   }
+
   &[type="submit"] {
     font-weight: 600;
     padding: 6px 20px;
@@ -63,12 +62,12 @@
   }
   &.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);
-
   }
+
   &.style-outline {
     border: 1px solid #E1E1E1;
-
   }
+
   &.style-action {
     width: 40px;
     height: 40px;
@@ -83,28 +82,28 @@
       margin-left: 0;
       svg {
         fill: rgba(0, 0, 0, 0.67);
-
       }
     }
+
     &:hover {
       background-color: rgba(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%);
@@ -121,10 +120,10 @@
       background-color: darken($secondary-color, 10%);
       &:hover {
         background-color: darken($secondary-color, 10%);
-
       }
     }
   }
+
   &.color-primary {
     color: $primary-color-text;
     background-color: darken($primary-color, 10%);
@@ -141,12 +140,11 @@
       background-color: darken($primary-color, 10%);
       &:hover {
         background-color: darken($primary-color, 10%);
-
-
       }
     }
   }
 }
+
 @media only screen and (min-width: 640px) {
   /* empty */
 }
@@ -155,10 +153,10 @@
     background-color: rgba(0, 0, 0, .1);
     &:focus {
       background-color: rgba(0, 0, 0, .1);
-
     }
   }
 }
+
 .ripple {
   opacity: 1;
   pointer-events: none;
@@ -168,5 +166,4 @@
   height: 5px;
   width: 5px;
   border-radius: 50%;
-
 }

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

@@ -16,8 +16,8 @@
     position: absolute;
     left: -10000px;
     order: 2;
-
   }
+
   .control {
     //flex: none;
     order: 1;
@@ -45,10 +45,10 @@
         fill: rgba(255, 255, 255, 0.95);
         top: 8px;
         left: 8px;
-
       }
     }
   }
+
   label {
     flex: 1;
     order: 3;
@@ -58,8 +58,8 @@
     padding: 15px 0 9px;
     margin: 0px 2px 0px 12px;
     overflow: hidden;
-
   }
+
   &.is-checked {
     .control {
       .icon {
@@ -73,62 +73,59 @@
           fill: rgba(255, 255, 255, 0.95);
           top: 8px;
           left: 8px;
-
         }
       }
     }
   }
+
   &.is-disabled {
     label {
       opacity: .4;
-
     }
+
     .icon {
       background-color: rgba(0, 0, 0, 0.26);
       border-color: rgba(0, 0, 0, 0.26);
       //opacity: .4
-
     }
+
     .control {
       .icon {
         opacity: .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;
-
-
-
   }
 }

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

@@ -10,9 +10,9 @@
     height: 100%;
     background-color: $primary-color;
     transition: width 3s;
-
   }
 }
+
 .progress.type-indeterminate {
   position: relative;
   height: 4px;
@@ -37,9 +37,7 @@
       top: 0;
       left: 0;
       bottom: 0;
-      will-change: left, right {
-        /* empty */
-      }
+      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;
     }
@@ -50,125 +48,119 @@
       top: 0;
       left: 0;
       bottom: 0;
-      will-change: left, right {
-        /* empty */
-      }
+      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-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

@@ -22,8 +22,8 @@
     border: none;
     margin: 0;
     background-color: transparent;
-
   }
+
   >.clear {
     cursor: pointer;
     opacity: .4;
@@ -43,7 +43,6 @@
     .icon {
       svg {
         fill: $primary-color;
-
       }
     }
   }