1/* ----------------------------------------------------------------------------
2
3NOTE: If you edit this file, you should make sure that the CSS rules for
4buttons in the following files are updated.
5
6* jquery-ui-dialog.css
7* editor.css
8
9WordPress-style Buttons
10=======================
11Create a button by adding the `.button` class to an element. For backward
12compatibility, we support several other classes (such as `.button-secondary`),
13but these will *not* work with the stackable classes described below.
14
15Button Styles
16-------------
17To display a primary button style, add the `.button-primary` class to a button.
18
19Button Sizes
20------------
21Adjust a button's size by adding the `.button-large` or `.button-small` class.
22
23Button States
24-------------
25Lock the state of a button by adding the name of the pseudoclass as
26an actual class (e.g. `.hover` for `:hover`).
27
28
29TABLE OF CONTENTS:
30------------------
31 1.0 - Button Layouts
32 2.0 - Default Button Style
33 3.0 - Primary Button Style
34 4.0 - Button Groups
35 5.0 - Responsive Button Styles
36
37---------------------------------------------------------------------------- */
38
39/* ----------------------------------------------------------------------------
40 1.0 - Button Layouts
41---------------------------------------------------------------------------- */
42
43.wp-core-ui .button,
44.wp-core-ui .button-primary,
45.wp-core-ui .button-secondary {
46 display: inline-block;
47 text-decoration: none;
48 font-size: 13px;
49 line-height: 2.15384615; /* 28px */
50 min-height: 30px;
51 margin: 0;
52 padding: 0 10px;
53 cursor: pointer;
54 border-width: 1px;
55 border-style: solid;
56 -webkit-appearance: none;
57 border-radius: 3px;
58 white-space: nowrap;
59 box-sizing: border-box;
60}
61
62/* Remove the dotted border on :focus and the extra padding in Firefox */
63.wp-core-ui button::-moz-focus-inner,
64.wp-core-ui input[type="reset"]::-moz-focus-inner,
65.wp-core-ui input[type="button"]::-moz-focus-inner,
66.wp-core-ui input[type="submit"]::-moz-focus-inner {
67 border-width: 0;
68 border-style: none;
69 padding: 0;
70}
71
72.wp-core-ui .button.button-large,
73.wp-core-ui .button-group.button-large .button {
74 min-height: 32px;
75 line-height: 2.30769231; /* 30px */
76 padding: 0 12px;
77}
78
79.wp-core-ui .button.button-small,
80.wp-core-ui .button-group.button-small .button {
81 min-height: 26px;
82 line-height: 2.18181818; /* 24px */
83 padding: 0 8px;
84 font-size: 11px;
85}
86
87.wp-core-ui .button.button-hero,
88.wp-core-ui .button-group.button-hero .button {
89 font-size: 14px;
90 min-height: 46px;
91 line-height: 3.14285714;
92 padding: 0 36px;
93}
94
95.wp-core-ui .button.hidden {
96 display: none;
97}
98
99/* Style Reset buttons as simple text links */
100
101.wp-core-ui input[type="reset"],
102.wp-core-ui input[type="reset"]:hover,
103.wp-core-ui input[type="reset"]:active,
104.wp-core-ui input[type="reset"]:focus {
105 background: none;
106 border: none;
107 box-shadow: none;
108 padding: 0 2px 1px;
109 width: auto;
110}
111
112/* ----------------------------------------------------------------------------
113 2.0 - Default Button Style
114---------------------------------------------------------------------------- */
115
116.wp-core-ui .button,
117.wp-core-ui .button-secondary {
118 color: #2271b1;
119 border-color: #2271b1;
120 background: #f6f7f7;
121 vertical-align: top;
122}
123
124.wp-core-ui p .button {
125 vertical-align: baseline;
126}
127
128.wp-core-ui .button.hover,
129.wp-core-ui .button:hover,
130.wp-core-ui .button-secondary:hover{
131 background: #f0f0f1;
132 border-color: #0a4b78;
133 color: #0a4b78;
134}
135
136.wp-core-ui .button.focus,
137.wp-core-ui .button:focus,
138.wp-core-ui .button-secondary:focus {
139 background: #f6f7f7;
140 border-color: #3582c4;
141 color: #0a4b78;
142 box-shadow: 0 0 0 1px #3582c4;
143 /* Only visible in Windows High Contrast mode */
144 outline: 2px solid transparent;
145 /* Reset inherited offset from Gutenberg */
146 outline-offset: 0;
147}
148
149/* :active state */
150.wp-core-ui .button:active,
151.wp-core-ui .button-secondary:active {
152 background: #f6f7f7;
153 border-color: #8c8f94;
154 box-shadow: none;
155}
156
157/* pressed state e.g. a selected setting */
158.wp-core-ui .button.active,
159.wp-core-ui .button.active:hover {
160 background-color: #dcdcde;
161 color: #135e96;
162 border-color: #0a4b78;
163 box-shadow: inset 0 2px 5px -3px #0a4b78;
164}
165
166.wp-core-ui .button.active:focus {
167 border-color: #3582c4;
168 box-shadow:
169 inset 0 2px 5px -3px #0a4b78,
170 0 0 0 1px #3582c4;
171}
172
173.wp-core-ui .button[disabled],
174.wp-core-ui .button:disabled,
175.wp-core-ui .button.disabled,
176.wp-core-ui .button-secondary[disabled],
177.wp-core-ui .button-secondary:disabled,
178.wp-core-ui .button-secondary.disabled,
179.wp-core-ui .button-disabled {
180 color: #a7aaad !important;
181 border-color: #dcdcde !important;
182 background: #f6f7f7 !important;
183 box-shadow: none !important;
184 cursor: default;
185 transform: none !important;
186}
187
188.wp-core-ui .button[aria-disabled="true"],
189.wp-core-ui .button-secondary[aria-disabled="true"] {
190 cursor: default;
191}
192
193/* Buttons that look like links, for a cross of good semantics with the visual */
194.wp-core-ui .button-link {
195 margin: 0;
196 padding: 0;
197 box-shadow: none;
198 border: 0;
199 border-radius: 0;
200 background: none;
201 cursor: pointer;
202 text-align: left;
203 /* Mimics the default link style in common.css */
204 color: #2271b1;
205 text-decoration: underline;
206 transition-property: border, background, color;
207 transition-duration: .05s;
208 transition-timing-function: ease-in-out;
209}
210
211.wp-core-ui .button-link:hover,
212.wp-core-ui .button-link:active {
213 color: #135e96;
214}
215
216.wp-core-ui .button-link:focus {
217 color: #043959;
218 box-shadow: 0 0 0 2px #2271b1;
219 /* Only visible in Windows High Contrast mode */
220 outline: 2px solid transparent;
221}
222
223.wp-core-ui .button-link-delete {
224 color: #d63638;
225}
226
227.wp-core-ui .button-link-delete:hover,
228.wp-core-ui .button-link-delete:focus {
229 color: #d63638;
230 background: transparent;
231}
232
233.wp-core-ui .button-link-delete:disabled {
234 /* overrides the default buttons disabled background */
235 background: transparent !important;
236}
237
238
239/* ----------------------------------------------------------------------------
240 3.0 - Primary Button Style
241---------------------------------------------------------------------------- */
242
243.wp-core-ui .button-primary {
244 background: #2271b1;
245 border-color: #2271b1;
246 color: #fff;
247 text-decoration: none;
248 text-shadow: none;
249}
250
251.wp-core-ui .button-primary.hover,
252.wp-core-ui .button-primary:hover,
253.wp-core-ui .button-primary.focus,
254.wp-core-ui .button-primary:focus {
255 background: #135e96;
256 border-color: #135e96;
257 color: #fff;
258}
259
260.wp-core-ui .button-primary.focus,
261.wp-core-ui .button-primary:focus {
262 box-shadow:
263 0 0 0 1px #fff,
264 0 0 0 3px #2271b1;
265}
266
267.wp-core-ui .button-primary.active,
268.wp-core-ui .button-primary.active:hover,
269.wp-core-ui .button-primary.active:focus,
270.wp-core-ui .button-primary:active {
271 background: #135e96;
272 border-color: #135e96;
273 box-shadow: none;
274 color: #fff;
275}
276
277.wp-core-ui .button-primary[disabled],
278.wp-core-ui .button-primary:disabled,
279.wp-core-ui .button-primary-disabled,
280.wp-core-ui .button-primary.disabled {
281 color: #a7aaad !important;
282 background: #f6f7f7 !important;
283 border-color: #dcdcde !important;
284 box-shadow: none !important;
285 text-shadow: none !important;
286 cursor: default;
287}
288
289.wp-core-ui .button-primary[aria-disabled="true"] {
290 cursor: default;
291}
292
293/* ----------------------------------------------------------------------------
294 4.0 - Button Groups
295---------------------------------------------------------------------------- */
296
297.wp-core-ui .button-group {
298 position: relative;
299 display: inline-block;
300 white-space: nowrap;
301 font-size: 0;
302 vertical-align: middle;
303}
304
305.wp-core-ui .button-group > .button {
306 display: inline-block;
307 border-radius: 0;
308 margin-right: -1px;
309}
310
311.wp-core-ui .button-group > .button:first-child {
312 border-radius: 3px 0 0 3px;
313}
314
315.wp-core-ui .button-group > .button:last-child {
316 border-radius: 0 3px 3px 0;
317}
318
319.wp-core-ui .button-group > .button-primary + .button {
320 border-left: 0;
321}
322
323.wp-core-ui .button-group > .button:focus {
324 position: relative;
325 z-index: 1;
326}
327
328/* pressed state e.g. a selected setting */
329.wp-core-ui .button-group > .button.active {
330 background-color: #dcdcde;
331 color: #135e96;
332 border-color: #0a4b78;
333 box-shadow: inset 0 2px 5px -3px #0a4b78;
334}
335
336.wp-core-ui .button-group > .button.active:focus {
337 border-color: #3582c4;
338 box-shadow:
339 inset 0 2px 5px -3px #0a4b78,
340 0 0 0 1px #3582c4;
341}
342
343/* ----------------------------------------------------------------------------
344 5.0 - Responsive Button Styles
345---------------------------------------------------------------------------- */
346
347@media screen and (max-width: 782px) {
348
349 .wp-core-ui .button,
350 .wp-core-ui .button.button-large,
351 .wp-core-ui .button.button-small,
352 input#publish,
353 input#save-post,
354 a.preview {
355 padding: 0 14px;
356 line-height: 2.71428571; /* 38px */
357 font-size: 14px;
358 vertical-align: middle;
359 min-height: 40px;
360 margin-bottom: 4px;
361 }
362
363 /* Copy attachment URL button in the legacy edit media page. */
364 .wp-core-ui .copy-to-clipboard-container .copy-attachment-url {
365 margin-bottom: 0;
366 }
367
368 #media-upload.wp-core-ui .button {
369 padding: 0 10px 1px;
370 min-height: 24px;
371 line-height: 22px;
372 font-size: 13px;
373 }
374
375 .media-frame.mode-grid .bulk-select .button {
376 margin-bottom: 0;
377 }
378
379 /* Publish Metabox Options */
380 .wp-core-ui .save-post-status.button {
381 position: relative;
382 margin: 0 14px 0 10px; /* 14px right margin to match all other buttons */
383 }
384
385 /* Reset responsive styles in Press This, Customizer */
386
387 .wp-core-ui.wp-customizer .button {
388 font-size: 13px;
389 line-height: 2.15384615; /* 28px */
390 min-height: 30px;
391 margin: 0;
392 vertical-align: inherit;
393 }
394
395 .wp-customizer .theme-overlay .theme-actions .button {
396 margin-bottom: 5px;
397 }
398
399 .media-modal-content .media-toolbar-primary .media-button {
400 margin-top: 10px;
401 margin-left: 5px;
402 }
403
404 /* Reset responsive styles on Log in button on iframed login form */
405
406 .interim-login .button.button-large {
407 min-height: 30px;
408 line-height: 2;
409 padding: 0 12px 2px;
410 }
411
412}
413