1 | @mixin btn($color) {
|
---|
2 | background: $color;
|
---|
3 | border-color: $color;
|
---|
4 |
|
---|
5 | &:not(:disabled):not(.disabled):hover,
|
---|
6 | &:not(:disabled):not(.disabled):focus,
|
---|
7 | &:not(:disabled):not(.disabled):active {
|
---|
8 | background: darken($color, 10%);
|
---|
9 | border-color: darken($color, 10%);
|
---|
10 | }
|
---|
11 |
|
---|
12 | &:not(:disabled):not(.disabled):focus {
|
---|
13 | box-shadow: 0 0 0 0.2rem rgba($color, 0.4) !important;
|
---|
14 | }
|
---|
15 | @include btn-pulse($color);
|
---|
16 | }
|
---|
17 |
|
---|
18 | @mixin btn-gradient($color) {
|
---|
19 | background: linear-gradient(20deg, lighten($color, 15%), darken($color, 10%));
|
---|
20 | border-color: transparent;
|
---|
21 | color: white;
|
---|
22 |
|
---|
23 | &:not(:disabled):not(.disabled):hover,
|
---|
24 | &:not(:disabled):not(.disabled):focus,
|
---|
25 | &:not(:disabled):not(.disabled):active {
|
---|
26 | background: linear-gradient(20deg, $color, darken($color, 10%));
|
---|
27 | border-color: transparent;
|
---|
28 | }
|
---|
29 |
|
---|
30 | &:not(:disabled):not(.disabled):focus {
|
---|
31 | box-shadow: 0 0 0 0.2rem rgba($color, 0.5);
|
---|
32 | }
|
---|
33 | @include btn-pulse($color);
|
---|
34 | }
|
---|
35 |
|
---|
36 | @mixin btn-outline($color) {
|
---|
37 | background: none;
|
---|
38 | border-color: $color;
|
---|
39 | color: darken($color, 5%);
|
---|
40 | border-width: 1px;
|
---|
41 |
|
---|
42 | &:not(:disabled):not(.disabled):hover {
|
---|
43 | background: $color;
|
---|
44 | border-color: $color;
|
---|
45 | color: white;
|
---|
46 | }
|
---|
47 |
|
---|
48 | &:not(:disabled):not(.disabled):focus,
|
---|
49 | &:not(:disabled):not(.disabled):active {
|
---|
50 | background: darken($color, 12%);
|
---|
51 | border-color: darken($color, 12%);
|
---|
52 | color: white;
|
---|
53 | }
|
---|
54 | &:not(:disabled):not(.disabled):focus {
|
---|
55 | box-shadow: 0 0 0 0.2rem rgba($color, 0.4);
|
---|
56 | }
|
---|
57 | @include btn-pulse($color);
|
---|
58 | }
|
---|
59 |
|
---|
60 | @mixin btn-light($color) {
|
---|
61 | background: rgba($color, 0.3);
|
---|
62 | border-color: transparent;
|
---|
63 | color: darken($color, 18%);
|
---|
64 |
|
---|
65 | &:not(:disabled):not(.disabled):hover,
|
---|
66 | &:not(:disabled):not(.disabled):focus,
|
---|
67 | &:not(:disabled):not(.disabled):active {
|
---|
68 | background: rgba($color, 0.5);
|
---|
69 | border-color: transparent;
|
---|
70 | }
|
---|
71 |
|
---|
72 | &:not(:disabled):not(.disabled):focus {
|
---|
73 | box-shadow: 0 0 0 0.2rem rgba($color, 0.2);
|
---|
74 | }
|
---|
75 | @include btn-pulse(rgba($color, 0.3));
|
---|
76 | }
|
---|
77 |
|
---|
78 | @mixin btn-pulse($color) {
|
---|
79 | &.btn-pulse:not(:disabled):not(.disabled) {
|
---|
80 | box-shadow: 0 0 0 0 rgba($color, 0.9) !important;
|
---|
81 | -webkit-animation: pulse 1.5s infinite !important;
|
---|
82 | }
|
---|
83 | &:hover {
|
---|
84 | -webkit-animation: none;
|
---|
85 | }
|
---|
86 | }
|
---|
87 |
|
---|
88 | a {
|
---|
89 | color: lighten(black, 40%);
|
---|
90 | text-decoration: none;
|
---|
91 | transition: color .2s;
|
---|
92 |
|
---|
93 | &:hover {
|
---|
94 | color: black;
|
---|
95 | text-decoration: none;
|
---|
96 | }
|
---|
97 |
|
---|
98 | &.link-1 {
|
---|
99 | color: $color-primary;
|
---|
100 |
|
---|
101 | &:hover, &:focus {
|
---|
102 | color: rgba($color-primary, .8);
|
---|
103 | }
|
---|
104 | }
|
---|
105 |
|
---|
106 | &.link-2 {
|
---|
107 | color: black;
|
---|
108 |
|
---|
109 | &:hover, &:focus {
|
---|
110 | color: $color-primary
|
---|
111 | }
|
---|
112 | }
|
---|
113 |
|
---|
114 | &.link-3 {
|
---|
115 | color: white;
|
---|
116 |
|
---|
117 | &:hover, &:focus {
|
---|
118 | color: $color-primary
|
---|
119 | }
|
---|
120 | }
|
---|
121 |
|
---|
122 | &:not(.active.list-group-item), &:not(.btn):hover, &:not(.btn):active, &:not(.btn):focus {
|
---|
123 | text-decoration: none !important;
|
---|
124 | color: black;
|
---|
125 | outline: none;
|
---|
126 | }
|
---|
127 |
|
---|
128 | &.btn {
|
---|
129 | &:hover, &:active, &:focus {
|
---|
130 | text-decoration: none !important;
|
---|
131 | }
|
---|
132 | }
|
---|
133 |
|
---|
134 | &[href="#next"], &[href="#previous"] {
|
---|
135 | @extend .btn-primary
|
---|
136 | }
|
---|
137 | }
|
---|
138 |
|
---|
139 | .page-link {
|
---|
140 | color: $color-primary;
|
---|
141 |
|
---|
142 | &:not(:disabled):not(.disabled):focus {
|
---|
143 | box-shadow: 0 0 0 0.2rem rgba($color-primary, .3);
|
---|
144 | }
|
---|
145 | }
|
---|
146 |
|
---|
147 | .btn {
|
---|
148 | font-size: $default-font-size;
|
---|
149 | width: auto;
|
---|
150 | display: inline-flex;
|
---|
151 | font-weight: 600;
|
---|
152 | align-items: center;
|
---|
153 | padding: 10px 15px;
|
---|
154 | line-height: $default-font-size;
|
---|
155 | border-radius: .5rem;
|
---|
156 |
|
---|
157 | svg {
|
---|
158 | width: 14px !important;
|
---|
159 | height: 14px !important;
|
---|
160 | }
|
---|
161 |
|
---|
162 | &[data-toggle="dropdown"] {
|
---|
163 | align-items: center;
|
---|
164 | }
|
---|
165 |
|
---|
166 | &.btn-sm {
|
---|
167 | padding: 5px 10px;
|
---|
168 | font-size: $default-font-size - 1;
|
---|
169 | }
|
---|
170 |
|
---|
171 | &.btn-lg {
|
---|
172 | padding: 15px 20px;
|
---|
173 | font-size: $default-font-size + 3;
|
---|
174 | }
|
---|
175 |
|
---|
176 | &.btn-block {
|
---|
177 | width: 100%;
|
---|
178 | justify-content: center;
|
---|
179 | }
|
---|
180 |
|
---|
181 | &.btn-square {
|
---|
182 | border-radius: 0;
|
---|
183 | }
|
---|
184 |
|
---|
185 | &.btn-rounded {
|
---|
186 | border-radius: 50px;
|
---|
187 | padding: 10px 20px;
|
---|
188 |
|
---|
189 | &.btn-sm {
|
---|
190 | padding: 5px 15px;
|
---|
191 | font-size: $default-font-size - 1;
|
---|
192 | }
|
---|
193 |
|
---|
194 | &.btn-lg {
|
---|
195 | padding: 20px 30px;
|
---|
196 | font-size: $default-font-size + 3;
|
---|
197 | }
|
---|
198 | }
|
---|
199 |
|
---|
200 | &.btn-floating {
|
---|
201 | height: 35px;
|
---|
202 | width: 35px;
|
---|
203 | padding: 0;
|
---|
204 | justify-content: center;
|
---|
205 | border-radius: 50%;
|
---|
206 |
|
---|
207 | &.btn-sm {
|
---|
208 | height: 30px;
|
---|
209 | width: 30px;
|
---|
210 | }
|
---|
211 |
|
---|
212 | &.btn-lg {
|
---|
213 | height: 50px;
|
---|
214 | width: 50px;
|
---|
215 | }
|
---|
216 | }
|
---|
217 |
|
---|
218 | &.btn-uppercase {
|
---|
219 | text-transform: uppercase;
|
---|
220 | font-size: $default-font-size - 2;
|
---|
221 | letter-spacing: 1px;
|
---|
222 | align-items: center;
|
---|
223 | font-weight: 600;
|
---|
224 |
|
---|
225 | &.btn-sm {
|
---|
226 | font-size: $default-font-size - 3;
|
---|
227 | }
|
---|
228 |
|
---|
229 | &.btn-lg {
|
---|
230 | font-size: $default-font-size;
|
---|
231 | }
|
---|
232 | }
|
---|
233 |
|
---|
234 | &.btn-shadow {
|
---|
235 | box-shadow: 0px 3px 4px 1px rgba(black, 0.3);
|
---|
236 |
|
---|
237 | &:focus,
|
---|
238 | &:active {
|
---|
239 | box-shadow: 0px 4px 6px 1px rgba(black, 0.3) !important;
|
---|
240 | }
|
---|
241 | }
|
---|
242 |
|
---|
243 | &.btn-primary {
|
---|
244 | @include btn($color-primary);
|
---|
245 | }
|
---|
246 |
|
---|
247 | &.btn-gradient-primary {
|
---|
248 | @include btn-gradient($color-primary);
|
---|
249 | }
|
---|
250 |
|
---|
251 | &.btn-light-primary {
|
---|
252 | @include btn-light($color-primary);
|
---|
253 | }
|
---|
254 |
|
---|
255 | &.btn-outline-primary {
|
---|
256 | @include btn-outline($color-primary);
|
---|
257 | }
|
---|
258 |
|
---|
259 | &.btn-secondary {
|
---|
260 | @include btn($color-secondary);
|
---|
261 | }
|
---|
262 |
|
---|
263 | &.btn-gradient-secondary {
|
---|
264 | @include btn-gradient($color-secondary);
|
---|
265 | }
|
---|
266 |
|
---|
267 | &.btn-light-secondary {
|
---|
268 | @include btn-light($color-secondary);
|
---|
269 | }
|
---|
270 |
|
---|
271 | &.btn-outline-secondary {
|
---|
272 | @include btn-outline($color-secondary);
|
---|
273 | }
|
---|
274 |
|
---|
275 | &.btn-success {
|
---|
276 | @include btn($color-success);
|
---|
277 | }
|
---|
278 |
|
---|
279 | &.btn-gradient-success {
|
---|
280 | @include btn-gradient($color-success);
|
---|
281 | }
|
---|
282 |
|
---|
283 | &.btn-light-success {
|
---|
284 | @include btn-light($color-success);
|
---|
285 | }
|
---|
286 |
|
---|
287 | &.btn-outline-success {
|
---|
288 | @include btn-outline($color-success);
|
---|
289 | }
|
---|
290 |
|
---|
291 | &.btn-danger {
|
---|
292 | @include btn($color-danger);
|
---|
293 | }
|
---|
294 |
|
---|
295 | &.btn-gradient-danger {
|
---|
296 | @include btn-gradient($color-danger);
|
---|
297 | }
|
---|
298 |
|
---|
299 | &.btn-light-danger {
|
---|
300 | @include btn-light($color-danger);
|
---|
301 | }
|
---|
302 |
|
---|
303 | &.btn-outline-danger {
|
---|
304 | @include btn-outline($color-danger);
|
---|
305 | }
|
---|
306 |
|
---|
307 | &.btn-warning {
|
---|
308 | @include btn($color-warning);
|
---|
309 | }
|
---|
310 |
|
---|
311 | &.btn-gradient-warning {
|
---|
312 | @include btn-gradient($color-warning);
|
---|
313 | color: #212529;
|
---|
314 | }
|
---|
315 |
|
---|
316 | &.btn-light-warning {
|
---|
317 | @include btn-light($color-warning);
|
---|
318 | }
|
---|
319 |
|
---|
320 | &.btn-outline-warning {
|
---|
321 | @include btn-outline($color-warning);
|
---|
322 |
|
---|
323 | &:not(:disabled):not(.disabled):hover,
|
---|
324 | &:not(:disabled):not(.disabled):focus,
|
---|
325 | &:not(:disabled):not(.disabled):active {
|
---|
326 | color: #212529;
|
---|
327 | }
|
---|
328 | }
|
---|
329 |
|
---|
330 | &.btn-info {
|
---|
331 | @include btn($color-info);
|
---|
332 | }
|
---|
333 |
|
---|
334 | &.btn-gradient-info {
|
---|
335 | @include btn-gradient($color-info);
|
---|
336 | }
|
---|
337 |
|
---|
338 | &.btn-light-info {
|
---|
339 | @include btn-light($color-info);
|
---|
340 | }
|
---|
341 |
|
---|
342 | &.btn-outline-info {
|
---|
343 | @include btn-outline($color-info);
|
---|
344 | }
|
---|
345 |
|
---|
346 | &.btn-light {
|
---|
347 | @include btn($color-light);
|
---|
348 | }
|
---|
349 |
|
---|
350 | &.btn-gradient-light {
|
---|
351 | @include btn-gradient($color-light);
|
---|
352 | color: inherit;
|
---|
353 | }
|
---|
354 |
|
---|
355 | &.btn-outline-light {
|
---|
356 | @include btn-outline($color-light);
|
---|
357 | color: #212529;
|
---|
358 |
|
---|
359 | &:not(:disabled):not(.disabled):hover,
|
---|
360 | &:not(:disabled):not(.disabled):focus,
|
---|
361 | &:not(:disabled):not(.disabled):active {
|
---|
362 | color: #212529;
|
---|
363 | }
|
---|
364 | }
|
---|
365 |
|
---|
366 | &.btn-dark {
|
---|
367 | @include btn($color-dark);
|
---|
368 | }
|
---|
369 |
|
---|
370 | &.btn-gradient-dark {
|
---|
371 | @include btn-gradient($color-dark);
|
---|
372 | }
|
---|
373 |
|
---|
374 | &.btn-light-dark {
|
---|
375 | @include btn-light($color-dark);
|
---|
376 | }
|
---|
377 |
|
---|
378 | &.btn-outline-dark {
|
---|
379 | @include btn-outline($color-dark);
|
---|
380 | }
|
---|
381 |
|
---|
382 | &.btn-facebook {
|
---|
383 | @include btn($color-facebook);
|
---|
384 | color: white;
|
---|
385 | }
|
---|
386 |
|
---|
387 | &.btn-outline-facebook {
|
---|
388 | @include btn-outline($color-facebook);
|
---|
389 | }
|
---|
390 |
|
---|
391 | &.btn-google {
|
---|
392 | @include btn($color-google);
|
---|
393 | color: white;
|
---|
394 | }
|
---|
395 |
|
---|
396 | &.btn-outline-google {
|
---|
397 | @include btn-outline($color-google);
|
---|
398 | }
|
---|
399 |
|
---|
400 | &.btn-twitter {
|
---|
401 | @include btn($color-twitter);
|
---|
402 | color: white;
|
---|
403 | }
|
---|
404 |
|
---|
405 | &.btn-outline-twitter {
|
---|
406 | @include btn-outline($color-twitter);
|
---|
407 | }
|
---|
408 |
|
---|
409 | &.btn-linkedin {
|
---|
410 | @include btn($color-linkedin);
|
---|
411 | color: white;
|
---|
412 | }
|
---|
413 |
|
---|
414 | &.btn-outline-linkedin {
|
---|
415 | @include btn-outline($color-linkedin);
|
---|
416 | }
|
---|
417 |
|
---|
418 | &.btn-whatsapp {
|
---|
419 | @include btn($color-whatsapp);
|
---|
420 | color: white;
|
---|
421 | }
|
---|
422 |
|
---|
423 | &.btn-outline-whatsapp {
|
---|
424 | @include btn-outline($color-whatsapp);
|
---|
425 | }
|
---|
426 |
|
---|
427 | &.btn-instagram {
|
---|
428 | @include btn($color-instagram);
|
---|
429 | color: white;
|
---|
430 | }
|
---|
431 |
|
---|
432 | &.btn-outline-instagram {
|
---|
433 | @include btn-outline($color-instagram);
|
---|
434 | }
|
---|
435 |
|
---|
436 | &.btn-dribbble {
|
---|
437 | @include btn($color-dribbble);
|
---|
438 | color: white;
|
---|
439 | }
|
---|
440 |
|
---|
441 | &.btn-outline-dribbble {
|
---|
442 | @include btn-outline($color-dribbble);
|
---|
443 | }
|
---|
444 |
|
---|
445 | &.btn-youtube {
|
---|
446 | @include btn($color-youtube);
|
---|
447 | color: white;
|
---|
448 | }
|
---|
449 |
|
---|
450 | &.btn-outline-youtube {
|
---|
451 | @include btn-outline($color-youtube);
|
---|
452 | }
|
---|
453 |
|
---|
454 | &.btn-github {
|
---|
455 | @include btn($color-github);
|
---|
456 | color: white;
|
---|
457 | }
|
---|
458 |
|
---|
459 | &.btn-outline-github {
|
---|
460 | @include btn-outline($color-github);
|
---|
461 | }
|
---|
462 |
|
---|
463 | &.btn-behance {
|
---|
464 | @include btn($color-behance);
|
---|
465 | color: white;
|
---|
466 | }
|
---|
467 |
|
---|
468 | &.btn-outline-behance {
|
---|
469 | @include btn-outline($color-behance);
|
---|
470 | }
|
---|
471 |
|
---|
472 | &.btn-skype {
|
---|
473 | @include btn($color-skype);
|
---|
474 | color: white;
|
---|
475 | }
|
---|
476 |
|
---|
477 | &.btn-outline-skype {
|
---|
478 | @include btn-outline($color-skype);
|
---|
479 | }
|
---|
480 |
|
---|
481 | &.btn-yahoo {
|
---|
482 | @include btn($color-yahoo);
|
---|
483 | color: white;
|
---|
484 | }
|
---|
485 |
|
---|
486 | &.btn-outline-yahoo {
|
---|
487 | @include btn-outline($color-yahoo);
|
---|
488 | }
|
---|
489 |
|
---|
490 | &.btn-apple,
|
---|
491 | &.btn-google-play {
|
---|
492 | border-radius: 7px;
|
---|
493 |
|
---|
494 | img {
|
---|
495 | width: 35px;
|
---|
496 | margin-right: 10px;
|
---|
497 | }
|
---|
498 |
|
---|
499 | i {
|
---|
500 | font-size: 40px;
|
---|
501 | margin-right: 10px;
|
---|
502 | }
|
---|
503 |
|
---|
504 | & > span {
|
---|
505 | display: flex;
|
---|
506 | flex-direction: column;
|
---|
507 | text-align: left;
|
---|
508 |
|
---|
509 | & span:nth-child(2) {
|
---|
510 | font-size: 20px;
|
---|
511 | font-weight: 600;
|
---|
512 | margin-top: 5px;
|
---|
513 | }
|
---|
514 | }
|
---|
515 |
|
---|
516 | &:hover,
|
---|
517 | &:active,
|
---|
518 | &:focus {
|
---|
519 | background: #040507;
|
---|
520 | color: white;
|
---|
521 | }
|
---|
522 | }
|
---|
523 |
|
---|
524 | &.btn-apple {
|
---|
525 | border: 1px solid #040507;
|
---|
526 | color: #040507;
|
---|
527 | }
|
---|
528 |
|
---|
529 | &.btn-google-play {
|
---|
530 | background: #040507;
|
---|
531 | color: white;
|
---|
532 |
|
---|
533 | & > span {
|
---|
534 | & span:nth-child(1) {
|
---|
535 | text-transform: uppercase;
|
---|
536 | font-size: $default-font-size - 2;
|
---|
537 | }
|
---|
538 | }
|
---|
539 | }
|
---|
540 | }
|
---|
541 |
|
---|
542 | @keyframes pulse {
|
---|
543 | to {
|
---|
544 | box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);
|
---|
545 | }
|
---|
546 | }
|
---|