material 0.9.26 → 0.9.28

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

@@ -1,3 +1,4 @@
+
 .switch {
   display: block;
   position: relative;
@@ -9,19 +10,11 @@
   flew-direction: horizontal;
   flex-wrap: nowrap;
 
-  //overflow: hidden;
-  //border-bottom: 1px solid rgba(100, 100, 100, 0.1);
   input {
     position: absolute;
     left: -10000px;
-
-    &:active {
-      /* empty */
-    }
-      //background-color: #D6E5E4;
-      //transition: .1s;
-
   }
+
   .switch-label {
     flex: 1;
     order: 2;
@@ -31,8 +24,8 @@
     padding: 14px 0;
     margin: 0px 2px 0px 16px;
     overflow: hidden;
-
   }
+
   .switch-control {
     order: 1;
     cursor: pointer;
@@ -40,7 +33,7 @@
     height: 48px;
     padding: 17px 7px;
     border-radius: 50%;
-    transition: .3s;
+    transition: 0.3s;
 
     .switch-track {
       cursor: pointer;
@@ -63,7 +56,9 @@
         margin: 0;
         border-radius: 50%;
         background-color: rgba(241, 241, 241, 1);
-        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+        box-shadow:
+          0 2px 2px 0 rgba(0, 0, 0, 0.24),
+          0 0 2px 0 rgba(0, 0, 0, 0.12);
         transition: 0.2s cubic-bezier(0.46, 0, 0.24, 1);
 
         &::after {
@@ -72,39 +67,30 @@
           left: -14px;
           width: 48px;
           height: 48px;
-
-          // -webkit-transform: scale(0);
-          // transform: scale(0);
-          // -webkit-transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
-          // transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
-          // transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
-          // transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
           border-radius: 24px;
           content: "";
-
-          //opacity: .2;
-          transition: .2s;
-
+          transition: 0.2s;
         }
       }
     }
   }
+
   &.is-checked {
     .switch-track {
-      background-color: rgba($secondary-color, .3);
+      background-color: rgba($secondary-color, 0.3);
 
       .switch-knob {
         background-color: $secondary-color;
         left: 15px;
-
       }
     }
   }
+
   &.is-focused {
     .switch-track {
       .switch-knob {
         &::after {
-          transition: .2s;
+          transition: 0.2s;
           position: absolute;
           top: -14px;
           left: -14px;
@@ -113,16 +99,16 @@
           border-radius: 24px;
           background-color: rgba(0, 0, 0, 0.05);
           content: "";
-
         }
       }
     }
   }
+
   &.is-disabled {
     .switch-label {
-      opacity: .5;
-
+      opacity: 0.5;
     }
+
     .switch-control {
       order: 3;
       cursor: pointer;
@@ -130,42 +116,40 @@
       height: 48px;
       padding: 17px 7px;
 
-      //border-radius: 50%;
-      //transition: .1s;
       .switch-track {
         background-color: rgba(34, 31, 31, 0.1);
 
         .switch-knob {
           background-color: rgb(189, 189, 189);
-          box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 0 1px 0 rgba(0, 0, 0, 0.06);
-
+          box-shadow:
+            0 1px 1px 0 rgba(0, 0, 0, 0.12),
+            0 0 1px 0 rgba(0, 0, 0, 0.06);
         }
       }
     }
   }
 }
+
 .dark-mode {
   .material-switch {
     .switch-control {
       .switch-track {
         background-color: rgba(255, 255, 255, 0.5);
-
       }
     }
+
     &.is-checked {
       .switch-track {
-        background-color: rgba($secondary-color, .3);
-
+        background-color: rgba($secondary-color, 0.3);
       }
     }
+
     &.is-focused {
       .switch-control {
         .switch-track {
           .switch-knob {
             &::after {
               background-color: rgba(255, 255, 255, 0.05);
-
-
             }
           }
         }
@@ -173,6 +157,7 @@
     }
   }
 }
+
 .material-switch {
   display: block;
   position: relative;
@@ -184,19 +169,11 @@
   flew-direction: horizontal;
   flex-wrap: nowrap;
 
-  //overflow: hidden;
-  //border-bottom: 1px solid rgba(100, 100, 100, 0.1);
   input {
     position: absolute;
     left: -10000px;
-
-    &:active {
-      /* empty */
-    }
-      //background-color: #D6E5E4;
-      //transition: .1s;
-
   }
+
   .switch-label {
     flex: 1;
     order: 2;
@@ -206,8 +183,8 @@
     padding: 14px 0;
     margin: 0px 2px 0px 16px;
     overflow: hidden;
-
   }
+
   .switch-control {
     order: 1;
     cursor: pointer;
@@ -215,7 +192,7 @@
     height: 48px;
     padding: 17px 7px;
     border-radius: 50%;
-    transition: .3s;
+    transition: 0.3s;
 
     .switch-track {
       cursor: pointer;
@@ -238,7 +215,9 @@
         margin: 0;
         border-radius: 50%;
         background-color: rgba(241, 241, 241, 1);
-        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+        box-shadow:
+          0 2px 2px 0 rgba(0, 0, 0, 0.24),
+          0 0 2px 0 rgba(0, 0, 0, 0.12);
         transition: 0.2s cubic-bezier(0.46, 0, 0.24, 1);
 
         &::after {
@@ -247,39 +226,30 @@
           left: -14px;
           width: 48px;
           height: 48px;
-
-          // -webkit-transform: scale(0);
-          // transform: scale(0);
-          // -webkit-transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
-          // transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
-          // transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
-          // transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
           border-radius: 24px;
           content: "";
-
-          //opacity: .2;
-          transition: .2s;
-
+          transition: 0.2s;
         }
       }
     }
   }
+
   &.is-checked {
     .switch-track {
-      background-color: rgba($secondary-color, .3);
+      background-color: rgba($secondary-color, 0.3);
 
       .switch-knob {
         background-color: $secondary-color;
         left: 15px;
-
       }
     }
   }
+
   &.is-focused {
     .switch-track {
       .switch-knob {
         &::after {
-          transition: .2s;
+          transition: 0.2s;
           position: absolute;
           top: -14px;
           left: -14px;
@@ -288,16 +258,16 @@
           border-radius: 24px;
           background-color: rgba(0, 0, 0, 0.05);
           content: "";
-
         }
       }
     }
   }
+
   &.is-disabled {
     .switch-label {
-      opacity: .5;
-
+      opacity: 0.5;
     }
+
     .switch-control {
       order: 3;
       cursor: pointer;
@@ -305,41 +275,40 @@
       height: 48px;
       padding: 17px 7px;
 
-      //border-radius: 50%;
-      //transition: .1s;
       .switch-track {
         background-color: rgba(34, 31, 31, 0.1);
 
         .switch-knob {
           background-color: rgb(189, 189, 189);
-          box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 0 1px 0 rgba(0, 0, 0, 0.06);
-
+          box-shadow:
+            0 1px 1px 0 rgba(0, 0, 0, 0.12),
+            0 0 1px 0 rgba(0, 0, 0, 0.06);
         }
       }
     }
   }
 }
+
 .dark-mode {
   .material-switch {
     .switch-control {
       .switch-track {
         background-color: rgba(255, 255, 255, 0.5);
-
       }
     }
+
     &.is-checked {
       .switch-track {
-        background-color: rgba($secondary-color, .3);
-
+        background-color: rgba($secondary-color, 0.3);
       }
     }
+
     &.is-focused {
       .switch-control {
         .switch-track {
           .switch-knob {
             &::after {
               background-color: rgba(255, 255, 255, 0.05);
-
             }
           }
         }

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

@@ -41,7 +41,6 @@
         // background-color: #4891F4
         background-color: white;
         box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
-
       }
     }
   }

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

@@ -1,3 +1,4 @@
+
 .material-textfield {
   display: block;
   position: relative;
@@ -6,13 +7,13 @@
   margin-bottom: 16px;
   vertical-align: top;
   .textfield-label {
-    transition: .2s;
+    transition: 0.2s;
     color: rgba(0, 0, 0, 0.3);
     position: absolute;
-    font-size: .7em;
+    font-size: 0.7em;
     top: -2px;
-
   }
+
   .textfield-underline {
     position: absolute;
     opacity: 0;
@@ -20,49 +21,47 @@
     bottom: 0px;
     height: 2px;
     width: 2px;
-    background-color: #4891F4;
-    transition: .1s;
-
+    background-color: #4891f4;
+    transition: 0.1s;
   }
+
   &.textfield-error {
     .textfield-label {
-      color: #F44336;
-      color: #D6392C;
-
+      color: #f44336;
+      color: #d6392c;
     }
-    textarea, {
-      /* empty */
-    }
-    input {
-      border-bottom: 1px solid #F44336;
 
+    textarea,
+    input {
+      border-bottom: 1px solid #f44336;
     }
   }
+
   &.hide {
     display: none;
-
-// states
   }
 }
+
+// states
 .material-textfield {
   &.is-focused {
     .textfield-label {
-      transition: .2s;
-
+      transition: 0.2s;
     }
+
     .textfield-underline {
       opacity: 1;
       display: block;
       width: 100%;
       left: 0;
-      transition: .1s;
+      transition: 0.1s;
       background-color: $primary-color;
-
     }
   }
+
   &.is-empty {
     .textfield-label {
-      transition: .2s;
+      transition: 0.2s;
       pointer-events: none;
       position: absolute;
       top: 20px;
@@ -70,31 +69,27 @@
       display: block;
       font-size: 1em;
       padding: 0 2px 0 0;
-
     }
+
     &.is-focused {
       .textfield-label {
-        transition: .2s;
-        font-size: .7em;
+        transition: 0.2s;
+        font-size: 0.7em;
         top: -2px;
-
       }
     }
+
     .textfield-input {
       float: none;
       width: 100%;
       border: none;
       margin: 0;
-
-      // margin-top: 13px;
       background-color: transparent;
       border-radius: 0;
       border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-
-      //outline:none;
-
     }
   }
+
   .textfield-input {
     float: none;
     width: 100%;
@@ -105,55 +100,40 @@
     border-radius: 0;
     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 
-    //outline:none;
     &:hover {
       cursor: default;
-
-      //background-color: rgba(100, 100, 100, .06);
-
     }
+
     &:focus {
       cursor: text;
-
     }
   }
-  input[readonly], {
-    /* empty */
-  }
+
+  input[readonly],
   textarea[readonly] {
-    //color: #9A9A9A;
-    //color: rgba(0, 0, 0, 1);
-    //background-color: rgba(255,255,255,1);
     border-bottom: 1px solid transparent;
 
     &:hover {
       cursor: default;
-
-      //background-color: rgba(255,255,255,1);
-
-    }
-    &:focus, {
-      /* empty */
     }
+
+    &:focus,
     &:active {
       cursor: text;
       border-bottom: 1px solid transparent !important;
-
-      //background-color: rgba(255,255,255,1);
-
     }
   }
 }
+
 .dark-mode {
   .material-textfield {
     .textfield-label {
-      transition: .2s;
+      transition: 0.2s;
       color: rgba(255, 255, 255, 0.3);
-
     }
+
     .textfield-input {
       border-bottom: 1px solid rgba(255, 255, 255, 0.12);
-
     }
   }
 }

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

@@ -29,14 +29,12 @@
       background-position: center;
       background-size: contain;
       background-repeat: no-repeat;
-
-
     }
   }
 }
+
 @media only screen and (max-width: 640px) {
   .tooltip {
     display: none;
-
   }
 }

package/src/skin/material/layout/layout.scss

@@ -1,6 +1,4 @@
 .material-layout {
-  /* empty */
-}
   // overflow: hidden;
   // padding: 0;
   // margin: 0;
@@ -10,10 +8,9 @@
   // bottom: 0;
   // left: 0;
   // right: 0;
-
-.flex-row, {
-  /* empty */
 }
+
+.flex-row,
 .flex-raw {
   display: flex;
   flex-direction: row;
@@ -21,9 +18,9 @@
 
   > .ui-container {
     height: inherit;
-
   }
 }
+
 .flex-column {
   display: flex;
   flex-direction: column;
@@ -31,62 +28,61 @@
 
   > .material-container {
     width: inherit;
-
   }
 }
+
 .display-absolute {
   display: absolute;
-
 }
+
 .flex-none {
   flex: none;
-
 }
+
 .flex-1 {
   flex: 1;
-
 }
+
 .flex-2 {
   flex: 2;
-
 }
+
 .flex-3 {
   flex: 3;
-
 }
+
 .flex-4 {
   flex: 4;
-
 }
+
 .flex-5 {
   flex: 5;
-
 }
+
 .flex-6 {
   flex: 6;
-
 }
+
 .flex-7 {
   flex: 7;
-
 }
+
 .flex-8 {
   flex: 8;
-
 }
+
 .flex-9 {
   flex: 9;
-
 }
+
 .flex-10 {
   flex: 10;
-
 }
+
 .flex-11 {
   flex: 11;
-
 }
+
 .flex-12 {
   flex: 12;
-
 }