Get WordPress

Make WordPress Core

source: trunk/src/wp-includes/css/buttons.css @ 45150

Last change on this file since 45150 was 45150, checked in by pento, 5 years ago

UI: Remove vertical alignment from active primary buttons.

This caused the post-plugin installation actions to jump around when the "Activate Plugin" primary button became active.

Props seedsca, pratikthink, ianbelanger, mukesh27.
Fixes #44836.
  • Property svn:eol-style set to native
File size: 9.3 KB
Line 
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: 26px;
50        height: 28px;
51        margin: 0;
52        padding: 0 10px 1px;
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        height: 30px;
75        line-height: 28px;
76        padding: 0 12px 2px;
77}
78
79.wp-core-ui .button.button-small,
80.wp-core-ui .button-group.button-small .button {
81        height: 24px;
82        line-height: 22px;
83        padding: 0 8px 1px;
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        height: 46px;
91        line-height: 44px;
92        padding: 0 36px;
93}
94
95/* Only visible in Windows High Contrast mode */
96.wp-core-ui .button:active,
97.wp-core-ui .button:focus {
98        outline: 2px solid transparent;
99        /* Reset inherited offset from Gutenberg */
100        outline-offset: 0;
101}
102
103.wp-core-ui .button.hidden {
104        display: none;
105}
106
107/* Style Reset buttons as simple text links */
108
109.wp-core-ui input[type="reset"],
110.wp-core-ui input[type="reset"]:hover,
111.wp-core-ui input[type="reset"]:active,
112.wp-core-ui input[type="reset"]:focus {
113        background: none;
114        border: none;
115        box-shadow: none;
116        padding: 0 2px 1px;
117        width: auto;
118}
119
120/* ----------------------------------------------------------------------------
121  2.0 - Default Button Style
122---------------------------------------------------------------------------- */
123
124.wp-core-ui .button,
125.wp-core-ui .button-secondary {
126        color: #555;
127        border-color: #cccccc;
128        background: #f7f7f7;
129        box-shadow: 0 1px 0 #cccccc;
130        vertical-align: top;
131}
132
133.wp-core-ui p .button {
134        vertical-align: baseline;
135}
136
137.wp-core-ui .button.hover,
138.wp-core-ui .button:hover,
139.wp-core-ui .button-secondary:hover,
140.wp-core-ui .button.focus,
141.wp-core-ui .button:focus,
142.wp-core-ui .button-secondary:focus {
143        background: #fafafa;
144        border-color: #999;
145        color: #23282d;
146}
147
148.wp-core-ui .button.focus,
149.wp-core-ui .button:focus,
150.wp-core-ui .button-secondary:focus {
151        border-color: #5b9dd9;
152        box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
153}
154
155.wp-core-ui .button.active,
156.wp-core-ui .button.active:hover,
157.wp-core-ui .button:active,
158.wp-core-ui .button-secondary:active {
159        background: #eee;
160        border-color: #999;
161        box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
162        transform: translateY(1px);
163}
164
165.wp-core-ui .button.active:focus {
166        border-color: #5b9dd9;
167        box-shadow:
168                inset 0 2px 5px -3px rgba(0, 0, 0, 0.5),
169                0 0 3px rgba(0, 115, 170, 0.8);
170}
171
172.wp-core-ui .button[disabled],
173.wp-core-ui .button:disabled,
174.wp-core-ui .button.disabled,
175.wp-core-ui .button-secondary[disabled],
176.wp-core-ui .button-secondary:disabled,
177.wp-core-ui .button-secondary.disabled,
178.wp-core-ui .button-disabled {
179        color: #a0a5aa !important;
180        border-color: #ddd !important;
181        background: #f7f7f7 !important;
182        box-shadow: none !important;
183        text-shadow: 0 1px 0 #fff !important;
184        cursor: default;
185        transform: none !important;
186}
187
188/* Buttons that look like links, for a cross of good semantics with the visual */
189.wp-core-ui .button-link {
190        margin: 0;
191        padding: 0;
192        box-shadow: none;
193        border: 0;
194        border-radius: 0;
195        background: none;
196        cursor: pointer;
197        text-align: left;
198        /* Mimics the default link style in common.css */
199        color: #0073aa;
200        text-decoration: underline;
201        transition-property: border, background, color;
202        transition-duration: .05s;
203        transition-timing-function: ease-in-out;
204}
205
206.wp-core-ui .button-link:hover,
207.wp-core-ui .button-link:active {
208        color: #00a0d2;
209}
210
211.wp-core-ui .button-link:focus {
212        color: #124964;
213        box-shadow:
214                0 0 0 1px #5b9dd9,
215                0 0 2px 1px rgba(30, 140, 190, 0.8);
216        /* Only visible in Windows High Contrast mode */
217        outline: 1px solid transparent;
218}
219
220.wp-core-ui .button-link-delete {
221        color: #a00;
222}
223
224.wp-core-ui .button-link-delete:hover,
225.wp-core-ui .button-link-delete:focus {
226        color: #dc3232;
227}
228
229.ie8 .wp-core-ui .button-link:focus {
230        outline: #5b9dd9 solid 1px;
231}
232
233/* ----------------------------------------------------------------------------
234  3.0 - Primary Button Style
235---------------------------------------------------------------------------- */
236
237.wp-core-ui .button-primary {
238        background: #0085ba;
239        border-color: #0073aa #006799 #006799;
240        box-shadow: 0 1px 0 #006799;
241        color: #fff;
242        text-decoration: none;
243        text-shadow: 0 -1px 1px #006799,
244                1px 0 1px #006799,
245                0 1px 1px #006799,
246                -1px 0 1px #006799;
247}
248
249.wp-core-ui .button-primary.hover,
250.wp-core-ui .button-primary:hover,
251.wp-core-ui .button-primary.focus,
252.wp-core-ui .button-primary:focus {
253        background: #008ec2;
254        border-color: #006799;
255        color: #fff;
256}
257
258.wp-core-ui .button-primary.focus,
259.wp-core-ui .button-primary:focus {
260        box-shadow: 0 1px 0 #0073aa,
261                0 0 2px 1px #33b3db;
262}
263
264.wp-core-ui .button-primary.active,
265.wp-core-ui .button-primary.active:hover,
266.wp-core-ui .button-primary.active:focus,
267.wp-core-ui .button-primary:active {
268        background: #0073aa;
269        border-color: #006799;
270        box-shadow: inset 0 2px 0 #006799;
271}
272
273.wp-core-ui .button-primary[disabled],
274.wp-core-ui .button-primary:disabled,
275.wp-core-ui .button-primary-disabled,
276.wp-core-ui .button-primary.disabled {
277        color: #66c6e4 !important;
278        background: #008ec2 !important;
279        border-color: #007cb2 !important;
280        box-shadow: none !important;
281        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
282        cursor: default;
283}
284
285.wp-core-ui .button.button-primary.button-hero {
286        box-shadow: 0 2px 0 #006799;
287}
288
289.wp-core-ui .button.button-primary.button-hero.active,
290.wp-core-ui .button.button-primary.button-hero.active:hover,
291.wp-core-ui .button.button-primary.button-hero.active:focus,
292.wp-core-ui .button.button-primary.button-hero:active {
293        box-shadow: inset 0 3px 0 #006799;
294}
295
296/* ----------------------------------------------------------------------------
297  4.0 - Button Groups
298---------------------------------------------------------------------------- */
299
300.wp-core-ui .button-group {
301        position: relative;
302        display: inline-block;
303        white-space: nowrap;
304        font-size: 0;
305        vertical-align: middle;
306}
307
308.wp-core-ui .button-group > .button {
309        display: inline-block;
310        border-radius: 0;
311        margin-right: -1px;
312        z-index: 10;
313}
314
315.wp-core-ui .button-group > .button-primary {
316        z-index: 100;
317}
318
319.wp-core-ui .button-group > .button:hover {
320        z-index: 20;
321}
322
323.wp-core-ui .button-group > .button:first-child {
324        border-radius: 3px 0 0 3px;
325}
326
327.wp-core-ui .button-group > .button:last-child {
328        border-radius: 0 3px 3px 0;
329}
330
331.wp-core-ui .button-group > .button:focus {
332        position: relative;
333        z-index: 1;
334}
335
336/* ----------------------------------------------------------------------------
337  5.0 - Responsive Button Styles
338---------------------------------------------------------------------------- */
339
340@media screen and (max-width: 782px) {
341
342        .wp-core-ui .button,
343        .wp-core-ui .button.button-large,
344        .wp-core-ui .button.button-small,
345        input#publish,
346        input#save-post,
347        a.preview {
348                padding: 6px 14px;
349                line-height: normal;
350                font-size: 14px;
351                vertical-align: middle;
352                height: auto;
353                margin-bottom: 4px;
354        }
355
356        #media-upload.wp-core-ui .button {
357                padding: 0 10px 1px;
358                height: 24px;
359                line-height: 22px;
360                font-size: 13px;
361        }
362
363        .media-frame.mode-grid .bulk-select .button {
364                margin-bottom: 0;
365        }
366
367        /* Publish Metabox Options */
368        .wp-core-ui .save-post-status.button {
369                position: relative;
370                margin: 0 14px 0 10px; /* 14px right margin to match all other buttons */
371        }
372
373        /* Reset responsive styles in Press This, Customizer */
374
375        .wp-core-ui.wp-customizer .button {
376                padding: 0 10px 1px;
377                font-size: 13px;
378                line-height: 26px;
379                height: 28px;
380                margin: 0;
381                vertical-align: inherit;
382        }
383
384        .media-modal-content .media-toolbar-primary .media-button {
385                margin-top: 10px;
386                margin-left: 5px;
387        }
388
389        /* Reset responsive styles on Log in button on iframed login form */
390
391        .interim-login .button.button-large {
392                height: 30px;
393                line-height: 28px;
394                padding: 0 12px 2px;
395        }
396
397}
Note: See TracBrowser for help on using the repository browser.