mdb-ui-kit/navbar.less

// main: material.less

.navbar {
    background-color: @navbar-default-bg;
    border: 0;
    border-radius: 0;

    .navbar-brand {
        position: relative;
        height: 60px;
        line-height: 30px;
        color: @navbar-brand-color;
        &:hover,
        &:focus {
            color: @navbar-brand-color;
            background-color: transparent;
        }
    }

    .navbar-text {
        color: @navbar-color;
    }

    .navbar-nav {
        > li > a {
            color: @navbar-link-color;
            padding-top: 20px;
            padding-bottom: 20px;

            &:hover,
            &:focus {
                color: @navbar-link-hover-color;
                background-color: @navbar-link-hover-bg;
            }
        }
        > .active > a {
            &,
            &:hover,
            &:focus {
                color: @navbar-link-active-color;
                background-color: @navbar-link-active-bg;
            }
        }
        > .disabled > a {
            &,
            &:hover,
            &:focus {
                color: @navbar-link-disabled-color;
                background-color: @navbar-link-disabled-bg;
            }
        }
    }

    // Darken the responsive nav toggle
    .navbar-toggle {
        border-color: @navbar-toggle-border-color;
        &:hover,
        &:focus {
            background-color: @navbar-toggle-hover-bg;
        }
        .icon-bar {
            background-color: @navbar-toggle-icon-bar-bg;
        }
    }

    .navbar-collapse,
    .navbar-form {
        border-color: darken(@navbar-default-bg, 7%);
    }

    // Dropdowns
    .navbar-nav {
        > .open > a {
            &,
            &:hover,
            &:focus {
                background-color: @navbar-link-active-bg;
                color: @navbar-link-active-color;
            }
        }

        @media (max-width: 767px) {
            // Dropdowns get custom display
            .open .dropdown-menu {
                > .dropdown-header {
                    border: 0;
                    color: darken(@navbar-link-color, 17%)
                }
                .divider {
                    background-color: @navbar-border;
                }
                > li > a {
                    color: @navbar-link-color;
                    &:hover,
                    &:focus {
                        color: @navbar-link-hover-color;
                        background-color: @navbar-link-hover-bg;
                    }
                }
                > .active > a {
                    &,
                    &:hover,
                    &:focus {
                        color: @navbar-link-active-color;
                        background-color: @navbar-link-active-bg;
                    }
                }
                > .disabled > a {
                    &,
                    &:hover,
                    &:focus {
                        color: @navbar-link-disabled-color;
                        background-color: @navbar-link-disabled-bg;
                    }
                }
            }
        }
    }

    .navbar-link {
        color: @navbar-link-color;
        &:hover {
            color: @navbar-link-hover-color;
        }
    }

    .btn-link {
        color: @navbar-link-color;
        &:hover,
        &:focus {
            color: @navbar-link-hover-color;
        }
        &[disabled],
        fieldset[disabled] & {
            &:hover,
            &:focus {
                color: @navbar-link-disabled-color;
            }
        }
    }

    .navbar-form {
        .form-control-wrapper {
            .form-control {
                border-color: @navbar-border;
                color: @navbar-border;
            }
            .material-input:before, input:focus ~ .material-input:after {
                background-color: @navbar-border;
            }
        }
        ::-webkit-input-placeholder { color: @navbar-border; }
        :-moz-placeholder { color: @navbar-border; };
        ::-moz-placeholder { color: @navbar-border; };
        :-ms-input-placeholder { color: @navbar-border; };
    }
}

.navbar {
    &-primary {
        background-color: @navbar-default-bg;
        .navbar-collapse, .navbar-form { border-color: darken(@navbar-default-bg, 7%); }
    }
    &-success {
        background-color: @navbar-success-bg;
        .navbar-collapse, .navbar-form { border-color: darken(@navbar-success-bg, 7%); }
    }
    &-info { background-color: @navbar-info-bg;
        .navbar-collapse, .navbar-form { border-color: darken(@navbar-info-bg, 7%); }
    }
    &-warning { background-color: @navbar-warning-bg;
        .navbar-collapse, .navbar-form { border-color: darken(@navbar-warning-bg, 7%); }
    }
    &-danger { background-color: @navbar-danger-bg;
        .navbar-collapse, .navbar-form { border-color: darken(@navbar-danger-bg, 7%); }
    }
    &-inverse { background-color: @navbar-inverse-bg;
        .navbar-collapse, .navbar-form { border-color: darken(@navbar-inverse-bg, 7%); }
    }
}