[Summary view] [Print] [Text view]

   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      font-weight: 500;
  51      line-height: 2.92307692; /* 38px - allows 40px min-height with 1px border */
  52      min-height: 40px;
  53      margin: 0;
  54      padding: 0 16px;
  55      cursor: pointer;
  56      border-width: 1px;
  57      border-style: solid;
  58      -webkit-appearance: none;
  59      border-radius: 2px;
  60      white-space: nowrap;
  61      box-sizing: border-box;
  62  }
  63  
  64  /* Remove the dotted border on :focus and the extra padding in Firefox */
  65  .wp-core-ui button::-moz-focus-inner,
  66  .wp-core-ui input[type="reset"]::-moz-focus-inner,
  67  .wp-core-ui input[type="button"]::-moz-focus-inner,
  68  .wp-core-ui input[type="submit"]::-moz-focus-inner {
  69      border-width: 0;
  70      border-style: none;
  71      padding: 0;
  72  }
  73  
  74  /* Compact size - 32px, for space-constrained contexts */
  75  .wp-core-ui .button.button-compact,
  76  .wp-core-ui .button-group.button-compact .button {
  77      line-height: 2.30769231; /* 30px - allows 32px min-height with 1px border */
  78      min-height: 32px;
  79      padding: 0 12px;
  80  }
  81  
  82  /* Small size - 24px */
  83  .wp-core-ui .button.button-small,
  84  .wp-core-ui .button-group.button-small .button {
  85      line-height: 2; /* 22px - allows 24px min-height with 1px border */
  86      min-height: 24px;
  87      padding: 0 8px;
  88      font-size: 11px;
  89  }
  90  
  91  /* Large size - explicit 40px (same as default, for semantic clarity) */
  92  .wp-core-ui .button.button-large,
  93  .wp-core-ui .button-group.button-large .button {
  94      line-height: 2.92307692; /* 38px - allows 40px min-height with 1px border */
  95      min-height: 40px;
  96      padding: 0 16px;
  97  }
  98  
  99  .wp-core-ui .button.button-hero,
 100  .wp-core-ui .button-group.button-hero .button {
 101      font-size: 14px;
 102      line-height: 3.28571429; /* 46px - allows 48px min-height with 1px border */
 103      min-height: 48px;
 104      padding: 0 36px;
 105  }
 106  
 107  .wp-core-ui .button.hidden {
 108      display: none;
 109  }
 110  
 111  /* Button Icons - Dashicons centering for all button sizes */
 112  /* Dashicons are 20px font-size, so line-height = target-height / 20 */
 113  .wp-core-ui .button .dashicons,
 114  .wp-core-ui .button-primary .dashicons,
 115  .wp-core-ui .button-secondary .dashicons {
 116      line-height: 1.9; /* 38px (20px * 1.9) - matches default button */
 117      vertical-align: top;
 118  }
 119  
 120  .wp-core-ui .button.button-compact .dashicons {
 121      line-height: 1.5; /* 30px (20px * 1.5) - matches compact button */
 122  }
 123  
 124  .wp-core-ui .button.button-small .dashicons {
 125      line-height: 1.1; /* 22px (20px * 1.1) - matches small button */
 126  }
 127  
 128  .wp-core-ui .button.button-hero .dashicons {
 129      line-height: 2.3; /* 46px (20px * 2.3) - matches hero button */
 130  }
 131  
 132  /* Style Reset buttons as simple text links */
 133  
 134  .wp-core-ui input[type="reset"],
 135  .wp-core-ui input[type="reset"]:hover,
 136  .wp-core-ui input[type="reset"]:active,
 137  .wp-core-ui input[type="reset"]:focus {
 138      background: none;
 139      border: none;
 140      box-shadow: none;
 141      padding: 0 2px 1px;
 142      width: auto;
 143  }
 144  
 145  /* ----------------------------------------------------------------------------
 146    2.0 - Default Button Style
 147  ---------------------------------------------------------------------------- */
 148  
 149  .wp-core-ui .button,
 150  .wp-core-ui .button-secondary {
 151      color: var(--wp-admin-theme-color, #3858e9);
 152      border-color: var(--wp-admin-theme-color, #3858e9);
 153      background: transparent;
 154      vertical-align: top;
 155  }
 156  
 157  .wp-core-ui p .button {
 158      vertical-align: baseline;
 159  }
 160  
 161  .wp-core-ui .button.hover,
 162  .wp-core-ui .button:hover,
 163  .wp-core-ui .button-secondary:hover {
 164      background: rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.04);
 165      border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
 166      color: var(--wp-admin-theme-color-darker-20, #183ad6);
 167  }
 168  
 169  .wp-core-ui .button.focus,
 170  .wp-core-ui .button:focus,
 171  .wp-core-ui .button-secondary:focus {
 172      background: transparent;
 173      border-color: var(--wp-admin-theme-color, #3858e9);
 174      color: var(--wp-admin-theme-color, #3858e9);
 175      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
 176      /* Only visible in Windows High Contrast mode */
 177      outline: 1px solid transparent;
 178      /* Reset inherited offset from Gutenberg */
 179      outline-offset: 0;
 180  }
 181  
 182  /* :active state */
 183  .wp-core-ui .button:active,
 184  .wp-core-ui .button-secondary:active {
 185      background: rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.08);
 186      border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
 187      color: var(--wp-admin-theme-color-darker-20, #183ad6);
 188      box-shadow: none;
 189  }
 190  
 191  /* pressed state e.g. a selected setting */
 192  .wp-core-ui .button.active,
 193  .wp-core-ui .button.active:hover {
 194      background-color: rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.08);
 195      color: var(--wp-admin-theme-color-darker-20, #183ad6);
 196      border-color: var(--wp-admin-theme-color, #3858e9);
 197      box-shadow: inset 0 2px 6px -2px  var(--wp-admin-theme-color-darker-20);
 198      outline: 3px solid transparent;
 199      outline-offset: -3px;
 200  }
 201  
 202  .wp-core-ui .button.active:focus {
 203      background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 204      color: var(--wp-admin-theme-color-darker-20, #183ad6);
 205      border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
 206      box-shadow: inset 0 2px 6px -2px  var(--wp-admin-theme-color-darker-20), 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
 207      outline-width: 4px;
 208  }
 209  
 210  .wp-core-ui .button[disabled],
 211  .wp-core-ui .button:disabled,
 212  .wp-core-ui .button.disabled,
 213  .wp-core-ui .button-secondary[disabled],
 214  .wp-core-ui .button-secondary:disabled,
 215  .wp-core-ui .button-secondary.disabled,
 216  .wp-core-ui .button-disabled {
 217      color: #8a8a8a !important;
 218      border-color: #d8d8d8 !important;
 219      background: transparent !important;
 220      box-shadow: none !important;
 221      cursor: default;
 222      transform: none !important;
 223  }
 224  
 225  .wp-core-ui .button[aria-disabled="true"],
 226  .wp-core-ui .button-secondary[aria-disabled="true"] {
 227      color: #8a8a8a !important;
 228      cursor: default;
 229  }
 230  
 231  /* Buttons that look like links, for a cross of good semantics with the visual */
 232  .wp-core-ui .button-link {
 233      margin: 0;
 234      padding: 0;
 235      box-shadow: none;
 236      border: 0;
 237      border-radius: 0;
 238      background: none;
 239      cursor: pointer;
 240      text-align: right;
 241      /* Mimics the default link style in common.css */
 242      color: var(--wp-admin-theme-color, #3858e9);
 243      text-decoration: underline;
 244      transition-property: border, background, color;
 245      transition-duration: .05s;
 246      transition-timing-function: ease-in-out;
 247  }
 248  
 249  .wp-core-ui .button-link:hover,
 250  .wp-core-ui .button-link:active {
 251      color: var(--wp-admin-theme-color-darker-20, #183ad6);
 252  }
 253  
 254  .wp-core-ui .button-link:focus {
 255      color: var(--wp-admin-theme-color, #3858e9);
 256      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
 257      border-radius: 2px;
 258      /* Only visible in Windows High Contrast mode */
 259      outline: 1px solid transparent;
 260  }
 261  
 262  .wp-core-ui .button-link-delete {
 263      color: #d63638;
 264  }
 265  
 266  .wp-core-ui .button-link-delete:hover,
 267  .wp-core-ui .button-link-delete:focus {
 268      color: #d63638;
 269      background: transparent;
 270  }
 271  
 272  .wp-core-ui .button-link-delete:disabled {
 273      /* overrides the default buttons disabled background */
 274      background: transparent !important;
 275  }
 276  
 277  
 278  /* ----------------------------------------------------------------------------
 279    3.0 - Primary Button Style
 280  ---------------------------------------------------------------------------- */
 281  
 282  .wp-core-ui .button-primary {
 283      background: var(--wp-admin-theme-color, #3858e9);
 284      border-color: var(--wp-admin-theme-color, #3858e9);
 285      color: #fff;
 286      text-decoration: none;
 287      text-shadow: none;
 288  }
 289  
 290  .wp-core-ui .button-primary.hover,
 291  .wp-core-ui .button-primary:hover {
 292      background: var(--wp-admin-theme-color-darker-10, #2145e6);
 293      border-color: var(--wp-admin-theme-color-darker-10, #2145e6);
 294      color: #fff;
 295  }
 296  
 297  .wp-core-ui .button-primary.focus,
 298  .wp-core-ui .button-primary:focus {
 299      background: var(--wp-admin-theme-color, #3858e9);
 300      border-color: var(--wp-admin-theme-color, #3858e9);
 301      color: #fff;
 302      box-shadow:
 303          0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9),
 304          inset 0 0 0 1px #fff;
 305      outline: 1px solid transparent;
 306  }
 307  
 308  .wp-core-ui .button-primary.active,
 309  .wp-core-ui .button-primary.active:hover,
 310  .wp-core-ui .button-primary.active:focus,
 311  .wp-core-ui .button-primary:active {
 312      background: var(--wp-admin-theme-color-darker-20, #183ad6);
 313      border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
 314      box-shadow: none;
 315      color: #fff;
 316  }
 317  
 318  .wp-core-ui .button-primary[disabled],
 319  .wp-core-ui .button-primary:disabled,
 320  .wp-core-ui .button-primary-disabled,
 321  .wp-core-ui .button-primary.disabled {
 322      color: #8a8a8a !important;
 323      background: #e2e2e2 !important;
 324      border-color: #e2e2e2 !important;
 325      box-shadow: none !important;
 326      text-shadow: none !important;
 327      cursor: default;
 328  }
 329  
 330  .wp-core-ui .button-primary[aria-disabled="true"] {
 331      cursor: default;
 332  }
 333  
 334  /* ----------------------------------------------------------------------------
 335    4.0 - Button Groups
 336  ---------------------------------------------------------------------------- */
 337  
 338  .wp-core-ui .button-group {
 339      position: relative;
 340      display: inline-block;
 341      white-space: nowrap;
 342      font-size: 0;
 343      vertical-align: middle;
 344  }
 345  
 346  .wp-core-ui .button-group > .button {
 347      display: inline-block;
 348      border-radius: 0;
 349      margin-left: -1px;
 350  }
 351  
 352  .wp-core-ui .button-group > .button:first-child {
 353      border-radius: 0 2px 2px 0;
 354  }
 355  
 356  .wp-core-ui .button-group > .button:last-child {
 357      border-radius: 2px 0 0 2px;
 358  }
 359  
 360  .wp-core-ui .button-group > .button-primary + .button {
 361      border-right: 0;
 362  }
 363  
 364  .wp-core-ui .button-group > .button:focus {
 365      position: relative;
 366      z-index: 1;
 367  }
 368  
 369  /* pressed state e.g. a selected setting */
 370  .wp-core-ui .button-group > .button.active {
 371      border-color: var(--wp-admin-theme-color);
 372      box-shadow: inset 0 2px 6px -2px  var(--wp-admin-theme-color-darker-20);
 373  }
 374  
 375  .wp-core-ui .button-group > .button.active:focus {
 376      border-color: var(--wp-admin-theme-color);
 377      box-shadow: inset 0 2px 6px -2px  var(--wp-admin-theme-color-darker-20), 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
 378  }
 379  
 380  /* ----------------------------------------------------------------------------
 381    5.0 - Responsive Button Styles
 382  ---------------------------------------------------------------------------- */
 383  
 384  @media screen and (max-width: 782px) {
 385  
 386      .wp-core-ui .button,
 387      .wp-core-ui .button.button-large,
 388      .wp-core-ui .button.button-compact,
 389      .wp-core-ui .button.button-small,
 390      input#publish,
 391      input#save-post,
 392      a.preview {
 393          padding: 0 14px;
 394          line-height: 2.71428571; /* 38px - allows 40px min-height with 1px border */
 395          font-size: 14px;
 396          vertical-align: middle;
 397          min-height: 40px;
 398          margin-bottom: 4px;
 399      }
 400  
 401      /* Responsive Button Icons - Dashicons centering */
 402      .wp-core-ui .button .dashicons,
 403      .wp-core-ui .button-primary .dashicons,
 404      .wp-core-ui .button-secondary .dashicons {
 405          line-height: 1.9; /* 38px (20px * 1.9) - matches responsive button */
 406      }
 407  
 408      /* Copy attachment URL button in the legacy edit media page. */
 409      .wp-core-ui .copy-to-clipboard-container .copy-attachment-url {
 410          margin-bottom: 0;
 411      }
 412  
 413      #media-upload.wp-core-ui .button {
 414          padding: 0 10px;
 415          line-height: 1.69230769; /* 22px */
 416          min-height: 24px;
 417          font-size: 13px;
 418      }
 419  
 420      .media-frame.mode-grid .bulk-select .button {
 421          margin-bottom: 0;
 422      }
 423  
 424      /* Publish Metabox Options */
 425      .wp-core-ui .save-post-status.button {
 426          position: relative;
 427          margin: 0 10px 0 14px; /* 14px right margin to match all other buttons */
 428      }
 429  
 430      /* Reset responsive styles in Press This, Customizer */
 431  
 432      .wp-core-ui.wp-customizer .button {
 433          font-size: 13px;
 434          line-height: 2.30769231; /* 30px */
 435          min-height: 32px;
 436          margin: 0;
 437          vertical-align: inherit;
 438      }
 439  
 440      .wp-customizer .theme-overlay .theme-actions .button {
 441          margin-bottom: 5px;
 442      }
 443  
 444      .media-modal-content .media-toolbar-primary .media-button {
 445          margin-top: 10px;
 446          margin-right: 5px;
 447      }
 448  
 449      /* Reset responsive styles on Log in button on iframed login form */
 450  
 451      .interim-login .button.button-large {
 452          min-height: 32px;
 453          line-height: 2.30769231; /* 30px */
 454          padding: 0 12px;
 455      }
 456  
 457  }