Merge lp:~stephen-stewart/snapweb/tidy-up-banner into lp:~snappy-dev/snapweb/trunk

[Stephen Stewart]

make banner a bit smaller, and a bit less black

[Sergio Schvezov (sergiusens)]

why not ;-)

review: Approve

=== modified file 'www/src/css/banner.css'
--- www/src/css/banner.css	2015-05-22 12:46:22 +0000
+++ www/src/css/banner.css	2015-06-02 14:06:40 +0000
@@ -1,7 +1,7 @@
 /** @define b-banner; weak */
 
 .b-banner {
-  background-color:#2f2f2f;
+  background-color:#37373d;
   color:#efefef;
   line-height:20px;
 }
@@ -26,11 +26,11 @@
 .b-banner__brand a {
   display: flex;
   align-items:center;
-  padding:15px 2em 15px 15px;
+  padding:10px 1em;
 }
 
 .b-banner__brand img {
-  margin:0 15px 0 0;
+  margin:0 10px 0 0;
 }
 
 .b-banner__search {
@@ -44,9 +44,9 @@
 .b-banner__search input[type=search] {
   width:50%;
   border:none;
-  height:30px;
+  height:24px;
   line-height:20px;
-  padding:15px 25px 15px 15px;
+  padding:12px 25px 12px 15px;
   background-color:#333;
 }
 
@@ -74,29 +74,31 @@
 }
 
 .b-banner__nav-item {
-  border-right:1px solid #333;
-}
-
-.b-banner__nav-item_active {
   position:relative;
 }
 
-.b-banner__nav-item_active::before {
+.b-banner__nav-item::before {
+  opacity:0;
   position:absolute;
   content:'';
   background:#dd4814;
   bottom:0;
-  left:-1px;
-  right:-1px;
-  height:3px;
+  left:0;
+  right:0;
+  height:2px;
+  transition: opacity 0.3s;
+}
+
+.b-banner__nav-item_active::before {
+  opacity:1;
 }
 
 .b-banner__primary-nav .b-banner__nav-item a {
   white-space: nowrap;
-  padding:20px 2em;
+  padding:12px 1em;
 }
 
-.b-banner__primary-nav .b-banner__nav-item:hover {
+.b-banner__nav-item:hover {
   background-color:#dd4814;
 }
 
@@ -104,10 +106,6 @@
   margin-left:auto;
 }
 
-.b-banner__secondary-nav .b-banner__nav-item:last-child {
-  border-right:none;
-} 
-
 .b-banner__secondary-nav .b-banner__nav-item a {
   padding: 15px;
 }

=== modified file 'www/src/css/infobar.css'
--- www/src/css/infobar.css	2015-05-26 21:10:37 +0000
+++ www/src/css/infobar.css	2015-06-02 14:06:40 +0000
@@ -1,11 +1,16 @@
 /** @define b-infobar; weak */
 
 .b-infobar {
-  padding:8px 0;
-  font-size:12px;
+  padding: 4px 0;
+  font-size: 12px;
+  background-color: #eee;
+  box-shadow:0 2px 1px #ddd;
+}
+
+.b-infobar .b-layout__container {
+  display:flex;
+  justify-content:flex-end;
 }
 
 .b-infobar__datetime {
-  float:right;
-  display:inline-block;
 }

=== modified file 'www/src/js/templates/layout-banner.hbs'
--- www/src/js/templates/layout-banner.hbs	2015-05-22 12:46:22 +0000
+++ www/src/js/templates/layout-banner.hbs	2015-06-02 14:06:40 +0000
@@ -2,7 +2,7 @@
   <div class="b-banner__brand">
     <div class="b-banner__nav-item{{#if isHomeActive }} b-banner__nav-item_active{{/if}}">
       <a href="/">
-        <img src="/public/images/cof.svg" height="30" width="30">
+        <img src="/public/images/cof.svg" height="24" width="24">
         <span>{{ name }} {{ subname }}</span>
       </a>
     </div>