diff --git a/addons/web/static/src/webclient/navbar/navbar.scss b/addons/web/static/src/webclient/navbar/navbar.scss index acaac508faf..49f12b9487e 100644 --- a/addons/web/static/src/webclient/navbar/navbar.scss +++ b/addons/web/static/src/webclient/navbar/navbar.scss @@ -3,6 +3,7 @@ // ============================================================================ .o_main_navbar { @include print-variable(o-navbar-height, $o-navbar-height); + --Dropdown_menu-margin-y: 0; display: flex; @@ -33,23 +34,26 @@ .o_menu_sections { .o_nav_entry, .dropdown-toggle { - @extend %-main-navbar-entry-bg-hover !optional; + background: var(--NavBar-entry-backgroundColor, #{$o-navbar-background}); + border: $border-width solid transparent; + + &:hover { + background: var(--NavBar-entry-backgroundColor--hover, #{$o-navbar-entry-bg--hover}); + } + + &:focus { + background: var(--NavBar-entry-backgroundColor--focus, #{$o-navbar-entry-bg--hover}); + } + + &:active { + background: var(--NavBar-entry-backgroundColor--active, #{$o-navbar-entry-bg--active}); + } } .dropdown.show > .dropdown-toggle { - @extend %-main-navbar-entry-active !optional; - } - } - - @if (not $o-navbar-use-pills) { - .o_menu_systray { - .o_nav_entry, .dropdown-toggle { - @extend %-main-navbar-entry-bg-hover !optional; - } - - .dropdown.show > .dropdown-toggle { - @extend %-main-navbar-entry-active !optional; - } + border-color: var(--NavBar-entry-borderColor-active, transparent); + background: var(--NavBar-entry-backgroundColor--active, #{$o-navbar-entry-bg--active}); + color: var(--NavBar-entry-color--active, #{$o-navbar-entry-color--active}); } } diff --git a/addons/web/static/src/webclient/navbar/navbar.variables.scss b/addons/web/static/src/webclient/navbar/navbar.variables.scss index 9decad36a31..c44bc764e4a 100644 --- a/addons/web/static/src/webclient/navbar/navbar.variables.scss +++ b/addons/web/static/src/webclient/navbar/navbar.variables.scss @@ -1,6 +1,5 @@ // = Main Navbar Variables // ============================================================================ -$o-navbar-use-pills: false !default; $o-navbar-height: 46px !default; $o-navbar-padding-v: 0px !default; $o-navbar-font-size: $o-font-size-base !default; @@ -61,18 +60,3 @@ $o-navbar-badge-text-shadow: 1px 1px 0 rgba($o-black, .3) !default; padding-right: var(--NavBar-entry-padding-right, #{$o-navbar-entry-padding-h}); line-height: calc(var(--o-navbar-height) - #{$o-navbar-padding-v * 2}); } - -@if ($o-navbar-use-pills == false) { - %-main-navbar-entry-bg-hover { - &:hover { - background-color: var(--NavBar-entry-backgroundColor--hover, #{$o-navbar-entry-bg--hover}); - } - } - - %-main-navbar-entry-active { - &, &:hover, &:focus { - background: var(--NavBar-entry-backgroundColor--active, #{$o-navbar-entry-bg--active}); - color: var(--NavBar-entry-color--active, #{$o-navbar-entry-color--active}); - } - } -} diff --git a/addons/website/static/src/components/navbar/navbar.scss b/addons/website/static/src/components/navbar/navbar.scss index e5a99466791..c1d592dca38 100644 --- a/addons/website/static/src/components/navbar/navbar.scss +++ b/addons/website/static/src/components/navbar/navbar.scss @@ -1,9 +1,4 @@ .o_menu_systray.o_website_systray { - @if $o-navbar-use-pills { - --NavBar-entry-margin-left: #{$o-navbar-entry-padding-h * 0.5}; - --NavBar-entry-margin-right: #{$o-navbar-entry-padding-h * 0.5}; - } @else { - --NavBar-entry-padding-left: #{$o-navbar-entry-padding-h}; - --NavBar-entry-padding-right: #{$o-navbar-entry-padding-h}; - } + --NavBar-entry-padding-left: #{$o-navbar-entry-padding-h}; + --NavBar-entry-padding-right: #{$o-navbar-entry-padding-h}; }