Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Element mixin
$white: #fff;
$black: #000;
$radius: 5px;
$sans: "Helvetica", sans-serif;
$default: #88a23d;
@mixin element-base {
@include background-clip;
@include transition(none);
@include appearance(none);
position: relative;
font-family: $sans;
font-weight: 600; }
%element-base {
@include element-base; }
@mixin element(
$main-color: #888,
$text-color: $white,
$radius: $radius,
$subtle: false,
$shadow: true,
$style: true,
$size: small,
$hover: false,
$font-size: false,
$display: inline-block) {
@if saturation($main-color) < 1% {
@if lightness($main-color) > 80% {
$text-color: #666; } }
@else {
$text-color: $text-color;
$text-color: rgba($text-color, .9); }
// normal state
$light-color: scale-color($main-color, $lightness: if-bright($main-color, 25%, 20%));
$dark-color: scale-color($main-color, $lightness: if-bright($main-color, -20%, -25%));
$shadow-color: scale-color($dark-color, $lightness: if-bright($main-color, -20%, -25%));
// hover state
$hover-main-color: scale-color($main-color, $lightness: 15%);
$hover-light-color: scale-color($light-color, $lightness: if-bright($main-color, 15%, 20%));
$hover-dark-color: scale-color($dark-color, $lightness: 15%);
$hover-shadow-color: $dark-color;
// active state
$active-main-color: $main-color;
$active-light-color: $light-color;
$active-dark-color: scale-color($dark-color, $lightness: -25%);
$active-shadow-color: scale-color($active-dark-color, $lightness: -25%);
@extend %element-base;
@if $display == block {
display: block; }
@else {
display: inline-block; }
@if $subtle == true {
color: $subtle-color; }
@else if $style == true {
color: $text-color; }
@if $size == xlarge {
padding: em($line, $base-font-size) em($line*3, $base-font-size);
@if $font-size == true {
font-size: 150%; } }
@else if $size == large {
padding: em($base-px*1.5, $base-font-size) em($line*2, $base-font-size);
@if $font-size == true {
font-size: 125%; } }
@else if $size == normal {
padding: em($base-px, $base-font-size) em($line*1.5, $base-font-size); }
@else if $size == small {
padding: em($base-px/1.3333333333, $base-font-size) em($line, $base-font-size);
@if $font-size == true {
font-size: 90%; } }
@else if $size == xsmall {
padding: em($base-px/2, $base-font-size) em($line/1.5, $base-font-size);
@if $font-size == true {
font-size: 80%; } }
@else if $size == xxsmall {
padding: em($base-px/4, $base-font-size) em($line/2, $base-font-size);
@if $font-size == true {
font-size: 80%; } }
@if $radius != none OR $radius == false {
@include border-radius($radius); }
// you may just want a button without style
// as sometimes you may just want a nice start
// padding, etc
@if $style == true {
// subtle start
@if $subtle == true {
@include box-shadow(inset 0 0 0 1px fade-out($subtle-color, 1));
.no-boxshadow & {
border: 1px solid transparent; }
.no-cssgradients & {
background: $active-main-color; } } // close $subtle true
// non subtle start
@else {
@include background(
linear-gradient(
rgba($main-color, .8) 10%,
rgba($dark-color, .8) 70%), $main-color);
@if $shadow == true {
@include box-shadow(
inset 0 0 0 1px $shadow-color,
inset 0 2px 0 $light-color,
inset 0 -1px 3px $dark-color,
inset -1px -3px 12px -3px rgba($shadow-color, .2),
inset 1px -3px 12px -3px rgba($shadow-color, .2),
0 1px 2px rgba($black, .2));
@if saturation($main-color) < 1% {
@if lightness($main-color) > 80% {
text-shadow: 0 1px 1px rgba($light-color, .6); }
@else {
text-shadow: 0 1px 1px rgba($active-dark-color, .6); } }
@else {
text-shadow: 0 1px 1px rgba($active-shadow-color, .6); } }
// modernizr stuff
.no-boxshadow & {
border: 1px solid $shadow-color; }
.no-cssgradients & {
background: $main-color; }
} // close else
@if $hover == true {
&:hover, &:focus {
color: $text-color;
@include background(
linear-gradient(
rgba($hover-main-color, .8) 0%,
rgba($hover-dark-color, .8) 60%), $hover-main-color);
@if $shadow == true {
@include box-shadow(
inset 0 0 0 1px $hover-shadow-color,
inset 0 2px 0 $hover-light-color,
inset 0 -1px 3px $hover-dark-color,
inset -1px -3px 12px -3px rgba($hover-shadow-color, .2),
inset 1px -3px 12px -3px rgba($hover-shadow-color, .2),
0 1px 2px rgba($black, .25));
@if saturation($main-color) < 1% {
@if lightness($main-color) > 80% {
text-shadow: 0 1px 1px rgba($hover-light-color, .6); }
@else {
text-shadow: 0 1px 1px rgba($hover-shadow-color, .6); } }
@else {
text-shadow: 0 1px 1px rgba($hover-shadow-color, .6); } }
// modernizr stuff
.no-boxshadow & {
border: 1px solid $hover-shadow-color; }
.no-cssgradients & {
background: $hover-main-color; } }
&:active {
color: $text-color;
@include background(
linear-gradient(
rgba($active-dark-color, .4),
rgba($main-color, .8)), $main-color);
@if $shadow == true {
@include box-shadow(
inset 0 1px 3px $active-shadow-color,
inset 0 1px 0 1px $active-dark-color,
inset 0 2px 3px $active-dark-color,
inset -1px -3px 12px -3px rgba($active-shadow-color, .2),
inset 1px -3px 12px -3px rgba($active-shadow-color, .2),
0 1px 1px rgba($white, .5));
@if saturation($main-color) < 1% {
@if lightness($main-color) > 80% {
text-shadow: 0 1px 1px rgba($active-light-color, .6); }
@else {
text-shadow: 0 1px 1px scale-color(rgba($active-shadow-color, .6), $lightness: -10%); } }
@else {
text-shadow: 0 1px 1px scale-color(rgba($active-shadow-color, .6), $lightness: -10%); } }
.no-boxshadow & {
border: 1px solid $active-shadow-color; }
.no-cssgradients & {
background: $active-main-color; } } }
} // close $style
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.