navbar.scss 2.09 KB
.app-navbar {

    border-bottom: 2px solid #f1f1f1;

    .navbar {
        margin-bottom: 0;
        border: none;
    }

    .navbar-brand {
        height: auto;
        padding-bottom: 0;
        padding-left: 0;

        @media screen and (max-width: $screen-md) {
            padding: 20px 0;
            margin: 20px 0;
        }
    }

    .navbar-toggle {
        padding: 12px 10px;
        margin-top: 20px;
        border-radius: 100%;
        background-color: #5e749d;

        .icon-bar {
            height: 3px;
            background-color: #fff;
        }

        @media screen and (max-width: $screen-md) {
            margin-top: 45px;
        }
    }

    .navbar-nav .divider span {
        padding: 0 0 10px 0;
        margin: 53px 10px 0 10px;
        display: block;

        @media screen and (max-width: $screen-md) {
            display: none;
        }
    }

    .dropdown-menu {
        padding: 0;
    }

    .navbar-nav > li {

        & > a {
            padding: 0 0 10px 0;
            margin: 55px 10px 0 10px;
            text-transform: uppercase;
            color: #616161;
            font-weight: bold;

            &:hover,
            &:focus {
                background: none;
            }

            .contraste & {
                color: #fff;
            }

            @media screen and (max-width: $screen-md) {
                margin-top: 5px;
                text-align: right;
            }
        }

        &.active > a {
            border-bottom: 3px solid #77BB34;

            @media screen and (max-width: $screen-md) {
                border: none;
                background-color: #eee;
                padding: 10px 30px 10px 0px;
                border-right: 3px solid #77BB34;
            }
        }

        .dropdown-toggle {
            margin-top: 50px;

            @media screen and (max-width: $screen-md) {
                margin-top: 0px;
            }
        }
    }

    .contraste & {
        .nav > li > a:hover,
        .nav > li > a:focus {
            color: #fff;
        }

        .active a {
            border-bottom-color: #fff;
        }
    }
}