@fastkit/vui 0.18.33 → 0.19.0

package/dist/vui.css

@@ -4,8 +4,8 @@
     box-sizing:border-box;
   }
   html{
-    -webkit-text-size-adjust:100%;
     line-height:1.15;
+    -webkit-text-size-adjust:100%;
   }
   body{
     margin:0;
@@ -120,10 +120,7 @@
   summary{
     display:list-item;
   }
-  template{
-    display:none;
-  }
-  [hidden]{
+  [hidden],template{
     display:none;
   }
   button{
@@ -383,9 +380,9 @@
   }
   html{
     text-size-adjust:100%;
-    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
     font-size:var(--root-em);
     text-rendering:optimizeLegibility;
+    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
   }
   body{
     color:var(--typo-base-color);
@@ -612,12 +609,12 @@
     flex-direction:column;
   }
   .v-form-control{
-    --my-label-color:var(--control-label-color);
-    --my-message-color:var(--control-message-color);
     display:flex;
     flex-direction:column;
     margin:var(--control-horizontal-margin) 0;
     max-width:100%;
+    --my-label-color:var(--control-label-color);
+    --my-message-color:var(--control-message-color);
   }
   .v-form-control--invalid:not(.v-form-control--readonly){
     --my-label-color:var(--main-color);
@@ -706,7 +703,11 @@
   }
   .v-skelton-loader-bone:after{
     animation:v-skelton-loader-bone-loading 1.5s infinite;
-    background:linear-gradient(90deg, hsla(0,0%,100%,0), hsla(0,0%,100%,.3), hsla(0,0%,100%,0));
+    background:linear-gradient(
+        90deg,
+        hsla(0,0%,100%,0),
+        hsla(0,0%,100%,.3),
+        hsla(0,0%,100%,0));
     content:"";
     height:100%;
     left:0;
@@ -804,18 +805,20 @@
   }
   .v-avatar{
     -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
+    appearance:none;
+    cursor:pointer;
+    outline:0;
+    padding:0;
+    touch-action:manipulation;
+    user-select:none;
     --avatar-radius:50%;
     --avatar-font-weight:var(--typo-medium-weight);
     --avatar-base-font-size:var(--typo-base-size);
     --avatar-font-size:var(--avatar-base-font-size);
-    --shadow-color:transparent !important;
-    --focusShadow-color:transparent !important;
     align-items:center;
-    appearance:none;
     border-radius:var(--avatar-radius);
     border-style:solid;
     border-width:1px;
-    cursor:pointer;
     cursor:default;
     display:inline-flex;
     flex-basis:var(--avatar-size);
@@ -825,14 +828,12 @@
     justify-content:center;
     line-height:1;
     min-width:var(--avatar-size);
-    outline:0;
     overflow:hidden;
-    padding:0;
     text-align:center;
-    touch-action:manipulation;
-    user-select:none;
     vertical-align:bottom;
     width:var(--avatar-size);
+    --shadow-color:transparent !important;
+    --focusShadow-color:transparent !important;
   }
   .v-avatar::-moz-focus-inner{
     border:0;
@@ -869,15 +870,17 @@
   }
   .v-chip{
     -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
+    appearance:none;
+    cursor:pointer;
+    outline:0;
+    padding:0;
+    touch-action:manipulation;
+    user-select:none;
     --chip-radius:calc(var(--chip-height)/2);
-    --shadow-color:transparent !important;
-    --focusShadow-color:transparent !important;
     align-items:center;
-    appearance:none;
     border-radius:var(--chip-radius);
     border-style:solid;
     border-width:1px;
-    cursor:pointer;
     cursor:default;
     display:inline-flex;
     font-size:var(--chip-font-size);
@@ -885,15 +888,13 @@
     height:var(--chip-height);
     justify-content:center;
     line-height:1;
-    outline:0;
     overflow:hidden;
-    padding:0;
     padding:0 var(--chip-padding);
     text-align:center;
-    touch-action:manipulation;
-    user-select:none;
     vertical-align:bottom;
     white-space:nowrap;
+    --shadow-color:transparent !important;
+    --focusShadow-color:transparent !important;
   }
   .v-chip::-moz-focus-inner{
     border:0;
@@ -1042,18 +1043,18 @@
   }
   .v-button--rounded{
     --padding:0;
-    --height:auto;
     aspect-ratio:1/1;
     border-radius:50%;
     min-width:0;
+    --height:auto;
   }
   .v-button--icon,.v-button--rounded{
     margin:calc(var(--root-em)*.125) calc(var(--root-em)*.125);
   }
   .v-button--icon{
+    min-width:1.9285714286em;
     --height:1.9285714286em;
     --padding:0em;
-    min-width:1.9285714286em;
   }
   .v-button::-moz-focus-inner{
     border:0;
@@ -1217,9 +1218,9 @@
     width:100%;
   }
   .v-list-tile--clickable{
+    cursor:pointer;
     --tile-text-color:var(--nav-color);
     --tile-text-active-color:var(--navActive-color, var(--nav-color));
-    cursor:pointer;
   }
   .v-list-tile--clickable:focus,.v-list-tile--clickable:hover{
     --tile-background:var(--tile-active-background);
@@ -1262,9 +1263,9 @@
     justify-content:center;
   }
   .v-drawer-layout__body{
-    -webkit-overflow-scrolling:touch;
     flex:1 1 100%;
     overflow:auto;
+    -webkit-overflow-scrolling:touch;
   }
   .v-drawer-layout__footer{
     flex:0 0 auto;
@@ -1321,13 +1322,6 @@
     text-transform:uppercase;
   }
   .v-control-field{
-    --my-bottom-color:var(--control-field-bottom-color);
-    --my-bottom-hover-color:var(--control-field-bottom-hover-color);
-    --my-focused-color:var(--main-color);
-    --my-fill-color:var(--control-field-fill-color);
-    --my-fill-hover-color:var(--control-field-fill-hover-color);
-    --my-outline-color:var(--control-field-outline-color);
-    --my-outline-hover-color:var(--control-field-outline-hover-color);
     align-items:center;
     display:inline-flex;
     font-size:var(--control-field-font-size);
@@ -1338,6 +1332,13 @@
     padding:0 8px;
     position:relative;
     width:100%;
+    --my-bottom-color:var(--control-field-bottom-color);
+    --my-bottom-hover-color:var(--control-field-bottom-hover-color);
+    --my-focused-color:var(--main-color);
+    --my-fill-color:var(--control-field-fill-color);
+    --my-fill-hover-color:var(--control-field-fill-hover-color);
+    --my-outline-color:var(--control-field-outline-color);
+    --my-outline-hover-color:var(--control-field-outline-hover-color);
   }
   .v-control-field--invalid:not(.v-control-field--disabled):not(.v-control-field--readonly){
     --my-bottom-color:var(--main-color);
@@ -1476,10 +1477,7 @@
     padding-right:1em;
     user-select:none;
   }
-  .v-checkable--checked{
-    --color:var(--main-color);
-  }
-  .v-checkable--invalid:not(.v-checkable--readonly){
+  .v-checkable--checked,.v-checkable--invalid:not(.v-checkable--readonly){
     --color:var(--main-color);
   }
   .v-checkable--disabled{
@@ -1490,13 +1488,13 @@
     pointer-events:none;
   }
   .v-checkable input{
-    clip:rect(0 0 0 0);
-    clip-path:inset(100%);
     height:1px;
     overflow:hidden;
     position:absolute;
-    white-space:nowrap;
     width:1px;
+    clip:rect(0 0 0 0);
+    clip-path:inset(100%);
+    white-space:nowrap;
   }
   .v-checkable__faux{
     align-items:center;
@@ -1677,13 +1675,13 @@
     text-decoration:none;
   }
   .v-option input{
-    clip:rect(0 0 0 0);
-    clip-path:inset(100%);
     height:1px;
     overflow:hidden;
     position:absolute;
-    white-space:nowrap;
     width:1px;
+    clip:rect(0 0 0 0);
+    clip-path:inset(100%);
+    white-space:nowrap;
   }
   .v-option:after,.v-option:before{
     content:"";
@@ -1742,13 +1740,13 @@
     cursor:pointer;
   }
   .v-select__input__element{
-    clip:rect(0 0 0 0);
-    clip-path:inset(100%);
     height:1px;
     overflow:hidden;
     position:absolute;
-    white-space:nowrap;
     width:1px;
+    clip:rect(0 0 0 0);
+    clip-path:inset(100%);
+    white-space:nowrap;
   }
   .v-select__body{
     padding:.5em 0;
@@ -1800,9 +1798,9 @@
     width:100%;
   }
   .v-text-field__input__element:-webkit-autofill:-webkit-autofill,.v-text-field__input__element:-webkit-autofill:-webkit-autofill:active,.v-text-field__input__element:-webkit-autofill:-webkit-autofill:focus,.v-text-field__input__element:-webkit-autofill:-webkit-autofill:hover{
-    -webkit-text-fill-color:#fff !important;
     color:inherit !important;
     transition:background-color 5000s;
+    -webkit-text-fill-color:#fff !important;
   }
   .v-text-field__input__element::-ms-clear{
     display:none;
@@ -1829,9 +1827,9 @@
     width:100%;
   }
   .v-textarea__input__element:-webkit-autofill:-webkit-autofill,.v-textarea__input__element:-webkit-autofill:-webkit-autofill:active,.v-textarea__input__element:-webkit-autofill:-webkit-autofill:focus,.v-textarea__input__element:-webkit-autofill:-webkit-autofill:hover{
-    -webkit-text-fill-color:#fff !important;
     color:inherit !important;
     transition:background-color 5000s;
+    -webkit-text-fill-color:#fff !important;
   }
   .v-textarea__input__element::-ms-clear{
     display:none;
@@ -1873,22 +1871,22 @@
   }
   .v-tab{
     -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
+    appearance:none;
+    border-width:0;
+    cursor:pointer;
+    outline:0;
+    touch-action:manipulation;
     --tab-content-color:var(--palette-caption);
     --tab-content-focus-color:var(--main-color);
     --tab-content-opacity:0.7;
     align-items:center;
-    appearance:none;
-    border-width:0;
-    cursor:pointer;
     display:flex;
     font:inherit;
     font-size:var(--tabs-font-size);
     height:var(--tabs-height);
     justify-content:center;
-    outline:0;
     padding:0 1.25em;
     position:relative;
-    touch-action:manipulation;
     transition:color .6s;
     user-select:none;
     white-space:nowrap;
@@ -1933,9 +1931,9 @@
   }
   .v-tab--active{
     --tab-content-color:rgba(0,0,0,.87);
-    --tab-content-opacity:1;
     background:var(--tabs-color);
     pointer-events:none;
+    --tab-content-opacity:1;
   }
   .v-tab--active:before{
     transform:scaleX(1);
@@ -2151,10 +2149,7 @@
     background:hsla(0,0%,100%,.85);
     user-select:none;
   }
-  .v-data-table__table__header .v-data-table__table__cell--active .v-data-table__table__sort-icon{
-    opacity:1;
-  }
-  .v-data-table__table__cell[tabindex="0"]:focus .v-data-table__table__sort-icon,.v-data-table__table__cell[tabindex="0"]:hover .v-data-table__table__sort-icon{
+  .v-data-table__table__cell[tabindex="0"]:focus .v-data-table__table__sort-icon,.v-data-table__table__cell[tabindex="0"]:hover .v-data-table__table__sort-icon,.v-data-table__table__header .v-data-table__table__cell--active .v-data-table__table__sort-icon{
     opacity:1;
   }
   .v-data-table__table__body tr:last-child .v-data-table__table__cell{
@@ -2330,9 +2325,9 @@
   z-index:1;
 }
 .v-sheet-modal__scroller{
+  flex:1 1;
   -webkit-overflow-scrolling:touch;
   background-color:var(--v-sheet-background);
-  flex:1 1;
   height:100%;
   overflow-y:auto;
 }