initial commit

This commit is contained in:
Inshal
2024-10-25 19:58:19 +05:00
commit 2046156f90
1558 changed files with 210706 additions and 0 deletions

View File

@@ -0,0 +1,189 @@
@use "mixins";
@use "@layouts/styles/placeholders";
@use "@layouts/styles/mixins" as layoutMixins;
@use "@configured-variables" as variables;
@use "@styles/variables/_vuetify.scss" as vuetify;
// 👉 Avatar group
.v-avatar-group {
display: flex;
align-items: center;
> * {
&:not(:first-child) {
margin-inline-start: -0.8rem;
}
transition: transform 0.25s ease, box-shadow 0.15s ease;
&:hover {
z-index: 2;
transform: translateY(-5px) scale(1.05);
@include mixins.elevation(3);
}
}
> .v-avatar {
border: 2px solid rgb(var(--v-theme-surface));
transition: transform 0.15s ease;
}
}
// 👉 Button outline with default color border color
.v-alert--variant-outlined,
.v-avatar--variant-outlined,
.v-btn.v-btn--variant-outlined,
.v-card--variant-outlined,
.v-chip--variant-outlined,
.v-list-item--variant-outlined {
&:not([class*="text-"]) {
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
}
&.text-default {
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
}
}
// 👉 Custom Input
.v-label.custom-input {
padding: 1rem;
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
opacity: 1;
white-space: normal;
&:hover {
border-color: rgba(var(--v-border-color), 0.25);
}
&.active {
border-color: rgb(var(--v-theme-primary));
.v-icon {
color: rgb(var(--v-theme-primary)) !important;
}
}
&.custom-checkbox,
&.custom-radio{
.v-input__control{
grid-area: none;
}
}
}
// 👉 Datatable
.v-data-table-footer__pagination {
@include layoutMixins.rtl {
.v-btn {
.v-icon {
transform: rotate(180deg);
}
}
}
}
// Dialog responsive width
.v-dialog {
// dialog custom close btn
.v-dialog-close-btn {
position: absolute;
z-index: 1;
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
inset-block-start: 0.8rem;
inset-inline-end: 0.6rem;
.v-btn__overlay {
display: none;
}
}
.v-card {
@extend %style-scroll-bar;
}
}
@media (min-width: 600px) {
.v-dialog {
&.v-dialog-sm,
&.v-dialog-lg,
&.v-dialog-xl {
.v-overlay__content {
inline-size: 565px !important;
}
}
}
}
@media (min-width: 960px) {
.v-dialog {
&.v-dialog-lg,
&.v-dialog-xl {
.v-overlay__content {
inline-size: 865px !important;
}
}
}
}
@media (min-width: 1264px) {
.v-dialog.v-dialog-xl {
.v-overlay__content {
inline-size: 1165px !important;
}
}
}
// 👉 Expansion panel
.v-expansion-panels.customized-panels {
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
border-radius: vuetify.$border-radius-root;
.v-expansion-panel-title {
background-color: rgb(var(--v-theme-expansion-panel-text-custom-bg));
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
margin-block-end: -1px;
}
.v-expansion-panel-text__wrapper {
padding: 20px;
}
}
// v-tab with pill support
.v-tabs.v-tabs-pill {
.v-tab.v-btn {
border-radius: 0.25rem !important;
transition: none;
.v-tab__slider {
visibility: hidden;
}
}
}
// loop for all colors bg
@each $color-name in variables.$theme-colors-name {
.v-tabs.v-tabs-pill {
.v-slide-group-item--active.v-tab--selected.text-#{$color-name} {
background-color: rgb(var(--v-theme-#{$color-name}));
color: rgb(var(--v-theme-on-#{$color-name})) !important;
}
}
}
// We are make even width of all v-timeline body
.v-timeline--vertical.v-timeline {
.v-timeline-item {
.v-timeline-item__body {
justify-self: stretch !important;
}
}
}
// 👉 Switch
.v-switch .v-selection-control:not(.v-selection-control--dirty) .v-switch__thumb {
color: #fff !important;
}

View File

@@ -0,0 +1,16 @@
@use "@configured-variables" as variables;
// ————————————————————————————————————
// * ——— Perfect Scrollbar
// ————————————————————————————————————
body.v-theme--dark {
.ps__rail-y,
.ps__rail-x {
background-color: transparent !important;
}
.ps__thumb-y {
background-color: variables.$plugin-ps-thumb-y-dark;
}
}

View File

@@ -0,0 +1,45 @@
@use "@core-scss/base/placeholders" as *;
@use "@core-scss/template/placeholders" as *;
@use "@core-scss/base/mixins";
.layout-wrapper.layout-nav-type-horizontal {
.layout-navbar-and-nav-container {
@extend %default-layout-horizontal-nav-navbar-and-nav-container;
}
// 👉 Navbar
.layout-navbar {
@extend %default-layout-horizontal-nav-navbar;
}
// 👉 Layout content container
.navbar-content-container {
display: flex;
align-items: center;
block-size: 100%;
}
.layout-horizontal-nav {
@extend %default-layout-horizontal-nav-nav;
.nav-items {
@extend %default-layout-horizontal-nav-nav-items-list;
}
}
// 👉 App footer
.layout-footer {
@at-root {
.layout-footer-sticky#{&} {
background-color: rgb(var(--v-theme-surface));
@include mixins.elevation(3);
}
}
}
// TODO: Use Vuetify grid sass variable here
.layout-page-content {
padding-block: 1.5rem;
}
}

View File

@@ -0,0 +1,103 @@
@use "@configured-variables" as variables;
@use "@core-scss/base/placeholders" as *;
@use "@core-scss/template/placeholders" as *;
@use "misc";
@use "@core-scss/base/mixins";
$header: ".layout-navbar";
@if variables.$layout-vertical-nav-navbar-is-contained {
$header: ".layout-navbar .navbar-content-container";
}
.layout-wrapper.layout-nav-type-vertical {
// SECTION Layout Navbar
// 👉 Elevated navbar
@if variables.$vertical-nav-navbar-style == "elevated" {
// Add transition
#{$header} {
transition: padding 0.2s ease, background-color 0.18s ease;
}
// If navbar is contained => Add border radius to header
@if variables.$layout-vertical-nav-navbar-is-contained {
#{$header} {
border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
}
}
// Scrolled styles for sticky navbar
@at-root {
/* This html selector with not selector is required when:
dialog is opened and window don't have any scroll. This removes window-scrolled class from layout and our style broke
*/
html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-sticky,
&.window-scrolled.layout-navbar-sticky {
#{$header} {
@extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav;
@extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
}
.navbar-blur#{$header} {
@extend %blurry-bg;
}
}
}
}
// 👉 Floating navbar
@else if variables.$vertical-nav-navbar-style == "floating" {
// Regardless of navbar is contained or not => Apply overlay to .layout-navbar
.layout-navbar {
&.navbar-blur {
@extend %default-layout-vertical-nav-floating-navbar-overlay;
}
}
&:not(.layout-navbar-sticky) {
#{$header} {
margin-block-start: variables.$vertical-nav-floating-navbar-top;
}
}
#{$header} {
@if variables.$layout-vertical-nav-navbar-is-contained {
border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
}
background-color: rgb(var(--v-theme-surface));
@extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
}
.navbar-blur#{$header} {
@extend %blurry-bg;
}
}
// !SECTION
// 👉 Layout footer
.layout-footer {
$ele-layout-footer: &;
.footer-content-container {
border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness 0 0;
// 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 {
background-color: rgb(var(--v-theme-surface));
padding-block: 0;
padding-inline: 1.2rem;
@include mixins.elevation(3);
}
}
}
}
}
}

View File

@@ -0,0 +1,16 @@
@use "@core-scss/base/placeholders";
@use "@core-scss/base/variables";
.layout-vertical-nav,
.layout-horizontal-nav {
ol,
ul {
list-style: none;
}
}
.layout-navbar {
@if variables.$navbar-high-emphasis-text {
@extend %layout-navbar;
}
}

View File

