UNPKG

2.23 kBSCSSView Raw
1//
2// Base styles
3//
4
5.btn {
6 display: inline-block;
7 font-family: $btn-font-family;
8 font-weight: $btn-font-weight;
9 line-height: $btn-line-height;
10 color: $body-color;
11 text-align: center;
12 text-decoration: if($link-decoration == none, null, none);
13 white-space: $btn-white-space;
14 vertical-align: middle;
15 cursor: if($enable-button-pointers, pointer, null);
16 user-select: none;
17 background-color: transparent;
18 border: $btn-border-width solid transparent;
19 @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
20 @include transition($btn-transition);
21
22 &:hover {
23 color: $body-color;
24 text-decoration: if($link-hover-decoration == underline, none, null);
25 }
26
27 .btn-check:focus + &,
28 &:focus {
29 outline: 0;
30 box-shadow: $btn-focus-box-shadow;
31 }
32
33 .btn-check:checked + &,
34 .btn-check:active + &,
35 &:active,
36 &.active {
37 @include box-shadow($btn-active-box-shadow);
38
39 &:focus {
40 @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
41 }
42 }
43
44 &:disabled,
45 &.disabled,
46 fieldset:disabled & {
47 pointer-events: none;
48 opacity: $btn-disabled-opacity;
49 @include box-shadow(none);
50 }
51}
52
53
54//
55// Alternate buttons
56//
57
58// scss-docs-start btn-variant-loops
59@each $color, $value in $theme-colors {
60 .btn-#{$color} {
61 @include button-variant($value, $value);
62 }
63}
64
65@each $color, $value in $theme-colors {
66 .btn-outline-#{$color} {
67 @include button-outline-variant($value);
68 }
69}
70// scss-docs-end btn-variant-loops
71
72
73//
74// Link buttons
75//
76
77// Make a button look and behave like a link
78.btn-link {
79 font-weight: $font-weight-normal;
80 color: $btn-link-color;
81 text-decoration: $link-decoration;
82
83 &:hover {
84 color: $btn-link-hover-color;
85 text-decoration: $link-hover-decoration;
86 }
87
88 &:focus {
89 text-decoration: $link-hover-decoration;
90 }
91
92 &:disabled,
93 &.disabled {
94 color: $btn-link-disabled-color;
95 }
96
97 // No need for an active state here
98}
99
100
101//
102// Button Sizes
103//
104
105.btn-lg {
106 @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
107}
108
109.btn-sm {
110 @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
111}