Last active
August 29, 2015 14:06
-
-
Save mirisuzanne/ca6481263fa15af9a5c4 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<a href="#" class="btn btn--call-to-action">Call To Action</a> | |
<div class="form"> | |
<button class="btn btn--submit"> | |
<span data-icon="checkmark"></span> | |
Submit | |
</button> | |
<button class="btn btn--secondary">Secondary</button> | |
<button class="btn btn--alert">Alert</button> | |
</div> | |
<div class="social"> | |
<a href="#" class="btn btn--twitter">twitter</a> | |
<a href="#" class="btn btn--github">github</a> | |
<a href="#" class="btn btn--stackoverflow">stackoverflow</a> | |
<a href="#" class="btn btn--dribbble">dribbble</a> | |
<a href="#" class="btn btn--instagram">instagram</a> | |
<a href="#" class="btn btn--soundcloud">soundcloud</a> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.4) | |
// Compass (v1.0.1) | |
// ---- | |
// Sass Map Magic Demos | |
// ==================== | |
// Eric Suzanne | @ericmsuzanne | |
// User Config | |
// ----------- | |
$icons: ( | |
skull: "\e18c", | |
warning: "\e243", | |
checkmark: "\e258", | |
instagram: "\e32e", | |
twitter: "\e32f", | |
dribbble: "\e341", | |
github: "\e34c", | |
soundcloud: "\e35d", | |
stackoverflow: "\e367", | |
danger: skull, | |
escher: danger, | |
godel: escher, | |
bach: godel, | |
kevin bacon: bach, | |
); | |
$colors: ( | |
dark: #333, | |
light: #eee, | |
brand: hsl(330, 100%, 50%), | |
accent: hsl(195, 100%, 55%), | |
text: dark, | |
background: light, | |
action: accent, | |
focus: action (darken: 15%), | |
twitter: #00aced, | |
instagram: #517fa4, | |
stackoverflow: #F47920, | |
soundcloud: #FF6600, | |
dribbble: #EA4C89, | |
github: #4183C4, | |
); | |
$base-size: 18px; | |
$ratio: major-third; | |
$sizes: ( | |
normal: 0, | |
rhythm: 1, | |
h1: 4, | |
large: 2, | |
medium: normal, | |
small: -2, | |
shim: .25em, | |
); | |
$button-config: (); | |
$buttons: ( | |
submit: glow round, | |
call-to-action: glow square large block, | |
secondary: submit text outline small, | |
alert: submit stop skull, | |
social: flat pill, | |
); | |
// Icons | |
// ----- | |
@function icon($icon) { | |
$icon: map-get($icons, $icon) or $icon; | |
@if map-has-key($icons, $icon) { | |
$icon: icon($icon); | |
} | |
@return $icon; | |
} | |
@mixin icon($name) { | |
&:before { | |
@extend %icon; | |
content: icon($name); | |
@content; | |
} | |
} | |
// Color | |
// ----- | |
@function color($color) { | |
// Parse arguments | |
$color: map-get($colors, $color) or $color; | |
$base: nth($color, 1); | |
$adjust: if(length($color) > 1, nth($color, 2), ()); | |
// Recursive check | |
$color: if(map-has-key($colors, $base), color($base), $base); | |
// Adjustments [consider function-exists() warning] | |
@each $function, $values in $adjust { | |
$color: call($function, $color, $values...); | |
} | |
@return $color; | |
} | |
// Size | |
// ---- | |
$ratio-options: ( | |
octave : 2, | |
major-seventh : 15/8, | |
minor-seventh : 16/9, | |
major-sixth : 5/3, | |
minor-sixth : 8/5, | |
fifth : 3/2, | |
augmented-fourth : 45/32, | |
fourth : 4/3, | |
major-third : 5/4, | |
minor-third : 6/5, | |
major-second : 9/8, | |
minor-second : 16/15, | |
); | |
@function get-size( | |
$size | |
) { | |
$size: map-get($sizes, $size) or $size; | |
@if map-has-key($sizes, $size) { | |
$size: get-size($size); | |
} | |
@return $size; | |
} | |
@function get-ratio( | |
$ratio: $ratio | |
) { | |
$ratio: map-get($ratio-options, $ratio) or $ratio; | |
@if map-has-key($ratio-options, $ratio) { | |
$ratio: get-ratio($ratio); | |
} | |
@return $ratio; | |
} | |
@function size( | |
$size | |
) { | |
$size: get-size($size); | |
@if unitless($size) { | |
$ratio: get-ratio($ratio); | |
$size: round($base-size * pow($ratio, $size)); | |
} | |
@return $size; | |
} | |
// Render | |
// ------ | |
@mixin render( | |
$css | |
) { | |
@each $key, $value in $css { | |
@if type-of($value) == map { | |
#{$key} { | |
@include render($value); | |
} | |
} @else if $key == 'extend' { | |
@extend #{$value}; | |
} @else { | |
#{$key}: $value; | |
} | |
} | |
} | |
// Parse | |
// ----- | |
@function parse( | |
$shorthand, | |
$keywords | |
){ | |
@if type-of($shorthand) == map { | |
@return $shorthand; | |
} @else { | |
$return: (); | |
@each $item in $shorthand { | |
@if type-of($item) == map { | |
$return: map-merge($return, $item); | |
} @else { | |
@each $setting, $options in $keywords { | |
@if index($options, $item) { | |
$return: map-merge($return, ($setting: $item)); | |
} | |
} | |
} | |
} | |
@return $return; | |
} | |
} | |
// Buttons | |
// ------- | |
$btn-defaults: ( | |
style: flat, | |
shape: round, | |
display: inline-block, | |
color: action, | |
icon: false, | |
size: medium, | |
); | |
$button-options: ( | |
style: flat glow outline, | |
shape: round square pill, | |
display: inline block inline-block, | |
); | |
@function btn-get( | |
$setting, | |
$config: $button-config | |
) { | |
@return map-get($config, $setting) or map-get($button-config, $setting) or map-get($btn-defaults, $setting); | |
} | |
@function btn-parse( | |
$input | |
) { | |
$options: map-merge($button-options, ( | |
color: map-keys($colors), | |
icon: map-keys($icons), | |
size: map-keys($sizes), | |
preset: map-keys($buttons), | |
)); | |
$input: parse($input, $options); | |
$preset: map-get($input, preset); | |
@if map-has-key($buttons, $preset) { | |
$preset: btn-parse(map-get($buttons, $preset)); | |
$input: map-merge($preset, $input); | |
} | |
@return $input; | |
} | |
@function btn-radius( | |
$input | |
) { | |
$shape: btn-get(shape, $input); | |
@if $shape == round { | |
@return size(shim); | |
} @else if $shape == pill { | |
@return 50em; | |
} @else { | |
@return 0; | |
} | |
} | |
@function btn-icons( | |
$input | |
) { | |
$output: null; | |
$icon: map-get($input, icon); | |
@if $icon { | |
$output: ( | |
extend: '%icon', | |
content: icon($icon), | |
margin-right: .4em, | |
); | |
} | |
@return $output; | |
} | |
@function btn-size( | |
$input | |
) { | |
$size: size(btn-get(size, $input)); | |
$padding: .25em 1em; | |
@if $size > 24px { | |
$padding: 1em; | |
} @else if $size < 15px { | |
$padding: 0 1em; | |
} | |
@return ( | |
font-size: $size, | |
padding: $padding, | |
); | |
} | |
@mixin button( | |
$style | |
) { | |
$input: btn-parse($style); | |
$output: map-merge(btn-size($input), ( | |
display: btn-get(display, $input), | |
border-radius: btn-radius($input), | |
'&:before': btn-icons($input), | |
)); | |
$style: 'btn-#{btn-get(style, $input)}'; | |
@if function-exists($style) { | |
$output: map-merge($output, call($style, $input)); | |
} @else { | |
@warn "We don't know how to make #{$style} buttons."; | |
} | |
@include render($output); | |
} | |
// Styles | |
// ------ | |
@function btn-flat( | |
$input | |
) { | |
$color: color(btn-get(color, $input)); | |
$output: ( | |
background: $color, | |
color: contrast($color), | |
); | |
@return $output; | |
} | |
@function btn-outline( | |
$input | |
) { | |
$color: color(btn-get(color, $input)); | |
$output: ( | |
border: 2px solid $color, | |
color: $color, | |
); | |
@return $output; | |
} | |
@function btn-glow( | |
$input | |
) { | |
$color: color(btn-get(color, $input)); | |
$contrast: contrast($color); | |
$output: ( | |
background: linear-gradient(to top, darken($color, 15%), $color) $color, | |
border: 1px solid darken($color, 25%), | |
box-shadow: 0 1px 0 rgba(lighten($color, 80%), .5) inset, | |
color: $contrast, | |
text-shadow: 0 1px 0 rgba(contrast($contrast), .5), | |
); | |
@return $output; | |
} | |
// Additional Helpers | |
// ------------------ | |
@font-face { | |
font-family: 'magic'; | |
src: url('fonts/magic.eot'); | |
} | |
@font-face { | |
font-family: 'magic'; | |
src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'), | |
url(data:application/font-woff;charset=utf-8;base64,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) format('woff'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
%btn-reset { | |
background: none; | |
border: 0; | |
color: inherit; | |
cursor: pointer; | |
display: inline-block; | |
font: inherit; | |
padding: 0; | |
text-decoration: none; | |
text-shadow: none; | |
}; | |
%icon { | |
font-family: 'magic'; | |
speak: none; | |
font-style: normal; | |
font-weight: normal; | |
font-variant: normal; | |
text-transform: none; | |
text-decoration: none; | |
/* Better Font Rendering =========== */ | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
@function brightness($color) { | |
@return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)) / 255 * 100%; | |
} | |
@function contrast( | |
$color | |
) { | |
$dark: color(dark); | |
$light: color(light); | |
$color-brightness: brightness($color); | |
$dark-text-brightness: brightness($dark); | |
$light-text-brightness: brightness($light); | |
@return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark); | |
} | |
// Output | |
// ------ | |
$social: twitter instagram stackoverflow soundcloud dribbble github; | |
body { | |
background: color(background); | |
color: color(text); | |
font-family: sans-serif; | |
font-size: size(normal); | |
line-height: size(rhythm); | |
margin: size(large) auto; | |
max-width: 40rem; | |
text-align: center; | |
.btn--call-to-action, | |
.form, | |
.social { | |
margin-bottom: size(rhythm); | |
} | |
} | |
.btn { | |
@extend %btn-reset; | |
} | |
@each $name, $glyph in $icons { | |
[data-icon='#{$name}'] { | |
@include icon($name) { | |
margin-right: .4em; | |
} | |
} | |
} | |
@each $btn, $styles in $buttons { | |
.btn--#{$btn} { | |
@include button($styles); | |
} | |
} | |
@each $site in $social { | |
.btn--#{$site} { | |
@include button(social $site); | |
margin-bottom: size(rhythm); | |
} | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@charset "UTF-8"; | |
@font-face { | |
font-family: 'magic'; | |
src: url("fonts/magic.eot"); | |
} | |
@font-face { | |
font-family: 'magic'; | |
src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format("truetype"), url(data:application/font-woff;charset=utf-8;base64,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) format("woff"); | |
font-weight: normal; | |
font-style: normal; | |
} | |
.btn { | |
background: none; | |
border: 0; | |
color: inherit; | |
cursor: pointer; | |
display: inline-block; | |
font: inherit; | |
padding: 0; | |
text-decoration: none; | |
text-shadow: none; | |
} | |
[data-icon='skull']:before, [data-icon='warning']:before, [data-icon='checkmark']:before, [data-icon='instagram']:before, [data-icon='twitter']:before, [data-icon='dribbble']:before, [data-icon='github']:before, [data-icon='soundcloud']:before, [data-icon='stackoverflow']:before, [data-icon='danger']:before, [data-icon='escher']:before, [data-icon='godel']:before, [data-icon='bach']:before, [data-icon='kevin bacon']:before, .btn--alert:before, .btn--twitter:before, .btn--instagram:before, .btn--stackoverflow:before, .btn--soundcloud:before, .btn--dribbble:before, .btn--github:before { | |
font-family: 'magic'; | |
speak: none; | |
font-style: normal; | |
font-weight: normal; | |
font-variant: normal; | |
text-transform: none; | |
text-decoration: none; | |
/* Better Font Rendering =========== */ | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
body { | |
background: #eee; | |
color: #333; | |
font-family: sans-serif; | |
font-size: 18px; | |
line-height: 23px; | |
margin: 28px auto; | |
max-width: 40rem; | |
text-align: center; | |
} | |
body .btn--call-to-action, | |
body .form, | |
body .social { | |
margin-bottom: 23px; | |
} | |
[data-icon='skull']:before { | |
content: ""; | |
margin-right: .4em; | |
} | |
[data-icon='warning']:before { | |
content: ""; | |
margin-right: .4em; | |
} | |
[data-icon='checkmark']:before { | |
content: ""; | |
margin-right: .4em; | |
} | |
[data-icon='instagram']:before { | |
content: ""; | |
margin-right: .4em; | |
} | |
[data-icon='twitter']:before { | |
content: ""; | |
margin-right: .4em; | |
} | |
[data-icon='dribbble']:before { | |
content: ""; | |
margin-right: .4em; | |
} | |
[data-icon='github']:before { | |
content: ""; | |
margin-right: .4em; | |
} | |
[data-icon='soundcloud']:before { | |
content: ""; | |
margin-right: .4em; | |
} | |
[data-icon='stackoverflow']:before { | |
content: ""; | |
margin-right: .4em; | |
} | |
[data-icon='danger']:before { | |
content: ""; | |
margin-right: .4em; | |
} | |
[data-icon='escher']:before { | |
content: ""; | |
margin-right: .4em; | |
} | |
[data-icon='godel']:before { | |
content: ""; | |
margin-right: .4em; | |
} | |
[data-icon='bach']:before { | |
content: ""; | |
margin-right: .4em; | |
} | |
[data-icon='kevin bacon']:before { | |
content: ""; | |
margin-right: .4em; | |
} | |
.btn--submit { | |
font-size: 18px; | |
padding: 0.25em 1em; | |
display: inline-block; | |
border-radius: 0.25em; | |
background: linear-gradient(to top, #0099cc, #1ac6ff) #1ac6ff; | |
border: 1px solid #007399; | |
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; | |
color: #333; | |
text-shadow: 0 1px 0 rgba(238, 238, 238, 0.5); | |
} | |
.btn--call-to-action { | |
font-size: 28px; | |
padding: 1em; | |
display: block; | |
border-radius: 0; | |
background: linear-gradient(to top, #0099cc, #1ac6ff) #1ac6ff; | |
border: 1px solid #007399; | |
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; | |
color: #333; | |
text-shadow: 0 1px 0 rgba(238, 238, 238, 0.5); | |
} | |
.btn--secondary { | |
font-size: 12px; | |
padding: 0 1em; | |
display: inline-block; | |
border-radius: 0.25em; | |
border: 2px solid #333; | |
color: #333; | |
} | |
.btn--alert { | |
font-size: 18px; | |
padding: 0.25em 1em; | |
display: inline-block; | |
border-radius: 0.25em; | |
background: linear-gradient(to top, #0099cc, #1ac6ff) #1ac6ff; | |
border: 1px solid #007399; | |
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; | |
color: #333; | |
text-shadow: 0 1px 0 rgba(238, 238, 238, 0.5); | |
} | |
.btn--alert:before { | |
content: ""; | |
margin-right: 0.4em; | |
} | |
.btn--social { | |
font-size: 18px; | |
padding: 0.25em 1em; | |
display: inline-block; | |
border-radius: 50em; | |
background: #1ac6ff; | |
color: #333; | |
} | |
.btn--twitter { | |
font-size: 18px; | |
padding: 0.25em 1em; | |
display: inline-block; | |
border-radius: 50em; | |
background: #00aced; | |
color: #eee; | |
margin-bottom: 23px; | |
} | |
.btn--twitter:before { | |
content: ""; | |
margin-right: 0.4em; | |
} | |
.btn--instagram { | |
font-size: 18px; | |
padding: 0.25em 1em; | |
display: inline-block; | |
border-radius: 50em; | |
background: #517fa4; | |
color: #eee; | |
margin-bottom: 23px; | |
} | |
.btn--instagram:before { | |
content: ""; | |
margin-right: 0.4em; | |
} | |
.btn--stackoverflow { | |
font-size: 18px; | |
padding: 0.25em 1em; | |
display: inline-block; | |
border-radius: 50em; | |
background: #F47920; | |
color: #333; | |
margin-bottom: 23px; | |
} | |
.btn--stackoverflow:before { | |
content: ""; | |
margin-right: 0.4em; | |
} | |
.btn--soundcloud { | |
font-size: 18px; | |
padding: 0.25em 1em; | |
display: inline-block; | |
border-radius: 50em; | |
background: #FF6600; | |
color: #eee; | |
margin-bottom: 23px; | |
} | |
.btn--soundcloud:before { | |
content: ""; | |
margin-right: 0.4em; | |
} | |
.btn--dribbble { | |
font-size: 18px; | |
padding: 0.25em 1em; | |
display: inline-block; | |
border-radius: 50em; | |
background: #EA4C89; | |
color: #eee; | |
margin-bottom: 23px; | |
} | |
.btn--dribbble:before { | |
content: ""; | |
margin-right: 0.4em; | |
} | |
.btn--github { | |
font-size: 18px; | |
padding: 0.25em 1em; | |
display: inline-block; | |
border-radius: 50em; | |
background: #4183C4; | |
color: #eee; | |
margin-bottom: 23px; | |
} | |
.btn--github:before { | |
content: ""; | |
margin-right: 0.4em; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<a href="#" class="btn btn--call-to-action">Call To Action</a> | |
<div class="form"> | |
<button class="btn btn--submit"> | |
<span data-icon="checkmark"></span> | |
Submit | |
</button> | |
<button class="btn btn--secondary">Secondary</button> | |
<button class="btn btn--alert">Alert</button> | |
</div> | |
<div class="social"> | |
<a href="#" class="btn btn--twitter">twitter</a> | |
<a href="#" class="btn btn--github">github</a> | |
<a href="#" class="btn btn--stackoverflow">stackoverflow</a> | |
<a href="#" class="btn btn--dribbble">dribbble</a> | |
<a href="#" class="btn btn--instagram">instagram</a> | |
<a href="#" class="btn btn--soundcloud">soundcloud</a> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment