diff --git a/static/alpes-maritimes-2022/_custom.scss b/static/alpes-maritimes-2022/_custom.scss index 95304d15..cb27298a 100644 --- a/static/alpes-maritimes-2022/_custom.scss +++ b/static/alpes-maritimes-2022/_custom.scss @@ -1030,24 +1030,42 @@ span.required { // .pwa-navigation { - div > ul li { - &:not(:last-child) { - border-right: 1px dashed $primary-color; - } - a { - background-size: auto 25px; - padding-top: 35px; - display: flex; - align-items: center; - justify-content: center; - span { - height: auto; - font-size: $fz-small; + div > ul { + padding-top: 6px; + border-top: 2px solid #D1D1D1; + li { + &:not(:last-child) { + border-right: 1px dashed $primary-color; + } + &.selected { + font-weight: bold; + position: relative; + &::before { + content: ""; + display: block; + position: absolute; + height: 4px; + width: 80%; + margin: 0 auto; + top: 0; + left: 0; + right: 0; + background-color: $primary-color; + transform: translateY(-8px); + } + } + a { + background-size: auto 25px; + background-position: 50% 5px; + padding-top: 30px; + display: flex; + align-items: center; + justify-content: center; + span { + height: auto; + font-size: $fz-small; + } } - } - &.selected a, - a:hover { - background-blend-mode: color-dodge; } } } diff --git a/static/alpes-maritimes-2022/_vars.scss b/static/alpes-maritimes-2022/_vars.scss index d32a4c84..95e56fdd 100644 --- a/static/alpes-maritimes-2022/_vars.scss +++ b/static/alpes-maritimes-2022/_vars.scss @@ -71,11 +71,9 @@ $nav-button-background: $primary-color; $nav-button-color: white; $nav-mobile-bottom-bar-background: $gray-xlight; -$nav-mobile-bottom-bar-color: $primary-color; -$nav-mobile-bottom-bar-item-hover-background: $primary-color; -$nav-mobile-bottom-bar-item-hover-color: white; -$nav-mobile-bottom-bar-item-selected-background: $nav-mobile-bottom-bar-item-hover-background; -$nav-mobile-bottom-bar-item-selected-color: $nav-mobile-bottom-bar-item-hover-color; +$nav-mobile-bottom-bar-color: $font-color; +$nav-mobile-bottom-bar-item-hover-background: white; +$nav-mobile-bottom-bar-item-selected-color: $primary-color; $title-transform: uppercase; $title-background: transparent;