@winchsa/ui 0.1.3 → 0.1.5

package/dist/styles/assets/scss/styles.scss

@@ -1,246 +0,0 @@
-$font-family-custom: 'Saudi Riyal Symbol', 'Noto Sans English', 'Noto Sans Arabic', 'SA', --apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
-
-@use 'vuetify/styles' as * with ($body-font-family: $font-family-custom);
-
-@font-face {
-  font-family: 'Noto Sans English';
-  src: url('../../../fonts/NotoSans-Medium.ttf') format('woff2');
-  font-display: swap;
-  font-weight: normal;
-  letter-spacing: 0 !important;
-  unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF;
-}
-
-@font-face {
-  font-family: 'Noto Sans Arabic';
-  src: url('../../../fonts/NotoSansArabic-Medium.ttf') format('woff2');
-  font-display: swap;
-  font-weight: normal;
-  unicode-range: U+0600-06FF;
-}
-
-@font-face {
-  font-family: 'Saudi Riyal Symbol';
-  src: url('../../../fonts/saudi_riyal_symbol/saudi_riyal_symbol.eot');
-  src: url('../../../fonts/saudi_riyal_symbol/saudi_riyal_symbol.eot') format('embedded-opentype'),
-    url('../../../fonts/saudi_riyal_symbol/saudi_riyal_symbol.woff') format('woff'),
-    url('../../../fonts/saudi_riyal_symbol/saudi_riyal_symbol.ttf') format('truetype'),
-    url('../../../fonts/saudi_riyal_symbol/saudi_riyal_symbol.svg') format('svg');
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}
-
-.v-application {
-
-  &,
-  * {
-    [dir='ltr'] & {
-      font-family: 'Saudi Riyal Symbol', 'Noto Sans English', 'Noto Sans Arabic', sans-serif;
-    }
-
-    [dir='rtl'] & {
-      font-family: 'Saudi Riyal Symbol', 'Noto Sans Arabic', 'Noto Sans English', sans-serif;
-    }
-  }
-
-  .v-slide-group__next,
-  .v-tab-login .v-slide-group__prev {
-    display: none;
-  }
-
-  .v-tabs--grow .v-btn {
-    flex: 1 1 0 !important;
-    padding: 10px 0;
-    height: auto;
-  }
-
-  .app-text-field {
-    input {
-      font-size: 13px;
-      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
-      margin: 0;
-    }
-
-    .v-field--active.v-field--focused {
-      box-shadow: none !important;
-    }
-  }
-
-  .v-overlay__content {
-
-    .v-list-item:not(.v-list-item--active):hover,
-    .v-list-item:not(.v-list-item--active):focus-visible {
-      color: #000;
-      background-color: rgba(255, 194, 15, 1);
-    }
-
-    .v-list-item--variant-text .v-list-item__overlay {
-      background-color: rgba(255, 194, 15, 1);
-    }
-  }
-
-  .v-input--disabled {
-    .v-field {
-      pointer-events: none;
-      background: rgb(var(--v-disabled-background)) !important;
-      border: none !important;
-
-      &--disabled {
-        opacity: 1 !important;
-      }
-    }
-
-    .v-field__outline {
-      color: rgb(var(--v-disabled-border)) !important;
-    }
-  }
-}
-
-.v-field--active.v-field--focused {
-  box-shadow: none !important;
-}
-
-.v-breadcrumbs,
-.v-card-title {
-  font-weight: 600 !important;
-}
-
-.v-label,
-.nav-item-title,
-.v-input__details,
-.v-list-item-title,
-.v-list-item__content,
-.v-list-item-title,
-.v-card-item__content,
-.v-card-title,
-.v-card-text {
-  overflow: initial !important;
-}
-
-.v-window {
-  padding: 12px 0;
-}
-
-.text-pre-line {
-  white-space: pre-line !important;
-}
-
-.v-input__prepend,
-.v-input__append {
-  padding-top: 0 !important;
-}
-
-.hover-underline,
-%hover-underline {
-  position: relative;
-  display: inline-block;
-  cursor: pointer;
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: -3px;
-    inset-inline-start: 0;
-    width: 0;
-    height: 2px;
-    background-color: rgba(var(--v-theme-primary));
-    transition: width 0.3s ease;
-  }
-
-  &:hover {
-    &::after {
-      width: 100%;
-    }
-  }
-}
-
-.outline-none {
-  outline: none !important;
-}
-
-.v-breadcrumbs-item--link {
-  text-decoration: none !important;
-  @extend %hover-underline;
-
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-.back-btn {
-  position: absolute;
-  top: 50%;
-  inset-inline-start: 0;
-  transform: translateY(-50%);
-  background: rgb(var(--v-theme-gray-200)) !important;
-
-  &:hover {
-    background: rgb(var(--v-theme-secondary)) !important;
-    color: rgb(var(--v-theme-on-secondary)) !important;
-  }
-
-  .v-btn__overlay {
-    display: none !important;
-  }
-
-  &:active {
-    transform: translateY(-50%) !important;
-  }
-}
-
-.v-chip {
-  min-width: 96px !important;
-  text-align: center;
-  justify-content: center;
-  letter-spacing: 0 !important;
-}
-
-.v-autocomplete__selection {
-  .v-chip {
-    max-width: 100% !important;
-  }
-}
-
-.v-input__control {
-  .v-field {
-    position: relative !important;
-
-    .v-field__clearable {
-      position: absolute !important;
-      inset-inline-start: -20px !important;
-      z-index: 999 !important;
-      width: 20px !important;
-      background-color: rgb(var(--v-theme-surface));
-      top: 50% !important;
-      transform: translateY(-50%);
-    }
-  }
-}
-
-.v-input--disabled {
-  .v-field {
-    .v-field__clearable {
-      background-color: rgb(var(--v-disabled-background));
-    }
-  }
-}
-
-.v-input--disabled .v-input__control .v-field__field {
-  border: none !important;
-}
-
-.v-input--disabled .v-field .v-field__overlay {
-  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
-}
-
-.v-breadcrumbs-item {
-  padding: 0px !important;
-}
-
-.multiselect__tags {
-  padding-top: 10px !important;
-  padding-inline-start: 8px !important;
-  padding-bottom: 0 !important;
-  padding-inline-end: 40px !important;
-}

package/src/styles/@core/scss/base/_components.scss

@@ -1,164 +0,0 @@
-@use 'mixins';
-@use '../../../@layouts/styles/placeholders';
-@use '../../../assets/scss/variables/template' as variables;
-
-//  Avatar group
-.v-avatar-group {
-  display: flex;
-  align-items: center;
-
-  > * {
-    &:not(:first-child) {
-      margin-inline-start: -0.8rem;
-    }
-
-    transition: transform 0.25s ease, box-shadow 0.15s ease;
-
-    &:hover {
-      z-index: 2;
-      transform: translateY(-5px) scale(1.05);
-
-      @include mixins.elevation(3);
-    }
-  }
-
-  > .v-avatar {
-    border: 2px solid rgb(var(--v-theme-surface));
-    transition: transform 0.15s ease;
-  }
-}
-
-//  Button outline with default color border color
-.v-alert--variant-outlined,
-.v-avatar--variant-outlined,
-.v-btn.v-btn--variant-outlined,
-.v-card--variant-outlined,
-.v-chip--variant-outlined,
-.v-list-item--variant-outlined {
-  &:not([class*='text-']) {
-    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-  }
-
-  &.text-default {
-    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-  }
-}
-
-//  Custom Input
-.v-label.custom-input {
-  padding: 1rem;
-  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  opacity: 1;
-  white-space: normal;
-  height: auto;
-
-  &:hover {
-    border-color: rgba(var(--v-border-color), 0.25);
-  }
-
-  &.active {
-    border-color: rgb(var(--v-theme-primary));
-
-    .v-icon {
-      color: rgb(var(--v-theme-primary)) !important;
-    }
-  }
-}
-
-// Dialog responsive width
-.v-dialog {
-  // dialog custom close btn
-  .v-dialog-close-btn {
-    position: absolute;
-    z-index: 1;
-    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
-    inset-block-start: 0.9375rem;
-    inset-inline-end: 0.9375rem;
-
-    .v-btn__overlay {
-      display: none;
-    }
-  }
-
-  .v-card {
-    @extend %style-scroll-bar;
-  }
-}
-
-@media (min-width: 600px) {
-  .v-dialog {
-    &.v-dialog-sm,
-    &.v-dialog-lg,
-    &.v-dialog-xl {
-      .v-overlay__content {
-        inline-size: 565px !important;
-      }
-    }
-  }
-}
-
-@media (min-width: 960px) {
-  .v-dialog {
-    &.v-dialog-lg,
-    &.v-dialog-xl {
-      .v-overlay__content {
-        inline-size: 865px !important;
-      }
-    }
-  }
-}
-
-@media (min-width: 1264px) {
-  .v-dialog.v-dialog-xl {
-    .v-overlay__content {
-      inline-size: 1165px !important;
-    }
-  }
-}
-
-// v-tab with pill support
-
-.v-tabs.v-tabs-pill {
-  .v-tab.v-btn {
-    border-radius: 6px !important;
-    transition: none;
-
-    &:not(.v-tab--selected):hover {
-      background-color: rgb(var(--v-theme-gray-200));
-    }
-
-    .v-tab__slider {
-      visibility: hidden;
-    }
-  }
-}
-
-// loop for all colors bg
-@each $color-name in variables.$theme-colors-name {
-  .v-tabs.v-tabs-pill {
-    .v-slide-group-item--active.v-tab--selected.text-#{$color-name} {
-      background-color: rgb(var(--v-theme-#{$color-name}));
-      color: rgb(var(--v-theme-on-#{$color-name})) !important;
-    }
-
-    &:not(.v-tab--selected) {
-      button {
-        background-color: rgb(var(--v-theme-#{gray-100}));
-        color: rgb(var(--v-theme-on-#{gray-100})) !important;
-      }
-    }
-  }
-}
-
-.v-tabs.v-tabs-pill .v-slide-group-item--active.v-tab--selected.text-primary {
-  color: rgb(var(--v-theme-button-on-primary)) !important;
-}
-
-// ℹ️ We are make even width of all v-timeline body
-.v-timeline--vertical.v-timeline {
-  .v-timeline-item {
-    .v-timeline-item__body {
-      justify-self: stretch !important;
-    }
-  }
-}

package/src/styles/@core/scss/base/_dark.scss

@@ -1,16 +0,0 @@
-@use '../../../assets/scss/variables/template' as variables;
-
-// ————————————————————————————————————
-// * ——— Perfect Scrollbar
-// ————————————————————————————————————
-
-.v-application.v-theme--dark {
-  .ps__rail-y,
-  .ps__rail-x {
-    background-color: transparent !important;
-  }
-
-  .ps__thumb-y {
-    background-color: variables.$plugin-ps-thumb-y-dark;
-  }
-}

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

@@ -1,106 +0,0 @@
-@use '../../../assets/scss/variables/template' as variables;
-@use 'placeholders' as *;
-@use '../template/placeholders' as *;
-@use 'misc';
-@use 'mixins';
-
-$header: '.layout-navbar';
-
-@if variables.$layout-vertical-nav-navbar-is-contained {
-  $header: '.layout-navbar .navbar-content-container';
-}
-
-.layout-wrapper.layout-nav-type-vertical {
-  // SECTION  Layout Navbar
-  //  Elevated navbar
-  @if variables.$vertical-nav-navbar-style == 'elevated' {
-    // Add transition
-    #{$header} {
-      transition: padding 0.2s ease, background-color 0.18s ease;
-    }
-
-    // If navbar is contained => Add border radius to header
-    @if variables.$layout-vertical-nav-navbar-is-contained {
-      #{$header} {
-        border-radius: 0
-          0
-          variables.$default-layout-with-vertical-nav-navbar-footer-roundness
-          variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
-      }
-    }
-
-    // Scrolled styles for sticky navbar
-    @at-root {
-      /* ℹ️ This html selector with not selector is required when:
-        dialog is opened and window don't have any scroll. This removes window-scrolled class from layout and out style broke
-    */
-      html.v-overlay-scroll-blocked:not([style*='--v-body-scroll-y:0px;']) .layout-navbar-sticky,
-      &.window-scrolled.layout-navbar-sticky {
-        #{$header} {
-          @extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav;
-          @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
-        }
-
-        .navbar-blur#{$header} {
-          @extend %blurry-bg;
-        }
-      }
-    }
-  }
-
-  //  Floating navbar
-  @else if variables.$vertical-nav-navbar-style == 'floating' {
-    // ℹ️ Regardless of navbar is contained or not => Apply overlay to .layout-navbar
-    .layout-navbar {
-      &.navbar-blur {
-        @extend %default-layout-vertical-nav-floating-navbar-overlay;
-      }
-    }
-
-    &:not(.layout-navbar-sticky) {
-      #{$header} {
-        margin-block-start: variables.$vertical-nav-floating-navbar-top;
-      }
-    }
-
-    #{$header} {
-      @if variables.$layout-vertical-nav-navbar-is-contained {
-        border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
-      }
-
-      background-color: rgb(var(--v-theme-surface));
-
-      @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
-    }
-
-    .navbar-blur#{$header} {
-      @extend %blurry-bg;
-    }
-  }
-
-  // !SECTION
-
-  //  Layout footer
-  .layout-footer {
-    $ele-layout-footer: &;
-
-    .footer-content-container {
-      border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness
-        variables.$default-layout-with-vertical-nav-navbar-footer-roundness 0 0;
-
-      // Sticky footer
-      @at-root {
-        // ℹ️ .layout-footer-sticky#{$ele-layout-footer} => .layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer
-        .layout-footer-sticky#{$ele-layout-footer} {
-          .footer-content-container {
-            background-color: rgb(var(--v-theme-surface));
-            padding-block: 0;
-            padding-inline: 1.2rem;
-
-            @include mixins.elevation(3);
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,16 +0,0 @@
-@use 'placeholders';
-@use 'variables';
-
-.layout-vertical-nav,
-.layout-horizontal-nav {
-  ol,
-  ul {
-    list-style: none;
-  }
-}
-
-.layout-navbar {
-  @if variables.$navbar-high-emphasis-text {
-    @extend %layout-navbar;
-  }
-}

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

@@ -1,47 +0,0 @@
-@use 'sass:map';
-
-// Layout
-@use 'vertical-nav';
-@use 'default-layout';
-@use 'default-layout-w-vertical-nav';
-
-// Layouts package
-@use 'layouts';
-
-// Skins
-@use 'skins';
-
-// Components
-@use 'components';
-
-// Utilities
-@use 'utilities';
-
-// Route Transitions
-@use 'route-transitions';
-
-// Misc
-@use 'misc';
-
-// Dark
-@use 'dark';
-
-// libs
-@use 'libs/perfect-scrollbar';
-
-a {
-  color: rgb(var(--v-theme-blue));
-  text-decoration: none;
-  cursor: pointer;
-}
-
-// Vuetify 3 don't provide margin bottom style like vuetify 2
-p {
-  margin-block-end: 1rem;
-}
-
-// Iconify icon size
-svg.iconify {
-  block-size: 1em;
-  inline-size: 1em;
-}

package/src/styles/@core/scss/base/_layouts.scss

@@ -1,63 +0,0 @@
-@use '../../../assets/scss/variables/template' as variables;
-
-/* ℹ️ This styles extends the existing layout package's styles for handling cases that aren't related to layouts package */
-
-/*
-  ℹ️ When we use v-layout as immediate first child of `.page-content-container`, it adds display:flex and page doesn't get contained height
-*/
-// .layout-wrapper.layout-nav-type-vertical {
-//   &.layout-content-height-fixed {
-//     .page-content-container {
-//       > .v-layout:first-child > :not(.v-navigation-drawer):first-child {
-//         flex-grow: 1;
-//         block-size: 100%;
-//       }
-//     }
-//   }
-// }
-.layout-wrapper.layout-nav-type-vertical {
-  &.layout-content-height-fixed {
-    .page-content-container {
-      > .v-layout:first-child {
-        overflow: hidden;
-        min-block-size: 100%;
-
-        > .v-main {
-          // overflow-y: auto;
-
-          .v-main__wrap > :first-child {
-            block-size: 100%;
-            overflow-y: auto;
-          }
-        }
-      }
-    }
-  }
-}
-
-// ℹ️ Let div/v-layout take full height. E.g. Email App
-.layout-wrapper.layout-nav-type-horizontal {
-  &.layout-content-height-fixed {
-    > .layout-page-content {
-      display: flex;
-    }
-  }
-}
-
-//  Floating navbar styles
-@if variables.$vertical-nav-navbar-style == 'floating' {
-  // ℹ️ Add spacing above navbar if navbar is floating (was in %layout-navbar-sticky placeholder)
-  .layout-wrapper.layout-nav-type-vertical.layout-navbar-sticky {
-    .layout-navbar {
-      inset-block-start: variables.$vertical-nav-floating-navbar-top;
-    }
-
-    /*
-      ℹ️ If it's floating navbar
-      Add `vertical-nav-floating-navbar-top` as margin top to .layout-page-content
-    */
-    .layout-page-content {
-      margin-block-start: variables.$vertical-nav-floating-navbar-top;
-    }
-  }
-}

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

@@ -1,20 +0,0 @@
-// ℹ️ scrollable-content allows creating fixed header and scrollable content for VNavigationDrawer (Used when perfect scrollbar is used)
-.scrollable-content {
-  &.v-navigation-drawer {
-    .v-navigation-drawer__content {
-      display: flex;
-      overflow: hidden;
-      flex-direction: column;
-    }
-  }
-}
-
-// ℹ️ adding styling for code tag
-code {
-  border-radius: 3px;
-  color: rgb(var(--v-code-color));
-  font-size: 90%;
-  font-weight: 400;
-  padding-block: 0.2em;
-  padding-inline: 0.4em;
-}