@amirjalili1374/ui-kit 1.2.0 → 1.2.1

package/src/scss/components/_VStepper.scss

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

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

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

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

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

@@ -1,138 +0,0 @@
-/* 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;
-      }
-    }
-  }
-}