lightspeeddevelopment/lsx

View on GitHub
assets/css/scss/global/mixins/_top-menu.scss

Summary

Maintainability
Test Coverage
@mixin top-menu-colours (
    $bg: map-get($top-menu, bg),
    $link: map-get($top-menu, link),
    $hover: map-get($top-menu, hover),
    $icon: map-get($top-menu, icon),
    $icon-hover: map-get($top-menu, icon-hover),
    $dropdown: map-get($top-menu, dropdown),
    $dropdown-hover: map-get($top-menu, dropdown-hover),
    $dropdown-link: map-get($top-menu, dropdown-link),
    $dropdown-link-hover: map-get($top-menu, dropdown-link-hover)) {

    #top-menu {
        background-color: $bg;

        .top-menu {
            & > .menu {
                & > .menu-item {
                    &.open > a,
                    &:hover > a {
                        color: $hover;

                        &:before, &:after { color: $icon-hover; }
                    }

                    & > a {
                        color: $link;

                        &:before, &:after { color: $icon; }
                    }
                }
            }
        }

        .dropdown-menu {
            background-color: $dropdown;

            & > .menu-item {
                color: $dropdown-link;

                &.open,
                &:hover,
                &:active:hover,
                &:focus {
                    background-color: $dropdown-hover;
                    color: $dropdown-link-hover;
                }

                .dropdown-menu {
                    & > .menu-item {
                        background-color: $dropdown-hover;
                    }
                }
            }
        }
    }
}