/*------------------------------------*\ $BUTTONS \*------------------------------------*/ /** * Basic button structural styling. * * Designed and built @kurenn */ .btn { display: inline-block; *display: inline; padding: 4px 12px; line-height: 20px; font-size: $base-font-size; color: $white; background-color: $inverse; cursor: pointer; text-align: center; vertical-align: middle; border: none; outline: none; @include single-transition(all, 0.3s, ease-in-out); @include border-radius(3px); font-weight: 300; margin: 5px 0; border: 1px solid darken($dark-inverse, 5%); &:hover, &:focus { zoom: 1; text-decoration: none; background: $dark-inverse; } &.btn-disabled, &[disabled] { cursor: no-drop; background-color: $dark-inverse; @include opacity(0.65); } &.active, &:active { outline: 0; } [class^="icon-"], [class*=" icon-"] { margin-right: 5px; } &.btn-alpha { border: 1px solid $white; background: rgba(0,0,0,0.0); &:hover { color: $inverse; background: $white; } } } /* Button colors definition */ /*---------------------------*/ @each $color in $colors { .btn-#{nth($color, 1)} { background-color: nth($color, 2); border: 1px solid darken(nth($color, 2), 5%); &:hover, &:focus { background-color: nth($color, 3); } &.btn-disabled, &[disabled] { background-color: nth($color, 2); } &.btn-alpha { color: $white; font-weight: 300; &:hover { color: nth($color, 3); } } } } /* Button sizes */ /*-----------------------------*/ .btn-large { padding: $padding-large; font-size: $font-size-large; } .btn-xlarge { padding: $padding-xlarge; font-size: $font-size-xlarge; } .btn-xxlarge { padding: $padding-xxlarge; font-size: $font-size-xlarge; } .btn-small { padding: $padding-small; font-size: $font-size-small; } .btn-mini { padding: $padding-mini; font-size: $font-size-mini; } .btn-block { display: block; width: 100%; padding-left: 0px; padding-right: 0px; } /* Vertical separation */ /*----------------------*/ .btn-block + .btn-block { margin-top: 5px; }