Skip to content

Instantly share code, notes, and snippets.

@nex3
Forked from jdlich/gist:1152575
Created August 17, 2011 21:08
Show Gist options
  • Save nex3/1152636 to your computer and use it in GitHub Desktop.
Save nex3/1152636 to your computer and use it in GitHub Desktop.
$dark-button-style:
hover-border #abcdef,
hover-background #abcdef,
hover-text #abcdef,
hover-text-shadow #abcdef,
hover-gradient-1 #abcdef,
hover-gradient-2 #abcdef;
$light-button-style:
hover-border #abcdef,
hover-background #abcdef,
hover-text #abcdef,
hover-text-shadow #abcdef,
hover-gradient-1 #abcdef,
hover-gradient-2 #abcdef;
$login-button-style:
hover-border #abcdef,
hover-background #abcdef,
hover-text #abcdef,
hover-text-shadow #abcdef,
hover-gradient-1 #abcdef,
hover-gradient-2 #abcdef;
$utility-button-style:
hover-border #abcdef,
hover-background #abcdef,
hover-text #abcdef,
hover-text-shadow #abcdef,
hover-gradient-1 #abcdef,
hover-gradient-2 #abcdef;
$search-button-style:
hover-border #abcdef,
hover-background #abcdef,
hover-text #abcdef,
hover-text-shadow #abcdef,
hover-gradient-1 #abcdef,
hover-gradient-2 #abcdef;
$websearch-button-style:
hover-border #abcdef,
hover-background #abcdef,
hover-text #abcdef,
hover-text-shadow #abcdef,
hover-gradient-1 #abcdef,
hover-gradient-2 #abcdef;
$default-button-style:
hover-border #abcdef,
hover-background #abcdef,
hover-text #abcdef,
hover-text-shadow #abcdef,
hover-gradient-1 #abcdef,
hover-gradient-2 #abcdef;
$button-styles:
dark $dark-button-style,
light $light-button-style,
login $login-button-style,
utility $utility-button-style,
search $search-button-style,
websearch $websearch-button-style,
default $default-button-style;
@function lookup($map, $key) {
@foreach $pair in $map {
@if $key == nth($pair, 1) {
@return nth($pair, 2);
}
}
}
@mixin button-hover($type) {
$style: lookup($button-styles, $type);
@include button-style(
lookup($style, hover-border),
lookup($style, hover-background),
lookup($style, hover-text),
lookup($style, hover-text-shadow),
lookup($style, hover-gradient-1),
lookup($style, hover-gradient-2));
}
$button-styles:
dark ($darkButtonHoverBorder,
$darkButtonHoverBackground,
$darkButtonHoverText,
$darkButtonHoverTextShadow,
$darkButtonHoverGradient1,
$darkButtonHoverGradient2),
light ($lightButtonHoverBorder,
$lightButtonHoverBackground,
$lightButtonHoverText,
$lightButtonHoverTextShadow,
$lightButtonHoverGradient1,
$lightButtonHoverGradient2),
login ($loginButtonHoverBorder,
$loginButtonHoverBackground,
$loginButtonHoverText,
$loginButtonHoverTextShadow,
$loginButtonHoverGradient1,
$loginButtonHoverGradient2),
utility ($utilityButtonHoverBorder,
$utilityButtonHoverBackground,
$utilityButtonHoverText,
$utilityButtonHoverTextShadow,
$utilityButtonHoverGradient1,
$utilityButtonHoverGradient2),
search ($searchButtonHoverBorder,
$searchButtonHoverBackground,
$searchButtonHoverText,
$searchButtonHoverTextShadow,
$searchButtonHoverGradient1,
$searchButtonHoverGradient2),
websearch ($websearchButtonHoverBorder,
$websearchButtonHoverBackground,
$websearchButtonHoverText,
$websearchButtonHoverTextShadow,
$websearchButtonHoverGradient1,
$websearchButtonHoverGradient2),
default ($defaultButtonHoverBorder,
$defaultButtonHoverBackground,
$defaultButtonHoverText,
$defaultButtonHoverTextShadow,
$defaultButtonHoverGradient1,
$defaultButtonHoverGradient2);
@mixin button-hover($type) {
@foreach $pair in $button-styles {
@if $type == nth($pair, 1) {
$style: nth($pair, 2);
@include button-style(
nth($style, 1),
nth($style, 2),
nth($style, 3),
nth($style, 4),
nth($style, 5),
nth($style, 6));
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment