.btn { display: inline-block; font-weight: 400; color: $body-color; text-align: center; vertical-align: middle; user-select: none; background-color: transparent; border: 1px solid transparent; @include button-size( $input-btn-padding-y , $input-btn-padding-x, $input-btn-font-size, $input-btn-line-height, $input-btn-border-radius ); @include transition(); &:hover { color: $body-color; text-decoration: none; } &:focus, &.focus { outline: 0; box-shadow:none; } &.disabled, &:disabled { opacity: 0.4; box-shadow:none; } &:not(:disabled):not(.disabled) { cursor: pointer; } &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active { &:focus { } } } // Future-proof disabling of clicks on `` elements a.btn.disabled, fieldset:disabled a.btn { pointer-events: none; } @each $color, $value in $theme-colors { .btn-#{$color} { @include button-variant($value, $value); } } .btn-default { @include button-variant(#fff, #979797); } .btn-xs { @include button-size($input-btn-padding-y-xs, $input-btn-padding-x-xs, $input-btn-font-size-xs, $input-btn-line-height-xs, $input-btn-border-radius-xs); } .btn-lg { @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $input-btn-font-size-lg, $input-btn-line-height-lg, $input-btn-border-radius-lg); } .btn-sm { @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $input-btn-font-size-sm, $input-btn-line-height-sm, $input-btn-border-radius-sm); } .btn-block { display: block; width: 100%; + .btn-block { margin-top: 10px; } } // Specificity overrides input[type="submit"], input[type="reset"], input[type="button"] { &.btn-block { width: 100%; } } .btn-group { display:inline-block; position:relative; }