3 outline: none!important;
\r
8 padding: 0.85rem 2.13rem;
\r
11 padding: 1rem 2.4rem;
\r
15 padding: 0.7rem 1.6rem;
\r
19 padding: 0.5rem 1.6rem;
\r
21 padding: 0.5rem 0.9rem;
\r
33 transition: .2s ease-out;
\r
34 color: #fff!important;
\r
36 white-space: normal !important;
\r
37 word-wrap: break-word;
\r
38 text-transform: uppercase;
\r
40 @extend .z-depth-1-half;
\r
48 @extend .z-depth-1-half;
\r
53 vertical-align: middle;
\r
76 background-color: $secondary-color;
\r
80 background-color: lighten( $secondary-color, 5%)!important;
\r
84 background-color: darken( $secondary-color, 20%)!important;
\r
85 @extend .z-depth-1-half;
\r
94 color: #fff!important;
\r
95 background-color: $secondary-color!important;
\r
96 @extend .z-depth-1-half;
\r
99 background-color: lighten( $secondary-color, 5%)!important;
\r
103 background-color: $secondary-color;
\r
108 .btn-secondary:active:hover {
\r
109 background-color: lighten( $secondary-color, 5%)!important;
\r
113 background: $primary-color;
\r
117 background-color: lighten( $primary-color, 5%)!important;
\r
120 background-color: darken( $primary-color, 20%)!important;
\r
121 @extend .z-depth-1-half;
\r
126 background: $default-color;
\r
130 background-color: lighten( $default-color, 5%)!important;
\r
133 background-color: darken( $default-color, 20%)!important;
\r
134 @extend .z-depth-1-half;
\r
139 background: $success-color;
\r
143 background-color: lighten( $success-color, 2%)!important;
\r
146 background-color: darken( $success-color, 20%)!important;
\r
147 @extend .z-depth-1-half;
\r
152 background: $info-color;
\r
155 background-color: lighten( $info-color, 5%)!important;
\r
158 background-color: darken( $info-color, 20%)!important;
\r
159 @extend .z-depth-1-half;
\r
164 background: $warning-color-dark;
\r
167 background-color: lighten( $warning-color-dark, 6%)!important;
\r
170 background-color: darken( $warning-color, 20%)!important;
\r
171 @extend .z-depth-1-half;
\r
176 background: $danger-color-dark;
\r
179 background-color: lighten( $danger-color-dark, 3%)!important;
\r
182 background-color: darken( $danger-color-dark, 15%)!important;
\r
183 @extend .z-depth-1-half;
\r
188 background-color: transparent;
\r
189 color: #000!important;
\r
192 background-color: transparent;
\r
197 // Additional button styles
\r
198 .btn-outline-primary {
\r
199 border: 2px solid $primary-color;
\r
200 color: $primary-color-dark!important;
\r
201 background-color: transparent;
\r
206 color: $primary-color;
\r
207 border-color: $primary-color;
\r
208 background-color: transparent;
\r
212 .btn-outline-secondary {
\r
213 border: 2px solid $secondary-color;
\r
214 color: $secondary-color-dark!important;
\r
215 background-color: transparent;
\r
220 color: $secondary-color;
\r
221 border: 2px solid $secondary-color;
\r
222 background-color: transparent;
\r
226 .btn-outline-default {
\r
227 background-color: transparent;
\r
228 border: 2px solid $default-color;
\r
229 color: $default-color-dark!important;
\r
230 background-color: transparent;
\r
235 color: $default-color;
\r
236 border-color: $default-color;
\r
237 background-color:transparent;
\r
241 .btn-outline-success {
\r
242 border: 2px solid $success-color;
\r
243 color: $success-color-dark!important;
\r
244 background-color: transparent;
\r
249 color: $success-color;
\r
250 border-color: $success-color;
\r
251 background-color: transparent;
\r
255 .btn-outline-info {
\r
256 border: 2px solid $info-color;
\r
257 color: $info-color-dark!important;
\r
258 background-color: transparent;
\r
263 color: $info-color;
\r
264 border-color: $info-color;
\r
265 background-color: transparent;
\r
270 .btn-outline-warning {
\r
271 border: 2px solid $warning-color;
\r
272 color: $warning-color-dark!important;
\r
273 background-color: transparent;
\r
278 border-color: $warning-color;
\r
279 color: $warning-color;
\r
280 background-color: transparent;
\r
284 .btn-outline-danger {
\r
285 border: 2px solid $danger-color;
\r
286 color: $danger-color-dark!important;
\r
287 background-color: transparent;
\r
292 color: $danger-color;
\r
293 border-color: $danger-color;
\r
294 background-color: transparent;
\r
298 .btn-outline-white {
\r
299 border: 2px solid #fff;
\r
300 color: #fff!important;
\r
301 background-color: transparent;
\r
306 color: darken( #fff, 10%);
\r
307 border-color: #fff;
\r
308 background-color:transparent;
\r
312 .btn-outline-black {
\r
313 border: 2px solid #000;
\r
314 color: #000!important;
\r
315 background-color: transparent;
\r
321 border-color: #000;
\r
322 background-color: transparent;
\r
329 @extend .z-depth-1;
\r
330 transition: .2s ease-out;
\r
332 @extend .z-depth-1-half;
\r
336 // Additional buttons colors
\r
338 background: $elegant-color;
\r
341 background-color: lighten( $elegant-color, 5%)!important;
\r
344 background-color: darken( $elegant-color, 20%)!important;
\r
345 @extend .z-depth-1-half;
\r
350 background: $unique-color-dark;
\r
353 background-color: lighten( $unique-color-dark, 5%)!important;
\r
356 background-color: darken( $unique-color-dark, 20%)!important;
\r
357 @extend .z-depth-1-half;
\r
362 background: #e91e63;
\r
365 background-color: lighten(#e91e63, 5%)!important;
\r
368 background-color: darken(#e91e63, 20%)!important;
\r
369 @extend .z-depth-1-half;
\r
374 background: #4a148c;
\r
377 background-color: lighten(#4a148c, 5%)!important;
\r
380 background-color: darken(#4a148c, 20%)!important;
\r
381 @extend .z-depth-1-half;
\r
386 background: #311b92;
\r
389 background-color: lighten(#311b92, 5%)!important;
\r
392 background-color: darken(#311b92, 20%)!important;
\r
393 @extend .z-depth-1-half;
\r
398 background: #1a237e;
\r
401 background-color: lighten(#1a237e, 5%)!important;
\r
404 background-color: darken(#1a237e, 20%)!important;
\r
405 @extend .z-depth-1-half;
\r
410 background: #00acc1;
\r
413 background-color: lighten(#00acc1, 5%)!important;
\r
416 background-color: darken(#00acc1, 20%)!important;
\r
417 @extend .z-depth-1-half;
\r
422 background: #7cb342;
\r
425 background-color: lighten(#7cb342, 5%)!important;
\r
428 background-color: darken(#7cb342, 20%)!important;
\r
429 @extend .z-depth-1-half;
\r
434 background: #007E33;
\r
437 background-color: lighten(#007E33, 5%)!important;
\r
440 background-color: darken(#007E33, 20%)!important;
\r
441 @extend .z-depth-1-half;
\r
446 background: #afb42b;
\r
449 background-color: lighten(#afb42b, 5%)!important;
\r
452 background-color: darken(#afb42b, 20%)!important;
\r
453 @extend .z-depth-1-half;
\r
458 background: #fbc02d;
\r
461 background-color: lighten(#fbc02d, 5%)!important;
\r
464 background-color: darken(#fbc02d, 20%)!important;
\r
465 @extend .z-depth-1-half;
\r
470 background: #ff6f00;
\r
473 background-color: lighten(#ff6f00, 5%)!important;
\r
476 background-color: darken(#ff6f00, 20%)!important;
\r
477 @extend .z-depth-1-half;
\r
482 background: #e65100;
\r
485 background-color: lighten(#e65100, 5%)!important;
\r
488 background-color: darken(#e65100, 20%)!important;
\r
489 @extend .z-depth-1-half;
\r
494 background: #bf360c;
\r
497 background-color: lighten(#bf360c, 5%)!important;
\r
500 background-color: darken(#bf360c, 20%)!important;
\r
501 @extend .z-depth-1-half;
\r
506 background: #6d4c41;
\r
509 background-color: lighten(#6d4c41, 5%)!important;
\r
512 background-color: darken(#6d4c41, 20%)!important;
\r
513 @extend .z-depth-1-half;
\r
518 background: #607d8b;
\r
521 background-color: lighten(#607d8b, 5%)!important;
\r
524 background-color: darken(#607d8b, 20%)!important;
\r
525 @extend .z-depth-1-half;
\r
530 background: #45526E;
\r
533 background-color: lighten(#45526E, 5%)!important;
\r
536 background-color: darken(#45526E, 20%)!important;
\r
537 @extend .z-depth-1-half;
\r
544 background-color: #aa66cc;
\r
545 cursor: not-allowed;
\r
546 pointer-events: auto !important;
\r
551 padding-left: 0.85rem;
\r
552 padding-right: 1.25rem;
\r