@quidgest/ui 0.6.2 → 0.7.0

package/dist/ui.css

@@ -228,26 +228,25 @@ summary {
 *,
 ::after,
 ::before {
-  border: 0 solid #dce3e8;
+  border: 0 solid #c4c5ca;
   outline-offset: 1px;
 }
 
 body {
   font-size: 0.9rem;
 }
-
-* {
+body * {
   scrollbar-color: #ccc #f1f1f1;
   scrollbar-width: thin;
 }
-*::-webkit-scrollbar {
+body *::-webkit-scrollbar {
   width: 7px;
 }
-*::-webkit-scrollbar-thumb {
+body *::-webkit-scrollbar-thumb {
   background-color: #ccc;
   border-radius: 0.25rem;
 }
-*::-webkit-scrollbar-track {
+body *::-webkit-scrollbar-track {
   background-color: #f1f1f1;
   border-radius: 0.25rem;
 }
@@ -425,29 +424,34 @@ body {
   z-index: 3;
 }
 
+.q-combobox__clear {
+  opacity: 0.5;
+}
+.q-combobox__clear:hover {
+  opacity: 1;
+  cursor: pointer;
+}
+
 .q-field {
   display: flex;
   flex-direction: column;
   border-radius: 0.25rem;
-}
-.q-field:focus-within {
-  outline: 2px solid rgb(var(--q-theme-primary-rgb)/0.25);
+  width: -moz-fit-content;
+  width: fit-content;
 }
 .q-field__label {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
   color: rgb(var(--q-theme-on-background-rgb)/0.8);
   line-height: 1.5;
 }
-.q-field__label[data-val-required=true]::after {
-  content: " *";
-  font-weight: 700;
-  color: var(--q-theme-danger);
-}
 .q-field__control {
   display: flex;
   align-items: center;
   height: 31.89px;
   width: 100%;
-  border-radius: 0.25rem;
+  border-radius: inherit;
   border-width: 1px;
   background-color: transparent;
   padding: 0.26rem 0.25rem;
@@ -455,6 +459,9 @@ body {
   line-height: 1.5rem;
   transition: color var(--transition-duration) var(--transition-timing-function);
 }
+.q-field__control:focus-within {
+  outline: 2px solid rgb(var(--q-theme-primary-rgb)/0.25);
+}
 .q-field__prepend, .q-field__append {
   display: flex;
   align-items: center;
@@ -462,32 +469,37 @@ body {
 .q-field__append {
   margin-left: auto;
 }
-.q-field--readonly {
+.q-field--required > .q-field__label label::after {
+  content: " *";
+  font-weight: 700;
+  color: var(--q-theme-danger);
+}
+.q-field--readonly .q-field__control {
   background-color: #eaebec;
 }
-.q-field--disabled {
+.q-field--disabled .q-field__control {
   cursor: not-allowed;
   opacity: 0.5;
 }
-.q-field--mini {
+.q-field--mini .q-field__control {
   width: 4.35rem;
 }
-.q-field--small {
+.q-field--small .q-field__control {
   width: 6.525rem;
 }
-.q-field--medium {
+.q-field--medium .q-field__control {
   width: 10.875rem;
 }
-.q-field--large {
+.q-field--large .q-field__control {
   width: 15.225rem;
 }
-.q-field--x-large {
+.q-field--x-large .q-field__control {
   width: 19.575rem;
 }
-.q-field--xx-large {
+.q-field--xx-large .q-field__control {
   width: 36.975rem;
 }
-.q-field--block {
+.q-field--block .q-field__control {
   width: 100%;
 }
 
@@ -502,6 +514,58 @@ body {
   height: 1em;
 }
 
+.q-input-group {
+  display: flex;
+  align-items: flex-end;
+}
+.q-input-group__prepend > :first-child {
+  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+.q-input-group__append > :last-child {
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+.q-input-group__prepend, .q-input-group__append {
+  display: flex;
+  align-items: flex-end;
+  height: 31.89px;
+}
+.q-input-group__prepend .q-btn, .q-input-group__append .q-btn {
+  justify-content: center;
+}
+.q-input-group__prepend > *, .q-input-group__append > * {
+  border-radius: 0;
+  min-width: 40px;
+  height: 31.89px;
+}
+.q-input-group__prepend > span, .q-input-group__append > span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.9rem;
+  border-width: 1px;
+  background-color: rgb(var(--q-theme-on-background-rgb)/0.1);
+  color: var(--q-theme-primary);
+  white-space: nowrap;
+}
+.q-input-group > * {
+  border-radius: 0;
+}
+.q-input-group > :first-child {
+  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+.q-input-group > :last-child {
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+.q-input-group > * + * {
+  margin-left: -1px;
+}
+
 .q-line-loader {
   width: 100%;
   height: 2px;
@@ -545,9 +609,6 @@ body {
   width: 100%;
   border-radius: 0.25rem;
 }
-.q-list:focus-visible {
-  outline: 2px solid rgb(var(--q-theme-primary-rgb)/0.25);
-}
 
 .q-list-item-group {
   display: flex;
@@ -896,7 +957,7 @@ body {
 .q-text-field__counter {
   display: flex;
   margin-top: 0.1rem;
-  justify-content: end;
+  justify-content: flex-end;
   color: rgb(var(--q-theme-on-background-rgb)/0.5);
 }