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