it-osu-web / it-osu-pl

IT@OSU Pattern Lab
https://it-osu-web.github.io/it-osu-pl/
3 stars 1 forks source link

Incorporate recent footer changes from wcm_theme #244

Closed mel-miller closed 2 years ago

mel-miller commented 3 years ago
{% if pl %}
    {% if footer_text %}
        {% set has_footer_text = 1 %}
    {% endif %}
{% endif %}

<footer id='site-footer' class='site-footer site-footer--{{ footer_color }}'>
    <div class='site-footer__inner grid-container'>

        <div class='site-footer__social-media'>
            {% include "@molecules/social-media-links/social-media-links.twig" %}
        </div>

        <div class='site-footer__address-block'>
            {% include "@molecules/address-block/address-block.twig" %}
        </div>

        <div class='site-footer__ada-statement'>
        {% if default_ada_statement == 1 %}
            <p>If you have a disability and experience difficulty accessing this content, please call the Accessibility Helpline at
                <a href='tel:6142925000'>614-292-5000</a>.</p>
        </div>
        {% else %}
            {{ ada_statement_text }}
        {% endif %}

        {% if privacy_statement %}
        <div class='site-footer__privacy-statement'>
            <a href='{{ privacy_statement }}' target='_blank'>Privacy Statement</a>
        </div>
        {% endif %}

        {% if non_discrimination_notice %}
        <div class='site-footer__non-discrimination-notice'>
            <a href='{{ non_discrimination_notice }}' target='_blank'>Non-discrimination Notice</a>
        </div>
        {% endif %}

        {% if has_footer_text %}
            <div class='site-footer__footer-text'>
                <p>{{ footer_text }}</p>
            </div>
        {% endif %}

        {# show admin_link for Drupal sites if selected and user is not logged in #}
        {% if admin_link == 1 %}
            {% if not logged_in %}
                <div class='site-footer__login-link'>
                    <a href='/user/login'>Admin Login</a>
                </div>
            {% endif %}
        {% endif %}

    </div>
</footer>
mel-miller commented 3 years ago

And...

//footer layout
.site-footer {
    padding: 1.5em 0;
}

.site-footer__social-media {
    margin-bottom: 1.75em;
}

.site-footer__address-block {
    margin-bottom: 1.5em;
}

//layout after large breakpoint
@include breakpoint(large) {
    .site-footer__social-media {
        float: right;
    }
}

//footer text
.footer-text {
    line-height: 125%;
    font-size: rem-calc(13);
}

.site-footer__ada-statement,
.site-footer__footer-text,
.site-footer__privacy-statement,
.site-footer__non-discrimination-notice {
    @extend .footer-text;

    .fa-mailto .extlink {
        display: none;
    }
}

.site-footer__privacy-statement,
.site-footer__non-discrimination-notice {
    display: inline-block;
    margin-right: rem-calc(4);
}

//mixin for colors
@mixin footer(
    $bg-color: $white,
    $text-color: $black,
    $link-color: $red,
    $link-hover: $white,
    $link-bg-hover: $near-black,
    $pipe-color: $red,
    $border-color: $gray-border
) {
    background: $bg-color;
    color: $text-color;

    // All footer text.
    .site-footer__address-block,
    .site-footer__ada-statement,
    .site-footer__footer-text,
    .site-footer__login-link,
    .site-footer__privacy-statement,
    .site-footer__non-discrimination-notice {
        a {
            display: inline-block;
            padding: 0 3px;
            color: $link-color;
            font-weight: 600;
        }

        a:hover {
            color: $link-hover;
            background: $link-bg-hover;
        }

        a:focus {
            outline-color: $text-color;
        }

        .pipe {
            color: $pipe-color;
            font-weight: 800;
        }
    }
    .site-footer__footer-text {
        border-top: 1px solid $border-color;
        padding-top: rem-calc(12);
        margin-top: rem-calc(24);
    }

    // Wordmark.
    .address-block__wordmark {
        a {
            padding: 0;
            &:hover {
                background: none;
            }
            &:focus {
                background: none;
                outline: 2px solid $text-color;
                outline-offset: 4px;
            }
        }
    }

    // Login link.
    .site-footer__login-link {
        margin-top: 2em;

        a {
            text-transform: uppercase;
            font-size: rem-calc(12);
            padding-top: 2px;
        }
    }

    // Social Media Links.
    .social-media__item a {
        color: $white;
    }

    .social-media__item a:focus {
        outline: 3px solid $text-color;
        outline-offset: 1px;
    }
}

// Apply mixin based on footer color.
.site-footer--white {
    @include footer();
}

.site-footer--lt-gray {
    @include footer($near-white);
}

.site-footer--md-gray {
    @include footer($gray, $white, $white, $gray, $white, $near-white);
    .social-media__item a {
        border: 1px solid $white;
        &:focus {
            border: none;
        }
    }
}

.site-footer--dk-gray {
    @include footer($near-black, $white, $white, $black, $white, $near-white, $gray);
}