@@ -0,0 +1,194 @@
@use "@core-scss/base/placeholders" as *;
@use "@core-scss/template/placeholders" as *;
@use "@configured-variables" as variables;
@use "@layouts/styles/mixins" as layoutsMixins;
@use "@core-scss/base/mixins";
@use "vuetify/lib/styles/tools/states" as vuetifyStates;
.layout-horizontal-nav {
@extend %nav;
// 👉 Icon styles
.nav-item-icon {
@extend %horizontal-nav-item-icon;
}
// 👉 Common styles for nav group & nav link
.nav-link,
.nav-group {
// 👉 Disabled nav items
&.disabled {
@extend %horizontal-nav-disabled;
}
// Set width of inner nav group and link
&.sub-item {
@extend %horizontal-nav-subitem;
}
}
// SECTION Nav Link
.nav-link {
@extend %nav-link;
a {
@extend %horizontal-nav-item;
// Adds before psudo element to style hover state
@include mixins.before-pseudo;
// Adds vuetify states
@include vuetifyStates.states($active: false);
}
// 👉 Top level nav link
&:not(.sub-item) {
a {
@extend %horizontal-nav-top-level-item;
&.router-link-active {
@extend %nav-link-active;
}
}
}
// 👉 Sub link
&.sub-item {
a {
&.router-link-active {
// We will not use active styles from material here because we want to use primary color for active link
@extend %horizontal-nav-sub-nav-link-active;
}
}
}
}
// !SECTION
// SECTION Nav Group
.nav-group {
.popper-triggerer {
.nav-group-label {
@extend %horizontal-nav-item;
}
}
> .popper-triggerer > .nav-group-label {
// Adds before psudo element to style hover state
@include mixins.before-pseudo;
// Adds vuetify states
@include vuetifyStates.states($active: false);
}
.popper-content {
@extend %horizontal-nav-popper-content-hidden;
@extend %horizontal-nav-popper-content;
background-color: rgb(var(--v-theme-surface));
// Set max-height for the popper content
> div {
max-block-size: variables.$horizontal-nav-popper-content-max-height;
}
}
// 👉 Top level group
&:not(.sub-item) {
> .popper-triggerer {
position: relative;
/*
The Bridge
This after pseudo will work as bridge when we have space between popper triggerer and popper content
Initially it will have pointer events none for normal behavior and once the content is shown it will
work as bridge by setting pointer events to `auto`
*/
&::after {
position: absolute;
block-size: variables.$horizontal-nav-popper-content-top;
content: "";
inline-size: 100%;
inset-block-start: 100%;
inset-inline-start: 0;
pointer-events: none;
}
}
// Enable the pseudo bridge when content is shown by setting pointer events to `auto`
&.show-content > .popper-triggerer::after {
/*
We have added `z-index: 2` because when there is horizontal nav item below the popper trigger (group)
without this style nav item below popper trigger (group) gets focus hence closes the popper content
*/
z-index: 2;
pointer-events: auto;
}
> .popper-triggerer > .nav-group-label {
@extend %horizontal-nav-top-level-item;
}
&.active {
> .popper-triggerer > .nav-group-label {
@extend %nav-link-active;
}
}
> .popper-content {
// Add space between popper wrapper & content
margin-block-start: variables.$horizontal-nav-popper-content-top !important;
}
}
// 👉 Sub group
&.sub-item {
&.active {
@include mixins.selected-states("> .popper-triggerer > .nav-group-label::before");
}
// Reduce the icon's size of nested group's nav links (Top level group > Sub group > [Nav links])
.sub-item {
.nav-item-icon {
@extend %third-level-nav-item-icon;
}
}
}
.nav-group-arrow {
font-size: variables.$horizontal-nav-group-arrow-icon-size;
/*
ml-auto won't matter in top level group (because we haven't specified fixed width for top level groups)
but we wrote generally because we don't want to become so specific
*/
margin-inline-start: auto;
}
&.popper-inline-end {
.nav-group-arrow {
transform: rotateZ(270deg);
@include layoutsMixins.rtl {
transform: rotateZ(90deg);
}
}
}
.nav-item-title {
@extend %horizontal-nav-item-title;
}
&.show-content {
> .popper-content {
@extend %horizontal-nav-popper-content-visible;
}
&:not(.active) {
@include mixins.selected-states("> .popper-triggerer > .nav-group-label::before");
}
}
}
// !SECTION
}

View File

@@ -0,0 +1,48 @@
@use "sass:map";
// Layout
@use "vertical-nav";
@use "horizontal-nav";
@use "default-layout";
@use "default-layout-w-vertical-nav";
@use "default-layout-w-horizontal-nav";
// Layouts package
@use "layouts";
// Skins
@use "skins";
// Components
@use "components";
// Utilities
@use "utilities";
// Route Transitions
@use "route-transitions";
// Misc
@use "misc";
// Dark
@use "dark";
// libs
@use "libs/perfect-scrollbar";
a {
color: rgb(var(--v-theme-primary));
text-decoration: none;
}
// Vuetify 3 don't provide margin bottom style like vuetify 2
p {
margin-block-end: 1rem;
}
// Iconify icon size
svg.iconify {
block-size: 1em;
inline-size: 1em;
}

View File

@@ -0,0 +1,63 @@
@use "@configured-variables" as variables;
/* This styles extends the existing layout package's styles for handling cases that aren't related to layouts package */
/*
When we use v-layout as immediate first child of `.page-content-container`, it adds display:flex and page doesn't get contained height
*/
// .layout-wrapper.layout-nav-type-vertical {
// &.layout-content-height-fixed {
// .page-content-container {
// > .v-layout:first-child > :not(.v-navigation-drawer):first-child {
// flex-grow: 1;
// block-size: 100%;
// }
// }
// }
// }
.layout-wrapper.layout-nav-type-vertical {
&.layout-content-height-fixed {
.page-content-container {
> .v-layout:first-child {
overflow: hidden;
min-block-size: 100%;
> .v-main {
// overflow-y: auto;
.v-main__wrap > :first-child {
block-size: 100%;
overflow-y: auto;
}
}
}
}
}
}
// Let div/v-layout take full height. E.g. Email App
.layout-wrapper.layout-nav-type-horizontal {
&.layout-content-height-fixed {
> .layout-page-content {
display: flex;
}
}
}
// 👉 Floating navbar styles
@if variables.$vertical-nav-navbar-style == "floating" {
// Add spacing above navbar if navbar is floating (was in %layout-navbar-sticky placeholder)
body .layout-wrapper.layout-nav-type-vertical.layout-navbar-sticky {
.layout-navbar {
inset-block-start: variables.$vertical-nav-floating-navbar-top;
}
/*
If it's floating navbar
Add `vertical-nav-floating-navbar-top` as margin top to .layout-page-content
*/
.layout-page-content {
margin-block-start: variables.$vertical-nav-floating-navbar-top;
}
}
}

View File

@@ -0,0 +1,20 @@
// scrollable-content allows creating fixed header and scrollable content for VNavigationDrawer (Used when perfect scrollbar is used)
.scrollable-content {
&.v-navigation-drawer {
.v-navigation-drawer__content {
display: flex;
overflow: hidden;
flex-direction: column;
}
}
}
// adding styling for code tag
code {
border-radius: 3px;
color: rgb(var(--v-code-color));
font-size: 90%;
font-weight: 400;
padding-block: 0.2em;
padding-inline: 0.4em;
}

View File

@@ -0,0 +1,63 @@
@use "sass:map";
@use "@styles/variables/_vuetify.scss";
@mixin elevation($z, $important: false) {
box-shadow: map.get(vuetify.$shadow-key-umbra, $z), map.get(vuetify.$shadow-key-penumbra, $z), map.get(vuetify.$shadow-key-ambient, $z) if($important, !important, null);
}
// #region before-pseudo
// This mixin is inspired from vuetify for adding hover styles via before pseudo element
@mixin before-pseudo() {
position: relative;
&::before {
position: absolute;
border-radius: inherit;
background: currentcolor;
block-size: 100%;
content: "";
inline-size: 100%;
inset: 0;
opacity: 0;
pointer-events: none;
}
}
// #endregion before-pseudo
@mixin bordered-skin($component, $border-property: "border", $important: false) {
#{$component} {
// background-color: rgb(var(--v-theme-background));
box-shadow: none !important;
#{$border-property}: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) if($important, !important, null);
}
}
// #region selected-states
// Inspired from vuetify's active-states mixin
// focus => 0.12 & selected => 0.08
@mixin selected-states($selector) {
#{$selector} {
opacity: calc(var(--v-selected-opacity) * var(--v-theme-overlay-multiplier));
}
&:hover
#{$selector} {
opacity: calc(var(--v-selected-opacity) + var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
}
&:focus-visible
#{$selector} {
opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
}
@supports not selector(:focus-visible) {
&:focus {
#{$selector} {
opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
}
}
}
}
// #endregion selected-states

View File

@@ -0,0 +1,70 @@
// 👉 Zoom fade
.app-transition-zoom-fade-enter-active,
.app-transition-zoom-fade-leave-active {
transition: transform 0.35s, opacity 0.28s ease-in-out;
}
.app-transition-zoom-fade-enter-from {
opacity: 0;
transform: scale(0.98);
}
.app-transition-zoom-fade-leave-to {
opacity: 0;
transform: scale(1.02);
}
// 👉 Fade
.app-transition-fade-enter-active,
.app-transition-fade-leave-active {
transition: opacity 0.25s ease-in-out;
}
.app-transition-fade-enter-from,
.app-transition-fade-leave-to {
opacity: 0;
}
// 👉 Fade bottom
.app-transition-fade-bottom-enter-active,
.app-transition-fade-bottom-leave-active {
transition: opacity 0.3s, transform 0.35s;
}
.app-transition-fade-bottom-enter-from {
opacity: 0;
transform: translateY(-0.6rem);
}
.app-transition-fade-bottom-leave-to {
opacity: 0;
transform: translateY(0.6rem);
}
// 👉 Slide fade
.app-transition-slide-fade-enter-active,
.app-transition-slide-fade-leave-active {
transition: opacity 0.3s, transform 0.35s;
}
.app-transition-slide-fade-enter-from {
opacity: 0;
transform: translateX(-0.6rem);
}
.app-transition-slide-fade-leave-to {
opacity: 0;
transform: translateX(0.6rem);
}
// 👉 Zoom out
.app-transition-zoom-out-enter-active,
.app-transition-zoom-out-leave-active {
transition: opacity 0.26s ease-in-out, transform 0.3s ease-out;
}
.app-transition-zoom-out-enter-from,
.app-transition-zoom-out-leave-to {
opacity: 0;
transform: scale(0.98);
}

View File

