From 48598a9942db184a22dddeb8f17858ef9cc9f61b Mon Sep 17 00:00:00 2001
From: danielgrippi <daniel@joindiaspora.com>
Date: Tue, 22 Mar 2011 12:34:22 -0700
Subject: [PATCH] added linear-gradient mixin.

---
 public/stylesheets/sass/_mixins.scss     | 10 ++++++++
 public/stylesheets/sass/application.sass | 29 +++++++-----------------
 public/stylesheets/sass/ui.sass          | 18 ++++++---------
 3 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/public/stylesheets/sass/_mixins.scss b/public/stylesheets/sass/_mixins.scss
index f2a1541a0..c1ac66a71 100644
--- a/public/stylesheets/sass/_mixins.scss
+++ b/public/stylesheets/sass/_mixins.scss
@@ -17,3 +17,13 @@
   -moz-box-shadow: $left $top $blur $color; 
   box-shadow: $left $top $blur $color; 
 }
+
+@mixin linear-gradient($from, $to, $start:0%, $end:100%){
+  background: mix($from,$to);
+
+  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=$from, endColorstr=$to);
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#{$from}, endColorstr=#{$to})";
+  
+  background: -webkit-gradient(linear, 0% $start, 0% $end, from($from), to($to));
+  background: -moz-linear-gradient(top, $from $start, $to $end);
+}
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index 3127a3bd0..a5e90b6f1 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -125,17 +125,9 @@ form
 
 header
   @include box-shadow(0,1px,3px,#222)
+  @include linear-gradient(rgba(15,15,15,0.85),rgba(10,10,10,1))
 
   :z-index 50
-  :position relative
-
-  :background
-    :color #111
-    :color rgba(15,15,15,0.90)
-
-  :background -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(20,20,20,0.85)), to(rgba(20,20,20,1)))
-  :background -moz-linear-gradient(top, rgba(20,20,20,0.85), rgba(20,20,20,0.98))
-
   :padding 0
     :top 2px
   :color #CCC
@@ -1159,7 +1151,7 @@ ul#aspect_nav
     :display inline
 
     input
-      @include box-shadow(0,1px,2px,#666)
+      @include box-shadow(0,1px,0px,#444)
 
       :display inline
       :background-color #ccc
@@ -1823,16 +1815,13 @@ ul#request_result
           :right 4px
           :left 4px
         &.added
-          :background -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(92,199,86)), color-stop(1, rgb(158,255,153)))
-          :background -moz-linear-gradient(top, rgb(158,255,153), rgb(92,199,86))
+          @include linear-gradient(rgb(92,199,86),rgb(158,255,153))
 
         &.added.remove
-          :background -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(199,86,86)), color-stop(1, rgb(255,153,153)))
-          :background -moz-linear-gradient(top, rgb(255,153,153), rgb(199,86,86))
+          @include linear-gradient(rgb(199,86,86),rgb(255,153,153))
 
           &:active
-            :background -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(130,55,55)), color-stop(1, rgb(199,119,119)))
-            :background -moz-linear-gradient(top, rgb(199,119,119), rgb(130,55,55))
+            @include linear-gradient(rgb(130,55,55),rgb(199,119,119))
 
 .aspect_list
   :height 300px
@@ -1960,6 +1949,8 @@ ul#landing_nav
       :size 18px
 
   #big_action_button, input[type='submit']
+    @include linear-gradient(rgb(0,123,194),rgb(65,182,250))
+
     :height 47px
     :margin 0
     :background
@@ -1970,9 +1961,6 @@ ul#landing_nav
     :border-radius 0 5px 5px 0
     :border 1px solid #CCC
 
-    :background -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(0,123,194)), color-stop(1, rgb(65,182,250)))
-    :background -moz-linear-gradient( center bottom, rgb(0,123,194) 0%, rgb(65,182,250) 100%)
-
     :padding 12px
     :font
       :size 18px
@@ -1984,8 +1972,7 @@ ul#landing_nav
       :align center
 
     &:hover
-      :background -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(0,136,209)), color-stop(1, rgb(113,204,255)))
-      :background -moz-linear-gradient( center bottom, rgb(0,136,209) 0%, rgb(113,204,255) 100%)
+      @include linear-gradient(rgb(0,136,209),rgb(113,204,255))
 
 #diaspora_description
   :background
diff --git a/public/stylesheets/sass/ui.sass b/public/stylesheets/sass/ui.sass
index fca2a87ad..b80440e7d 100644
--- a/public/stylesheets/sass/ui.sass
+++ b/public/stylesheets/sass/ui.sass
@@ -9,6 +9,8 @@
 
 .button, .button_set
   @include border-radius(3px)
+  @include linear-gradient(#f6f6f6,#d0d0d0)
+
   :font
     :style normal
     :weight bold
@@ -25,11 +27,6 @@
 
   :min-height 10px
 
-  :background
-    :color #ccc
-  :background -webkit-gradient(linear, 0% 39%, 0% 100%, from(#F6F6F6), to(#d0d0d0))
-  :background -moz-linear-gradient(top, #F6F6F6, #d0d0d0)
-
   :border 1px solid #aaa
     :top 1px solid #ccc
     :bottom 1px solid #666
@@ -41,17 +38,17 @@
     :shadow 0 1px 1px #eee
 
   &:hover
+    @include linear-gradient(#d6d6d6,#b0b0b0)
+
     :text
       :decoration none
     :color #444
-    :background -webkit-gradient(linear, 0% 39%, 0% 100%, from(#D6D6D6), to(#b0b0b0))
-    :background -moz-linear-gradient(top, #D6D6D6, #b0b0b0)
 
   &:active
+    @include linear-gradient(#acacac,#808080)
+
     :color #111
     :text-shadow 0 1px 0 #ccc
-    :background -webkit-gradient(linear, 0% 39%, 0% 100%, from(#ACACAC), to(#808080))
-    :background -moz-linear-gradient(top, #ACACAC, #808080)
     :border 1px solid #666
       :top 1px solid #333
       :bottom 1px solid #888
@@ -93,8 +90,7 @@ ul.button_set
         :right none
 
 .button .selected, .button_set .selected
-  :background -webkit-gradient(linear, 0% 29%, 0% 85%, from(#F0F0F0), to(#FAFAFA))
-  :background -moz-linear-gradient(top, #F0F0F0, #fafafa)
+  @include linear-gradient(#f0f0f0,#fafafa,29%,85%)
 
   :border
     :top 1px solid #aaa