|
// ---- |
|
// Sass (v3.4.11) |
|
// Compass (v1.0.3) |
|
// ---- |
|
|
|
// |
|
// autoprefixer @mixin |
|
// |
|
|
|
$prefixes: |
|
"-webkit-", |
|
"-moz-", |
|
"-ms-", |
|
"-o-", |
|
null; |
|
|
|
@mixin prefixer($property, $value...) { |
|
@each $prefix in $prefixes { |
|
#{$prefix}#{$property}: #{$value}; |
|
} |
|
} |
|
|
|
// |
|
// .button variables |
|
// |
|
|
|
$button-font-family: "Arial", Helvetica Neue, Helvetica, sans-serif !default; |
|
$button-font-size: 14px !default; |
|
$button-line-height: 1.4 !default; |
|
$button-font-weight: 400 !default; |
|
|
|
$button-margin: 0 0 20px 0 !default; |
|
$button-padding-vertical: 5px !default; |
|
$button-padding-horizontal: 10px !default; |
|
|
|
$button-font-color: #fff !default; |
|
$button-font-color-alt: #333 !default; |
|
$button-font-color-hover: $button-font-color !default; |
|
$button-font-color-hover-alt: $button-font-color-alt !default; |
|
$button-bg-color: #fff !default; |
|
$button-border-color: darken(#f2f2f2, 10%) !default; |
|
$button-border-radius: 4px !default; |
|
|
|
$button-adjust: true !default; |
|
$button-block-availability: true !default; |
|
|
|
// |
|
// .button @mixins |
|
// |
|
|
|
@mixin button-size( |
|
$padding-vertical: $button-padding-vertical, |
|
$padding-horizontal: $button-padding-horizontal, |
|
$font-size: $button-font-size, |
|
$line-height: $button-line-height) { |
|
|
|
padding: $padding-vertical $padding-horizontal; |
|
font-size: $font-size; |
|
line-height: $line-height; |
|
} |
|
|
|
@mixin button-style( |
|
$font-color: $button-font-color, |
|
$font-color-alt: $button-font-color-alt, |
|
$font-color-hover: $button-font-color-hover, |
|
$font-color-hover-alt: $button-font-color-hover-alt, |
|
$bg-color: $button-bg-color, |
|
$adjust: $button-adjust, |
|
$border-color: $button-border-color ) { |
|
|
|
background-color: $bg-color; |
|
@if $adjust { |
|
color: if( lightness($bg-color) > 70%, $font-color-alt, $font-color); |
|
border-color: darken($bg-color, 15%); |
|
} @else { |
|
color: $font-color; |
|
border-color: $border-color; |
|
} |
|
|
|
&:hover, &:focus, &:active { |
|
background-color: darken($bg-color, 10%); |
|
|
|
@if $adjust { color: if( lightness($bg-color) > 70%, $font-color-hover-alt, $font-color-hover); } |
|
@else { color: $font-color-hover; } |
|
|
|
border-color: darken($bg-color, 15%); |
|
} |
|
} |
|
|
|
@mixin button-base( |
|
$font-family: $button-font-family, |
|
$font-weight: $button-font-weight, |
|
$margin: $button-margin, |
|
$border-radius: $button-border-radius, |
|
$block: $button-block-availability) { |
|
|
|
@include button-size(); |
|
display: inline-block; |
|
font-family: $button-font-family; |
|
margin: $button-margin; |
|
font-weight: $button-font-weight; |
|
text-align: center; |
|
vertical-align: middle; |
|
touch-action: manipulation; |
|
cursor: pointer; |
|
background-image: none; |
|
border: 1px solid transparent; |
|
white-space: nowrap; |
|
@include prefixer("transition", all .35s ease); |
|
|
|
@if $border-radius { |
|
&.radius { @include prefixer("border-radius", $border-radius); } |
|
} |
|
|
|
@if $block { |
|
&.button-block { |
|
display: block; |
|
width: 100%; |
|
} |
|
} |
|
} |
|
|
|
@mixin button() { |
|
@include button-base($block: true); |
|
// .button sizes |
|
&.small { @include button-size($padding-vertical: 5px, $padding-horizontal: 10px, $font-size: 14px, $line-height: 1.2); } |
|
&.medium { @include button-size($padding-vertical: 7.5px, $padding-horizontal: 12.5px, $font-size: 16px, $line-height: 1.4); } |
|
&.large { @include button-size($padding-vertical: 9.5px, $padding-horizontal: 14.5px, $font-size: 18px, $line-height: 1.4); } |
|
|
|
// .button colors |
|
&.default { @include button-style($font-color: #fff, $font-color-hover: #fff, $bg-color: #b3b3b3, $border-color: #a5a5a5, $adjust: false); } |
|
&.primary { @include button-style($bg-color: #84b8de, $border-color: #75a9d0); } |
|
} |
|
.button { |
|
@include button(); |
|
} |
Codepen.io
http://codepen.io/anon/pen/avNBRm?editors=101