@quidgest/ui 0.14.4 → 0.14.5

package/README.md

@@ -4,10 +4,10 @@ Quidgest's UI framework.
 
 ## Features
 
--   A collection of customizable and reusable Vue 3 components.
--   Written in TypeScript for type safety and better developer experience.
--   Easily style components using SCSS.
--   Documentation and examples.
+- A collection of customizable and reusable Vue 3 components.
+- Written in TypeScript for type safety and better developer experience.
+- Easily style components using SCSS.
+- Documentation and examples.
 
 ## Install
 

package/dist/manifest/components.json

@@ -3,6 +3,7 @@
   "QButton",
   "QButtonGroup",
   "QButtonToggle",
+  "QCard",
   "QCheckbox",
   "QCombobox",
   "QDialog",

package/dist/ui.css

@@ -547,6 +547,138 @@ body *::-webkit-scrollbar-track {
   z-index: 3;
 }
 
+.q-card {
+  --card-base-padding: 1rem;
+  --card-padding: 1rem;
+  --card-border: 1px solid var(--q-theme-neutral-light);
+  --card-width: fit-content;
+  --card-hover: 0 5px 15px rgb(var(--q-theme-neutral-rgb) / 0.25);
+  --card-scale: 1;
+  --card-shadow: none;
+  --card-background: var(--q-theme-container);
+  min-height: 5rem;
+  min-width: 7rem;
+  border: var(--card-border);
+  border-radius: 0.25rem;
+  background-color: var(--card-background);
+  width: var(--card-width);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--card-shadow);
+  transform: scale(var(--card-scale));
+  transition: box-shadow 0.2s ease-in-out, transform 0.2s cubic-bezier(0.155, 1.105, 0.295, 1.12);
+}
+.q-card__header {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  padding-bottom: var(--card-base-padding);
+}
+.q-card__header-content {
+  display: flex;
+  gap: 0.5rem;
+  padding: var(--card-padding);
+  padding-top: var(--card-base-padding);
+  padding-bottom: 0;
+}
+.q-card__header-text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.q-card__title {
+  width: 100%;
+  margin: 0;
+  font-size: 1.05rem;
+  line-height: 1rem;
+  letter-spacing: 0.02rem;
+  font-weight: 600;
+}
+.q-card__subtitle {
+  width: 100%;
+  margin: 0;
+  font-size: 0.75rem;
+  color: var(--q-theme-neutral);
+  padding-top: 0.3rem;
+}
+.q-card__content {
+  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) / 0.15);
+}
+.q-card--elevation-medium {
+  --card-shadow: 0 6px 9px rgb(var(--q-theme-neutral-dark-rgb) / 0.2);
+}
+.q-card--elevation-high {
+  --card-shadow: 0 8px 12px rgb(var(--q-theme-neutral-dark-rgb) / 0.25);
+}
+.q-card--background {
+  --card-background: rgb(var(--q-theme-primary-light-rgb) / 0.5);
+}
+.q-card--background .q-field__control {
+  background-color: var(--q-theme-container);
+}
+.q-card--title-background .q-card__header-content {
+  background-color: rgb(var(--q-theme-neutral-light-rgb)/0.25);
+  padding-bottom: 0.75rem;
+}
+.q-card--title-background .q-card__title {
+  color: var(--q-theme-neutral-dark);
+  font-size: 1.1rem;
+  letter-spacing: unset;
+  text-transform: unset;
+  font-weight: 700;
+}
+.q-card--minor .q-card__title {
+  font-size: 0.9rem;
+  text-transform: unset;
+  font-weight: 600;
+  color: var(--q-theme-neutral);
+}
+.q-card--minor .q-card__subtitle {
+  font-size: 0.75rem;
+  color: rgb(var(--q-theme-neutral-rgb)/0.8);
+}
+.q-card--borderless {
+  --card-border: 1px solid transparent;
+}
+.q-card--clickable {
+  text-decoration: none;
+  color: inherit;
+}
+.q-card--clickable:not(.q-card--disabled) {
+  cursor: pointer;
+}
+.q-card--clickable:not(.q-card--disabled):hover {
+  --card-scale: 1.01;
+  --card-shadow: var(--card-hover);
+}
+.q-card--loading {
+  padding: 3rem 5rem;
+  justify-content: center;
+  align-items: center;
+}
+.q-card--medium {
+  --card-width: calc(3 * 5em + 2 * 0.25rem);
+}
+.q-card--large {
+  --card-width: calc(4 * 5em + 3 * 0.25rem);
+}
+.q-card--xlarge {
+  --card-width: calc(6 * 5em + 5 * 0.25rem);
+}
+.q-card--xxlarge {
+  --card-width: calc(8 * 5em + 7 * 0.25rem);
+}
+.q-card--block {
+  --card-width: 100%;
+}
+
 .q-checkbox {
   --box-size: 1.15rem;
   --icon-color: var(--q-theme-on-primary);