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