@@ -0,0 +1,176 @@
@use "@configured-variables" as variables;
@use "@layouts/styles/mixins" as layoutsMixins;
// 👉 Demo spacers
// TODO: Use vuetify SCSS variable here
$card-spacer-content: 16px;
.demo-space-x {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-block-start: -$card-spacer-content;
& > * {
margin-block-start: $card-spacer-content;
margin-inline-end: $card-spacer-content;
}
}
.demo-space-y {
& > * {
margin-block-end: $card-spacer-content;
&:last-child {
margin-block-end: 0;
}
}
}
// 👉 Card match height
.match-height.v-row {
.v-card {
block-size: 100%;
}
}
// 👉 Whitespace
.whitespace-no-wrap {
white-space: nowrap;
}
// 👉 Colors
/*
Vuetify is applying `.text-white` class to badge icon but don't provide its styles
Moreover, we also use this class in some places
In vuetify 2 with `$color-pack: false` SCSS var config this class was getting generated but this is not the case in v3
We also need !important to get correct color in badge icon
*/
.text-white {
color: #fff !important;
}
.text-white-variant {
color: rgba(255, 255, 255, var(--v-high-emphasis-opacity));
}
.bg-var-theme-background {
background-color: rgba(var(--v-theme-on-background), var(--v-hover-opacity)) !important;
}
.bg-global-primary {
background-color: rgb(var(--v-global-theme-primary)) !important;
color: rgb(var(--v-theme-on-primary)) !important;
}
// [/^bg-light-(\w+)$/, ([, w]) => ({ backgroundColor: `rgba(var(--v-theme-${w}), var(--v-activated-opacity))` })],
@each $color-name in variables.$theme-colors-name {
.bg-light-#{$color-name} {
background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important;
}
}
// 👉 clamp text
.clamp-text {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}
.custom-badge {
.v-badge__badge {
border-radius: 6px !important;
block-size: 12px !important;
inline-size: 12px !important;
}
}
.leading-normal {
line-height: normal !important;
}
// 👉 for rtl only
.flip-in-rtl {
@include layoutsMixins.rtl {
transform: scaleX(-1);
}
}
// 👉 Carousel
.carousel-delimiter-top-end {
.v-carousel__controls {
justify-content: end;
block-size: 40px;
inset-block-start: 0;
padding-inline: 1rem;
.v-btn--icon.v-btn--density-default {
block-size: calc(var(--v-btn-height) + -10px);
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
inline-size: calc(var(--v-btn-height) + -8px);
&.v-btn--active {
color: #fff;
}
.v-btn__overlay {
opacity: 0;
}
.v-ripple__container {
display: none;
}
.v-btn__content {
.v-icon {
block-size: 8px !important;
inline-size: 8px !important;
}
}
}
}
@each $color-name in variables.$theme-colors-name {
&.dots-active-#{$color-name} {
.v-carousel__controls {
.v-btn--active {
color: rgb(var(--v-theme-#{$color-name})) !important;
}
}
}
}
}
.v-timeline-item {
.app-timeline-title {
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
font-size: 16px;
font-weight: 500;
line-height: 1.3125rem;
}
.app-timeline-meta {
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
font-size: 12px;
line-height: 0.875rem;
}
.app-timeline-text {
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
font-size: 14px;
line-height: 1.25rem;
}
.timeline-chip{
border-radius: 6px;
background: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
padding-block: 5px;
padding-inline: 10px
}
}

View File

@@ -0,0 +1,90 @@
@use "sass:map";
@use "sass:list";
@use "@configured-variables" as variables;
// Thanks: https://css-tricks.com/snippets/sass/deep-getset-maps/
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map.get($map, $key);
}
@return $map;
}
@function map-deep-set($map, $keys, $value) {
$maps: ($map,);
$result: null;
// If the last key is a map already
// Warn the user we will be overriding it with $value
@if type-of(nth($keys, -1)) == "map" {
@warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
}
// If $keys is a single key
// Just merge and return
@if length($keys) == 1 {
@return map-merge($map, ($keys: $value));
}
// Loop from the first to the second to last key from $keys
// Store the associated map to this key in the $maps list
// If the key doesn't exist, throw an error
@for $i from 1 through length($keys) - 1 {
$current-key: list.nth($keys, $i);
$current-map: list.nth($maps, -1);
$current-get: map.get($current-map, $current-key);
@if not $current-get {
@error "Key `#{$key}` doesn't exist at current level in map.";
}
$maps: list.append($maps, $current-get);
}
// Loop from the last map to the first one
// Merge it with the previous one
@for $i from length($maps) through 1 {
$current-map: list.nth($maps, $i);
$current-key: list.nth($keys, $i);
$current-val: if($i == list.length($maps), $value, $result);
$result: map.map-merge($current-map, ($current-key: $current-val));
}
// Return result
@return $result;
}
// font size utility classes
@each $name, $size in variables.$font-sizes {
.text-#{$name} {
font-size: $size;
line-height: map.get(variables.$font-line-height, $name);
}
}
// truncate utility class
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// gap utility class
@each $name, $size in variables.$gap {
.gap-#{$name} {
gap: $size;
}
.gap-x-#{$name} {
column-gap: $size;
}
.gap-y-#{$name} {
row-gap: $size;
}
}
.list-none {
list-style-type: none;
}

View File

@@ -0,0 +1,200 @@
@use "vuetify/lib/styles/tools/functions" as *;
/*
TODO: Add docs on when to use placeholder vs when to use SASS variable
Placeholder
- When we want to keep customization to our self between templates use it
Variables
- When we want to allow customization from both user and our side
- You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header)
*/
@forward "@layouts/styles/variables" with (
// Adjust z-index so vertical nav & overlay stays on top of v-layout in v-main. E.g. Email app
$layout-vertical-nav-z-index: 1003,
$layout-overlay-z-index: 1002,
);
@use "@layouts/styles/variables" as *;
// 👉 Default layout
$navbar-high-emphasis-text: true !default;
// @forward "@layouts/styles/variables" with (
// $layout-vertical-nav-width: 350px !default,
// );
$theme-colors-name: (
"primary",
"secondary",
"error",
"info",
"success",
"warning"
) !default;
// 👉 Default layout with vertical nav
$default-layout-with-vertical-nav-navbar-footer-roundness: 10px !default;
// 👉 Vertical nav
$vertical-nav-background-color-rgb: var(--v-theme-background) !default;
$vertical-nav-background-color: rgb(#{$vertical-nav-background-color-rgb}) !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: 1rem !default;
$vertical-nav-horizontal-padding: 0.75rem !default;
// Vertical nav header height. Mostly we will align it with navbar height;
$vertical-nav-header-height: $layout-vertical-nav-navbar-height !default;
$vertical-nav-navbar-elevation: 3 !default;
$vertical-nav-navbar-style: "elevated" !default; // options: elevated, floating
$vertical-nav-floating-navbar-top: 1rem !default;
// Vertical nav header padding
$vertical-nav-header-padding: 1rem $vertical-nav-horizontal-padding !default;
$vertical-nav-header-inline-spacing: $vertical-nav-horizontal-spacing !default;
// Move logo when vertical nav is mini (collapsed but not hovered)
$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -4px !default;
// Space between logo and title
$vertical-nav-header-logo-title-spacing: 0.9rem !default;
// Section title margin top (when its not first child)
$vertical-nav-section-title-mt: 1.5rem !default;
// Section title margin bottom
$vertical-nav-section-title-mb: 0.5rem !default;
// Vertical nav icons
$vertical-nav-items-icon-size: 1.5rem !default;
$vertical-nav-items-nested-icon-size: 0.9rem !default;
$vertical-nav-items-icon-margin-inline-end: 0.5rem !default;
// Transition duration for nav group arrow
$vertical-nav-nav-group-arrow-transition-duration: 0.15s !default;
// Timing function for nav group arrow
$vertical-nav-nav-group-arrow-transition-timing-function: ease-in-out !default;
// 👉 Horizontal nav
/*
❗ Heads up
==================
Here we assume we will always use shorthand property which will apply same padding on four side
This is because this have been used as value of top property by `.popper-content`
*/
$horizontal-nav-padding: 0.6875rem !default;
// Gap between top level horizontal nav items
$horizontal-nav-top-level-items-gap: 4px !default;
// Horizontal nav icons
$horizontal-nav-items-icon-size: 1.5rem !default;
$horizontal-nav-third-level-icon-size: 0.9rem !default;
$horizontal-nav-items-icon-margin-inline-end: 0.625rem !default;
$horizontal-nav-group-arrow-icon-size: 1.375rem !default;
// We used SCSS variable because we want to allow users to update max height of popper content
// 120px is combined height of navbar & horizontal nav
$horizontal-nav-popper-content-max-height: calc(100dvh - 120px - 4rem) !default;
// This variable is used for horizontal nav popper content's `margin-top` and "The bridge"'s height. We need to sync both values.
$horizontal-nav-popper-content-top: calc($horizontal-nav-padding + 0.375rem) !default;
// 👉 Plugins
$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35) !default;
// 👉 Vuetify
// Used in src/@core-scss/base/libs/vuetify/_overrides.scss
$vuetify-reduce-default-compact-button-icon-size: true !default;
// 👉 Custom variables
// for utility classes
$font-sizes: () !default;
$font-sizes: map-deep-merge(
(
"xs": 0.75rem,
"sm": 0.875rem,
"base": 1rem,
"lg": 1.125rem,
"xl": 1.25rem,
"2xl": 1.5rem,
"3xl": 1.875rem,
"4xl": 2.25rem,
"5xl": 3rem,
"6xl": 3.75rem,
"7xl": 4.5rem,
"8xl": 6rem,
"9xl": 8rem
),
$font-sizes
);
// line height
$font-line-height: () !default;
$font-line-height: map-deep-merge(
(
"xs": 1rem,
"sm": 1.25rem,
"base": 1.5rem,
"lg": 1.75rem,
"xl": 1.75rem,
"2xl": 2rem,
"3xl": 2.25rem,
"4xl": 2.5rem,
"5xl": 1,
"6xl": 1,
"7xl": 1,
"8xl": 1,
"9xl": 1
),
$font-line-height
);
// gap utility class
$gap: () !default;
$gap: map-deep-merge(
(
"0": 0,
"1": 0.25rem,
"2": 0.5rem,
"3": 0.75rem,
"4": 1rem,
"5": 1.25rem,
"6":1.5rem,
"7": 1.75rem,
"8": 2rem,
"9": 2.25rem,
"10": 2.5rem,
"11": 2.75rem,
"12": 3rem,
"14": 3.5rem,
"16": 4rem,
"20": 5rem,
"24": 6rem,
"28": 7rem,
"32": 8rem,
"36": 9rem,
"40": 10rem,
"44": 11rem,
"48": 12rem,
"52": 13rem,
"56": 14rem,
"60": 15rem,
"64": 16rem,
"72": 18rem,
"80": 20rem,
"96": 24rem
),
$gap
);

View File

