[Summary view] [Print] [Text view]

   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      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  /* 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  /* Compact size - 32px, for space-constrained contexts */
  74  .wp-core-ui .button.button-compact,
  75  .wp-core-ui .button-group.button-compact .button {
  76      line-height: 2.30769231; /* 30px - allows 32px min-height with 1px border */
  77      min-height: 32px;
  78      padding: 0 12px;
  79  }
  80  
  81  /* Small size - 24px */
  82  .wp-core-ui .button.button-small,
  83  .wp-core-ui .button-group.button-small .button {
  84      line-height: 2; /* 22px - allows 24px min-height with 1px border */
  85      min-height: 24px;
  86      padding: 0 8px;
  87      font-size: 11px;
  88  }
  89  
  90  /* Large size - explicit 40px (same as default, for semantic clarity) */
  91  .wp-core-ui .button.button-large,
  92  .wp-core-ui .button-group.button-large .button {
  93      line-height: 2.92307692; /* 38px - allows 40px min-height with 1px border */
  94      min-height: 40px;
  95      padding: 0 16px;
  96  }
  97  
  98  .wp-core-ui .button.button-hero,
  99  .wp-core-ui .button-group.button-hero .button {
 100      font-size: 14px;
 101      line-height: 3.28571429; /* 46px - allows 48px min-height with 1px border */
 102      min-height: 48px;
 103      padding: 0 36px;
 104  }
 105  
 106  .wp-core-ui .button.hidden {
 107      display: none;
 108  }
 109  
 110  /* Button Icons - Dashicons centering for all button sizes */
 111  /* Dashicons are 20px font-size, so line-height = target-height / 20 */
 112  .wp-core-ui .button .dashicons,
 113  .wp-core-ui .button-primary .dashicons,
 114  .wp-core-ui .button-secondary .dashicons {
 115      line-height: 1.9; /* 38px (20px * 1.9) - matches default button */
 116      vertical-align: top;
 117  }
 118  
 119  .wp-core-ui .button.button-compact .dashicons {
 120      line-height: 1.5; /* 30px (20px * 1.5) - matches compact button */
 121  }
 122  
 123  .wp-core-ui .button.button-small .dashicons {
 124      line-height: 1.1; /* 22px (20px * 1.1) - matches small button */
 125  }
 126  
 127  .wp-core-ui .button.button-hero .dashicons {
 128      line-height: 2.3; /* 46px (20px * 2.3) - matches hero button */
 129  }
 130  
 131  /* Style Reset buttons as simple text links */
 132  
 133  .wp-core-ui input[type="reset"],
 134  .wp-core-ui input[type="reset"]:hover,
 135  .wp-core-ui input[type="reset"]:active,
 136  .wp-core-ui input[type="reset"]:focus {
 137      background: none;
 138      border: none;
 139      box-shadow: none;
 140      padding: 0 2px 1px;
 141      width: auto;
 142  }
 143  
 144  /* ----------------------------------------------------------------------------
 145    2.0 - Default Button Style
 146  ---------------------------------------------------------------------------- */
 147  
 148  .wp-core-ui .button,
 149  .wp-core-ui .button-secondary {
 150      color: var(--wp-admin-theme-color, #3858e9);
 151      border-color: var(--wp-admin-theme-color, #3858e9);
 152      background: transparent;
 153      vertical-align: top;
 154  }
 155  
 156  .wp-core-ui p .button {
 157      vertical-align: baseline;
 158  }
 159  
 160  .wp-core-ui .button.hover,
 161  .wp-core-ui .button:hover,
 162  .wp-core-ui .button-secondary:hover {
 163      background: rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.04);
 164      border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
 165      color: var(--wp-admin-theme-color-darker-20, #183ad6);
 166  }
 167  
 168  .wp-core-ui .button.focus,
 169  .wp-core-ui .button:focus,
 170  .wp-core-ui .button-secondary:focus {
 171      background: transparent;
 172      border-color: var(--wp-admin-theme-color, #3858e9);
 173      color: var(--wp-admin-theme-color, #3858e9);
 174      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
 175      /* Only visible in Windows High Contrast mode */
 176      outline: 1px solid transparent;
 177      /* Reset inherited offset from Gutenberg */
 178      outline-offset: 0;
 179  }
 180  
 181  /* :active state */
 182  .wp-core-ui .button:active,
 183  .wp-core-ui .button-secondary:active {
 184      background: rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.08);
 185      border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
 186      color: var(--wp-admin-theme-color-darker-20, #183ad6);
 187      box-shadow: none;
 188  }
 189  
 190  /* pressed state e.g. a selected setting */
 191  .wp-core-ui .button.active,
 192  .wp-core-ui .button.active:hover {
 193      background-color: rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.08);
 194      color: var(--wp-admin-theme-color-darker-20, #183ad6);
 195      border-color: var(--wp-admin-theme-color, #3858e9);
 196      box-shadow: inset 0 2px 6px -2px  var(--wp-admin-theme-color-darker-20);
 197      outline: 3px solid transparent;
 198      outline-offset: -3px;
 199  }
 200  
 201  .wp-core-ui .button.active:focus {
 202      background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 203      color: var(--wp-admin-theme-color-darker-20, #183ad6);
 204      border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
 205      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);
 206      outline-width: 4px;
 207  }
 208  
 209  .wp-core-ui .button[disabled],
 210  .wp-core-ui .button:disabled,
 211  .wp-core-ui .button.disabled,
 212  .wp-core-ui .button-secondary[disabled],
 213  .wp-core-ui .button-secondary:disabled,
 214  .wp-core-ui .button-secondary.disabled,
 215  .wp-core-ui .button-disabled {
 216      color: #8a8a8a !important;
 217      border-color: #d8d8d8 !important;
 218      background: transparent !important;
 219      box-shadow: none !important;
 220      cursor: default;
 221      transform: none !important;
 222  }
 223  
 224  .wp-core-ui .button[aria-disabled="true"],
 225  .wp-core-ui .button-secondary[aria-disabled="true"] {
 226      color: #8a8a8a !important;
 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: left;
 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-right: -1px;
 349  }
 350  
 351  .wp-core-ui .button-group > .button:first-child {
 352      border-radius: 2px 0 0 2px;
 353  }
 354  
 355  .wp-core-ui .button-group > .button:last-child {
 356      border-radius: 0 2px 2px 0;
 357  }
 358  
 359  .wp-core-ui .button-group > .button-primary + .button {
 360      border-left: 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 14px 0 10px; /* 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-left: 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  }