bf83c58982
- Add more documentation. - Use `main.scss` instead of importing components individually. This improves productivity without compilation errors due to missing imports and allows for easier future file/folder changes and refactorings inside `./styles`. - Use partials with underscored naming. Because it documents that the files should not be individually imported. - Introduce `third-party-extensions` folder to group styles that overwrites third party components. - Refactor variable names from generic to specific. - Use Sass modules (`@use` and `@forward`) over depreciated `@import` syntax. - Separate font assets from Sass files (`styles/`). Create `assets/` folder that will contain both. - Create `_globals.css` for global styling of common element instead of using `App.vue`.
59 lines
2.1 KiB
SCSS
59 lines
2.1 KiB
SCSS
// Overrides base styling for LiquorTree
|
|
@use "@/presentation/assets/styles/colors" as *;
|
|
|
|
$color-tree-bg : $color-primary-darker;
|
|
$color-node-arrow : $color-on-primary;
|
|
$color-node-fg : $color-on-primary;
|
|
$color-node-hover-bg : $color-primary-dark;
|
|
$color-node-keyboard-bg : $color-surface;
|
|
$color-node-keyboard-fg : $color-on-surface;
|
|
$color-node-checkbox-bg-checked : $color-secondary;
|
|
$color-node-checkbox-bg-unchecked : $color-primary-darkest;
|
|
$color-node-checkbox-border-checked : $color-secondary;
|
|
$color-node-checkbox-border-unchecked : $color-on-primary;
|
|
$color-node-checkbox-tick-checked : $color-on-secondary;
|
|
|
|
.tree {
|
|
background: $color-tree-bg;
|
|
&-node {
|
|
white-space: normal !important;
|
|
> .tree-content {
|
|
> .tree-anchor > span {
|
|
color: $color-node-fg;
|
|
text-transform: uppercase;
|
|
font-size: 1.5em;
|
|
}
|
|
&:hover {
|
|
background: $color-node-hover-bg !important;
|
|
}
|
|
}
|
|
&.selected { // When using keyboard navigation it highlights current item and its child items
|
|
background: $color-node-keyboard-bg;
|
|
.tree-text {
|
|
color: $color-node-keyboard-fg !important; // $block
|
|
}
|
|
}
|
|
}
|
|
&-checkbox {
|
|
border-color: $color-node-checkbox-border-unchecked !important;
|
|
&.checked {
|
|
background: $color-node-checkbox-bg-checked !important;
|
|
border-color: $color-node-checkbox-border-checked !important;
|
|
&:after {
|
|
border-color: $color-node-checkbox-tick-checked !important;
|
|
}
|
|
}
|
|
&.indeterminate {
|
|
border-color: $color-node-checkbox-border-unchecked !important;
|
|
}
|
|
background: $color-node-checkbox-bg-unchecked !important;
|
|
}
|
|
&-arrow {
|
|
&.has-child {
|
|
&.rtl:after, &:after {
|
|
border-color: $color-node-arrow !important;
|
|
}
|
|
}
|
|
}
|
|
}
|