Skip to content

Instantly share code, notes, and snippets.

@MichaelArestad

MichaelArestad/SassMeister-input.scss

Created July 22, 2014 00:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save MichaelArestad/f310a60b55cacbd397a1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save MichaelArestad/f310a60b55cacbd397a1 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----
@import url(http://s0.wp.com/_static/??-eJydktluAjEMRX+oIV0A0Yeq35LFJAZnUZZB/ftmAhQoVVr1aWznnujmjvkhMvSKqobMVc5ci2xRBZ8XDv2iTR74d4nQ7YhJkW4kjSngC49UDfrMiwUHzIGvHbq0d4Sr7AzlKrNKGAs2B3wbiMJhpLdhgsRklZKauVw+CEZy9IQeWIHkMq/4O0C4b/fuoESh9qx3I/lXMu1cBccuSQ0gFRK0uYuizAoHGgVQS8uXEebi+kzNpW0G77311JuvjeIGPKT+Z38u/8heRYbch3KcnouR4aaBq4jY9DxSGwiMghLzJtw0bEsCh4EmkBRMK03fvEs7gmLI5Xg1z1akGT59xy7/F6pdckNBChpuk7IIU1+EzA+oDZRhwCdJf7QJQScQugPv7u1p+bh63ayW65fdJ7Fce8Y=);
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
padding: 5%;
text-align: center;
}
div {
margin: 15px 0;
}
// OPTIONS
//
// background: <color>
// color: <color>
// icon: "/f122" unicode value
// style: social, bfb (big fuckin button)
// blink: fuck-yeah, pulse
$buttons:(
primary:(
background: #00aadc
),
secondary:(
background: #eee,
color: #444
),
download:(
background: green,
color: white,
icon: '\f440', // download icon
),
twitter:(
background: #55acee,
color: white,
icon: '\f202', // twitter-icon
style: 'social'
),
fuck-yeah:(
background: blue,
color: white,
icon: '\f444',
// blink: 'fuck-yeah',
blink: 'pulse',
style: 'bfb'
)
);
// Base button styles
%button {
display: inline-block;
margin: 0;
padding: 0.538em 0.769em; // 7/13 10/13
border-width: 1px;
border-style: solid;
border-radius: 0.230em; // 3/13
font-size: 13px;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
appearance: none;
}
// The Mixin
@mixin button( $background: #0085be, $color: #fff, $icon: false, $type: default, $blink: none ) {
@extend %button;
background: $background;
border-color: darken( $background, 10% );
color: $color;
@if $type == "bfb" { font-size: 2em; }
@if $blink == "fuck-yeah" { animation: blink .75s linear INFINITE; } // May be my greatest line of code to date.
@if $blink == "pulse" { animation: pulse .5s ease-in infinite alternate; }
@if $icon != false {
@if $style != 'social' {
&:before {
content: $icon;
display: inline-block;
margin-top: -5px;
margin-right: 10px;
font-family: 'Genericons';
font-size: 1.538em; // 20/13
line-height: 0;
vertical-align: middle;
}
} @else {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
text-indent: -9999px;
text-align: left;
&:before {
content: $icon;
display: inline-block;
margin: 4px 0 0 9px;
font-family: 'Genericons';
font-size: 1.538em; // 20/13
vertical-align: middle;
position: absolute;
width: 40px;
top: 0;
left: 9999px;
width: 100%;
height: 100%;
}
}
}
&:hover,
&:focus {
background: darken( $background, 5% );
border-color: darken( $background, 15% );
color: $color;
}
&:active {
background: darken( $background, 10% );
border-color: darken( $background, 15% );
color: $color;
}
&[disabled],
&:disabled {
color: hsl( hue( $background ), 10%, 80% ) !important;
background: darken( $background, 8% ) !important;
border-color: darken( $background, 15% ) !important;
}
&:visited {
color: $color;
}
}
// annoying, but necessary default fallbacks
$background: #0085be;
$color: #fff;
$icon: false;
$style: default;
$blink: none;
// The magic
@each $type in map-keys($buttons) {
// Define blinkiness
@if map-has-key(map-get($buttons, $type), blink) {
$blink: map-get(map-get($buttons, $type), blink);
}
// Define background color
@if map-has-key(map-get($buttons, $type), background) {
$background: map-get(map-get($buttons, $type), background);
}
// Define text color
@if map-has-key(map-get($buttons, $type), color) {
$color: map-get(map-get($buttons, $type), color);
}
// Define icon symbol
@if map-has-key(map-get($buttons, $type), icon) {
$icon: map-get(map-get($buttons, $type), icon);
}
// Define button type
@if map-has-key(map-get($buttons, $type), style) {
$style: map-get(map-get($buttons, $type), style);
}
.button-#{$type} {
@include button(
$background,
$color,
$icon,
$style,
$blink
);
}
}
@keyframes blink {
50% {
opacity: 1;
}
50.01% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes pulse {
0% {
opacity: .7;
transform: scale(.9);
}
}
Raw
SassMeister-output.css
@import url(http://s0.wp.com/_static/??-eJydktluAjEMRX+oIV0A0Yeq35LFJAZnUZZB/ftmAhQoVVr1aWznnujmjvkhMvSKqobMVc5ci2xRBZ8XDv2iTR74d4nQ7YhJkW4kjSngC49UDfrMiwUHzIGvHbq0d4Sr7AzlKrNKGAs2B3wbiMJhpLdhgsRklZKauVw+CEZy9IQeWIHkMq/4O0C4b/fuoESh9qx3I/lXMu1cBccuSQ0gFRK0uYuizAoHGgVQS8uXEebi+kzNpW0G77311JuvjeIGPKT+Z38u/8heRYbch3KcnouR4aaBq4jY9DxSGwiMghLzJtw0bEsCh4EmkBRMK03fvEs7gmLI5Xg1z1akGT59xy7/F6pdckNBChpuk7IIU1+EzA+oDZRhwCdJf7QJQScQugPv7u1p+bh63ayW65fdJ7Fce8Y=);
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
padding: 5%;
text-align: center;
}
div {
margin: 15px 0;
}
.button-primary, .button-secondary, .button-download, .button-twitter, .button-fuck-yeah {
display: inline-block;
margin: 0;
padding: 0.538em 0.769em;
border-width: 1px;
border-style: solid;
border-radius: 0.230em;
font-size: 13px;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
appearance: none;
}
.button-primary {
background: #00aadc;
border-color: #0083a9;
color: white;
}
.button-primary:hover, .button-primary:focus {
background: #0096c3;
border-color: #006f90;
color: white;
}
.button-primary:active {
background: #0083a9;
border-color: #006f90;
color: white;
}
.button-primary[disabled], .button-primary:disabled {
color: #c7cfd1 !important;
background: #008ab3 !important;
border-color: #006f90 !important;
}
.button-primary:visited {
color: white;
}
.button-secondary {
background: #eeeeee;
border-color: #d4d4d4;
color: #444444;
}
.button-secondary:hover, .button-secondary:focus {
background: #e1e1e1;
border-color: #c8c8c8;
color: #444444;
}
.button-secondary:active {
background: #d4d4d4;
border-color: #c8c8c8;
color: #444444;
}
.button-secondary[disabled], .button-secondary:disabled {
color: #d1c7c7 !important;
background: #dadada !important;
border-color: #c8c8c8 !important;
}
.button-secondary:visited {
color: #444444;
}
.button-download {
background: green;
border-color: #004d00;
color: white;
}
.button-download:before {
content: "\f440";
display: inline-block;
margin-top: -5px;
margin-right: 10px;
font-family: 'Genericons';
font-size: 1.538em;
line-height: 0;
vertical-align: middle;
}
.button-download:hover, .button-download:focus {
background: #006700;
border-color: #003400;
color: white;
}
.button-download:active {
background: #004d00;
border-color: #003400;
color: white;
}
.button-download[disabled], .button-download:disabled {
color: #c7d1c7 !important;
background: #005700 !important;
border-color: #003400 !important;
}
.button-download:visited {
color: white;
}
.button-twitter {
background: #55acee;
border-color: #2795e9;
color: white;
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
text-indent: -9999px;
text-align: left;
}
.button-twitter:before {
content: "\f202";
display: inline-block;
margin: 4px 0 0 9px;
font-family: 'Genericons';
font-size: 1.538em;
vertical-align: middle;
position: absolute;
width: 40px;
top: 0;
left: 9999px;
width: 100%;
height: 100%;
}
.button-twitter:hover, .button-twitter:focus {
background: #3ea1ec;
border-color: #1689e0;
color: white;
}
.button-twitter:active {
background: #2795e9;
border-color: #1689e0;
color: white;
}
.button-twitter[disabled], .button-twitter:disabled {
color: #c7cdd1 !important;
background: #309aea !important;
border-color: #1689e0 !important;
}
.button-twitter:visited {
color: white;
}
.button-fuck-yeah {
background: blue;
border-color: #0000cc;
color: white;
font-size: 2em;
animation: pulse .5s ease-in infinite alternate;
}
.button-fuck-yeah:before {
content: "\f444";
display: inline-block;
margin-top: -5px;
margin-right: 10px;
font-family: 'Genericons';
font-size: 1.538em;
line-height: 0;
vertical-align: middle;
}
.button-fuck-yeah:hover, .button-fuck-yeah:focus {
background: #0000e6;
border-color: #0000b3;
color: white;
}
.button-fuck-yeah:active {
background: #0000cc;
border-color: #0000b3;
color: white;
}
.button-fuck-yeah[disabled], .button-fuck-yeah:disabled {
color: #c7c7d1 !important;
background: #0000d6 !important;
border-color: #0000b3 !important;
}
.button-fuck-yeah:visited {
color: white;
}
@keyframes blink {
50% {
opacity: 1;
}
50.01% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes pulse {
0% {
opacity: .7;
transform: scale(0.9);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment