430537f704
Remove uppercase text transformation from node titles (script and categories) and "no results found" text when searching. It increases the readability giving it a clean look.
63 lines
2.4 KiB
SCSS
63 lines
2.4 KiB
SCSS
// Overrides base styling for LiquorTree
|
|
@use "@/presentation/assets/styles/colors" as *;
|
|
@use "@/presentation/assets/styles/mixins" 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;
|
|
font-size: 1.5em;
|
|
}
|
|
display: block; // so it takes full width to allow aligning items inside
|
|
}
|
|
@include hover-or-touch {
|
|
background: $color-node-hover-bg !important;
|
|
}
|
|
background: $color-tree-bg !important; // If not styled, it gets white background on mobile.
|
|
}
|
|
&.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;
|
|
}
|
|
}
|
|
}
|
|
}
|