mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-06 08:06:43 +08:00
重构scss文件结构
This commit is contained in:
jxxghp
@@ -3,6 +3,30 @@
|
|||||||
@use "@layouts/styles/_placeholders";
|
@use "@layouts/styles/_placeholders";
|
||||||
@use "@configured-variables" as variables;
|
@use "@configured-variables" as variables;
|
||||||
|
|
||||||
|
// 👉 Alert
|
||||||
|
.v-alert {
|
||||||
|
.v-alert__close {
|
||||||
|
.v-icon {
|
||||||
|
block-size: 20px !important;
|
||||||
|
font-size: 20px !important;
|
||||||
|
inline-size: 20px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.v-alert--prominent) .v-alert__prepend {
|
||||||
|
.v-icon {
|
||||||
|
block-size: 1.375rem !important;
|
||||||
|
font-size: 1.375rem !important;
|
||||||
|
inline-size: 1.375rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-alert-title {
|
||||||
|
line-height: 1.5rem;
|
||||||
|
margin-block-end: 0.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 👉 Avatar font-size
|
// 👉 Avatar font-size
|
||||||
.v-avatar {
|
.v-avatar {
|
||||||
@include mixins.avatar-font-sizes($map: variables.$avatar-font-sizes);
|
@include mixins.avatar-font-sizes($map: variables.$avatar-font-sizes);
|
||||||
@@ -33,6 +57,23 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 👉 Button
|
||||||
|
.v-btn {
|
||||||
|
/* stylelint-disable-next-line no-descending-specificity */
|
||||||
|
&:not(.v-btn--icon) .v-icon {
|
||||||
|
--v-icon-size-multiplier: 0.9525 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Chip
|
||||||
|
.v-chip.v-chip--size-default .v-avatar {
|
||||||
|
--v-avatar-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-chip.v-chip--density-comfortable {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
// Dialog responsive width
|
// Dialog responsive width
|
||||||
.v-dialog {
|
.v-dialog {
|
||||||
.v-card {
|
.v-card {
|
||||||
@@ -40,7 +81,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (width >= 576px) {
|
||||||
.v-dialog {
|
.v-dialog {
|
||||||
&.v-dialog-sm,
|
&.v-dialog-sm,
|
||||||
&.v-dialog-lg,
|
&.v-dialog-lg,
|
||||||
@@ -50,7 +91,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (width >= 992px) {
|
||||||
.v-dialog {
|
.v-dialog {
|
||||||
&.v-dialog-lg,
|
&.v-dialog-lg,
|
||||||
&.v-dialog-xl {
|
&.v-dialog-xl {
|
||||||
@@ -59,18 +100,32 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
@media (width >= 1200px) {
|
||||||
.v-dialog.v-dialog-xl,
|
.v-dialog.v-dialog-xl,
|
||||||
.v-dialog.v-dialog-xl .v-overlay__content > .v-card {
|
.v-dialog.v-dialog-xl .v-overlay__content > .v-card {
|
||||||
inline-size: 1165px !important;
|
inline-size: 1165px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// v-tab with pill support
|
// 👉 Expansion Panel
|
||||||
|
.v-expansion-panel {
|
||||||
|
.v-expansion-panel-text {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Tooltip
|
||||||
|
.v-tooltip > .v-overlay__content {
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 List
|
||||||
|
|
||||||
|
// 👉 Tab with pill support
|
||||||
.v-tabs.v-tabs-pill {
|
.v-tabs.v-tabs-pill {
|
||||||
.v-tab.v-btn {
|
.v-tab.v-btn {
|
||||||
border-radius: 0.375rem !important;
|
border-radius: 6px !important;
|
||||||
min-inline-size: 8.125rem;
|
min-inline-size: 8.125rem;
|
||||||
transition: none;
|
transition: none;
|
||||||
|
|
||||||
@@ -94,7 +149,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 👉 added box shadow
|
// 👉 Timeline added box shadow
|
||||||
.v-timeline-item {
|
.v-timeline-item {
|
||||||
.v-timeline-divider__dot {
|
.v-timeline-divider__dot {
|
||||||
.v-timeline-divider__inner-dot {
|
.v-timeline-divider__inner-dot {
|
||||||
@@ -160,7 +215,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 👉 Slider
|
// 👉 Slider
|
||||||
|
|
||||||
.v-slider.v-input--horizontal .v-slider-track__fill {
|
.v-slider.v-input--horizontal .v-slider-track__fill {
|
||||||
block-size: var(--v-slider-track-size);
|
block-size: var(--v-slider-track-size);
|
||||||
}
|
}
|
||||||
@@ -171,7 +225,19 @@
|
|||||||
|
|
||||||
.v-slider-thumb {
|
.v-slider-thumb {
|
||||||
.v-slider-thumb__label {
|
.v-slider-thumb__label {
|
||||||
|
background: rgb(117, 117, 117);
|
||||||
color: rgb(var(--v-theme-on-primary));
|
color: rgb(var(--v-theme-on-primary));
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
color: rgb(117, 117, 117);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Switch
|
||||||
|
.v-switch {
|
||||||
|
.v-selection-control:not(.v-selection-control--dirty) .v-switch__thumb {
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -179,5 +245,45 @@
|
|||||||
.v-table--density-default > .v-table__wrapper > table > tbody > tr > td,
|
.v-table--density-default > .v-table__wrapper > table > tbody > tr > td,
|
||||||
.v-table--density-default > .v-table__wrapper > table > thead > tr > td,
|
.v-table--density-default > .v-table__wrapper > table > thead > tr > td,
|
||||||
.v-table--density-default > .v-table__wrapper > table > tfoot > tr > td {
|
.v-table--density-default > .v-table__wrapper > table > tfoot > tr > td {
|
||||||
block-size: 50px;
|
block-size: 50px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-table {
|
||||||
|
--v-table-header-height: 54px !important;
|
||||||
|
|
||||||
|
th {
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
|
||||||
|
.v-data-table-header__content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-selection-control {
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-data-table {
|
||||||
|
th {
|
||||||
|
background: rgb(var(--v-table-header-background)) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Pagination
|
||||||
|
.v-pagination {
|
||||||
|
.v-btn {
|
||||||
|
border-radius: 4px;
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 SnackBar
|
||||||
|
.v-snackbar--variant-elevated {
|
||||||
|
@include mixins.elevation(6);
|
||||||
}
|
}
|
||||||
|
|||||||
+1
-1
@@ -1,7 +1,7 @@
|
|||||||
@use "@configured-variables" as variables;
|
@use "@configured-variables" as variables;
|
||||||
@use "placeholders" as *;
|
@use "placeholders" as *;
|
||||||
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
||||||
@use "../misc";
|
@use "misc";
|
||||||
@use "mixins";
|
@use "mixins";
|
||||||
|
|
||||||
$header: ".layout-navbar";
|
$header: ".layout-navbar";
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
@use "@core/scss/placeholders";
|
@use "placeholders";
|
||||||
@use "@core/scss/variables" as core-vars;
|
@use "variables" as core-vars;
|
||||||
|
|
||||||
.layout-navbar {
|
.layout-navbar {
|
||||||
@if core-vars.$navbar-high-emphasis-text {
|
@if core-vars.$navbar-high-emphasis-text {
|
||||||
|
|||||||
@@ -11,11 +11,58 @@
|
|||||||
|
|
||||||
// ℹ️ adding styling for code tag
|
// ℹ️ adding styling for code tag
|
||||||
code {
|
code {
|
||||||
background: rgba(var(--v-code-background-color), var(--v-focus-opacity));
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
background: rgba(var(--v-code-background-color), var(--v-focus-opacity));
|
||||||
color: currentcolor;
|
color: currentcolor;
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
padding-block: 0.2em;
|
padding-block: 0.2em;
|
||||||
padding-inline: 0.4em;
|
padding-inline: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
%blurry-bg {
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 4%), 0 1px 2px rgba(0, 0, 0, 2%);
|
||||||
|
|
||||||
|
@media (width >= 1280px) {
|
||||||
|
background: rgba(var(--v-theme-background), 1);
|
||||||
|
|
||||||
|
.v-theme--transparent & {
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
background: rgba(var(--v-theme-background), 0.1) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (width < 1280px) {
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
backdrop-filter: blur(24px);
|
||||||
|
block-size: calc(env(safe-area-inset-top, 0px) + var(--navbar-tab-height) + 4rem);
|
||||||
|
content: "";
|
||||||
|
inset-block-start: 0;
|
||||||
|
inset-inline: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
|
||||||
|
.v-theme--light & {
|
||||||
|
background: rgba(var(--v-theme-surface), 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-theme--dark & {
|
||||||
|
background: rgba(var(--v-theme-background), 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-theme--purple & {
|
||||||
|
background: rgba(var(--v-theme-background), 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-theme--transparent & {
|
||||||
|
background: rgba(var(--v-theme-background), 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,4 +1,6 @@
|
|||||||
|
@use "sass:map";
|
||||||
@use "vuetify/lib/styles/settings" as vuetify_settings;
|
@use "vuetify/lib/styles/settings" as vuetify_settings;
|
||||||
|
@use "@styles/variables/_vuetify.scss" as vuetify;
|
||||||
|
|
||||||
@mixin themed($property, $light-value, $dark-value) {
|
@mixin themed($property, $light-value, $dark-value) {
|
||||||
@at-root {
|
@at-root {
|
||||||
@@ -17,11 +19,12 @@
|
|||||||
// ℹ️ This mixin is inspired from vuetify for adding hover styles via before pseudo element
|
// ℹ️ This mixin is inspired from vuetify for adding hover styles via before pseudo element
|
||||||
@mixin before-pseudo() {
|
@mixin before-pseudo() {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
border-radius: inherit;
|
||||||
background: currentcolor;
|
background: currentcolor;
|
||||||
block-size: 100%;
|
block-size: 100%;
|
||||||
border-radius: inherit;
|
|
||||||
content: "";
|
content: "";
|
||||||
inline-size: 100%;
|
inline-size: 100%;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
@@ -43,8 +46,8 @@
|
|||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-color: currentcolor;
|
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
|
background-color: currentcolor;
|
||||||
content: "";
|
content: "";
|
||||||
inset: 0;
|
inset: 0;
|
||||||
opacity: $opacity;
|
opacity: $opacity;
|
||||||
@@ -56,10 +59,81 @@
|
|||||||
@mixin avatar-font-sizes($map: $avatar-sizes) {
|
@mixin avatar-font-sizes($map: $avatar-sizes) {
|
||||||
@each $sizeName, $multiplier in vuetify_settings.$size-scales {
|
@each $sizeName, $multiplier in vuetify_settings.$size-scales {
|
||||||
/* stylelint-disable-next-line scss/no-global-function-names */
|
/* stylelint-disable-next-line scss/no-global-function-names */
|
||||||
$size: map-get($map, $sizeName);
|
$size: map.get($map, $sizeName);
|
||||||
|
|
||||||
&.v-avatar--size-#{$sizeName} {
|
&.v-avatar--size-#{$sizeName} {
|
||||||
font-size: #{$size}px;
|
font-size: #{$size}px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@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);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin bordered-skin($component, $border-property: "border", $important: false) {
|
||||||
|
#{$component} {
|
||||||
|
box-shadow: none !important;
|
||||||
|
#{$border-property}: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) if($important, !important, null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin push-anchors() {
|
||||||
|
:target {
|
||||||
|
scroll-margin-block-start: 90px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin xs {
|
||||||
|
@media (width >= 0) and (width <= 599.98px) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin sm {
|
||||||
|
@media (width >= 600px) and (width <= 959.98px) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin md {
|
||||||
|
@media (width >= 960px) and (width <= 1279.98px) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin lg {
|
||||||
|
@media (width >= 1280px) and (width <= 1919.98px) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin xl {
|
||||||
|
@media (width >= 1920px) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,73 +1,25 @@
|
|||||||
@use "@configured-variables" as variables;
|
|
||||||
|
|
||||||
// 👉 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-var-theme-background {
|
.bg-var-theme-background {
|
||||||
background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity)) !important;
|
background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity)) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// [/^bg-light-(\w+)$/, ([, w]) => ({ backgroundColor: `rgba(var(--v-theme-${w}), var(--v-activated-opacity))` })],
|
// 👉 Pagination small-select dropdown for table
|
||||||
@each $color-name in variables.$theme-colors-name {
|
// TODO: remove this class after vuetify datatable implememtation
|
||||||
.bg-light-#{$color-name} {
|
|
||||||
background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important;
|
.per-page-select {
|
||||||
|
margin-block: auto;
|
||||||
|
|
||||||
|
.v-field__input {
|
||||||
|
align-items: center;
|
||||||
|
padding: 2px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-field__append-inner {
|
||||||
|
align-items: center;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.v-icon {
|
||||||
|
margin-inline-start: 0 !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 👉 Typography
|
|
||||||
.font-weight-semibold {
|
|
||||||
font-weight: 600 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leading-normal {
|
|
||||||
line-height: normal !important;
|
|
||||||
}
|
|
||||||
|
|||||||
+167
-41
@@ -9,20 +9,53 @@
|
|||||||
- You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header)
|
- You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header)
|
||||||
*/
|
*/
|
||||||
@use "sass:map";
|
@use "sass:map";
|
||||||
|
|
||||||
// 使用模板中的变量，不再进行配置
|
|
||||||
@use "@layouts/styles/variables" as layouts-vars;
|
|
||||||
@use "utils";
|
@use "utils";
|
||||||
|
@use "vuetify/lib/styles/tools/functions" as *;
|
||||||
|
|
||||||
// 👉 Default layout
|
// 合并两个文件中的@forward配置
|
||||||
|
@forward "@layouts/styles/variables" with (
|
||||||
|
// 来自_variables.scss的配置
|
||||||
|
$layout-vertical-nav-collapsed-width: 68px !default,
|
||||||
|
|
||||||
$navbar-high-emphasis-text: true !default;
|
// 来自template/_variables.scss的配置
|
||||||
|
$layout-vertical-nav-z-index: 1004,
|
||||||
|
$layout-overlay-z-index: 1003
|
||||||
|
);
|
||||||
|
|
||||||
// 移除@forward配置，已合并到template/_variables.scss
|
// 使用命名空间来避免变量冲突
|
||||||
// @forward "@layouts/styles/variables" with (
|
@use "@layouts/styles/variables" as layouts-vars;
|
||||||
// $layout-vertical-nav-collapsed-width: 68px !default,
|
|
||||||
// );
|
$vertical-nav-horizontal-padding-custom: 1.375rem 1rem;
|
||||||
// @use "@layouts/styles/variables" as *;
|
|
||||||
|
// ℹ️ 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.625rem !default;
|
||||||
|
|
||||||
|
// Vertical Nav Configuration
|
||||||
|
$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 1.125rem !default;
|
||||||
|
$vertical-nav-horizontal-padding: $vertical-nav-horizontal-padding-custom !default;
|
||||||
|
|
||||||
|
// Vertical nav header padding
|
||||||
|
$vertical-nav-header-padding: 1rem 0.25rem 1rem $vertical-nav-horizontal-padding-start !default;
|
||||||
|
|
||||||
|
// 👉 Custom Variables
|
||||||
|
$avatar-font-sizes: (
|
||||||
|
"x-small":12,
|
||||||
|
"small":14,
|
||||||
|
"default":18,
|
||||||
|
"large":20,
|
||||||
|
"x-large":24
|
||||||
|
) !default;
|
||||||
|
|
||||||
$theme-colors-name: (
|
$theme-colors-name: (
|
||||||
"primary",
|
"primary",
|
||||||
@@ -41,31 +74,16 @@ $default-layout-with-vertical-nav-navbar-footer-roundness: 10px !default;
|
|||||||
$vertical-nav-background-color-rgb: var(--v-theme-background) !default;
|
$vertical-nav-background-color-rgb: var(--v-theme-background) !default;
|
||||||
$vertical-nav-background-color: rgb(#{$vertical-nav-background-color-rgb}) !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: 0 1.125rem !default;
|
|
||||||
$vertical-nav-horizontal-padding: 1.375rem 1rem !default;
|
|
||||||
|
|
||||||
/*
|
|
||||||
ℹ️ 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);
|
|
||||||
|
|
||||||
// Vertical nav header height. Mostly we will align it with navbar height;
|
// Vertical nav header height. Mostly we will align it with navbar height;
|
||||||
$vertical-nav-header-height: layouts-vars.$layout-vertical-nav-navbar-height !default;
|
$vertical-nav-header-height: layouts-vars.$layout-vertical-nav-navbar-height !default;
|
||||||
$vertical-nav-navbar-shadow: 0 4px 8px -4px rgb(94 86 105 / 42%);
|
$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 0.25rem 1rem $vertical-nav-horizontal-padding-start !default;
|
|
||||||
$vertical-nav-header-inline-spacing: $vertical-nav-horizontal-spacing !default;
|
$vertical-nav-header-inline-spacing: $vertical-nav-horizontal-spacing !default;
|
||||||
|
|
||||||
// Move logo when vertical nav is mini (collapsed but not hovered)
|
// Move logo when vertical nav is mini (collapsed but not hovered)
|
||||||
$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -4px;
|
$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -4px !default;
|
||||||
|
|
||||||
// Space between logo and title
|
// Space between logo and title
|
||||||
$vertical-nav-header-logo-title-spacing: 0.9rem !default;
|
$vertical-nav-header-logo-title-spacing: 0.9rem !default;
|
||||||
@@ -77,22 +95,130 @@ $vertical-nav-section-title-mt: 1.5rem !default;
|
|||||||
$vertical-nav-section-title-mb: 0.5rem !default;
|
$vertical-nav-section-title-mb: 0.5rem !default;
|
||||||
|
|
||||||
// Vertical nav icons
|
// Vertical nav icons
|
||||||
$vertical-nav-items-icon-size: 1.5rem;
|
$vertical-nav-items-icon-size: 1.5rem !default;
|
||||||
$vertical-nav-items-icon-margin-inline-end: 0.625rem;
|
$vertical-nav-items-nested-icon-size: 0.9rem !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;
|
||||||
|
|
||||||
|
// ℹ️ 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((var(--vh, 1vh) * 100) - 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
|
// 👉 Plugins
|
||||||
|
|
||||||
$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35);
|
$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35) !default;
|
||||||
|
|
||||||
// 👉 Custom Variables
|
// 👉 Vuetify
|
||||||
$avatar-font-sizes: () !default;
|
|
||||||
$avatar-font-sizes: map.deep-merge(
|
// 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(
|
||||||
(
|
(
|
||||||
"x-small":12,
|
"xs": 0.75rem,
|
||||||
"small":14,
|
"sm": 0.875rem,
|
||||||
"default":18,
|
"base": 1rem,
|
||||||
"large":20,
|
"lg": 1.125rem,
|
||||||
"x-large":24
|
"xl": 1.25rem,
|
||||||
|
"2xl": 1.5rem,
|
||||||
|
"3xl": 1.875rem,
|
||||||
|
"4xl": 2.25rem,
|
||||||
|
"5xl": 3rem,
|
||||||
|
"6xl": 3.75rem,
|
||||||
|
"7xl": 4.5rem,
|
||||||
|
"8xl": 6rem,
|
||||||
|
"9xl": 8rem
|
||||||
),
|
),
|
||||||
$avatar-font-sizes
|
$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
|
||||||
|
);
|
||||||
|
|
||||||
|
// 👉 Default layout
|
||||||
|
|
||||||
|
$navbar-high-emphasis-text: true !default;
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
@use "./placeholders";
|
@use "./placeholders";
|
||||||
@use "@configured-variables" as variables;
|
@use "@configured-variables" as variables;
|
||||||
@use "@core/scss/mixins" as mixins;
|
@use "./mixins" as mixins;
|
||||||
@use "vuetify/lib/styles/tools/states" as vuetifyStates;
|
@use "vuetify/lib/styles/tools/states" as vuetifyStates;
|
||||||
@use "vuetify/lib/styles/tools/elevation" as elevation;
|
@use "vuetify/lib/styles/tools/elevation" as elevation;
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,44 @@
|
|||||||
@use "sass:map";
|
@use "sass:map";
|
||||||
@use "template/index";
|
|
||||||
|
|
||||||
// 保留这个引用以向后兼容，但实际功能已经移至template/index.scss
|
// 基础变量和配置
|
||||||
@use "variables";
|
@use "variables";
|
||||||
|
@use "mixins";
|
||||||
|
@use "utils";
|
||||||
|
|
||||||
|
// 布局相关
|
||||||
|
@use "default-layout";
|
||||||
|
@use "vertical-nav";
|
||||||
|
@use "default-layout-w-vertical-nav";
|
||||||
|
|
||||||
|
// 组件样式
|
||||||
|
@use "components";
|
||||||
|
|
||||||
|
// 工具类
|
||||||
|
@use "utilities";
|
||||||
|
|
||||||
|
// 其他样式
|
||||||
|
@use "misc";
|
||||||
|
@use "dark";
|
||||||
|
|
||||||
|
// 第三方库样式
|
||||||
|
@use "libs/perfect-scrollbar";
|
||||||
|
@use "libs/apex-chart";
|
||||||
|
@use "libs/full-calendar";
|
||||||
|
@use "libs/vuetify";
|
||||||
|
|
||||||
|
// 全局样式
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,67 +1,88 @@
|
|||||||
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
@use "@configured-variables" as variables;
|
||||||
|
@use "../mixins";
|
||||||
|
|
||||||
|
// 👉 Apex chart
|
||||||
.apexcharts-canvas {
|
.apexcharts-canvas {
|
||||||
&line[stroke="transparent"] {
|
// For RTL alignment
|
||||||
display: "none";
|
.apexcharts-yaxis-texts-g {
|
||||||
|
text-align: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Tooltip
|
||||||
.apexcharts-tooltip {
|
.apexcharts-tooltip {
|
||||||
@include mixins_elevation.elevation(3);
|
line-height: 1.5;
|
||||||
|
|
||||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
|
||||||
background: rgb(var(--v-theme-surface));
|
|
||||||
|
|
||||||
.apexcharts-tooltip-title {
|
.apexcharts-tooltip-title {
|
||||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
background: rgb(var(--v-theme-surface));
|
background: rgb(var(--v-theme-surface));
|
||||||
|
font-weight: 500;
|
||||||
|
margin-block-end: 0.25rem;
|
||||||
|
padding-inline: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-text {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||||
|
font-size: inherit;
|
||||||
|
gap: 0.5rem;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-text-label,
|
||||||
|
.apexcharts-tooltip-text-value {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-series-group {
|
||||||
|
padding-block: 0 0.5rem;
|
||||||
|
padding-inline: 1rem;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-block-end: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
padding-block-start: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.apexcharts-theme-light {
|
&.apexcharts-theme-light {
|
||||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
border-color: rgb(var(--v-border-color));
|
||||||
}
|
background: rgb(var(--v-theme-surface));
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
&.apexcharts-theme-dark {
|
.apexcharts-tooltip-text-label,
|
||||||
color: white;
|
.apexcharts-tooltip-text-value {
|
||||||
}
|
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||||
|
}
|
||||||
.apexcharts-tooltip-series-group:first-of-type {
|
|
||||||
padding-block-end: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.apexcharts-xaxistooltip {
|
.apexcharts-marker {
|
||||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
transition: none;
|
||||||
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));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 👉 stroke-dasharray
|
||||||
|
.apexcharts-radialbar,
|
||||||
|
.apexcharts-radialbar-slice-current {
|
||||||
|
stroke-linecap: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip,
|
||||||
.apexcharts-yaxistooltip {
|
.apexcharts-yaxistooltip {
|
||||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
border-color: rgb(var(--v-border-color));
|
||||||
background: rgb(var(--v-theme-grey-50));
|
background: rgb(var(--v-theme-surface));
|
||||||
|
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
|
||||||
&::after {
|
|
||||||
border-inline-start-color: rgb(var(--v-theme-grey-50));
|
|
||||||
}
|
|
||||||
|
|
||||||
|
&::after,
|
||||||
&::before {
|
&::before {
|
||||||
border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
border-block-end-color: rgb(var(--v-border-color));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.apexcharts-xaxistooltip-text,
|
// 👉 Text color
|
||||||
.apexcharts-yaxistooltip-text {
|
|
||||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.apexcharts-text,
|
.apexcharts-text,
|
||||||
.apexcharts-tooltip-text,
|
.apexcharts-tooltip-text,
|
||||||
.apexcharts-datalabel-label,
|
.apexcharts-datalabel-label,
|
||||||
@@ -69,19 +90,16 @@
|
|||||||
.apexcharts-xaxistooltip-text,
|
.apexcharts-xaxistooltip-text,
|
||||||
.apexcharts-yaxistooltip-text,
|
.apexcharts-yaxistooltip-text,
|
||||||
.apexcharts-legend-text {
|
.apexcharts-legend-text {
|
||||||
|
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !important;
|
||||||
font-family: inherit !important;
|
font-family: inherit !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.apexcharts-pie-label {
|
// 👉 Annotation Label
|
||||||
fill: white;
|
.apexcharts-annotation-rect {
|
||||||
filter: none;
|
&.apexcharts-xaxis-annotation-rect,
|
||||||
}
|
&.apexcharts-yaxis-annotation-rect {
|
||||||
|
fill-opacity: 0.05;
|
||||||
.apexcharts-marker {
|
stroke-opacity: 0;
|
||||||
box-shadow: none;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.apexcharts-legend-marker {
|
|
||||||
margin-inline-end: 0.3875rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
@use "@core/scss/utils";
|
|
||||||
@use "@configured-variables" as variables;
|
@use "@configured-variables" as variables;
|
||||||
|
@use "../../utils";
|
||||||
|
|
||||||
// 👉 Application
|
// 👉 Application
|
||||||
// ℹ️ We need accurate vh in mobile devices as well
|
// ℹ️ We need accurate vh in mobile devices as well
|
||||||
@@ -45,6 +45,17 @@ h6,
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 👉 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
|
// 👉 Card
|
||||||
// Removes padding-top for immediately placed v-card-text after itself
|
// Removes padding-top for immediately placed v-card-text after itself
|
||||||
.v-card-text {
|
.v-card-text {
|
||||||
@@ -71,7 +82,9 @@ h6,
|
|||||||
&.v-checkbox-btn,
|
&.v-checkbox-btn,
|
||||||
&.v-radio,
|
&.v-radio,
|
||||||
&.v-radio-btn {
|
&.v-radio-btn {
|
||||||
margin-inline-start: -0.5625rem;
|
.v-selection-control__wrapper {
|
||||||
|
margin-inline-start: -0.5625rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -79,7 +92,9 @@ h6,
|
|||||||
&.v-radio,
|
&.v-radio,
|
||||||
&.v-radio-btn,
|
&.v-radio-btn,
|
||||||
&.v-checkbox-btn {
|
&.v-checkbox-btn {
|
||||||
margin-inline-start: -0.3125rem;
|
.v-selection-control__wrapper {
|
||||||
|
margin-inline-start: -0.3125rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -87,7 +102,9 @@ h6,
|
|||||||
&.v-checkbox-btn,
|
&.v-checkbox-btn,
|
||||||
&.v-radio,
|
&.v-radio,
|
||||||
&.v-radio-btn {
|
&.v-radio-btn {
|
||||||
margin-inline-start: -0.6875rem;
|
.v-selection-control__wrapper {
|
||||||
|
margin-inline-start: -0.6875rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -154,13 +171,131 @@ h6,
|
|||||||
padding-block: 0 !important;
|
padding-block: 0 !important;
|
||||||
padding-inline: 0 !important;
|
padding-inline: 0 !important;
|
||||||
|
|
||||||
|
> .v-ripple__container {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
padding-block-end: var(--v-card-list-gap) !important;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 👉 Table
|
// 👉 Divider
|
||||||
.v-table {
|
.v-divider {
|
||||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
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-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 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;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Dialog
|
||||||
|
.v-dialog--fullscreen {
|
||||||
|
background-color: rgb(var(--v-theme-surface));
|
||||||
|
}
|
||||||
|
|
||||||
|
// For dialog card title
|
||||||
|
.v-card-item + .v-card-text {
|
||||||
|
padding-block-start: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 v-slide-group (List of chips)
|
||||||
|
.v-slide-group {
|
||||||
|
.v-slide-group__container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
// Spacing between buttons in v-slide-group
|
||||||
|
.v-slide-group-item:not(:last-child) {
|
||||||
|
margin-inline-end: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Expansion Panel
|
||||||
|
.v-expansion-panels {
|
||||||
|
.v-expansion-panel-title {
|
||||||
|
min-block-size: unset !important;
|
||||||
|
padding-block: 1rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 v-textarea
|
||||||
|
.v-textarea {
|
||||||
|
textarea {
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Cursor
|
||||||
|
.cursor-pointer {
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,22 +1,24 @@
|
|||||||
$shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
|
$shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
|
||||||
$shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
|
$shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
|
||||||
$shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
|
$shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
|
||||||
|
/* stylelint-disable-next-line max-line-length */
|
||||||
$font-family-custom: 'Inter', 'Noto Sans SC', sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
$font-family-custom: 'Inter', 'Noto Sans SC', sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
|
|
||||||
// 👉 Card transition properties
|
// 👉 Card transition properties
|
||||||
$card-transition-property-custom: box-shadow, opacity;
|
$card-transition-property-custom: box-shadow, opacity;
|
||||||
|
|
||||||
@forward "vuetify/settings" with (
|
@forward "vuetify/settings" with (
|
||||||
// 👉 General settings
|
// 👉 General settings
|
||||||
$color-pack: false !default,
|
$color-pack: false !default,
|
||||||
$body-font-family: $font-family-custom !default,
|
|
||||||
$border-radius-root: 6px !default,
|
|
||||||
|
|
||||||
// 👉 Shadow opacity
|
// 👉 Shadow opacity
|
||||||
$shadow-key-umbra-opacity: $shadow-key-umbra-opacity-custom !default,
|
$shadow-key-umbra-opacity: $shadow-key-umbra-opacity-custom !default,
|
||||||
$shadow-key-penumbra-opacity: $shadow-key-penumbra-opacity-custom !default,
|
$shadow-key-penumbra-opacity: $shadow-key-penumbra-opacity-custom !default,
|
||||||
$shadow-key-ambient-opacity: $shadow-key-ambient-opacity-custom !default,
|
$shadow-key-ambient-opacity: $shadow-key-ambient-opacity-custom !default,
|
||||||
|
|
||||||
|
$body-font-family: $font-family-custom !default,
|
||||||
|
$border-radius-root: 6px !default,
|
||||||
|
|
||||||
$shadow-key-umbra: (
|
$shadow-key-umbra: (
|
||||||
0: (0 0 0 0 var(--v-shadow-key-umbra-opacity)),
|
0: (0 0 0 0 var(--v-shadow-key-umbra-opacity)),
|
||||||
1: (0 2px 1px -1px var(--v-shadow-key-umbra-opacity)),
|
1: (0 2px 1px -1px var(--v-shadow-key-umbra-opacity)),
|
||||||
@@ -119,6 +121,18 @@ $card-transition-property-custom: box-shadow, opacity;
|
|||||||
24: (0 9px 46px 8px $shadow-key-ambient-opacity-custom)
|
24: (0 9px 46px 8px $shadow-key-ambient-opacity-custom)
|
||||||
) !default,
|
) !default,
|
||||||
|
|
||||||
|
// 👉 Card
|
||||||
|
$card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
|
||||||
|
$card-elevation: 6 !default,
|
||||||
|
$card-title-line-height: 2rem !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,
|
||||||
|
$card-title-letter-spacing: 0.0094rem !default,
|
||||||
|
|
||||||
// 👉 Typography
|
// 👉 Typography
|
||||||
$typography: (
|
$typography: (
|
||||||
"h1": (
|
"h1": (
|
||||||
@@ -170,29 +184,14 @@ $card-transition-property-custom: box-shadow, opacity;
|
|||||||
)
|
)
|
||||||
) !default,
|
) !default,
|
||||||
|
|
||||||
// 👉 States
|
// 👉 List
|
||||||
$states: ("activated": 0.08) !default,
|
$list-item-icon-margin-end: 16px !default,
|
||||||
|
$list-item-icon-margin-start: 16px !default,
|
||||||
// 👉 Card
|
$list-item-subtitle-opacity: 1 !default,
|
||||||
$card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
|
$list-subheader-text-opacity: 1 !default,
|
||||||
$card-elevation: 6 !default,
|
|
||||||
$card-title-line-height: 1.6 !default,
|
|
||||||
$card-actions-min-height: unset !default,
|
|
||||||
$card-text-padding: 20px !default,
|
|
||||||
$card-item-padding: 15px 20px !default,
|
|
||||||
$card-actions-padding: 0 12px 12px !default,
|
|
||||||
$card-title-letter-spacing: 0.0094rem !default,
|
|
||||||
$card-subtitle-opacity: 1 !default,
|
|
||||||
$card-transition-property: $card-transition-property-custom !default,
|
|
||||||
|
|
||||||
// 👉 Navigation Drawer
|
|
||||||
$navigation-drawer-color: rgba(var(--v-theme-on-surface), var(--v-high-medium-opacity)) !default,
|
|
||||||
|
|
||||||
// 👉 Table
|
|
||||||
$table-color: rgba(var(--v-theme-on-surface), var(--v-high-medium-opacity)) !default,
|
|
||||||
|
|
||||||
// 👉 Tooltip
|
// 👉 Tooltip
|
||||||
$tooltip-background-color:#212121 !default,
|
$tooltip-background-color: #212121 !default,
|
||||||
$tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
|
$tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
|
||||||
$tooltip-font-size: 0.75rem !default,
|
$tooltip-font-size: 0.75rem !default,
|
||||||
$tooltip-border-radius: 4px !default,
|
$tooltip-border-radius: 4px !default,
|
||||||
@@ -205,6 +204,8 @@ $card-transition-property-custom: box-shadow, opacity;
|
|||||||
|
|
||||||
// 👉 Badge
|
// 👉 Badge
|
||||||
$badge-border-color:rgb(var(--v-theme-surface)) !default,
|
$badge-border-color:rgb(var(--v-theme-surface)) !default,
|
||||||
|
$badge-dot-height: 0.5rem !default,
|
||||||
|
$badge-dot-width: 0.5rem !default,
|
||||||
|
|
||||||
// 👉 Button
|
// 👉 Button
|
||||||
$button-height: 38px !default,
|
$button-height: 38px !default,
|
||||||
@@ -212,6 +213,7 @@ $card-transition-property-custom: box-shadow, opacity;
|
|||||||
$button-border-radius: 5px !default,
|
$button-border-radius: 5px !default,
|
||||||
$button-padding-ratio: 1.7 !default,
|
$button-padding-ratio: 1.7 !default,
|
||||||
$button-text-letter-spacing: 0.025rem !default,
|
$button-text-letter-spacing: 0.025rem !default,
|
||||||
|
$button-icon-density: ("default": 0.5, "comfortable": -2, "compact": -3) !default,
|
||||||
|
|
||||||
// 👉 Dialog
|
// 👉 Dialog
|
||||||
$dialog-card-header-padding: 20px !default,
|
$dialog-card-header-padding: 20px !default,
|
||||||
@@ -220,6 +222,7 @@ $card-transition-property-custom: box-shadow, opacity;
|
|||||||
|
|
||||||
// 👉 Chip
|
// 👉 Chip
|
||||||
$chip-label-border-radius: 4px !default,
|
$chip-label-border-radius: 4px !default,
|
||||||
|
$chip-close-size: 20px !default,
|
||||||
|
|
||||||
// 👉 Expansion panel
|
// 👉 Expansion panel
|
||||||
$expansion-panel-title-padding: 16px 20px !default,
|
$expansion-panel-title-padding: 16px 20px !default,
|
||||||
@@ -232,9 +235,6 @@ $card-transition-property-custom: box-shadow, opacity;
|
|||||||
// 👉 Menu
|
// 👉 Menu
|
||||||
$menu-content-border-radius: 5px !default,
|
$menu-content-border-radius: 5px !default,
|
||||||
|
|
||||||
// 👉 List
|
|
||||||
$list-subheader-text-opacity: 1 !default,
|
|
||||||
|
|
||||||
// 👉 Snackbar
|
// 👉 Snackbar
|
||||||
$snackbar-background:#212121 !default,
|
$snackbar-background:#212121 !default,
|
||||||
$snackbar-border-radius: 4px !default,
|
$snackbar-border-radius: 4px !default,
|
||||||
@@ -243,6 +243,11 @@ $card-transition-property-custom: box-shadow, opacity;
|
|||||||
// 👉 Tabs
|
// 👉 Tabs
|
||||||
$tabs-height: 40px !default,
|
$tabs-height: 40px !default,
|
||||||
|
|
||||||
|
// 👉 Slider
|
||||||
|
$slider-track-active-size: 4px !default,
|
||||||
|
$slider-thumb-label-padding: 4px 12px !default,
|
||||||
|
$slider-thumb-label-font-size: 0.875rem !default,
|
||||||
|
|
||||||
// 👉 Timeline
|
// 👉 Timeline
|
||||||
$timeline-dot-size: 34px !default,
|
$timeline-dot-size: 34px !default,
|
||||||
$timeline-dot-divider-background: transparent !default,
|
$timeline-dot-divider-background: transparent !default,
|
||||||
@@ -252,4 +257,7 @@ $card-transition-property-custom: box-shadow, opacity;
|
|||||||
|
|
||||||
// 👉 Navigation Drawer
|
// 👉 Navigation Drawer
|
||||||
$navigation-drawer-scrim-opacity:0.5 !default,
|
$navigation-drawer-scrim-opacity:0.5 !default,
|
||||||
|
|
||||||
|
// 👉 Table
|
||||||
|
$table-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)),
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1 +1,2 @@
|
|||||||
|
@use "variables";
|
||||||
@use "overrides";
|
@use "overrides";
|
||||||
|
|||||||
@@ -1,3 +1,21 @@
|
|||||||
%layout-navbar {
|
%layout-navbar {
|
||||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Vertical nav scrolled sticky elevated nav
|
||||||
|
%default-layout-vertical-nav-scrolled-sticky-elevated-nav {
|
||||||
|
background-color: rgb(var(--v-theme-surface));
|
||||||
|
box-shadow: 0 4px 8px -4px rgb(94 86 105 / 42%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Floating navbar and sticky elevated navbar scrolled
|
||||||
|
%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
|
||||||
|
background-color: rgb(var(--v-theme-surface));
|
||||||
|
box-shadow: 0 4px 8px -4px rgb(94 86 105 / 42%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Floating navbar overlay
|
||||||
|
%default-layout-vertical-nav-floating-navbar-overlay {
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
background-color: rgba(var(--v-theme-surface), 0.9);
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
@use "@core/scss/mixins";
|
@use "../mixins";
|
||||||
@use "@configured-variables" as variables;
|
@use "@configured-variables" as variables;
|
||||||
@use "vuetify/lib/styles/tools/states" as vuetifyStates;
|
@use "vuetify/lib/styles/tools/states" as vuetifyStates;
|
||||||
@use "@core/scss/utils";
|
@use "../utils";
|
||||||
|
|
||||||
// Nav items styles (including section title)
|
// Nav items styles (including section title)
|
||||||
%vertical-nav-item {
|
%vertical-nav-item {
|
||||||
|
|||||||
@@ -1,193 +0,0 @@
|
|||||||
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
|
||||||
@use "@configured-variables" as variables;
|
|
||||||
@use "mixins";
|
|
||||||
|
|
||||||
// 👉 Alert
|
|
||||||
.v-alert {
|
|
||||||
.v-alert__close {
|
|
||||||
.v-icon {
|
|
||||||
block-size: 20px !important;
|
|
||||||
font-size: 20px !important;
|
|
||||||
inline-size: 20px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.v-alert--prominent) .v-alert__prepend {
|
|
||||||
.v-icon {
|
|
||||||
block-size: 1.375rem !important;
|
|
||||||
font-size: 1.375rem !important;
|
|
||||||
inline-size: 1.375rem !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-alert-title {
|
|
||||||
line-height: 1.5rem;
|
|
||||||
margin-block-end: 0.25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 Avatar font-size
|
|
||||||
.v-avatar {
|
|
||||||
@include mixins.avatar-font-sizes($map: variables.$avatar-font-sizes);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 Button
|
|
||||||
.v-btn {
|
|
||||||
/* stylelint-disable-next-line no-descending-specificity */
|
|
||||||
&:not(.v-btn--icon) .v-icon {
|
|
||||||
--v-icon-size-multiplier: 0.9525 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 Chip
|
|
||||||
.v-chip.v-chip--size-default .v-avatar {
|
|
||||||
--v-avatar-height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-chip.v-chip--density-comfortable {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 Expansion Panel
|
|
||||||
.v-expansion-panel {
|
|
||||||
.v-expansion-panel-text {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 Tooltip
|
|
||||||
.v-tooltip > .v-overlay__content {
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 0.875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 List
|
|
||||||
|
|
||||||
// 👉 Tab with pill support
|
|
||||||
.v-tabs.v-tabs-pill {
|
|
||||||
.v-tab.v-btn {
|
|
||||||
border-radius: 6px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 Timeline added box shadow
|
|
||||||
.v-timeline-item {
|
|
||||||
.v-timeline-divider__dot {
|
|
||||||
.v-timeline-divider__inner-dot {
|
|
||||||
box-shadow: 0 0 0 0.1875rem rgb(var(--v-theme-on-surface-variant));
|
|
||||||
|
|
||||||
@each $color-name in variables.$theme-colors-name {
|
|
||||||
|
|
||||||
&.bg-#{$color-name} {
|
|
||||||
box-shadow: 0 0 0 0.1875rem rgba(var(--v-theme-#{$color-name}), 0.12);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 Timeline Outlined style
|
|
||||||
.v-timeline-variant-outlined.v-timeline {
|
|
||||||
.v-timeline-divider__dot {
|
|
||||||
.v-timeline-divider__inner-dot {
|
|
||||||
box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-on-surface-variant));
|
|
||||||
|
|
||||||
@each $color-name in variables.$theme-colors-name {
|
|
||||||
background-color: rgb(var(--v-theme-surface)) !important;
|
|
||||||
|
|
||||||
&.bg-#{$color-name} {
|
|
||||||
box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-#{$color-name}));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 Expansion panels
|
|
||||||
.v-expansion-panel-title,
|
|
||||||
.v-expansion-panel-title--active,
|
|
||||||
.v-expansion-panel-title:hover,
|
|
||||||
.v-expansion-panel-title:focus,
|
|
||||||
.v-expansion-panel-title:focus-visible,
|
|
||||||
.v-expansion-panel-title--active:focus,
|
|
||||||
.v-expansion-panel-title--active:hover {
|
|
||||||
.v-expansion-panel-title__overlay {
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 Set Elevation when panel open
|
|
||||||
|
|
||||||
.v-expansion-panels:not(.v-expansion-panels--variant-accordion) {
|
|
||||||
.v-expansion-panel.v-expansion-panel--active {
|
|
||||||
.v-expansion-panel__shadow {
|
|
||||||
@include mixins_elevation.elevation(3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 Slider
|
|
||||||
.v-slider-thumb {
|
|
||||||
.v-slider-thumb__label {
|
|
||||||
background: rgb(117, 117, 117);
|
|
||||||
color: rgb(var(--v-theme-on-primary));
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
color: rgb(117, 117, 117);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 Switch
|
|
||||||
.v-switch {
|
|
||||||
.v-selection-control:not(.v-selection-control--dirty) .v-switch__thumb {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 Table
|
|
||||||
.v-table--density-default > .v-table__wrapper > table > tbody > tr > td,
|
|
||||||
.v-table--density-default > .v-table__wrapper > table > thead > tr > td,
|
|
||||||
.v-table--density-default > .v-table__wrapper > table > tfoot > tr > td {
|
|
||||||
block-size: 50px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-table {
|
|
||||||
--v-table-header-height: 54px !important;
|
|
||||||
|
|
||||||
th {
|
|
||||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
|
|
||||||
.v-data-table-header__content {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-selection-control {
|
|
||||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-data-table {
|
|
||||||
th {
|
|
||||||
background: rgb(var(--v-table-header-background)) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 Pagination
|
|
||||||
.v-pagination {
|
|
||||||
.v-btn {
|
|
||||||
border-radius: 4px;
|
|
||||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 SnackBar
|
|
||||||
.v-snackbar--variant-elevated {
|
|
||||||
@include mixins.elevation(6);
|
|
||||||
}
|
|
||||||
@@ -1,101 +0,0 @@
|
|||||||
@use "sass:map";
|
|
||||||
@use "vuetify/lib/styles/settings" as vuetify_settings;
|
|
||||||
@use "@styles/variables/_vuetify.scss" as vuetify;
|
|
||||||
|
|
||||||
@mixin avatar-font-sizes($map: $avatar-sizes) {
|
|
||||||
@each $sizeName, $multiplier in vuetify_settings.$size-scales {
|
|
||||||
/* stylelint-disable-next-line scss/no-global-function-names */
|
|
||||||
$size: map.get($map, $sizeName);
|
|
||||||
|
|
||||||
&.v-avatar--size-#{$sizeName} {
|
|
||||||
font-size: #{$size}px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@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);
|
|
||||||
}
|
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin bordered-skin($component, $border-property: "border", $important: false) {
|
|
||||||
#{$component} {
|
|
||||||
box-shadow: none !important;
|
|
||||||
#{$border-property}: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) if($important, !important, null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@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));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin push-anchors() {
|
|
||||||
:target {
|
|
||||||
scroll-margin-block-start: 90px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin xs {
|
|
||||||
@media (width >= 0) and (width <= 599.98px) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin sm {
|
|
||||||
@media (width >= 600px) and (width <= 959.98px) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin md {
|
|
||||||
@media (width >= 960px) and (width <= 1279.98px) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin lg {
|
|
||||||
@media (width >= 1280px) and (width <= 1919.98px) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin xl {
|
|
||||||
@media (width >= 1920px) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
.bg-var-theme-background {
|
|
||||||
background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity)) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 Pagination small-select dropdown for table
|
|
||||||
// TODO: remove this class after vuetify datatable implememtation
|
|
||||||
|
|
||||||
.per-page-select {
|
|
||||||
margin-block: auto;
|
|
||||||
|
|
||||||
.v-field__input {
|
|
||||||
align-items: center;
|
|
||||||
padding: 2px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-field__append-inner {
|
|
||||||
align-items: center;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
.v-icon {
|
|
||||||
margin-inline-start: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,227 +0,0 @@
|
|||||||
@use "sass:map";
|
|
||||||
@use "utils";
|
|
||||||
@use "vuetify/lib/styles/tools/functions" as *;
|
|
||||||
|
|
||||||
$vertical-nav-horizontal-padding-custom: 1.375rem 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.625rem !default;
|
|
||||||
|
|
||||||
// Vertical Nav Configuration
|
|
||||||
$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 1.125rem !default;
|
|
||||||
$vertical-nav-horizontal-padding: $vertical-nav-horizontal-padding-custom !default;
|
|
||||||
|
|
||||||
// Vertical nav header padding
|
|
||||||
$vertical-nav-header-padding: 1rem 0.25rem 1rem $vertical-nav-horizontal-padding-start !default;
|
|
||||||
|
|
||||||
// 👉 Custom Variables
|
|
||||||
$avatar-font-sizes: (
|
|
||||||
"x-small":12,
|
|
||||||
"small":14,
|
|
||||||
"default":18,
|
|
||||||
"large":20,
|
|
||||||
"x-large":24
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
// 合并两个文件中的@forward配置
|
|
||||||
@forward "@layouts/styles/variables" with (
|
|
||||||
// 来自_variables.scss的配置
|
|
||||||
$layout-vertical-nav-collapsed-width: 68px !default,
|
|
||||||
|
|
||||||
// 来自template/_variables.scss的配置
|
|
||||||
$layout-vertical-nav-z-index: 1004,
|
|
||||||
$layout-overlay-z-index: 1003
|
|
||||||
);
|
|
||||||
|
|
||||||
// 使用命名空间来避免变量冲突
|
|
||||||
@use "@layouts/styles/variables" as layouts-vars;
|
|
||||||
|
|
||||||
$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: layouts-vars.$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;
|
|
||||||
|
|
||||||
// ℹ️ 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((var(--vh, 1vh) * 100) - 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
|
|
||||||
);
|
|
||||||
|
|
||||||
// Avatar sizes map
|
|
||||||
$avatar-font-sizes: (
|
|
||||||
"x-small": 0.625rem,
|
|
||||||
"small": 0.75rem,
|
|
||||||
"default": 0.875rem,
|
|
||||||
"large": 1rem,
|
|
||||||
"x-large": 1.125rem,
|
|
||||||
) !default;
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
@use "sass:map";
|
|
||||||
|
|
||||||
// Layout
|
|
||||||
@use "../vertical-nav";
|
|
||||||
@use "../default-layout";
|
|
||||||
@use "default-layout-w-vertical-nav";
|
|
||||||
|
|
||||||
// Components
|
|
||||||
@use "components";
|
|
||||||
|
|
||||||
// Utilities
|
|
||||||
@use "utilities";
|
|
||||||
@use "../utils";
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
@use "../misc";
|
|
||||||
|
|
||||||
// Dark
|
|
||||||
@use "../dark";
|
|
||||||
|
|
||||||
// Variables
|
|
||||||
@use "variables";
|
|
||||||
|
|
||||||
// libs
|
|
||||||
@use "libs/perfect-scrollbar";
|
|
||||||
@use "libs/vuetify";
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
@@ -1,106 +0,0 @@
|
|||||||
@use "@configureTheme" as theme;
|
|
||||||
@use "@configured-variables" as variables;
|
|
||||||
@use "../mixins";
|
|
||||||
|
|
||||||
// 👉 Apex chart
|
|
||||||
.apexcharts-canvas {
|
|
||||||
// For RTL alignment
|
|
||||||
.apexcharts-yaxis-texts-g {
|
|
||||||
text-align: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tooltip
|
|
||||||
.apexcharts-tooltip {
|
|
||||||
line-height: 1.5;
|
|
||||||
|
|
||||||
.apexcharts-tooltip-title {
|
|
||||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
|
||||||
background: rgb(var(--v-theme-surface));
|
|
||||||
font-weight: 500;
|
|
||||||
margin-block-end: 0.25rem;
|
|
||||||
padding-inline: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.apexcharts-tooltip-text {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
|
||||||
font-size: inherit;
|
|
||||||
gap: 0.5rem;
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.apexcharts-tooltip-text-label,
|
|
||||||
.apexcharts-tooltip-text-value {
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.apexcharts-tooltip-series-group {
|
|
||||||
padding-block: 0 0.5rem;
|
|
||||||
padding-inline: 1rem;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
padding-block-end: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
padding-block-start: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.apexcharts-theme-light {
|
|
||||||
border-color: rgb(var(--v-border-color));
|
|
||||||
background: rgb(var(--v-theme-surface));
|
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
.apexcharts-tooltip-text-label,
|
|
||||||
.apexcharts-tooltip-text-value {
|
|
||||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.apexcharts-marker {
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 stroke-dasharray
|
|
||||||
.apexcharts-radialbar,
|
|
||||||
.apexcharts-radialbar-slice-current {
|
|
||||||
stroke-linecap: round;
|
|
||||||
}
|
|
||||||
|
|
||||||
.apexcharts-xaxistooltip,
|
|
||||||
.apexcharts-yaxistooltip {
|
|
||||||
border-color: rgb(var(--v-border-color));
|
|
||||||
background: rgb(var(--v-theme-surface));
|
|
||||||
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
|
|
||||||
|
|
||||||
&::after,
|
|
||||||
&::before {
|
|
||||||
border-block-end-color: rgb(var(--v-border-color));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 Text color
|
|
||||||
.apexcharts-text,
|
|
||||||
.apexcharts-tooltip-text,
|
|
||||||
.apexcharts-datalabel-label,
|
|
||||||
.apexcharts-datalabel,
|
|
||||||
.apexcharts-xaxistooltip-text,
|
|
||||||
.apexcharts-yaxistooltip-text,
|
|
||||||
.apexcharts-legend-text {
|
|
||||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !important;
|
|
||||||
font-family: inherit !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 Annotation Label
|
|
||||||
.apexcharts-annotation-rect {
|
|
||||||
&.apexcharts-xaxis-annotation-rect,
|
|
||||||
&.apexcharts-yaxis-annotation-rect {
|
|
||||||
fill-opacity: 0.05;
|
|
||||||
stroke-opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,301 +0,0 @@
|
|||||||
@use "@configured-variables" as variables;
|
|
||||||
@use "../../../utils";
|
|
||||||
|
|
||||||
// 👉 Application
|
|
||||||
// ℹ️ We need accurate vh in mobile devices as well
|
|
||||||
.v-application__wrap {
|
|
||||||
/* stylelint-disable-next-line liberty/use-logical-spec */
|
|
||||||
min-height: calc(var(--vh, 1vh) * 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 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));
|
|
||||||
}
|
|
||||||
|
|
||||||
.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-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;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 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;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 Dialog
|
|
||||||
.v-dialog--fullscreen {
|
|
||||||
background-color: rgb(var(--v-theme-surface));
|
|
||||||
}
|
|
||||||
|
|
||||||
// For dialog card title
|
|
||||||
.v-card-item + .v-card-text {
|
|
||||||
padding-block-start: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 v-slide-group (List of chips)
|
|
||||||
.v-slide-group {
|
|
||||||
.v-slide-group__container {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
// Spacing between buttons in v-slide-group
|
|
||||||
.v-slide-group-item:not(:last-child) {
|
|
||||||
margin-inline-end: 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 Expansion Panel
|
|
||||||
.v-expansion-panels {
|
|
||||||
.v-expansion-panel-title {
|
|
||||||
min-block-size: unset !important;
|
|
||||||
padding-block: 1rem !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 v-textarea
|
|
||||||
.v-textarea {
|
|
||||||
textarea {
|
|
||||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 👉 Cursor
|
|
||||||
.cursor-pointer {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
@@ -1,263 +0,0 @@
|
|||||||
$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);
|
|
||||||
/* stylelint-disable-next-line max-line-length */
|
|
||||||
$font-family-custom: 'Inter', 'Noto Sans SC', sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
||||||
|
|
||||||
// 👉 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,
|
|
||||||
|
|
||||||
$body-font-family: $font-family-custom !default,
|
|
||||||
$border-radius-root: 6px !default,
|
|
||||||
|
|
||||||
$shadow-key-umbra: (
|
|
||||||
0: (0 0 0 0 var(--v-shadow-key-umbra-opacity)),
|
|
||||||
1: (0 2px 1px -1px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
2: (0 3px 1px -2px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
|
|
||||||
// ℹ️ Modified
|
|
||||||
3: (0 4px 14px -4px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
|
|
||||||
4: (0 2px 4px -1px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
5: (0 3px 5px -1px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
|
|
||||||
// ℹ️ Modified
|
|
||||||
6: (0 4px 5px -2px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
|
|
||||||
7: (0 4px 5px -2px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
8: (0 5px 5px -3px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
9: (0 5px 6px -3px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
10: (0 6px 6px -3px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
11: (0 6px 7px -4px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
12: (0 7px 8px -4px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
13: (0 7px 8px -4px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
14: (0 7px 9px -4px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
15: (0 8px 9px -5px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
16: (0 8px 10px -5px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
17: (0 8px 11px -5px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
18: (0 9px 11px -5px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
19: (0 9px 12px -6px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
20: (0 10px 13px -6px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
21: (0 10px 13px -6px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
22: (0 10px 14px -6px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
23: (0 11px 14px -7px var(--v-shadow-key-umbra-opacity)),
|
|
||||||
24: (0 11px 15px -7px var(--v-shadow-key-umbra-opacity))
|
|
||||||
) !default,
|
|
||||||
|
|
||||||
$shadow-key-penumbra: (
|
|
||||||
0: (0 0 0 0 $shadow-key-penumbra-opacity-custom),
|
|
||||||
1: (0 1px 1px 0 $shadow-key-penumbra-opacity-custom),
|
|
||||||
2: (0 2px 2px 0 $shadow-key-penumbra-opacity-custom),
|
|
||||||
|
|
||||||
// ℹ️ Modified
|
|
||||||
3: (0 4px 8px -4px $shadow-key-penumbra-opacity-custom),
|
|
||||||
|
|
||||||
4: (0 4px 5px 0 $shadow-key-penumbra-opacity-custom),
|
|
||||||
5: (0 5px 8px 0 $shadow-key-penumbra-opacity-custom),
|
|
||||||
|
|
||||||
// ℹ️ Modified
|
|
||||||
6: (0 2px 10px 1px $shadow-key-penumbra-opacity-custom),
|
|
||||||
|
|
||||||
7: (0 7px 10px 1px $shadow-key-penumbra-opacity-custom),
|
|
||||||
8: (0 8px 10px 1px $shadow-key-penumbra-opacity-custom),
|
|
||||||
9: (0 9px 12px 1px $shadow-key-penumbra-opacity-custom),
|
|
||||||
10: (0 10px 14px 1px $shadow-key-penumbra-opacity-custom),
|
|
||||||
11: (0 11px 15px 1px $shadow-key-penumbra-opacity-custom),
|
|
||||||
12: (0 12px 17px 2px $shadow-key-penumbra-opacity-custom),
|
|
||||||
13: (0 13px 19px 2px $shadow-key-penumbra-opacity-custom),
|
|
||||||
14: (0 14px 21px 2px $shadow-key-penumbra-opacity-custom),
|
|
||||||
15: (0 15px 22px 2px $shadow-key-penumbra-opacity-custom),
|
|
||||||
16: (0 16px 24px 2px $shadow-key-penumbra-opacity-custom),
|
|
||||||
17: (0 17px 26px 2px $shadow-key-penumbra-opacity-custom),
|
|
||||||
18: (0 18px 28px 2px $shadow-key-penumbra-opacity-custom),
|
|
||||||
19: (0 19px 29px 2px $shadow-key-penumbra-opacity-custom),
|
|
||||||
20: (0 20px 31px 3px $shadow-key-penumbra-opacity-custom),
|
|
||||||
21: (0 21px 33px 3px $shadow-key-penumbra-opacity-custom),
|
|
||||||
22: (0 22px 35px 3px $shadow-key-penumbra-opacity-custom),
|
|
||||||
23: (0 23px 36px 3px $shadow-key-penumbra-opacity-custom),
|
|
||||||
24: (0 24px 38px 3px $shadow-key-penumbra-opacity-custom)
|
|
||||||
) !default,
|
|
||||||
|
|
||||||
$shadow-key-ambient: (
|
|
||||||
0: (0 0 0 0 $shadow-key-ambient-opacity-custom),
|
|
||||||
1: (0 1px 3px 0 $shadow-key-ambient-opacity-custom),
|
|
||||||
2: (0 1px 5px 0 $shadow-key-ambient-opacity-custom),
|
|
||||||
|
|
||||||
// ℹ️ Modified
|
|
||||||
3: (0 4px 8px -4px $shadow-key-ambient-opacity-custom),
|
|
||||||
|
|
||||||
4: (0 1px 10px 0 $shadow-key-ambient-opacity-custom),
|
|
||||||
5: (0 1px 14px 0 $shadow-key-ambient-opacity-custom),
|
|
||||||
|
|
||||||
// ℹ️ Modified
|
|
||||||
6: (0 2px 16px 1px $shadow-key-ambient-opacity-custom),
|
|
||||||
|
|
||||||
7: (0 2px 16px 1px $shadow-key-ambient-opacity-custom),
|
|
||||||
8: (0 3px 14px 2px $shadow-key-ambient-opacity-custom),
|
|
||||||
9: (0 3px 16px 2px $shadow-key-ambient-opacity-custom),
|
|
||||||
10: (0 4px 18px 3px $shadow-key-ambient-opacity-custom),
|
|
||||||
11: (0 4px 20px 3px $shadow-key-ambient-opacity-custom),
|
|
||||||
12: (0 5px 22px 4px $shadow-key-ambient-opacity-custom),
|
|
||||||
13: (0 5px 24px 4px $shadow-key-ambient-opacity-custom),
|
|
||||||
14: (0 5px 26px 4px $shadow-key-ambient-opacity-custom),
|
|
||||||
15: (0 6px 28px 5px $shadow-key-ambient-opacity-custom),
|
|
||||||
16: (0 6px 30px 5px $shadow-key-ambient-opacity-custom),
|
|
||||||
17: (0 6px 32px 5px $shadow-key-ambient-opacity-custom),
|
|
||||||
18: (0 7px 34px 6px $shadow-key-ambient-opacity-custom),
|
|
||||||
19: (0 7px 36px 6px $shadow-key-ambient-opacity-custom),
|
|
||||||
20: (0 8px 38px 7px $shadow-key-ambient-opacity-custom),
|
|
||||||
21: (0 8px 40px 7px $shadow-key-ambient-opacity-custom),
|
|
||||||
22: (0 8px 42px 7px $shadow-key-ambient-opacity-custom),
|
|
||||||
23: (0 9px 44px 8px $shadow-key-ambient-opacity-custom),
|
|
||||||
24: (0 9px 46px 8px $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: 2rem !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,
|
|
||||||
$card-title-letter-spacing: 0.0094rem !default,
|
|
||||||
|
|
||||||
// 👉 Typography
|
|
||||||
$typography: (
|
|
||||||
"h1": (
|
|
||||||
"weight": 500,
|
|
||||||
"line-height": 7rem,
|
|
||||||
"letter-spacing": -0.0938rem
|
|
||||||
),
|
|
||||||
"h2": (
|
|
||||||
"weight": 500,
|
|
||||||
"line-height": 4.5rem,
|
|
||||||
"letter-spacing": -0.0313rem
|
|
||||||
),
|
|
||||||
"h3": (
|
|
||||||
"weight": 500,
|
|
||||||
"line-height": 3.5rem
|
|
||||||
),
|
|
||||||
"h4": (
|
|
||||||
"weight": 500,
|
|
||||||
"line-height": 2.625rem,
|
|
||||||
"letter-spacing": 0.0156rem
|
|
||||||
),
|
|
||||||
"h5": (
|
|
||||||
"weight": 500,
|
|
||||||
"line-height": 2rem
|
|
||||||
),
|
|
||||||
"h6": (
|
|
||||||
"letter-spacing": 0.0094rem
|
|
||||||
),
|
|
||||||
"subtitle-1": (
|
|
||||||
"letter-spacing": 0.0094rem
|
|
||||||
),
|
|
||||||
"subtitle-2": (
|
|
||||||
"line-height": 1.375rem,
|
|
||||||
"letter-spacing": 0.0063rem,
|
|
||||||
),
|
|
||||||
"body-1": (
|
|
||||||
"letter-spacing": 0.0094rem,
|
|
||||||
),
|
|
||||||
"body-2": (
|
|
||||||
"letter-spacing": 0.0094rem,
|
|
||||||
),
|
|
||||||
"caption": (
|
|
||||||
"letter-spacing": 0.025rem,
|
|
||||||
),
|
|
||||||
"overline": (
|
|
||||||
"weight": 400,
|
|
||||||
"line-height": 1.125rem,
|
|
||||||
"letter-spacing": 0.0625rem,
|
|
||||||
)
|
|
||||||
) !default,
|
|
||||||
|
|
||||||
// 👉 List
|
|
||||||
$list-item-icon-margin-end: 16px !default,
|
|
||||||
$list-item-icon-margin-start: 16px !default,
|
|
||||||
$list-item-subtitle-opacity: 1 !default,
|
|
||||||
$list-subheader-text-opacity: 1 !default,
|
|
||||||
|
|
||||||
// 👉 Tooltip
|
|
||||||
$tooltip-background-color: #212121 !default,
|
|
||||||
$tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
|
|
||||||
$tooltip-font-size: 0.75rem !default,
|
|
||||||
$tooltip-border-radius: 4px !default,
|
|
||||||
$tooltip-padding: 4px 8px !default,
|
|
||||||
|
|
||||||
// 👉 Alert
|
|
||||||
$alert-title-font-size: 1rem !default,
|
|
||||||
$alert-border-radius: 5px !default,
|
|
||||||
$alert-title-letter-spacing: 0.15px !default,
|
|
||||||
|
|
||||||
// 👉 Badge
|
|
||||||
$badge-border-color:rgb(var(--v-theme-surface)) !default,
|
|
||||||
$badge-dot-height: 0.5rem !default,
|
|
||||||
$badge-dot-width: 0.5rem !default,
|
|
||||||
|
|
||||||
// 👉 Button
|
|
||||||
$button-height: 38px !default,
|
|
||||||
$button-elevation: ("default": 3, "hover": 4, "active": 8) !default,
|
|
||||||
$button-border-radius: 5px !default,
|
|
||||||
$button-padding-ratio: 1.7 !default,
|
|
||||||
$button-text-letter-spacing: 0.025rem !default,
|
|
||||||
$button-icon-density: ("default": 0.5, "comfortable": -2, "compact": -3) !default,
|
|
||||||
|
|
||||||
// 👉 Dialog
|
|
||||||
$dialog-card-header-padding: 20px !default,
|
|
||||||
$dialog-card-header-text-padding-top: 0 !default,
|
|
||||||
$dialog-card-text-padding: 20px !default,
|
|
||||||
|
|
||||||
// 👉 Chip
|
|
||||||
$chip-label-border-radius: 4px !default,
|
|
||||||
$chip-close-size: 20px !default,
|
|
||||||
|
|
||||||
// 👉 Expansion panel
|
|
||||||
$expansion-panel-title-padding: 16px 20px !default,
|
|
||||||
$expansion-panel-title-font-size: 1rem !default,
|
|
||||||
$expansion-panel-disabled-overlay: 0 !default,
|
|
||||||
$expansion-panel-active-title-min-height: 51px !default,
|
|
||||||
$expansion-panel-title-min-height: 51px !default,
|
|
||||||
$expansion-panel-text-padding: 0 20px 20px !default,
|
|
||||||
|
|
||||||
// 👉 Menu
|
|
||||||
$menu-content-border-radius: 5px !default,
|
|
||||||
|
|
||||||
// 👉 Snackbar
|
|
||||||
$snackbar-background:#212121 !default,
|
|
||||||
$snackbar-border-radius: 4px !default,
|
|
||||||
$snackbar-color: rgb(var(--v-theme-on-primary)) !default,
|
|
||||||
|
|
||||||
// 👉 Tabs
|
|
||||||
$tabs-height: 40px !default,
|
|
||||||
|
|
||||||
// 👉 Slider
|
|
||||||
$slider-track-active-size: 4px !default,
|
|
||||||
$slider-thumb-label-padding: 4px 12px !default,
|
|
||||||
$slider-thumb-label-font-size: 0.875rem !default,
|
|
||||||
|
|
||||||
// 👉 Timeline
|
|
||||||
$timeline-dot-size: 34px !default,
|
|
||||||
$timeline-dot-divider-background: transparent !default,
|
|
||||||
|
|
||||||
// 👉 Overlay
|
|
||||||
$overlay-opacity: 0.5 !default,
|
|
||||||
|
|
||||||
// 👉 Navigation Drawer
|
|
||||||
$navigation-drawer-scrim-opacity:0.5 !default,
|
|
||||||
|
|
||||||
// 👉 Table
|
|
||||||
$table-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)),
|
|
||||||
);
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
@use "variables";
|
|
||||||
@use "overrides";
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
.layout-blank {
|
|
||||||
.misc-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 1.25rem;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.misc-footer-img {
|
|
||||||
position: absolute;
|
|
||||||
inline-size: 100%;
|
|
||||||
inset-block-end: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.misc-footer-tree {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.misc-avatar {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
.layout-blank {
|
|
||||||
.auth-wrapper {
|
|
||||||
min-block-size: calc(var(--vh, 1vh) * 100);
|
|
||||||
|
|
||||||
.auth-footer-mask {
|
|
||||||
position: absolute;
|
|
||||||
inset-block-end: 0;
|
|
||||||
min-inline-size: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-footer-start-tree,
|
|
||||||
.auth-footer-end-tree {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-footer-start-tree {
|
|
||||||
inset-block-end: 0;
|
|
||||||
inset-inline-start: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-footer-end-tree {
|
|
||||||
inset-block-end: 0;
|
|
||||||
inset-inline-end: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-illustration {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card {
|
|
||||||
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: 1;
|
|
||||||
inset-block-start: 2rem;
|
|
||||||
inset-inline-start: 2.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card-v2 {
|
|
||||||
background-color: rgb(var(--v-theme-surface));
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
@use "@configured-variables" as variables;
|
|
||||||
@use "misc";
|
|
||||||
@use "../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: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
%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: 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 */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
%layout-navbar {
|
|
||||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
@forward "nav";
|
|
||||||
@forward "vertical-nav";
|
|
||||||
@forward "default-layout";
|
|
||||||
@forward "default-layout-vertical-nav";
|
|
||||||
@forward "misc";
|
|
||||||
@@ -1,46 +0,0 @@
|
|||||||
%blurry-bg {
|
|
||||||
position: relative;
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 4%), 0 1px 2px rgba(0, 0, 0, 2%);
|
|
||||||
|
|
||||||
@media (width >= 1280px) {
|
|
||||||
background: rgba(var(--v-theme-background), 1);
|
|
||||||
|
|
||||||
.v-theme--transparent & {
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
background: rgba(var(--v-theme-background), 0.1) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media (width < 1280px) {
|
|
||||||
background: transparent;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
z-index: -1;
|
|
||||||
backdrop-filter: blur(24px);
|
|
||||||
block-size: calc(env(safe-area-inset-top, 0px) + var(--navbar-tab-height) + 4rem);
|
|
||||||
content: "";
|
|
||||||
inset-block-start: 0;
|
|
||||||
inset-inline: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: all 0.3s ease-in-out;
|
|
||||||
|
|
||||||
.v-theme--light & {
|
|
||||||
background: rgba(var(--v-theme-surface), 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-theme--dark & {
|
|
||||||
background: rgba(var(--v-theme-background), 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-theme--purple & {
|
|
||||||
background: rgba(var(--v-theme-background), 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-theme--transparent & {
|
|
||||||
background: rgba(var(--v-theme-background), 0.3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
%nav-link-active {
|
|
||||||
background:
|
|
||||||
linear-gradient(
|
|
||||||
-72.47deg,
|
|
||||||
rgb(var(--v-theme-primary)) 22.16%,
|
|
||||||
rgba(var(--v-theme-primary), 0.7) 76.47%
|
|
||||||
) !important;
|
|
||||||
}
|
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
@use "@configured-variables" as variables;
|
|
||||||
|
|
||||||
// ℹ️ Add divider around section title
|
|
||||||
%vertical-nav-section-title {
|
|
||||||
/*
|
|
||||||
ℹ️ 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.625rem !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;
|
|
||||||
}
|
|
||||||
|
|
||||||
%vertical-nav-item-interactive {
|
|
||||||
// ℹ️ Wobble effect
|
|
||||||
// transition: margin-inline 0.4s ease-in-out;
|
|
||||||
// will-change: margin-inline;
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,8 +1,8 @@
|
|||||||
/* 主样式文件 - 合并所有CSS/SCSS引用 */
|
/* 主样式文件 - 合并所有CSS/SCSS引用 */
|
||||||
|
|
||||||
/* Vuetify和模板核心样式 */
|
/* Vuetify和模板核心样式 */
|
||||||
@use '@core/scss/template/libs/vuetify/index' as vuetify-lib;
|
@use '@core/scss/libs/vuetify/index' as vuetify-lib;
|
||||||
@use '@core/scss/template/index' as template;
|
@use '@core/scss/index' as template;
|
||||||
@use '@layouts/styles/index' as layouts;
|
@use '@layouts/styles/index' as layouts;
|
||||||
@use 'vuetify/styles' as vuetify;
|
@use 'vuetify/styles' as vuetify;
|
||||||
@use '@styles/custom' as custom;
|
@use '@styles/custom' as custom;
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
@forward "@core/scss/template/variables";
|
@forward "@core/scss/variables";
|
||||||
|
|
||||||
// ℹ️ Remove above import and uncomment below to override core variables.
|
// 如果需要自定义变量，可以在这里添加
|
||||||
// @forward "@core/scss/template/variables" with (
|
// @forward "@core/scss/variables" with (
|
||||||
// $<variable-name>: <variable-value>
|
// $custom-variable: value
|
||||||
// )
|
// );
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
// ❗ Path must be relative
|
// ❗ Path must be relative
|
||||||
@forward "../../@core/scss/template/libs/vuetify/variables";
|
@forward "../../@core/scss/libs/vuetify/variables";
|
||||||
|
|
||||||
// ℹ️ Remove above import and uncomment below to override core variables.
|
// 如果需要自定义Vuetify变量，可以在这里添加
|
||||||
// @forward "../../@core/scss/template/libs/vuetify/variables" with (
|
// @forward "../../@core/scss/libs/vuetify/variables" with (
|
||||||
// $<variable-name>: <variable-value>
|
// $custom-vuetify-variable: value
|
||||||
// )
|
// );
|
||||||
|
|||||||
Reference in New Issue
Block a user