Newer
Older
input[type="submit"],
input[type="button"],
input[type="reset"],
button.qui-button,
button,
a.qui-button,
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, opacity .15s ease-in-out;
cursor: pointer;
font-family: 'Maven Pro', Verdana, sans-serif;
-webkit-box-shadow: none; /* qui-button reset */
-moz-box-shadow: none; /* qui-button reset */
box-shadow: none; /* qui-button reset */
float: none; /* qui-button reset */
}
Michael Danielczok
committed
button > .fa:not(:only-child),
.btn > .fa:not(:only-child) {
margin-right: .75rem;
}
/*****************************/
/* button primary & standard */
/*****************************/
input[type="submit"],
input[type="submit"]:disabled,
input[type="submit"][disabled],
input[type="button"],
input[type="button"]:disabled,
input[type="button"][disabled],
input[type="reset"],
input[type="reset"]:disabled,
input[type="reset"][disabled],
button.qui-button,
button.qui-button:disabled,
button.qui-button[disabled],
button,
button:disabled,
button[disabled],
a.qui-button,
.btn-primary {
background-color: #3986dd;
border-color: #3986dd;
color: #fff;
}
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="button"]:hover,
input[type="button"]:active,
input[type="reset"]:hover,
input[type="reset"]:active,
button.qui-button:hover,
button.qui-button:active,
button.qui-button.btn-primary:hover,
button.qui-button.btn-primary:active,
button.qui-button[disabled]:hover,
button.qui-button[disabled]:active,
button:hover,
button:active,
.btn-primary:hover,
background: #2976cd;
color: #fff;
outline: none;
}
input[type="submit"].btn-outline,
input[type="button"].btn-outline,
input[type="reset"].btn-outline,
button.qui-button.btn-outline,
button.btn-outline,
.btn-primary.btn-outline,
input[type="submit"].btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-outline:disabled:active,
input[type="button"].btn-outline:disabled:hover,
input[type="button"].btn-outline:disabled:active,
input[type="reset"].btn-outline:disabled:hover,
input[type="reset"].btn-outline:disabled:active,
button.qui-button.btn-primary.btn-outline:disabled:hover,
button.qui-button.btn-primary.btn-outline:disabled:active,
button:disabled.btn-outline:hover,
button:disabled.btn-outline:active,
.btn-primary.btn-disabled.btn-outline:hover,
.btn-primary.btn-disabled.btn-outline:active {
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
color: #3986dd;
}
/***************/
/* button link */
/***************/
input[type="submit"].btn-link,
input[type="button"].btn-link,
input[type="reset"].btn-link,
button.qui-button.btn-link,
button.btn-link,
.btn-link {
background: none;
border: none;
color: #3986dd;
}
input[type="submit"].btn-link:hover,
input[type="submit"].btn-link:active,
input[type="button"].btn-link:hover,
input[type="button"].btn-link:active,
input[type="reset"].btn-link:hover,
input[type="reset"].btn-link:active,
button.qui-button.btn-link:hover,
button.qui-button.btn-link:active,
.btn-link:hover,
text-decoration: underline;
}
/********************/
/* button link dark */
/********************/
input[type="submit"].btn-link-dark,
input[type="button"].btn-link-dark,
input[type="reset"].btn-link-dark,
button.qui-button.btn-link-dark,
button.btn-link-dark,
.btn-link-dark {
background: none;
border: none;
color: inherit;
}
input[type="submit"].btn-link-dark:hover,
input[type="submit"].btn-link-dark:active,
input[type="button"].btn-link-dark:hover,
input[type="button"].btn-link-dark:active,
input[type="reset"].btn-link-dark:hover,
input[type="reset"].btn-link-dark:active,
button.qui-button.btn-link-dark:hover,
button.qui-button.btn-link-dark:active,
.btn-link-dark:hover,
color: #3986dd;
}
/********************/
/* button secondary */
/********************/
input[type="submit"].btn-secondary,
input[type="button"].btn-secondary,
input[type="reset"].btn-secondary,
button.qui-button.btn-secondary,
button.btn-secondary,
.btn-secondary {
background: #6c757d;
border-color: #6c757d;
color: #fff;
}
input[type="submit"].btn-secondary:hover,
input[type="submit"].btn-secondary:active,
input[type="button"].btn-secondary:hover,
input[type="button"].btn-secondary:active,
input[type="reset"].btn-secondary:hover,
input[type="reset"].btn-secondary:active,
button.qui-button.btn-secondary:hover,
button.qui-button.btn-secondary:active,
.btn-secondary:hover,
background: #5c656d;
color: #fff;
outline: none;
}
input[type="submit"].btn-secondary.btn-outline,
input[type="button"].btn-secondary.btn-outline,
input[type="reset"].btn-secondary.btn-outline,
button.btn-secondary.qui-button.btn-outline,
button.btn-secondary.btn-outline,
.btn-secondary.btn-outline,
input[type="submit"].btn-secondary.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-secondary.btn-outline:disabled:active,
input[type="button"].btn-secondary.btn-outline:disabled:hover,
input[type="button"].btn-secondary.btn-outline:disabled:active,
input[type="reset"].btn-secondary.btn-outline:disabled:hover,
input[type="reset"].btn-secondary.btn-outline:disabled:active,
button.qui-button.btn-secondary.btn-outline:disabled:hover,
button.qui-button.btn-secondary.btn-outline:disabled:active,
button.btn-secondary.btn-outline:disabled:hover,
button.btn-secondary.btn-outline:disabled:active,
.btn-secondary.btn-outline.btn-disabled:hover,
.btn-secondary.btn-outline.btn-disabled:active {
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
color: #6c757d;
}
/******************/
/* button success */
/******************/
input[type="submit"].btn-success,
input[type="button"].btn-success,
input[type="reset"].btn-success,
button.qui-button.btn-success,
button.btn-success,
.btn-success {
background: #28a745;
border-color: #28a745;
color: #fff;
}
input[type="submit"].btn-success:hover,
input[type="submit"].btn-success:active,
input[type="button"].btn-success:hover,
input[type="button"].btn-success:active,
input[type="reset"].btn-success:hover,
input[type="reset"].btn-success:active,
button.qui-button.btn-success:hover,
button.qui-button.btn-success:active,
.btn-success:hover,
background: #189735;
color: #fff;
outline: none;
}
input[type="submit"].btn-success.btn-outline,
input[type="button"].btn-success.btn-outline,
input[type="reset"].btn-success.btn-outline,
button.btn-success.qui-button.btn-outline,
button.btn-success.btn-outline,
.btn-success.btn-outline,
input[type="submit"].btn-success.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-success.btn-outline:disabled:active,
input[type="button"].btn-success.btn-outline:disabled:hover,
input[type="button"].btn-success.btn-outline:disabled:active,
input[type="reset"].btn-success.btn-outline:disabled:hover,
input[type="reset"].btn-success.btn-outline:disabled:active,
button.qui-button.btn-success.btn-outline:disabled:hover,
button.qui-button.btn-success.btn-outline:disabled:active,
button.btn-success.btn-outline:disabled:hover,
button.btn-success.btn-outline:disabled:active,
.btn-success.btn-outline.btn-disabled:hover,
.btn-success.btn-outline.btn-disabled:active {
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
color: #28a745;
}
/*****************/
/* button danger */
/*****************/
input[type="submit"].btn-danger,
input[type="button"].btn-danger,
input[type="reset"].btn-danger,
button.qui-button.btn-danger,
button.btn-danger,
.btn-danger {
background: #dc4139;
border-color: #dc4139;
color: #fff;
}
input[type="submit"].btn-danger:hover,
input[type="submit"].btn-danger:active,
input[type="button"].btn-danger:hover,
input[type="button"].btn-danger:active,
input[type="reset"].btn-danger:hover,
input[type="reset"].btn-danger:active,
button.qui-button.btn-danger:hover,
button.qui-button.btn-danger:active,
.btn-danger:hover,
background: #cc3129;
color: #fff;
outline: none;
}
input[type="submit"].btn-danger.btn-outline,
input[type="button"].btn-danger.btn-outline,
input[type="reset"].btn-danger.btn-outline,
button.btn-danger.qui-button.btn-outline,
button.btn-danger.btn-outline,
.btn-danger.btn-outline,
input[type="submit"].btn-danger.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-danger.btn-outline:disabled:active,
input[type="button"].btn-danger.btn-outline:disabled:hover,
input[type="button"].btn-danger.btn-outline:disabled:active,
input[type="reset"].btn-danger.btn-outline:disabled:hover,
input[type="reset"].btn-danger.btn-outline:disabled:active,
button.qui-button.btn-danger.btn-outline:disabled:hover,
button.qui-button.btn-danger.btn-outline:disabled:active,
button.btn-danger.btn-outline:disabled:hover,
button.btn-danger.btn-outline:disabled:active,
.btn-danger.btn-outline.btn-disabled:hover,
.btn-danger.btn-outline.btn-disabled:active {
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
color: #dc4139;
}
/******************/
/* button warning */
/******************/
input[type="submit"].btn-warning,
input[type="button"].btn-warning,
input[type="reset"].btn-warning,
button.qui-button.btn-warning,
button.btn-warning,
.btn-warning {
background: #ffd147;
border-color: #ffd147;
color: #333;
}
input[type="submit"].btn-warning:hover,
input[type="submit"].btn-warning:active,
input[type="button"].btn-warning:hover,
input[type="button"].btn-warning:active,
input[type="reset"].btn-warning:hover,
input[type="reset"].btn-warning:active,
button.qui-button.btn-warning:hover,
button.qui-button.btn-warning:active,
.btn-warning:hover,
background: #efc137;
color: #393f46;
outline: none;
}
input[type="submit"].btn-warning.btn-outline,
input[type="button"].btn-warning.btn-outline,
input[type="reset"].btn-warning.btn-outline,
button.btn-warning.qui-button.btn-outline,
button.btn-warning.btn-outline,
.btn-warning.btn-outline,
input[type="submit"].btn-warning.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-warning.btn-outline:disabled:active,
input[type="button"].btn-warning.btn-outline:disabled:hover,
input[type="button"].btn-warning.btn-outline:disabled:active,
input[type="reset"].btn-warning.btn-outline:disabled:hover,
input[type="reset"].btn-warning.btn-outline:disabled:active,
button.qui-button.btn-warning.btn-outline:disabled:hover,
button.qui-button.btn-warning.btn-outline:disabled:active,
button.btn-warning.btn-outline:disabled:hover,
button.btn-warning.btn-outline:disabled:active,
.btn-warning.btn-outline.btn-disabled:hover,
.btn-warning.btn-outline.btn-disabled:active {
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
color: #f4bd16;
}
/***************/
/* button info */
/***************/
input[type="submit"].btn-info,
input[type="button"].btn-info,
input[type="reset"].btn-info,
button.qui-button.btn-info,
button.btn-info,
.btn-info {
background: #51a1c0;
border-color: #51a1c0;
color: #fff;
}
input[type="submit"].btn-info:hover,
input[type="submit"].btn-info:active,
input[type="button"].btn-info:hover,
input[type="button"].btn-info:active,
input[type="reset"].btn-info:hover,
input[type="reset"].btn-info:active,
button.qui-button.btn-info:hover,
button.qui-button.btn-info:active,
.btn-info:hover,
background: #4191b0;
color: #fff;
outline: none;
}
input[type="submit"].btn-info.btn-outline,
input[type="button"].btn-info.btn-outline,
input[type="reset"].btn-info.btn-outline,
button.btn-info.qui-button.btn-outline,
button.btn-info.btn-outline,
.btn-info.btn-outline,
input[type="submit"].btn-info.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-info.btn-outline:disabled:active,
input[type="button"].btn-info.btn-outline:disabled:hover,
input[type="button"].btn-info.btn-outline:disabled:active,
input[type="reset"].btn-info.btn-outline:disabled:hover,
input[type="reset"].btn-info.btn-outline:disabled:active,
button.qui-button.btn-info.btn-outline:disabled:hover,
button.qui-button.btn-info.btn-outline:disabled:active,
button.btn-info.btn-outline:disabled:hover,
button.btn-info.btn-outline:disabled:active,
.btn-info.btn-outline.btn-disabled:hover,
.btn-info.btn-outline.btn-disabled:active {
color: #51a1c0;
}
/***************/
/* button dark */
/***************/
input[type="submit"].btn-dark,
input[type="button"].btn-dark,
input[type="reset"].btn-dark,
button.qui-button.btn-dark,
button.btn-dark,
.btn-dark {
background: #393f46;
border-color: #393f46;
color: #fff;
}
input[type="submit"].btn-dark:hover,
input[type="submit"].btn-dark:active,
input[type="button"].btn-dark:hover,
input[type="button"].btn-dark:active,
input[type="reset"].btn-dark:hover,
input[type="reset"].btn-dark:active,
button.qui-button.btn-dark:hover,
button.qui-button.btn-dark:active,
.btn-dark:hover,
background: #292f36;
color: #fff;
outline: none;
}
input[type="submit"].btn-dark.btn-outline,
input[type="button"].btn-dark.btn-outline,
input[type="reset"].btn-dark.btn-outline,
button.btn-dark.qui-button.btn-outline,
button.btn-dark.btn-outline,
.btn-dark.btn-outline,
input[type="submit"].btn-dark.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-dark.btn-outline:disabled:active,
input[type="button"].btn-dark.btn-outline:disabled:hover,
input[type="button"].btn-dark.btn-outline:disabled:active,
input[type="reset"].btn-dark.btn-outline:disabled:hover,
input[type="reset"].btn-dark.btn-outline:disabled:active,
button.qui-button.btn-dark.btn-outline:disabled:hover,
button.qui-button.btn-dark.btn-outline:disabled:active,
button.btn-dark.btn-outline:disabled:hover,
button.btn-dark.btn-outline:disabled:active,
.btn-dark.btn-outline.btn-disabled:hover,
.btn-dark.btn-outline.btn-disabled:active {
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
color: #393f46;
}
/***************/
/* button light */
/***************/
input[type="submit"].btn-light,
input[type="button"].btn-light,
input[type="reset"].btn-light,
button.qui-button.btn-light,
button.btn-light,
.btn-light {
background: #e5e5e5;
border-color: #e5e5e5;
color: #393f46;
}
input[type="submit"].btn-light:hover,
input[type="submit"].btn-light:active,
input[type="button"].btn-light:hover,
input[type="button"].btn-light:active,
input[type="reset"].btn-light:hover,
input[type="reset"].btn-light:active,
button.qui-button.btn-light:hover,
button.qui-button.btn-light:active,
.btn-light:hover,
background: #d5d5d5;
color: #393f46;
outline: none;
}
input[type="submit"].btn-light.btn-outline,
input[type="button"].btn-light.btn-outline,
input[type="reset"].btn-light.btn-outline,
button.btn-light.qui-button.btn-outline,
button.btn-light.btn-outline,
.btn-light.btn-outline,
input[type="submit"].btn-light.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-light.btn-outline:disabled:active,
input[type="button"].btn-light.btn-outline:disabled:hover,
input[type="button"].btn-light.btn-outline:disabled:active,
input[type="reset"].btn-light.btn-outline:disabled:hover,
input[type="reset"].btn-light.btn-outline:disabled:active,
button.qui-button.btn-light.btn-outline:disabled:hover,
button.qui-button.btn-light.btn-outline:disabled:active,
button.btn-light.btn-outline:disabled:hover,
button.btn-light.btn-outline:disabled:active,
.btn-light.btn-outline.btn-disabled:hover,
.btn-light.btn-outline.btn-disabled:active {
color: #aaa;
}
/****************/
/* button white */
/****************/
input[type="submit"].btn-white,
input[type="button"].btn-white,
input[type="reset"].btn-white,
button.qui-button.btn-white,
button.btn-white,
.btn-white {
background: #fafafa;
border-color: #fafafa;
color: #393f46;
}
input[type="submit"].btn-white:hover,
input[type="submit"].btn-white:active,
input[type="button"].btn-white:hover,
input[type="button"].btn-white:active,
input[type="reset"].btn-white:hover,
input[type="reset"].btn-white:active,
button.qui-button.btn-white:hover,
button.qui-button.btn-white:active,
.btn-white:hover,
background: #eaeaea;
color: #393f46;
outline: none;
}
/* outline */
input[type="submit"].btn-white.btn-outline,
input[type="button"].btn-white.btn-outline,
input[type="reset"].btn-white.btn-outline,
button.btn-white.qui-button.btn-outline,
button.btn-white.btn-outline,
.btn-white.btn-outline,
input[type="submit"].btn-white.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-white.btn-outline:disabled:active,
input[type="button"].btn-white.btn-outline:disabled:hover,
input[type="button"].btn-white.btn-outline:disabled:active,
input[type="reset"].btn-white.btn-outline:disabled:hover,
input[type="reset"].btn-white.btn-outline:disabled:active,
button.qui-button.btn-white.btn-outline:disabled:hover,
button.qui-button.btn-white.btn-outline:disabled:active,
button.btn-white.btn-outline:disabled:hover,
button.btn-white.btn-outline:disabled:active,
.btn-white.btn-outline.btn-disabled:hover,
.btn-white.btn-outline.btn-disabled:active {
color: #fafafa;
}
/* outline hover */
input[type="submit"].btn-white.btn-outline:hover,
input[type="submit"].btn-white.btn-outline:active,
input[type="button"].btn-white.btn-outline:hover,
input[type="button"].btn-white.btn-outline:active,
input[type="reset"].btn-white.btn-outline:hover,
input[type="reset"].btn-white.btn-outline:active,
button.btn-white.btn-outline:not(:disabled):hover,
button.btn-white.btn-outline:active,
.btn-white.btn-outline:hover,
/**********************************/
/* button outline standard design */
/**********************************/
input[type="submit"].btn-outline,
input[type="button"].btn-outline,
input[type="reset"].btn-outline,
button.btn-outline,
.btn-outline,
.qui-button.btn-outline,
a.qui-button.btn-outline,
button.qui-button.btn-outline {
background-color: transparent;
}
input[type="submit"].btn-outline:hover,
input[type="submit"].btn-outline:active,
input[type="button"].btn-outline:hover,
input[type="button"].btn-outline:active,
input[type="reset"].btn-outline:hover,
input[type="reset"].btn-outline:active,
button.btn-outline:not(:disabled):hover,
button.btn-outline:active,
.btn-outline:hover,
color: #fff;
}
/***********************************/
/* button disabled standard design */
/***********************************/
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
button.qui-button:disabled,
button:disabled,
.btn[disabled],
.btn:disabled,
a.qui-button.btn-disabled,
a.btn.btn-disabled,
opacity: 0.6;
[disabled]:hover,
:disabled:hover,
[disabled]:active,
:disabled:active,
[disabled]:hover > *,
:disabled:hover > * {
cursor: not-allowed;
}
input[type="submit"].btn-outline:disabled:hover,
input[type="submit"].btn-outline:disabled:active,
input[type="button"].btn-outline:disabled:hover,
input[type="button"].btn-outline:disabled:active,
input[type="reset"].btn-outline:disabled:hover,
input[type="reset"].btn-outline:disabled:active,
button.qui-button.btn-outline:disabled:hover,
button.qui-button.btn-outline:disabled:active,
button.btn-outline:disabled:hover,
button.btn-outline:disabled:active,
.btn-outline.btn-disabled:hover,
.btn-outline.btn-disabled:active {
opacity: 0.3;
}
/****************/
/* button sizes */
/****************/
.btn-small,
input[type="submit"].btn-small,
input[type="button"].btn-small,
input[type="reset"].btn-small,
.qui-button.btn-small {
padding: .25rem .5rem;
font-size: .875rem;
line-height: 1.5;
border-radius: .2rem;
.btn-large,
input[type="submit"].btn-large,
input[type="button"].btn-large,
input[type="reset"].btn-large,
.qui-button.btn-large {
padding: .5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: .3rem;