[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      cursor: default;
 228  }
 229  
 230  /* Buttons that look like links, for a cross of good semantics with the visual */
 231  .wp-core-ui .button-link {
 232      margin: 0;
 233      padding: 0;
 234      box-shadow: none;
 235      border: 0;
 236      border-radius: 0;
 237      background: none;
 238      cursor: pointer;
 239      text-align: right;
 240      /* Mimics the default link style in common.css */
 241      color: var(--wp-admin-theme-color, #3858e9);
 242      text-decoration: underline;
 243      transition-property: border, background, color;
 244      transition-duration: .05s;
 245      transition-timing-function: ease-in-out;
 246  }
 247  
 248  .wp-core-ui .button-link:hover,
 249  .wp-core-ui .button-link:active {
 250      color: var(--wp-admin-theme-color-darker-20, #183ad6);
 251  }
 252  
 253  .wp-core-ui .button-link:focus {
 254      color: var(--wp-admin-theme-color, #3858e9);
 255      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
 256      border-radius: 2px;
 257      /* Only visible in Windows High Contrast mode */
 258      outline: 1px solid transparent;
 259  }
 260  
 261  .wp-core-ui .button-link-delete {
 262      color: #d63638;
 263  }
 264  
 265  .wp-core-ui .button-link-delete:hover,
 266  .wp-core-ui .button-link-delete:focus {
 267      color: #d63638;
 268      background: transparent;
 269  }
 270  
 271  .wp-core-ui .button-link-delete:disabled {
 272      /* overrides the default buttons disabled background */
 273      background: transparent !important;
 274  }
 275  
 276  
 277  /* ----------------------------------------------------------------------------
 278    3.0 - Primary Button Style
 279  ---------------------------------------------------------------------------- */
 280  
 281  .wp-core-ui .button-primary {
 282      background: var(--wp-admin-theme-color, #3858e9);
 283      border-color: var(--wp-admin-theme-color, #3858e9);
 284      color: #fff;
 285      text-decoration: none;
 286      text-shadow: none;
 287  }
 288  
 289  .wp-core-ui .button-primary.hover,
 290  .wp-core-ui .button-primary:hover {
 291      background: var(--wp-admin-theme-color-darker-10, #2145e6);
 292      border-color: var(--wp-admin-theme-color-darker-10, #2145e6);
 293      color: #fff;
 294  }
 295  
 296  .wp-core-ui .button-primary.focus,
 297  .wp-core-ui .button-primary:focus {
 298      background: var(--wp-admin-theme-color, #3858e9);
 299      border-color: var(--wp-admin-theme-color, #3858e9);
 300      color: #fff;
 301      box-shadow:
 302          0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9),
 303          inset 0 0 0 1px #fff;
 304      outline: 1px solid transparent;
 305  }
 306  
 307  .wp-core-ui .button-primary.active,
 308  .wp-core-ui .button-primary.active:hover,
 309  .wp-core-ui .button-primary.active:focus,
 310  .wp-core-ui .button-primary:active {
 311      background: var(--wp-admin-theme-color-darker-20, #183ad6);
 312      border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
 313      box-shadow: none;
 314      color: #fff;
 315  }
 316  
 317  .wp-core-ui .button-primary[disabled],
 318  .wp-core-ui .button-primary:disabled,
 319  .wp-core-ui .button-primary-disabled,
 320  .wp-core-ui .button-primary.disabled {
 321      color: #8a8a8a !important;
 322      background: #e2e2e2 !important;
 323      border-color: #e2e2e2 !important;
 324      box-shadow: none !important;
 325      text-shadow: none !important;
 326      cursor: default;
 327  }
 328  
 329  .wp-core-ui .button-primary[aria-disabled="true"] {
 330      cursor: default;
 331  }
 332  
 333  /* ----------------------------------------------------------------------------
 334    4.0 - Button Groups
 335  ---------------------------------------------------------------------------- */
 336  
 337  .wp-core-ui .button-group {
 338      position: relative;
 339      display: inline-block;
 340      white-space: nowrap;
 341      font-size: 0;
 342      vertical-align: middle;
 343  }
 344  
 345  .wp-core-ui .button-group > .button {
 346      display: inline-block;
 347      border-radius: 0;
 348      margin-left: -1px;
 349  }
 350  
 351  .wp-core-ui .button-group > .button:first-child {
 352      border-radius: 0 2px 2px 0;
 353  }
 354  
 355  .wp-core-ui .button-group > .button:last-child {
 356      border-radius: 2px 0 0 2px;
 357  }
 358  
 359  .wp-core-ui .button-group > .button-primary + .button {
 360      border-right: 0;
 361  }
 362  
 363  .wp-core-ui .button-group > .button:focus {
 364      position: relative;
 365      z-index: 1;
 366  }
 367  
 368  /* pressed state e.g. a selected setting */
 369  .wp-core-ui .button-group > .button.active {
 370      border-color: var(--wp-admin-theme-color);
 371      box-shadow: inset 0 2px 6px -2px  var(--wp-admin-theme-color-darker-20);
 372  }
 373  
 374  .wp-core-ui .button-group > .button.active:focus {
 375      border-color: var(--wp-admin-theme-color);
 376      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);
 377  }
 378  
 379  /* ----------------------------------------------------------------------------
 380    5.0 - Responsive Button Styles
 381  ---------------------------------------------------------------------------- */
 382  
 383  @media screen and (max-width: 782px) {
 384  
 385      .wp-core-ui .button,
 386      .wp-core-ui .button.button-large,
 387      .wp-core-ui .button.button-compact,
 388      .wp-core-ui .button.button-small,
 389      input#publish,
 390      input#save-post,
 391      a.preview {
 392          padding: 0 14px;
 393          line-height: 2.71428571; /* 38px - allows 40px min-height with 1px border */
 394          font-size: 14px;
 395          vertical-align: middle;
 396          min-height: 40px;
 397          margin-bottom: 4px;
 398      }
 399  
 400      /* Responsive Button Icons - Dashicons centering */
 401      .wp-core-ui .button .dashicons,
 402      .wp-core-ui .button-primary .dashicons,
 403      .wp-core-ui .button-secondary .dashicons {
 404          line-height: 1.9; /* 38px (20px * 1.9) - matches responsive button */
 405      }
 406  
 407      /* Copy attachment URL button in the legacy edit media page. */
 408      .wp-core-ui .copy-to-clipboard-container .copy-attachment-url {
 409          margin-bottom: 0;
 410      }
 411  
 412      #media-upload.wp-core-ui .button {
 413          padding: 0 10px;
 414          line-height: 1.69230769; /* 22px */
 415          min-height: 24px;
 416          font-size: 13px;
 417      }
 418  
 419      .media-frame.mode-grid .bulk-select .button {
 420          margin-bottom: 0;
 421      }
 422  
 423      /* Publish Metabox Options */
 424      .wp-core-ui .save-post-status.button {
 425          position: relative;
 426          margin: 0 10px 0 14px; /* 14px right margin to match all other buttons */
 427      }
 428  
 429      /* Reset responsive styles in Press This, Customizer */
 430  
 431      .wp-core-ui.wp-customizer .button {
 432          font-size: 13px;
 433          line-height: 2.30769231; /* 30px */
 434          min-height: 32px;
 435          margin: 0;
 436          vertical-align: inherit;
 437      }
 438  
 439      .wp-customizer .theme-overlay .theme-actions .button {
 440          margin-bottom: 5px;
 441      }
 442  
 443      .media-modal-content .media-toolbar-primary .media-button {
 444          margin-top: 10px;
 445          margin-right: 5px;
 446      }
 447  
 448      /* Reset responsive styles on Log in button on iframed login form */
 449  
 450      .interim-login .button.button-large {
 451          min-height: 32px;
 452          line-height: 2.30769231; /* 30px */
 453          padding: 0 12px;
 454      }
 455  
 456  }