@amirjalili1374/ui-kit 1.2.0

package/src/scss/components/_VStepper.scss

@@ -0,0 +1,235 @@
+// Variables
+$stepper-header-height: 80px;
+$stepper-badge-size: 25px;
+$stepper-connector-width: 35px;
+$stepper-border-radius: 12px;
+$stepper-shadow: 0 2px 8px rgba(0,0,0,0.04);
+
+// Root container
+.app-stepper-root {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  direction: rtl;
+}
+
+// Header section
+.app-stepper-header-card {
+  background: rgb(var(--v-theme-surface));
+  border: 1px solid rgb(var(--v-theme-borderLight));
+  border-radius: $stepper-border-radius;
+  box-shadow: $stepper-shadow;
+  margin-bottom: 20px;
+  padding: 0 8px;
+  width: 100%;
+  min-height: $stepper-header-height;
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+}
+
+.app-stepper-header {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 16px;
+  flex-wrap: nowrap;
+  padding: 17px 0;
+  overflow-x: auto;
+  white-space: nowrap;
+  scrollbar-width: thin;
+  scrollbar-color: #bdbdbd #f5f5f5;
+  width: 100%;
+
+  // Scrollbar styling
+  &::-webkit-scrollbar {
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgb(var(--v-theme-borderLight));
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgb(var(--v-theme-lightprimary));
+  }
+}
+
+// Step styling
+.app-stepper-step {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 8px;
+  cursor: pointer;
+  transition: background 0.2s;
+  border-radius: 4px;
+
+  // Step states
+  &.active {
+    .app-stepper-title {
+      color: rgb(var(--v-theme-secondary));
+      font-weight: 700;
+      text-shadow: 0 1px 4px rgba(var(--v-theme-secondary), 0.08);
+    }
+  }
+
+  &.resolved {
+    .app-stepper-title {
+      color: rgb(var(--v-theme-success));
+      font-weight: 500;
+      opacity: 0.85;
+    }
+  }
+
+  &.pending {
+    .app-stepper-title {
+      color: rgb(var(--v-theme-lightText));
+      font-weight: 400;
+    }
+  }
+}
+
+// Badge styling
+.app-stepper-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $stepper-badge-size;
+  height: $stepper-badge-size;
+  border-radius: 50%;
+  margin-left: 6px;
+  margin-right: 6px;
+  font-size: 14px;
+  background: rgb(var(--v-theme-borderLight));
+  color: rgb(var(--v-theme-lightText));
+  border: 2px solid rgb(var(--v-theme-borderLight));
+  transition: background 0.3s, color 0.3s, border 0.3s;
+}
+
+// Badge states
+.badge-resolved {
+  background: rgb(var(--v-theme-success));
+  color: #fff;
+  border-color: rgb(var(--v-theme-success));
+}
+
+.badge-active {
+  background: rgb(var(--v-theme-surface));
+  color: rgb(var(--v-theme-secondary));
+  border-color: rgb(var(--v-theme-secondary));
+  box-shadow: 0 0 0 2px rgba(var(--v-theme-secondary), 0.2);
+}
+
+.badge-pending {
+  background: rgb(var(--v-theme-borderLight));
+  color: rgb(var(--v-theme-lightText));
+  border-color: rgb(var(--v-theme-borderLight));
+}
+
+// Title styling
+.app-stepper-title {
+  font-size: 15px;
+  font-weight: 500;
+  margin-left: 2px;
+  margin-right: 2px;
+  transition: color 0.3s, font-weight 0.3s;
+  display: flex;
+  align-items: center;
+  min-width: 60px;
+}
+
+// Connector styling
+.app-stepper-connector {
+  display: inline-block;
+  width: $stepper-connector-width;
+  height: 3px;
+  background: rgb(var(--v-theme-borderLight));
+  margin: 0 12px 0 0;
+  border-radius: 2px;
+  transition: background 0.3s;
+
+  &.active {
+    background: rgb(var(--v-theme-secondary));
+  }
+
+  &.resolved {
+    background: rgb(var(--v-theme-success));
+  }
+}
+
+// Content section
+.app-stepper-content {
+  flex: 1 1 0;
+  width: 100%;
+  overflow-y: auto;
+  min-height: 60vh;
+}
+
+// Actions section
+.app-stepper-actions {
+  width: 100%;
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 20px 16px 16px 16px;
+  background: rgb(var(--v-theme-surface));
+  border-top: 1px solid rgb(var(--v-theme-borderLight));
+  border-radius: 0 0 $stepper-border-radius $stepper-border-radius;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
+  position: relative;
+  z-index: 2;
+}
+
+// Button styling
+.app-stepper-btn {
+  min-width: 110px;
+  padding: 8px 18px;
+  font-size: 15px;
+  border: none;
+  border-radius: 6px;
+  background: rgb(var(--v-theme-lightprimary));
+  color: rgb(var(--v-theme-darkText));
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+  font-weight: 500;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
+
+  &:disabled {
+    background: rgb(var(--v-theme-borderLight));
+    color: rgb(var(--v-theme-lightText));
+    cursor: not-allowed;
+  }
+
+  &-submit {
+    background: rgb(var(--v-theme-success));
+    color: #fff;
+
+    &.loading {
+      opacity: 0.7;
+      pointer-events: none;
+    }
+  }
+
+  &-custom {
+    background: rgb(var(--v-theme-secondary));
+    color: #fff;
+  }
+}
+
+// Responsive styles
+@media (max-width: 600px) {
+  .app-stepper-actions {
+    flex-direction: column;
+    gap: 10px;
+    padding: 16px 8px 8px 8px;
+  }
+
+  .app-stepper-btn {
+    width: 100%;
+    min-width: 0;
+  }
+}

