@fastkit/vui 0.6.15 → 0.6.19

package/dist/vui.css

@@ -923,22 +923,44 @@ h6,
   transform: translate(-50%, -50%);
 }
 .v-list-tile {
+  --tile-background: var(--main-color, transparent);
+  --tile-active-background: var(--deep-color, transparent);
+  --tile-text-color: var(--text-color);
+  --tile-text-active-color: var(--text-color);
+  --tile-pin-color: transparent;
+  --paper-link-color: var(--tile-text-color);
   display: flex;
   align-items: center;
   width: 100%;
   padding: 10px;
-  color: inherit;
+  color: var(--tile-text-color);
   text-align: left;
   text-decoration: none;
-  background: transparent;
+  user-select: none;
+  background: var(--tile-background);
   border: 0;
-  border-left: 3px solid transparent;
+  border-left: 3px solid var(--tile-pin-color);
   border-radius: 0;
   outline: 0;
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   appearance: none;
 }
+.v-list-tile--clickable {
+  cursor: pointer;
+  --tile-text-color: var(--nav-color);
+  --tile-text-active-color: var(--navActive-color, var(--nav-color));
+}
+.v-list-tile--clickable:hover, .v-list-tile--clickable:focus {
+  --tile-background: var(--tile-active-background);
+  --tile-text-color: var(--tile-text-active-color);
+}
+.v-list-tile--active {
+  --tile-pin-color: var(--pin-color);
+  --tile-text-color: var(--tile-text-active-color);
+  --tile-background: var(--tile-active-background);
+}
 .v-list-tile__body {
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   font-weight: 500;
   line-height: 1.5;
 }
@@ -949,8 +971,47 @@ h6,
   margin-left: auto;
   text-align: right;
 }
-
-
+.v-drawer-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  height: 100%;
+}
+.v-drawer-layout__header {
+  display: flex;
+  flex: 0 0 var(--v-app-layout-vertial-fixed-height);
+  align-items: center;
+  justify-content: center;
+  height: var(--v-app-layout-vertial-fixed-height);
+}
+.v-drawer-layout__body {
+  flex: 1 1 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.v-drawer-layout__footer {
+  flex: 0 0 auto;
+  margin-top: auto;
+}
+.v-navigation-item--opened {
+  --tile-background: var(--tile-active-background);
+  --tile-text-color: var(--tile-text-active-color);
+}
+.v-navigation-item__expand {
+  transition: height 0.2s;
+}
+.v-navigation-item__expand .v-navigation-item {
+  --tile-background: var(--tile-active-background);
+}
+.v-navigation__caption {
+  display: block;
+  padding: calc(var(--root-em) * 0.625) calc(var(--root-em) * 1.5625);
+  margin: 1em 0 0;
+  font-size: 0.75rem;
+  color: var(--caption-color);
+  text-transform: uppercase;
+}
 .v-checkbox {
   --my-border-color: var(--color);
   --my-faux-bg-color: transparent;
@@ -1462,20 +1523,27 @@ h6,
   --height: var(--toolbar-dense-height);
 }
 .v-toolbar-menu {
+  height: 100%;
+  margin: 0;
+  box-shadow: none;
+}
+.v-toolbar-edge {
   display: flex;
+  flex: 0 0;
   align-items: center;
   align-self: stretch;
 }
-.v-toolbar-menu:empty, .v-toolbar-menu--empty {
+.v-toolbar-edge:empty, .v-toolbar-edge--empty {
   display: none;
 }
-.v-toolbar-menu--start {
+.v-toolbar-edge--start {
   margin-right: calc(var(--root-em) * 0.75);
   margin-left: calc(-1 * var(--root-em) * 0.75);
 }
-.v-toolbar-menu--end {
+.v-toolbar-edge--end {
+  padding-left: calc(var(--root-em) * 0.75);
   margin-right: calc(-1 * var(--root-em) * 0.75);
-  margin-left: calc(var(--root-em) * 0.75);
+  margin-left: auto;
 }
 .v-toolbar-title {
   display: flex;