navigation-bar.less

.navigation-bar {
    width: 100%;
    display: block;
    background-color: @cyan;
    color: @white;

    .navigation-bar-content {
        background-color: inherit;
        color: inherit;
        display: block;

        .element, .element-divider {
            display: block;
            float: left;
            background-color: inherit;
            position: relative;

            &.place-right {
                float: right;
            }
        }

        .element {
            color: @dark;
            padding: @subunitSize*3;
            line-height: @subunitSize * 3;
            color: inherit;
            font-family: @segoeLightFontFamily;
            font-size: 14px;
            //transition: background .3s ease;

            &:hover {
                background-color: saturate(@cyan, 30%);
            }

        }

        .element > a.dropdown-toggle {
            color: inherit;
            position: relative;
            &:after {
                position: absolute;
                left: 100%;
                //content: "";
            }
        }

        .element > .dropdown-menu {
            top: 100%;
            left: 0;

            &.place-right {
                right: 0;
                left: auto;
            }
        }

        .element-divider {
            padding: @subunitSize*3 0;
            line-height: @subunitSize * 3;
            width: 1px !important;
            border-left: 1px #ccc solid;
            opacity: .3;
            position: relative;
            &:before {
                content: "|";
                visibility: hidden;
            }
        }
    }
}

.navigation-bar-content {
    .brand {
        font-size: 18px;
    }

    form {
        margin: 0;
        padding-bottom: 0 !important;
        position: relative;
    }

    .element  .input-control.text, .element  .input-control.password {
        width: auto;
        height: auto;
        position: relative;
        margin: 0;
        top: -6px;

        [class*='btn-'] {
            top: 2px;
            right: 2px;
        }

        input[type='text'] {
            font-size: 12px;
        }
    }

    .input-control.checkbox,  .input-control.radio{
        position: relative;
        margin: 0;
        top: -6px;
    }

    .button {
        margin-top: -14px;
        background-color: inherit;
        &.small {

        }
    }

    .image-button {
        padding-right: @subunitSize * 8 ;
        padding-left: @subunitSize;
        background-color: inherit;

        &:active {
            left: auto;
            right: auto;
            top: auto;
        }

        img {
            width: @unitSize * 2;
            height: @unitSize * 2;
            margin-top: @subunitSize/2;
        }

        &.image-left {
            padding-right: @subunitSize;
            padding-left: @subunitSize * 8;
        }
    }

    [class*="icon-"] {
        font-size: 16px !important;
    }
}

.input-element {
    padding-bottom: 0 !important;
    &:hover {
        background-color: inherit !important;
    }
}

.navigation-bar {
    &.dark {
        background-color: @grayDark;

        .element:hover {
            background-color: saturate(@dark, 10%);
        }
    }
    &.light {
        background-color: @grayLighter;
        color: @gray;

        .element:hover {
            background-color: @grayLight;
            color: @white;
        }
    }
}

.navigation-bar {
    &.fixed-top, &.fixed-bottom {
        position: fixed;
        z-index: 10000;
        left: 0;
    }

    &.fixed-top {
        top: 0;
        bottom: auto;
    }
    &.fixed-bottom {
        bottom: 0;
        top: auto;
    }
}

.navigation-bar, .navigation-bar-content {
    .clearfix;
}