cirrus-ui/src/components/footer.scss

A lightweight UI framework written in SCSS

@use '../src/internal' as *;

@if should-generate-classes($FOOTER) {
    /* FOOTER */
    .footer {
        background-color: fill('gray', '800');
        padding: 6rem 0;
        text-align: center;
        margin-top: 5rem;
        width: 100%;

        &.footer--fixed {
            bottom: 0;
            position: fixed;
        }

        p {
            color: fill('gray', '600');
        }

        ul {
            margin: 0.5rem 0; /* Remove the left margin seen in global style */
        }

        .footer__title {
            text-align: center;
            letter-spacing: 6px;
            position: relative;
            padding-bottom: 10px;
        }

        .footer__list-title {
            color: fill('gray', '400');
            font-size: 75%;
            text-transform: uppercase;
            font-weight: bolder;

            &::after {
                content: '';
                display: block;
                width: 10%;
                margin: auto;
                border-bottom: 2px solid;
                border-color: #343b49;
            }
        }

        ul a .footer__list-item,
        .footer__list-item {
            margin: 0.1rem;
            color: fill('gray', '600');
            transition: all var(--animation-duration);
            font-size: 75%;
            text-transform: uppercase;
        }
    }
}