@winchsa/ui 0.1.0

package/src/styles/@layouts/styles/_placeholders.scss

@@ -0,0 +1,53 @@
+// placeholders
+@use '../../assets/scss/variables/template' as variables;
+
+%boxed-content {
+  @at-root #{&}-spacing {
+    // TODO: Use grid gutter variable here
+    padding-inline: 1.5rem;
+  }
+
+  inline-size: 100%;
+  margin-inline: auto;
+  max-inline-size: variables.$layout-boxed-content-width;
+}
+
+%layout-navbar-hidden {
+  display: none;
+}
+
+// ℹ️ We created this placeholder even it is being used in just layout w/ vertical nav because in future we might apply style to both navbar & horizontal nav separately
+%layout-navbar-sticky {
+  position: sticky;
+  inset-block-start: 0;
+
+  // will-change: transform;
+  // inline-size: 100%;
+}
+
+%style-scroll-bar {
+  /* width */
+
+  &::-webkit-scrollbar {
+    background: rgb(var(--v-theme-surface));
+    block-size: 8px;
+    border-end-end-radius: 14px;
+    border-start-end-radius: 14px;
+    inline-size: 4px;
+  }
+
+  /* Track */
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    border-radius: 0.5rem;
+    background: rgb(var(--v-theme-silver));
+  }
+
+  &::-webkit-scrollbar-corner {
+    display: none;
+  }
+}

package/src/styles/@layouts/styles/_rtl.scss

@@ -0,0 +1,7 @@
+@use 'mixins';
+
+.layout-vertical-nav .nav-group-arrow {
+  @include mixins.rtl {
+    transform: rotate(180deg);
+  }
+}

package/src/styles/@layouts/styles/_variables.scss

@@ -0,0 +1,22 @@
+//  Vertical nav
+$layout-vertical-nav-z-index: 12 !default;
+$layout-vertical-nav-width: 260px !default;
+$layout-vertical-nav-collapsed-width: 84px !default;
+
+//  Navbar
+$layout-vertical-nav-navbar-height: 64px !default;
+$layout-vertical-nav-navbar-is-contained: true !default;
+$layout-vertical-nav-layout-navbar-z-index: 11 !default;
+$layout-horizontal-nav-layout-navbar-z-index: 11 !default;
+
+//  Main content
+$layout-boxed-content-width: 1440px !default;
+
+//  Footer
+$layout-vertical-nav-footer-height: 56px !default;
+
+//  Layout overlay
+$layout-overlay-z-index: 11 !default;
+
+//  RTL
+$enable-rtl-styles: true !default;

package/src/styles/@layouts/styles/index.scss

@@ -0,0 +1,2 @@
+@use '_global';
+@use '_classes';

package/src/styles/assets/scss/styles.scss

@@ -0,0 +1,246 @@
+$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/assets/scss/variables/_template.scss

@@ -0,0 +1 @@
+@forward '../../../@core/scss/template/variables';

package/src/styles/assets/scss/variables/_vuetify.scss

@@ -0,0 +1 @@
+@forward '../../../@core/scss/template/libs/vuetify/variables';