@quidgest/ui 0.3.2 → 0.5.0

package/{lib/styles → dist}/ui.css

@@ -310,6 +310,35 @@ template {
   display: none;
 }
 
+/* global settings */
+*,
+:after,
+:before {
+  box-sizing: border-box;
+  border: 0 solid #dce3e8;
+  outline-offset: 1px;
+}
+
+body {
+  font-size: 0.9rem;
+}
+
+* {
+  scrollbar-color: #ccc #f1f1f1;
+  scrollbar-width: thin;
+}
+*::-webkit-scrollbar {
+  width: 7px;
+}
+*::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  border-radius: 0.25rem;
+}
+*::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+  border-radius: 0.25rem;
+}
+
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
@@ -322,19 +351,20 @@ template {
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.15s ease-in-out;
+  transition: opacity 0.2s;
 }
 
 /* Components */
 .q-btn {
-  --outline-color: var(--q-theme-primary);
+  --box-shadow-tint: 0 0 0;
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 0.4rem;
-  border: thin solid;
+  border-width: 1px;
   background-color: transparent;
+  color: var(--q-theme-on-background);
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -342,14 +372,13 @@ template {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 0.15s;
-  outline-offset: 1px;
   line-height: 15px;
 }
 .q-btn:hover:not(:disabled) {
   cursor: pointer;
 }
 .q-btn:focus {
-  outline: 2px solid var(--outline-color);
+  outline: 2px solid rgb(var(--q-theme-primary-rgb)/0.25);
   z-index: 3;
 }
 .q-btn:focus:not(:focus-visible) {
@@ -393,6 +422,7 @@ template {
   visibility: hidden;
 }
 .q-btn--primary {
+  --box-shadow-tint: var(--q-theme-primary-rgb);
   background-color: var(--q-theme-primary);
   border-color: var(--q-theme-primary);
   color: var(--q-theme-on-primary);
@@ -402,6 +432,7 @@ template {
   border-color: var(--q-theme-primary-dark);
 }
 .q-btn--secondary {
+  --box-shadow-tint: var(--q-theme-primary-rgb);
   border-color: currentColor;
   color: var(--q-theme-primary);
 }
@@ -411,6 +442,7 @@ template {
   color: var(--q-theme-on-primary);
 }
 .q-btn--tertiary {
+  --box-shadow-tint: var(--q-theme-primary-rgb);
   background-color: transparent;
   border-color: transparent;
   color: var(--q-theme-primary);
@@ -420,6 +452,7 @@ template {
 }
 .q-btn--danger {
   --outline-color: var(--q-theme-danger-light);
+  --box-shadow-tint: var(--q-theme-danger-rgb);
   background-color: var(--q-theme-danger);
   border-color: var(--q-theme-danger);
   color: var(--q-theme-on-danger);
@@ -428,6 +461,9 @@ template {
   background-color: var(--q-theme-danger-dark);
   border-color: var(--q-theme-danger-dark);
 }
+.q-btn--plain:hover:not(:disabled) {
+  background-color: rgb(var(--q-theme-on-background-rgb)/0.1);
+}
 .q-btn--small {
   padding: 0.25rem;
   line-height: 14px;
@@ -444,7 +480,7 @@ template {
   border-color: transparent !important;
 }
 .q-btn--elevated {
-  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 2px 4px -1px rgb(var(--box-shadow-tint)/0.2), 0px 4px 5px 0px rgb(var(--box-shadow-tint)/0.14), 0px 1px 10px 0px rgb(var(--box-shadow-tint)/0.12);
 }
 .q-btn--block {
   display: block;
@@ -497,6 +533,58 @@ template {
   height: 1em;
 }
 
+.q-input {
+  display: flex;
+  align-items: center;
+  height: 2.25rem;
+  width: 100%;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  background-color: transparent;
+  padding: 0.26rem 0.25rem;
+  font-size: 0.9rem;
+  line-height: 1.5rem;
+  transition: color var(--transition-duration) var(--transition-timing-function);
+}
+.q-input:focus-within {
+  outline: 2px solid rgb(var(--q-theme-primary-rgb)/0.25);
+}
+.q-input__prepend, .q-input__append {
+  display: flex;
+  align-items: center;
+}
+.q-input__append {
+  margin-left: auto;
+}
+.q-input--readonly {
+  background-color: #eaebec;
+}
+.q-input--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.q-input--mini {
+  width: 4.35rem;
+}
+.q-input--small {
+  width: 6.525rem;
+}
+.q-input--medium {
+  width: 10.875rem;
+}
+.q-input--large {
+  width: 15.225rem;
+}
+.q-input--x-large {
+  width: 19.575rem;
+}
+.q-input--xx-large {
+  width: 36.975rem;
+}
+.q-input--block {
+  width: 100%;
+}
+
 .q-line-loader {
   width: 100%;
   height: 2px;
@@ -527,19 +615,95 @@ template {
     transform: translateX(0%);
   }
 }
+.q-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0;
+  -webkit-overflow-scrolling: touch;
+  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;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  width: inherit;
+}
+.q-list-item-group__title {
+  color: rgb(var(--q-theme-on-background-rgb)/0.62);
+  padding: 5px 6px;
+  line-height: 15px;
+  width: inherit;
+}
+.q-list-item-group + .q-list-item-group {
+  padding-top: 0.25rem;
+  margin-top: 0.25rem;
+  border-top-width: 1px;
+}
+
+.q-list-item {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  padding: 5px 6px;
+  list-style: none;
+  line-height: 15px;
+  word-wrap: break-word;
+  -webkit-touch-callout: none;
+  width: inherit;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  outline: none;
+}
+.q-list-item--disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.5;
+}
+.q-list-item:hover, .q-list-item:focus-visible, .q-list-item--highlighted {
+  background-color: var(--q-theme-primary-light);
+}
+.q-list-item--selected {
+  background-color: rgb(var(--q-theme-primary-rgb)/0.24);
+}
+.q-list-item--selected:hover, .q-list-item--selected:focus-visible, .q-list-item--selected--highlighted {
+  background-color: rgb(var(--q-theme-primary-rgb)/0.39);
+}
+.q-list-item em {
+  font-style: normal;
+  text-decoration: underline;
+}
+.q-list-item__check {
+  margin-left: auto;
+}
+.q-list-item + .q-list-item {
+  margin-top: 1px;
+}
+
 .q-overlay {
   --q-overlay-bg: var(--q-theme-background);
   --q-overlay-color: var(--q-theme-on-background);
   --q-overlay-border-color: rgb(var(--q-theme-on-background-rgb) / 0.1);
   position: absolute;
+  z-index: 1070;
 }
 .q-overlay__content {
   display: block;
   position: relative;
-  transform: translateX(-50%);
-  width: -moz-max-content;
-  width: max-content;
-  z-index: 1070;
+  width: 100%;
   background-color: var(--q-overlay-bg);
   color: var(--q-overlay-color);
   background-clip: padding-box;
@@ -660,6 +824,70 @@ template {
   border-bottom-color: rgb(var(--q-theme-on-background-rgb)/0.04);
 }
 
+.q-select {
+  /* Icon of the selected item */
+}
+.q-select:not(.q-select--readonly) {
+  background-color: transparent;
+}
+.q-select:not(.q-select--readonly):not(.q-select--disabled) {
+  cursor: pointer;
+}
+.q-select__placeholder {
+  font-style: italic;
+  color: rgb(var(--q-theme-on-background-rgb)/0.5);
+}
+.q-select--expanded .q-select__chevron {
+  transform: rotate(-180deg);
+}
+.q-select .q-input__prepend {
+  padding-left: 6px;
+  padding-right: 0.25rem;
+}
+
+.q-select__clear,
+.q-select__chevron,
+.q-select__search-icon {
+  opacity: 0.5;
+}
+
+.q-select__clear:hover,
+.q-select__chevron:hover {
+  opacity: 1;
+}
+
+.q-select__chevron {
+  transition: all 0.2s;
+}
+
+.q-select__body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  width: 100%;
+  padding: 0.25rem 0;
+}
+.q-select__body .q-list-item {
+  width: calc(100% - 0.5rem);
+}
+
+.q-select__search {
+  width: calc(100% - 0.5rem);
+}
+.q-select__search:focus-within {
+  outline: none;
+}
+
+.q-select__items {
+  max-height: 240px;
+}
+
+.q-select__loader,
+.q-select__empty {
+  margin: 1rem 0;
+}
+
 .q-spinner-loader {
   display: flex;
   position: relative;