@quidgest/ui 0.16.3 → 0.16.4

package/dist/ui.css

@@ -1,3 +1,4 @@
+
 /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
 /*
 Document
@@ -264,6 +265,91 @@ body *::-webkit-scrollbar-track {
   transition: opacity 0.2s;
 }
 
+.scale-enter-from,
+.scale-leave-to {
+  transform: scale(0);
+  opacity: 0;
+}
+
+.scale-enter-to,
+.scale-leave-from {
+  transform: scale(1);
+  opacity: 1;
+}
+
+.scale-enter-active,
+.scale-leave-active {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+.slide-up-enter-to,
+.slide-up-leave-from {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.slide-down-enter-from,
+.slide-down-leave-to {
+  transform: translateY(-100%);
+  opacity: 0;
+}
+
+.slide-down-enter-to,
+.slide-down-leave-from {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.slide-left-enter-from,
+.slide-left-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+.slide-left-enter-to,
+.slide-left-leave-from {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.slide-right-enter-from,
+.slide-right-leave-to {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+
+.slide-right-enter-to,
+.slide-right-leave-from {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
 .q-chevron {
   transition: all 0.2s;
 }
@@ -783,8 +869,9 @@ body *::-webkit-scrollbar-track {
   --card-scale: 1;
   --card-shadow: none;
   --card-background: var(--q-theme-container);
-  min-height: 5rem;
   min-width: 7rem;
+  min-height: 5rem;
+  height: 100%;
   border: var(--card-border);
   border-radius: var(--border-radius);
   background-color: var(--card-background);
@@ -830,10 +917,11 @@ body *::-webkit-scrollbar-track {
   padding-top: 0.3rem;
 }
 .q-card__content {
+  display: flex;
+  flex-direction: column;
   padding: var(--card-padding);
   padding-top: 0;
   padding-bottom: var(--card-base-padding);
-  display: flex;
 }
 .q-card--elevation-low {
   --card-shadow: 0 4px 6px rgb(var(--q-theme-neutral-dark-rgb) / 15%);
@@ -2514,52 +2602,131 @@ body *::-webkit-scrollbar-track {
 .q-dialog {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  max-width: 50rem;
-  min-width: 20rem;
-  padding: 0.25rem;
-}
-
-.q-dialog__underlay {
-  background-color: rgb(var(--q-theme-on-background-rgb)/30%);
+  width: 100%;
+  max-height: calc(100vh - 2rem);
 }
-
 .q-dialog__header {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  padding: 0.4rem 0.25rem;
+  padding: 1rem;
+  padding-bottom: 0;
 }
 .q-dialog__header-title {
-  align-self: flex-start;
+  display: flex;
   font-weight: 700;
-  padding: 0.4rem;
   font-size: 1rem;
 }
-
-.q-dialog__header .q-button {
-  align-items: center;
-}
-
 .q-dialog__body {
+  padding: 1rem 0;
+  overflow: auto;
+}
+.q-dialog__body-icon {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0.25rem 0.65rem;
-  gap: 0.4rem;
+  justify-content: center;
+  padding: 0.25rem 1rem;
 }
 .q-dialog__body-icon svg {
   height: 5em;
   width: 5em;
 }
-.q-dialog__body-actions {
+.q-dialog__body-text {
   display: flex;
   justify-content: center;
+  padding: 0.25rem 1rem;
+}
+.q-dialog__footer {
+  padding: 1rem;
+  padding-top: 0;
+}
+.q-dialog__footer-buttons {
+  display: flex;
+  width: 100%;
+  justify-content: center;
   flex-wrap: wrap;
   gap: 0.5rem;
-  padding: 0.65rem;
-  padding-bottom: 0.5rem;
+}
+.q-dialog__close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+.q-dialog__underlay {
+  background-color: rgb(var(--q-theme-on-background-rgb)/30%);
+}
+
+.q-divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  color: #999;
+  font-size: 0.875rem;
+}
+
+/* Horizontal */
+.q-divider--horizontal {
+  width: 100%;
+  flex-direction: row;
+  margin: 8px 0;
+}
+
+.q-divider--horizontal:not(.q-divider--labeled)::before {
+  content: "";
+  flex: 1;
+  border-top: 1px solid #e0e0e0;
+}
+
+/* Labeled horizontal: lines + label */
+.q-divider--horizontal.q-divider--labeled .q-divider__line {
+  flex: 1;
+  border-top: 1px solid #e0e0e0;
+}
+
+.q-divider--horizontal.q-divider--labeled .q-divider__label {
+  padding: 0 12px;
+  background: white;
+  white-space: nowrap;
+}
+
+/* Inset margin */
+.q-divider--horizontal.q-divider--inset {
+  max-width: calc(100% - 72px);
+  margin-inline-start: 72px;
+}
+
+/* Vertical */
+.q-divider--vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  min-height: 100%;
+  margin: 0 8px;
+}
+
+.q-divider--vertical:not(.q-divider--labeled)::before {
+  content: "";
+  flex: 1;
+  border-left: 1px solid #e0e0e0;
+}
+
+/* Labeled vertical: lines + label */
+.q-divider--vertical.q-divider--labeled .q-divider__line {
+  border-left: 1px solid #e0e0e0;
+  height: 100%;
+}
+
+.q-divider--vertical.q-divider--labeled .q-divider__label {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  padding: 12px 0;
+  background: white;
+  white-space: nowrap;
+}
+
+/* Inset for vertical (optional – if used) */
+.q-divider--vertical.q-divider--inset {
+  margin-bottom: 8px;
+  margin-top: 8px;
+  max-height: calc(100% - 16px);
 }
 
 .q-dropdown-menu__body {
@@ -2744,6 +2911,431 @@ body *::-webkit-scrollbar-track {
   outline: none;
 }
 
+.q-container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+/* Disable max-width when fluid */
+.q-container--fluid {
+  max-width: 100%;
+}
+
+/* Breakpoint max-widths */
+@media (width >= 576px) {
+  .q-container:not(.q-container--fluid) {
+    max-width: 540px;
+  }
+}
+@media (width >= 768px) {
+  .q-container:not(.q-container--fluid) {
+    max-width: 720px;
+  }
+}
+@media (width >= 992px) {
+  .q-container:not(.q-container--fluid) {
+    max-width: 960px;
+  }
+}
+@media (width >= 1200px) {
+  .q-container:not(.q-container--fluid) {
+    max-width: 1140px;
+  }
+}
+@media (width >= 1400px) {
+  .q-container:not(.q-container--fluid) {
+    max-width: 1320px;
+  }
+}
+.q-row {
+  --q-row-gutter: 0.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: stretch;
+  margin-left: calc(-1 * var(--q-row-gutter));
+  margin-right: calc(-1 * var(--q-row-gutter));
+}
+
+.q-row > * {
+  padding: var(--q-row-gutter);
+}
+
+/* Justify variants */
+.q-row--justify-start {
+  justify-content: flex-start;
+}
+
+.q-row--justify-center {
+  justify-content: center;
+}
+
+.q-row--justify-end {
+  justify-content: flex-end;
+}
+
+.q-row--justify-between {
+  justify-content: space-between;
+}
+
+.q-row--justify-around {
+  justify-content: space-around;
+}
+
+.q-row--justify-evenly {
+  justify-content: space-evenly;
+}
+
+/* Align variants */
+.q-row--align-start {
+  align-items: flex-start;
+}
+
+.q-row--align-center {
+  align-items: center;
+}
+
+.q-row--align-end {
+  align-items: flex-end;
+}
+
+.q-row--align-baseline {
+  align-items: baseline;
+}
+
+.q-row--align-stretch {
+  align-items: stretch;
+}
+
+.q-col {
+  flex-basis: 0;
+  flex-grow: 1;
+  max-width: 100%;
+}
+
+.q-col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: none;
+}
+
+.q-col-1 {
+  flex: 0 0 8.3333333333%;
+  max-width: 8.3333333333%;
+}
+
+.q-col-2 {
+  flex: 0 0 16.6666666667%;
+  max-width: 16.6666666667%;
+}
+
+.q-col-3 {
+  flex: 0 0 25%;
+  max-width: 25%;
+}
+
+.q-col-4 {
+  flex: 0 0 33.3333333333%;
+  max-width: 33.3333333333%;
+}
+
+.q-col-5 {
+  flex: 0 0 41.6666666667%;
+  max-width: 41.6666666667%;
+}
+
+.q-col-6 {
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+
+.q-col-7 {
+  flex: 0 0 58.3333333333%;
+  max-width: 58.3333333333%;
+}
+
+.q-col-8 {
+  flex: 0 0 66.6666666667%;
+  max-width: 66.6666666667%;
+}
+
+.q-col-9 {
+  flex: 0 0 75%;
+  max-width: 75%;
+}
+
+.q-col-10 {
+  flex: 0 0 83.3333333333%;
+  max-width: 83.3333333333%;
+}
+
+.q-col-11 {
+  flex: 0 0 91.6666666667%;
+  max-width: 91.6666666667%;
+}
+
+.q-col-12 {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
+@media (width >= 600px) {
+  .q-col-sm-1 {
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  .q-col-sm-2 {
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  .q-col-sm-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .q-col-sm-4 {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  .q-col-sm-5 {
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  .q-col-sm-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .q-col-sm-7 {
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  .q-col-sm-8 {
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  .q-col-sm-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  .q-col-sm-10 {
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  .q-col-sm-11 {
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  .q-col-sm-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (width >= 960px) {
+  .q-col-md-1 {
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  .q-col-md-2 {
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  .q-col-md-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .q-col-md-4 {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  .q-col-md-5 {
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  .q-col-md-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .q-col-md-7 {
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  .q-col-md-8 {
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  .q-col-md-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  .q-col-md-10 {
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  .q-col-md-11 {
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  .q-col-md-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (width >= 1280px) {
+  .q-col-lg-1 {
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  .q-col-lg-2 {
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  .q-col-lg-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .q-col-lg-4 {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  .q-col-lg-5 {
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  .q-col-lg-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .q-col-lg-7 {
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  .q-col-lg-8 {
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  .q-col-lg-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  .q-col-lg-10 {
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  .q-col-lg-11 {
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  .q-col-lg-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (width >= 1920px) {
+  .q-col-xl-1 {
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  .q-col-xl-2 {
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  .q-col-xl-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .q-col-xl-4 {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  .q-col-xl-5 {
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  .q-col-xl-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .q-col-xl-7 {
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  .q-col-xl-8 {
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  .q-col-xl-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  .q-col-xl-10 {
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  .q-col-xl-11 {
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  .q-col-xl-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (width >= 2560px) {
+  .q-col-xxl-1 {
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
+  }
+  .q-col-xxl-2 {
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
+  }
+  .q-col-xxl-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .q-col-xxl-4 {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+  .q-col-xxl-5 {
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
+  }
+  .q-col-xxl-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .q-col-xxl-7 {
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
+  }
+  .q-col-xxl-8 {
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
+  }
+  .q-col-xxl-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  .q-col-xxl-10 {
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
+  }
+  .q-col-xxl-11 {
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
+  }
+  .q-col-xxl-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+.q-spacer {
+  flex: 1 1 0;
+}
+
 .q-icon {
   display: inline-block;
   color: var(--q-theme-primary);
@@ -2898,7 +3490,7 @@ body *::-webkit-scrollbar-track {
   border-radius: var(--border-radius);
   outline: none;
 }
-.q-list-item:hover {
+.q-list-item--selectable:hover {
   cursor: pointer;
 }
 .q-list-item:hover, .q-list-item:focus-visible, .q-list-item--highlighted {
@@ -2985,6 +3577,8 @@ body *::-webkit-scrollbar-track {
   --q-overlay-border-color: var(--q-theme-neutral-light);
   position: fixed;
   z-index: 1070;
+  max-width: calc(100vw - 1rem);
+  max-height: calc(100vh - 2rem);
 }
 .q-overlay__underlay {
   position: fixed;
@@ -3043,6 +3637,14 @@ body *::-webkit-scrollbar-track {
   border-bottom-width: 1px;
 }
 .q-overlay--independent {
+  inset: 0;
+  margin: 1rem auto;
+  width: -moz-max-content;
+  width: max-content;
+  height: -moz-max-content;
+  height: max-content;
+}
+.q-overlay--center {
   inset: 0;
   margin: auto;
   width: -moz-max-content;
@@ -3055,6 +3657,18 @@ body *::-webkit-scrollbar-track {
   --q-overlay-color: var(--q-theme-background);
   --q-overlay-border-color: var(--q-theme-neutral-dark);
 }
+.q-overlay--small {
+  width: 20rem;
+}
+.q-overlay--medium {
+  width: 32rem;
+}
+.q-overlay--large {
+  width: 50rem;
+}
+.q-overlay--xlarge {
+  width: 72rem;
+}
 
 .q-password-field__meter {
   display: flex;
@@ -3355,6 +3969,170 @@ body *::-webkit-scrollbar-track {
   margin: 1rem 0;
 }
 
+.q-sidebar {
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+  flex-direction: row;
+  min-width: 19rem;
+  max-width: 35rem;
+}
+
+.q-sidebar-anchor {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  background-color: var(--q-theme-container);
+  z-index: 10;
+}
+
+.q-sidebar__items {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.q-sidebar__item {
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 1;
+  border-radius: 0;
+  border-width: 0;
+  border-bottom-width: 1px;
+  border-bottom-color: rgb(var(--q-theme-neutral-rgb)/25%) !important;
+  font-size: 0.6rem;
+}
+.q-sidebar__item .q-icon {
+  font-size: 20px;
+}
+
+.q-sidebar__indicator {
+  position: absolute;
+  width: 2px;
+  background-color: var(--q-theme-primary-dark);
+  opacity: 0;
+  z-index: 10;
+  transition: transform 0.3s ease-in-out, height 0.3s ease-in-out, opacity 0.2s ease-in-out;
+}
+
+.q-sidebar-panel {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.q-sidebar-panel__header,
+.q-sidebar-panel__footer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem;
+}
+
+.q-sidebar-panel__title {
+  margin: 0;
+}
+
+.q-sidebar-panel__content {
+  flex: 1 1 0%;
+  overflow: auto;
+}
+
+.q-sidebar-panel__handle {
+  position: absolute;
+  top: 0;
+  width: 10px;
+  height: 100%;
+  cursor: ew-resize;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.q-sidebar-panel__handle--left {
+  left: 0;
+}
+
+.q-sidebar-panel__handle--right {
+  right: 0;
+}
+
+.q-sidebar-panel__grip {
+  width: 4px;
+  height: 24px;
+  background-color: var(--q-theme-neutral);
+  border-radius: 2px;
+}
+
+.q-sidebar--small {
+  width: 19rem;
+}
+
+.q-sidebar--medium {
+  width: 27rem;
+}
+
+.q-sidebar--large {
+  width: 35rem;
+}
+
+.q-sidebar--min-small {
+  min-width: 19rem;
+}
+
+.q-sidebar--min-medium {
+  min-width: 27rem;
+}
+
+.q-sidebar--min-large {
+  min-width: 35rem;
+}
+
+.q-sidebar--max-small {
+  max-width: 19rem;
+}
+
+.q-sidebar--max-medium {
+  max-width: 27rem;
+}
+
+.q-sidebar--max-large {
+  max-width: 35rem;
+}
+
+.q-sidebar--right {
+  right: 0;
+  flex-direction: row-reverse;
+}
+
+.q-sidebar--left .q-sidebar__indicator {
+  left: 0;
+}
+
+.q-sidebar--right .q-sidebar__indicator {
+  right: 0;
+}
+
+.q-sidebar--left .q-sidebar-panel,
+.q-sidebar--left .q-sidebar-anchor {
+  border-right-width: 1px;
+  border-right-color: rgb(var(--q-theme-neutral-rgb)/25%);
+}
+
+.q-sidebar--right .q-sidebar-panel,
+.q-sidebar--right .q-sidebar-anchor {
+  border-left-width: 1px;
+  border-left-color: rgb(var(--q-theme-neutral-rgb)/25%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .q-sidebar__indicator {
+    transition: opacity 0.2s ease-in-out;
+  }
+}
 .q-skeleton-loader__bone {
   display: inline-flex;
   width: 100%;