| 1 | @use '../internal' as *;
|
| 2 |
|
| 3 | $generate-utility: should-generate-classes($FOOTER);
|
| 4 |
|
| 5 | @if $generate-utility {
|
| 6 |
|
| 7 | .footer {
|
| 8 | background-color: fill('gray', '800');
|
| 9 | padding: 6rem 0;
|
| 10 | text-align: center;
|
| 11 | margin-top: 5rem;
|
| 12 | width: 100%;
|
| 13 |
|
| 14 | &.footer--fixed {
|
| 15 | bottom: 0;
|
| 16 | position: fixed;
|
| 17 | }
|
| 18 |
|
| 19 | p {
|
| 20 | color: fill('gray', '600');
|
| 21 | }
|
| 22 |
|
| 23 | ul {
|
| 24 | margin: 0.5rem 0;
|
| 25 | }
|
| 26 |
|
| 27 | .footer__title {
|
| 28 | text-align: center;
|
| 29 | letter-spacing: 6px;
|
| 30 | position: relative;
|
| 31 | padding-bottom: 10px;
|
| 32 | }
|
| 33 |
|
| 34 | .footer__list-title {
|
| 35 | color: fill('gray', '400');
|
| 36 | font-size: 75%;
|
| 37 | text-transform: uppercase;
|
| 38 | font-weight: bolder;
|
| 39 |
|
| 40 | &::after {
|
| 41 | content: '';
|
| 42 | display: block;
|
| 43 | width: 10%;
|
| 44 | margin: auto;
|
| 45 | border-bottom: 2px solid;
|
| 46 | border-color: #343b49;
|
| 47 | }
|
| 48 | }
|
| 49 |
|
| 50 | ul a .footer__list-item,
|
| 51 | .footer__list-item {
|
| 52 | margin: 0.1rem;
|
| 53 | color: fill('gray', '600');
|
| 54 | transition: all var(--animation-duration);
|
| 55 | font-size: 75%;
|
| 56 | text-transform: uppercase;
|
| 57 | }
|
| 58 | }
|
| 59 | }
|