@@ -0,0 +1,255 @@
@use "@core-scss/base/placeholders" as *;
@use "@core-scss/template/placeholders" as *;
@use "@layouts/styles/mixins" as layoutsMixins;
@use "@configured-variables" as variables;
@use "@core-scss/base/mixins" as mixins;
@use "vuetify/lib/styles/tools/states" as vuetifyStates;
.layout-nav-type-vertical {
// 👉 Layout Vertical nav
.layout-vertical-nav {
$sl-layout-nav-type-vertical: &;
@extend %nav;
@at-root {
// Add styles for collapsed vertical nav
.layout-vertical-nav-collapsed#{$sl-layout-nav-type-vertical}.hovered {
@include mixins.elevation(6);
}
}
background-color: variables.$vertical-nav-background-color;
// 👉 Nav header
.nav-header {
overflow: hidden;
padding: variables.$vertical-nav-header-padding;
margin-inline: variables.$vertical-nav-header-inline-spacing;
min-block-size: variables.$vertical-nav-header-height;
// TEMPLATE: Check if we need to move this to master
.app-logo {
flex-shrink: 0;
transition: transform 0.25s ease-in-out;
@at-root {
// Move logo a bit to align center with the icons in vertical nav mini variant
.layout-vertical-nav-collapsed#{$sl-layout-nav-type-vertical}:not(.hovered) .nav-header .app-logo {
transform: translateX(variables.$vertical-nav-header-logo-translate-x-when-vertical-nav-mini);
@include layoutsMixins.rtl {
transform: translateX(-(variables.$vertical-nav-header-logo-translate-x-when-vertical-nav-mini));
}
}
}
}
.app-title {
margin-inline-start: variables.$vertical-nav-header-logo-title-spacing;
}
.header-action {
@extend %nav-header-action;
}
}
// 👉 Nav items shadow
.vertical-nav-items-shadow {
position: absolute;
z-index: 1;
background:
linear-gradient(
rgb(#{variables.$vertical-nav-background-color-rgb}) 5%,
rgba(#{variables.$vertical-nav-background-color-rgb}, 75%) 45%,
rgba(#{variables.$vertical-nav-background-color-rgb}, 20%) 80%,
transparent
);
block-size: 55px;
inline-size: 100%;
inset-block-start: calc(#{variables.$vertical-nav-header-height} - 2px);
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease-in-out;
will-change: opacity;
@include layoutsMixins.rtl {
transform: translateX(8px);
}
}
&.scrolled {
.vertical-nav-items-shadow {
opacity: 1;
}
}
.ps__rail-y {
// Setting z-index: 1 will make perfect scrollbar thumb appear on top of vertical nav items shadow
z-index: 1;
}
// 👉 Nav section title
.nav-section-title {
@extend %vertical-nav-item;
@extend %vertical-nav-section-title;
margin-block-end: variables.$vertical-nav-section-title-mb;
&:not(:first-child) {
margin-block-start: variables.$vertical-nav-section-title-mt;
}
.placeholder-icon {
margin-inline: auto;
}
}
// Nav item badge
.nav-item-badge {
@extend %vertical-nav-item-badge;
}
// 👉 Nav group & Link
.nav-link,
.nav-group {
overflow: hidden;
> :first-child {
@extend %vertical-nav-item;
@extend %vertical-nav-item-interactive;
}
.nav-item-icon {
@extend %vertical-nav-items-icon;
}
&.disabled {
opacity: var(--v-disabled-opacity);
pointer-events: none;
}
}
// 👉 Vertical nav link
.nav-link {
@extend %nav-link;
> .router-link-exact-active {
@extend %nav-link-active;
}
> a {
// Adds before psudo element to style hover state
@include mixins.before-pseudo;
// Adds vuetify states
&:not(.router-link-active, .router-link-exact-active){
@include vuetifyStates.states($active: false);
}
}
}
// 👉 Vertical nav group
.nav-group {
// Reduce the size of icon if link/group is inside group
.nav-group,
.nav-link {
.nav-item-icon {
@extend %vertical-nav-items-nested-icon;
}
}
// Hide icons after 2nd level
& .nav-group {
.nav-link,
.nav-group {
.nav-item-icon {
@extend %vertical-nav-items-icon-after-2nd-level;
}
}
}
.nav-group-arrow {
flex-shrink: 0;
transform-origin: center;
transition: transform variables.$vertical-nav-nav-group-arrow-transition-duration variables.$vertical-nav-nav-group-arrow-transition-timing-function;
will-change: transform;
}
// Rotate arrow icon if group is opened
&.open {
> .nav-group-label .nav-group-arrow {
transform: rotateZ(90deg);
}
}
// Nav group label
> :first-child {
// Adds before psudo element to style hover state
@include mixins.before-pseudo;
}
&:not(.active,.open) > :first-child {
// Adds vuetify states
@include vuetifyStates.states($active: false);
}
// Active & open states for nav group label
&.active,
&.open {
> :first-child {
@extend %vertical-nav-group-open-active;
}
}
}
}
}
// SECTION: Transitions
.vertical-nav-section-title-enter-active,
.vertical-nav-section-title-leave-active {
transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
.vertical-nav-section-title-enter-from,
.vertical-nav-section-title-leave-to {
opacity: 0;
transform: translateX(15px);
@include layoutsMixins.rtl {
transform: translateX(-15px);
}
}
.transition-slide-x-enter-active,
.transition-slide-x-leave-active {
transition: opacity 0.1s ease-in-out, transform 0.12s ease-in-out;
}
.transition-slide-x-enter-from,
.transition-slide-x-leave-to {
opacity: 0;
transform: translateX(-15px);
@include layoutsMixins.rtl {
transform: translateX(15px);
}
}
.vertical-nav-app-title-enter-active,
.vertical-nav-app-title-leave-active {
transition: opacity 0.1s ease-in-out, transform 0.12s ease-in-out;
}
.vertical-nav-app-title-enter-from,
.vertical-nav-app-title-leave-to {
opacity: 0;
transform: translateX(-15px);
@include layoutsMixins.rtl {
transform: translateX(15px);
}
}
// !SECTION

View File

@@ -0,0 +1,35 @@
$ps-size: 0.25rem;
$ps-hover-size: 0.375rem;
$ps-track-size: 0.5rem;
.ps__thumb-y {
inline-size: $ps-size !important;
inset-inline-end: 0.0625rem;
}
.ps__thumb-x {
block-size: $ps-size !important;
}
.ps__rail-x {
background: transparent !important;
block-size: $ps-track-size;
}
.ps__rail-y {
background: transparent !important;
inline-size: $ps-track-size !important;
inset-inline-end: 0.125rem !important;
inset-inline-start: unset !important;
}
.ps__rail-y.ps--clicking .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y:hover > .ps__thumb-y {
inline-size: $ps-hover-size !important;
}
.ps__thumb-x,
.ps__thumb-y {
background-color: rgb(var(--v-theme-perfect-scrollbar-thumb)) !important;
}

View File

@@ -0,0 +1 @@
@use "overrides";

View File

@@ -0,0 +1,287 @@
@use "@core-scss/base/utils";
@use "@configured-variables" as variables;
// 👉 Application
// We need accurate vh in mobile devices as well
.v-application__wrap {
/* stylelint-disable-next-line liberty/use-logical-spec */
min-height: 100dvh;
}
// 👉 Typography
h1,
h2,
h3,
h4,
h5,
h6,
.text-h1,
.text-h2,
.text-h3,
.text-h4,
.text-h5,
.text-h6,
.text-button,
.text-overline,
.v-card-title {
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
}
body,
.text-body-1,
.text-body-2,
.text-subtitle-1,
.text-subtitle-2 {
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
}
// 👉 Grid
// Remove margin-bottom of v-input_details inside grid (validation error message)
.v-row {
.v-col,
[class^="v-col-*"] {
.v-input__details {
margin-block-end: 0;
}
}
}
// 👉 Button
@if variables.$vuetify-reduce-default-compact-button-icon-size {
.v-btn--density-compact.v-btn--size-default {
.v-btn__content > svg {
block-size: 22px;
font-size: 22px;
inline-size: 22px;
}
}
}
// 👉 Card
// Removes padding-top for immediately placed v-card-text after itself
.v-card-text {
& + & {
padding-block-start: 0 !important;
}
}
/*
👉 Checkbox & Radio Ripple
TODO Checkbox and switch component. Remove it when vuetify resolve the extra spacing: https://github.com/vuetifyjs/vuetify/issues/15519
We need this because form elements likes checkbox and switches are by default set to height of textfield height which is way big than we want
Tested with checkbox & switches
*/
.v-checkbox.v-input,
.v-switch.v-input {
--v-input-control-height: auto;
flex: unset;
}
.v-selection-control--density-comfortable {
&.v-checkbox-btn,
&.v-radio,
&.v-radio-btn {
.v-selection-control__wrapper {
margin-inline-start: -0.5625rem;
}
}
}
.v-selection-control--density-compact {
&.v-radio,
&.v-radio-btn,
&.v-checkbox-btn {
.v-selection-control__wrapper {
margin-inline-start: -0.3125rem;
}
}
}
.v-selection-control--density-default {
&.v-checkbox-btn,
&.v-radio,
&.v-radio-btn {
.v-selection-control__wrapper {
margin-inline-start: -0.6875rem;
}
}
}
.v-radio-group {
.v-selection-control-group {
.v-radio:not(:last-child) {
margin-inline-end: 0.9rem;
}
}
}
/*
👉 Tabs
Disable tab transition
This is for tabs where we don't have card wrapper to tabs and have multiple cards as tab content.
This class will disable transition and adds `overflow: unset` on `VWindow` to allow spreading shadow
*/
.disable-tab-transition {
overflow: unset !important;
.v-window__container {
block-size: auto !important;
}
.v-window-item:not(.v-window-item--active) {
display: none !important;
}
.v-window__container .v-window-item {
transform: none !important;
}
}
// 👉 List
.v-list {
// Set icons opacity to .87
.v-list-item__prepend > .v-icon,
.v-list-item__append > .v-icon {
opacity: var(--v-high-emphasis-opacity);
}
}
// 👉 Card list
/*
Custom class
Remove list spacing inside card
This is because card title gets padding of 20px and list item have padding of 16px. Moreover, list container have padding-bottom as well.
*/
.card-list {
--v-card-list-gap: 20px;
&.v-list {
padding-block: 0;
}
.v-list-item {
min-block-size: unset;
min-block-size: auto !important;
padding-block: 0 !important;
padding-inline: 0 !important;
> .v-ripple__container {
opacity: 0;
}
&:not(:last-child) {
padding-block-end: var(--v-card-list-gap) !important;
}
}
.v-list-item:hover,
.v-list-item:focus,
.v-list-item:active,
.v-list-item.active {
> .v-list-item__overlay {
opacity: 0 !important;
}
}
}
// 👉 Divider
.v-divider {
color: rgb(var(--v-border-color));
}
// 👉 DataTable
.v-data-table {
/* stylelint-disable-next-line no-descending-specificity */
.v-checkbox-btn .v-selection-control__wrapper {
margin-inline-start: 0 !important;
}
.v-selection-control {
display: flex !important;
}
.v-pagination {
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
}
}
.v-data-table-footer {
margin-block-start: 1rem;
}
// 👉 v-field
.v-field:hover .v-field__outline {
--v-field-border-opacity: var(--v-medium-emphasis-opacity);
}
// 👉 VLabel
.v-label {
opacity: 1 !important;
&:not(.v-field-label--floating) {
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
}
}
// 👉 Overlay
.v-overlay__scrim,
.v-navigation-drawer__scrim {
background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity)) !important;
opacity: 1 !important;
}
// 👉 VMessages
.v-messages {
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
opacity: 1 !important;
}
// 👉 Alert close btn
.v-alert__close {
.v-btn--icon .v-icon {
--v-icon-size-multiplier: 1.5;
}
}
// 👉 Badge icon alignment
.v-badge__badge {
display: flex;
align-items: center;
}
// 👉 Btn focus outline style removed
.v-btn:focus-visible::after {
opacity: 0 !important;
}
// .v-select chip spacing for slot
.v-input:not(.v-select--chips) .v-select__selection {
.v-chip {
margin-block: 2px var(--select-chips-margin-bottom);
}
}
// 👉 VCard and VList subtitle color
.v-card-subtitle,
.v-list-item-subtitle {
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
}
// 👉 placeholders
.v-field__input {
@at-root {
& input::placeholder,
input#{&}::placeholder,
textarea#{&}::placeholder {
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
opacity: 1 !important;
}
}
}

