fabasoad/business-card

View on GitHub
src/styles/components/menu/_components.menu.scss

Summary

Maintainability
Test Coverage
@import './components.menu_locale-dropdown';

#nav {
    z-index: 9999;
}
#nav.affix-top {
    position: fixed;
    top: 0;
    width: 100%;
}
.navbar-custom {
    margin-bottom: 0;
    background-color: $blue;
    border-radius: 0;
    .navbar-brand {
        color: $white !important;
        font-weight: 700;
        &:focus {
            outline: 0;
        }
    }
    .navbar-toggler {
        border-color: transparent;
        font-size: 16px;
        padding: 4px 6px;
        &:focus {
            outline: 0;
        }
        &:active {
            outline: 0;
        }
    }
}
#basic-navbar-nav {
    justify-content: space-between;
    .navbar-nav {
        .dropdown {
            color: $white;
            font-size: 14px;
            letter-spacing: 1px;
            .dropdown-menu {
                background: $blue;
                border-width: 0;
                min-width: 4.5rem;
                .dropdown-item {
                    color: $white;
                }
            }
        }
        .nav-link {
            -webkit-transition: background .3s ease-in-out;
            -moz-transition: background .3s ease-in-out;
            color: $white;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            transition: background .3s ease-in-out;
            @media (min-width: 830px) {
                font-size: 16px;
            }
            &:hover {
                outline: 0;
                color: $orange;
                background-color: transparent;
            }
            &:focus {
                outline: 0;
                background-color: transparent;
                color: $orange;
            }
            &:active {
                outline: 0;
                background-color: transparent;
                color: $orange;
            }
        }
        .nav-link.active {
            color: $dark-white;
            outline: 0;
        }
    }
}