buttons.css (9598B)
1 /* ---------------------------------------------------------------------------- 2 3 NOTE: If you edit this file, you should make sure that the CSS rules for 4 buttons in the following files are updated. 5 6 * jquery-ui-dialog.css 7 * editor.css 8 9 WordPress-style Buttons 10 ======================= 11 Create a button by adding the `.button` class to an element. For backward 12 compatibility, we support several other classes (such as `.button-secondary`), 13 but these will *not* work with the stackable classes described below. 14 15 Button Styles 16 ------------- 17 To display a primary button style, add the `.button-primary` class to a button. 18 19 Button Sizes 20 ------------ 21 Adjust a button's size by adding the `.button-large` or `.button-small` class. 22 23 Button States 24 ------------- 25 Lock the state of a button by adding the name of the pseudoclass as 26 an actual class (e.g. `.hover` for `:hover`). 27 28 29 TABLE 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 /* 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: #2271b1; 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: #135e96; 209 } 210 211 .wp-core-ui .button-link:focus { 212 color: #043959; 213 box-shadow: 214 0 0 0 1px #4f94d4, 215 0 0 2px 1px rgba(79, 148, 212, 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: #d63638; 222 } 223 224 .wp-core-ui .button-link-delete:hover, 225 .wp-core-ui .button-link-delete:focus { 226 color: #d63638; 227 background: transparent; 228 } 229 230 .wp-core-ui .button-link-delete:disabled { 231 /* overrides the default buttons disabled background */ 232 background: transparent !important; 233 } 234 235 236 /* ---------------------------------------------------------------------------- 237 3.0 - Primary Button Style 238 ---------------------------------------------------------------------------- */ 239 240 .wp-core-ui .button-primary { 241 background: #2271b1; 242 border-color: #2271b1; 243 color: #fff; 244 text-decoration: none; 245 text-shadow: none; 246 } 247 248 .wp-core-ui .button-primary.hover, 249 .wp-core-ui .button-primary:hover, 250 .wp-core-ui .button-primary.focus, 251 .wp-core-ui .button-primary:focus { 252 background: #135e96; 253 border-color: #135e96; 254 color: #fff; 255 } 256 257 .wp-core-ui .button-primary.focus, 258 .wp-core-ui .button-primary:focus { 259 box-shadow: 260 0 0 0 1px #fff, 261 0 0 0 3px #2271b1; 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: #135e96; 269 border-color: #135e96; 270 box-shadow: none; 271 color: #fff; 272 } 273 274 .wp-core-ui .button-primary[disabled], 275 .wp-core-ui .button-primary:disabled, 276 .wp-core-ui .button-primary-disabled, 277 .wp-core-ui .button-primary.disabled { 278 color: #a7aaad !important; 279 background: #f6f7f7 !important; 280 border-color: #dcdcde !important; 281 box-shadow: none !important; 282 text-shadow: none !important; 283 cursor: default; 284 } 285 286 /* ---------------------------------------------------------------------------- 287 4.0 - Button Groups 288 ---------------------------------------------------------------------------- */ 289 290 .wp-core-ui .button-group { 291 position: relative; 292 display: inline-block; 293 white-space: nowrap; 294 font-size: 0; 295 vertical-align: middle; 296 } 297 298 .wp-core-ui .button-group > .button { 299 display: inline-block; 300 border-radius: 0; 301 margin-right: -1px; 302 } 303 304 .wp-core-ui .button-group > .button:first-child { 305 border-radius: 3px 0 0 3px; 306 } 307 308 .wp-core-ui .button-group > .button:last-child { 309 border-radius: 0 3px 3px 0; 310 } 311 312 .wp-core-ui .button-group > .button-primary + .button { 313 border-left: 0; 314 } 315 316 .wp-core-ui .button-group > .button:focus { 317 position: relative; 318 z-index: 1; 319 } 320 321 /* pressed state e.g. a selected setting */ 322 .wp-core-ui .button-group > .button.active { 323 background-color: #dcdcde; 324 color: #135e96; 325 border-color: #0a4b78; 326 box-shadow: inset 0 2px 5px -3px #0a4b78; 327 } 328 329 .wp-core-ui .button-group > .button.active:focus { 330 border-color: #3582c4; 331 box-shadow: 332 inset 0 2px 5px -3px #0a4b78, 333 0 0 0 1px #3582c4; 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: 0 14px; 349 line-height: 2.71428571; /* 38px */ 350 font-size: 14px; 351 vertical-align: middle; 352 min-height: 40px; 353 margin-bottom: 4px; 354 } 355 356 /* Copy attachment URL button in the legacy edit media page. */ 357 .wp-core-ui .copy-to-clipboard-container .copy-attachment-url { 358 margin-bottom: 0; 359 } 360 361 #media-upload.wp-core-ui .button { 362 padding: 0 10px 1px; 363 min-height: 24px; 364 line-height: 22px; 365 font-size: 13px; 366 } 367 368 .media-frame.mode-grid .bulk-select .button { 369 margin-bottom: 0; 370 } 371 372 /* Publish Metabox Options */ 373 .wp-core-ui .save-post-status.button { 374 position: relative; 375 margin: 0 14px 0 10px; /* 14px right margin to match all other buttons */ 376 } 377 378 /* Reset responsive styles in Press This, Customizer */ 379 380 .wp-core-ui.wp-customizer .button { 381 font-size: 13px; 382 line-height: 2.15384615; /* 28px */ 383 min-height: 30px; 384 margin: 0; 385 vertical-align: inherit; 386 } 387 388 .media-modal-content .media-toolbar-primary .media-button { 389 margin-top: 10px; 390 margin-left: 5px; 391 } 392 393 /* Reset responsive styles on Log in button on iframed login form */ 394 395 .interim-login .button.button-large { 396 min-height: 30px; 397 line-height: 2; 398 padding: 0 12px 2px; 399 } 400 401 }