initial commit
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,9 @@
|
||||
.layout-wrapper.layout-nav-type-horizontal {
|
||||
.layout-navbar-and-nav-container {
|
||||
.app-logo {
|
||||
.app-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
@use "@core-scss/base/mixins";
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical {
|
||||
// 👉 Layout footer
|
||||
.layout-footer {
|
||||
$ele-layout-footer: &;
|
||||
|
||||
.footer-content-container {
|
||||
// Sticky footer
|
||||
@at-root {
|
||||
// ℹ️ .layout-footer-sticky#{$ele-layout-footer} => .layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer
|
||||
.layout-footer-sticky#{$ele-layout-footer} {
|
||||
.footer-content-container {
|
||||
@include mixins.elevation(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
@use "@core-scss/template/placeholders" as *;
|
||||
|
||||
.layout-horizontal-nav {
|
||||
// SECTION Nav Group
|
||||
.nav-group,
|
||||
.nav-link {
|
||||
.popper-content {
|
||||
.nav-link.sub-item a,
|
||||
.nav-group-label {
|
||||
@extend %nav-group-label-and-nav-link-style;
|
||||
}
|
||||
|
||||
.nav-group.active {
|
||||
> .popper-triggerer .nav-group-label {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.sub-item {
|
||||
.router-link-active.router-link-exact-active {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-group {
|
||||
.nav-group-arrow {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
// !SECTION
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
.v-timeline-item {
|
||||
.app-timeline-title {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 1.3125rem;
|
||||
}
|
||||
|
||||
.app-timeline-meta {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||
font-size: 11px;
|
||||
line-height: 0.875rem;
|
||||
}
|
||||
|
||||
.app-timeline-text {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||
font-size: 13px;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
@forward "@core-scss/base/variables" with (
|
||||
$default-layout-with-vertical-nav-navbar-footer-roundness: 6px !default,
|
||||
|
||||
$vertical-nav-navbar-style: "floating" !default, // options: elevated, floating
|
||||
|
||||
// 👉 Vertical nav
|
||||
$vertical-nav-background-color-rgb: var(--v-theme-surface) !default,
|
||||
// ℹ️ This is used to keep consistency between nav items and nav header left & right margin
|
||||
// This is used by nav items & nav header
|
||||
$vertical-nav-horizontal-spacing: 0.875rem !default,
|
||||
|
||||
// Section title margin top (when its not first child)
|
||||
$vertical-nav-section-title-mt: 1.25rem !default,
|
||||
$vertical-nav-navbar-elevation: 2 !default,
|
||||
|
||||
// Move logo when vertical nav is mini (collapsed but not hovered)
|
||||
$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -1px !default,
|
||||
|
||||
// Section title margin bottom
|
||||
$vertical-nav-section-title-mb: 0.375rem !default,
|
||||
|
||||
// Vertical nav icons
|
||||
$vertical-nav-items-icon-size: 1.375rem !default,
|
||||
$vertical-nav-items-nested-icon-size: 0.425rem !default,
|
||||
|
||||
// 👉Footer
|
||||
$layout-vertical-nav-footer-height: 48px !default,
|
||||
|
||||
// Font sizes
|
||||
$font-sizes: (
|
||||
"xs": 0.6875rem,
|
||||
"sm": 0.8125rem,
|
||||
"base": 0.9375rem,
|
||||
"lg": 1.125rem,
|
||||
"xl": 1.375rem,
|
||||
"2xl": 1.625rem,
|
||||
"3xl": 2rem,
|
||||
"4xl": 2.375rem,
|
||||
"5xl": 3rem,
|
||||
"6xl": 3.5rem,
|
||||
"7xl": 4rem,
|
||||
"8xl": 4.5rem,
|
||||
"9xl": 5.25rem,
|
||||
) !default,
|
||||
|
||||
// Line heights
|
||||
$font-line-height: (
|
||||
"xs": 0.9375rem,
|
||||
"sm": 1.25rem,
|
||||
"base": 1.3125rem,
|
||||
"lg": 1.5rem,
|
||||
"xl": 1.875rem,
|
||||
"2xl": 2.25rem,
|
||||
"3xl": 2.75rem,
|
||||
"4xl": 3.25rem,
|
||||
"5xl": 1,
|
||||
"6xl": 1,
|
||||
"7xl": 1,
|
||||
"8xl": 1,
|
||||
"9xl": 1
|
||||
) !default,
|
||||
);
|
||||
@@ -0,0 +1,41 @@
|
||||
@use "@configured-variables" as variables;
|
||||
@use "@core-scss/base/mixins";
|
||||
|
||||
.layout-nav-type-vertical {
|
||||
// 👉 Layout Vertical nav
|
||||
.layout-vertical-nav {
|
||||
@include mixins.elevation(2);
|
||||
|
||||
.nav-header {
|
||||
.app-logo {
|
||||
.app-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-action {
|
||||
margin-inline-end: -0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Nav group & Link
|
||||
.nav-link,
|
||||
.nav-group {
|
||||
// shadow cut issue fix
|
||||
margin-block-end: -0.5rem;
|
||||
padding-block-end: 0.5rem;
|
||||
}
|
||||
|
||||
// 👉 Nav group active
|
||||
.nav-group.active {
|
||||
> .nav-group-label {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-section-title .placeholder-icon {
|
||||
margin-inline-start: 0.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
@use "sass:map";
|
||||
@use "@core-scss/base";
|
||||
|
||||
// Layout
|
||||
@use "vertical-nav";
|
||||
@use "horizontal-nav";
|
||||
@use "default-layout-w-vertical-nav";
|
||||
@use "default-layout-w-horizontal-nav";
|
||||
|
||||
// Skins
|
||||
@use "skins";
|
||||
|
||||
// Components
|
||||
@use "components";
|
||||
|
||||
// Utilities
|
||||
@use "utilities";
|
||||
@@ -0,0 +1,99 @@
|
||||
@use "@styles/variables/_vuetify.scss" as vuetify;
|
||||
@use "@layouts/styles/mixins" as layoutsMixins;
|
||||
@use "@core-scss/base/mixins";
|
||||
|
||||
.v-application .apexcharts-canvas {
|
||||
&line[stroke="transparent"] {
|
||||
display: "none";
|
||||
}
|
||||
|
||||
.apexcharts-tooltip {
|
||||
@include mixins.elevation(3);
|
||||
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
background: rgb(var(--v-theme-surface));
|
||||
|
||||
.apexcharts-tooltip-title {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
background: rgb(var(--v-theme-surface));
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.apexcharts-theme-light {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
|
||||
&.apexcharts-theme-dark {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-series-group:first-of-type {
|
||||
padding-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
background: rgb(var(--v-theme-grey-50));
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
|
||||
&::after {
|
||||
border-block-end-color: rgb(var(--v-theme-grey-50));
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
background: rgb(var(--v-theme-grey-50));
|
||||
|
||||
&::after {
|
||||
border-inline-start-color: rgb(var(--v-theme-grey-50));
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-text,
|
||||
.apexcharts-yaxistooltip-text {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
|
||||
.apexcharts-yaxis .apexcharts-yaxis-texts-g .apexcharts-yaxis-label {
|
||||
@include layoutsMixins.rtl {
|
||||
text-anchor: start;
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-text,
|
||||
.apexcharts-tooltip-text,
|
||||
.apexcharts-datalabel-label,
|
||||
.apexcharts-datalabel,
|
||||
.apexcharts-xaxistooltip-text,
|
||||
.apexcharts-yaxistooltip-text,
|
||||
.apexcharts-legend-text {
|
||||
font-family: vuetify.$body-font-family !important;
|
||||
}
|
||||
|
||||
.apexcharts-pie-label {
|
||||
fill: white;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.apexcharts-marker {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.apexcharts-legend-marker {
|
||||
margin-inline-end: 0.3875rem !important;
|
||||
|
||||
@include layoutsMixins.rtl {
|
||||
margin-inline-end: 0.75rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,301 @@
|
||||
@use "@core-scss/base/mixins";
|
||||
@use "@styles/variables/_vuetify.scss";
|
||||
|
||||
.v-application .fc {
|
||||
--fc-today-bg-color: rgba(var(--v-theme-on-surface), 0.04);
|
||||
--fc-border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
--fc-neutral-bg-color: rgb(var(--v-theme-background));
|
||||
--fc-list-event-hover-bg-color: rgba(var(--v-theme-on-surface), 0.02);
|
||||
--fc-page-bg-color: rgb(var(--v-theme-surface));
|
||||
--fc-event-border-color: currentcolor;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.fc-timegrid-divider {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fc-col-header-cell-cushion {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.fc-toolbar .fc-toolbar-title {
|
||||
margin-inline-start: 0.25rem;
|
||||
}
|
||||
|
||||
.fc-event-time {
|
||||
font-size: 0.6875rem;
|
||||
}
|
||||
|
||||
.fc-timegrid-event {
|
||||
.fc-event-title {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-event-title-container {
|
||||
.fc-event-title {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-prev-button {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
.fc-prev-button,
|
||||
.fc-next-button {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.fc-col-header .fc-col-header-cell .fc-col-header-cell-cushion {
|
||||
padding: 0.5rem;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.fc-timegrid .fc-timegrid-slots .fc-timegrid-slot {
|
||||
block-size: 3rem;
|
||||
}
|
||||
|
||||
// Removed double border on left in list view
|
||||
.fc-list {
|
||||
border-inline-start: none;
|
||||
font-size: 0.8125rem;
|
||||
|
||||
.fc-list-day-cushion.fc-cell-shaded {
|
||||
background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.fc-list-event-time,
|
||||
.fc-list-event-title {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.fc-list-day .fc-list-day-text,
|
||||
.fc-list-day .fc-list-day-side-text {
|
||||
font-size: 0.9375rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-timegrid-axis {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||
font-size: 0.6875rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.fc-timegrid-slot-label-frame {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: 0.6875rem;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.fc-header-toolbar {
|
||||
flex-wrap: wrap;
|
||||
margin: 1.4rem;
|
||||
column-gap: 0.5rem;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.fc-toolbar-chunk {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.fc-button-group {
|
||||
.fc-button-primary {
|
||||
&,
|
||||
&:hover,
|
||||
&:not(.disabled):active {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.fc-button-group {
|
||||
border-radius: 0.375rem;
|
||||
|
||||
.fc-button,
|
||||
.fc-button:active {
|
||||
background-color: rgba(var(--v-theme-primary), 0.16);
|
||||
color: rgb(var(--v-theme-primary));
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.0187rem;
|
||||
padding-inline: 1rem;
|
||||
text-transform: capitalize;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-inline-end: 0.0625rem solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
|
||||
&.fc-button-active {
|
||||
background-color: rgba(var(--v-theme-primary), 0.24);
|
||||
color: rgb(var(--v-theme-primary));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-toolbar-title {
|
||||
display: inline-block;
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// Calendar content container
|
||||
.fc-view-harness {
|
||||
min-block-size: 40.625rem;
|
||||
}
|
||||
|
||||
.fc-event {
|
||||
border-color: transparent;
|
||||
cursor: pointer;
|
||||
margin-block-end: 0.3rem;
|
||||
padding-block: 0.1875rem;
|
||||
padding-inline: 0.3125rem;
|
||||
}
|
||||
|
||||
.fc-event-main {
|
||||
color: inherit;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 500;
|
||||
padding-inline: 0.25rem;
|
||||
}
|
||||
|
||||
tbody[role="rowgroup"] {
|
||||
> tr > td[role="presentation"] {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-scrollgrid {
|
||||
border-inline-start: none;
|
||||
}
|
||||
|
||||
.fc-daygrid-day {
|
||||
padding: 0.3125rem;
|
||||
}
|
||||
|
||||
.fc-daygrid-day-number {
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 0.6875rem;
|
||||
}
|
||||
|
||||
.fc-daygrid-day {
|
||||
padding: 0.3125rem;
|
||||
}
|
||||
|
||||
.fc-scrollgrid-section > * {
|
||||
border-inline-end-width: 0;
|
||||
border-inline-start-width: 0;
|
||||
}
|
||||
|
||||
.fc-list-event-dot {
|
||||
color: inherit;
|
||||
|
||||
--fc-event-border-color: currentcolor;
|
||||
}
|
||||
|
||||
.fc-list-event {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.fc-popover {
|
||||
@include mixins.elevation(3);
|
||||
|
||||
border-radius: 6px;
|
||||
|
||||
.fc-popover-header,
|
||||
.fc-popover-body {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.fc-popover-title {
|
||||
margin: 0;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 sidebar toggler
|
||||
.fc-toolbar-chunk {
|
||||
.fc-button-group {
|
||||
align-items: center;
|
||||
|
||||
.fc-button .fc-icon {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
// ℹ️ Below two `background-image` styles contains static color due to browser limitation of not parsing the css var inside CSS url()
|
||||
.fc-drawerToggler-button {
|
||||
display: none;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(94,86,105,0.68)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
block-size: 1.5625rem;
|
||||
font-size: 0;
|
||||
inline-size: 1.5625rem;
|
||||
margin-inline-end: 0.25rem;
|
||||
|
||||
@media (max-width: 1279px) {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
@at-root {
|
||||
.v-theme--dark#{&} {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(232,232,241,0.68)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ℹ️ Workaround of https://github.com/fullcalendar/fullcalendar/issues/6407
|
||||
.fc-col-header,
|
||||
.fc-daygrid-body,
|
||||
.fc-scrollgrid-sync-table {
|
||||
inline-size: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove event margin in week view inside day column
|
||||
.fc-timegrid-col-events {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
// Remove day view, day bg
|
||||
.fc .fc-daygrid-day.fc-day-today {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.fc-timegrid .fc-timegrid-slots .fc-timegrid-slot {
|
||||
background: rgb(var(--v-theme-surface));
|
||||
}
|
||||
|
||||
// Set calendar month font-size
|
||||
.fc-toolbar-title {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
// Set button border radius
|
||||
.fc .fc-button {
|
||||
border-radius: vuetify.$card-border-radius;
|
||||
min-block-size: vuetify.$button-height;
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
@use "shepherd.js/dist/css/shepherd.css";
|
||||
@use "@styles/variables/_vuetify.scss" as variables;
|
||||
|
||||
.shepherd-button {
|
||||
border-radius: variables.$button-border-radius;
|
||||
block-size: 1.75rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: variables.$button-font-weight;
|
||||
margin-inline-end: 0.75rem;
|
||||
padding-block: 0.25rem;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
.shepherd-footer {
|
||||
background: rgb(var(--v-theme-background));
|
||||
padding-block: 0.5rem 1rem;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
.shepherd-element .shepherd-content .shepherd-header {
|
||||
background: rgb(var(--v-theme-background));
|
||||
padding-block: 1rem 0;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
.shepherd-element .shepherd-content .shepherd-header .shepherd-title {
|
||||
color: rgb(var(--v-theme-on-background));
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.shepherd-text {
|
||||
padding: 1rem;
|
||||
background: rgb(var(--v-theme-background));
|
||||
color: rgb(var(--v-theme-on-background));
|
||||
font-size: variables.$card-text-font-size;
|
||||
}
|
||||
|
||||
.shepherd-cancel-icon {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity)) !important;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.shepherd-element[data-popper-placement^="bottom"] {
|
||||
margin-block-start: 0.75rem !important;
|
||||
}
|
||||
|
||||
.shepherd-element[data-popper-placement^="top"] {
|
||||
margin-block-end: 0.75rem !important;
|
||||
}
|
||||
|
||||
.shepherd-element[data-popper-placement^="right"] {
|
||||
margin-inline-start: 0.75rem !important;
|
||||
}
|
||||
|
||||
.shepherd-element[data-popper-placement^="left"] {
|
||||
margin-inline-end: 0.75rem !important;
|
||||
}
|
||||
|
||||
.shepherd-element[data-popper-placement] {
|
||||
.shepherd-arrow::before {
|
||||
background: rgb(var(--v-theme-background)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.shepherd-element {
|
||||
border-radius: variables.$card-border-radius;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.nextBtnClass,
|
||||
.nextBtnClass:not(:disabled):hover {
|
||||
background: rgb(var(--v-theme-primary));
|
||||
}
|
||||
|
||||
.backBtnClass,
|
||||
.backBtnClass:not(:disabled):hover {
|
||||
background: rgba(var(--v-theme-secondary), var(--v-activated-opacity));
|
||||
color: rgb(var(--v-theme-secondary));
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.shepherd-element {
|
||||
max-inline-size: 75vw;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,281 @@
|
||||
@use "sass:math";
|
||||
|
||||
$font-family-custom: "Public Sans",sans-serif,-apple-system,blinkmacsystemfont,
|
||||
"Segoe UI",roboto,"Helvetica Neue",arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
|
||||
|
||||
// 👉 Typography custom variables
|
||||
$typography-h5-font-size: 1.125rem;
|
||||
$typography-body-1-font-size: 0.9375rem;
|
||||
$typography-body-1-line-height: 1.375rem;
|
||||
|
||||
@forward "../../../base/libs/vuetify/variables" with (
|
||||
$body-font-family: $font-family-custom !default,
|
||||
$border-radius-root: 6px !default,
|
||||
|
||||
// 👉 Global border radius
|
||||
$rounded: (
|
||||
"sm": 4px,
|
||||
"lg": 8px,
|
||||
"shaped": 30px 0,
|
||||
) !default,
|
||||
|
||||
// 👉 Shadows
|
||||
$shadow-key-umbra: (
|
||||
0: (0 0 0 0 rgba(var(--v-shadow-key-umbra-color), 1)),
|
||||
1: (0 2px 4px rgba(var(--v-shadow-key-umbra-color), 0.12)),
|
||||
2: (0 2px 6px rgba(var(--v-shadow-key-umbra-color), 0.14)),
|
||||
3: (0 3px 8px rgba(var(--v-shadow-key-umbra-color), 0.14)),
|
||||
4: (0 3px 9px rgba(var(--v-shadow-key-umbra-color), 0.15)),
|
||||
5: (0 4px 10px rgba(var(--v-shadow-key-umbra-color), 0.15)),
|
||||
6: (0 4px 11px rgba(var(--v-shadow-key-umbra-color), 0.16)),
|
||||
7: (0 4px 18px rgba(var(--v-shadow-key-umbra-color), 0.1)),
|
||||
8: (0 4px 13px rgba(var(--v-shadow-key-umbra-color), 0.18)),
|
||||
9: (0 5px 14px rgba(var(--v-shadow-key-umbra-color), 0.18)),
|
||||
10: (0 5px 15px rgba(var(--v-shadow-key-umbra-color), 0.2)),
|
||||
11: (0 5px 16px rgba(var(--v-shadow-key-umbra-color), 0.2)),
|
||||
12: (0 6px 17px rgba(var(--v-shadow-key-umbra-color), 0.22)),
|
||||
13: (0 6px 18px rgba(var(--v-shadow-key-umbra-color), 0.22)),
|
||||
14: (0 6px 19px rgba(var(--v-shadow-key-umbra-color), 0.24)),
|
||||
15: (0 7px 20px rgba(var(--v-shadow-key-umbra-color), 0.24)),
|
||||
16: (0 7px 21px rgba(var(--v-shadow-key-umbra-color), 0.26)),
|
||||
17: (0 7px 22px rgba(var(--v-shadow-key-umbra-color), 0.26)),
|
||||
18: (0 8px 23px rgba(var(--v-shadow-key-umbra-color), 0.28)),
|
||||
19: (0 8px 24px 6px rgba(var(--v-shadow-key-umbra-color), 0.28)),
|
||||
20: (0 9px 25px rgba(var(--v-shadow-key-umbra-color), 0.3)),
|
||||
21: (0 9px 26px rgba(var(--v-shadow-key-umbra-color), 0.32)),
|
||||
22: (0 9px 27px rgba(var(--v-shadow-key-umbra-color), 0.32)),
|
||||
23: (0 10px 28px rgba(var(--v-shadow-key-umbra-color), 0.34)),
|
||||
24: (0 10px 30px rgba(var(--v-shadow-key-umbra-color), 0.34))
|
||||
) !default,
|
||||
|
||||
$shadow-key-penumbra: (
|
||||
0: (0 0 transparent),
|
||||
1: (0 0 transparent),
|
||||
2: (0 0 transparent),
|
||||
3: (0 0 transparent),
|
||||
4: (0 0 transparent),
|
||||
5: (0 0 transparent),
|
||||
6: (0 0 transparent),
|
||||
7: (0 0 transparent),
|
||||
8: (0 0 transparent),
|
||||
9: (0 0 transparent),
|
||||
10: (0 0 transparent),
|
||||
11: (0 0 transparent),
|
||||
12: (0 0 transparent),
|
||||
13: (0 0 transparent),
|
||||
14: (0 0 transparent),
|
||||
15: (0 0 transparent),
|
||||
16: (0 0 transparent),
|
||||
17: (0 0 transparent),
|
||||
18: (0 0 transparent),
|
||||
19: (0 0 transparent),
|
||||
20: (0 0 transparent),
|
||||
21: (0 0 transparent),
|
||||
22: (0 0 transparent),
|
||||
23: (0 0 transparent),
|
||||
24: (0 0 transparent),
|
||||
) !default,
|
||||
|
||||
$shadow-key-ambient: (
|
||||
0: (0 0 transparent),
|
||||
1: (0 0 transparent),
|
||||
2: (0 0 transparent),
|
||||
3: (0 0 transparent),
|
||||
4: (0 0 transparent),
|
||||
5: (0 0 transparent),
|
||||
6: (0 0 transparent),
|
||||
7: (0 0 transparent),
|
||||
8: (0 0 transparent),
|
||||
9: (0 0 transparent),
|
||||
10: (0 0 transparent),
|
||||
11: (0 0 transparent),
|
||||
12: (0 0 transparent),
|
||||
13: (0 0 transparent),
|
||||
14: (0 0 transparent),
|
||||
15: (0 0 transparent),
|
||||
16: (0 0 transparent),
|
||||
17: (0 0 transparent),
|
||||
18: (0 0 transparent),
|
||||
19: (0 0 transparent),
|
||||
20: (0 0 transparent),
|
||||
21: (0 0 transparent),
|
||||
22: (0 0 transparent),
|
||||
23: (0 0 transparent),
|
||||
24: (0 0 transparent),
|
||||
) !default,
|
||||
|
||||
// 👉 Typography
|
||||
$typography: (
|
||||
"h1": (
|
||||
"size": 2.375rem,
|
||||
"weight": 500,
|
||||
"line-height": 3.25rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"h2": (
|
||||
"size": 2rem,
|
||||
"weight": 500,
|
||||
"line-height": 2.75rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"h3": (
|
||||
"size": 1.625rem,
|
||||
"weight": 500,
|
||||
"line-height": 2.25rem
|
||||
),
|
||||
"h4": (
|
||||
"size": 1.375rem,
|
||||
"weight": 500,
|
||||
"line-height": 1.875rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"h5": (
|
||||
"size": $typography-h5-font-size,
|
||||
"weight": 500,
|
||||
"line-height": 1.5rem
|
||||
),
|
||||
"h6":(
|
||||
"size": 0.9375rem,
|
||||
"line-height": 1.3125rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"body-1":(
|
||||
"size": $typography-body-1-font-size,
|
||||
"line-height": $typography-body-1-line-height,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"body-2": (
|
||||
"size": 0.8125rem,
|
||||
"line-height": 1.25rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"subtitle-2": (
|
||||
"line-height": 1.32rem,
|
||||
"letter-spacing": 0.0063rem
|
||||
),
|
||||
"button": (
|
||||
"size": 0.9375rem,
|
||||
"weight": 500,
|
||||
"line-height": 1.125rem,
|
||||
"letter-spacing": 0.0269rem,
|
||||
"text-transform": capitalize
|
||||
),
|
||||
"caption":(
|
||||
"size": 0.6875rem,
|
||||
"line-height": 0.875rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"overline": (
|
||||
"line-height": 2.66rem,
|
||||
"letter-spacing": 0.0625rem,
|
||||
)
|
||||
) !default,
|
||||
|
||||
// 👉 Alert
|
||||
$alert-density: ("default": 0, "comfortable": -0.75, "compact": -2) !default,
|
||||
$alert-title-font-size: 1.125rem !default,
|
||||
$alert-title-line-height: 1.5rem !default,
|
||||
$alert-border-opacity: 0.38 !default,
|
||||
$alert-padding: 14.75px !default,
|
||||
$alert-prepend-margin-inline-end: 0.6rem !default,
|
||||
|
||||
// 👉 Avatar
|
||||
$avatar-height: 38px !default,
|
||||
$avatar-width: 38px !default,
|
||||
|
||||
// 👉 Badge
|
||||
$badge-dot-height: 8px !default,
|
||||
$badge-dot-width: 8px !default,
|
||||
$badge-min-width: 24px !default,
|
||||
$badge-height: 1.5rem !default,
|
||||
$badge-font-size: 0.8125rem !default,
|
||||
$badge-border-radius: 12px !default,
|
||||
$badge-border-color: rgb(var(--v-theme-surface)) !default,
|
||||
|
||||
// 👉 Chip
|
||||
$chip-font-size: 0.9375rem !default,
|
||||
$chip-font-weight: 500 !default,
|
||||
$chip-label-border-radius: 0.25rem !default,
|
||||
$chip-height: 30px !default,
|
||||
$chip-padding-ratio: 1.7 + math.div(2, 3) !default,
|
||||
|
||||
// 👉 Button
|
||||
$button-height: 38px !default,
|
||||
$button-padding-ratio: 1.9 !default,
|
||||
$button-elevation: ("default": 2, "hover": 4, "active": 2) !default,
|
||||
$button-icon-font-size: 0.9375rem !default,
|
||||
|
||||
// 👉 Dialog
|
||||
$dialog-card-header-padding: 20px 24px 0 !default,
|
||||
$dialog-card-header-text-padding-top: 20px !default,
|
||||
$dialog-card-text-padding: 20px 24px 20px !default,
|
||||
$dialog-elevation: 18 !default,
|
||||
|
||||
// 👉 Card
|
||||
$card-title-font-size: $typography-h5-font-size !default,
|
||||
$card-text-font-size: $typography-body-1-font-size !default,
|
||||
$card-title-line-height: 1.65rem !default,
|
||||
$card-text-padding: 24px !default,
|
||||
$card-text-line-height:1.5 !default,
|
||||
$card-item-padding: 24px !default,
|
||||
$card-subtitle-opacity: 1 !default,
|
||||
$card-elevation: 7 !default,
|
||||
|
||||
// 👉 Expansion panel
|
||||
$expansion-panel-title-padding: 15px 18px !default,
|
||||
$expansion-panel-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
|
||||
$expansion-panel-active-title-min-height: 48px !default,
|
||||
$expansion-panel-title-min-height: 48px !default,
|
||||
$expansion-panel-text-padding: 0 18px 12px !default,
|
||||
|
||||
// 👉 Field
|
||||
// body font size
|
||||
$field-font-size: 0.9375rem !default,
|
||||
|
||||
// 👉 List
|
||||
$list-density: ("default": 0, "comfortable": -1.5, "compact": -2.5) !default,
|
||||
$list-border-radius: 6px !default,
|
||||
$list-item-padding: 4px 20px !default,
|
||||
$list-item-two-line-padding: 12px 20px !default,
|
||||
$list-item-three-line-padding: 16px 20px !default,
|
||||
$list-item-icon-margin-end: 10px !default,
|
||||
$list-item-icon-margin-start : 10px !default,
|
||||
$list-subheader-font-weight: 500 !default,
|
||||
|
||||
// 👉 Label
|
||||
$label-font-size: 0.9375rem !default,
|
||||
|
||||
// 👉 Menu
|
||||
$menu-elevation: 6 !default,
|
||||
|
||||
// 👉 Pagination
|
||||
$pagination-item-margin: 0.1875rem !default,
|
||||
|
||||
// 👉 ProgressLinear
|
||||
$progress-linear-background-opacity: 0.08 !default,
|
||||
|
||||
// 👉 RangeSlider
|
||||
$slider-track-active-size: 0.375rem !default,
|
||||
$slider-thumb-label-padding: 4px 8px !default,
|
||||
$slider-thumb-label-font-size: 0.8125rem !default,
|
||||
|
||||
// 👉 Select
|
||||
$select-chips-margin-bottom: ("default": 1, "comfortable": 1, "compact": 1) !default,
|
||||
|
||||
// 👉 Snackbar
|
||||
$snackbar-background: rgb(var(--v-tooltip-background)) !default,
|
||||
$snackbar-color: rgb(var(--v-theme-on-primary)) !default,
|
||||
$snackbar-font-size: 0.9375rem !default,
|
||||
|
||||
// 👉 Tabs
|
||||
$tabs-height: 42px !default,
|
||||
|
||||
// 👉 Tooltip
|
||||
$tooltip-background-color: rgb(var(--v-tooltip-background)) !default,
|
||||
$tooltip-font-size: 0.9375rem !default,
|
||||
$tooltip-padding: 4.5px 13px !default,
|
||||
|
||||
// 👉 Timeline
|
||||
$timeline-dot-size: 34px !default,
|
||||
$timeline-dot-divider-background: rgba(var(--v-border-color),0.08) !default,
|
||||
);
|
||||
@@ -0,0 +1 @@
|
||||
@use "@core-scss/base/libs/vuetify";
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
.layout-blank {
|
||||
.auth-wrapper {
|
||||
min-block-size: calc(var(--vh, 1vh) * 100);
|
||||
}
|
||||
|
||||
.auth-v1-top-shape,
|
||||
.auth-v1-bottom-shape {
|
||||
position: absolute;
|
||||
block-size: 233px;
|
||||
inline-size: 238px;
|
||||
}
|
||||
|
||||
.auth-footer-mask {
|
||||
position: absolute;
|
||||
inset-block-end: 0;
|
||||
min-inline-size: 100%;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
.auth-illustration {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.auth-v1-top-shape {
|
||||
inset-block-start: -77px;
|
||||
inset-inline-start: -40px;
|
||||
}
|
||||
|
||||
.auth-v1-bottom-shape {
|
||||
inset-block-end: -55px;
|
||||
inset-inline-end: -55px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.skin--bordered {
|
||||
.auth-card-v2 {
|
||||
border-inline-start: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@use "@core-scss/base/mixins";
|
||||
|
||||
%default-layout-horizontal-nav-navbar-and-nav-container {
|
||||
@include mixins.elevation(2);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
@use "@configured-variables" 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: 1.5rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
@use "@core-scss/base/mixins";
|
||||
|
||||
// Horizontal nav item icon (Including sub nav items)
|
||||
%horizontal-nav-item-icon {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
|
||||
// Horizontal nav item styles (including nested)
|
||||
%horizontal-nav-item {
|
||||
padding-block: 0.485rem;
|
||||
padding-inline: 0.7rem;
|
||||
}
|
||||
|
||||
%nav-group-label-and-nav-link-style {
|
||||
border-radius: 0.375rem;
|
||||
margin-block: 0.25rem;
|
||||
margin-inline: 0.5rem;
|
||||
}
|
||||
|
||||
// Active styles for sub nav link
|
||||
%horizontal-nav-sub-nav-link-active {
|
||||
background: rgba(var(--v-theme-primary), 0.08);
|
||||
|
||||
// Remove before pseudo element from sub nav link to avoid overlapping with active state
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Popper content styles
|
||||
%horizontal-nav-popper-content {
|
||||
@include mixins.elevation(6);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@forward "nav";
|
||||
@forward "vertical-nav";
|
||||
@forward "horizontal-nav";
|
||||
@forward "default-layout-vertical-nav";
|
||||
@forward "default-layout-horizontal-nav";
|
||||
@@ -0,0 +1,16 @@
|
||||
// ℹ️ 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: linear-gradient(72.47deg, rgb(var(--v-global-theme-primary)) 22.16%, rgba(var(--v-global-theme-primary), 0.7) 76.47%) !important;
|
||||
box-shadow: 0 2px 6px rgba(var(--v-global-theme-primary), 0.48);
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
@use "sass:map";
|
||||
@use "@core-scss/base/mixins";
|
||||
@use "@configured-variables" 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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@use "bordered";
|
||||
Reference in New Issue
Block a user