View File

@@ -0,0 +1,61 @@
@use "sass:map";
// 👉 Shadow opacities
$shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
$shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
$shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
// 👉 Card transition properties
$card-transition-property-custom: box-shadow, opacity;
@forward "vuetify/settings" with (
// 👉 General settings
$color-pack: false !default,
// 👉 Shadow opacity
$shadow-key-umbra-opacity: $shadow-key-umbra-opacity-custom !default,
$shadow-key-penumbra-opacity: $shadow-key-penumbra-opacity-custom !default,
$shadow-key-ambient-opacity: $shadow-key-ambient-opacity-custom !default,
// 👉 Card
$card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
$card-elevation: 6 !default,
$card-title-line-height: 1.6 !default,
$card-actions-min-height: unset !default,
$card-text-padding: 1.25rem !default,
$card-item-padding: 1.25rem !default,
$card-actions-padding: 0 12px 12px !default,
$card-transition-property: $card-transition-property-custom !default,
$card-subtitle-opacity: 1 !default,
// 👉 Expansion Panel
$expansion-panel-active-title-min-height: 48px !default,
// 👉 List
$list-item-icon-margin-end: 16px !default,
$list-item-icon-margin-start: 16px !default,
$list-item-subtitle-opacity: 1 !default,
// 👉 Tooltip
$tooltip-background-color: rgba(59, 55, 68, 0.9) !default,
$tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
$tooltip-font-size: 0.75rem !default,
$button-icon-density: ("default": 2, "comfortable": 0, "compact": -1 ) !default,
// 👉 VTimeline
$timeline-dot-size: 34px !default,
// 👉 table
$table-transition-property: height !default,
// 👉 VOverlay
$overlay-opacity: 1 !default,
// 👉 VContainer
$container-max-widths: (
"xl": 1440px,
"xxl": 1440px
) !default,
);

View File

@@ -0,0 +1,27 @@
@use "@configured-variables" as variables;
@use "misc";
@use "@core-scss/base/mixins";
%default-layout-horizontal-nav-navbar-and-nav-container {
@include mixins.elevation(3);
// 1000 is v-window z-index
z-index: 1001;
background-color: rgb(var(--v-theme-surface));
&.header-blur {
@extend %blurry-bg;
}
}
%default-layout-horizontal-nav-navbar {
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
}
%default-layout-horizontal-nav-nav {
padding-block: variables.$horizontal-nav-padding;
}
%default-layout-horizontal-nav-nav-items-list {
gap: variables.$horizontal-nav-top-level-items-gap;
}

View File

@@ -0,0 +1,46 @@
@use "@configured-variables" as variables;
@use "misc";
@use "@core-scss/base/mixins";
%default-layout-vertical-nav-scrolled-sticky-elevated-nav {
background-color: rgb(var(--v-theme-surface));
}
%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
@include mixins.elevation(variables.$vertical-nav-navbar-elevation);
// If navbar is contained => Squeeze navbar content on scroll
@if variables.$layout-vertical-nav-navbar-is-contained {
padding-inline: 1.2rem;
}
}
%default-layout-vertical-nav-floating-navbar-overlay {
isolation: isolate;
&::after {
position: absolute;
z-index: -1;
/* stylelint-disable property-no-vendor-prefix */
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
/* stylelint-enable */
background:
linear-gradient(
180deg,
rgba(var(--v-theme-background), 70%) 44%,
rgba(var(--v-theme-background), 43%) 73%,
rgba(var(--v-theme-background), 0%)
);
background-repeat: repeat;
block-size: calc(variables.$layout-vertical-nav-navbar-height + variables.$vertical-nav-floating-navbar-top + 0.5rem);
content: "";
inset-block-start: -(variables.$vertical-nav-floating-navbar-top);
inset-inline-end: 0;
inset-inline-start: 0;
/* stylelint-disable property-no-vendor-prefix */
-webkit-mask: linear-gradient(black, black 18%, transparent 100%);
mask: linear-gradient(black, black 18%, transparent 100%);
/* stylelint-enable */
}
}

View File

@@ -0,0 +1,3 @@
%layout-navbar {
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
}

View File

@@ -0,0 +1,99 @@
@use "@layouts/styles/mixins" as layoutsMixins;
@use "@core-scss/base/variables";
@use "@layouts/styles/placeholders";
@use "@core-scss/base/mixins";
// Horizontal nav item styles (including nested)
%horizontal-nav-item {
padding-block: 0.6rem;
padding-inline: 1rem;
}
// Top level horizontal nav item styles (`a` tag & group label)
%horizontal-nav-top-level-item {
border-radius: 0.4rem;
}
%horizontal-nav-disabled {
opacity: var(--v-disabled-opacity);
pointer-events: none;
}
// Active styles for sub nav link
%horizontal-nav-sub-nav-link-active {
background: rgba(var(--v-theme-primary), 0.1);
color: rgb(var(--v-theme-primary));
}
/*
This style is required when you don't provide any transition to horizontal nav items via themeConfig `themeConfig.horizontalNav.transition`
Also, you have to disable it if you are using transition
*/
// Popper content styles when it's hidden
%horizontal-nav-popper-content-hidden {
// display: none;
// opacity: 0;
// pointer-events: none;
// transform: translateY(7px);
// transition: transform 0.25s ease-in-out, opacity 0.15s ease-in-out;
}
/*
This style is required when you don't provide any transition to horizontal nav items via themeConfig `themeConfig.horizontalNav.transition`
Also, you have to disable it if you are using transition
*/
// Popper content styles when it's shown
%horizontal-nav-popper-content-visible {
// display: block;
// opacity: 1;
// pointer-events: auto;
// pointer-events: auto;
// transform: translateY(0);
}
// Horizontal nav item icon (Including sub nav items)
%horizontal-nav-item-icon {
font-size: variables.$horizontal-nav-items-icon-size;
margin-inline-end: variables.$horizontal-nav-items-icon-margin-inline-end;
}
// Horizontal nav subitem
%horizontal-nav-subitem {
min-inline-size: 12rem;
.nav-item-title {
margin-inline-end: 1rem;
}
}
// Styles for third level item icon/ (e.g. Reduce the icon's size of nested group's nav links (Top level group > Sub group > [Nav links]))
%third-level-nav-item-icon {
font-size: variables.$horizontal-nav-third-level-icon-size;
margin-inline-end: 0.75rem;
/*
`margin-inline` will be (normal icon font-size - small icon font-size) / 2
(1.5rem - 0.9rem) / 2 => 0.6rem / 2 => 0.3rem
*/
margin-inline-start: calc((variables.$horizontal-nav-items-icon-size - variables.$horizontal-nav-third-level-icon-size) / 2);
}
// Horizontal nav item title
%horizontal-nav-item-title {
margin-inline-end: 0.3rem;
white-space: nowrap;
}
// Popper content styles
%horizontal-nav-popper-content {
@include mixins.elevation(4);
border-radius: 6px;
padding-block: 0.3rem;
> div {
@extend %style-scroll-bar;
}
}

View File

@@ -0,0 +1,7 @@
@forward "horizontal-nav";
@forward "vertical-nav";
@forward "nav";
@forward "default-layout";
@forward "default-layout-vertical-nav";
@forward "default-layout-horizontal-nav";
@forward "misc";

View File

@@ -0,0 +1,7 @@
%blurry-bg {
/* stylelint-disable property-no-vendor-prefix */
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
/* stylelint-enable */
background-color: rgb(var(--v-theme-surface), 0.9);
}

View File

