[Summary view] [Print] [Text view]

   1  /* ----------------------------------------------------------------------------
   2  
   3  
   4  WordPress-style Buttons
   5  =======================
   6  Create a button by adding the `.button` class to an element. For backwards
   7  compatibility, we support several other classes (such as `.button-secondary`),
   8  but these will *not* work with the stackable classes described below.
   9  
  10  Button Styles
  11  -------------
  12  To display a primary button style, add the `.button-primary` class to a button.
  13  
  14  Button Sizes
  15  ------------
  16  Adjust a button's size by adding the `.button-large` or `.button-small` class.
  17  
  18  Button States
  19  -------------
  20  Lock the state of a button by adding the name of the pseudoclass as
  21  an actual class (e.g. `.hover` for `:hover`).
  22  
  23  
  24  TABLE OF CONTENTS:
  25  ------------------
  26   1.0 - Button Layouts
  27   2.0 - Default Button Style
  28   3.0 - Primary Button Style
  29   4.0 - Button Groups
  30   5.0 - Responsive Button Styles
  31  
  32  ---------------------------------------------------------------------------- */
  33  
  34  /* ----------------------------------------------------------------------------
  35    1.0 - Button Layouts
  36  ---------------------------------------------------------------------------- */
  37  
  38  .wp-core-ui .button,
  39  .wp-core-ui .button-primary,
  40  .wp-core-ui .button-secondary {
  41      display: inline-block;
  42      text-decoration: none;
  43      font-size: 13px;
  44      line-height: 26px;
  45      height: 28px;
  46      margin: 0;
  47      padding: 0 10px 1px;
  48      cursor: pointer;
  49      border-width: 1px;
  50      border-style: solid;
  51      -webkit-border-radius: 3px;
  52      -webkit-appearance: none;
  53      border-radius: 3px;
  54      white-space: nowrap;
  55      -webkit-box-sizing: border-box;
  56      -moz-box-sizing:    border-box;
  57      box-sizing:         border-box;
  58  }
  59  
  60  /* Remove the dotted border on :focus and the extra padding in Firefox */
  61  .wp-core-ui button::-moz-focus-inner,
  62  .wp-core-ui input[type="reset"]::-moz-focus-inner,
  63  .wp-core-ui input[type="button"]::-moz-focus-inner,
  64  .wp-core-ui input[type="submit"]::-moz-focus-inner {
  65      border-width: 1px 0;
  66      border-style: solid none;
  67      border-color: transparent;
  68      padding: 0;
  69  }
  70  
  71  .wp-core-ui .button.button-large,
  72  .wp-core-ui .button-group.button-large .button {
  73      height: 30px;
  74      line-height: 28px;
  75      padding: 0 12px 2px;
  76  }
  77  
  78  .wp-core-ui .button.button-small,
  79  .wp-core-ui .button-group.button-small .button {
  80      height: 24px;
  81      line-height: 22px;
  82      padding: 0 8px 1px;
  83      font-size: 11px;
  84  }
  85  
  86  .wp-core-ui .button.button-hero,
  87  .wp-core-ui .button-group.button-hero .button {
  88      font-size: 14px;
  89      height: 46px;
  90      line-height: 44px;
  91      padding: 0 36px;
  92  }
  93  
  94  .wp-core-ui .button:active {
  95      outline: none;
  96  }
  97  
  98  .wp-core-ui .button.hidden {
  99      display: none;
 100  }
 101  
 102  /* Style Reset buttons as simple text links */
 103  
 104  .wp-core-ui input[type="reset"],
 105  .wp-core-ui input[type="reset"]:hover,
 106  .wp-core-ui input[type="reset"]:active,
 107  .wp-core-ui input[type="reset"]:focus {
 108      background: none;
 109      border: none;
 110      -moz-box-shadow: none;
 111      -webkit-box-shadow: none;
 112      box-shadow: none;
 113      padding: 0 2px 1px;
 114      width: auto;
 115  }
 116  
 117  /* ----------------------------------------------------------------------------
 118    2.0 - Default Button Style
 119  ---------------------------------------------------------------------------- */
 120  
 121  .wp-core-ui .button,
 122  .wp-core-ui .button-secondary {
 123      color: #555;
 124      border-color: #cccccc;
 125      background: #f7f7f7;
 126  
 127      -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08);
 128      box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08);
 129       vertical-align: top;
 130  }
 131  
 132  .wp-core-ui p .button {
 133      vertical-align: baseline;
 134  }
 135  
 136  .wp-core-ui .button.hover,
 137  .wp-core-ui .button:hover,
 138  .wp-core-ui .button-secondary:hover,
 139  .wp-core-ui .button.focus,
 140  .wp-core-ui .button:focus,
 141  .wp-core-ui .button-secondary:focus {
 142      background: #fafafa;
 143      border-color: #999;
 144      color: #222;
 145  }
 146  
 147  .wp-core-ui .button.focus,
 148  .wp-core-ui .button:focus,
 149  .wp-core-ui .button-secondary:focus {
 150      -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
 151      box-shadow: 1px 1px 1px rgba(0,0,0,.2);
 152  }
 153  
 154  .wp-core-ui .button.active,
 155  .wp-core-ui .button.active:hover,
 156  .wp-core-ui .button.active:focus,
 157  .wp-core-ui .button:active,
 158  .wp-core-ui .button-secondary:active {
 159      background: #eee;
 160      border-color: #999;
 161      color: #333;
 162      -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
 163       box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
 164  }
 165  
 166  .wp-core-ui .button[disabled],
 167  .wp-core-ui .button:disabled,
 168  .wp-core-ui .button-secondary[disabled],
 169  .wp-core-ui .button-secondary:disabled,
 170  .wp-core-ui .button-disabled {
 171      color: #aaa !important;
 172      border-color: #ddd !important;
 173      -webkit-box-shadow: none !important;
 174      box-shadow:         none !important;
 175      text-shadow: 0 1px 0 #fff !important;
 176      cursor: default;
 177  }
 178  
 179  /* ----------------------------------------------------------------------------
 180    3.0 - Primary Button Style
 181  ---------------------------------------------------------------------------- */
 182  
 183  .wp-core-ui .button-primary {
 184      background: #2ea2cc;
 185      border-color: #0074a2; 
 186      -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15);
 187       box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15);
 188       color: #fff;
 189      text-decoration: none;
 190  }
 191  
 192  .wp-core-ui .button-primary.hover,
 193  .wp-core-ui .button-primary:hover,
 194  .wp-core-ui .button-primary.focus,
 195  .wp-core-ui .button-primary:focus {
 196      background: #1e8cbe;
 197      border-color: #0074a2;
 198      -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
 199       box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
 200      color: #fff;
 201  }
 202  
 203  .wp-core-ui .button-primary.focus,
 204  .wp-core-ui .button-primary:focus {
 205      border-color: #0e3950;
 206      -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
 207      box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
 208  }
 209  
 210  .wp-core-ui .button-primary.active,
 211  .wp-core-ui .button-primary.active:hover,
 212  .wp-core-ui .button-primary.active:focus,
 213  .wp-core-ui .button-primary:active {
 214      background: #1e8cbe;
 215      border-color: #005684;
 216      color: rgba(255,255,255,0.95);
 217      -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
 218       box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
 219       vertical-align: top;
 220  }
 221  
 222  .wp-core-ui .button-primary[disabled],
 223  .wp-core-ui .button-primary:disabled,
 224  .wp-core-ui .button-primary-disabled {
 225      color: #94cde7 !important;
 226      background: #298cba !important;
 227      border-color: #1b607f !important;
 228      -webkit-box-shadow: none !important;
 229      box-shadow:         none !important;
 230      text-shadow: 0 -1px 0 rgba(0,0,0,0.1) !important;
 231      cursor: default;
 232  }
 233  
 234  /* ----------------------------------------------------------------------------
 235    4.0 - Button Groups
 236  ---------------------------------------------------------------------------- */
 237  
 238  .wp-core-ui .button-group {
 239      position: relative;
 240      display: inline-block;
 241      white-space: nowrap;
 242      font-size: 0;
 243      vertical-align: middle;
 244  }
 245  
 246  .wp-core-ui .button-group > .button {
 247      display: inline-block;
 248      border-radius: 0;
 249      margin-right: -1px;
 250      z-index: 10;
 251  }
 252  
 253  .wp-core-ui .button-group > .button-primary {
 254      z-index: 100;
 255  }
 256  
 257  .wp-core-ui .button-group > .button:hover {
 258      z-index: 20;
 259  }
 260  
 261  .wp-core-ui .button-group > .button:first-child {
 262      border-radius: 3px 0 0 3px;
 263  }
 264  
 265  .wp-core-ui .button-group > .button:last-child {
 266      border-radius: 0 3px 3px 0;
 267  }
 268  
 269  /* ----------------------------------------------------------------------------
 270    5.0 - Responsive Button Styles
 271  ---------------------------------------------------------------------------- */
 272  
 273  @media screen and ( max-width: 782px ) {
 274  
 275      .wp-core-ui .button,
 276      .wp-core-ui .button.button-large,
 277      .wp-core-ui .button.button-small,
 278      input#publish,
 279      input#save-post,
 280      a.preview {
 281          padding: 10px 14px;
 282          line-height: 1;
 283          font-size: 14px;
 284          vertical-align: middle;
 285          height: auto;
 286          margin-bottom: 4px;
 287      }
 288      
 289      #media-upload.wp-core-ui .button {
 290          padding: 0 10px 1px;
 291          height: 24px;
 292          line-height: 22px;
 293          font-size: 13px;
 294      }
 295  
 296      /* Publish Metabox Options */
 297      .wp-core-ui .save-post-status.button {
 298          position: relative;
 299          margin: 0 14px 0 10px; /* 14px right margin to match all other buttons */
 300      }
 301      
 302      /* Reset responsive styles in Press This, Customizer */
 303  
 304      .wp-core-ui.wp-customizer .button,
 305      .press-this.wp-core-ui .button,
 306      .press-this input#publish,
 307      .press-this input#save-post,
 308      .press-this a.preview {
 309          padding: 0 10px 1px;
 310          font-size: 13px;
 311          line-height: 26px;
 312          height: 28px;
 313          margin: 0;
 314          vertical-align: inherit;
 315      }
 316      
 317      /* Reset responsive styles on Log in button on iframed login form */
 318      
 319      .interim-login .button.button-large {
 320          height: 30px;
 321          line-height: 28px;
 322          padding: 0 12px 2px;
 323      }
 324      
 325  }