diff --git a/app/components/restaurant/menu/bar.js b/app/components/restaurant/menu/bar.js index 501219d..c07507a 100644 --- a/app/components/restaurant/menu/bar.js +++ b/app/components/restaurant/menu/bar.js @@ -62,10 +62,12 @@ export class RestaurantMenuBarWrapperComponent extends Component { }; window.addEventListener('scroll', this.handleScroll); + window.addEventListener('resize', this.handleScroll); } componentWillUnmount() { window.removeEventListener('scroll', this.handleScroll); + window.removeEventListener('resize', this.handleScroll); } render() { diff --git a/app/styles/navbar/index.less b/app/styles/navbar/index.less index 50ec42c..023ff0a 100644 --- a/app/styles/navbar/index.less +++ b/app/styles/navbar/index.less @@ -111,7 +111,6 @@ display: none; .gb-navbar-toggle { &:extend(.gb-button-white); - &:extend(.gb-button-small); } } diff --git a/app/styles/restaurant/menu/bar.less b/app/styles/restaurant/menu/bar.less index b9c64a9..6b0bfd0 100644 --- a/app/styles/restaurant/menu/bar.less +++ b/app/styles/restaurant/menu/bar.less @@ -11,11 +11,30 @@ right: 0; background: @gb-white; border-bottom: 1px solid @gb-shadow-tide; + height: 52px; .gb-restaurant-menu-bar-content { .gb-body; position: relative; } + + .gb-restaurant-menu-tab-title-catering, + .gb-restaurant-menu-tab-title-individual { + border-top-radius: none; + border: 0; + + &:before { + display: none; + } + + &.active .gb-restaurant-menu-tab-title-content:after { + display: block; + } + } + + .gb-restaurant-menu-searchbox { + display: none; + } } } diff --git a/app/styles/restaurant/menu/tabs.less b/app/styles/restaurant/menu/tabs.less index b4258ea..e37b258 100644 --- a/app/styles/restaurant/menu/tabs.less +++ b/app/styles/restaurant/menu/tabs.less @@ -7,6 +7,7 @@ .gb-restaurant-menu-tab-title-catering, .gb-restaurant-menu-tab-title-individual { display: inline-block; + text-align: center; position: relative; background: @gb-background; height: 52px; @@ -23,16 +24,18 @@ @media screen and (max-width: @gb-breakpoint-tablet) { width: 49%; } + @media screen and (min-width: @gb-breakpoint-tablet) { - width: 26%; - max-width: 186px; + width: 180px; } } .gb-menu-tab-top-color(@color) { - &::before { + &:before { content: ""; position: absolute; + left: 0; + right: 0; top: 0; height: 3px; width: 100%; @@ -40,25 +43,44 @@ } } +.gb-menu-tab-bottom-color(@color) { + &:after { + content: ""; + position: absolute; + bottom: -1px; + left: 0; + right: 0; + height: 5px; + width: 100%; + background-color: @color; + display: none; + } +} + .gb-restaurant-menu-tab-title-catering { .gb-menu-tab-top-color(@gb-blue); margin-right: 2px; + + .gb-restaurant-menu-tab-title-content { + .gb-menu-tab-bottom-color(@gb-blue); + } } .gb-restaurant-menu-tab-title-individual { .gb-menu-tab-top-color(@gb-teal); margin-left: 2px; + + .gb-restaurant-menu-tab-title-content { + .gb-menu-tab-bottom-color(@gb-teal); + } } .gb-restaurant-menu-tab-title-content { - width: 96%; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + display: inline-block; + position: relative; text-transform: uppercase; - text-align: center; color: @gb-shadow-shuttle-gray; font-size: 0.89em; font-weight: 600; + line-height: 52px; }