@fastkit/vui 0.6.12 → 0.6.16

package/dist/vui.css

@@ -430,6 +430,88 @@ template {
   --control-switch-width: 3.625em;
   --control-switch-track-width: 2.125em;
   --control-switch-track-height: 0.875em;
+  --shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2);
+  --shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14);
+  --shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);
+  --shadow-key-umbra-0: 0px 0px 0px 0px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-1: 0px 2px 1px -1px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-2: 0px 3px 1px -2px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-3: 0px 3px 3px -2px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-4: 0px 2px 4px -1px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-5: 0px 3px 5px -1px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-6: 0px 3px 5px -1px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-7: 0px 4px 5px -2px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-8: 0px 5px 5px -3px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-9: 0px 5px 6px -3px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-10: 0px 6px 6px -3px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-11: 0px 6px 7px -4px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-12: 0px 7px 8px -4px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-13: 0px 7px 8px -4px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-14: 0px 7px 9px -4px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-15: 0px 8px 9px -5px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-16: 0px 8px 10px -5px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-17: 0px 8px 11px -5px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-18: 0px 9px 11px -5px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-19: 0px 9px 12px -6px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-20: 0px 10px 13px -6px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-21: 0px 10px 13px -6px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-22: 0px 10px 14px -6px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-23: 0px 11px 14px -7px var(--shadow-key-umbra-opacity);
+  --shadow-key-umbra-24: 0px 11px 15px -7px var(--shadow-key-umbra-opacity);
+  --shadow-key-penumbra-0: 0px 0px 0px 0px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-1: 0px 1px 1px 0px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-2: 0px 2px 2px 0px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-3: 0px 3px 4px 0px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-4: 0px 4px 5px 0px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-5: 0px 5px 8px 0px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-6: 0px 6px 10px 0px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-7: 0px 7px 10px 1px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-8: 0px 8px 10px 1px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-9: 0px 9px 12px 1px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-10: 0px 10px 14px 1px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-11: 0px 11px 15px 1px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-12: 0px 12px 17px 2px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-13: 0px 13px 19px 2px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-14: 0px 14px 21px 2px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-15: 0px 15px 22px 2px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-16: 0px 16px 24px 2px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-17: 0px 17px 26px 2px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-18: 0px 18px 28px 2px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-19: 0px 19px 29px 2px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-20: 0px 20px 31px 3px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-21: 0px 21px 33px 3px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-22: 0px 22px 35px 3px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-23: 0px 23px 36px 3px var(--shadow-key-penumbra-opacity);
+  --shadow-key-penumbra-24: 0px 24px 38px 3px var(--shadow-key-penumbra-opacity);
+  --shadow-key-ambient-0: 0px 0px 0px 0px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-1: 0px 1px 3px 0px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-2: 0px 1px 5px 0px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-3: 0px 1px 8px 0px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-4: 0px 1px 10px 0px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-5: 0px 1px 14px 0px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-6: 0px 1px 18px 0px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-7: 0px 2px 16px 1px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-8: 0px 3px 14px 2px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-9: 0px 3px 16px 2px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-10: 0px 4px 18px 3px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-11: 0px 4px 20px 3px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-12: 0px 5px 22px 4px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-13: 0px 5px 24px 4px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-14: 0px 5px 26px 4px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-15: 0px 6px 28px 5px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-16: 0px 6px 30px 5px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-17: 0px 6px 32px 5px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-18: 0px 7px 34px 6px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-19: 0px 7px 36px 6px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-20: 0px 8px 38px 7px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-21: 0px 8px 40px 7px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-22: 0px 8px 42px 7px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-23: 0px 9px 44px 8px var(--shadow-key-ambient-opacity);
+  --shadow-key-ambient-24: 0px 9px 46px 8px var(--shadow-key-ambient-opacity);
+  --toolbar-height: var(--v-app-layout-vertial-fixed-height);
+  --toolbar-dense-height: calc(var(--toolbar-height) * 0.8);
+  --card-content-padding: 1rem;
+  --card-actions-padding: 0.5rem;
 }
 
 :root,
@@ -530,6 +612,106 @@ h6,
   color: var(--typo-h6-color);
 }
 
