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