@quidgest/ui 0.14.14 → 0.14.15

package/dist/ui.css

@@ -298,7 +298,6 @@ body *::-webkit-scrollbar-track {
   transition: opacity 0.2s;
 }
 
-/* Internal components */
 .q-chevron {
   transition: all 0.2s;
 }
@@ -322,7 +321,6 @@ body *::-webkit-scrollbar-track {
   opacity: 1;
 }
 
-/* Components */
 .q-accordion {
   display: flex;
   flex-direction: column;
@@ -334,18 +332,20 @@ body *::-webkit-scrollbar-track {
   border-width: 1px;
   border-color: transparent;
   border-radius: var(--border-radius);
-  padding: 0.25em 0.5em;
-  line-height: 1rem;
+  padding: 0.4em 0.5em;
   font-size: 0.75rem;
+  line-height: 1;
   position: relative;
   color: var(--q-badge-text-color);
+  transition-property: color, background-color, border-color, box-shadow, text-decoration-color, fill, stroke;
+  transition-duration: 0.15s;
 }
 .q-badge__underlay {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  top: -1px;
+  left: -1px;
+  width: calc(100% + 2px);
+  height: calc(100% + 2px);
   border-radius: inherit;
   background-color: var(--q-badge-color);
   opacity: 0.1;
@@ -353,10 +353,12 @@ body *::-webkit-scrollbar-track {
 .q-badge__content {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
-  min-height: 1rem;
+  gap: 0.25em;
   z-index: 1;
 }
+.q-badge__remove .q-btn__content {
+  font-size: inherit;
+}
 .q-badge__remove.q-btn:not(:disabled) {
   padding: 0;
   border-radius: 9999px;
@@ -365,20 +367,8 @@ body *::-webkit-scrollbar-track {
 .q-badge__remove.q-btn:not(:disabled):hover {
   background-color: var(--q-badge-color);
 }
-.q-badge--clickable {
-  cursor: pointer;
-}
-.q-badge--clickable:hover {
-  color: var(--q-badge-text-hover-color, var(--q-badge-text-color));
-}
-.q-badge--clickable:hover .q-badge__underlay {
-  background-color: var(--q-badge-hover-color, var(--q-badge-color));
-}
-.q-badge--clickable:focus {
-  outline: 2px solid rgb(var(--q-theme-info-rgb)/50%);
-}
-.q-badge--clickable:focus:not(:focus-visible) {
-  outline: 0;
+.q-badge--large {
+  font-size: 0.9rem;
 }
 .q-badge--pill {
   border-radius: 9999px;
@@ -399,6 +389,21 @@ body *::-webkit-scrollbar-track {
   background-color: var(--q-badge-color);
   opacity: 1;
 }
+.q-badge--clickable {
+  cursor: pointer;
+}
+.q-badge--clickable:hover {
+  color: var(--q-badge-text-hover-color, var(--q-badge-text-color));
+}
+.q-badge--clickable:hover .q-badge__underlay {
+  background-color: var(--q-badge-hover-color, var(--q-badge-color));
+}
+.q-badge--clickable:focus {
+  outline: 2px solid rgb(var(--q-theme-info-rgb)/50%);
+}
+.q-badge--clickable:focus:not(:focus-visible) {
+  outline: 0;
+}
 .q-badge--primary {
   --q-badge-color: var(--q-theme-primary);
 }
@@ -497,34 +502,74 @@ body *::-webkit-scrollbar-track {
 }
 
 .q-badge-indicator {
+  flex-wrap: wrap;
+  place-content: center center;
+  align-items: center;
   position: absolute;
-  padding: 0.1rem 0.5em;
-  border: 0;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  padding: 0.25rem;
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0;
 }
 .q-badge-indicator__wrapper {
   position: relative;
   display: inline-flex;
+  vertical-align: middle;
+  flex-shrink: 0;
 }
 .q-badge-indicator--dot {
-  width: 1em;
-  height: 1em;
-  border-radius: 50%;
+  border-radius: 4px;
+  height: 8px;
+  min-width: 8px;
+  padding: 0;
 }
 .q-badge-indicator--top-right {
-  bottom: calc(100% - 0.5rem);
-  left: calc(100% - 0.5rem);
+  top: 0;
+  right: 0;
+  transform: scale(1) translate(50%, -50%);
+  transform-origin: 100% 0%;
 }
 .q-badge-indicator--top-left {
-  bottom: calc(100% - 0.5rem);
-  right: calc(100% - 0.5rem);
+  top: 0;
+  left: 0;
+  transform: scale(1) translate(-50%, -50%);
+  transform-origin: 0% 0%;
 }
-.q-badge-indicator--bottom-right {
-  top: calc(100% - 0.5rem);
-  left: calc(100% - 0.5rem);
+.q-badge-indicator--top-center {
+  top: 0;
+  left: 50%;
+  transform: scale(1) translate(-50%, -50%);
+  transform-origin: 50% 0%;
+}
+.q-badge-indicator--middle-left {
+  top: 50%;
+  left: 0;
+  transform: scale(1) translate(-50%, -50%);
+  transform-origin: 0% 50%;
+}
+.q-badge-indicator--middle-right {
+  top: 50%;
+  right: 0;
+  transform: scale(1) translate(50%, -50%);
+  transform-origin: 100% 50%;
 }
 .q-badge-indicator--bottom-left {
-  top: calc(100% - 0.5rem);
-  right: calc(100% - 0.5rem);
+  bottom: 0;
+  left: 0;
+  transform: scale(1) translate(-50%, 50%);
+  transform-origin: 0% 100%;
+}
+.q-badge-indicator--bottom-center {
+  bottom: 0;
+  left: 50%;
+  transform: scale(1) translate(-50%, 50%);
+  transform-origin: 50% 100%;
+}
+.q-badge-indicator--bottom-right {
+  bottom: 0;
+  right: 0;
+  transform: scale(1) translate(50%, 50%);
+  transform-origin: 100% 100%;
 }
 
 .q-btn {
@@ -533,7 +578,7 @@ body *::-webkit-scrollbar-track {
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 0.4rem;
+  padding: 0.4em;
   border-width: 1px;
   background-color: transparent;
   user-select: none;
@@ -541,7 +586,6 @@ body *::-webkit-scrollbar-track {
   -moz-user-select: none;
   border-radius: var(--border-radius);
   transition-property: color, background-color, border-color, box-shadow, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 0.15s;
 }
 .q-btn:disabled {
@@ -565,10 +609,9 @@ body *::-webkit-scrollbar-track {
   justify-content: center;
   font-size: 0.9rem;
   white-space: nowrap;
-  gap: 0.25rem;
+  gap: 0.25em;
   pointer-events: none;
-  line-height: 15px;
-  min-width: 15px;
+  line-height: 1;
 }
 .q-btn .q-spinner-loader {
   color: currentcolor;
@@ -633,12 +676,10 @@ body *::-webkit-scrollbar-track {
   visibility: hidden;
 }
 .q-btn--small {
-  padding: 0.25rem;
-  line-height: 14px;
+  padding: 0.25em;
 }
 .q-btn--small span {
   font-size: 0.75rem;
-  line-height: 14px;
 }
 .q-btn--borderless {
   border-color: transparent !important;
@@ -2985,7 +3026,7 @@ body *::-webkit-scrollbar-track {
   flex-direction: column;
   border: 1px solid rgba(0, 0, 0, 0.1);
 }
-.q-property-list-panel__container {
+.q-property-list-panel {
   padding: 0.4rem;
   display: flex;
   flex-direction: column;
@@ -2995,7 +3036,7 @@ body *::-webkit-scrollbar-track {
 .q-property-list--side-panel {
   flex-direction: row;
 }
-.q-property-list--side-panel .q-property-list-panel__container {
+.q-property-list--side-panel .q-property-list-panel {
   border-left: 1px solid rgba(0, 0, 0, 0.1);
   width: 20%;
 }