+.elevation-24 {
+  box-shadow: var(--shadow-key-umbra-24), var(--shadow-key-penumbra-24), var(--shadow-key-ambient-24) !important;
+}
+
+.elevation-23 {
+  box-shadow: var(--shadow-key-umbra-23), var(--shadow-key-penumbra-23), var(--shadow-key-ambient-23) !important;
+}
+
+.elevation-22 {
+  box-shadow: var(--shadow-key-umbra-22), var(--shadow-key-penumbra-22), var(--shadow-key-ambient-22) !important;
+}
+
+.elevation-21 {
+  box-shadow: var(--shadow-key-umbra-21), var(--shadow-key-penumbra-21), var(--shadow-key-ambient-21) !important;
+}
+
+.elevation-20 {
+  box-shadow: var(--shadow-key-umbra-20), var(--shadow-key-penumbra-20), var(--shadow-key-ambient-20) !important;
+}
+
+.elevation-19 {
+  box-shadow: var(--shadow-key-umbra-19), var(--shadow-key-penumbra-19), var(--shadow-key-ambient-19) !important;
+}
+
+.elevation-18 {
+  box-shadow: var(--shadow-key-umbra-18), var(--shadow-key-penumbra-18), var(--shadow-key-ambient-18) !important;
+}
+
+.elevation-17 {
+  box-shadow: var(--shadow-key-umbra-17), var(--shadow-key-penumbra-17), var(--shadow-key-ambient-17) !important;
+}
+
+.elevation-16 {
+  box-shadow: var(--shadow-key-umbra-16), var(--shadow-key-penumbra-16), var(--shadow-key-ambient-16) !important;
+}
+
+.elevation-15 {
+  box-shadow: var(--shadow-key-umbra-15), var(--shadow-key-penumbra-15), var(--shadow-key-ambient-15) !important;
+}
+
+.elevation-14 {
+  box-shadow: var(--shadow-key-umbra-14), var(--shadow-key-penumbra-14), var(--shadow-key-ambient-14) !important;
+}
+
+.elevation-13 {
+  box-shadow: var(--shadow-key-umbra-13), var(--shadow-key-penumbra-13), var(--shadow-key-ambient-13) !important;
+}
+
+.elevation-12 {
+  box-shadow: var(--shadow-key-umbra-12), var(--shadow-key-penumbra-12), var(--shadow-key-ambient-12) !important;
+}
+
+.elevation-11 {
+  box-shadow: var(--shadow-key-umbra-11), var(--shadow-key-penumbra-11), var(--shadow-key-ambient-11) !important;
+}
+
+.elevation-10 {
+  box-shadow: var(--shadow-key-umbra-10), var(--shadow-key-penumbra-10), var(--shadow-key-ambient-10) !important;
+}
+
+.elevation-9 {
+  box-shadow: var(--shadow-key-umbra-9), var(--shadow-key-penumbra-9), var(--shadow-key-ambient-9) !important;
+}
+
+.elevation-8 {
+  box-shadow: var(--shadow-key-umbra-8), var(--shadow-key-penumbra-8), var(--shadow-key-ambient-8) !important;
+}
+
+.elevation-7 {
+  box-shadow: var(--shadow-key-umbra-7), var(--shadow-key-penumbra-7), var(--shadow-key-ambient-7) !important;
+}
+
+.elevation-6 {
+  box-shadow: var(--shadow-key-umbra-6), var(--shadow-key-penumbra-6), var(--shadow-key-ambient-6) !important;
+}
+
+.elevation-5 {
+  box-shadow: var(--shadow-key-umbra-5), var(--shadow-key-penumbra-5), var(--shadow-key-ambient-5) !important;
+}
+
+.elevation-4 {
+  box-shadow: var(--shadow-key-umbra-4), var(--shadow-key-penumbra-4), var(--shadow-key-ambient-4) !important;
+}
+
+.elevation-3 {
+  box-shadow: var(--shadow-key-umbra-3), var(--shadow-key-penumbra-3), var(--shadow-key-ambient-3) !important;
+}
+
+.elevation-2 {
+  box-shadow: var(--shadow-key-umbra-2), var(--shadow-key-penumbra-2), var(--shadow-key-ambient-2) !important;
+}
+
+.elevation-1 {
+  box-shadow: var(--shadow-key-umbra-1), var(--shadow-key-penumbra-1), var(--shadow-key-ambient-1) !important;
+}
+
+.elevation-0 {
+  box-shadow: var(--shadow-key-umbra-0), var(--shadow-key-penumbra-0), var(--shadow-key-ambient-0) !important;
+}
+
 .v-control--sm {
   --control-field-rem: var(--control-field-rem-sm);
   font-size: var(--control-field-rem);
@@ -590,8 +772,56 @@ h6,
   flex: 0 1;
   margin-left: auto;
 }
