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