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