diff --git a/src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue b/src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue index 20c5bad12..f4f8d086e 100644 --- a/src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue +++ b/src/components/DocumentationTopic/Hero/HierarchyCollapsedItems.vue @@ -101,7 +101,9 @@ $border-width: 1px; // of the nav area, so they are represented as clear overlays here $toggle-bg-color: var(--color-nav-hierarchy-collapse-background); $toggle-bg-color-dark: var(--color-nav-dark-hierarchy-collapse-background); +$toggle-bg-color-hover: var(--color-nav-hierarchy-collapse-background-hover); $toggle-border-color: var(--color-nav-hierarchy-collapse-borders); +$toggle-border-color-hover: var(--color-nav-hierarchy-collapse-borders-hover); $hierarchy-toggle-border-width: 0 !default; $toggle-height: rem(19px); $toggle-width: rem(36px); @@ -158,8 +160,13 @@ $dropdown-vertical-offset: rem(7px); display: flex; align-items: center; justify-content: center; - @include nav-dark() { - background: $toggle-bg-color-dark; + + &:active, + &:focus, + &.focused, + &:hover { + background: $toggle-bg-color-hover; + border-color: $toggle-border-color-hover; } &:active, diff --git a/src/styles/core/colors/_dark.scss b/src/styles/core/colors/_dark.scss index f64c64a77..069d75701 100644 --- a/src/styles/core/colors/_dark.scss +++ b/src/styles/core/colors/_dark.scss @@ -46,6 +46,8 @@ --color-nav-expanded: var(--color-nav-dark-expanded); --color-nav-hierarchy-collapse-background: var(--color-nav-dark-hierarchy-collapse-background); --color-nav-hierarchy-collapse-borders: var(--color-nav-dark-hierarchy-collapse-borders); + --color-nav-hierarchy-collapse-background-hover: #{change-color(dark-color(fill-blue), $alpha: 0.5)}; + --color-nav-hierarchy-collapse-borders-hover: #{dark-color(figure-blue)}; --color-nav-hierarchy-item-borders: var(--color-nav-dark-hierarchy-item-borders); --color-nav-keyline: var(--color-nav-dark-keyline); --color-nav-link-color: var(--color-nav-dark-link-color);