mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-05-12 02:21:06 +08:00
97 lines
3.0 KiB
SCSS
97 lines
3.0 KiB
SCSS
/*
|
||
TODO: Add docs on when to use placeholder vs when to use SASS variable
|
||
|
||
Placeholder
|
||
- When we want to keep customization to our self between templates use it
|
||
|
||
Variables
|
||
- When we want to allow customization from both user and our side
|
||
- You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header)
|
||
*/
|
||
@use "sass:map";
|
||
|
||
// @forward "@layouts/styles/variables";
|
||
@use "utils";
|
||
|
||
// 👉 Default layout
|
||
|
||
$navbar-high-emphasis-text: true !default;
|
||
|
||
@forward "@layouts/styles/variables" with (
|
||
$layout-vertical-nav-collapsed-width: 68px !default,
|
||
);
|
||
@use "@layouts/styles/variables" as *;
|
||
|
||
$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: 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: $layout-vertical-nav-navbar-height !default;
|
||
$vertical-nav-navbar-shadow: 0 4px 8px -4px rgb(94 86 105 / 42%);
|
||
|
||
// 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;
|
||
|
||
// Move logo when vertical nav is mini (collapsed but not hovered)
|
||
$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -4px;
|
||
|
||
// 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;
|
||
$vertical-nav-items-icon-margin-inline-end: 0.625rem;
|
||
|
||
// 👉 Plugins
|
||
|
||
$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35);
|
||
|
||
// 👉 Custom Variables
|
||
$avatar-font-sizes: () !default;
|
||
$avatar-font-sizes: map.deep-merge(
|
||
(
|
||
"x-small":12,
|
||
"small":14,
|
||
"default":18,
|
||
"large":20,
|
||
"x-large":24
|
||
),
|
||
$avatar-font-sizes
|
||
);
|