Fixed font weight on active nav links in design sidebar

refs https://github.com/TryGhost/Team/issues/1149

- changed `current-when` for the design settings title to only be active on the index screen which corresponds to the setting groups being active/usable
- updated styles to use the `.active` class rather than just `:focus`
This commit is contained in:
Kevin Ansfield 2021-10-19 12:07:56 +01:00
parent fb9b4b7957
commit 2158237566
2 changed files with 6 additions and 4 deletions

View File

@ -4,7 +4,7 @@
<section class="gh-nav-body gh-nav-design">
<div class="gh-nav-top" {{on "click" this.transitionBackToIndex}}>
<div class="gh-nav-list gh-nav-main">
<LinkTo @route="settings.design" class="gh-nav-menu-title" {{on "click" this.closeAllSections}}>Site design</LinkTo>
<LinkTo @route="settings.design" class="gh-nav-menu-title" @current-when="settings.design.index" {{on "click" this.closeAllSections}}>Site design</LinkTo>
{{#let (eq this.openSection "brand") as |isOpen|}}
<button class="gh-nav-design-tab {{if isOpen "active"}}" type="button" {{on "click" (fn this.toggleSection "brand")}}>
<span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-down-stroke" "arrow-right-stroke")}}</span>

View File

@ -1428,7 +1428,8 @@ p.theme-validation-details {
background: var(--mainmenu-color-hover-bg);
}
.gh-nav-design .gh-nav-menu-title:focus {
.gh-nav-design .gh-nav-menu-title:focus,
.gh-nav-design .gh-nav-menu-title.active {
font-weight: 700;
}
@ -1468,7 +1469,8 @@ p.theme-validation-details {
font-weight: 500;
}
.gh-nav-bottom .gh-nav-design-tab:focus span {
.gh-nav-bottom .gh-nav-design-tab:focus span,
.gh-nav-bottom .gh-nav-design-tab.active span {
font-weight: 700;
}
@ -1621,7 +1623,7 @@ p.theme-validation-details {
}
@keyframes unfold {
0% { opacity: 0; -webkit-transform: translateY(-50%); }
0% { opacity: 0; -webkit-transform: translateY(-50%); }
100% { opacity: 1; -webkit-transform: translateY(0); }
}