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