From a988009aa254d8ceb8b6d330785d931bb38bed02 Mon Sep 17 00:00:00 2001
From: Dan Barber <github@danbarber.me>
Date: Thu, 27 Aug 2015 21:24:28 +0100
Subject: [PATCH] Style tweaks

---
 app/assets/stylesheets/admin/admin.sass       |  5 ++--
 app/assets/stylesheets/admin/simple_form.sass | 24 ++++---------------
 app/assets/stylesheets/includes/_button.sass  | 14 +++++------
 3 files changed, 13 insertions(+), 30 deletions(-)

diff --git a/app/assets/stylesheets/admin/admin.sass b/app/assets/stylesheets/admin/admin.sass
index 57e80df..a937456 100644
--- a/app/assets/stylesheets/admin/admin.sass
+++ b/app/assets/stylesheets/admin/admin.sass
@@ -8,7 +8,7 @@ body
   background-color: #999
   color: #333
   font-family: "Helvetica Neue", "Arial", sans-serif
-  font-size: 16px
+  font-size: 14px
   line-height: 1.3
   margin: 0
   padding: 0
@@ -17,7 +17,7 @@ body
   background: #fafafa
   padding: 1em 2em 3em
   border-bottom: 1px solid #666
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3)
+  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.1)
 
 #login
   width: 40em
@@ -51,7 +51,6 @@ header
     margin-bottom: 0.5em
     position: relative
     z-index: 1
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)
 
 h2
   margin-top: 1.2em
diff --git a/app/assets/stylesheets/admin/simple_form.sass b/app/assets/stylesheets/admin/simple_form.sass
index fa1be88..12a566e 100644
--- a/app/assets/stylesheets/admin/simple_form.sass
+++ b/app/assets/stylesheets/admin/simple_form.sass
@@ -5,7 +5,6 @@ form.simple_form
   border: 1px solid #ccc
   margin: 0 0 1em
   padding: 0 1em
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05)
   label
     text-align: right
     margin-right: 1em
@@ -35,10 +34,9 @@ form.simple_form
     margin: 0 0.5rem 0 0
     border-width: 1px
     border-style: solid
-    border-color: #999 #DDD #DDD #999
+    border-color: #ccc
     padding: 0.5em
     border-radius: 2px
-    box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.1)
     &:focus
       border-color: #67A #9AF #9AF #67A
       box-shadow: 0 0 4px rgba(0, 128, 255, 0.5), inset 1px 1px 4px rgba(0, 0, 0, 0.1)
@@ -59,15 +57,7 @@ form.simple_form
     padding-left: 14em
 
   input[type=submit], a.button
-    @include button
-    &[name=commit]
-      background-color: #9C7
-      border-color: #370
-      color: white
-      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5)
-      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset -1px -1px 0 rgba(255, 255, 255, 0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3)
-      &:hover, &:focus
-        background-color: #8B6
+    @include button(#9C7)
 
   .input.boolean
     padding-left: 14em
@@ -112,13 +102,7 @@ form.simple_form
       color: #999
 
 a.button
-  @include button
+  @include button(#999)
 
 a.button.new
-  background-color: #7AC
-  border-color: #047
-  color: white
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5)
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset -1px -1px 0 rgba(255, 255, 255, 0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3)
-  &:hover, &:focus
-    background-color: #69B
+  @include button(#359ADD)
diff --git a/app/assets/stylesheets/includes/_button.sass b/app/assets/stylesheets/includes/_button.sass
index 753e8b2..6b76fc5 100644
--- a/app/assets/stylesheets/includes/_button.sass
+++ b/app/assets/stylesheets/includes/_button.sass
@@ -1,4 +1,4 @@
-@mixin button
+@mixin button($colour)
   display: inline-block
   position: relative
   font-family: "Helvetica Neue", "Arial", sans-serif
@@ -9,16 +9,16 @@
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset -1px -1px 0 rgba(255, 255, 255, 0.5), inset 1px 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3)
   border-width: 1px
   border-style: solid
-  border-color: #888
-  background-color: white
-  color: #555
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5)
+  background-color: $colour
+  border-color: darken($colour, 20%)
+  color: white
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5)
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset -1px -1px 0 rgba(255, 255, 255, 0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3)
   font-weight: bold
   cursor: pointer
   @include transition(background 0.15s 0s ease)
   border-radius: 3px
   &:hover, &:focus
-    background-color: #eee
-    color: #555
+    background-color: lighten($colour, 10%)
   &:active
     top: 1px