ejplatform/ej-server

/*
 PAGE SIDEBAR
 =========================================================================== */

// Colors
$nav-menu-color: color('primary') !default;
$nav-menu-color-text: color('primary', contrast) !default;
$nav-menu-border-color: rgba(#FFF, 0.25) !default;
$nav-menu-border: 1px solid $nav-menu-border-color !default;

// Layout
$nav-menu-font-size: $font-size-default !default;
$nav-menu-opacity: 1.0 !default;
$nav-menu-shadow: 2px 0 4px 0 rgba(18, 48, 102, 0.08)  !default;
$nav-menu-width: 75vw !default;
$nav-menu-max-width: 400px !default;
$nav-menu-ul-padding: 0 !default;

// Element
.NavMenu {
    width: 100%;
    min-height: 100vh;
    max-width: $nav-menu-max-width;
    box-shadow: $nav-menu-shadow;
    box-sizing: border-box;
    font-size: $nav-menu-font-size;
    opacity: $nav-menu-opacity;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    //background: $nav-menu-color;
    color: $nav-menu-color-text;

    a, button{
        color: $nav-menu-color-text;
    }

    &::-webkit-scrollbar {
        display: none;
    }

    padding: $spacing-unit;
    em {
        font-weight: bold;
        font-style: normal;
    }

    button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0px;
        font-weight: bold;
        font-size: $font-size-small;
    }

    img,
    i {
        height: 1em;
        padding-right: $spacing-unit-tiny;
    }
    .icon-stack{
        :first-child{
            font-size: $font-size-tiny * 0.6;
            padding-right: 0px;
            vertical-align: middle;
            margin-right: -3px;
            margin-bottom: 3px;
        }

        i + i{
            font-size: $font-size-tiny;
        }
    }

    li {
        list-style: none;
        padding: $spacing-unit-small;
        border-bottom: $nav-menu-border;
        font-weight: bold;
        font-size: $font-size-small;
    }

    li:last-child {
        border: none;
    }

    ul {
        padding: $nav-menu-ul-padding;
    }

    &-DropDown {
        cursor: pointer;
    }

    &-AngleDownIcon {
        float: right;
    }

    &-UserMenu {
        display: none;
        >li {
            margin-left: $spacing-unit;
        }
    }

    &-Accessibility {
        display: none;
        >li {
            margin-left: $spacing-unit;
        }
    }
}