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