@flux-ui/application 3.0.0-next.39

package/dist/index.css

@@ -0,0 +1,746 @@
+@charset "UTF-8";:root {
+  --application-duration: 360ms;
+  --application-menu-surface: var(--gray-100);
+  --application-menu-surface-stroke: var(--gray-200);
+  --application-menu-width: 300px;
+  --application-menu-width-collapsed: 69px;
+  --application-side-width: 300px;
+  --application-top-height: 66px;
+}
+
+[dark] {
+  --application-menu-surface: color-mix(in srgb, var(--gray-25), black 25%);
+  --application-menu-surface-stroke: var(--gray-100);
+}
+
+.application {
+  position: relative;
+  display: flex;
+  transition: padding var(--application-duration) var(--swift-out);
+  transition-property: padding-left, padding-right;
+}
+.application:has(> .application-side) {
+  padding-right: var(--application-side-width);
+}
+
+.application-body {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 100dvh;
+  flex-flow: column;
+  flex-grow: 1;
+}
+.application-body:has(> .application-content-full > :is(.calendar, .table)) {
+  max-height: 100dvh;
+}
+
+.application-menu-backdrop {
+  position: fixed;
+  display: none;
+  inset: 0;
+  width: 100dvw;
+  height: 100dvh;
+  padding: 0;
+  border: 0;
+  background: rgb(from var(--gray-200) r g b/0.5);
+  backdrop-filter: blur(3px) saturate(180%);
+  transition: var(--application-duration) var(--swift-out);
+  transition-property: background, backdrop-filter, opacity;
+  z-index: 1900;
+}
+
+@media (min-width: 1024px) {
+  .application:has(> .application-menu) {
+    padding-left: var(--application-menu-width);
+  }
+  .application:has(> .application-menu[data-collapsed][data-collapsible]) {
+    padding-left: var(--application-menu-width-collapsed);
+  }
+}
+@media (max-width: 1023.98px) {
+  .application:has(> .application-side) {
+    padding-right: 0;
+  }
+  .application-menu-backdrop {
+    display: block;
+  }
+  .application:has(> .application-menu[data-collapsed]) .application-menu-backdrop {
+    pointer-events: none;
+    opacity: 0;
+  }
+  html[data-application-menu-open],
+  html[data-application-menu-open] body {
+    overflow: hidden;
+    overscroll-behavior: contain;
+  }
+}.application-content {
+  position: relative;
+  display: flex;
+  container: applicationContent/inline-size;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: 21px;
+  padding-bottom: 21px;
+  flex-flow: column;
+  flex-grow: 1;
+  gap: 21px;
+}
+
+.application-content-default,
+.application-content-dashboard {
+  width: min(1620px, 100% - 42px);
+}
+
+.application-content-dashboard {
+  gap: 45px;
+}
+
+.application-content-full {
+  padding-top: 0;
+  padding-bottom: 0;
+  width: calc(100% - 42px);
+}
+
+.application-content-medium {
+  width: min(1280px, 100% - 42px);
+}
+
+.application-content-narrow {
+  width: min(840px, 100% - 42px);
+}
+
+.application-content-full:has(> :is(.calendar, .table)) {
+  min-height: 0;
+  width: 100%;
+  contain: paint;
+  overflow: hidden;
+}
+.application-content-full > :is(.calendar, .table) {
+  max-height: 100%;
+  flex-grow: 1;
+}
+.application-content-full > .calendar {
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+}
+.application-content-full > .calendar .calendar-actions {
+  padding-left: 21px;
+  padding-right: 21px;
+}
+.application-content-full > .table .table-cell:first-child .table-cell-content {
+  padding-left: 21px;
+}
+.application-content-full > .table .table-cell:last-child .table-cell-content {
+  padding-right: 21px;
+}
+
+@media (max-width: 1023.98px) {
+  .application-content-default,
+  .application-content-medium,
+  .application-content-narrow {
+    gap: 15px;
+  }
+  .application-content-dashboard {
+    gap: 30px;
+  }
+  .application-content-full {
+    width: 100%;
+  }
+  .application-content-full > :is(.calendar, .table) {
+    margin-left: 0;
+    margin-right: 0;
+    height: auto;
+  }
+  .application-content-full > .calendar .calendar-actions {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+  .application-content-full > .table .table-cell:first-child .table-cell-content {
+    padding-left: 12px;
+  }
+  .application-content-full > .table .table-cell:last-child .table-cell-content {
+    padding-right: 12px;
+  }
+}.application-hero {
+  display: flex;
+  align-items: center;
+  flex-flow: row;
+  gap: 21px;
+}
+
+.application-hero-body {
+  display: flex;
+  flex-flow: column;
+  flex-grow: 1;
+  gap: 6px;
+}
+
+.application-hero-subtitle {
+  color: var(--foreground-secondary);
+}
+.application-menu {
+  position: fixed;
+  display: flex;
+  top: 0;
+  left: 0;
+  height: 100dvh;
+  width: var(--application-menu-width);
+  flex-flow: column;
+  transition: var(--application-duration) var(--swift-out);
+  transition-property: translate, width;
+  background: var(--application-menu-surface);
+  border-right: 1px solid var(--application-menu-surface-stroke);
+  overflow: hidden;
+  z-index: 500;
+}
+
+.application-menu-footer,
+.application-menu-header,
+.application-menu-panel {
+  padding: 12px;
+  gap: 12px;
+}
+
+.application-menu-footer,
+.application-menu-header {
+  position: relative;
+  background: var(--application-menu-surface);
+  z-index: 1;
+}
+.application-menu-footer::before,
+.application-menu-header::before {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 18px;
+  width: 100%;
+  content: "";
+  pointer-events: none;
+}
+
+.application-menu-footer {
+  max-height: 50vh;
+  padding-bottom: max(12px, env(safe-area-inset-bottom));
+  transition: var(--application-duration) var(--swift-out);
+  transition-property: max-height, opacity, padding-top, padding-bottom;
+}
+.application-menu-footer::before {
+  bottom: 100%;
+  background: linear-gradient(to top, var(--application-menu-surface), transparent);
+  transition: opacity var(--application-duration) var(--swift-out);
+}
+.application-menu-footer {
+  /**
+   * Collapses the footer in sync with the slider track when the
+   * user navigates into a context-menu panel. Animating `max-height`
+   * is the standard hack to transition a height-auto element; 50vh
+   * is far above any realistic footer height yet small enough to
+   * animate smoothly without the leading edge appearing to "wait".
+   */
+}
+.application-menu-footer[data-hidden] {
+  max-height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  opacity: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+.application-menu-footer[data-hidden]::before {
+  opacity: 0;
+}
+
+.application-menu-header {
+  padding-top: max(12px, env(safe-area-inset-top));
+  border-bottom: 1px solid var(--application-menu-surface-stroke);
+}
+.application-menu-header::before {
+  top: calc(100% + 1px);
+  background: linear-gradient(to bottom, var(--application-menu-surface), transparent);
+}
+
+.application-menu-stage {
+  position: relative;
+  min-height: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.application-menu-track {
+  display: flex;
+  flex-flow: row nowrap;
+  height: 100%;
+  transform: translateX(calc(var(--view-index, 0) * -100%));
+  transition: transform var(--application-duration) var(--swift-out);
+  will-change: transform;
+}
+
+.application-menu-panel {
+  display: flex;
+  flex: 0 0 100%;
+  flex-flow: column;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.application-menu-page-indicator {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 6px;
+  justify-content: center;
+  align-items: center;
+  padding: 9px 12px;
+  background: var(--application-menu-surface);
+  z-index: 1;
+}
+
+.application-menu-page-indicator-dot {
+  height: 6px;
+  width: 6px;
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 1.5px solid var(--application-menu-surface-stroke);
+  border-radius: 50%;
+  transition: 200ms var(--swift-out);
+  transition-property: background, border-color, transform;
+}
+@media (hover: hover) {
+  .application-menu-page-indicator-dot:hover {
+    border-color: var(--foreground-secondary);
+    transform: scale(1.2);
+  }
+}
+.application-menu-page-indicator-dot {
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
+  outline-offset: 0;
+}
+.application-menu-page-indicator-dot:focus-visible {
+  outline-color: var(--primary-600);
+  outline-offset: 0;
+}
+
+.application-menu-page-indicator-dot-active {
+  background: var(--foreground-prominent);
+  border-color: var(--foreground-prominent);
+}
+
+/**
+ * No visual animation on enter/leave — just hold the leaving panel in
+ * the DOM for the duration of the slider's translate transition so it
+ * stays visible while the track slides away from it. Without this the
+ * v-for would unmount the panel the moment matches shrinks, leaving
+ * the slider sliding over an empty track.
+ */
+.application-menu-panel-enter-active,
+.application-menu-panel-enter-from,
+.application-menu-panel-leave-active,
+.application-menu-panel-leave-to {
+  transition: opacity var(--application-duration) var(--swift-out);
+}
+
+.application-menu-panel-leave-active {
+  pointer-events: none;
+}
+
+.application-menu .divider {
+  margin: 3px 12px;
+}
+
+.application-menu .divider-content::before,
+.application-menu .divider-content::after,
+.application-menu .divider-line {
+  background: var(--application-menu-surface-stroke);
+}
+
+.application-menu .menu-sub-header {
+  --surface: var(--application-menu-surface);
+}
+
+.application-menu .menu-item {
+  position: relative;
+}
+@media (hover: hover) {
+  .application-menu .menu-item:hover {
+    background: var(--gray-200);
+  }
+}
+.application-menu .menu-item:active {
+  background: var(--gray-300);
+}
+.application-menu .menu-item::before {
+  position: absolute;
+  display: block;
+  content: "";
+  top: 50%;
+  right: 0;
+  height: 1em;
+  width: 3px;
+  background: var(--foreground-secondary);
+  border-radius: var(--radius);
+  opacity: 0;
+  transition: 300ms var(--swift-out);
+  transition-property: height, opacity;
+  translate: 8px -50%;
+}
+
+.application-menu .menu-item-icon {
+  color: var(--foreground-secondary);
+}
+
+.application-menu .menu-item-label {
+  transition: var(--application-duration) var(--swift-out);
+  transition-property: filter, opacity, translate;
+  white-space: nowrap;
+}
+
+.application-menu .menu-item-active {
+  background: var(--gray-200);
+  color: var(--foreground-prominent);
+}
+.application-menu .menu-item-active::before {
+  height: 1.6em;
+  opacity: 1;
+}
+
+.application-menu .menu-item-active .menu-item-icon {
+  color: var(--foreground);
+}
+
+.application-menu .menu-item-active .menu-item-label {
+  font-weight: 500;
+}
+
+.application-menu-account {
+  position: relative;
+  pointer-events: none;
+}
+
+.application-menu-account-switcher {
+  pointer-events: auto;
+}
+
+.application-menu-account .menu-item-label {
+  font-weight: 600;
+}
+
+.application-menu-account .avatar {
+  margin: -5px;
+  font-size: 30px;
+}
+
+.application-menu-context {
+  display: flex;
+  margin-top: -12px;
+  margin-left: -12px;
+  margin-right: -12px;
+  padding: 15px;
+  flex-flow: row nowrap;
+  gap: 15px;
+  border: 1px solid var(--application-menu-surface-stroke);
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+.application-menu-context-content {
+  display: flex;
+  align-self: center;
+  flex-flow: column;
+}
+.application-menu-context-content strong {
+  color: var(--foreground-prominent);
+}
+.application-menu-context-content span {
+  color: var(--foreground-secondary);
+  font-size: 14px;
+}
+
+.application-menu-context-pill {
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 9px;
+  align-items: center;
+  margin: -3px -6px 6px;
+  padding: 9px 12px;
+  cursor: pointer;
+  color: var(--foreground-secondary);
+  background: transparent;
+  border: 1px solid var(--application-menu-surface-stroke);
+  border-radius: var(--radius);
+  transition: background 200ms var(--swift-out);
+}
+@media (hover: hover) {
+  .application-menu-context-pill:hover {
+    background: var(--gray-200);
+  }
+}
+.application-menu-context-pill:active {
+  background: var(--gray-300);
+}
+.application-menu-context-pill {
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
+  outline-offset: 0;
+}
+.application-menu-context-pill:focus-visible {
+  outline-color: var(--primary-600);
+  outline-offset: 0;
+}
+
+.application-menu-context-pill-content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-flow: column;
+  min-width: 0;
+}
+.application-menu-context-pill-content strong {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  color: var(--foreground-prominent);
+  text-overflow: ellipsis;
+  transition: var(--application-duration) var(--swift-out);
+  transition-property: filter, opacity, translate;
+}
+.application-menu-context-pill-content span {
+  font-size: 12px;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  color: var(--foreground-secondary);
+  text-overflow: ellipsis;
+  transition: var(--application-duration) var(--swift-out);
+  transition-property: filter, opacity, translate;
+}
+
+.application-menu-promo {
+  display: flex;
+  padding: 12px;
+  flex-flow: row;
+  gap: 12px;
+  background: var(--gray-25);
+  border: 1px solid var(--application-menu-surface-stroke);
+  border-radius: var(--radius);
+}
+
+.application-menu-promo > .icon {
+  margin: 2px;
+  color: var(--gray-600);
+  font-size: 16px;
+}
+
+.application-menu-promo-content {
+  display: flex;
+  flex-flow: column;
+  gap: 6px;
+  font-size: 14px;
+}
+
+.application-menu-promo-content a {
+  color: var(--gray-700);
+}
+
+.application-menu-toggle.menu-item {
+  height: min-content;
+  align-self: center;
+  color: var(--foreground);
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.application-menu-toggle-icon {
+  height: 1em;
+  width: 1em;
+  flex-shrink: 0;
+  font-size: 18px;
+  line-height: 1;
+  overflow: visible;
+}
+.application-menu-toggle-icon path {
+  fill: currentColor;
+}
+
+@media (min-width: 1024px) {
+  .application-menu[data-collapsed][data-collapsible] {
+    width: var(--application-menu-width-collapsed);
+  }
+  .application-menu[data-collapsed][data-collapsible] .menu-item-label {
+    filter: blur(6px);
+    opacity: 0;
+    translate: -12px 0;
+  }
+  .application-menu[data-collapsed][data-collapsible] .application-menu-promo,
+  .application-menu[data-collapsed][data-collapsible] .application-menu-context {
+    opacity: 0;
+    pointer-events: none;
+  }
+  .application-menu[data-collapsed][data-collapsible] .application-menu-context-pill-content strong,
+  .application-menu[data-collapsed][data-collapsible] .application-menu-context-pill-content span {
+    filter: blur(6px);
+    opacity: 0;
+    translate: -12px 0;
+  }
+}
+@media (max-width: 1023.98px) {
+  .application-menu {
+    width: min(300px, 100dvw - 42px);
+    z-index: 2000;
+  }
+  .application-menu[data-collapsed] {
+    translate: -100% 0;
+  }
+}.application-section {
+  display: flex;
+  flex-flow: column;
+  gap: 21px;
+}
+
+.application-section-header {
+  display: flex;
+  align-items: center;
+  flex-flow: row;
+  gap: 21px;
+}
+.application-section-header h2 {
+  flex-grow: 1;
+  color: var(--foreground-prominent);
+}
+
+.application-section-info {
+  font-size: 14px;
+  color: var(--foreground-secondary);
+}
+
+.application-section-content {
+  display: flex;
+  flex-flow: column;
+  flex-grow: 1;
+  gap: 21px;
+}
+
+.grid-column > .application-section {
+  min-height: 100%;
+}
+
+@media (max-width: 1023.98px) {
+  .application-section-header {
+    align-items: flex-start;
+    flex-flow: column;
+    gap: 0;
+  }
+}.application-side {
+  position: fixed;
+  display: flex;
+  top: 0;
+  right: 0;
+  height: 100dvh;
+  width: var(--application-side-width);
+  flex-flow: column;
+  background: var(--surface);
+  border-left: 1px solid var(--surface-stroke);
+  overflow: hidden;
+  z-index: 500;
+}
+
+@media (max-width: 1279.98px) {
+  .application-side {
+    display: none;
+  }
+}.application-top {
+  position: sticky;
+  top: 0;
+  background: rgb(from var(--surface) r g b/0.975);
+  background-clip: padding-box;
+  backdrop-filter: blur(3px) saturate(180%);
+  border-bottom: 1px solid transparent;
+  transition: 300ms var(--swift-out);
+  transition-property: border-color, box-shadow;
+  z-index: 400;
+}
+
+.application-top-scrolled {
+  border-bottom-color: var(--surface-stroke-out);
+  box-shadow: var(--shadow-lg);
+}
+
+.application-top-bar {
+  display: flex;
+  height: var(--application-top-height);
+  padding-left: 21px;
+  padding-right: 21px;
+  align-items: center;
+  flex-flow: row;
+  gap: 15px;
+  color: var(--foreground-prominent);
+}
+
+.application-top-bar-title {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.application-top-bar > .separator {
+  height: 18px;
+}
+
+@media (min-width: 1024px) {
+  .application-top-menu-toggle-hidden {
+    display: none;
+  }
+}
+.application-top-tabs {
+  position: relative;
+  display: flex;
+  margin-top: -6px;
+  margin-left: auto;
+  margin-right: auto;
+  flex-flow: row;
+  gap: 21px;
+}
+.application-top-tabs .tab-bar {
+  --tab-padding: 18px;
+  width: 100%;
+  box-shadow: unset;
+}
+
+.application-top-tabs-default,
+.application-top-tabs-dashboard {
+  width: min(1620px, 100% - 42px);
+}
+
+.application-top-tabs-full {
+  width: calc(100% - 42px);
+}
+
+.application-top-tabs-medium {
+  width: min(1280px, 100% - 42px);
+}
+
+.application-top-tabs-narrow {
+  width: min(840px, 100% - 42px);
+}
+
+@media (max-width: 1023.98px) {
+  .application-top,
+  .application-top-scrolled {
+    padding-top: env(safe-area-inset-top);
+  }
+  .application-top-bar > .icon {
+    display: none;
+  }
+  .application-menu-toggle {
+    margin-left: -12px;
+    margin-right: -15px;
+  }
+}
+.application-top:has(+ .application-content-full > .table) {
+  border-bottom-color: var(--surface-stroke-out);
+}/*$vite$:1*/