|
@mixin pie |
|
//using CSS3Pie for IE support |
|
behavior: url(/PIE.htc) |
|
|
|
.pie |
|
@include pie |
|
|
|
@mixin mybutton($bgcolor1, $bgcolor2, $bgcolor3, $bgcolor4, $textcolor, $bordercolor, $textshadowcolor) |
|
//this a mixin for general buttons with gradient background |
|
@include vertical-gradient($bgcolor1, $bgcolor2, $bgcolor3, $bgcolor4) |
|
@include round-borders($bordercolor) |
|
//text |
|
font-size: 12px |
|
color: $textcolor |
|
line-height: 1 |
|
text-align: center |
|
text-shadow: 0 -1px 1px $textshadowcolor |
|
//others |
|
padding: 6px 10px 8px |
|
-webkit-background-clip: padding-box |
|
//needed for IE, see http://css3pie.com/documentation/known-issues/ |
|
position: relative |
|
|
|
|
|
&:hover, &:focus |
|
@include vertical-gradient(lighten($bgcolor1, 5%), lighten($bgcolor2, 5%), lighten($bgcolor3, 5%), lighten($bgcolor4, 5%)) |
|
&:active, &.depressed |
|
@include vertical-gradient(desaturate(lighten($bgcolor1, 10%), 10%), desaturate(lighten($bgcolor2, 10%), 10%), desaturate(lighten($bgcolor3, 10%), 10%), desaturate(lighten($bgcolor4, 10%), 10%)) |
|
color: $bgcolor1 |
|
&.disabled, &[disabled] |
|
@include vertical-gradient(desaturate(lighten($bgcolor1, 10%), 50%), desaturate(lighten($bgcolor2, 10%), 50%), desaturate(lighten($bgcolor3, 10%), 50%), desaturate(lighten($bgcolor4, 10%), 50%)) |
|
color: darken($textcolor, 10%) |
|
|
|
@mixin vertical-gradient($bgcolor1, $bgcolor2, $bgcolor3, $bgcolor4) |
|
// cross browser mixin for gradients |
|
@extend .pie |
|
background: $bgcolor1 |
|
background: -moz-linear-gradient(0% 100% 90deg, $bgcolor1 0%, $bgcolor2 50%, $bgcolor3 50%, $bgcolor4 100%) |
|
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, $bgcolor4), color-stop(0.5, $bgcolor3), color-stop(0.5, $bgcolor2), color-stop(1, $bgcolor1)) |
|
-pie-background: linear-gradient(90deg, $bgcolor1, $bgcolor4) |
|
|
|
@mixin round-borders($bordercolor, $tl: 8px, $tr: nil, $br: nil, $bl: nil) |
|
// cross browser mixin for rounded borders |
|
@extend .pie |
|
border: 1px solid $bordercolor |
|
@if $tr == nil |
|
$tr: $tl |
|
@if $br == nil |
|
$br: $tl |
|
@if $bl == nil |
|
$bl: $tl |
|
-moz-border-radius: $tl $tr $br $bl |
|
-webkit-border-top-left-radius: $tl |
|
-webkit-border-bottom-left-radius: $bl |
|
-webkit-border-top-right-radius: $tr |
|
-webkit-border-bottom-right-radius: $br |
|
border-radius: $tl $tr $br $bl |
