|
@function hsb($h-hsb, $s-hsb, $b-hsb, $a: 1) { |
|
@if $b-hsb == 0 { |
|
@return hsla(0, 0, 0, $a) |
|
} @else { |
|
$l-hsl: ($b-hsb/2) * (2 - ($s-hsb/100)); |
|
$s-hsl: ($b-hsb * $s-hsb) / if($l-hsl < 50, $l-hsl * 2, 200 - $l-hsl * 2); |
|
@return hsla($h-hsb, $s-hsl, $l-hsl, $a); |
|
} |
|
} |
|
|
|
@mixin buttonize($h, $s, $b) { |
|
|
|
$color: hsb($h, $s, $b); |
|
$dark: hsb($h, $s + 10, $b); |
|
$inset-top: inset 0 1px 0 hsb($h, $s - 20, $b + 10); |
|
$inset-bottom: inset 0 -1px 0 hsb($h, $s + 10, $b - 10); |
|
$inset: inset 0 0 0 1px hsb($h, $s - 10, $b); |
|
|
|
background-color: $color; |
|
background-image: linear-gradient(to bottom, $color, $dark); |
|
border: 1px solid hsb($h, $s + 20, $b - 20); |
|
box-shadow: $inset-top, |
|
$inset-bottom, |
|
$inset, |
|
0 2px 4px rgba(black, 0.2); |
|
color: white; |
|
text-shadow: 0 1px 2px rgba(black, 0.3); |
|
|
|
&:hover, |
|
&:focus { |
|
background: $dark; |
|
border-color: hsb($h, $s + 40, $b - 40); |
|
box-shadow: $inset-top, |
|
$inset-bottom, |
|
$inset; |
|
} |
|
|
|
&:active { |
|
background: $dark; |
|
box-shadow: inset 0 2px 3px rgba(black, 0.2); |
|
} |
|
|
|
.fa { |
|
color: hsb($h, $s + 20, $b - 20); |
|
text-shadow: 0 1px 0 rgba(white, 0.3); |
|
} |
|
|
|
} |
|
|
|
strong{ font-weight: 500;} |
|
|
|
.button{ @include buttonize(4, 58, 93); border-radius: 3px; cursor: pointer; display: inline-block; font-family: Effra; font-size: 14px; font-weight: 300; line-height: 20px; padding: 9px 16px 9px; margin: 16px 0 0 16px; transition: all 20ms ease-out; vertical-align: top;} |
|
.button-red{ @include buttonize(4, 58, 93);} |
|
.button-green{ @include buttonize(97, 42, 80);} |
|
.button-blue{ @include buttonize(199, 71, 89);} |
|
.button .fa{ float: left; font-size: 14px; line-height: 20px; margin: -1px 8px 0 -4px; vertical-align: top;} |
