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