Created
July 16, 2014 15:02
-
-
Save alienresident/184c55d852ecbe81bb7c 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 class="button active">Submit</a> | |
<a class="button">Default</a> | |
<a class="button cancel">Cancel</a> | |
<a class="button active disabled">Submit</a> | |
<input type="button" disabled="disabled" value="Disabled"> | |
<input type="button" value="Enabled"> |
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.3.10) | |
// Compass (v1.0.0.alpha.20) | |
// Color Schemer (v0.2.8) | |
// Toolkit (v2.5.0) | |
// ---- | |
////////////////////////////// | |
// EXTENDABLES: For Base styles | |
////////////////////////////// | |
@import "compass"; | |
@import 'toolkit'; // tint-stack, shade-stack etc | |
@import 'color-schemer'; | |
// Example color scheme | |
$primary-color: #693 !default; | |
$grey-value: #333 !default; | |
$light-grey: tint-stack($grey-value); | |
$primary: tint-stack(cs-primary()); | |
$secondary: tint-stack(cs-secondary()); | |
$tertiary: tint-stack(cs-tertiary()); | |
$quadrary: tint-stack(cs-quadrary()); | |
$dark-grey: shade-stack(nth($light-grey, 2)); | |
$body-font-family: 'Helvetica Neue', Arial, sans-serif; | |
$secondary-font: $body-font-family; | |
$button-padding: 0.33em .66em; | |
$button-border-color: nth($light-grey, 3); | |
$button-border-radius: .1875em; | |
$button-color: nth($light-grey, 1); | |
$button-text-shadow: 0 -1px 0 rgba(#fff, 0); | |
$button-gradient-stop-1: nth($light-grey, 5); | |
$button-gradient-stop-2: shade($button-gradient-stop-1, 3%); | |
$button-hover-color: $button-color; | |
$button-hover-gradient-stop-1: $button-gradient-stop-1; | |
$button-hover-gradient-stop-2: tint($button-gradient-stop-1, 3%); | |
$button-active-color: $button-color; | |
$button-active-gradient-stop-1: shade($button-gradient-stop-1, 3%); | |
$button-active-gradient-stop-2: $button-gradient-stop-1; | |
$button-action-gradient-stop-1: #693; | |
$button-action-gradient-stop-2: shade($button-action-gradient-stop-1, 3%); | |
$button-action-hover-gradient-stop-1: $button-action-gradient-stop-1; | |
$button-action-hover-gradient-stop-2: tint($button-action-gradient-stop-1, 5%); | |
$button-action-active-gradient-stop-1: shade($button-action-gradient-stop-1, 5%); | |
$button-action-active-gradient-stop-2: $button-action-gradient-stop-1; | |
$button-cancel-gradient-stop-1: #d61e16; | |
$button-cancel-gradient-stop-2: shade($button-cancel-gradient-stop-1, 5%); | |
$button-cancel-hover-gradient-stop-1: $button-cancel-gradient-stop-1; | |
$button-cancel-hover-gradient-stop-2: tint($button-cancel-gradient-stop-1, 5%); | |
$button-cancel-active-gradient-stop-1: shade($button-cancel-gradient-stop-1, 5%); | |
$button-cancel-active-gradient-stop-2: $button-cancel-gradient-stop-1; | |
$button-gradient-pos: 45deg; | |
$button-hover-gradient-pos: $button-gradient-pos; | |
$button-active-gradient-pos: $button-gradient-pos; | |
$button-action-gradient-pos: $button-gradient-pos; | |
$button-action-hover-gradient-pos: $button-gradient-pos; | |
$button-action-active-gradient-pos: $button-gradient-pos; | |
$button-cancel-gradient-pos: $button-gradient-pos; | |
$button-cancel-hover-gradient-pos: $button-gradient-pos; | |
$button-cancel-active-gradient-pos: $button-gradient-pos; | |
$button-disabled-gradient-pos: $button-gradient-pos; | |
////////////////////////////// | |
// DEFAULT VARIABLES | |
////////////////////////////// | |
/// Buttons | |
$button-font-family: $secondary-font !default; | |
$button-padding: 0.5em 1em !default; | |
$button-border-width: 1px !default; | |
$button-border-style: solid !default; | |
$button-border-color: #666 !default; | |
$button-border-radius: 1em !default; | |
$button-color: #fff !default; | |
$button-text-shadow: 0 -1px 0 rgba(#fff, 0.25) !default; | |
$button-gradient-pos: top !default; | |
$button-gradient-stop-1: #47a !default; | |
$button-gradient-stop-2: #258 !default; | |
//// Hover & Focus | |
$button-hover-color: $button-color !default; | |
$button-hover-text-shadow: 0 -1px 0 rgba(#fff, 0.25) !default; | |
$button-hover-gradient-pos: $button-gradient-pos !default; | |
$button-hover-gradient-stop-1: #d04 !default; | |
$button-hover-gradient-stop-2: #b02 !default; | |
//// Active | |
$button-active-color: $button-color !default; | |
$button-active-text-shadow: -1px 0 0 rgba(#fff, 0.25) !default; | |
$button-active-gradient-pos: $button-gradient-pos !default; | |
$button-active-gradient-stop-1: #800 !default; | |
$button-active-gradient-stop-2: #a00 !default; | |
//// Action | |
$button-action-color: #fff !default; | |
$button-action-text-shadow: -1px -1px 0 rgba(#000, 0.25) !default; | |
$button-action-gradient-pos: $button-gradient-pos !default; | |
$button-action-gradient-stop-1: #007ae5 !default; | |
$button-action-gradient-stop-2: #005fb3 !default; | |
//// Action Hover & Focus | |
$button-action-hover-color: #fff !default; | |
$button-action-hover-text-shadow: -1px -1px 0 rgba(#000, 0.25) !default; | |
$button-action-hover-gradient-pos: $button-gradient-pos !default; | |
$button-action-hover-gradient-stop-1: #004480 !default; | |
$button-action-hover-gradient-stop-2: #004b8c !default; | |
//// Action Active | |
$button-action-active-color: #fff !default; | |
$button-action-active-text-shadow: -1px -1px 0 rgba(#000, 0.25) !default; | |
$button-action-active-gradient-pos: $button-gradient-pos !default; | |
$button-action-active-gradient-stop-1: #003059 !default; | |
$button-action-active-gradient-stop-2: #004b8c !default; | |
//// Cancel | |
$button-cancel-color: #fff !default; | |
$button-cancel-text-shadow: 0 -1px 0 rgba(#000, 0.25) !default; | |
$button-cancel-gradient-pos: $button-gradient-pos !default; | |
$button-cancel-gradient-stop-1: #ee5f5b !default; | |
$button-cancel-gradient-stop-2: #bd362f !default; | |
//// Cancel Hover & Focus | |
$button-cancel-hover-color: #fff !default; | |
$button-cancel-hover-text-shadow: -1px -1px 0 rgba(#000, 0.25) !default; | |
$button-cancel-hover-gradient-pos: $button-gradient-pos !default; | |
$button-cancel-hover-gradient-stop-1: #a32f29 !default; | |
$button-cancel-hover-gradient-stop-2: #d63e36 !default; | |
//// Cancel Active | |
$button-cancel-active-color: #fff !default; | |
$button-cancel-active-text-shadow: -1px -1px 0 rgba(#000, 0.25) !default; | |
$button-cancel-active-gradient-pos: $button-gradient-pos !default; | |
$button-cancel-active-gradient-stop-1: #7a231f !default; | |
$button-cancel-active-gradient-stop-2: #ad322b !default; | |
//// disabled | |
$button-disabled-color: #333 !default; | |
$button-disabled-opacity: .75 !default; | |
$button-disabled-text-shadow: 0 -1px 0 rgba(#000, 0.25) !default; | |
$button-disabled-gradient-pos: $button-gradient-pos !default; | |
$button-disabled-gradient-stop-1: #E6E6E6 !default; | |
$button-disabled-gradient-stop-2: #E6E6E6 !default; | |
@mixin simple-background-gradient($color, $background-gradient-pos, $background-gradient-1, $background-gradient-2) { | |
color: $color; | |
// provide background color for older IEs | |
background-color: background-color-mix($background-gradient-1, $background-gradient-2); | |
@include background-image(linear-gradient($background-gradient-pos, $background-gradient-1, $background-gradient-2)); | |
} | |
@mixin border-outline($type: border, $width: 1px, $style: solid, $color: #333, $offset: false) { | |
@include border-outline-check($type, $width, $style, $color, $offset); | |
@if $width == 'none' { | |
#{$type}: $width; | |
} @else if $width == false { | |
} @else { | |
#{$type}: { | |
width: $width; | |
style: $style; | |
color: $color; | |
@if $type == 'outline' and $offset { | |
offset: $offset; | |
} | |
} | |
} | |
} | |
@mixin border-outline-check($type, $width, $style, $color, $offset) { | |
@if $type == 'border' and $offset { | |
@warn "#{$type} does not use offset"; | |
} | |
@if $type == 'outline' { // wish this was cleaner! there's probably a better way to do this. | |
$widths: length($width); | |
$styles: length($style); | |
$colors: length($color); | |
$offsets: length($offset); | |
@if $widths > 1 or $styles > 1 or $colors > 1 or $offsets > 1 { | |
@warn "You cannot use mulitple values for #{$type} - only the first value will be used!"; | |
} | |
} | |
} | |
@mixin margin-padding($type, $amount: false, $side: false) { | |
@if $side { | |
#{$type}-#{$side}: $amount; | |
} @else { | |
#{$type}: $amount; | |
} | |
} | |
%btn-all { | |
width: auto; | |
text-align: center; | |
font-family: $button-font-family; | |
font-size: inherit; | |
font-weight: normal; | |
font-style: normal; | |
@include border-outline(border, $button-border-width, $button-border-style, $button-border-color); | |
cursor: pointer; | |
@include margin-padding(padding, $button-padding); | |
line-height: 1; | |
@include border-radius($button-border-radius); | |
} | |
%button { | |
@extend %btn-all; | |
@include simple-background-gradient($button-color, $button-gradient-pos, $button-gradient-stop-1, $button-gradient-stop-2); | |
@include text-shadow($button-text-shadow); | |
border-color: shade($button-gradient-stop-2, 15%); | |
&:hover, | |
&:focus { | |
@include text-shadow($button-hover-text-shadow); | |
@include simple-background-gradient($button-hover-color, $button-hover-gradient-pos, $button-hover-gradient-stop-1, $button-hover-gradient-stop-2); | |
} | |
&:active { | |
@include text-shadow($button-active-text-shadow); | |
@include simple-background-gradient($button-active-color, $button-active-gradient-pos, $button-active-gradient-stop-1, $button-active-gradient-stop-2); | |
} | |
} | |
%button-action { | |
@extend %btn-all; | |
@include text-shadow($button-action-text-shadow); | |
@include simple-background-gradient($button-action-color, $button-action-gradient-pos, $button-action-gradient-stop-1, $button-action-gradient-stop-2); | |
border-color: shade($button-action-gradient-stop-2, 15%); | |
&:hover, | |
&:focus { | |
@include text-shadow($button-action-hover-text-shadow); | |
@include simple-background-gradient($button-action-hover-color, $button-action-hover-gradient-pos, $button-action-hover-gradient-stop-1, $button-action-hover-gradient-stop-2); | |
} | |
&:active { | |
@include text-shadow($button-action-active-text-shadow); | |
@include simple-background-gradient($button-action-active-color, $button-action-active-gradient-pos, $button-action-active-gradient-stop-1, $button-action-active-gradient-stop-2); | |
} | |
} | |
%button-cancel { | |
@extend %btn-all; | |
@include text-shadow($button-cancel-text-shadow); | |
@include simple-background-gradient($button-cancel-color, $button-cancel-gradient-pos, $button-cancel-gradient-stop-1, $button-cancel-gradient-stop-2); | |
border-color: shade($button-cancel-gradient-stop-2, 15%); | |
&:hover, | |
&:focus { | |
@include text-shadow($button-cancel-hover-text-shadow); | |
@include simple-background-gradient($button-cancel-hover-color, $button-cancel-hover-gradient-pos, $button-cancel-hover-gradient-stop-1, $button-cancel-hover-gradient-stop-2); | |
} | |
&:active { | |
@include text-shadow($button-cancel-active-text-shadow); | |
@include simple-background-gradient($button-cancel-active-color, $button-cancel-active-gradient-pos, $button-cancel-active-gradient-stop-1, $button-cancel-active-gradient-stop-2); | |
} | |
} | |
%button-disabled { | |
@extend %btn-all; | |
@include text-shadow($button-disabled-text-shadow); | |
opacity: $button-disabled-opacity; | |
@include simple-background-gradient($button-disabled-color, $button-disabled-gradient-pos, $button-disabled-gradient-stop-1, $button-disabled-gradient-stop-2); | |
border-color: shade($button-disabled-gradient-stop-2, 15%); | |
// &:hover, | |
// &:focus, | |
// &:active { | |
// //@include text-shadow($button-disabled-text-shadow); | |
// //@extend %button-disabled; | |
// } | |
} | |
.button, | |
button, | |
input[type="button"], | |
input[type="submit"] { | |
@extend %button; | |
} | |
.button.active, | |
button.active, | |
input[type="button"].active, | |
input[type="submit"].active { | |
@extend %button-action; | |
} | |
.button.cancel, | |
input.cancel, | |
button.cancel, | |
input[type="button"][value*="Cancel"], | |
input[type="submit"][value*="Cancel"] { | |
@extend %button-cancel; | |
} | |
.button.disabled, | |
button[disabled="disabled"], | |
input[type="button"][disabled="disabled"], | |
input[type="submit"][disabled="disabled"], | |
.button.disabled.active, | |
button[disabled="disabled"].active, | |
input[type="button"][disabled="disabled"].active, | |
input[type="submit"][disabled="disabled"].active { | |
@extend %button-disabled; | |
} |
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
.button, | |
button, | |
input[type="button"], | |
input[type="submit"], .button.active, | |
button.active, | |
input[type="button"].active, | |
input[type="submit"].active, .button.cancel, | |
input.cancel, | |
button.cancel, | |
input[type="button"][value*="Cancel"], | |
input[type="submit"][value*="Cancel"], .button.disabled, | |
button[disabled="disabled"], | |
input[type="button"][disabled="disabled"], | |
input[type="submit"][disabled="disabled"], | |
.button.disabled.active, | |
button[disabled="disabled"].active, | |
input[type="button"][disabled="disabled"].active, | |
input[type="submit"][disabled="disabled"].active { | |
width: auto; | |
text-align: center; | |
font-family: "Helvetica Neue", Arial, sans-serif; | |
font-size: inherit; | |
font-weight: normal; | |
font-style: normal; | |
border-width: 1px; | |
border-style: solid; | |
border-color: #999999; | |
cursor: pointer; | |
padding: 0.33em 0.66em; | |
line-height: 1; | |
-moz-border-radius: 0.1875em; | |
-webkit-border-radius: 0.1875em; | |
border-radius: 0.1875em; | |
} | |
.button, | |
button, | |
input[type="button"], | |
input[type="submit"] { | |
color: #333333; | |
background-color: background-color-mix(#e0e0e0, #d9d9d9); | |
background-image: -moz-linear-gradient(45deg, #e0e0e0, #d9d9d9); | |
background-image: -webkit-linear-gradient(45deg, #e0e0e0, #d9d9d9); | |
background-image: linear-gradient(45deg, #e0e0e0, #d9d9d9); | |
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0); | |
border-color: #b8b8b8; | |
} | |
.button:hover, | |
button:hover, | |
input[type="button"]:hover, | |
input[type="submit"]:hover, .button:focus, | |
button:focus, | |
input[type="button"]:focus, | |
input[type="submit"]:focus { | |
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25); | |
color: #333333; | |
background-color: background-color-mix(#e0e0e0, #e0e0e0); | |
background-image: -moz-linear-gradient(45deg, #e0e0e0, #e0e0e0); | |
background-image: -webkit-linear-gradient(45deg, #e0e0e0, #e0e0e0); | |
background-image: linear-gradient(45deg, #e0e0e0, #e0e0e0); | |
} | |
.button:active, | |
button:active, | |
input[type="button"]:active, | |
input[type="submit"]:active { | |
text-shadow: -1px 0 0 rgba(255, 255, 255, 0.25); | |
color: #333333; | |
background-color: background-color-mix(#d9d9d9, #e0e0e0); | |
background-image: -moz-linear-gradient(45deg, #d9d9d9, #e0e0e0); | |
background-image: -webkit-linear-gradient(45deg, #d9d9d9, #e0e0e0); | |
background-image: linear-gradient(45deg, #d9d9d9, #e0e0e0); | |
} | |
.button.active, | |
button.active, | |
input[type="button"].active, | |
input[type="submit"].active { | |
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.25); | |
color: white; | |
background-color: background-color-mix(#669933, #629431); | |
background-image: -moz-linear-gradient(45deg, #669933, #629431); | |
background-image: -webkit-linear-gradient(45deg, #669933, #629431); | |
background-image: linear-gradient(45deg, #669933, #629431); | |
border-color: #537d29; | |
} | |
.button.active:hover, | |
button.active:hover, | |
input[type="button"].active:hover, | |
input[type="submit"].active:hover, .button.active:focus, | |
button.active:focus, | |
input[type="button"].active:focus, | |
input[type="submit"].active:focus { | |
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.25); | |
color: white; | |
background-color: background-color-mix(#669933, #6d9e3d); | |
background-image: -moz-linear-gradient(45deg, #669933, #6d9e3d); | |
background-image: -webkit-linear-gradient(45deg, #669933, #6d9e3d); | |
background-image: linear-gradient(45deg, #669933, #6d9e3d); | |
} | |
.button.active:active, | |
button.active:active, | |
input[type="button"].active:active, | |
input[type="submit"].active:active { | |
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.25); | |
color: white; | |
background-color: background-color-mix(#609130, #669933); | |
background-image: -moz-linear-gradient(45deg, #609130, #669933); | |
background-image: -webkit-linear-gradient(45deg, #609130, #669933); | |
background-image: linear-gradient(45deg, #609130, #669933); | |
} | |
.button.cancel, | |
input.cancel, | |
button.cancel, | |
input[type="button"][value*="Cancel"], | |
input[type="submit"][value*="Cancel"] { | |
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); | |
color: white; | |
background-color: background-color-mix(#d61e16, #cb1c14); | |
background-image: -moz-linear-gradient(45deg, #d61e16, #cb1c14); | |
background-image: -webkit-linear-gradient(45deg, #d61e16, #cb1c14); | |
background-image: linear-gradient(45deg, #d61e16, #cb1c14); | |
border-color: #ac1711; | |
} | |
.button.cancel:hover, | |
input.cancel:hover, | |
button.cancel:hover, | |
input[type="button"][value*="Cancel"]:hover, | |
input[type="submit"][value*="Cancel"]:hover, .button.cancel:focus, | |
input.cancel:focus, | |
button.cancel:focus, | |
input[type="button"][value*="Cancel"]:focus, | |
input[type="submit"][value*="Cancel"]:focus { | |
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.25); | |
color: white; | |
background-color: background-color-mix(#d61e16, #d82921); | |
background-image: -moz-linear-gradient(45deg, #d61e16, #d82921); | |
background-image: -webkit-linear-gradient(45deg, #d61e16, #d82921); | |
background-image: linear-gradient(45deg, #d61e16, #d82921); | |
} | |
.button.cancel:active, | |
input.cancel:active, | |
button.cancel:active, | |
input[type="button"][value*="Cancel"]:active, | |
input[type="submit"][value*="Cancel"]:active { | |
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.25); | |
color: white; | |
background-color: background-color-mix(#cb1c14, #d61e16); | |
background-image: -moz-linear-gradient(45deg, #cb1c14, #d61e16); | |
background-image: -webkit-linear-gradient(45deg, #cb1c14, #d61e16); | |
background-image: linear-gradient(45deg, #cb1c14, #d61e16); | |
} | |
.button.disabled, | |
button[disabled="disabled"], | |
input[type="button"][disabled="disabled"], | |
input[type="submit"][disabled="disabled"], | |
.button.disabled.active, | |
button[disabled="disabled"].active, | |
input[type="button"][disabled="disabled"].active, | |
input[type="submit"][disabled="disabled"].active { | |
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); | |
opacity: 0.75; | |
color: #333333; | |
background-color: background-color-mix(#e6e6e6, #e6e6e6); | |
background-image: -moz-linear-gradient(45deg, #e6e6e6, #e6e6e6); | |
background-image: -webkit-linear-gradient(45deg, #e6e6e6, #e6e6e6); | |
background-image: linear-gradient(45deg, #e6e6e6, #e6e6e6); | |
border-color: #c3c3c3; | |
} |
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 class="button active">Submit</a> | |
<a class="button">Default</a> | |
<a class="button cancel">Cancel</a> | |
<a class="button active disabled">Submit</a> | |
<input type="button" disabled="disabled" value="Disabled"> | |
<input type="button" value="Enabled"> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment