1 | // stylelint-disable selector-no-qualifying-type
|
---|
2 |
|
---|
3 | //
|
---|
4 | // Buttons
|
---|
5 | // --------------------------------------------------
|
---|
6 |
|
---|
7 |
|
---|
8 | // Base styles
|
---|
9 | // --------------------------------------------------
|
---|
10 |
|
---|
11 | .btn {
|
---|
12 | display: inline-block;
|
---|
13 | margin-bottom: 0; // For input.btn
|
---|
14 | font-weight: @btn-font-weight;
|
---|
15 | text-align: center;
|
---|
16 | white-space: nowrap;
|
---|
17 | vertical-align: middle;
|
---|
18 | touch-action: manipulation;
|
---|
19 | cursor: pointer;
|
---|
20 | background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
|
---|
21 | border: 1px solid transparent;
|
---|
22 | .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base);
|
---|
23 | .user-select(none);
|
---|
24 |
|
---|
25 | &,
|
---|
26 | &:active,
|
---|
27 | &.active {
|
---|
28 | &:focus,
|
---|
29 | &.focus {
|
---|
30 | .tab-focus();
|
---|
31 | }
|
---|
32 | }
|
---|
33 |
|
---|
34 | &:hover,
|
---|
35 | &:focus,
|
---|
36 | &.focus {
|
---|
37 | color: @btn-default-color;
|
---|
38 | text-decoration: none;
|
---|
39 | }
|
---|
40 |
|
---|
41 | &:active,
|
---|
42 | &.active {
|
---|
43 | background-image: none;
|
---|
44 | outline: 0;
|
---|
45 | .box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
|
---|
46 | }
|
---|
47 |
|
---|
48 | &.disabled,
|
---|
49 | &[disabled],
|
---|
50 | fieldset[disabled] & {
|
---|
51 | cursor: @cursor-disabled;
|
---|
52 | .opacity(.65);
|
---|
53 | .box-shadow(none);
|
---|
54 | }
|
---|
55 |
|
---|
56 | a& {
|
---|
57 | &.disabled,
|
---|
58 | fieldset[disabled] & {
|
---|
59 | pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
|
---|
60 | }
|
---|
61 | }
|
---|
62 | }
|
---|
63 |
|
---|
64 |
|
---|
65 | // Alternate buttons
|
---|
66 | // --------------------------------------------------
|
---|
67 |
|
---|
68 | .btn-default {
|
---|
69 | .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
|
---|
70 | }
|
---|
71 | .btn-primary {
|
---|
72 | .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
|
---|
73 | }
|
---|
74 | // Success appears as green
|
---|
75 | .btn-success {
|
---|
76 | .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
|
---|
77 | }
|
---|
78 | // Info appears as blue-green
|
---|
79 | .btn-info {
|
---|
80 | .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
|
---|
81 | }
|
---|
82 | // Warning appears as orange
|
---|
83 | .btn-warning {
|
---|
84 | .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
|
---|
85 | }
|
---|
86 | // Danger and error appear as red
|
---|
87 | .btn-danger {
|
---|
88 | .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
|
---|
89 | }
|
---|
90 |
|
---|
91 |
|
---|
92 | // Link buttons
|
---|
93 | // -------------------------
|
---|
94 |
|
---|
95 | // Make a button look and behave like a link
|
---|
96 | .btn-link {
|
---|
97 | font-weight: 400;
|
---|
98 | color: @link-color;
|
---|
99 | border-radius: 0;
|
---|
100 |
|
---|
101 | &,
|
---|
102 | &:active,
|
---|
103 | &.active,
|
---|
104 | &[disabled],
|
---|
105 | fieldset[disabled] & {
|
---|
106 | background-color: transparent;
|
---|
107 | .box-shadow(none);
|
---|
108 | }
|
---|
109 | &,
|
---|
110 | &:hover,
|
---|
111 | &:focus,
|
---|
112 | &:active {
|
---|
113 | border-color: transparent;
|
---|
114 | }
|
---|
115 | &:hover,
|
---|
116 | &:focus {
|
---|
117 | color: @link-hover-color;
|
---|
118 | text-decoration: @link-hover-decoration;
|
---|
119 | background-color: transparent;
|
---|
120 | }
|
---|
121 | &[disabled],
|
---|
122 | fieldset[disabled] & {
|
---|
123 | &:hover,
|
---|
124 | &:focus {
|
---|
125 | color: @btn-link-disabled-color;
|
---|
126 | text-decoration: none;
|
---|
127 | }
|
---|
128 | }
|
---|
129 | }
|
---|
130 |
|
---|
131 |
|
---|
132 | // Button Sizes
|
---|
133 | // --------------------------------------------------
|
---|
134 |
|
---|
135 | .btn-lg {
|
---|
136 | // line-height: ensure even-numbered height of button next to large input
|
---|
137 | .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @btn-border-radius-large);
|
---|
138 | }
|
---|
139 | .btn-sm {
|
---|
140 | // line-height: ensure proper height of button next to small input
|
---|
141 | .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
|
---|
142 | }
|
---|
143 | .btn-xs {
|
---|
144 | .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
|
---|
145 | }
|
---|
146 |
|
---|
147 |
|
---|
148 | // Block button
|
---|
149 | // --------------------------------------------------
|
---|
150 |
|
---|
151 | .btn-block {
|
---|
152 | display: block;
|
---|
153 | width: 100%;
|
---|
154 | }
|
---|
155 |
|
---|
156 | // Vertically space out multiple block buttons
|
---|
157 | .btn-block + .btn-block {
|
---|
158 | margin-top: 5px;
|
---|
159 | }
|
---|
160 |
|
---|
161 | // Specificity overrides
|
---|
162 | input[type="submit"],
|
---|
163 | input[type="reset"],
|
---|
164 | input[type="button"] {
|
---|
165 | &.btn-block {
|
---|
166 | width: 100%;
|
---|
167 | }
|
---|
168 | }
|
---|