felixarntz/theme-boilerplate

View on GitHub
assets/src/sass/footer/_social-navigation.scss

Summary

Maintainability
Test Coverage
.social-navigation {
    @include font-size(1);

    padding-top: $padding_vertical;
    padding-bottom: $padding_vertical;
    text-align: center;
    color: $color__text-footer;
    background-color: $color__background-footer;

    ul {
        display: inline-block;
        margin-bottom: 0;
        margin-left: 0;
        padding-left: 0;
        list-style: none;
    }

    li {
        display: inline;
    }

    a {
        display: inline-block;
        margin-left: $padding_horizontal;
        width: $social_icon_wrap_size;
        height: $social_icon_wrap_size;
        text-align: center;
        border-radius: 40px;
        color: $color__text-social-icons;
        background-color: $color__background-social-icons;

        &:visited {
            color: $color__text-social-icons;
        }

        &:hover,
        &:focus {
            color: $color__text-social-icons;
            background-color: darken($color__background-social-icons, 8%);
        }

        &:first-child {
            margin-left: 0;
        }
    }

    .icon {
        top: (($social_icon_wrap_size - $social_icon_size) / 2);
        width: $social_icon_size;
        height: $social_icon_size;
        vertical-align: top;
    }

    .no-svg & {
        a {
            width: auto;
            height: auto;
            color: #333;
            background-color: transparent;

            .screen-reader-text {
                @include override-screen-reader-text();
            }
        }
    }
}