|
1 /* ---------------------------------------------------------------------------- |
|
2 |
|
3 |
|
4 WordPress-style Buttons |
|
5 ======================= |
|
6 Create a button by adding the `.button` class to an element. For backwards |
|
7 compatibility, we support several other classes (such as `.button-secondary`), |
|
8 but these will *not* work with the stackable classes described below. |
|
9 |
|
10 Button Styles |
|
11 ------------- |
|
12 To display a primary button style, add the `.button-primary` class to a button. |
|
13 |
|
14 Button Sizes |
|
15 ------------ |
|
16 Adjust a button's size by adding the `.button-large` or `.button-small` class. |
|
17 |
|
18 Button States |
|
19 ------------- |
|
20 Lock the state of a button by adding the name of the pseudoclass as |
|
21 an actual class (e.g. `.hover` for `:hover`). |
|
22 |
|
23 |
|
24 TABLE OF CONTENTS: |
|
25 ------------------ |
|
26 1.0 - Button Layouts |
|
27 2.0 - Default Button Style |
|
28 3.0 - Primary Button Style |
|
29 4.0 - Button Groups |
|
30 |
|
31 ---------------------------------------------------------------------------- */ |
|
32 |
|
33 /* ---------------------------------------------------------------------------- |
|
34 1.0 - Button Layouts |
|
35 ---------------------------------------------------------------------------- */ |
|
36 |
|
37 .wp-core-ui .button, |
|
38 .wp-core-ui .button-primary, |
|
39 .wp-core-ui .button-secondary { |
|
40 display: inline-block; |
|
41 text-decoration: none; |
|
42 font-size: 12px; |
|
43 line-height: 23px; |
|
44 height: 24px; |
|
45 margin: 0; |
|
46 padding: 0 10px 1px; |
|
47 cursor: pointer; |
|
48 border-width: 1px; |
|
49 border-style: solid; |
|
50 -webkit-border-radius: 3px; |
|
51 -webkit-appearance: none; |
|
52 border-radius: 3px; |
|
53 white-space: nowrap; |
|
54 -webkit-box-sizing: border-box; |
|
55 -moz-box-sizing: border-box; |
|
56 box-sizing: border-box; |
|
57 } |
|
58 |
|
59 /* Remove the dotted border on :focus and the extra padding in Firefox */ |
|
60 .wp-core-ui button::-moz-focus-inner, |
|
61 .wp-core-ui input[type="reset"]::-moz-focus-inner, |
|
62 .wp-core-ui input[type="button"]::-moz-focus-inner, |
|
63 .wp-core-ui input[type="submit"]::-moz-focus-inner { |
|
64 border-width: 1px 0; |
|
65 border-style: solid none; |
|
66 border-color: transparent; |
|
67 padding: 0; |
|
68 } |
|
69 |
|
70 .wp-core-ui .button.button-large, |
|
71 .wp-core-ui .button-group.button-large .button { |
|
72 height: 30px; |
|
73 line-height: 28px; |
|
74 padding: 0 12px 2px; |
|
75 } |
|
76 |
|
77 .wp-core-ui .button.button-small, |
|
78 .wp-core-ui .button-group.button-small .button { |
|
79 height: 21px; |
|
80 line-height: 20px; |
|
81 padding: 0 8px 1px; |
|
82 } |
|
83 |
|
84 .wp-core-ui .button.button-hero, |
|
85 .wp-core-ui .button-group.button-hero .button { |
|
86 font-size: 14px; |
|
87 height: 46px; |
|
88 line-height: 44px; |
|
89 padding: 0 36px; |
|
90 } |
|
91 |
|
92 .wp-core-ui .button:active { |
|
93 outline: none; |
|
94 } |
|
95 |
|
96 .wp-core-ui .button.hidden { |
|
97 display: none; |
|
98 } |
|
99 |
|
100 /* ---------------------------------------------------------------------------- |
|
101 2.0 - Default Button Style |
|
102 ---------------------------------------------------------------------------- */ |
|
103 |
|
104 .wp-core-ui .button, |
|
105 .wp-core-ui .button-secondary { |
|
106 background: #f3f3f3; |
|
107 background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4)); |
|
108 background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4); |
|
109 background-image: -moz-linear-gradient(top, #fefefe, #f4f4f4); |
|
110 background-image: -o-linear-gradient(top, #fefefe, #f4f4f4); |
|
111 background-image: linear-gradient(to bottom, #fefefe, #f4f4f4); |
|
112 border-color: #bbb; |
|
113 color: #333; |
|
114 text-shadow: 0 1px 0 #fff; |
|
115 } |
|
116 |
|
117 .wp-core-ui .button.hover, |
|
118 .wp-core-ui .button:hover, |
|
119 .wp-core-ui .button-secondary:hover, |
|
120 .wp-core-ui .button.focus, |
|
121 .wp-core-ui .button:focus, |
|
122 .wp-core-ui .button-secondary:focus { |
|
123 background: #f3f3f3; |
|
124 background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3)); |
|
125 background-image: -webkit-linear-gradient(top, #fff, #f3f3f3); |
|
126 background-image: -moz-linear-gradient(top, #fff, #f3f3f3); |
|
127 background-image: -ms-linear-gradient(top, #fff, #f3f3f3); |
|
128 background-image: -o-linear-gradient(top, #fff, #f3f3f3); |
|
129 background-image: linear-gradient(to bottom, #fff, #f3f3f3); |
|
130 border-color: #999; |
|
131 color: #222; |
|
132 } |
|
133 |
|
134 .wp-core-ui .button.focus, |
|
135 .wp-core-ui .button:focus, |
|
136 .wp-core-ui .button-secondary:focus { |
|
137 -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2); |
|
138 box-shadow: 1px 1px 1px rgba(0,0,0,.2); |
|
139 } |
|
140 |
|
141 .wp-core-ui .button.active, |
|
142 .wp-core-ui .button.active:hover, |
|
143 .wp-core-ui .button.active:focus, |
|
144 .wp-core-ui .button:active, |
|
145 .wp-core-ui .button-secondary:active { |
|
146 background: #eee; |
|
147 background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#fefefe)); |
|
148 background-image: -webkit-linear-gradient(top, #f4f4f4, #fefefe); |
|
149 background-image: -moz-linear-gradient(top, #f4f4f4, #fefefe); |
|
150 background-image: -ms-linear-gradient(top, #f4f4f4, #fefefe); |
|
151 background-image: -o-linear-gradient(top, #f4f4f4, #fefefe); |
|
152 background-image: linear-gradient(to bottom, #f4f4f4, #fefefe); |
|
153 border-color: #999; |
|
154 color: #333; |
|
155 text-shadow: 0 -1px 0 #fff; |
|
156 -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); |
|
157 box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); |
|
158 } |
|
159 |
|
160 .wp-core-ui .button[disabled], |
|
161 .wp-core-ui .button:disabled, |
|
162 .wp-core-ui .button-secondary[disabled], |
|
163 .wp-core-ui .button-secondary:disabled, |
|
164 .wp-core-ui .button-disabled { |
|
165 color: #aaa !important; |
|
166 border-color: #ddd !important; |
|
167 background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f4f4f4)) !important; |
|
168 background-image: -webkit-linear-gradient(top, #f9f9f9, #f4f4f4) !important; |
|
169 background-image: -moz-linear-gradient(top, #f9f9f9, #f4f4f4) !important; |
|
170 background-image: -ms-linear-gradient(top, #f9f9f9, #f4f4f4) !important; |
|
171 background-image: -o-linear-gradient(top, #f9f9f9, #f4f4f4) !important; |
|
172 background-image: linear-gradient(to bottom, #f9f9f9, #f4f4f4) !important; |
|
173 -webkit-box-shadow: none !important; |
|
174 box-shadow: none !important; |
|
175 text-shadow: 0 1px 0 #fff !important; |
|
176 cursor: default; |
|
177 } |
|
178 |
|
179 /* ---------------------------------------------------------------------------- |
|
180 3.0 - Primary Button Style |
|
181 ---------------------------------------------------------------------------- */ |
|
182 |
|
183 .wp-core-ui .button-primary { |
|
184 background-color: #21759b; |
|
185 background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b)); |
|
186 background-image: -webkit-linear-gradient(top, #2a95c5, #21759b); |
|
187 background-image: -moz-linear-gradient(top, #2a95c5, #21759b); |
|
188 background-image: -ms-linear-gradient(top, #2a95c5, #21759b); |
|
189 background-image: -o-linear-gradient(top, #2a95c5, #21759b); |
|
190 background-image: linear-gradient(to bottom, #2a95c5, #21759b); |
|
191 border-color: #21759b; |
|
192 border-bottom-color: #1e6a8d; |
|
193 -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5); |
|
194 box-shadow: inset 0 1px 0 rgba(120,200,230,0.5); |
|
195 color: #fff; |
|
196 text-decoration: none; |
|
197 text-shadow: 0 1px 0 rgba(0,0,0,0.1); |
|
198 } |
|
199 |
|
200 .wp-core-ui .button-primary.hover, |
|
201 .wp-core-ui .button-primary:hover, |
|
202 .wp-core-ui .button-primary.focus, |
|
203 .wp-core-ui .button-primary:focus { |
|
204 background-color: #278ab7; |
|
205 background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b)); |
|
206 background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b); |
|
207 background-image: -moz-linear-gradient(top, #2e9fd2, #21759b); |
|
208 background-image: -ms-linear-gradient(top, #2e9fd2, #21759b); |
|
209 background-image: -o-linear-gradient(top, #2e9fd2, #21759b); |
|
210 background-image: linear-gradient(to bottom, #2e9fd2, #21759b); |
|
211 border-color: #1b607f; |
|
212 -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6); |
|
213 box-shadow: inset 0 1px 0 rgba(120,200,230,0.6); |
|
214 color: #fff; |
|
215 text-shadow: 0 -1px 0 rgba(0,0,0,0.3); |
|
216 } |
|
217 |
|
218 .wp-core-ui .button-primary.focus, |
|
219 .wp-core-ui .button-primary:focus { |
|
220 border-color: #0e3950; |
|
221 -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4); |
|
222 box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4); |
|
223 } |
|
224 |
|
225 .wp-core-ui .button-primary.active, |
|
226 .wp-core-ui .button-primary.active:hover, |
|
227 .wp-core-ui .button-primary.active:focus, |
|
228 .wp-core-ui .button-primary:active { |
|
229 background: #1b607f; |
|
230 background-image: -webkit-gradient(linear, left top, left bottom, from(#21759b), to(#278ab7)); |
|
231 background-image: -webkit-linear-gradient(top, #21759b, #278ab7); |
|
232 background-image: -moz-linear-gradient(top, #21759b, #278ab7); |
|
233 background-image: -ms-linear-gradient(top, #21759b, #278ab7); |
|
234 background-image: -o-linear-gradient(top, #21759b, #278ab7); |
|
235 background-image: linear-gradient(to bottom, #21759b, #278ab7); |
|
236 border-color: #124560 #2382ae #2382ae #2382ae; |
|
237 color: rgba(255,255,255,0.95); |
|
238 -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); |
|
239 box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); |
|
240 text-shadow: 0 1px 0 rgba(0,0,0,0.1); |
|
241 } |
|
242 |
|
243 .wp-core-ui .button-primary[disabled], |
|
244 .wp-core-ui .button-primary:disabled, |
|
245 .wp-core-ui .button-primary-disabled { |
|
246 color: #94cde7 !important; |
|
247 background: #298cba !important; |
|
248 border-color: #1b607f !important; |
|
249 -webkit-box-shadow: none !important; |
|
250 box-shadow: none !important; |
|
251 text-shadow: 0 -1px 0 rgba(0,0,0,0.1) !important; |
|
252 cursor: default; |
|
253 } |
|
254 |
|
255 /* ---------------------------------------------------------------------------- |
|
256 4.0 - Button Groups |
|
257 ---------------------------------------------------------------------------- */ |
|
258 |
|
259 .wp-core-ui .button-group { |
|
260 position: relative; |
|
261 display: inline-block; |
|
262 white-space: nowrap; |
|
263 font-size: 0; |
|
264 vertical-align: middle; |
|
265 } |
|
266 |
|
267 .wp-core-ui .button-group > .button { |
|
268 display: inline-block; |
|
269 border-radius: 0; |
|
270 margin-right: -1px; |
|
271 z-index: 10; |
|
272 } |
|
273 |
|
274 .wp-core-ui .button-group > .button-primary { |
|
275 z-index: 100; |
|
276 } |
|
277 |
|
278 .wp-core-ui .button-group > .button:hover { |
|
279 z-index: 20; |
|
280 } |
|
281 |
|
282 .wp-core-ui .button-group > .button:first-child { |
|
283 border-radius: 3px 0 0 3px; |
|
284 } |
|
285 |
|
286 .wp-core-ui .button-group > .button:last-child { |
|
287 border-radius: 0 3px 3px 0; |
|
288 } |