wp-includes/css/buttons.css

   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
  31 ---------------------------------------------------------------------------- */
  32
  33 /* ----------------------------------------------------------------------------
  34   1.0 - Button Layouts
  35 ---------------------------------------------------------------------------- */
  36
  37 .wp-core-ui .button,
  38 .wp-core-ui .button-primary,
  39 .wp-core-ui .button-secondary {
  40         display: inline-block;
  41         text-decoration: none;
  42         font-size: 12px;
  43         line-height: 23px;
  44         height: 24px;
  45         margin: 0;
  46         padding: 0 10px 1px;
  47         cursor: pointer;
  48         border-width: 1px;
  49         border-style: solid;
  50         -webkit-border-radius: 3px;
  51         -webkit-appearance: none;
  52         border-radius: 3px;
  53         white-space: nowrap;
  54         -webkit-box-sizing: border-box;
  55         -moz-box-sizing:    border-box;
  56         box-sizing:         border-box;
  57 }
  58
  59 /* Remove the dotted border on :focus and the extra padding in Firefox */
  60 .wp-core-ui button::-moz-focus-inner,
  61 .wp-core-ui input[type="reset"]::-moz-focus-inner,
  62 .wp-core-ui input[type="button"]::-moz-focus-inner,
  63 .wp-core-ui input[type="submit"]::-moz-focus-inner {
  64         border-width: 1px 0;
  65         border-style: solid none;
  66         border-color: transparent;
  67         padding: 0;
  68 }
  69
  70 .wp-core-ui .button.button-large,
  71 .wp-core-ui .button-group.button-large .button {
  72         height: 30px;
  73     line-height: 28px;
  74     padding: 0 12px 2px;
  75 }
  76
  77 .wp-core-ui .button.button-small,
  78 .wp-core-ui .button-group.button-small .button {
  79         height: 21px;
  80         line-height: 20px;
  81         padding: 0 8px 1px;
  82 }
  83
  84 .wp-core-ui .button.button-hero,
  85 .wp-core-ui .button-group.button-hero .button {
  86         font-size: 14px;
  87         height: 46px;
  88         line-height: 44px;
  89         padding: 0 36px;
  90 }
  91
  92 .wp-core-ui .button:active {
  93         outline: none;
  94 }
  95
  96 .wp-core-ui .button.hidden {
  97         display: none;
  98 }
  99
 100 /* ----------------------------------------------------------------------------
 101   2.0 - Default Button Style
 102 ---------------------------------------------------------------------------- */
 103
 104 .wp-core-ui .button,
 105 .wp-core-ui .button-secondary {
 106         background: #f3f3f3;
 107         background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4));
 108         background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4);
 109         background-image:    -moz-linear-gradient(top, #fefefe, #f4f4f4);
 110         background-image:      -o-linear-gradient(top, #fefefe, #f4f4f4);
 111         background-image:   linear-gradient(to bottom, #fefefe, #f4f4f4);
 112         border-color: #bbb;
 113         color: #333;
 114         text-shadow: 0 1px 0 #fff;
 115 }
 116
 117 .wp-core-ui .button.hover,
 118 .wp-core-ui .button:hover,
 119 .wp-core-ui .button-secondary:hover,
 120 .wp-core-ui .button.focus,
 121 .wp-core-ui .button:focus,
 122 .wp-core-ui .button-secondary:focus {
 123         background: #f3f3f3;
 124         background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3));
 125         background-image: -webkit-linear-gradient(top, #fff, #f3f3f3);
 126         background-image:    -moz-linear-gradient(top, #fff, #f3f3f3);
 127         background-image:     -ms-linear-gradient(top, #fff, #f3f3f3);
 128         background-image:      -o-linear-gradient(top, #fff, #f3f3f3);
 129         background-image:   linear-gradient(to bottom, #fff, #f3f3f3);
 130         border-color: #999;
 131         color: #222;
 132 }
 133
 134 .wp-core-ui .button.focus,
 135 .wp-core-ui .button:focus,
 136 .wp-core-ui .button-secondary:focus {
 137         -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
 138         box-shadow: 1px 1px 1px rgba(0,0,0,.2);
 139 }
 140
 141 .wp-core-ui .button.active,
 142 .wp-core-ui .button.active:hover,
 143 .wp-core-ui .button.active:focus,
 144 .wp-core-ui .button:active,
 145 .wp-core-ui .button-secondary:active {
 146         background: #eee;
 147         background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#fefefe));
 148         background-image: -webkit-linear-gradient(top, #f4f4f4, #fefefe);
 149         background-image:    -moz-linear-gradient(top, #f4f4f4, #fefefe);
 150         background-image:     -ms-linear-gradient(top, #f4f4f4, #fefefe);
 151         background-image:      -o-linear-gradient(top, #f4f4f4, #fefefe);
 152         background-image:   linear-gradient(to bottom, #f4f4f4, #fefefe);
 153         border-color: #999;
 154         color: #333;
 155         text-shadow: 0 -1px 0 #fff;
 156         -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
 157         box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
 158 }
 159
 160 .wp-core-ui .button[disabled],
 161 .wp-core-ui .button:disabled,
 162 .wp-core-ui .button-secondary[disabled],
 163 .wp-core-ui .button-secondary:disabled,
 164 .wp-core-ui .button-disabled {
 165         color: #aaa !important;
 166         border-color: #ddd !important;
 167         background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f4f4f4)) !important;
 168         background-image: -webkit-linear-gradient(top, #f9f9f9, #f4f4f4) !important;
 169         background-image:    -moz-linear-gradient(top, #f9f9f9, #f4f4f4) !important;
 170         background-image:     -ms-linear-gradient(top, #f9f9f9, #f4f4f4) !important;
 171         background-image:      -o-linear-gradient(top, #f9f9f9, #f4f4f4) !important;
 172         background-image:   linear-gradient(to bottom, #f9f9f9, #f4f4f4) !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-color: #21759b;
 185         background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b));
 186         background-image: -webkit-linear-gradient(top, #2a95c5, #21759b);
 187         background-image:    -moz-linear-gradient(top, #2a95c5, #21759b);
 188         background-image:     -ms-linear-gradient(top, #2a95c5, #21759b);
 189         background-image:      -o-linear-gradient(top, #2a95c5, #21759b);
 190         background-image:   linear-gradient(to bottom, #2a95c5, #21759b);
 191         border-color: #21759b;
 192         border-bottom-color: #1e6a8d;
 193         -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
 194         box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
 195         color: #fff;
 196         text-decoration: none;
 197         text-shadow: 0 1px 0 rgba(0,0,0,0.1);
 198 }
 199
 200 .wp-core-ui .button-primary.hover,
 201 .wp-core-ui .button-primary:hover,
 202 .wp-core-ui .button-primary.focus,
 203 .wp-core-ui .button-primary:focus {
 204         background-color: #278ab7;
 205         background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b));
 206         background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b);
 207         background-image:    -moz-linear-gradient(top, #2e9fd2, #21759b);
 208         background-image:     -ms-linear-gradient(top, #2e9fd2, #21759b);
 209         background-image:      -o-linear-gradient(top, #2e9fd2, #21759b);
 210         background-image:   linear-gradient(to bottom, #2e9fd2, #21759b);
 211         border-color: #1b607f;
 212         -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
 213         box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
 214         color: #fff;
 215         text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
 216 }
 217
 218 .wp-core-ui .button-primary.focus,
 219 .wp-core-ui .button-primary:focus {
 220         border-color: #0e3950;
 221         -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
 222         box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
 223 }
 224
 225 .wp-core-ui .button-primary.active,
 226 .wp-core-ui .button-primary.active:hover,
 227 .wp-core-ui .button-primary.active:focus,
 228 .wp-core-ui .button-primary:active {
 229         background: #1b607f;
 230         background-image: -webkit-gradient(linear, left top, left bottom, from(#21759b), to(#278ab7));
 231         background-image: -webkit-linear-gradient(top, #21759b, #278ab7);
 232         background-image:    -moz-linear-gradient(top, #21759b, #278ab7);
 233         background-image:     -ms-linear-gradient(top, #21759b, #278ab7);
 234         background-image:      -o-linear-gradient(top, #21759b, #278ab7);
 235         background-image:   linear-gradient(to bottom, #21759b, #278ab7);
 236         border-color: #124560 #2382ae #2382ae #2382ae;
 237         color: rgba(255,255,255,0.95);
 238         -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
 239         box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
 240         text-shadow: 0 1px 0 rgba(0,0,0,0.1);
 241 }
 242
 243 .wp-core-ui .button-primary[disabled],
 244 .wp-core-ui .button-primary:disabled,
 245 .wp-core-ui .button-primary-disabled {
 246         color: #94cde7 !important;
 247         background: #298cba !important;
 248         border-color: #1b607f !important;
 249         -webkit-box-shadow: none !important;
 250         box-shadow:         none !important;
 251         text-shadow: 0 -1px 0 rgba(0,0,0,0.1) !important;
 252         cursor: default;
 253 }
 254
 255 /* ----------------------------------------------------------------------------
 256   4.0 - Button Groups
 257 ---------------------------------------------------------------------------- */
 258
 259 .wp-core-ui .button-group {
 260         position: relative;
 261         display: inline-block;
 262         white-space: nowrap;
 263         font-size: 0;
 264         vertical-align: middle;
 265 }
 266
 267 .wp-core-ui .button-group > .button {
 268         display: inline-block;
 269         border-radius: 0;
 270         margin-right: -1px;
 271         z-index: 10;
 272 }
 273
 274 .wp-core-ui .button-group > .button-primary {
 275         z-index: 100;
 276 }
 277
 278 .wp-core-ui .button-group > .button:hover {
 279         z-index: 20;
 280 }
 281
 282 .wp-core-ui .button-group > .button:first-child {
 283         border-radius: 3px 0 0 3px;
 284 }
 285
 286 .wp-core-ui .button-group > .button:last-child {
 287         border-radius: 0 3px 3px 0;
 288 }