@@ -0,0 +1,33 @@
@use "@core-scss/base/mixins";
// This is common style that needs to be applied to both navs
%nav {
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
.nav-item-title {
letter-spacing: 0.15px;
}
.nav-section-title {
letter-spacing: 0.4px;
}
}
/*
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-color: rgb(var(--v-global-theme-primary));
color: rgb(var(--v-theme-on-primary));
@include mixins.elevation(3);
}
%nav-link {
a {
color: inherit;
}
}

View File

@@ -0,0 +1,81 @@
@use "@core-scss/base/mixins";
@use "@configured-variables" as variables;
@use "vuetify/lib/styles/tools/states" as vuetifyStates;
%nav-header-action {
font-size: 1.25rem;
}
// Nav items styles (including section title)
%vertical-nav-item {
margin-block: 0;
margin-inline: variables.$vertical-nav-horizontal-spacing;
padding-block: 0;
padding-inline: variables.$vertical-nav-horizontal-padding;
white-space: nowrap;
}
// This is same as `%vertical-nav-item` except section title is excluded
%vertical-nav-item-interactive {
border-radius: 0.4rem;
block-size: 2.75rem;
/*
We will use `margin-block-end` instead of `margin-block` to give more space for shadow to appear.
With `margin-block`, due to small space (space gets divided between top & bottom) shadow cuts
*/
margin-block-end: 0.375rem;
}
// Common styles for nav item icon styles
// Nav group's children icon styles are not here (Adjusts height, width & margin)
%vertical-nav-items-icon {
flex-shrink: 0;
font-size: variables.$vertical-nav-items-icon-size;
margin-inline-end: variables.$vertical-nav-items-icon-margin-inline-end;
}
// Icon styling for icon nested inside another nav item (2nd level)
%vertical-nav-items-nested-icon {
/*
`margin-inline` will be (normal icon font-size - small icon font-size) / 2
(1.5rem - 0.9rem) / 2 => 0.6rem / 2 => 0.3rem
*/
$vertical-nav-items-nested-icon-margin-inline: calc((variables.$vertical-nav-items-icon-size - variables.$vertical-nav-items-nested-icon-size) / 2);
font-size: variables.$vertical-nav-items-nested-icon-size;
margin-inline-end: $vertical-nav-items-nested-icon-margin-inline + variables.$vertical-nav-items-icon-margin-inline-end;
margin-inline-start: $vertical-nav-items-nested-icon-margin-inline;
}
%vertical-nav-items-icon-after-2nd-level {
visibility: hidden;
}
// Open & Active nav group styles
%vertical-nav-group-open-active {
@include mixins.selected-states("&::before");
}
// Section title
%vertical-nav-section-title {
// Setting height will prevent jerking when text & icon is toggled
block-size: 1.5rem;
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
font-size: 0.75rem;
text-transform: uppercase;
}
// Vertical nav item badge styles
%vertical-nav-item-badge {
display: inline-block;
border-radius: 1.5rem;
font-size: 0.8em;
font-weight: 500;
line-height: 1;
padding-block: 0.25em;
padding-inline: 0.55em;
text-align: center;
vertical-align: baseline;
white-space: nowrap;
}

View File

@@ -0,0 +1,70 @@
@use "sass:map";
@use "@core-scss/base/mixins";
@use "@configured-variables" as variables;
@use "../utils";
$header: ".layout-navbar";
@if variables.$layout-vertical-nav-navbar-is-contained {
$header: ".layout-navbar .navbar-content-container";
}
.skin--bordered {
@include mixins.bordered-skin(".v-card:not(.v-card--flat)");
@include mixins.bordered-skin(".v-menu .v-overlay__content > .v-card, .v-menu .v-overlay__content > .v-sheet, .v-menu .v-overlay__content > .v-list");
@include mixins.bordered-skin(".popper-content");
// Navbar
// -- Horizontal
@include mixins.bordered-skin(".layout-navbar-and-nav-container", "border-bottom");
// -- Vertical
// We have added `.layout-navbar-sticky` as well in selector because we don't want to add borders if navbar is static
@if variables.$layout-vertical-nav-navbar-is-contained {
@include mixins.bordered-skin(".layout-nav-type-vertical.window-scrolled.layout-navbar-sticky #{$header}");
.layout-nav-type-vertical.window-scrolled #{$header} {
border-block-start: none !important;
}
} @else {
@include mixins.bordered-skin(".layout-nav-type-vertical.window-scrolled.layout-navbar-sticky #{$header}", "border-bottom");
}
// Footer
// -- Vertical
@include mixins.bordered-skin(".layout-nav-type-vertical.layout-footer-sticky .layout-footer .footer-content-container");
.layout-nav-type-vertical.layout-footer-sticky .layout-footer .footer-content-container {
border-block-end: none;
}
// -- Horizontal
@include mixins.bordered-skin(".layout-nav-type-horizontal.layout-footer-sticky .layout-footer");
.layout-nav-type-horizontal.layout-footer-sticky .layout-footer {
border-block-end: none;
}
// Vertical Nav
.layout-vertical-nav {
border-inline-end: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
}
// Expansion Panels
.v-expansion-panels:not(.customized-panels) {
.v-expansion-panel__shadow {
box-shadow: none !important;
}
.v-expansion-panel {
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
&:not(:last-child) {
margin-block-end: -1px;
}
&::after {
content: none;
}
}
}
}

View File

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

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,19 @@
@use "@core-scss/base/placeholders" as *;
@use "@core-scss/template/placeholders" as *;
@use "@core-scss/base/mixins";
.layout-wrapper.layout-nav-type-horizontal {
// 👉 App footer
.layout-footer {
@at-root {
.layout-footer-sticky#{&} {
box-shadow: 0 -4px 8px -4px rgba(var(--v-shadow-key-umbra-color), 42%);
}
}
}
// TODO: Use Vuetify grid sass variable here
.layout-page-content {
padding-block: 1.5rem;
}
}

View File

@@ -0,0 +1,28 @@
@use "@configured-variables" as variables;
@use "@core-scss/base/mixins";
$header: ".layout-navbar";
@if variables.$layout-vertical-nav-navbar-is-contained {
$header: ".layout-navbar .navbar-content-container";
}
.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 {
box-shadow: 0 -4px 8px -4px rgba(var(--v-shadow-key-umbra-color), 42%);
padding-inline: 1.5rem;
}
}
}
}
}
}

View File

@@ -0,0 +1,51 @@
.v-timeline{
.v-timeline-item {
.app-timeline-title {
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
font-size: 15px;
font-weight: 500;
letter-spacing: 0.15px;
line-height: 1.375rem;
}
.app-timeline-meta {
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
font-size: 13px;
letter-spacing: 0.4px;
line-height: 1.125rem;
}
.app-timeline-text {
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
font-size: .9375rem;
line-height: 1.375rem;
}
}
}
.per-page-select {
margin-block: auto;
.v-field__input {
align-items: center;
padding: 2px;
}
.v-field__append-inner {
align-items: center;
padding: 0;
.v-icon {
margin-inline-start: 0 !important;
}
}
}
.leading-normal {
font-weight: 600;
letter-spacing: .0094rem;
}
.bg-custom-background{
background-color: rgb(var(--v-table-header-color)) !important;
}

View File

@@ -0,0 +1,41 @@
@use "sass:string";
/*
This function is helpful when we have multi dimensional value
Assume we have padding variable `$nav-padding-horizontal: 10px;`
With above variable let's say we use it in some style:
```scss
.selector {
margin-left: $nav-padding-horizontal;
}
```
Now, problem is we can also have value as `$nav-padding-horizontal: 10px 15px;`
In this case above style will be invalid.
This function will extract the left most value from the variable value.
$nav-padding-horizontal: 10px; => 10px;
$nav-padding-horizontal: 10px 15px; => 10px;
This is safe:
```scss
.selector {
margin-left: get-first-value($nav-padding-horizontal);
}
```
*/
@function get-first-value($var) {
$start-at: string.index(#{$var}, " ");
@if $start-at {
@return string.slice(
#{$var},
0,
$start-at
);
} @else {
@return $var;
}
}

View File

@@ -0,0 +1,56 @@
@use "sass:map";
@use "utils";
$vertical-nav-horizontal-padding-custom: 1.4375rem 1rem;
// We created this SCSS var to extract the start padding
// Docs: https://sass-lang.com/documentation/modules/string
// $vertical-nav-horizontal-padding => 0 8px;
// string.index(#{$vertical-nav-horizontal-padding}, " ") + 1 => 2
// string.index(#{$vertical-nav-horizontal-padding}, " ") => 1
// string.slice(0 8px, 2, -1) => 8px => $card-actions-padding-x
$vertical-nav-horizontal-padding-start: utils.get-first-value($vertical-nav-horizontal-padding-custom) !default;
$vertical-nav-items-icon-margin-inline-end: 0 !default;
@forward "@core-scss/base/variables" with (
$layout-vertical-nav-collapsed-width: 68px !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 1rem !default,
$vertical-nav-horizontal-padding: $vertical-nav-horizontal-padding-custom !default,
// Vertical nav header padding
$vertical-nav-header-padding: 1.25rem 0 1.25rem $vertical-nav-horizontal-padding-start !default,
// Vertical nav icons
$vertical-nav-items-icon-size: 1.375rem !default,
$vertical-nav-items-nested-icon-size: 0.75rem !default,
// Section title margin top (when its not first child)
$vertical-nav-section-title-mt: 1.25rem !default,
$layout-vertical-nav-footer-height: 54px !default,
// Horizontal nav icons
$horizontal-nav-items-icon-size: 1.375rem !default,
$horizontal-nav-items-icon-margin-inline-end: 0.5rem !default,
// 👉 Horizontal nav
$horizontal-nav-padding: 0.625rem !default,
$horizontal-nav-third-level-icon-size: 0.75rem !default,
// Gap between top level horizontal nav items
$horizontal-nav-top-level-items-gap: 8px !default,
// This variable is used for horizontal nav popper content's `margin-top` and "The bridge"'s height. We need to sync both values.
$horizontal-nav-popper-content-top: calc(0.625rem + 0.375rem - 0.25rem) !default,
$font-sizes: (
"sm": 0.8125rem,
"base": 0.9375rem,
),
$font-line-height: (
"base": 1.375rem,
),
);

View File

@@ -0,0 +1,51 @@
@use "@layouts/styles/mixins" as layoutsMixins;
.layout-nav-type-vertical {
// 👉 Layout Vertical nav
.layout-vertical-nav {
.nav-items{
padding-block-start: .25rem;
}
// 👉 Vertical nav group
.nav-group {
.nav-group-arrow {
font-size: 1.375rem;
}
}
// 👉 Nav group & Link
.nav-link,
.nav-group {
// shadow cut issue fix
margin-block-end: -0.5rem;
padding-block-end: 0.5rem;
a {
outline: none;
}
}
// 👉 Nav section title
.nav-section-title {
.placeholder-icon {
transform: translateX(-3px);
@include layoutsMixins.rtl {
transform: translateX(3px);
}
}
}
// 👉 Nav header
.nav-header {
padding-block: 1.25rem;
padding-inline: 23px 0;
}
}
}
// 👉 Overlay
.layout-overlay{
touch-action: none;
}

View File

@@ -0,0 +1,16 @@
@use "sass:map";
@use "@core-scss/base";
// layouts
@use "vertical-nav";
@use "default-layout-w-vertical-nav";
@use "default-layout-w-horizontal-nav";
// Components
@use "components";
// Utilities
@use "utilities";
// Skins
@use "skins";

View File

@@ -0,0 +1,99 @@
@use "@styles/variables/_vuetify.scss" as vuetify;
@use "@layouts/styles/mixins" as layoutsMixins;
@use "@core-scss/base/mixins";
body .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: 600;
}
&.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;
}
}
}

