Merge pull request #1616 from darkwing/search-nav-update-920971

fix bug 920971 - Change navigation search box to new spec
mdn · Nov 8, 2013 · e2f5e68 · e2f5e68
2 parents 66844fb + d3887cc
commit e2f5e68
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 15 deletions.
diff --git a/media/redesign/stylus/home.styl b/media/redesign/stylus/home.styl
@@ -16,9 +16,8 @@
   /* update main nav menu color */
   override-main-nav-color(#fff);
 
-  .main-nav-search {
-    display: none;
-  }
+  /* update the homepage search size */
+  minimize-header-search();
 
   .home-callouts {
     background: #4d4e53;
@@ -143,6 +142,10 @@
     @extend .larger;
     font-weight: bold;
     font-family: 'Open Sans Extra Bold', sans-serif;
+
+    i {
+      bidi-style(margin-right, 10px, margin-left, 0);
+    }
   }
 
   li {

diff --git a/media/redesign/stylus/mixins.styl b/media/redesign/stylus/mixins.styl
@@ -153,6 +153,24 @@ override-main-nav-color(hex) {
   #main-nav > ul > li > a, .user-state a {
     compat-important(color, hex);
   }
+
+  #main-nav > ul > li {
+    .search-wrap {
+      background-color: rgba(255, 255, 255, 0.4);
+
+      input, i, .search-trigger {
+        color: hex !important;
+      }
+    }
+  }
+
+}
+
+/* Overrides the size of the navigation search box on certain pages */
+minimize-header-search(size = 20px) {
+  .search-wrap {
+    width: size;
+  }
 }
 
 /* Sets an input tag's placeholder styles */

diff --git a/media/redesign/stylus/search.styl b/media/redesign/stylus/search.styl
@@ -6,6 +6,9 @@ body.search-results {
   create-gradient-background(header-background-color);
 }
 
+/* update the homepage search size */
+minimize-header-search();
+
 main {
   background: transparent;
 }

diff --git a/media/redesign/stylus/structure.styl b/media/redesign/stylus/structure.styl
@@ -74,12 +74,15 @@
       }
 
       > a, .search-trigger {
-        compat-important(color, menu-link-color);
         compat-important(text-decoration, none);
         compat-important(text-transform, uppercase);
         compat-important(font-weight, bold);
       }
 
+      > a {
+        compat-important(color, menu-link-color);
+      }
+
       > a, .search-wrap {
         padding: 4px 8px;
       }
@@ -228,7 +231,8 @@ a.persona-button {
   position: relative;
   vendorize(transition-property, width);
   vendorize(transition-duration, default-animation-duration);
-  width: 20px;
+  width: 60px;
+  background-color: rgba(255, 255, 255, 0.9);
 
   &.expanded {
     background: #fff;

diff --git a/media/redesign/stylus/tags.styl b/media/redesign/stylus/tags.styl
@@ -59,7 +59,8 @@ h4 {
 
 /* basic text */
 {selector-icon} {
-  bidi-style(margin-left, (grid-spacing / 2), margin-right, 0, true); /* compat-only */
+  bidi-style(margin-left, (grid-spacing / 2), margin-right, 0); /* compat-only */
+  bidi-style(margin-right, 0, margin-left, (grid-spacing / 2)); /* compat-only */
   display: inline-block;
 
   &:before {

diff --git a/media/redesign/stylus/zones.styl b/media/redesign/stylus/zones.styl
@@ -11,17 +11,9 @@
     border-bottom-color: rgba(255, 255, 255, 0.2);
   }
 
+  /* update main nav menu color */
   override-main-nav-color(#fff);
 
-  .search-wrap {
-    background-color: rgba(255, 255, 255, 0.2);
-
-    input, i {
-      color: #fff;
-      set-placeholder-style(color, #fff);
-    }
-  }
-
   .user-state {
     a, a:hover, a:focus, a:visited {
       color: #fff;