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