@fastkit/vui 0.15.0 → 0.16.1

package/dist/vui.css

@@ -357,6 +357,15 @@
     --tabs-font-size:calc(var(--root-em)*0.875);
     --breadcrumbs-font-size:var(--typo-sm-size);
     --list-tile-padding:calc(var(--root-em)*0.625);
+    --snackbar-shadow:0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
+    --dialog-shadow:0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
+    --menu-shadow:0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
+    --tooltip-background:rgba(35,47,52,.9);
+    --tooltip-color:#fff;
+    --tooltip-radius:4px;
+    --tooltip-padding:5px 16px;
+    --tooltip-font-size:calc(var(--root-em)*0.875);
+    --tooltip-shadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
   }
   :root,[lang=en]{
     --typo-base-font:Roboto, "Noto Sans";
@@ -691,6 +700,131 @@
     justify-content:center;
     transition:transform .15s linear;
   }
+}
+.v-tooltip{
+  --menu-shadow:var(--tooltip-shadow);
+  border-radius:var(--tooltip-radius);
+  font-size:var(--tooltip-font-size);
+}
+.v-tooltip .v-menu__body{
+  background:var(--tooltip-background) !important;
+  color:var(--tooltip-color) !important;
+}
+.v-tooltip__inner{
+  display:inline-block;
+  padding:var(--tooltip-padding);
+}
+.v-menu{
+  box-shadow:var(--menu-shadow);
+}
+.v-dialog,.v-menu{
+  border-radius:2px;
+}
+.v-dialog{
+  box-shadow:var(--dialog-shadow);
+  display:inline-block;
+  margin:24px;
+  min-width:280px;
+  outline:0;
+  pointer-events:auto;
+  position:relative;
+  text-align:left;
+}
+.v-dialog__header{
+  font-size:24px;
+  line-height:1.4;
+}
+.v-dialog__body,.v-dialog__header{
+  box-sizing:border-box;
+  padding:16px;
+}
+.v-dialog__body{
+  font-size:16px;
+  line-height:1.5;
+}
+.v-dialog--dense .v-dialog__body{
+  padding-bottom:0;
+}
+.v-dialog__actions{
+  align-items:center;
+  box-sizing:border-box;
+  display:flex;
+  justify-content:flex-end;
+  padding:8px;
+}
+.v-dialog--dense .v-dialog__actions{
+  padding-top:0;
+}
+.v-snackbar{
+  box-shadow:var(--snackbar-shadow);
+  font-size:14px;
+}
+.v-snackbar__inner{
+  align-items:center;
+  background-color:var(--main-color);
+  border-color:var(--border-color);
+  border-radius:inherit;
+  color:var(--text-color);
+  display:flex;
+  justify-content:space-between;
+  max-width:calc(100vw - 96px);
+  min-width:288px;
+  padding:8px 4px 8px 16px;
+  width:auto;
+}
+.v-snackbar__body{
+  flex:1 1 100%;
+  word-break:break-all;
+}
+.v-snackbar__actions{
+  flex:0 0 auto;
+  padding-left:20px;
+  white-space:nowrap;
+}
+.v-snackbar__close{
+  margin:0;
+}
+.v-sheet-modal{
+  --v-sheet-modal-width:90vw;
+  --v-sheet-modal-max-width:none;
+  --v-sheet-background:var(--palette-foundation);
+  bottom:0;
+  box-shadow:var(--dialog-shadow);
+  box-sizing:border-box;
+  display:flex;
+  flex-direction:column;
+  max-width:var(--v-sheet-modal-max-width);
+  outline:0;
+  padding:0;
+  position:fixed;
+  right:0;
+  top:0;
+  transition:transform var(--v-stack-transition-slowly);
+  width:var(--v-sheet-modal-width);
+}
+.v-sheet-modal__header{
+  background-color:var(--v-sheet-background);
+  flex:0 0;
+  position:relative;
+  z-index:1;
+}
+.v-sheet-modal__scroller{
+  -webkit-overflow-scrolling:touch;
+  background-color:var(--v-sheet-background);
+  flex:1 1;
+  height:100%;
+  overflow-y:auto;
+}
+.v-sheet-modal--has-active-child{
+  transform:translateX(calc(-100vw + var(--v-sheet-modal-width)));
+}
+.v-sheet-modal-enter-active,.v-sheet-modal-leave-active{
+  transition:transform var(--v-stack-transition-slowly);
+}
+.v-sheet-modal-enter-from,.v-sheet-modal-leave-to{
+  transform:translateX(var(--v-sheet-modal-width));
+}
+@layer vui{
   .v-skelton-loader-bone{
     background:rgba(0,0,0,.12);
     border-radius:inherit;
@@ -698,8 +832,6 @@
     overflow:hidden;
     position:relative;
   }
-}
-@layer vui{
   .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));