added linear-gradient mixin.

This commit is contained in:
danielgrippi 2011-03-22 12:34:22 -07:00
parent 413acc59ca
commit 48598a9942
3 changed files with 25 additions and 32 deletions

View file

@ -17,3 +17,13 @@
-moz-box-shadow: $left $top $blur $color; -moz-box-shadow: $left $top $blur $color;
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);
}

View file

@ -125,17 +125,9 @@ form
header header
@include box-shadow(0,1px,3px,#222) @include box-shadow(0,1px,3px,#222)
@include linear-gradient(rgba(15,15,15,0.85),rgba(10,10,10,1))
:z-index 50 :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 :padding 0
:top 2px :top 2px
:color #CCC :color #CCC
@ -1159,7 +1151,7 @@ ul#aspect_nav
:display inline :display inline
input input
@include box-shadow(0,1px,2px,#666) @include box-shadow(0,1px,0px,#444)
:display inline :display inline
:background-color #ccc :background-color #ccc
@ -1823,16 +1815,13 @@ ul#request_result
:right 4px :right 4px
:left 4px :left 4px
&.added &.added
:background -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(92,199,86)), color-stop(1, rgb(158,255,153))) @include linear-gradient(rgb(92,199,86),rgb(158,255,153))
:background -moz-linear-gradient(top, rgb(158,255,153), rgb(92,199,86))
&.added.remove &.added.remove
:background -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(199,86,86)), color-stop(1, rgb(255,153,153))) @include linear-gradient(rgb(199,86,86),rgb(255,153,153))
:background -moz-linear-gradient(top, rgb(255,153,153), rgb(199,86,86))
&:active &:active
:background -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(130,55,55)), color-stop(1, rgb(199,119,119))) @include linear-gradient(rgb(130,55,55),rgb(199,119,119))
:background -moz-linear-gradient(top, rgb(199,119,119), rgb(130,55,55))
.aspect_list .aspect_list
:height 300px :height 300px
@ -1960,6 +1949,8 @@ ul#landing_nav
:size 18px :size 18px
#big_action_button, input[type='submit'] #big_action_button, input[type='submit']
@include linear-gradient(rgb(0,123,194),rgb(65,182,250))
:height 47px :height 47px
:margin 0 :margin 0
:background :background
@ -1970,9 +1961,6 @@ ul#landing_nav
:border-radius 0 5px 5px 0 :border-radius 0 5px 5px 0
:border 1px solid #CCC :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 :padding 12px
:font :font
:size 18px :size 18px
@ -1984,8 +1972,7 @@ ul#landing_nav
:align center :align center
&:hover &:hover
:background -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(0,136,209)), color-stop(1, rgb(113,204,255))) @include linear-gradient(rgb(0,136,209),rgb(113,204,255))
:background -moz-linear-gradient( center bottom, rgb(0,136,209) 0%, rgb(113,204,255) 100%)
#diaspora_description #diaspora_description
:background :background

View file

@ -9,6 +9,8 @@
.button, .button_set .button, .button_set
@include border-radius(3px) @include border-radius(3px)
@include linear-gradient(#f6f6f6,#d0d0d0)
:font :font
:style normal :style normal
:weight bold :weight bold
@ -25,11 +27,6 @@
:min-height 10px :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 :border 1px solid #aaa
:top 1px solid #ccc :top 1px solid #ccc
:bottom 1px solid #666 :bottom 1px solid #666
@ -41,17 +38,17 @@
:shadow 0 1px 1px #eee :shadow 0 1px 1px #eee
&:hover &:hover
@include linear-gradient(#d6d6d6,#b0b0b0)
:text :text
:decoration none :decoration none
:color #444 :color #444
:background -webkit-gradient(linear, 0% 39%, 0% 100%, from(#D6D6D6), to(#b0b0b0))
:background -moz-linear-gradient(top, #D6D6D6, #b0b0b0)
&:active &:active
@include linear-gradient(#acacac,#808080)
:color #111 :color #111
:text-shadow 0 1px 0 #ccc :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 :border 1px solid #666
:top 1px solid #333 :top 1px solid #333
:bottom 1px solid #888 :bottom 1px solid #888
@ -93,8 +90,7 @@ ul.button_set
:right none :right none
.button .selected, .button_set .selected .button .selected, .button_set .selected
:background -webkit-gradient(linear, 0% 29%, 0% 85%, from(#F0F0F0), to(#FAFAFA)) @include linear-gradient(#f0f0f0,#fafafa,29%,85%)
:background -moz-linear-gradient(top, #F0F0F0, #fafafa)
:border :border
:top 1px solid #aaa :top 1px solid #aaa