Update various configuration files, components, and assets; enhance notification system and API endpoints; improve documentation and styles across the application.
This commit is contained in:
Haqeem Solehan
49
assets/style/scss/custom/apps/products.scss
Normal file
49
assets/style/scss/custom/apps/products.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
$small: 640px;
|
||||
$medium: 768px;
|
||||
$large: 1024px;
|
||||
$xlarge: 1280px;
|
||||
|
||||
.filter-wrapper {
|
||||
&.filter-wrapper-show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.filter-wrapper-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $medium) {
|
||||
.filter-wrapper {
|
||||
transition: right 0.25s ease;
|
||||
&.filter-wrapper-show {
|
||||
display: block;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
&.filter-wrapper-hide {
|
||||
display: block;
|
||||
right: -260px;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: -50;
|
||||
|
||||
&.show {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
18
assets/style/scss/custom/layout/horizontal.scss
Normal file
18
assets/style/scss/custom/layout/horizontal.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
.h-layout {
|
||||
.content-page {
|
||||
padding: 10.5rem 2rem 0 2rem;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.w-header,
|
||||
.w-header-search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-header-search {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
166
assets/style/scss/custom/layout/vertical.scss
Normal file
166
assets/style/scss/custom/layout/vertical.scss
Normal file
@@ -0,0 +1,166 @@
|
||||
$small: 640px;
|
||||
$medium: 768px;
|
||||
$large: 1024px;
|
||||
$xlarge: 1280px;
|
||||
|
||||
@media screen and (max-width: $medium) {
|
||||
body:has(.menu-overlay:not(.hide)) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 120vh;
|
||||
z-index: 45;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: all 0.5s ease;
|
||||
background-color: rgba(34, 41, 47, 0.5);
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.menu-overlay {
|
||||
&.hide {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Layout Vertical CSS
|
||||
.v-layout {
|
||||
.content-page {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.w-header-search {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.w-header,
|
||||
.w-header-search {
|
||||
width: calc(100% - 256px);
|
||||
|
||||
@media screen and (max-width: $medium) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-menu {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.content-page {
|
||||
margin-left: 256px;
|
||||
padding: 6rem 2rem 10px 2rem;
|
||||
|
||||
@media screen and (max-width: $medium) {
|
||||
margin-left: 0px;
|
||||
padding: 6rem 1.25rem 0 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.menu-hide {
|
||||
.w-header {
|
||||
width: calc(100% - 0px);
|
||||
}
|
||||
|
||||
.vertical-menu {
|
||||
left: -260px;
|
||||
}
|
||||
|
||||
.content-page {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-content,
|
||||
.menu-content-child {
|
||||
max-height: 1000px;
|
||||
overflow: hidden;
|
||||
|
||||
&.hide {
|
||||
max-height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-content-max,
|
||||
.menu-content-child-max {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
svg.side-menu-arrow {
|
||||
transition: 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
.nav-open {
|
||||
svg.side-menu-arrow {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom styles for LZS theme
|
||||
html[data-theme="LZS"] {
|
||||
.v-layout {
|
||||
.active-menu {
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
// Yellow glow on active menu items
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
background-color: rgb(var(--active-menu-border));
|
||||
}
|
||||
|
||||
// Icon color for active menu
|
||||
svg {
|
||||
color: rgb(var(--active-menu-border));
|
||||
}
|
||||
}
|
||||
|
||||
// Form focus states with yellow accent
|
||||
input:focus, textarea:focus, select:focus {
|
||||
outline: 2px solid rgba(var(--focus-ring));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
// Button hover with yellow accent
|
||||
.btn-primary:hover, button.bg-primary:hover {
|
||||
box-shadow: 0 0 0 2px rgba(var(--active-menu-border), 0.3);
|
||||
}
|
||||
|
||||
// Card headers with subtle yellow accent
|
||||
.rs-card {
|
||||
.card-header {
|
||||
border-bottom: 1px solid rgba(var(--border-color));
|
||||
|
||||
h2, h3, h4 {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 60%;
|
||||
width: 3px;
|
||||
background-color: rgb(var(--active-menu-border));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
27
assets/style/scss/custom/library/_dropdown.scss
Normal file
27
assets/style/scss/custom/library/_dropdown.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
$small: 640px;
|
||||
$medium: 768px;
|
||||
$large: 1024px;
|
||||
$xlarge: 1280px;
|
||||
|
||||
.s-dropdown {
|
||||
background-color: white;
|
||||
padding: 10px 0;
|
||||
border-radius: 5px;
|
||||
top: 65px !important;
|
||||
border: 1px solid rgb(229, 231, 235);
|
||||
box-shadow: 0px 0px 10px rgba(226, 232, 240, 0.2);
|
||||
|
||||
@media screen and (max-width: $medium) {
|
||||
left: 0px !important;
|
||||
width: 100% !important;
|
||||
margin: 0px 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.s-dropdown {
|
||||
background-color: #1e293b;
|
||||
box-shadow: 0px 0px 10px rgba(15, 23, 42, 0.2);
|
||||
border: 1px solid #182130;
|
||||
}
|
||||
}
|
||||
19
assets/style/scss/custom/library/_floatingvue.scss
Normal file
19
assets/style/scss/custom/library/_floatingvue.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
.v-popper--theme-dropdown .v-popper__inner {
|
||||
background: rgb(var(--bg-2)) !important;
|
||||
border: 0px !important;
|
||||
color: rgb(var(--text-color)) !important;
|
||||
}
|
||||
|
||||
// Disable arrow
|
||||
.v-popper__arrow-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// .v-popper--theme-my-theme .v-popper__inner {
|
||||
// background: #fff000;
|
||||
// color: black;
|
||||
// padding: 24px;
|
||||
// border-radius: 6px;
|
||||
// border: 1px solid #ddd;
|
||||
// box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
|
||||
// }
|
||||
237
assets/style/scss/custom/library/_formkit.scss
Normal file
237
assets/style/scss/custom/library/_formkit.scss
Normal file
@@ -0,0 +1,237 @@
|
||||
$small: 640px;
|
||||
$medium: 768px;
|
||||
$large: 1024px;
|
||||
$xlarge: 1280px;
|
||||
|
||||
.formkit-form {
|
||||
.form-wizard {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
&.top-form {
|
||||
.formkit-actions {
|
||||
button[type="submit"] {
|
||||
display: block;
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
ul.top-steps {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin-bottom: 1rem;
|
||||
gap: 1rem;
|
||||
|
||||
@media screen and (max-width: $medium) {
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
li {
|
||||
flex-grow: 1;
|
||||
display: inline-block;
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
bottom: -8px;
|
||||
width: 0%;
|
||||
height: 8px;
|
||||
border-radius: 10px;
|
||||
background-color: rgb(var(--color-primary));
|
||||
transition: width 0.25s ease-in;
|
||||
}
|
||||
|
||||
.step--errors {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
float: right;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: #f23131;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.counter {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
border-radius: 10px;
|
||||
background-color: rgb(var(--bg-1));
|
||||
}
|
||||
|
||||
&[data-step-active="true"] {
|
||||
color: rgb(var(--color-primary));
|
||||
font-weight: 600;
|
||||
|
||||
.progress {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-step-active="false"] {
|
||||
color: rgb(var(--bg-1));
|
||||
.progress {
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-step-completed="true"] {
|
||||
color: rgb(var(--color-primary));
|
||||
font-weight: 600;
|
||||
.progress {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.left-form {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: 230px auto;
|
||||
|
||||
@media screen and (max-width: $medium) {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
gap: 0rem;
|
||||
}
|
||||
|
||||
.formkit-actions {
|
||||
grid-column: span 2 / span 2;
|
||||
|
||||
@media screen and (max-width: $medium) {
|
||||
grid-column: span 1 / span 1;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
ul.left-steps {
|
||||
display: block;
|
||||
li {
|
||||
margin-bottom: 1rem;
|
||||
.progress {
|
||||
position: relative;
|
||||
bottom: -8px;
|
||||
width: 0%;
|
||||
height: 8px;
|
||||
border-radius: 10px;
|
||||
background-color: rgb(var(--color-primary));
|
||||
transition: width 0.25s ease-in;
|
||||
}
|
||||
|
||||
.step--errors {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
float: right;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: #f23131;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.counter {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
border-radius: 10px;
|
||||
background-color: rgb(var(--bg-1));
|
||||
}
|
||||
|
||||
&[data-step-active="true"] {
|
||||
color: rgb(var(--color-primary));
|
||||
font-weight: 600;
|
||||
|
||||
.progress {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-step-active="false"] {
|
||||
color: rgb(var(--bg-1));
|
||||
.progress {
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-step-completed="true"] {
|
||||
color: rgb(var(--color-primary));
|
||||
font-weight: 600;
|
||||
.progress {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom Formkit Input for VSelect
|
||||
.formkit-vselect {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.vs__dropdown-menu {
|
||||
background: rgb(var(--bg-2));
|
||||
}
|
||||
|
||||
.vs__dropdown-menu li {
|
||||
background: rgb(var(--bg-1));
|
||||
color: rgb(var(--text-color));
|
||||
}
|
||||
|
||||
.vs__dropdown-toggle {
|
||||
min-height: 2.5rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(var(--color-primary));
|
||||
|
||||
border-width: 1px;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 0px;
|
||||
border-color: rgb(var(--fk-border-color));
|
||||
|
||||
.vs__selected {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
|
||||
background-color: rgb(var(--color-primary));
|
||||
color: white;
|
||||
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
gap: 0.25rem;
|
||||
margin-right: 0.35rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom Decorator
|
||||
input[type="checkbox"]:checked.icon-check + .formkit-decorator::before {
|
||||
content: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>');
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
}
|
||||
114
assets/style/scss/custom/library/_fullcalendar.scss
Normal file
114
assets/style/scss/custom/library/_fullcalendar.scss
Normal file
@@ -0,0 +1,114 @@
|
||||
$small: 640px;
|
||||
$medium: 768px;
|
||||
$large: 1024px;
|
||||
$xlarge: 1280px;
|
||||
|
||||
.fc-theme-standard td,
|
||||
.fc-theme-standard th {
|
||||
border-color: rgb(var(--bg-1)) !important;
|
||||
}
|
||||
|
||||
// Overwrite fullcalendar styles light
|
||||
.fc {
|
||||
.fc-scrollgrid {
|
||||
border: 1px solid rgb(var(--bg-1)) !important;
|
||||
}
|
||||
|
||||
.fc-toolbar {
|
||||
@media screen and (max-width: $medium) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start !important;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.fc-toolbar-chunk {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-button {
|
||||
padding: 0.75rem 1rem !important;
|
||||
|
||||
&.fc-button-primary {
|
||||
background-color: transparent !important;
|
||||
color: rgb(var(--color-primary));
|
||||
border-color: rgb(var(--color-primary)) !important;
|
||||
}
|
||||
|
||||
&.fc-button-active {
|
||||
background-color: rgb(var(--color-primary)) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(var(--color-primary)) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.05rem rgba(255, 113, 133, 0.5) !important;
|
||||
background-color: rgb(var(--color-primary)) !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-view-harness {
|
||||
table {
|
||||
&.fc-col-header {
|
||||
td,
|
||||
th {
|
||||
border-color: rgb(var(--bg-1)) !important;
|
||||
}
|
||||
|
||||
.fc-col-header-cell {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-daygrid-day {
|
||||
&.fc-day-today {
|
||||
background-color: rgb(var(--bg-1));
|
||||
background: rgb(var(--bg-1));
|
||||
}
|
||||
}
|
||||
|
||||
.fc-daygrid-day-top {
|
||||
color: #6b727f !important;
|
||||
}
|
||||
|
||||
.fc-more-link {
|
||||
color: rgb(var(--color-primary));
|
||||
}
|
||||
}
|
||||
|
||||
.fc-daygrid-event-harness {
|
||||
.fc-daygrid-event {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.fc-h-event {
|
||||
&.fc-event-start {
|
||||
border-color: rgb(var(--color-primary));
|
||||
background-color: rgb(var(--color-primary));
|
||||
}
|
||||
}
|
||||
}
|
||||
.fc-list {
|
||||
.fc-list-event-dot {
|
||||
background-color: rgb(var(--color-primary));
|
||||
border: 5px solid #f3f4f6;
|
||||
border-color: rgb(var(--color-primary)) !important;
|
||||
}
|
||||
|
||||
.fc-list-day-cushion {
|
||||
background-color: #f3f4f6;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-popover-header {
|
||||
padding: 0.5rem !important;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
}
|
||||
81
assets/style/scss/custom/library/_nprogress.scss
Normal file
81
assets/style/scss/custom/library/_nprogress.scss
Normal file
@@ -0,0 +1,81 @@
|
||||
/* Make clicks pass-through */
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
background: #fb7185;
|
||||
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
/* Fancy blur effect */
|
||||
#nprogress .peg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 10px #fb7185, 0 0 5px #fb7185;
|
||||
opacity: 1;
|
||||
|
||||
-webkit-transform: rotate(3deg) translate(0px, -4px);
|
||||
-ms-transform: rotate(3deg) translate(0px, -4px);
|
||||
transform: rotate(3deg) translate(0px, -4px);
|
||||
}
|
||||
|
||||
/* Remove these to get rid of the spinner */
|
||||
#nprogress .spinner {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
#nprogress .spinner-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
box-sizing: border-box;
|
||||
|
||||
border: solid 2px transparent;
|
||||
border-top-color: #fb7185;
|
||||
border-left-color: #fb7185;
|
||||
border-radius: 50%;
|
||||
|
||||
-webkit-animation: nprogress-spinner 400ms linear infinite;
|
||||
animation: nprogress-spinner 400ms linear infinite;
|
||||
}
|
||||
|
||||
.nprogress-custom-parent {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nprogress-custom-parent #nprogress .spinner,
|
||||
.nprogress-custom-parent #nprogress .bar {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@-webkit-keyframes nprogress-spinner {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes nprogress-spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
18
assets/style/scss/custom/library/_swiper.scss
Normal file
18
assets/style/scss/custom/library/_swiper.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
color: #4B5563 !important;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.swiper-button-next:after,
|
||||
.swiper-button-prev:after {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
background-color: #8b98a9 !important;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
background: #4B5563 !important;
|
||||
}
|
||||
7
assets/style/scss/custom/library/_vuecountryflag.scss
Normal file
7
assets/style/scss/custom/library/_vuecountryflag.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
.flag.normal-flag {
|
||||
margin: 0em -1em -0em -1em !important;
|
||||
transform: scale(0.38) !important;
|
||||
-ms-transform: scale(0.38) !important;
|
||||
-webkit-transform: scale(0.38) !important;
|
||||
-moz-transform: scale(0.38) !important;
|
||||
}
|
||||
3
assets/style/scss/custom/library/_vuetoastification.scss
Normal file
3
assets/style/scss/custom/library/_vuetoastification.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.Vue-Toastification__toast {
|
||||
padding: 18px 21px;
|
||||
}
|
||||
21
assets/style/scss/custom/scrollbar/scrollbar.scss
Normal file
21
assets/style/scss/custom/scrollbar/scrollbar.scss
Normal file
@@ -0,0 +1,21 @@
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(var(--scroll-color));
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(var(--scroll-hover-color));
|
||||
}
|
||||
12
assets/style/scss/custom/transition/fade-up.scss
Normal file
12
assets/style/scss/custom/transition/fade-up.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
// Animation for transition fade
|
||||
.fade-up-enter-active,
|
||||
.fade-up-leave-active {
|
||||
transition: transform 0.4s cubic-bezier(0.17, 0.67, 0.84, 0.79),
|
||||
opacity 0.3s linear;
|
||||
}
|
||||
|
||||
.fade-up-enter-from,
|
||||
.fade-up-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10%);
|
||||
}
|
||||
10
assets/style/scss/custom/transition/fade.scss
Normal file
10
assets/style/scss/custom/transition/fade.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
// Animation for transition fade
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
11
assets/style/scss/custom/transition/page.scss
Normal file
11
assets/style/scss/custom/transition/page.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
// Animation for transition fade
|
||||
.page-enter-active,
|
||||
.page-leave-active {
|
||||
transition: transform 0.3s ease, opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.page-enter-from,
|
||||
.page-leave-to {
|
||||
transform: scale(1.02);
|
||||
opacity: 0;
|
||||
}
|
||||
17
assets/style/scss/custom/transition/slide-fade.scss
Normal file
17
assets/style/scss/custom/transition/slide-fade.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
/*
|
||||
Enter and leave animations can use different
|
||||
durations and timing functions.
|
||||
*/
|
||||
.slide-fade-enter-active {
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.slide-fade-leave-active {
|
||||
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
|
||||
}
|
||||
|
||||
.slide-fade-enter-from,
|
||||
.slide-fade-leave-to {
|
||||
transform: translateX(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
10
assets/style/scss/custom/transition/slide.scss
Normal file
10
assets/style/scss/custom/transition/slide.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
.slide-enter-active,
|
||||
.slide-leave-active {
|
||||
transition: translateY, opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.slide-enter-from,
|
||||
.slide-leave-to {
|
||||
transform: translateY(0px);
|
||||
opacity: 0;
|
||||
}
|
||||
57
assets/style/scss/main.scss
Normal file
57
assets/style/scss/main.scss
Normal file
@@ -0,0 +1,57 @@
|
||||
/*================================================================================
|
||||
Notes: This file is the main entry point for the SCSS stylesheet.
|
||||
================================================================================*/
|
||||
|
||||
/* Import DM Sans font from Google Fonts */
|
||||
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap");
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#__nuxt {
|
||||
font-family: "DM Sans", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.5px; /* Changed from -2px to -0.5px for better readability */
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// svg.icon{
|
||||
// width: 1.3rem;
|
||||
// height: 1.3rem;
|
||||
// vertical-align: middle;
|
||||
// fill: currentColor;
|
||||
// overflow: hidden;
|
||||
// }
|
||||
|
||||
code {
|
||||
color: rgb(233, 74, 74);
|
||||
background-color: rgba(146, 146, 146, 0.1);
|
||||
}
|
||||
|
||||
// Custom Layout SCSS
|
||||
@import "./custom/layout/vertical";
|
||||
@import "./custom/layout/horizontal";
|
||||
|
||||
// Transition SCSS
|
||||
@import "./custom/transition/page";
|
||||
@import "./custom/transition/fade";
|
||||
@import "./custom/transition/fade-up";
|
||||
@import "./custom/transition/slide";
|
||||
@import "./custom/transition/slide-fade";
|
||||
|
||||
// Scrollbar SCSS
|
||||
@import "./custom/scrollbar/scrollbar";
|
||||
|
||||
// Custom SCSS library
|
||||
@import "./custom/library/dropdown";
|
||||
@import "./custom/library/nprogress";
|
||||
@import "./custom/library/formkit";
|
||||
@import "./custom/library/vuetoastification";
|
||||
@import "./custom/library/swiper";
|
||||
@import "./custom/library/fullcalendar";
|
||||
@import "./custom/library/floatingvue";
|
||||
@import "./custom/library/vuecountryflag";
|
||||
Reference in New Issue
Block a user