package/src/scss/components/_VTabs.scss

@@ -0,0 +1,11 @@
+.theme-tab {
+  &.v-tabs {
+    .v-tab {
+      border-radius: $border-radius-root !important;
+      min-width: auto !important;
+      &.v-tab-item--selected {
+        background: rgb(var(--v-theme-primary));
+      }
+    }
+  }
+}

package/src/scss/components/_VTextField.scss

@@ -0,0 +1,40 @@
+.v-text-field input {
+  font-size: 0.85rem;
+}
+
+/* Smaller font size for outlined inputs */
+.v-field--variant-outlined .v-field__input {
+  font-size: 0.85rem;
+}
+
+.v-field--variant-outlined .v-label {
+  font-size: 0.85rem;
+}
+.v-input--density-default {
+  .v-field__input {
+    min-height: 51px;
+  }
+}
+
+.v-field__outline {
+  color: rgb(var(--v-theme-inputBorder));
+}
+.inputWithbg {
+  .v-field--variant-outlined {
+    background-color: rgba(0, 0, 0, 0.025);
+    border-radius: 12px !important;
+  }
+}
+
+/* Hide spinner buttons in number inputs */
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}

package/src/scss/components/_approval.scss

@@ -0,0 +1,128 @@
+// Global approval section styles
+.approval-section {
+  background: rgb(var(--v-theme-surface));
+  border: 1px solid rgb(var(--v-theme-borderLight));
+  border-radius: 10px;
+  padding: 25px 15px;
+  margin-bottom: 10px;
+  width: 100%;
+  max-width: 100%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+  }
+
+  .section-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: rgb(var(--v-theme-darkText));
+  }
+
+  .group-title {
+    color: rgb(var(--v-theme-darkText));
+    font-weight: 700;
+    margin-bottom: 20px;
+    font-size: 1.2rem;
+    padding-bottom: 8px;
+    border-bottom: 2px solid rgb(var(--v-theme-primary));
+    display: inline-block;
+  }
+
+  .section-content {
+    min-height: 300px;
+  }
+
+  .approval-table {
+    width: 100%;
+    max-width: 100%;
+    border-radius: 10px;
+    padding: 15px;
+  }
+}
+
+// Theme-aware table styles
+:deep(th) {
+  background: rgb(var(--v-theme-lightprimary)) !important;
+  color: rgb(var(--v-theme-darkText)) !important;
+  font-weight: 600;
+}
+
+:deep(.v-data-table__wrapper) {
+  background: rgb(var(--v-theme-surface));
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgb(var(--v-theme-borderLight));
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+:deep(.v-data-table__tbody tr:nth-child(even)) {
+  background: rgb(var(--v-theme-lightprimary)) !important;
+}
+
+:deep(.v-data-table__tbody tr:nth-child(odd)) {
+  background: rgb(var(--v-theme-surface)) !important;
+}
+
+:deep(.v-data-table__tbody tr:hover) {
+  background: rgb(var(--v-theme-lightsecondary)) !important;
+}
+
+// Theme-aware form field styles
+:deep(.v-text-field .v-field) {
+  background: rgb(var(--v-theme-surface));
+  border-color: rgb(var(--v-theme-borderLight));
+  transition: border-color 0.2s ease;
+}
+
+:deep(.v-text-field .v-field:hover) {
+  border-color: rgb(var(--v-theme-secondary));
+}
+
+:deep(.v-select .v-field) {
+  background: rgb(var(--v-theme-surface));
+  border-color: rgb(var(--v-theme-borderLight));
+  transition: border-color 0.2s ease;
+}
+
+:deep(.v-select .v-field:hover) {
+  border-color: rgb(var(--v-theme-secondary));
+}
+
+// Theme-aware button styles
+:deep(.v-btn--variant-outlined) {
+  border-color: rgb(var(--v-theme-borderLight));
+  color: rgb(var(--v-theme-darkText));
+}
+
+:deep(.v-btn--variant-outlined:hover) {
+  background: rgb(var(--v-theme-lightsecondary));
+}
+
+// Utility classes
+.customer-search-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.gap-2 {
+  gap: 8px;
+}
+
+.gap-2 {
+  gap: 8px;
+}
+
+@media (forced-colors: active) {
+  .v-btn {
+    forced-color-adjust: none;
+  }
+
+  .v-text-field {
+    forced-color-adjust: none;
+  }
+} 

package/src/scss/layout/_container.scss

@@ -0,0 +1,147 @@
+html {
+  overflow-y: auto;
+}
+
+:root {
+  --font-theme: 'vazir', sans-serif; /* Default font */
+}
+.v-tab {
+  height: calc(30vh);
+}
+@media (max-width: 1279px) {
+  .v-main {
+    margin: 0 10px;
+  }
+}
+.spacer {
+  padding: 100px 0;
+}
+@media (max-width: 800px) {
+  .spacer {
+    padding: 40px 0;
+  }
+}
+
+.page-wrapper {
+  min-height: calc(100vh - 100px);
+  padding: 15px;
+  border-radius: $border-radius-root;
+  background: rgb(var(--v-theme-containerBg));
+}
+
+.customizer-loading {
+  backdrop-filter: blur(10px);
+}
+$sizes: (
+        'display-1': 44px,
+        'display-2': 40px,
+        'display-3': 30px,
+        'h1': 36px,
+        'h2': 30px,
+        'h3': 21px,
+        'h4': 18px,
+        'h5': 16px,
+        'h6': 14px,
+        'text-8': 8px,
+        'text-10': 10px,
+        'text-13': 13px,
+        'text-18': 18px,
+        'text-20': 20px,
+        'text-24': 24px,
+        'body-text-1': 10px
+);
+
+@each $pixel, $size in $sizes {
+  .#{$pixel} {
+    font-size: $size;
+    line-height: $size + 10;
+  }
+}
+
+.customizer-btn {
+  position: fixed;
+  top: 9%;
+  left: 0;
+  border-radius: 0 20px 20px 20px ;
+
+}
+
+.text-white {
+  color: rgb(255, 255, 255) !important;
+}
+
+// font family
+
+@font-face {
+  font-family: 'yekanLight';
+  src: url('/src/assets/fonts/BYekan.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'iranSans';
+  src: url('/src/assets/fonts/IRANSansWeb.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'kalamehLight';
+  src: url('/src/assets/fonts/kalamehRegular.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'vazir';
+  src: url('/src/assets/fonts/Vazir-Medium-FD.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'IranNastaliq';
+  src: url('/src/assets/fonts/IranNastaliq.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Massir';
+  src: url('/src/assets/fonts/A Massir Spray.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+body {
+  font-family: var(--font-theme), sans-serif;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes bounce {
+  0%,
+  20%,
+  53%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform: translateZ(0);
+  }
+  40%,
+  43% {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -5px, 0);
+  }
+  70% {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -7px, 0);
+  }
+  80% {
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform: translateZ(0);
+  }
+  90% {
+    transform: translate3d(0, -2px, 0);
+  }
+}

package/src/scss/layout/_sidebar.scss

@@ -0,0 +1,138 @@
+/* This is for the logo */
+.leftSidebar {
+  border: 0;
+  box-shadow: none !important;
+
+  .logo {
+    padding-left: 7px;
+  }
+}
+
+/* This is for the Vertical sidebar */
+.scrollnavbar {
+  height: calc(100vh - 100px);
+  overflow-y: auto; 
+  overflow-x: hidden;
+
+  .smallCap {
+    padding: 0 0 0 4px !important;
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .v-list {
+    color: rgb(var(--v-theme-lightText));
+  }
+
+  /* General Menu css */
+  .v-list-group__items .v-list-item,
+  .v-list-item {
+    border-radius: $border-radius-root;
+    padding-inline-start: calc(12px + var(--indent-padding) / 2) !important;
+    transition: background-color 0.3s ease, color 0.3s ease; // ✅ Smooth transitions
+
+    &:hover {
+      color: rgb(var(--v-theme-secondary));
+      background-color: rgba(var(--v-theme-secondary), 0.05); // ✅ Smooth background on hover
+    }
+
+    .v-list-item__prepend {
+      margin-inline-end: 13px;
+    }
+
+    .v-list-item__append {
+      font-size: 0.875rem;
+    }
+
+    .v-list-item-title {
+      font-size: 0.875rem;
+    }
+  }
+
+  .leftPadding {
+    margin-left: 4px;
+  }
+
+  /* This is for the dropdown */
+  .v-list {
+    .v-list-item--active {
+      transition: background-color 0.8s ease, color 0.8s ease; // ✅ Smooth transitions
+      background-color: rgba(var(--v-theme-secondary), 0.05); // ✅ Active background color
+      .v-list-item-title {
+        font-weight: 500;
+      }
+    }
+
+
+
+    .v-list-group {
+      background-color: rgba(var(--v-theme-secondary), 0.02);
+      .v-list-item:hover > .v-list-item__overlay,
+      .v-list-item--active > .v-list-item__overlay {
+        background-color: rgba(var(--v-theme-secondary), 0.05);
+        transition: background-color 5.8s ease-in-out, color 5.8s ease-in-out; // ✅ Smooth transitions
+      }
+
+      .v-list-item:focus-visible > .v-list-item__overlay {
+        opacity: 0;
+      }
+    }
+
+    > .v-list-group {
+      position: relative;
+
+      > .v-list-item--active,
+      > .v-list-item:hover {
+        background: rgba(var(--v-theme-secondary), 0.05); // ✅ Use rgba for smoother feeling
+      }
+
+      &:after {
+        content: '';
+        position: absolute;
+        left: 21px;
+        top: 46px;
+        height: calc(100% - 46px);
+        width: 1px;
+        opacity: 1;
+        background: rgba(var(--v-theme-secondary), 0.15);
+      }
+    }
+  }
+}
+
+/* When sidebar is collapsed (rail mode) */
+.v-navigation-drawer--rail {
+  .scrollnavbar .v-list .v-list-group__items,
+  .hide-menu {
+    opacity: 0;
+  }
+
+  .leftPadding {
+    margin-left: 0;
+  }
+}
+
+/* Mini Sidebar Hover Expand */
+@media only screen and (min-width: 1170px) {
+  .mini-sidebar {
+    .logo {
+      width: 40px;
+      overflow: hidden;
+    }
+
+    .leftSidebar:hover {
+      box-shadow: $box-shadow !important;
+    }
+
+    .v-navigation-drawer--expand-on-hover:hover {
+      .logo {
+        width: 100%;
+      }
+
+      .v-list .v-list-group__items,
+      .hide-menu {
+        opacity: 1;
+      }
+    }
+  }
+}