fix bad highlighting of selected nodes when using keyboard navigation

This commit is contained in:
undergroundwires
2020-09-04 01:24:35 +01:00
parent db74531cd4
commit 255133af4d

View File

@@ -2,37 +2,27 @@
@import "@/presentation/styles/colors.scss"; @import "@/presentation/styles/colors.scss";
.tree { .tree {
background-color: $slate; background: $slate;
} &-node {
.tree-node > .tree-content > .tree-anchor > span {
color: $white !important;
text-transform: uppercase;
color: $light-gray;
font-size: 1.5em;
}
.tree-node {
white-space: normal !important; white-space: normal !important;
} > .tree-content {
.tree-arrow.has-child {
&.rtl:after, &:after {
border-color: $white !important;
}
}
.tree-node.selected > .tree-content {
> .tree-anchor > span { > .tree-anchor > span {
font-weight: bolder; color: $white;
text-transform: uppercase;
font-size: 1.5em;
} }
} &:hover {
.tree-content:hover {
background: $dark-gray !important; background: $dark-gray !important;
} }
}
.tree-checkbox { &.selected { // When using keyboard navigation it higlights current item and its child items
background: $gray;
.tree-text {
color: $black !important;
}
}
}
&-checkbox {
&.checked { &.checked {
background: $accent !important; background: $accent !important;
} }
@@ -40,4 +30,12 @@
border-color: $gray !important; border-color: $gray !important;
} }
background: $dark-slate !important; background: $dark-slate !important;
}
&-arrow {
&.has-child {
&.rtl:after, &:after {
border-color: $white !important;
}
}
}
} }