/* Template Name: Admin Pro Admin Author: Wrappixel Email: niravjoshi87@gmail.com File: scss */ /******************* Main sidebar ******************/ .left-sidebar { position: relative; width: 240px; height: 100%; top: 0px; z-index: 20; background: $sidebar; box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08); } .fix-sidebar .left-sidebar { position: fixed; } .fix-header.fix-sidebar .left-sidebar, .fix-header .left-sidebar { padding-top: 100px; } /******************* use profile section ******************/ .sidebar-nav .user-profile { >a { img { width: 30px; border-radius: 100%; margin-right: 10px; } } >ul { padding-left: 40px; } } /******************* sidebar navigation ******************/ .scroll-sidebar { height: calc(100% - 30px); &.ps .ps__scrollbar-y-rail { left: 2px; right: auto; background: none; width: 6px; /* If using `left`, there shouldn't be a `right`. */ } } .collapse.in { display: block; } .sidebar-nav { background: $sidebar; padding: 0px; ul { margin: 0px; padding: 0px; li { list-style: none; a { color: $sidebar-text; padding: 8px 35px 8px 15px; display: block; font-size: 14px; font-weight: 400; &.active, &:hover { color: $themecolor; i { color: $themecolor; } } &.active { font-weight: 500; color: $dark; } } ul { padding-left: 28px; li a { padding: 7px 35px 7px 15px; } ul { padding-left: 15px; } } &.nav-small-cap { font-size: 12px; margin-bottom: 0px; padding: 14px 14px 14px 20px; color: $dark; font-weight: 500; display: none; } &.nav-devider { height: 1px; background: $border; display: none; margin: 15px 0; } } } >ul>li>a { line-height: 35px; border-radius: 4px 4px 0 0; i { width: 31px; font-size: 22px; display: inline-block; vertical-align: middle; color: $sidebar-icons; } .label { float: right; margin-top: 6px; } &.active { font-weight: 400; background: #242933; color: $themecolor-alt; } } >ul>li { margin-bottom: 5px; &.active>a { color: $themecolor; font-weight: 500; i { color: $themecolor; } } &.active:hover > a{ color:$themecolor; i { color: $themecolor; } } } .waves-effect { transition: none; -webkit-transition: none; -o-transition: none; } } .sidebar-nav .has-arrow { position: relative; &::after { position: absolute; content: ''; width: 7px; height: 7px; border-width: 1px 0 0 1px; border-style: solid; border-color: $sidebar-text; right: 1em; -webkit-transform: rotate(135deg) translate(0, -50%); -ms-transform: rotate(135deg) translate(0, -50%); -o-transform: rotate(135deg) translate(0, -50%); transform: rotate(135deg) translate(0, -50%); -webkit-transform-origin: top; -ms-transform-origin: top; -o-transform-origin: top; transform-origin: top; top: 47%; -webkit-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } } .sidebar-nav .active>.has-arrow::after, .sidebar-nav li>.has-arrow.active::after, .sidebar-nav .has-arrow[aria-expanded="true"]::after { -webkit-transform: rotate(-135deg) translate(0, -50%); -ms-transform: rotate(-135deg) translate(0, -50%); -o-transform: rotate(-135deg) translate(0, -50%); top: 45%; width: 7px; transform: rotate(-135deg) translate(0, -50%); } /**************** When click on sidebar toggler and also for tablet *****************/ @media(min-width:768px) { .left-sidebar { width: 100%; height: auto; } .mini-sidebar .sidebar-nav #sidebarnav li { position: relative; &.nav-small-cap { display: none; } &.two-column>ul { width: 400px; >li { width: 49%; vertical-align: top; display: inline-block; } } &.three-column>ul { width: 550px; >li { width: 32.5%; vertical-align: top; display: inline-block; } } } .mini-sidebar .sidebar-nav #sidebarnav>li>ul { position: absolute; top: 57px; width: 220px; box-shadow: 0px 7px 20px rgba(0, 0, 0, 0.08); padding-bottom: 10px; z-index: 1001; background: $sidebar-alt; display: none; padding-left: 1px; } .mini-sidebar .sidebar-nav #sidebarnav>li:hover>ul { height: auto !important; overflow: auto; } .mini-sidebar .sidebar-nav #sidebarnav>li:hover>ul, .mini-sidebar .sidebar-nav #sidebarnav>li:hover>ul.collapse { display: block; max-height: 400px; } .mini-sidebar .sidebar-nav #sidebarnav>li>a.has-arrow:after { display: none; } .mini-sidebar { .scroll-sidebar { padding-bottom: 0px; position: relative; margin: 0 auto; max-width: 1280px; padding: 0 15px; } .sidebar-nav { background: transparent; min-height: 55px; >ul { >li { margin-bottom: 0px; float: left; margin-right: 10px; ul { li a { padding: 10px 15px; } } } li:last-child ul { right: 0px; } } } .sidebar-nav #sidebarnav>li>a { padding: 11px 15px; } .sidebar-nav #sidebarnav>li:hover>a { background: $sidebar-alt; .hide-menu { display: inline; } .label { display: none; } } } } @media(min-width:768px) and (max-width:1024px) { .sidebar-nav>ul>li>a i { display: none; } .mini-sidebar { .sidebar-nav #sidebarnav>li>a { padding: 20px 15px; } } } @media(max-width:767px) { .mini-sidebar { .left-sidebar { position: fixed; padding-top: 70px; } .left-sidebar { left: -240px; } &.show-sidebar { .left-sidebar { left: 0px; } } } .topbar { .top-navbar { padding: 0px; } } .sidebar-nav { ul li.nav-small-cap { display: block; } } }