+.v-paper {
+  --paper-radius: var(--control-field-radius);
+  color: var(--paper-text-color);
+  background-color: var(--paper-background--color);
+  border-radius: var(--paper-radius);
+}
+.v-paper--plain {
+  --paper-background--color: var(--palette-background);
+  --paper-text-color: inherit;
+  --paper-link-color: var(--link-color);
+}
+.v-paper--has-color {
+  --paper-background--color: var(--main-color);
+  --paper-text-color: var(--text-color);
+  --paper-link-color: var(--nav-color);
+}
+.v-paper--square {
+  --paper-radius: 0px;
+}
+.v-paper a {
+  color: var(--paper-link-color);
+}
+.v-paper__header {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+.v-paper__footer {
+  border-bottom-right-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+
+.v-card-content {
+  padding: var(--card-content-padding);
+}
+.v-card-actions {
+  display: flex;
+  align-items: center;
+  padding: var(--card-actions-padding);
+}
+.v-card-actions .v-btn {
+  margin-top: 0;
+  margin-bottom: 0;
+}
 .v-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25em;
   user-select: none;
+  aspect-ratio: 1/1;
 }
 .v-icon--clickable {
   cursor: pointer;
@@ -602,6 +832,185 @@ h6,
   justify-content: center;
   transition: transform 150ms linear;
 }
+.v-button {
+  --padding: 1em;
+  --height: 2.5714285714em;
+  --icon-margin: 0.6em;
+  position: relative;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  min-width: calc(var(--root-em) * 4);
+  height: var(--height);
+  padding: 0 var(--padding);
+  margin: calc(var(--root-em) * 0.375) calc(var(--root-em) * 0.5);
+  overflow: hidden;
+  font: inherit;
+  font-weight: 500;
+  line-height: 1;
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: 0.0892857143em;
+  vertical-align: bottom;
+  cursor: pointer;
+  user-select: none;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--control-field-radius);
+  outline: 0;
+  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), color 1ms;
+  appearance: none;
+}
+.v-button--plain {
+  color: inherit !important;
+}
+.v-button--sm {
+  font-size: calc(var(--root-em) * 0.75);
+}
+.v-button--md {
+  font-size: calc(var(--root-em) * 0.875);
+}
+.v-button--lg {
+  font-size: calc(var(--root-em) * 1.375);
+}
+.v-button--rounded {
+  --padding: 0;
+  min-width: 0;
+  margin: calc(var(--root-em) * 0.125) calc(var(--root-em) * 0.125);
+  border-radius: 50%;
+  aspect-ratio: 1/1;
+  --height: auto;
+}
+.v-button--icon {
+  min-width: 0;
+  --height: 1.9285714286em;
+  --padding: 0em;
+}
+.v-button::-moz-focus-inner {
+  border: 0;
+}
+.v-button[disabled] {
+  cursor: default;
+}
+.v-button--spacer-left {
+  margin-left: auto;
+}
+.v-button--spacer-right {
+  margin-right: auto;
+}
+.v-button__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  justify-self: stretch;
+}
+.v-button--loading .v-button__content {
+  pointer-events: none;
+  opacity: 0;
+}
+.v-button__icon--start {
+  margin-right: var(--icon-margin);
+}
+.v-button__icon--end {
+  margin-left: var(--icon-margin);
+}
+.v-button__loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 1;
+  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: var(--tile-text-color);
+  text-align: left;
+  text-decoration: none;
+  user-select: none;
+  background: var(--tile-background);
+  border: 0;
+  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.8125rem;
+  font-weight: 500;
+  line-height: 1.5;
+}
+.v-list-tile__icon {
+  min-width: 2em;
+}
+.v-list-tile__icon--end {
+  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);
+}
+.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;
@@ -1092,4 +1501,48 @@ h6,
 .v-textarea__input__element::placeholder {
   font-style: italic;
   color: var(--control-disabled-color);
+}
+.v-toolbar {
+  --height: var(--toolbar-height);
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--height);
+  padding: 0 calc(var(--root-em) * 1.5);
+  margin: 0;
+  border-radius: inherit;
+}
+.v-toolbar--plain {
+  --main-color: var(--palette-background);
+}
+.v-app-layout__header > .v-toolbar {
+  height: 100%;
+}
+.v-toolbar--dense {
+  --height: var(--toolbar-dense-height);
+}
+.v-toolbar-menu {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+}
+.v-toolbar-menu:empty, .v-toolbar-menu--empty {
+  display: none;
+}
+.v-toolbar-menu--start {
+  margin-right: calc(var(--root-em) * 0.75);
+  margin-left: calc(-1 * var(--root-em) * 0.75);
+}
+.v-toolbar-menu--end {
+  margin-right: calc(-1 * var(--root-em) * 0.75);
+  margin-left: calc(var(--root-em) * 0.75);
+}
+.v-toolbar-title {
+  display: flex;
+  flex-grow: 1;
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
 }