@winchsa/ui 0.1.0

package/dist/styles/@core/scss/template/libs/vuetify/index.css

@@ -0,0 +1,741 @@
+@charset "UTF-8";
+/*
+  TODO: Add docs on when to use placeholder vs when to use SASS variable
+
+  Placeholder
+    - When we want to keep customization to our self between templates use it
+
+  Variables
+    - When we want to allow customization from both user and our side
+    - You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header)
+*/
+/*
+    ❗ Heads up
+    ==================
+    Here we assume we will always use shorthand property which will apply same padding on four side
+    This is because this have been used as value of top property by `.popper-content`
+*/
+.text-xs {
+  font-size: 0.6875rem;
+  line-height: 0.9375rem;
+}
+
+.text-sm {
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+}
+
+.text-base {
+  font-size: 0.9375rem;
+  line-height: 1.3125rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+}
+
+.text-xl {
+  font-size: 1.375rem;
+  line-height: 1.875rem;
+}
+
+.text-2xl {
+  font-size: 1.625rem;
+  line-height: 2.25rem;
+}
+
+.text-3xl {
+  font-size: 2rem;
+  line-height: 2.75rem;
+}
+
+.text-4xl {
+  font-size: 2.375rem;
+  line-height: 3.25rem;
+}
+
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
+.text-6xl {
+  font-size: 3.5rem;
+  line-height: 1;
+}
+
+.text-7xl {
+  font-size: 4rem;
+  line-height: 1;
+}
+
+.text-8xl {
+  font-size: 4.5rem;
+  line-height: 1;
+}
+
+.text-9xl {
+  font-size: 5.25rem;
+  line-height: 1;
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gap-0 {
+  gap: 0;
+}
+
+.gap-x-0 {
+  column-gap: 0;
+}
+
+.gap-y-0 {
+  row-gap: 0;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+
+.gap-x-1 {
+  column-gap: 0.25rem;
+}
+
+.gap-y-1 {
+  row-gap: 0.25rem;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-x-2 {
+  column-gap: 0.5rem;
+}
+
+.gap-y-2 {
+  row-gap: 0.5rem;
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.gap-x-3 {
+  column-gap: 0.75rem;
+}
+
+.gap-y-3 {
+  row-gap: 0.75rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.gap-x-4 {
+  column-gap: 1rem;
+}
+
+.gap-y-4 {
+  row-gap: 1rem;
+}
+
+.gap-5 {
+  gap: 1.25rem;
+}
+
+.gap-x-5 {
+  column-gap: 1.25rem;
+}
+
+.gap-y-5 {
+  row-gap: 1.25rem;
+}
+
+.gap-6 {
+  gap: 1.5rem;
+}
+
+.gap-x-6 {
+  column-gap: 1.5rem;
+}
+
+.gap-y-6 {
+  row-gap: 1.5rem;
+}
+
+.gap-7 {
+  gap: 1.75rem;
+}
+
+.gap-x-7 {
+  column-gap: 1.75rem;
+}
+
+.gap-y-7 {
+  row-gap: 1.75rem;
+}
+
+.gap-8 {
+  gap: 2rem;
+}
+
+.gap-x-8 {
+  column-gap: 2rem;
+}
+
+.gap-y-8 {
+  row-gap: 2rem;
+}
+
+.gap-9 {
+  gap: 2.25rem;
+}
+
+.gap-x-9 {
+  column-gap: 2.25rem;
+}
+
+.gap-y-9 {
+  row-gap: 2.25rem;
+}
+
+.gap-10 {
+  gap: 2.5rem;
+}
+
+.gap-x-10 {
+  column-gap: 2.5rem;
+}
+
+.gap-y-10 {
+  row-gap: 2.5rem;
+}
+
+.gap-11 {
+  gap: 2.75rem;
+}
+
+.gap-x-11 {
+  column-gap: 2.75rem;
+}
+
+.gap-y-11 {
+  row-gap: 2.75rem;
+}
+
+.gap-12 {
+  gap: 3rem;
+}
+
+.gap-x-12 {
+  column-gap: 3rem;
+}
+
+.gap-y-12 {
+  row-gap: 3rem;
+}
+
+.gap-14 {
+  gap: 3.5rem;
+}
+
+.gap-x-14 {
+  column-gap: 3.5rem;
+}
+
+.gap-y-14 {
+  row-gap: 3.5rem;
+}
+
+.gap-16 {
+  gap: 4rem;
+}
+
+.gap-x-16 {
+  column-gap: 4rem;
+}
+
+.gap-y-16 {
+  row-gap: 4rem;
+}
+
+.gap-20 {
+  gap: 5rem;
+}
+
+.gap-x-20 {
+  column-gap: 5rem;
+}
+
+.gap-y-20 {
+  row-gap: 5rem;
+}
+
+.gap-24 {
+  gap: 6rem;
+}
+
+.gap-x-24 {
+  column-gap: 6rem;
+}
+
+.gap-y-24 {
+  row-gap: 6rem;
+}
+
+.gap-28 {
+  gap: 7rem;
+}
+
+.gap-x-28 {
+  column-gap: 7rem;
+}
+
+.gap-y-28 {
+  row-gap: 7rem;
+}
+
+.gap-32 {
+  gap: 8rem;
+}
+
+.gap-x-32 {
+  column-gap: 8rem;
+}
+
+.gap-y-32 {
+  row-gap: 8rem;
+}
+
+.gap-36 {
+  gap: 9rem;
+}
+
+.gap-x-36 {
+  column-gap: 9rem;
+}
+
+.gap-y-36 {
+  row-gap: 9rem;
+}
+
+.gap-40 {
+  gap: 10rem;
+}
+
+.gap-x-40 {
+  column-gap: 10rem;
+}
+
+.gap-y-40 {
+  row-gap: 10rem;
+}
+
+.gap-44 {
+  gap: 11rem;
+}
+
+.gap-x-44 {
+  column-gap: 11rem;
+}
+
+.gap-y-44 {
+  row-gap: 11rem;
+}
+
+.gap-48 {
+  gap: 12rem;
+}
+
+.gap-x-48 {
+  column-gap: 12rem;
+}
+
+.gap-y-48 {
+  row-gap: 12rem;
+}
+
+.gap-52 {
+  gap: 13rem;
+}
+
+.gap-x-52 {
+  column-gap: 13rem;
+}
+
+.gap-y-52 {
+  row-gap: 13rem;
+}
+
+.gap-56 {
+  gap: 14rem;
+}
+
+.gap-x-56 {
+  column-gap: 14rem;
+}
+
+.gap-y-56 {
+  row-gap: 14rem;
+}
+
+.gap-60 {
+  gap: 15rem;
+}
+
+.gap-x-60 {
+  column-gap: 15rem;
+}
+
+.gap-y-60 {
+  row-gap: 15rem;
+}
+
+.gap-64 {
+  gap: 16rem;
+}
+
+.gap-x-64 {
+  column-gap: 16rem;
+}
+
+.gap-y-64 {
+  row-gap: 16rem;
+}
+
+.gap-72 {
+  gap: 18rem;
+}
+
+.gap-x-72 {
+  column-gap: 18rem;
+}
+
+.gap-y-72 {
+  row-gap: 18rem;
+}
+
+.gap-80 {
+  gap: 20rem;
+}
+
+.gap-x-80 {
+  column-gap: 20rem;
+}
+
+.gap-y-80 {
+  row-gap: 20rem;
+}
+
+.gap-96 {
+  gap: 24rem;
+}
+
+.gap-x-96 {
+  column-gap: 24rem;
+}
+
+.gap-y-96 {
+  row-gap: 24rem;
+}
+
+.list-none {
+  list-style-type: none;
+}
+
+.v-application__wrap {
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  min-height: calc(var(--vh, 1vh) * 100);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.text-h1,
+.text-h2,
+.text-h3,
+.text-h4,
+.text-h5,
+.text-h6,
+.text-button,
+.text-overline,
+.v-card-title {
+  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+}
+
+.v-application,
+.text-body-1,
+.text-body-2,
+.text-subtitle-1,
+.text-subtitle-2 {
+  color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
+}
+
+.v-row .v-col .v-input__details,
+.v-row [class^="v-col-*"] .v-input__details {
+  margin-block-end: 0;
+}
+
+.v-btn--disabled {
+  opacity: 0.65;
+}
+
+.v-btn--density-compact.v-btn--size-default .v-btn__content > svg {
+  block-size: 22px;
+  font-size: 22px;
+  inline-size: 22px;
+}
+
+.v-card-subtitle {
+  color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity));
+}
+
+.v-card-text + .v-card-text {
+  padding-block-start: 0 !important;
+}
+
+/*
+   Checkbox & Radio Ripple
+
+  TODO Checkbox and switch component. Remove it when vuetify resolve the extra spacing: https://github.com/vuetifyjs/vuetify/issues/15519
+  We need this because form elements likes checkbox and switches are by default set to height of textfield height which is way big than we want
+  Tested with checkbox & switches
+*/
+.v-checkbox.v-input,
+.v-switch.v-input {
+  --v-input-control-height: auto;
+  flex: unset;
+}
+
+.v-selection-control--density-comfortable.v-checkbox-btn .v-selection-control__wrapper, .v-selection-control--density-comfortable.v-radio .v-selection-control__wrapper, .v-selection-control--density-comfortable.v-radio-btn .v-selection-control__wrapper {
+  margin-inline-start: -0.5625rem;
+}
+
+.v-selection-control--density-compact.v-radio .v-selection-control__wrapper, .v-selection-control--density-compact.v-radio-btn .v-selection-control__wrapper, .v-selection-control--density-compact.v-checkbox-btn .v-selection-control__wrapper {
+  margin-inline-start: -0.3125rem;
+}
+
+.v-selection-control--density-default.v-checkbox-btn .v-selection-control__wrapper, .v-selection-control--density-default.v-radio .v-selection-control__wrapper, .v-selection-control--density-default.v-radio-btn .v-selection-control__wrapper {
+  margin-inline-start: -0.6875rem;
+}
+
+.v-radio-group .v-selection-control-group .v-radio:not(:last-child) {
+  margin-inline-end: 0.9rem;
+}
+
+/*
+   Tabs
+  Disable tab transition
+
+  This is for tabs where we don't have card wrapper to tabs and have multiple cards as tab content.
+
+  This class will disable transition and adds `overflow: unset` on `VWindow` to allow spreading shadow
+*/
+.disable-tab-transition {
+  overflow: unset !important;
+}
+.disable-tab-transition .v-window__container {
+  block-size: auto !important;
+}
+.disable-tab-transition .v-window-item:not(.v-window-item--active) {
+  display: none !important;
+}
+.disable-tab-transition .v-window__container .v-window-item {
+  transform: none !important;
+}
+
+.v-list .v-list-item__prepend > .v-icon,
+.v-list .v-list-item__append > .v-icon {
+  opacity: 1;
+}
+.v-list .v-list-item:not(.v-list-item--active):hover {
+  background: rgb(var(--v-theme-gray-200)) !important;
+}
+.v-list .v-list-item:not(.v-list-item--active):hover .v-list-item__overlay {
+  opacity: 0;
+}
+.v-list .v-list-item:not(.v-list-item--active):hover .v-list-item__content {
+  color: rgb(var(--v-theme-on-primary)) !important;
+}
+.v-list .v-list-item:not(.v-list-item--active):hover .v-list-item__content .v-list-item-title {
+  color: rgb(var(--v-theme-on-primary)) !important;
+}
+
+/*
+  ℹ️ Custom class
+
+  Remove list spacing inside card
+
+  This is because card title gets padding of 20px and list item have padding of 16px. Moreover, list container have padding-bottom as well.
+*/
+.card-list {
+  --v-card-list-gap: 20px;
+}
+.card-list.v-list {
+  padding-block: 0;
+}
+.card-list .v-list-item {
+  min-block-size: unset;
+  min-block-size: auto !important;
+  padding-block: 0 !important;
+  padding-inline: 0 !important;
+}
+.card-list .v-list-item > .v-ripple__container {
+  opacity: 0;
+}
+.card-list .v-list-item:not(:last-child) {
+  padding-block-end: var(--v-card-list-gap) !important;
+}
+.card-list .v-list-item:hover > .v-list-item__overlay,
+.card-list .v-list-item:focus > .v-list-item__overlay,
+.card-list .v-list-item:active > .v-list-item__overlay,
+.card-list .v-list-item.active > .v-list-item__overlay {
+  opacity: 0 !important;
+}
+
+.v-divider {
+  color: rgb(var(--v-border-color));
+}
+
+.v-data-table {
+  /* stylelint-disable-next-line no-descending-specificity */
+  font-size: 13px;
+}
+.v-data-table .v-checkbox-btn .v-selection-control__wrapper {
+  margin-inline-start: 0 !important;
+}
+.v-data-table .v-selection-control {
+  display: flex !important;
+}
+.v-data-table .v-pagination {
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+}
+
+.v-data-table-footer {
+  margin-block-start: 1rem;
+}
+
+.v-field:hover .v-field__outline {
+  --v-field-border-opacity: var(--v-medium-emphasis-opacity);
+}
+
+.v-label {
+  opacity: 1 !important;
+}
+.v-label:not(.v-field-label--floating) {
+  color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
+}
+
+.v-overlay__scrim {
+  background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity)) !important;
+}
+
+.v-messages {
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  opacity: 1;
+}
+
+.v-alert__close .v-btn--icon .v-icon {
+  --v-icon-size-multiplier: 1.5;
+}
+
+.v-badge__badge {
+  display: flex;
+  align-items: center;
+}
+
+.v-btn:focus-visible::after {
+  opacity: 0 !important;
+}
+
+.v-input:not(.v-select--chips) .v-select__selection .v-chip {
+  margin-block: 2px var(--select-chips-margin-bottom);
+}
+
+.v-list-item-subtitle {
+  color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
+}
+
+.v-field__input {
+  height: 40px;
+  font-size: 13px !important;
+}
+.v-field__input input::placeholder,
+input.v-field__input::placeholder,
+textarea.v-field__input::placeholder {
+  color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
+  opacity: 1 !important;
+}
+
+.v-autocomplete--multiple .v-field__input {
+  height: auto;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.app-autocomplete__content,
+.app-inner-list,
+.v-autocomplete__content {
+  box-shadow: 0 0px 9px rgba(var(--v-shadow-key-umbra-color), 0.3), 0 0 transparent, 0 0 transparent !important;
+}
+.app-autocomplete__content .v-list-item .v-list-item-title,
+.app-inner-list .v-list-item .v-list-item-title,
+.v-autocomplete__content .v-list-item .v-list-item-title {
+  font-size: 13px !important;
+  text-transform: capitalize !important;
+}
+.app-autocomplete__content .v-list-item.v-list-item--active,
+.app-inner-list .v-list-item.v-list-item--active,
+.v-autocomplete__content .v-list-item.v-list-item--active {
+  background: rgb(var(--v-nav-background)) !important;
+  color: rgb(var(--v-theme-on-primary)) !important;
+}
+
+.v-card--variant-elevated {
+  box-shadow: 0 0 18px rgba(var(--v-shadow-key-umbra-color), 0.12), 0 0 transparent, 0 0 transparent !important;
+}
+
+.otp-input .v-field__input {
+  direction: ltr !important;
+}
+
+.v-input--disabled .v-input__control .v-field__field {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+  border-radius: inherit !important;
+}
+
+.v-messages[role=alert] {
+  color: rgb(var(--v-theme-error)) !important;
+}
+
+.v-input--disabled .v-input__details {
+  opacity: 1 !important;
+}
+
+.v-field__input {
+  padding-top: 2px !important;
+  padding-bottom: 2px !important;
+}
+.v-field__input input {
+  margin-top: 3px !important;
+  margin-bottom: 2px !important;
+}
+
+.v-input__details {
+  min-height: 10px !important;
+  padding-top: 3px !important;
+}

package/dist/styles/@core/scss/template/libs/vuetify/index.scss

@@ -0,0 +1 @@
+@use '../../../base/libs/vuetify';