From 2912893ac745e35ccca57dd8308a69fe2c9ad50a Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Wed, 4 Sep 2013 15:31:24 -0700
Subject: [PATCH] Buttons for light UI

---
 themes/atom-light-ui/buttons.less | 36 +++++++++++++++++++++----------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/themes/atom-light-ui/buttons.less b/themes/atom-light-ui/buttons.less
index c6377f982..944cf00b9 100644
--- a/themes/atom-light-ui/buttons.less
+++ b/themes/atom-light-ui/buttons.less
@@ -1,21 +1,30 @@
 @import "ui-variables";
 @import "ui-mixins";
 
-.btn-background (@color, @hover-color, @selected-color, @text-color) {
+.btn-background (@color, @hover-color, @selected-color, @border-color, @text-color, @text-color-hover) {
+  @border-shadow: inset 0px 0px 0px 1px @border-color;
+  @active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
   color: @text-color;
   background-color: transparent;
-  background-image: -webkit-linear-gradient(@color, darken(@color, 5%));
+  background-image: -webkit-linear-gradient(@color, darken(@color, 8%));
+  box-shadow: @border-shadow;
 
   &:hover {
-    color: @text-color-highlight;
-    background-image: -webkit-linear-gradient(@hover-color, darken(@hover-color, 5%));
+    color: @text-color-hover;
+    background-image: -webkit-linear-gradient(@hover-color, darken(@hover-color, 8%));
+  }
+  &:active, &.selected:hover:active {
+    box-shadow: @active-shadow, @border-shadow;
   }
   &.selected, &.selected:hover {
-    color: @text-color-highlight;
-    background-image: -webkit-linear-gradient(darken(@selected-color, 5%), @selected-color);
-    &:hover {
-      background-image: -webkit-linear-gradient(@selected-color, darken(@selected-color, 5%));
-    }
+    color: @text-color-selected;
+    box-shadow: inset 0 2px 5px rgba(0, 0, 0,.3), @border-shadow;
+    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
+    background-image: -webkit-linear-gradient(darken(@selected-color, 8%), @selected-color);
+  }
+  &.selected:hover {
+    box-shadow: @border-shadow;
+    background-image: -webkit-linear-gradient(@selected-color, darken(@selected-color, 8%));
   }
 }
 
@@ -23,11 +32,12 @@
   @bg: darken(@color, 10%);
   @hover: @color;
   @selected: @color;
-  .btn-background(@bg, @hover, @selected, @text-color-highlight);
+  @border: fadeout(darken(@color, 20%), 50%);
+  .btn-background(@bg, @hover, @selected, @border, @text-color-selected, @text-color-selected);
 }
 
 .btn {
-  .btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @text-color);
+  .btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @button-border-color, @text-color, @text-color-highlight);
 }
 
 .btn.btn-primary {
@@ -45,3 +55,7 @@
 .btn.btn-error {
   .btn-variant(@background-color-error);
 }
+
+.btn-group > .btn {
+  border: none;
+}