// // Buttons // —————————————-
.btn {
display: inline-block; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: $button-border-radius; font-size: $font-size-regular; // prevent font-size inherit in other modules / scopes line-height: $line-height-regular; // prevent line-height inherit in other modules / scopes padding: $button-padding; font-weight: normal; white-space: nowrap; background-image: none; text-decoration: none; @include transition(all $transition-time-out $transition-function); > .icon { margin-top: -1px; padding-right: $button-icon-indent; } > .icon-right { padding-left: $button-icon-indent; padding-right: 0; } &.focus, &:focus { color: $font-color-regular; text-decoration: none; @include tab-focus(); } &.hover, &:hover { text-decoration: none; @include transition($transition-time-in, '-duration'); } &.disabled, &[disabled] { cursor: not-allowed; background: hsv-lighten($color-element-background, 5%, true); border-color: hsv-lighten($color-element-border, 14%, true); color: hsv-lighten($font-color-regular, 50%, true); }
}
%btn-default, .btn-default {
@include button-variant($font-color-regular, $color-element-background, $button-border-color-default);
}
.btn-brand {
@include button-variant($color-bright, $color-brand, $button-border-color-brand);
}
.btn-positive {
@include button-variant($font-color-regular, $color-positive, $button-border-color-positive);
}
.btn-negative {
@include button-variant($color-bright, $color-negative, $button-border-color-negative);
}
.btn-clean {
@extend %btn-default; background-color: transparent; &, &.focus, &:focus, &.hover, &:hover, &.active, &:active { border-color: transparent; }
}
.btn-small {
font-size: $font-size-small; padding: $button-padding-small;
}
.btn-large {
font-size: $font-size-large; padding: $button-padding-large;
}
.btn-icon {
padding: $button-padding-minimal; .icon { padding: 0; }
}
.btn-minimal {
padding: $bu-padding-minimal;
}
.btn-block {
width: 100%;
}
.btn-sectioned {
display: block; @include clearfix(); > .btn, > .pager, > .pager + .pager { margin-left: -1px; margin-right: 0; float: left; position: relative; &:hover { z-index: 2; } &:focus, &:active { z-index: 3; } &:first-child { margin-left: 0; } &:not(:last-child) { @include border-right-radius(0); } &:not(:first-child) { @include border-left-radius(0); } }
}