@winchsa/ui 0.1.0

package/dist/styles/@core/scss/template/pages/misc.css

@@ -0,0 +1,16 @@
+.layout-blank .misc-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1.25rem;
+  min-block-size: calc(var(--vh, 1vh) * 100);
+}
+.layout-blank .misc-avatar {
+  z-index: 1;
+}
+.layout-blank .misc-footer-img {
+  position: absolute;
+  inline-size: 100%;
+  inset-block-end: 0;
+}

package/dist/styles/@core/scss/template/pages/misc.scss

@@ -0,0 +1,20 @@
+.layout-blank {
+  .misc-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 1.25rem;
+    min-block-size: calc(var(--vh, 1vh) * 100);
+  }
+
+  .misc-avatar {
+    z-index: 1;
+  }
+
+  .misc-footer-img {
+    position: absolute;
+    inline-size: 100%;
+    inset-block-end: 0;
+  }
+}

package/dist/styles/@core/scss/template/placeholders/_default-layout-vertical-nav.scss

@@ -0,0 +1,9 @@
+@use '../../../../assets/scss/variables/template' as variables;
+
+%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
+  // If navbar is contained => Squeeze navbar content on scroll
+  @if variables.$layout-vertical-nav-navbar-is-contained {
+    padding-inline-start: 12px;
+    padding-inline-end: 24px;
+  }
+}

package/dist/styles/@core/scss/template/placeholders/_index.scss

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

package/dist/styles/@core/scss/template/placeholders/_nav.scss

@@ -0,0 +1,15 @@
+// ℹ️ This is common style that needs to be applied to both navs
+%nav {
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+}
+
+/*
+    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-active {
+  background: rgb(var(--v-nav-background)) !important;
+  font-weight: 500;
+}

package/dist/styles/@core/scss/template/placeholders/_vertical-nav.scss

@@ -0,0 +1,18 @@
+// Common styles for nav item icon styles
+// ℹ️ Nav group's children icon styles are not here (Adjusts height, width & margin)
+%vertical-nav-items-icon {
+  font-size: 1.375rem;
+  margin-inline-start: 0.3rem;
+}
+
+// Vertical nav item badge styles
+%vertical-nav-item-badge {
+  line-height: 1rem;
+  margin-inline-end: 0.5rem;
+}
+
+// This is same as `%vertical-nav-item` except section title is excluded
+%vertical-nav-item-interactive {
+  block-size: 2.375rem;
+  margin-block-end: 0.25rem;
+}

package/dist/styles/@core/scss/template/skins/_bordered.scss

@@ -0,0 +1,36 @@
+@use 'sass:map';
+@use '../../base/mixins';
+@use '../../../../assets/scss/variables/template' as variables;
+
+$header: '.layout-navbar';
+
+@if variables.$layout-vertical-nav-navbar-is-contained {
+  $header: '.layout-navbar .navbar-content-container';
+}
+
+.skin--bordered {
+  // Expansion Panels
+  @include mixins.bordered-skin(
+    '.v-expansion-panels:not(.expansion-panels-width-border) .v-expansion-panel, .v-expansion-panel__shadow'
+  );
+
+  // Navbar
+
+  // -- Vertical
+  @if variables.$layout-vertical-nav-navbar-is-contained {
+    @include mixins.bordered-skin('.layout-nav-type-vertical #{$header}');
+    .layout-nav-type-vertical.window-scrolled #{$header} {
+      border-block-start: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+    }
+  } @else {
+    @include mixins.bordered-skin('.layout-nav-type-vertical #{$header}', 'border-bottom');
+  }
+
+  // Dialog close button
+  @include mixins.bordered-skin('.v-dialog-close-btn');
+
+  // Vertical Nav
+  .layout-vertical-nav {
+    box-shadow: none;
+  }
+}

package/dist/styles/@core/scss/template/skins/_index.scss

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

package/dist/styles/@layouts/styles/_classes.scss

@@ -0,0 +1,3 @@
+.cursor-pointer {
+  cursor: pointer;
+}

package/dist/styles/@layouts/styles/_dashboard-layout.scss

@@ -0,0 +1,43 @@
+// These are styles which are both common in layout w/ vertical nav & horizontal nav
+@use 'rtl';
+@use 'placeholders';
+@use 'mixins';
+@use '../../assets/scss/variables/template' as variables;
+
+html,
+body {
+  min-block-size: 100%;
+}
+
+.layout-page-content {
+  @include mixins.boxed-content(true);
+
+  flex-grow: 1;
+
+  // TODO: Use grid gutter variable here
+  padding-block: 1.5rem;
+}
+
+.layout-footer {
+  .footer-content-container {
+    block-size: variables.$layout-vertical-nav-footer-height;
+  }
+
+  .layout-footer-sticky & {
+    position: sticky;
+    inset-block-end: 0;
+    will-change: transform;
+  }
+
+  .layout-footer-hidden & {
+    display: none;
+  }
+}
+
+[dir='ltr'] [data-sonner-toaster][data-x-position='center'] {
+  left: calc(50%) !important;
+}
+
+[dir='rtl'] [data-sonner-toaster][data-x-position='center'] {
+  left: calc(50%) !important;
+}

package/dist/styles/@layouts/styles/_global.scss

@@ -0,0 +1,10 @@
+*,
+::before,
+::after {
+  box-sizing: inherit;
+  background-repeat: no-repeat;
+}
+
+html {
+  box-sizing: border-box;
+}

package/dist/styles/@layouts/styles/_mixins.scss

@@ -0,0 +1,28 @@
+@use 'placeholders';
+@use '../../assets/scss/variables/template' as variables;
+
+@mixin rtl {
+  @if variables.$enable-rtl-styles {
+    [dir='rtl'] & {
+      @content;
+    }
+  }
+}
+
+@mixin boxed-content($nest-selector: false) {
+  & {
+    @extend %boxed-content-spacing;
+
+    @at-root {
+      @if $nest-selector == false {
+        .layout-content-width-boxed#{&} {
+          @extend %boxed-content;
+        }
+      } @else {
+        .layout-content-width-boxed & {
+          @extend %boxed-content;
+        }
+      }
+    }
+  }
+}

package/dist/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/dist/styles/@layouts/styles/_rtl.scss

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

package/dist/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/dist/styles/@layouts/styles/index.css

@@ -0,0 +1,14 @@
+*,
+::before,
+::after {
+  box-sizing: inherit;
+  background-repeat: no-repeat;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}

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

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