Skip to content

Instantly share code, notes, and snippets.

@jackie
Created June 4, 2014 20:44
Show Gist options
  • Save jackie/30320312a580ab89b293 to your computer and use it in GitHub Desktop.
Save jackie/30320312a580ab89b293 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.7)
// Compass (v)
// ----
@import 'compass';
$btn-colors: (
default: (
default: (
top: #226bfb,
bottom: #0f53e2,
border: #014de6,
),
hover: (
top: #1552cc,
bottom: #003db8,
border: #013eb8
),
active: (
top: #103d99,
bottom: #002e8a,
border: #012e8a
)
),
action: (
default: (
top: #34ae23,
bottom: #1a9509,
border: #1b9509,
),
hover: (
top: #2a8b1c,
bottom: #157708,
border: #167707
),
active: (
top: #1f6915,
bottom: #105906,
border: #105905
)
),
warn: (
default: (
top: #888888,
bottom: #6f6f6f,
border: #6f6f6f
),
hover: (
top: #6d6d6d,
bottom: #595959,
border: #595959
),
active: (
top: #525252,
bottom: #434343,
border: #434343
)
),
alert: (
default: (
top: #f13030,
bottom: #d71616,
border: #d71616,
),
hover: (
top: #c12626,
bottom: #ac1212,
border: #ac1212
),
active: (
top: #901d1d,
bottom: #810d0d,
border: #810d0d
)
),
dim: (
default: (
top: #fff,
bottom: #f7f7f7,
border: #dddddd,
),
hover: (
top: #f2f2f2,
bottom: #ebebeb,
border: #d2d2d2
),
active: (
top: #d9d9d9,
bottom: #d2d2d2,
border: #bdbdbd
)
)
);
$btn-types: map-keys($btn-colors);
@function map-me($map, $keys) {
@return map-me-r($map, $keys);
@each $key in $keys {
@if map-has-key($map, $key) {
$map: map-get($map, $key);
}
} // each key
@return $map;
} // @function map-me
@function map-me-r($map, $keys) {
@if length($keys) == 0 or length($map) == 0 {
@warn 'Check your arguments, dawg!';
@return null;
}
// get first key from list
$key: nth($keys, 1);
// get the value of $key from $map
@if map-has-key($map, $key) {
$map: map-get($map, $key);
}
// if this is the last $key in the list of $keys, return out $map value - there are no further keys to check
@if length($keys) == 1 {
@return $map;
}
// otherwise, continue drilling down into our map
// remove the first key from $keys to pass onto the next iteration of this function
$tmp-keys: $keys;
$keys: ();
@for $i from 2 through length($tmp-keys) {
$keys: append($keys, nth($tmp-keys, $i));
}
@return map-me-r($map, $keys);
} // @function map-me-r
@mixin button($type) {
@include background(
linear-gradient(
map-me($btn-colors, $type default top),
map-me($btn-colors, $type default bottom)
)
);
border-color: map-me($btn-colors, $type default border);
&:hover,
&:focus {
@include background(
linear-gradient(
map-me($btn-colors, $type hover top),
map-me($btn-colors, $type hover bottom)
)
);
border-color: map-me($btn-colors, $type hover border);
}
&:active {
@include background(
linear-gradient(
map-me($btn-colors, $type active top),
map-me($btn-colors, $type active bottom)
)
);
border-color: map-me($btn-colors, $type active border);
}
&[disabled] {
&,
&:hover,
&:active,
&:focus {
@include background(
linear-gradient(
map-me($btn-colors, $type default top),
map-me($btn-colors, $type default bottom)
)
);
border-color: map-me($btn-colors, $type default border);
}
} // &[disabled]
} // @mixin button
// Iterate over all types of buttons to generate their styles.
@each $type in $btn-types {
.btn-#{$type} {
@include button($type);
}
} // each type
.btn-default {
background: -moz-linear-gradient(#226bfb, #0f53e2);
background: -webkit-linear-gradient(#226bfb, #0f53e2);
background: linear-gradient(#226bfb, #0f53e2);
border-color: #014de6;
}
.btn-default:hover, .btn-default:focus {
background: -moz-linear-gradient(#1552cc, #003db8);
background: -webkit-linear-gradient(#1552cc, #003db8);
background: linear-gradient(#1552cc, #003db8);
border-color: #013eb8;
}
.btn-default:active {
background: -moz-linear-gradient(#103d99, #002e8a);
background: -webkit-linear-gradient(#103d99, #002e8a);
background: linear-gradient(#103d99, #002e8a);
border-color: #012e8a;
}
.btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:active, .btn-default[disabled]:focus {
background: -moz-linear-gradient(#226bfb, #0f53e2);
background: -webkit-linear-gradient(#226bfb, #0f53e2);
background: linear-gradient(#226bfb, #0f53e2);
border-color: #014de6;
}
.btn-action {
background: -moz-linear-gradient(#34ae23, #1a9509);
background: -webkit-linear-gradient(#34ae23, #1a9509);
background: linear-gradient(#34ae23, #1a9509);
border-color: #1b9509;
}
.btn-action:hover, .btn-action:focus {
background: -moz-linear-gradient(#2a8b1c, #157708);
background: -webkit-linear-gradient(#2a8b1c, #157708);
background: linear-gradient(#2a8b1c, #157708);
border-color: #167707;
}
.btn-action:active {
background: -moz-linear-gradient(#1f6915, #105906);
background: -webkit-linear-gradient(#1f6915, #105906);
background: linear-gradient(#1f6915, #105906);
border-color: #105905;
}
.btn-action[disabled], .btn-action[disabled]:hover, .btn-action[disabled]:active, .btn-action[disabled]:focus {
background: -moz-linear-gradient(#34ae23, #1a9509);
background: -webkit-linear-gradient(#34ae23, #1a9509);
background: linear-gradient(#34ae23, #1a9509);
border-color: #1b9509;
}
.btn-warn {
background: -moz-linear-gradient(#888888, #6f6f6f);
background: -webkit-linear-gradient(#888888, #6f6f6f);
background: linear-gradient(#888888, #6f6f6f);
border-color: #6f6f6f;
}
.btn-warn:hover, .btn-warn:focus {
background: -moz-linear-gradient(#6d6d6d, #595959);
background: -webkit-linear-gradient(#6d6d6d, #595959);
background: linear-gradient(#6d6d6d, #595959);
border-color: #595959;
}
.btn-warn:active {
background: -moz-linear-gradient(#525252, #434343);
background: -webkit-linear-gradient(#525252, #434343);
background: linear-gradient(#525252, #434343);
border-color: #434343;
}
.btn-warn[disabled], .btn-warn[disabled]:hover, .btn-warn[disabled]:active, .btn-warn[disabled]:focus {
background: -moz-linear-gradient(#888888, #6f6f6f);
background: -webkit-linear-gradient(#888888, #6f6f6f);
background: linear-gradient(#888888, #6f6f6f);
border-color: #6f6f6f;
}
.btn-alert {
background: -moz-linear-gradient(#f13030, #d71616);
background: -webkit-linear-gradient(#f13030, #d71616);
background: linear-gradient(#f13030, #d71616);
border-color: #d71616;
}
.btn-alert:hover, .btn-alert:focus {
background: -moz-linear-gradient(#c12626, #ac1212);
background: -webkit-linear-gradient(#c12626, #ac1212);
background: linear-gradient(#c12626, #ac1212);
border-color: #ac1212;
}
.btn-alert:active {
background: -moz-linear-gradient(#901d1d, #810d0d);
background: -webkit-linear-gradient(#901d1d, #810d0d);
background: linear-gradient(#901d1d, #810d0d);
border-color: #810d0d;
}
.btn-alert[disabled], .btn-alert[disabled]:hover, .btn-alert[disabled]:active, .btn-alert[disabled]:focus {
background: -moz-linear-gradient(#f13030, #d71616);
background: -webkit-linear-gradient(#f13030, #d71616);
background: linear-gradient(#f13030, #d71616);
border-color: #d71616;
}
.btn-dim {
background: -moz-linear-gradient(#ffffff, #f7f7f7);
background: -webkit-linear-gradient(#ffffff, #f7f7f7);
background: linear-gradient(#ffffff, #f7f7f7);
border-color: #dddddd;
}
.btn-dim:hover, .btn-dim:focus {
background: -moz-linear-gradient(#f2f2f2, #ebebeb);
background: -webkit-linear-gradient(#f2f2f2, #ebebeb);
background: linear-gradient(#f2f2f2, #ebebeb);
border-color: #d2d2d2;
}
.btn-dim:active {
background: -moz-linear-gradient(#d9d9d9, #d2d2d2);
background: -webkit-linear-gradient(#d9d9d9, #d2d2d2);
background: linear-gradient(#d9d9d9, #d2d2d2);
border-color: #bdbdbd;
}
.btn-dim[disabled], .btn-dim[disabled]:hover, .btn-dim[disabled]:active, .btn-dim[disabled]:focus {
background: -moz-linear-gradient(#ffffff, #f7f7f7);
background: -webkit-linear-gradient(#ffffff, #f7f7f7);
background: linear-gradient(#ffffff, #f7f7f7);
border-color: #dddddd;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment