ヘッダー、バッジのデザイン変更

app/assets/stylesheets/_values.css.scss

+$set_prefix: -webkit-, -moz-, -ms-, -o-, '';
+$main-color: #75b3c8;
+
+@mixin background_color($bg_value: $main-color) {
+  background-color: $bg_value;
+  color: #fff;
+}
+
+@mixin border_radius($br_value: 4px) {
+  @each $prefix in $set_prefix {
+    #{$prefix}border-radius: $br_value
+  }
+}
+
+@mixin transition($transition_value: 0.3s, $move_type: ease-in-out) {
+  @each $prefix in $set_prefix {
+    #{$prefix}transition: all $transition_value $move_type
+  }
+}

app/assets/stylesheets/basic.css.scss

+@import 'values';
 @import url(http://fonts.googleapis.com/css?family=Flamenco:300,400);
 @import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
 p, h1, h2, h3, h4, h5, h6, span {
@@ -7,3 +8,13 @@ p, h1, h2, h3, h4, h5, h6, span {
   margin: 0;
   padding: 0;
 }
+
+.badge {
+  background-color: transparent;
+  color: $main-color;
+  font-family: 'Quicksand';
+  font-weight: 300;
+  letter-spacing: 0;
+  border: 1px solid $main-color;
+  padding: 4px 6px;
+}

app/assets/stylesheets/templates.css.scss

 // Place all the styles related to the templates controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+
+/*************************************************************************
+* app_header
+*************************************************************************/
+@import 'values';
+@import url(http://fonts.googleapis.com/css?family=Flamenco:300,400);
+@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
+
+$main-color: #75b3c8;
+.navbar-original {
+  background-color: $main-color!important;
+  background-image: none!important;
+  li:hover {
+    background-color: #ddd;
+    a {
+    color: $main-color;
+    }
+  }
+  li.new-post-btn:hover {
+    background-color: $main-color;
+    a {
+      color: #fff;
+    }
+  }
+  a {
+    color: #fff;
+    font-family: 'Quciksand', 'meiryo', 'メイリオ','sans-serif';
+    letter-spacing: .1em;
+    font-weight: 300;
+    @include transition;
+  }
+  .input-group {
+    input {
+      border: 1px solid transparent;
+      box-shadow: none;
+    }
+    button {
+      background-color: #fff;
+      .search {
+        width: 20px;
+        &:hover {
+          opacity: .7;
+          @include transition;
+        }
+      }
+    }
+  }
+  .navbar-right {
+    .new-post-btn {
+      .btn {
+        position: relative;
+        background-color: #fafafa;
+        color: $main-color;
+        vertical-align: middle;
+        &:hover {
+          background-color: #ddd;
+          @include transition;
+        }
+      }
+      .write {
+        width: 17px;
+        vertical-align: middle;
+        position: relative;
+        bottom: 1px;
+      }
+    }
+  }
+  .badge {
+    background-color: transparent;
+    color: #fff;
+    font-family: 'Quicksand';
+    font-weight: 300;
+    letter-spacing: 0;
+    border: 1px solid #fff;
+    padding: 4px 6px;
+    margin-left: 5px;
+  }
+}

app/views/partials/_app_header.html.slim

-nav.navbar.navbar-default.navbar-fixed-top role="navigation"
+nav.navbar.navbar-fixed-top.navbar-original role="navigation"
   .container
 
     .navbar-header
@@ -9,8 +9,8 @@ nav.navbar.navbar-default.navbar-fixed-top role="navigation"
         .input-group
           input.form-control name="q" placeholder="Search" type="text" value=params[:q] /
           span.input-group-btn
-            button.btn.btn-default data-disable-with="Searching..." type="submit"
-              span.glyphicon.glyphicon-search
+            button.btn data-disable-with="Searching..." type="submit"
+              = image_tag 'search.png', class: 'search'
       ul.nav.navbar-nav
         li class=('active' if current_page?(stock_path))
           a href=stock_path title="Stock"
@@ -28,11 +28,11 @@ nav.navbar.navbar-default.navbar-fixed-top role="navigation"
             span.glyphicon.glyphicon-flag
             - if current_user.notifications.unread.any?
               span.badge = current_user.notifications.unread.count
-        li
+        li.new-post-btn
           form
-            a.btn.btn-primary.navbar-btn href=new_post_path
-              | New Post  
-              span.glyphicon.glyphicon-pencil
+            a.btn.navbar-btn href=new_post_path
+              | 投稿する
+              = image_tag 'write.png', class: "write"
         li.dropdown
           a.dropdown-toggle data-toggle="dropdown"
             = current_user.name