gaf-mobile/app/styles/layout/snap-custom.less

GAF mobile Web site

@import (reference) '../themes/variables';

/* Overrides and custom styling for snap.JS slide menu plugin */

// 1. Minimum supported browser width
// 2. Required for the relative, bottom-aligned copyright in the slide nav

.snap-content {
    min-width: 320px; // 1.
    padding-top: @header-height;
    background-color: @body-bg;
}

.snap-drawers {
    background-color: @snap-bg;
}

.snap-drawer {
    color: @snap-drawer-text;
    background: @snap-bg;
    font-weight: bold;

    &-inner {
        position: relative;
        padding-top: 0;
        // 2.
        min-height: 100%;
        margin-bottom: -@snap-footer-height;
        overflow: hidden;
        &::after {
            display: block;
            height: @snap-footer-height;
            content: '';
        }
    }

    &-title {
        display: inline-block;
        min-height: 14px;
        margin: 0;
        font-size: 14px;
        font-weight: bold;
        color: @snap-drawer-text;
        position: relative;
        width: 100%;
        padding: 30px 10px 30px 74px;
        line-height: 1;
        background-color: @snap-bg-dark;
        border-bottom: 1px solid @snap-border;
    }

    &-title a {
        color: @snap-drawer-text;
    }

    &-profile-img {
        position: absolute;
        left: 28px;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    &-nav-list {
        padding: 0;
        margin: 0;
        list-style-type: none;
        background-color: @snap-bg;
        padding-top: 16px;
        border: none;
    }

    &-nav-link {
        display: block;
        border-top: 1px solid @snap-border;
        text-decoration: none;
        color: @snap-drawer-text;
        font-size: @type-size;
        position: relative;
        margin-top: 2px;
        margin-bottom: 2px;
        padding: 13px 20px 13px 66px;
        border: none;

        &:focus,
        &.is-active,
        &.fl-touch-active,
        html.no-touch &:hover {
            color: @snap-drawer-text--active;
            outline: none;
            text-decoration: none;
            background-color: @snap-bg-dark;
            &::before {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                width: 2px;
                background-color: @primary-color;
                content: '';
            }
        }

        [class*="flicon-"] {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 28px;
            margin: auto;
            width: 22px;
            height: 22px;
            stroke: @quaternary-color-xxlight;
        }

        .snap-drawer-exit-icon {
            right: 12px;
            left: auto;
            width: 16px;
            height: 16px;
            stroke: @primary-color;
        }
    }
}

.site-copyright {
    height: @snap-footer-height;
    padding: 10px 20px 0;
    font-size: 9px;
    text-align: left;
    color: @snap-footer-text;
}