@winchsa/ui 0.1.2 → 0.1.4

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

@@ -1,385 +0,0 @@
-@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

@@ -1,48 +0,0 @@
-//  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

@@ -1,48 +0,0 @@
-@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

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

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

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

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

@@ -1,7 +0,0 @@
-%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

@@ -1,26 +0,0 @@
-@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

@@ -1,84 +0,0 @@
-@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

@@ -1,60 +0,0 @@
-@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

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