|
.customButton(@cHue: 201, @cSaturation: 1, @cLightness: .4, @cDelta: .1, @cMultiplier: 1.5) { |
|
.cTextColor(@a, @b) when (@a < .5) { color: #fff; .cAlphaShadow(0, -1, 1, 0, (@b * 3.3)); } |
|
.cTextColor(@a, @b) when (@a > .5) { color: #333; .cAlphaShadow(0, 1, 1, 255, (@b * 3.3)); } |
|
.cTextColor(@a) { -webkit-font-smoothing: antialiased; } |
|
.cAlphaShadow(@a, @b, @c, @d, @e) when (@e > 1) { text-shadow: (0px + @a) (0px + @b) (0px + @c) rgba(@d, @d, @d, 1); } |
|
.cAlphaShadow(@a, @b, @c, @d, @e) when (@e < 1) { text-shadow: (0px + @a) (0px + @b) (0px + @c) rgba(@d, @d, @d, @e); } |
|
|
|
@cHighlight: percentage(@cLightness + @cDelta); |
|
@cLowlight: percentage(@cLightness - @cDelta); |
|
@cSuperLowLight: percentage(@cLightness - @cDelta * @cMultiplier); |
|
|
|
@cColor: hsl(percentage(@cHue), percentage(@cSaturation), @cHighlight); |
|
@cEndColor: hsl(percentage(@cHue), percentage(@cSaturation), @cLowlight); |
|
@cBorderColor: hsl(percentage(@cHue), percentage(@cSaturation), @cSuperLowLight); |
|
|
|
background-color: @cColor; |
|
background-repeat: repeat-x; |
|
background-image: -khtml-gradient(linear, left top, left bottom, from(@cColor), to(@cEndColor)); |
|
background-image: -moz-linear-gradient(top, @cColor, @cEndColor); |
|
background-image: -ms-linear-gradient(top, @cColor, @cEndColor); |
|
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@cColor), to(@cEndColor)); |
|
background-image: -webkit-linear-gradient(top, @cColor, @cEndColor); |
|
background-image: -o-linear-gradient(top, @cColor, @cEndColor); |
|
background-image: linear-gradient(top, @cColor, @cSuperLowLight); |
|
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@cColor,@cEndColor)); |
|
border-color: @cEndColor @cEndColor @cBorderColor; |
|
.cTextColor(@cLightness, @cDelta); |
|
} |
|
|
|
.btn { |
|
&.custom { |
|
.customButton; |
|
} |
|
} |
