123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 |
- //
- // Base styles
- //
- .btn {
- display: inline-block;
- font-family: $btn-font-family;
- font-weight: $btn-font-weight;
- line-height: $btn-line-height;
- color: $body-color;
- text-align: center;
- text-decoration: if($link-decoration == none, null, none);
- white-space: $btn-white-space;
- vertical-align: middle;
- cursor: if($enable-button-pointers, pointer, null);
- user-select: none;
- background-color: transparent;
- border: $btn-border-width solid transparent;
- @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
- @include transition($btn-transition);
- &:hover {
- color: $body-color;
- text-decoration: if($link-hover-decoration == underline, none, null);
- }
- .btn-check:focus + &,
- &:focus {
- outline: 0;
- box-shadow: $btn-focus-box-shadow;
- }
- .btn-check:checked + &,
- .btn-check:active + &,
- &:active,
- &.active {
- @include box-shadow($btn-active-box-shadow);
- &:focus {
- @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
- }
- }
- &:disabled,
- &.disabled,
- fieldset:disabled & {
- pointer-events: none;
- opacity: $btn-disabled-opacity;
- @include box-shadow(none);
- }
- }
- //
- // Alternate buttons
- //
- // scss-docs-start btn-variant-loops
- @each $color, $value in $theme-colors {
- .btn-#{$color} {
- @include button-variant($value, $value);
- }
- }
- @each $color, $value in $theme-colors {
- .btn-outline-#{$color} {
- @include button-outline-variant($value);
- }
- }
- // scss-docs-end btn-variant-loops
- //
- // Link buttons
- //
- // Make a button look and behave like a link
- .btn-link {
- font-weight: $font-weight-normal;
- color: $btn-link-color;
- text-decoration: $link-decoration;
- &:hover {
- color: $btn-link-hover-color;
- text-decoration: $link-hover-decoration;
- }
- &:focus {
- text-decoration: $link-hover-decoration;
- }
- &:disabled,
- &.disabled {
- color: $btn-link-disabled-color;
- }
- // No need for an active state here
- }
- //
- // Button Sizes
- //
- .btn-lg {
- @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
- }
- .btn-sm {
- @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
- }
|