More progress on sticky bar styling

goodybag · Mar 15, 2016 · 3f23cd3 · 3f23cd3
1 parent 805d891
commit 3f23cd3
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,42 +24,63 @@
     @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%;
         background-color: @color;
     }
 }
 
+.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;
 }