revamp settings button to more options

app/index.html

@@ -10,7 +10,7 @@
 
     {{content-for "head"}}
 
-    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,800' rel='stylesheet' type='text/css'>
+    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="assets/vendor.css">
     <link rel="stylesheet" href="assets/travis.css">
     <link rel="mask-icon" href="images/favicon.svg" color="black">

app/styles/app/layouts/repo.sass

@@ -49,36 +49,26 @@ $dropdown-button-margin: -9px
 .settings-button
   display: block
   height: $dropdown-button-height
-  padding: 0 0.7em
+  padding: 0
-  border: 1px solid #f1f1f1
+  border: 1px solid $pebble-grey
-  color: $cement-grey
+  color: $asphalt-grey
   border-radius: 2px
   text-align: center
   line-height: 2
   font-size: 14px
-  &:after
+  cursor: pointer
-    content: ""
+  .label-align
-    display: inline-block
+    padding: 0 1em
-    width: 0.9em
-    height: 0.6em
-    margin-left: 1em
-    background:
-      size: 100%
-      repeat: no-repeat
-    @extend %icon-line-dropdown
-  .icon-settings
-    width: .9em
-    margin-right: .3em
   &:hover,
   &:active,
   // .display &,
   .settings-menu:hover &
     color: $oxide-blue
     border-color: $oxide-blue
-    .icon-settings
+    .settings-tofu
-      @extend %icon-line-cog-teal
+      border-color: $oxide-blue
-    &:after
+      background-image: inline-image('/line-icons/icon-tofuburger-teal.svg')
-      @extend %icon-line-dropdown-teal
+
   @media #{$medium-up}
     margin-top: $dropdown-button-margin
 
@@ -104,6 +94,19 @@ $dropdown-button-margin: -9px
   @media #{$medium-up}
     margin-top: -3px
 
+.settings-tofu
+  width: 2em
+  height: 2em
+  display: inline-block
+  vertical-align: top
+  background:
+    image: inline-image('/line-icons/icon-tofuburger.svg')
+    repeat: no-repeat
+    size: 20px
+    position: 50%
+  @media #{$medium-up}
+    border-left: 1px solid $pebble-grey
+
 .settings-menu
   position: relative
   @media #{$small-only}

app/styles/app/vars.sass

@@ -6,6 +6,7 @@ $font-size-s: 12px
 
 $font-weight-light: 300
 $font-weight-normal: 400
+$font-weight-bold: 600
 
 $top-height: 55px
 

app/templates/components/repo-show-tools.hbs

@@ -1,6 +1,7 @@
-<a {{action "menu"}} class="settings-button" type="" title="Open settings menu">
+<a {{action "menu"}} class="settings-button" type="" title="Show more options">
-  <span class="icon-settings" aria-hidden="true"></span>
+  <span class="label-align">More options</span>
-  <span class="label-align">Settings</span></a>
+  <span class="settings-tofu"></span>
+</a>
 <ul class="settings-dropdown">
   {{#if displaySettingsLink}}
     <li>

public/images/line-icons/icon-arrow-dropdown-teal.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 5.4"><style>.st0{fill:#40a3ad;}</style><path class="st0" d="M0 .5C0 .4 0 .3.1.2c.2-.2.5-.2.7 0l4.8 4.2L10.3.2c.2-.2.5-.2.7 0 .2.2.2.5 0 .7L6 5.4c-.2.2-.4.2-.6 0L.2.8C.1.7 0 .6 0 .5z" id="tabarrow_1_"/></svg>

public/images/line-icons/icon-arrow-dropdown.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 5.4"><style>.st0{fill:#8d8d8d;}</style><path class="st0" d="M0 .5C0 .4 0 .3.1.2c.2-.2.5-.2.7 0l4.8 4.2L10.3.2c.2-.2.5-.2.7 0 .2.2.2.5 0 .7L6 5.4c-.2.2-.4.2-.6 0L.2.8C.1.7 0 .6 0 .5z" id="tabarrow_1_"/></svg>

public/images/line-icons/icon-tofuburger-teal.svg

@@ -0,0 +1,11 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+   viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+	<g id="Tofuburger">
+		<path fill="#3eaaaf" d="M17.9,6.2H2.1C1.8,6.2,1.5,6,1.5,5.6C1.5,5.3,1.8,5,2.1,5h15.7c0.4,0,0.6,0.3,0.6,0.6
+			C18.5,6,18.2,6.2,17.9,6.2z"/>
+		<path fill="#3eaaaf" d="M17.9,10.6H2.1c-0.4,0-0.6-0.3-0.6-0.6s0.3-0.6,0.6-0.6h15.7c0.4,0,0.6,0.3,0.6,0.6S18.2,10.6,17.9,10.6z
+			"/>
+		<path fill="#3eaaaf" d="M17.9,15H2.1c-0.4,0-0.6-0.3-0.6-0.6c0-0.3,0.3-0.6,0.6-0.6h15.7c0.4,0,0.6,0.3,0.6,0.6
+			C18.5,14.7,18.2,15,17.9,15z"/>
+	</g>
+</svg>

public/images/line-icons/icon-tofuburger.svg

@@ -1,11 +1,11 @@
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
 	<g id="Tofuburger">
-		<path fill="#A7AEAE" d="M17.9,6.2H2.1C1.8,6.2,1.5,6,1.5,5.6C1.5,5.3,1.8,5,2.1,5h15.7c0.4,0,0.6,0.3,0.6,0.6
+		<path fill="#9d9d9d" d="M17.9,6.2H2.1C1.8,6.2,1.5,6,1.5,5.6C1.5,5.3,1.8,5,2.1,5h15.7c0.4,0,0.6,0.3,0.6,0.6
 			C18.5,6,18.2,6.2,17.9,6.2z"/>
-		<path fill="#A7AEAE" d="M17.9,10.6H2.1c-0.4,0-0.6-0.3-0.6-0.6s0.3-0.6,0.6-0.6h15.7c0.4,0,0.6,0.3,0.6,0.6S18.2,10.6,17.9,10.6z
+		<path fill="#9d9d9d" d="M17.9,10.6H2.1c-0.4,0-0.6-0.3-0.6-0.6s0.3-0.6,0.6-0.6h15.7c0.4,0,0.6,0.3,0.6,0.6S18.2,10.6,17.9,10.6z
 			"/>
-		<path fill="#A7AEAE" d="M17.9,15H2.1c-0.4,0-0.6-0.3-0.6-0.6c0-0.3,0.3-0.6,0.6-0.6h15.7c0.4,0,0.6,0.3,0.6,0.6
+		<path fill="#9d9d9d" d="M17.9,15H2.1c-0.4,0-0.6-0.3-0.6-0.6c0-0.3,0.3-0.6,0.6-0.6h15.7c0.4,0,0.6,0.3,0.6,0.6
 			C18.5,14.7,18.2,15,17.9,15z"/>
 	</g>
 </svg>