|
|
|
|
@import "compass/css3/gradient";
|
|
|
|
|
@import "compass/css3/border-radius";
|
|
|
|
|
@import "compass/css3/box-shadow";
|
|
|
|
|
@import "compass/css3/text-shadow";
|
|
|
|
|
|
|
|
|
|
@mixin button(
|
|
|
|
|
$color: #f5f5f5,
|
|
|
|
|
$textColor: #333,
|
|
|
|
|
$textShadow: 0 1px 1px rgba(255,255,255,.75),
|
|
|
|
|
$padding: 9px 15px 10px,
|
|
|
|
|
$borderRadius: 6px
|
|
|
|
|
){
|
|
|
|
|
display: inline-block;
|
|
|
|
|
background-color: darken(saturate($color, 10), 10);
|
|
|
|
|
background-repeat: repeat-x;
|
|
|
|
|
@include background-image(linear-gradient($color, darken(saturate($color, 10), 10)));
|
|
|
|
|
padding: $padding;
|
|
|
|
|
text-shadow: $textShadow;
|
|
|
|
|
color: $textColor;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
@include border-radius($borderRadius);
|
|
|
|
|
@include box-shadow(
|
|
|
|
|
inset 0 1px 0 rgba(255,255,255,.2),
|
|
|
|
|
inset 0 -1px 0 rgba(0,0,0,.2),
|
|
|
|
|
0 1px 2px rgba(0,0,0,.25),
|
|
|
|
|
0 2px 10px rgba(0,0,0,0.5)
|
|
|
|
|
);
|
|
|
|
|
&:hover {
|
|
|
|
|
background-position: 0 -15px;
|
|
|
|
|
color: $textColor;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
