@winchsa/ui 0.1.0

package/src/styles/@core/scss/base/libs/vuetify/_overrides.scss

@@ -0,0 +1,385 @@
+@use '../../utils';
+@use '../../../../../assets/scss/variables/template' as variables;
+
+//  Application
+// ℹ️ We need accurate vh in mobile devices as well
+.v-application__wrap {
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  min-height: calc(var(--vh, 1vh) * 100);
+}
+
+//  Typography
+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));
+}
+
+//  Grid
+// Remove margin-bottom of v-input_details inside grid (validation error message)
+.v-row {
+  .v-col,
+  [class^='v-col-*'] {
+    .v-input__details {
+      margin-block-end: 0;
+    }
+  }
+}
+
+//  Button
+// Update tonal variant disabled opacity
+.v-btn--disabled {
+  opacity: 0.65;
+}
+
+@if variables.$vuetify-reduce-default-compact-button-icon-size {
+  .v-btn--density-compact.v-btn--size-default {
+    .v-btn__content > svg {
+      block-size: 22px;
+      font-size: 22px;
+      inline-size: 22px;
+    }
+  }
+}
+
+//  Card
+.v-card-subtitle {
+  color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity));
+}
+
+// Removes padding-top for immediately placed v-card-text after itself
+.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-radio,
+  &.v-radio-btn {
+    .v-selection-control__wrapper {
+      margin-inline-start: -0.5625rem;
+    }
+  }
+}
+
+.v-selection-control--density-compact {
+  &.v-radio,
+  &.v-radio-btn,
+  &.v-checkbox-btn {
+    .v-selection-control__wrapper {
+      margin-inline-start: -0.3125rem;
+    }
+  }
+}
+
+.v-selection-control--density-default {
+  &.v-checkbox-btn,
+  &.v-radio,
+  &.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;
+
+  .v-window__container {
+    block-size: auto !important;
+  }
+
+  .v-window-item:not(.v-window-item--active) {
+    display: none !important;
+  }
+
+  .v-window__container .v-window-item {
+    transform: none !important;
+  }
+}
+
+//  List
+.v-list {
+  // Set icons opacity to .87
+  .v-list-item__prepend > .v-icon,
+  .v-list-item__append > .v-icon {
+    opacity: 1;
+  }
+
+  .v-list-item:not(.v-list-item--active) {
+    &:hover {
+      background: rgb(var(--v-theme-gray-200)) !important;
+      .v-list-item__overlay {
+        opacity: 0;
+      }
+      .v-list-item__content {
+        color: rgb(var(--v-theme-on-primary)) !important;
+        .v-list-item-title {
+          color: rgb(var(--v-theme-on-primary)) !important;
+        }
+      }
+    }
+  }
+
+}
+
+//  Card list
+
+/*
+  ℹ️ 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;
+
+  &.v-list {
+    padding-block: 0;
+  }
+
+  .v-list-item {
+    min-block-size: unset;
+    min-block-size: auto !important;
+    padding-block: 0 !important;
+    padding-inline: 0 !important;
+
+    > .v-ripple__container {
+      opacity: 0;
+    }
+
+    &:not(:last-child) {
+      padding-block-end: var(--v-card-list-gap) !important;
+    }
+  }
+
+  .v-list-item:hover,
+  .v-list-item:focus,
+  .v-list-item:active,
+  .v-list-item.active {
+    > .v-list-item__overlay {
+      opacity: 0 !important;
+    }
+  }
+}
+
+//  Divider
+.v-divider {
+  color: rgb(var(--v-border-color));
+}
+
+//  DataTable
+//  DataTable
+.v-data-table {
+  /* stylelint-disable-next-line no-descending-specificity */
+  .v-checkbox-btn .v-selection-control__wrapper {
+    margin-inline-start: 0 !important;
+  }
+
+  .v-selection-control {
+    display: flex !important;
+  }
+
+  .v-pagination {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  }
+
+  font-size: 13px;
+}
+
+.v-data-table-footer {
+  margin-block-start: 1rem;
+}
+
+//  v-field
+.v-field:hover .v-field__outline {
+  --v-field-border-opacity: var(--v-medium-emphasis-opacity);
+}
+
+//  VLabel
+.v-label {
+  opacity: 1 !important;
+
+  &:not(.v-field-label--floating) {
+    color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
+  }
+}
+
+//  Overlay
+.v-overlay__scrim {
+  background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity)) !important;
+}
+
+//  VMessages
+.v-messages {
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  opacity: 1;
+}
+
+//  Alert close btn
+.v-alert__close {
+  .v-btn--icon .v-icon {
+    --v-icon-size-multiplier: 1.5;
+  }
+}
+
+//  Badge icon alignment
+.v-badge__badge {
+  display: flex;
+  align-items: center;
+}
+
+//  Btn focus outline style removed
+.v-btn:focus-visible::after {
+  opacity: 0 !important;
+}
+
+// .v-select chip spacing for slot
+.v-input:not(.v-select--chips) .v-select__selection {
+  .v-chip {
+    margin-block: 2px var(--select-chips-margin-bottom);
+  }
+}
+
+//  VCard and VList subtitle color
+.v-list-item-subtitle {
+  color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
+}
+
+
+//  placeholders
+.v-field__input {
+  height: 40px;
+  font-size: 13px !important;
+  @at-root {
+    & input::placeholder,
+    input#{&}::placeholder,
+    textarea#{&}::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;
+    .v-list-item {
+        .v-list-item-title {
+          font-size: 13px !important;
+          text-transform: capitalize !important;
+        }
+
+        &.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;
+  input {
+    margin-top: 3px !important;
+    margin-bottom: 2px !important;
+  }
+}
+
+.v-input__details {
+  min-height: 10px !important;
+  padding-top: 3px !important;
+}

package/src/styles/@core/scss/base/libs/vuetify/_variables.scss

@@ -0,0 +1,48 @@
+//  Shadow opacities
+$shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
+$shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
+$shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
+
+//  Card transition properties
+$card-transition-property-custom: box-shadow, opacity;
+
+@forward 'vuetify/settings' with (
+  //  General settings
+  $color-pack: false !default,
+
+  //  Shadow opacity
+  $shadow-key-umbra-opacity: $shadow-key-umbra-opacity-custom !default,
+  $shadow-key-penumbra-opacity: $shadow-key-penumbra-opacity-custom !default,
+  $shadow-key-ambient-opacity: $shadow-key-ambient-opacity-custom !default,
+
+  //  Card
+  $card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
+  $card-elevation: 6 !default,
+  $card-title-line-height: 1.6 !default,
+  $card-actions-min-height: unset !default,
+  $card-text-padding: 1.25rem !default,
+  $card-item-padding: 1.25rem !default,
+  $card-actions-padding: 0 12px 12px !default,
+  $card-transition-property: $card-transition-property-custom !default,
+  $card-subtitle-opacity: 1 !default,
+  $card-title-font-weight: 600 !default,
+  
+  //  Expansion Panel
+  $expansion-panel-active-title-min-height: 48px !default,
+
+  //  List
+  $list-item-icon-margin-end: 16px !default,
+  $list-item-icon-margin-start: 16px !default,
+  $list-item-subtitle-opacity: 1 !default,
+
+  //  Tooltip
+  $tooltip-background-color: rgba(59, 55, 68, 0.9) !default,
+  $tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
+  $tooltip-font-size: 0.75rem !default,
+
+  //  VTimeline
+  $timeline-dot-size: 34px !default,
+
+  //  VOverlay
+  $overlay-opacity: 1 !default
+);

package/src/styles/@core/scss/base/placeholders/_default-layout-vertical-nav.scss

@@ -0,0 +1,48 @@
+@use '../../../../assets/scss/variables/template' as variables;
+@use 'misc';
+@use '../mixins';
+
+%default-layout-vertical-nav-scrolled-sticky-elevated-nav {
+  background-color: rgb(var(--v-theme-surface));
+}
+
+%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
+  @include mixins.elevation(variables.$vertical-nav-navbar-elevation);
+
+  // If navbar is contained => Squeeze navbar content on scroll
+  @if variables.$layout-vertical-nav-navbar-is-contained {
+    padding-inline: 1.2rem;
+  }
+}
+
+%default-layout-vertical-nav-floating-navbar-overlay {
+  isolation: isolate;
+
+  &::after {
+    position: absolute;
+    z-index: -1;
+    /* stylelint-disable property-no-vendor-prefix */
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    /* stylelint-enable */
+    background: linear-gradient(
+      180deg,
+      rgba(var(--v-theme-background), 70%) 44%,
+      rgba(var(--v-theme-background), 43%) 73%,
+      rgba(var(--v-theme-background), 0%)
+    );
+    background-repeat: repeat;
+    block-size: calc(
+      variables.$layout-vertical-nav-navbar-height + variables.$vertical-nav-floating-navbar-top +
+        0.5rem
+    );
+    content: '';
+    inset-block-start: -(variables.$vertical-nav-floating-navbar-top);
+    inset-inline-end: 0;
+    inset-inline-start: 0;
+    /* stylelint-disable property-no-vendor-prefix */
+    -webkit-mask: linear-gradient(black, black 18%, transparent 100%);
+    mask: linear-gradient(black, black 18%, transparent 100%);
+    /* stylelint-enable */
+  }
+}

package/src/styles/@core/scss/base/placeholders/_default-layout.scss

@@ -0,0 +1,3 @@
+%layout-navbar {
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}

package/src/styles/@core/scss/base/placeholders/_index.scss

@@ -0,0 +1,5 @@
+@forward 'vertical-nav';
+@forward 'nav';
+@forward 'default-layout';
+@forward 'default-layout-vertical-nav';
+@forward 'misc';

package/src/styles/@core/scss/base/placeholders/_misc.scss

@@ -0,0 +1,7 @@
+%blurry-bg {
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  /* stylelint-enable */
+  background-color: rgb(var(--v-theme-surface), 0.9);
+}

package/src/styles/@core/scss/base/placeholders/_nav.scss

@@ -0,0 +1,26 @@
+@use '../mixins';
+
+// ℹ️ This is common style that needs to be applied to both navs
+%nav {
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+
+  .nav-item-title {
+    letter-spacing: 0.15px;
+  }
+
+  .nav-section-title {
+    letter-spacing: 0.4px;
+  }
+}
+
+/*
+    Active nav link styles for horizontal & vertical nav
+
+    For horizontal nav it will be only applied to top level nav items
+    For vertical nav it will be only applied to nav links (not nav groups)
+*/
+%nav-link {
+  a {
+    color: inherit;
+  }
+}

package/src/styles/@core/scss/base/placeholders/_vertical-nav.scss

@@ -0,0 +1,84 @@
+@use '../mixins';
+@use '../../../../assets/scss/variables/template' as variables;
+@use 'vuetify/lib/styles/tools/states' as vuetifyStates;
+
+%nav-header-action {
+  font-size: 1.25rem;
+}
+
+// Nav items styles (including section title)
+%vertical-nav-item {
+  margin-block: 0;
+  margin-inline: variables.$vertical-nav-horizontal-spacing;
+  padding-block: 0;
+  padding-inline: variables.$vertical-nav-horizontal-padding;
+  white-space: nowrap;
+}
+
+// This is same as `%vertical-nav-item` except section title is excluded
+%vertical-nav-item-interactive {
+  border-radius: 0.4rem;
+  block-size: 2.75rem;
+
+  /*
+    ℹ️ We will use `margin-block-end` instead of `margin-block` to give more space for shadow to appear.
+    With `margin-block`, due to small space (space gets divided between top & bottom) shadow cuts
+  */
+  margin-block-end: 0.375rem;
+}
+
+// Common styles for nav item icon styles
+// ℹ️ Nav group's children icon styles are not here (Adjusts height, width & margin)
+%vertical-nav-items-icon {
+  flex-shrink: 0;
+  font-size: variables.$vertical-nav-items-icon-size;
+  margin-inline-end: variables.$vertical-nav-items-icon-margin-inline-end;
+}
+
+// ℹ️ Icon styling for icon nested inside another nav item (2nd level)
+%vertical-nav-items-nested-icon {
+  /*
+    ℹ️ `margin-inline` will be (normal icon font-size - small icon font-size) / 2
+    (1.5rem - 0.9rem) / 2 => 0.6rem / 2 => 0.3rem
+  */
+  $vertical-nav-items-nested-icon-margin-inline: calc(
+    (variables.$vertical-nav-items-icon-size - variables.$vertical-nav-items-nested-icon-size) / 2
+  );
+
+  font-size: variables.$vertical-nav-items-nested-icon-size;
+  margin-inline-end: $vertical-nav-items-nested-icon-margin-inline +
+    variables.$vertical-nav-items-icon-margin-inline-end;
+  margin-inline-start: $vertical-nav-items-nested-icon-margin-inline;
+}
+
+%vertical-nav-items-icon-after-2nd-level {
+  visibility: hidden;
+}
+
+// Open & Active nav group styles
+%vertical-nav-group-open-active {
+  @include mixins.selected-states('&::before');
+}
+
+// Section title
+%vertical-nav-section-title {
+  // ℹ️ Setting height will prevent jerking when text & icon is toggled
+  block-size: 1.5rem;
+  color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+  font-size: 0.75rem;
+  text-transform: uppercase;
+}
+
+// Vertical nav item badge styles
+%vertical-nav-item-badge {
+  display: inline-block;
+  border-radius: 1.5rem;
+  font-size: 0.8em;
+  font-weight: 500;
+  line-height: 1;
+  padding-block: 0.25em;
+  padding-inline: 0.55em;
+  text-align: center;
+  vertical-align: baseline;
+  white-space: nowrap;
+}

package/src/styles/@core/scss/base/skins/_bordered.scss

@@ -0,0 +1,60 @@
+@use 'sass:map';
+@use '../mixins';
+@use '../../../../assets/scss/variables/template' as variables;
+@use '../utils';
+
+$header: '.layout-navbar';
+
+@if variables.$layout-vertical-nav-navbar-is-contained {
+  $header: '.layout-navbar .navbar-content-container';
+}
+
+.skin--bordered {
+  @include mixins.bordered-skin('.v-card:not(.v-card--flat)');
+  @include mixins.bordered-skin(
+    '.v-menu .v-overlay__content > .v-card, .v-menu .v-overlay__content > .v-sheet, .v-menu .v-overlay__content > .v-list'
+  );
+  @include mixins.bordered-skin('.popper-content');
+
+  // Navbar
+  // -- Horizontal
+  @include mixins.bordered-skin('.layout-navbar-and-nav-container', 'border-bottom');
+
+  // -- Vertical
+  // ℹ️ We have added `.layout-navbar-sticky` as well in selector because we don't want to add borders if navbar is static
+  @if variables.$layout-vertical-nav-navbar-is-contained {
+    @include mixins.bordered-skin(
+      '.layout-nav-type-vertical.window-scrolled.layout-navbar-sticky #{$header}'
+    );
+    .layout-nav-type-vertical.window-scrolled #{$header} {
+      border-block-start: none !important;
+    }
+  } @else {
+    @include mixins.bordered-skin(
+      '.layout-nav-type-vertical.window-scrolled.layout-navbar-sticky #{$header}',
+      'border-bottom'
+    );
+  }
+
+  // Footer
+  // -- Vertical
+  @include mixins.bordered-skin(
+    '.layout-nav-type-vertical.layout-footer-sticky .layout-footer .footer-content-container'
+  );
+
+  .layout-nav-type-vertical.layout-footer-sticky .layout-footer .footer-content-container {
+    border-block-end: none;
+  }
+
+  // -- Horizontal
+  @include mixins.bordered-skin('.layout-nav-type-horizontal.layout-footer-sticky .layout-footer');
+
+  .layout-nav-type-horizontal.layout-footer-sticky .layout-footer {
+    border-block-end: none;
+  }
+
+  // Vertical Nav
+  .layout-vertical-nav {
+    border-inline-end: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+}

package/src/styles/@core/scss/base/skins/_index.scss

@@ -0,0 +1 @@
+@use 'bordered';