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