View File

@@ -0,0 +1,355 @@
/* stylelint-disable no-descending-specificity */
/* stylelint-disable no-duplicate-selectors */
@use "@core-scss/base/mixins";
@use "@styles/variables/vuetify.scss";
body .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;
}
th.fc-col-header-cell {
border-inline-end-color: transparent;
}
.fc-day-other .fc-daygrid-day-top {
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
opacity: 1;
}
.fc-daygrid-event{
border-radius: 999px;
}
.fc-col-header-cell-cushion {
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
font-size: .9375rem;
font-weight: 500;
}
.fc-toolbar .fc-toolbar-title {
margin-inline-start: 0.5rem;
}
.fc-event-time {
font-size: 0.8125rem;
font-weight: 500 !important;
line-height: 14px;
}
.fc-event-title {
font-size: 0.75rem;
font-weight: 500 !important;
line-height: 14px;
}
.fc-timegrid-event {
.fc-event-title {
font-size: 0.8125rem;
line-height: 1.25rem;
}
.fc-event-time {
margin-block-end: 2px;
}
}
.fc-event-title-container {
.fc-event-title {
font-size: 0.8125rem;
}
}
.fc-prev-button,
.fc-next-button {
border: 1px solid rgb(var(--v-theme-secondary));
border-radius: 6px !important;
block-size: 34px;
color: rgb(var(--v-theme-secondary));
inline-size: 34px;
margin-inline-end: 0.5rem;
min-block-size: 34px;
padding-block: 0 !important;
padding-inline: 7px !important;
&:hover,
&:focus {
border: 1px solid rgb(var(--v-theme-secondary)) !important;
background-color: rgba(var(--v-theme-secondary), var(--v-activated-opacity)) !important;
}
.fc-icon{
position: relative;
inset-block-start: -1px;
}
}
.fc-prev-button {
.fc-icon{
position: relative;
inset-inline-start: -2px;
}
}
.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 in list view
.fc-list {
border-block-end: none;
border-inline: 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;
line-height: 22px;
text-decoration: none;
}
}
.fc-timegrid-axis {
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
font-size: .8125rem;
text-transform: capitalize;
}
.fc-timegrid-slot-label-frame {
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
font-size: .8125rem;
text-align: center;
text-transform: uppercase;
}
.fc-header-toolbar {
flex-wrap: wrap;
padding: 1.25rem;
gap: 1rem 0.5rem;
margin-block-end: 0 !important;
}
.fc-toolbar-chunk {
display: flex;
align-items: center;
.fc-button-group {
.fc-button-primary {
&,
&:hover,
&:not(.disabled):active {
background-color: transparent;
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
}
&:focus {
box-shadow: none !important;
}
}
}
&:last-child {
.fc-button-group {
border-radius: 0.375rem;
.fc-button,
.fc-button:active {
border: 1px solid rgb(var(--v-theme-primary));
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), var(--v-activated-opacity));
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.5rem;
font-weight: 500;
line-height: 38px;
}
// 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: .125rem;
padding-inline: .5rem;
}
.fc-event-main {
color: inherit;
font-weight: 500;
line-height: 14px;
}
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 {
font-size: 1.25rem;
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;
border: 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: 1rem;
@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,
.fc-timegrid-body,
.fc-timegrid-body table {
inline-size: 100% !important;
}
// Remove event margin in week view inside day column
.fc-timegrid-col-events {
// margin: 0 !important;
.fc-event{
padding-block: 8px !important;
}
}
.fc-timeGridWeek-view .fc-timegrid-slot-minor{
border-block-start-style: none;
}
// Set button border radius
.fc .fc-button {
border-radius: vuetify.$card-border-radius;
min-block-size: vuetify.$button-height;
}
}

View File

@@ -0,0 +1,87 @@
@use "@core-scss/base/mixins";
@use "shepherd.js/dist/css/shepherd.css";
@use "@styles/variables/_vuetify.scss" as variables;
.shepherd-button {
border-radius: variables.$button-border-radius;
font-size: variables.$button-font-size;
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: 600;
}
.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-start: -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 {
@include mixins.elevation(8);
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-medium-emphasis-opacity));
}
@media screen and (max-width: 600px) {
.shepherd-element {
max-inline-size: 75vw;
}
}

View File

@@ -0,0 +1,5 @@
swiper-container {
--swiper-navigation-color: rgb(var(--v-theme-primary));
--swiper-navigation-size: 1.75rem;
--swiper-pagination-color: rgb(var(--v-theme-primary));
}

View File

@@ -0,0 +1,38 @@
@use "@core-scss/base/utils";
@use "@configured-variables" as variables;
// 👉 Body
// set body font size 15px
body {
font-size: 15px !important;
}
// 👉 Typography
.text-h1,
.text-h2,
.text-h3,
.text-h4,
.text-h5,
.text-h6,
.text-overline,
.v-input {
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
}
.text-caption{
color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity));
}
.v-card-subtitle,
.text-subtitle-1,
.text-subtitle-2 {
color: rgba(var(--v-theme-on-background), 0.55);
}
// 👉 Input placeholder alignment
.v-input--density-compact{
input::placeholder {
position: relative;
inset-block-start: 1px;
}
}

View File

@@ -0,0 +1,312 @@
$font-family-custom: "Inter", sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto,
"Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
/* stylelint-disable length-zero-no-unit */
@forward "../../../base/libs/vuetify/variables" with (
$body-font-family: $font-family-custom !default,
$border-radius-root: 6px,
$rounded: (
"sm": 4px,
"shaped": 25px 0,
"lg":8px,
) !default,
// 👉 Typography
$typography: (
"h1": (
"size": 2.875rem,
"weight": 500,
"line-height": 4.25rem,
"letter-spacing": normal,
),
"h2": (
"size": 2.375rem,
"weight": 500,
"line-height": 3.5rem,
"letter-spacing": normal,
),
"h3": (
"size": 1.75rem,
"weight": 500,
"line-height": 2.625rem,
"letter-spacing": normal,
),
"h4": (
"size": 1.5rem,
"weight": 500,
"line-height": 2.375rem,
"letter-spacing": normal,
),
"h5": (
"size": 1.125rem,
"weight": 500,
"line-height": 1.75rem,
"letter-spacing": normal,
),
"h6": (
"size": 0.9375rem,
"line-height": 1.375rem,
"letter-spacing": normal,
),
"subtitle-1": (
"size": 0.9375rem,
"line-height": 1.375rem,
"letter-spacing": normal,
),
"subtitle-2": (
"size": 0.8125rem,
"line-height": 1.25rem,
"letter-spacing": normal,
),
"body-1": (
"size": 0.9375rem,
"line-height": 1.375rem,
"letter-spacing": normal,
),
"body-2": (
"size": 0.8125rem,
"line-height": 1.25rem,
"letter-spacing": normal,
),
"caption": (
"size": 0.8125rem,
"line-height": 1.125rem,
"letter-spacing": 0.025rem,
),
"overline": (
"weight": 400,
"line-height": 0.875rem,
"letter-spacing": 0.05rem,
),
'button': (
'size': 0.9375rem,
'weight': 500,
'letter-spacing': normal,
'font-family': $font-family-custom,
'text-transform': capitalize,
),
)!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 4px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xs-opacity))),
3: (0 3px 8px rgba(var(--v-shadow-key-umbra-color), 0.14)),
4: (0 3px 6px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-sm-opacity))),
5: (0 4px 10px rgba(var(--v-shadow-key-umbra-color), 0.15)),
6: (0 4px 10px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-md-opacity))),
7: (0 4px 18px rgba(var(--v-shadow-key-umbra-color), 0.1)),
8: (0 6px 16px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-lg-opacity))),
9: (0 5px 14px rgba(var(--v-shadow-key-umbra-color), 0.18)),
10: (0 8px 28px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xl-opacity))),
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,
// 👉 Avatar
$avatar-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default,
// 👉 Alert
$alert-title-font-size: 1.125rem !default,
$alert-text-line-height: 1.625rem !default,
// 👉 Autocomplete
$autocomplete-content-elevation: 8 !default,
$combobox-content-elevation: 8 !default,
$select-content-elevation: 8 !default,
// 👉 Badge
$badge-height: 1.375rem !default,
$badge-min-width: 1.375rem !default,
$badge-dot-height: 8px !default,
$badge-dot-width: 8px !default,
$badge-border-radius: 50px !default,
$badge-font-size: 0.8125rem !default,
// 👉 Buttons
$button-height: 38px !default,
$button-padding-ratio: 2.15 !default,
$button-margin-start: 0 !default,
$button-disabled-opacity: .45 !default,
$button-elevation: ('default': 2, 'hover': 2, 'active': 0) !default,
$button-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default,
$button-line-height: 1.375rem !default,
$button-margin-end: 0.375rem !default,
$button-card-actions-padding: 0 18px !default,
// 👉 Chip
$chip-font-size: 13px !default,
$chip-icon-font-size: 1.25rem !default,
$chip-close-size: 20px !default,
$chip-font-weight: 500 !default,
// 👉 Cards
$card-actions-padding: 0 6px 6px !default,
$card-title-font-size: 1.125rem !default,
$card-title-line-height: 1.75rem !default,
$card-text-font-size: 0.9375rem !default,
$card-text-line-height: 1.375rem !default,
$card-subtitle-font-size: 0.9375rem !default,
$card-subtitle-line-height: 1.375rem !default,
$card-subtitle-font-weight: 400 !default,
$card-subtitle-header-padding: 0 !default,
// 👉 Dialog
$dialog-elevation: 10 !default,
$dialog-card-header-padding: 20px !default,
$dialog-card-text-padding: 0 20px 20px !default,
// 👉 Expansion Panel
$expansion-panel-active-margin: 0.5rem !default,
$expansion-panel-text-padding: 0 20px 20px !default,
$expansion-panel-title-padding: 12px 20px !default,
$expansion-panel-title-min-height: 46px !default,
$expansion-panel-active-title-min-height: 46px !default,
// 👉 Field
$field-outline-opacity: 0.22 !default,
$field-control-affixed-padding: 16px !default,
$field-control-affixed-inner-padding: 10px !default,
$field-font-size: 15px !default,
// 👉 Label
$label-font-size: 0.9375rem !default,
$label-letter-spacing: normal !default,
// 👉 List
$list-item-one-line-min-height: 38px !default,
$list-subheader-min-height: 38px !default,
$list-item-padding: 8px 20px !default,
$list-subheader-font-weight: 500 !default,
$list-item-icon-margin-start: 12px !default,
$list-item-min-height: 38px !default,
$list-item-nav-title-font-size: 0.9375rem !default,
$list-item-nav-title-font-weight: 400 !default,
$list-item-nav-subtitle-font-size: 0.8125rem !default,
$list-item-subtitle-line-height: 1.25rem !default,
// 👉 label
$field-label-floating-scale: 0.8125 !default,
// 👉 Snackbar
$snackbar-background: rgb(var(--v-tooltip-background)) !default,
$snackbar-color: rgb(var(--v-theme-surface)) !default,
$snackbar-content-padding: 12px 16px !default,
$snackbar-wrapper-padding: 0 !default,
$snackbar-wrapper-min-height: 44px !default,
$snackbar-elevation: 2 !default,
$snackbar-btn-padding: 0 10px !default,
$snackbar-action-margin: 16px !default,
// 👉 Slider
$slider-thumb-hover-opacity: var(--v-activated-opacity) !default,
// 👉 Tooltip
$tooltip-background-color: rgb(var(--v-tooltip-background)) !default,
$tooltip-text-color: rgb(var(--v-theme-surface)) !default,
$tooltip-border-radius: 0.25rem !default,
$tooltip-font-size: 0.8125rem !default,
$tooltip-padding: 4px 12px !default,
$tooltip-line-height: 1.25rem !default,
// 👉 VPagination
$pagination-item-margin: 0.1875rem !default,
// 👉 Tabs
$tabs-height: 38px !default,
$tab-min-width: 60px !default,
// 👉 Timeline
$timeline-divider-line-background: rgba(var(--v-border-color), var(--v-border-opacity)) !default,
$timeline-divider-line-thickness: 1.5px !default,
$timeline-item-padding: 16px !default,
// 👉 Slider
$slider-track-active-size-offset: 0px !default,
$slider-thumb-label-border-radius: 6px !default,
$slider-thumb-label-height: 28px !default,
$slider-thumb-label-padding: 4px 10px !default,
// 👉 Table
$table-row-height: 50px !default,
$table-header-font-weight: 500 !default,
$table-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
$table-font-size: 15px !default,
$table-column-padding: 0 20px !default,
// navigation drawer
$navigation-drawer-temporary-elevation: 8 !default,
$navigation-drawer-transition-duration: 0.4s !default,
// 👉 Messages
$messages-font-size: 13px !default,
);

