|
0
|
1 // scss-lint:disable QualifyingElement
|
|
|
2
|
|
|
3 //
|
|
|
4 // Base styles
|
|
|
5 //
|
|
|
6
|
|
|
7 .btn {
|
|
|
8 display: inline-block;
|
|
|
9 font-weight: $btn-font-weight;
|
|
|
10 text-align: center;
|
|
|
11 white-space: nowrap;
|
|
|
12 vertical-align: middle;
|
|
|
13 user-select: none;
|
|
|
14 border: $input-btn-border-width solid transparent;
|
|
|
15 @include button-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $input-btn-line-height, $btn-border-radius);
|
|
|
16 @include transition($btn-transition);
|
|
|
17
|
|
|
18 // Share hover and focus styles
|
|
|
19 @include hover-focus {
|
|
|
20 text-decoration: none;
|
|
|
21 }
|
|
|
22 &:focus,
|
|
|
23 &.focus {
|
|
|
24 outline: 0;
|
|
|
25 box-shadow: $btn-focus-box-shadow;
|
|
|
26 }
|
|
|
27
|
|
|
28 // Disabled comes first so active can properly restyle
|
|
|
29 &.disabled,
|
|
|
30 &:disabled {
|
|
|
31 opacity: .65;
|
|
|
32 @include box-shadow(none);
|
|
|
33 }
|
|
|
34
|
|
|
35 &:active,
|
|
|
36 &.active {
|
|
|
37 background-image: none;
|
|
|
38 @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
|
|
|
39 }
|
|
|
40 }
|
|
|
41
|
|
|
42 // Future-proof disabling of clicks on `<a>` elements
|
|
|
43 a.btn.disabled,
|
|
|
44 fieldset[disabled] a.btn {
|
|
|
45 pointer-events: none;
|
|
|
46 }
|
|
|
47
|
|
|
48
|
|
|
49 //
|
|
|
50 // Alternate buttons
|
|
|
51 //
|
|
|
52
|
|
|
53 @each $color, $value in $theme-colors {
|
|
|
54 .btn-#{$color} {
|
|
|
55 @include button-variant($value, $value);
|
|
|
56 }
|
|
|
57 }
|
|
|
58
|
|
|
59 @each $color, $value in $theme-colors {
|
|
|
60 .btn-outline-#{$color} {
|
|
|
61 @include button-outline-variant($value, #fff);
|
|
|
62 }
|
|
|
63 }
|
|
|
64
|
|
|
65
|
|
|
66 //
|
|
|
67 // Link buttons
|
|
|
68 //
|
|
|
69
|
|
|
70 // Make a button look and behave like a link
|
|
|
71 .btn-link {
|
|
|
72 font-weight: $font-weight-normal;
|
|
|
73 color: $link-color;
|
|
|
74 border-radius: 0;
|
|
|
75
|
|
|
76 &,
|
|
|
77 &:active,
|
|
|
78 &.active,
|
|
|
79 &:disabled {
|
|
|
80 background-color: transparent;
|
|
|
81 @include box-shadow(none);
|
|
|
82 }
|
|
|
83 &,
|
|
|
84 &:focus,
|
|
|
85 &:active {
|
|
|
86 border-color: transparent;
|
|
|
87 box-shadow: none;
|
|
|
88 }
|
|
|
89 @include hover {
|
|
|
90 border-color: transparent;
|
|
|
91 }
|
|
|
92 @include hover-focus {
|
|
|
93 color: $link-hover-color;
|
|
|
94 text-decoration: $link-hover-decoration;
|
|
|
95 background-color: transparent;
|
|
|
96 }
|
|
|
97 &:disabled {
|
|
|
98 color: $btn-link-disabled-color;
|
|
|
99
|
|
|
100 @include hover-focus {
|
|
|
101 text-decoration: none;
|
|
|
102 }
|
|
|
103 }
|
|
|
104 }
|
|
|
105
|
|
|
106
|
|
|
107 //
|
|
|
108 // Button Sizes
|
|
|
109 //
|
|
|
110
|
|
|
111 .btn-lg {
|
|
|
112 @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
|
|
|
113 }
|
|
|
114
|
|
|
115 .btn-sm {
|
|
|
116 @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
|
|
|
117 }
|
|
|
118
|
|
|
119
|
|
|
120 //
|
|
|
121 // Block button
|
|
|
122 //
|
|
|
123
|
|
|
124 .btn-block {
|
|
|
125 display: block;
|
|
|
126 width: 100%;
|
|
|
127 }
|
|
|
128
|
|
|
129 // Vertically space out multiple block buttons
|
|
|
130 .btn-block + .btn-block {
|
|
|
131 margin-top: $btn-block-spacing-y;
|
|
|
132 }
|
|
|
133
|
|
|
134 // Specificity overrides
|
|
|
135 input[type="submit"],
|
|
|
136 input[type="reset"],
|
|
|
137 input[type="button"] {
|
|
|
138 &.btn-block {
|
|
|
139 width: 100%;
|
|
|
140 }
|
|
|
141 }
|
