#22 - colocando campo de busca no header do site

iloveblogs · Mar 6, 2016 · a93d799 · a93d799
1 parent f9794a1
commit a93d799
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 4 deletions.
diff --git a/src/images/ilove-blogs-logo.png b/src/images/ilove-blogs-logo.png
diff --git a/src/js/components/navigation-header/templates/navigation-header.template.html b/src/js/components/navigation-header/templates/navigation-header.template.html
@@ -1,4 +1,9 @@
-<div class='navigation-header'>
+<div class='navigation-header navigation-header--is-fixed'>
     <div class="navigation-header__content">
+<!--         <img src='images/ilove-blogs-logo.png' class='navigation-header__logo'> -->
+        <span class="input-box input-box--is-default navigation-header__input-box">
+            <input type="text" placeholder="Encontre um blog" class='input-box__input'>
+            <i class="fa fa-search input-box__icon"></i>
+        </span>
     </div>
 </div>
diff --git a/src/styl/module/input-box.styl b/src/styl/module/input-box.styl
@@ -33,3 +33,24 @@
         &:hover
             color: #ff2424
 
+    // &--is-extra-large
+    &--is-default
+        width: 240px
+        line-height: 20px
+        padding: get-spacing(1)
+        margin: 0
+
+        .input-box__input
+            padding-right: get-spacing(3)
+            font-size: 13px
+            border-radius: 20px
+            padding-left: get-spacing(2)
+
+            + m-placeholder()
+                font-size: 13px
+
+        .input-box__icon
+            padding: 0 20px 0 get-spacing(1)
+            line-height: 55px
+            font-size: 14px
+            top: 0
diff --git a/src/styl/module/jumbotron.styl b/src/styl/module/jumbotron.styl
@@ -6,6 +6,7 @@
     position: relative
     z-index: get-z-index(jumbotron)
     padding-top: 54px
+
     &:before
         content: ''
         width: 100%

diff --git a/src/styl/module/navigation-header.styl b/src/styl/module/navigation-header.styl
@@ -3,10 +3,35 @@
     width: 100%
     top: 0
     z-index: get-z-index(navigation)
+    padding: 0
+
+    @media (min-width: screen-tablet-min)
+        padding: 0 get-spacing(2)
 
     &__content
+        color: #fff
+        display: flex
         margin: 0 auto
-        display: block
         max-width: 960px
-        padding: get-spacing(2)
-        color: #fff
+        min-height: 40px
+        padding: 0
+        flex-direction: column
+
+    &__logo
+        height: 20px
+
+    &__input-box
+        align-self: flex-end
+
+        .input-box__input
+            background-color: #5babc8
+            color: #fff
+
+            + m-placeholder()
+                color: #fff
+
+        .input-box__icon
+            color: #fff
+
+    &--is-fixed
+        background-color: rgba(28, 131, 176, .9)