Centre search input (bug 1159488)

mozilla · Apr 28, 2015 · 11a81ea · 11a81ea
1 parent ddfb4fd
commit 11a81ea
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 39 deletions.
diff --git a/src/media/css/elements--header.styl b/src/media/css/elements--header.styl
@@ -7,6 +7,7 @@ $color--header--child-bg = #1A95FC;
 $color--header--child-hover = #40ADFF;
 $color--header--root-link = $greyscale-black;
 $header-child--input-width = $mobile-content-width + 100;
+$header-child--input-padding = 15px 5px;
 $header--height = 60px;
 $header--transition = 'transform cubic-bezier(0.455, 0.03, 0.515, 0.955) 250ms';
 $zindex--header-child = 60;
@@ -130,25 +131,40 @@ mkt-header-child {
     border: 0;
     border-radius: 5px;
     height: 70px;
-    padding: 15px 0 15px 20px;
-    position: relative;
     outline: none;
+    padding: $header-child--input-padding;
+    position: relative;
     width: 100%;
     z-index: 3;
 
+    +ltr() {
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    +rtl() {
+        right: 50%;
+        transform: translateX(50%);
+    }
+    &:valid {
+        text-align: center;
+    }
     &:valid + .header-child--input-placeholder {
-        color: transparent;
+        opacity: 0;
+        transition: 100ms;
     }
 }
 
 .header-child--input-placeholder {
     display: inline;
     line-height: 40px;
     margin: 0;
+    max-width: 100%;
     opacity: .75;
-    padding: 15px 0;
+    overflow: hidden;
+    padding: $header-child--input-padding;
     position: absolute;
     top: 50%;
+    transition: 250ms;
     white-space: nowrap;
     width: fit-content;
     z-index: 2;

diff --git a/src/media/css/header--search.styl b/src/media/css/header--search.styl
@@ -25,43 +25,9 @@ mkt-header-child.header--search {
 
 .header--search-form {
     height: 100%;
-    width: auto;
+    width: 100%;
 }
 
 .header--search-input {
     background: transparent;
-
-    +ltr() {
-        left: 28px;
-    }
-    +rtl() {
-        right: 50px;
-    }
-}
-
-.header-child--input-placeholder {
-    +ltr() {
-        padding-left: 40px;
-    }
-    +rtl() {
-        padding-right: 40px;
-    }
-}
-
-.header-child--input-placeholder:after {
-    background: transparent url(../img/nav/search.svg) 0 -92px / 40px 140px no-repeat;
-    content: '';
-    display: inline-block;
-    height: 40px;
-    margin: 15px 0;
-    width: 40px;
-    position: absolute;
-    top: -10px;
-
-    +ltr() {
-        left: 0;
-    }
-    +rtl() {
-        right: 0;
-    }
 }
diff --git a/src/media/js/elements/header.js b/src/media/js/elements/header.js
@@ -97,6 +97,21 @@ define('elements/header',
 
     el.MktHeaderChildElement = document.registerElement('mkt-header-child', {
         prototype: Object.create(HTMLElement.prototype, {
+            createdCallback: {
+                value: function() {
+                    var input = this.input;
+                    var label = this.querySelector('label');
+                    if (this.isInput && label) {
+                        var setInputWidth = function() {
+                            input.style.width = input.value ?
+                                null : label.clientWidth + 'px';
+                        };
+                        setInputWidth();
+                        input.addEventListener('input', setInputWidth);
+                        document.addEventListener('saferesize', setInputWidth);
+                    }
+                }
+            },
             toggle: {
                 value: function(bool) {
                     // Toggle visibility.
@@ -189,6 +204,7 @@ define('elements/header',
                     '[data-header-child--input] input'), function(input) {
             setTimeout(function() {
                 input.value = '';
+                input.dispatchEvent(new InputEvent('input'));
             }, 50);
         });
     })