gaf-mobile/app/styles/modules/PageNav.less

GAF mobile Web site

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

/**
 * Page Nav
 *
 * Generic Page Navigation
 *
 * Markup: PageNav.html
 *
 * Styleguide 6
 */

.PageNav {
    @this: PageNav;
    margin-top: -1px;
    border-bottom: 1px solid @site-bg--dark;
    color: @quaternary-color-xxlight;
    background: @site-bg--dark;

    &-list {
        .flex();
        max-width: @max-width - (@padding * 2);
        .list-unstyled(
            @margin: 0 auto
        );
    }

    &-item {
        .flex-grow(1);
        position: relative;
        text-align: center;

        &--urgent {
            &::after {
                position: absolute;
                top: 18px;
                right: 14px;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: @urgent-color;
                content: "";
            }
        }
    }

    & &-link {
        display: block;
        padding: 13px 10px 10px;
        border-color: @site-bg--dark;
        font-weight: @type-weight-regular;
        color: inherit;
        background-color: @site-bg--dark;

        &:hover,
        &:active {
            text-decoration: none;
        }

        &.is-active {
            border-bottom: 2px solid @primary-color;
            font-weight: @type-weight-bold;
            color: @text-color-light;
        }
    }

}