sass.n2o.components.SimpleHeader.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of n2o-react
The newest version!
@mixin defaultColor {
    color: rgba(0, 0, 0, 0.5);
}

@mixin hoverColor {
    color: rgba(0, 0, 0, 0.7);
}

@mixin navItem {
    padding: 10px 15px;

    @include defaultColor;
}

@mixin dropdownItemHover {
    background-color: white;

    @include hoverColor;
}

.n2o-sidebar-switcher {
    margin-right: 2rem;
    width: 1rem;
    font-size: 20px;
    cursor: pointer;

    @include defaultColor;
}

.n2o-sidebar-switcher:hover {
    color: $primary;
}

.n2o-header {
    .n2o-action-item.nav-item {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
        cursor: pointer;

        @include defaultColor;
    }

    .n2o-action-item.nav-item:hover {
        @include hoverColor;
    }

    .navbar-nav {
        .static-menu-item {
            @include navItem;
        }
    }

    .dropdown {
        .dropdown-toggle {
            border: none;
            background-color: transparent !important;
            box-shadow: none !important;

            @include navItem;
        }

        .dropdown-toggle:hover {
            @include hoverColor;
        }

        .dropdown-toggle:active,
        .dropdown-toggle:focus {
            background-color: white;
        }

        .dropdown-menu.show {
            border: 1px solid $primary;

            .dropdown-item.active::before {
                display: none;
            }

            .static-menu-item {
                @include navItem;

                cursor: default;
            }

            .dropdown-item.nav-item.static-menu-item:hover {
                @include dropdownItemHover;
            }
        }
    }

    .dropdown.nav-item.dropdown-item:hover {
        @include dropdownItemHover;
    }

    .n2o-navbar-collapse-open {
        .dropdown {
            .dropdown-toggle {
                padding: $collapsed-item-padding;
            }
        }

        .n2o-action-item.nav-item {
            padding: $collapsed-item-padding;
        }

        .nav-item.static-menu-item {
            padding: $collapsed-item-padding;
        }
    }

    .dropdown.isOpen {
        .dropdown-toggle {
            @include hoverColor;
        }
    }

    .navbar-collapse {
        .navbar-nav {
            .dropdown-item.active {
                color: white;
            }

            .n2o-action-item.dropdown-item {
                cursor: pointer;

                @include navItem;
            }

            .n2o-action-item.dropdown-item:hover {
                @include dropdownItemHover;
            }

            .n2o-action-item.dropdown-item:active,
            .n2o-action-item.dropdown-item:focus {
                background-color: white;
            }

            .dropdown-item {
                padding: 0;
                color: $primary;

                .nav-item {
                    .nav-link {
                        @include navItem;
                    }

                    .nav-link.dropdown-item.active {
                        background-color: white;
                        color: $primary;
                    }

                    .nav-link.dropdown-item.active::before {
                        content: "▶";
                        color: $primary;
                        position: absolute;
                        left: 0.25rem;
                        transform: scale(0.5);
                    }

                    .nav-link.dropdown-item:hover {
                        @include dropdownItemHover;
                    }

                    .nav-link.dropdown-item.active:hover {
                        color: $primary;
                    }

                    .nav-link.dropdown-item:active,
                    .nav-link.dropdown-item:focus {
                        background-color: white;
                    }
                }
            }

            .dropdown-item.dropdown-toggle {
                border: none;
                background-color: transparent !important;
                box-shadow: none !important;

                @include navItem;
            }

            .dropdown-item.dropdown-toggle:hover {
                @include hoverColor;
            }

            .dropdown-item.dropdown-toggle:active,
            .dropdown-item.dropdown-toggle:focus {
                background-color: white;
            }

            .dropdown-menu.show {
                padding: 0;
                border: 1px solid $primary;
            }
        }
    }
}

.n2o-header.n2o-header-inverse {
    .n2o-sidebar-switcher {
        color: white;
    }

    .dropdown {
        .dropdown-toggle {
            color: $gray-light;
        }

        .dropdown-toggle:hover {
            color: rgba(255, 255, 255, 0.75);
        }

        .dropdown-toggle:active,
        .dropdown-toggle:focus {
            background-color: white;
            color: rgba(255, 255, 255, 0.75) !important;
        }
    }
}

.n2o-link-icon-container.right-icon {
    i {
        margin-right: 0 !important;
        margin-left: 0.25rem;
    }
}