View File

@@ -0,0 +1,2 @@
@use "@core-scss/base/libs/vuetify";
@use "overrides";

View File

@@ -0,0 +1,36 @@
.layout-blank {
.misc-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.25rem;
min-block-size: 100dvh;
.misc-footer-img {
position: absolute;
inline-size: 100%;
inset-block-end: 0;
inset-inline-start: 0;
}
.misc-footer-tree, .misc-footer-tree-1 {
position: absolute;
}
.misc-footer-tree {
inset-block-end: 3.75rem;
inset-inline-start: 3.75rem;
}
.misc-footer-tree-1 {
inset-block-end: 5rem;
inset-inline-end: 4.75rem;
}
}
.misc-avatar {
z-index: 1;
}
}

View File

@@ -0,0 +1,61 @@
.layout-blank {
.auth-wrapper {
min-block-size: 100dvh;
}
.auth-footer-mask {
position: absolute;
inset-block-end: 0;
max-inline-size: 100%;
min-inline-size: 100%;
}
.auth-footer-tree{
position: absolute !important;
inset-block-end: 70px;
inset-inline-start: 70px;
}
.auth-footer-start-tree, .auth-footer-end-tree{
position: absolute !important;
z-index: 1 !important;
}
.auth-footer-start-tree{
inset-block-end: 3.75rem;
inset-inline-start: 3.75rem;
}
.auth-footer-end-tree{
inset-block-end: 4.625rem;
inset-inline-end: 5rem;
}
.auth-card, .auth-card-v2, .auth-illustration {
z-index: 1 !important;
}
}
@media (min-width: 960px) {
.skin--bordered {
.auth-card-v2 {
border-inline-start: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
}
}
}
.auth-logo {
position: absolute;
z-index: 2;
inset-block-start: 2rem;
inset-inline-start: 2.3rem;
}
.auth-title{
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.273px;
line-height: normal;
text-transform: capitalize;
}

View File

@@ -0,0 +1,9 @@
@use 'misc';
%default-layout-horizontal-nav-navbar-and-nav-container {
box-shadow: 0 4px 8px -4px rgba(var(--v-shadow-key-umbra-color), 42%);
&.header-blur {
@extend %blurry-bg;
}
}

View File

@@ -0,0 +1,11 @@
@use "@configured-variables" as variables;
@use "@core-scss/base/mixins";
%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
box-shadow: 0 4px 8px -4px rgba(var(--v-shadow-key-umbra-color), 42%);
// If navbar is contained => Squeeze navbar content on scroll
@if variables.$layout-vertical-nav-navbar-is-contained {
padding-inline: 1.5rem;
}
}

View File

@@ -0,0 +1,36 @@
@use "@core-scss/base/mixins";
// Add border radius to top level nav item
%horizontal-nav-top-level-item {
border-radius: 3.125rem !important;
}
// Horizontal nav item styles (including nested)
%horizontal-nav-item {
padding-block: 0.5rem;
}
// Horizontal nav item title
%horizontal-nav-item-title {
margin-inline-end: 0.5rem;
}
// Popper content styles
%horizontal-nav-popper-content {
@include mixins.elevation(8);
}
// Styles for third level item icon/ (e.g. Reduce the icon's size of nested group's nav links (Top level group > Sub group > [Nav links]))
%third-level-nav-item-icon {
color:rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))
}
// Active styles for sub nav link
%horizontal-nav-sub-nav-link-active {
background: rgba(var(--v-theme-primary), 0.16);
color: rgb(var(--v-theme-primary));
i { color: rgb(var(--v-theme-primary)) !important;}
}

View File

@@ -0,0 +1,6 @@
@forward "horizontal-nav";
@forward "nav";
@forward "default-layout-vertical-nav";
@forward "default-layout-horizontal-nav";
@forward "vertical-nav";
@forward "misc";

View File

@@ -0,0 +1,7 @@
%blurry-bg {
/* stylelint-disable property-no-vendor-prefix */
-webkit-backdrop-filter: blur(9px);
backdrop-filter: blur(9px);
/* stylelint-enable */
background-color: rgb(var(--v-theme-surface), 0.85);
}

View File

@@ -0,0 +1,17 @@
@use "@core-scss/base/mixins";
%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;
i { color: rgb(var(--v-theme-on-primary)) !important; }
@include mixins.elevation(4);
}
// This is common style that needs to be applied to both navs
%nav {
.nav-item-title {
line-height: 1.375rem;
}
}

View File

@@ -0,0 +1,93 @@
@use "@configured-variables" as variables;
%nav-header-action {
color:rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
}
// Add divider around section title
%vertical-nav-section-title {
block-size: 2rem;
font-size: 0.8125rem;
line-height: 1.125rem;
/*
We will use this to add gap between divider and text.
Moreover, we will use this to adjust the `flex-basis` property of left divider
*/
$divider-gap: 0.625rem;
// Thanks: https://stackoverflow.com/a/62359101/10796681
.title-text {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
column-gap: $divider-gap;
&::before,
&::after {
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
content: "";
}
&::after {
flex: 1 1 auto;
}
&::before {
flex: 0 1 calc(variables.$vertical-nav-horizontal-padding-start - $divider-gap);
margin-inline-start: -#{variables.$vertical-nav-horizontal-padding-start};
}
}
// Update the margin-inline-end when vertical nav is in mini state. We done same for link & group.
@at-root {
.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-section-title {
margin-inline: 4px 0;
}
}
}
%vertical-nav-item-interactive {
// Add pill shape styles
block-size: 2.375rem !important;
border-end-end-radius: 3.125rem !important;
border-end-start-radius: 0 !important;
border-start-end-radius: 3.125rem !important;
border-start-start-radius: 0 !important;
// Wobble effect
transition: margin-inline 0.15s ease-in-out;
will-change: margin-inline;
// Reduce margin inline end when vertical nav is in collapsed mode and not hovered
.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) & {
margin-inline: 0 5px;
}
}
// Vertical nav item badge styles
%vertical-nav-item-badge {
font-size: .8125rem;
line-height: 20px;
padding-block: 0.125rem;
padding-inline: 0.75rem;
}
// Nav items styles (including section title)
%vertical-nav-item {
gap: .5rem;
padding-block: 0.4375rem;
}
// Icon styling for icon nested inside another nav item (2nd level)
%vertical-nav-items-nested-icon {
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
margin-inline: .375rem;
}
%vertical-nav-items-icon-after-2nd-level {
margin-inline-start: 1rem;
visibility: visible;
}

View File

@@ -0,0 +1,23 @@
@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 {
.flatpickr-calendar {
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
box-shadow: none;
}
// select remove box shadow
.v-select__content,
.v-combobox__content,
.v-autocomplete__content {
box-shadow: none;
}
}

View File

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