/*-------------------------- Sidebar ----------------------------*/ .fe-sidebar { width: @fe-sidebar-width; background-color: @dark-gray; position: fixed; height: 100%; overflow: hidden; padding: 35px; @media(min-width: @screen-md-min) { .translate3d(0, 0, 0); } @media(max-width: @screen-sm-max) { padding-top: 85px; z-index: 9; box-shadow: 0 0 10px rgba(0, 0, 0, 0.65); .transition(all); .transition-duration(300ms); .translate3d((-@fe-sidebar-width - 15px), 0, 0); &.toggled { .translate3d(0, 0, 0); } } a { color: rgba(255, 255, 255, 0.58); &:hover { color: @white; } } } /*-------------------------- Header ----------------------------*/ .fes-header { margin-bottom: 40px; img, h2 { float: left; } h2 { margin: 13px 0 0 10px; font-weight: normal; } img { width: 32px; } } /*-------------------------- List ----------------------------*/ .fesl-inner { height: ~"calc(100vh - 260px)"; overflow: auto; padding: 0; margin: 0 -35px; & li { position: relative; & > a { display: block; padding: 10px 40px 12px 65px; .text-overflow(); &:before { font-family: FontAwesome; content: '\f0a0'; font-size: 17px; position: absolute; top: 10px; left: 35px; .opacity(0.8); } &.fesli-loading { &:before { .list-loader(20px, 20px, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5)); left: 32px; top: 0; bottom: 0; margin: auto; } } } &.active { background-color: rgba(0, 0, 0, 0.2); & > a { color: @white; } } &:not(.active):hover { background-color: rgba(0, 0, 0, 0.1); & > a { color: @white; } } &:hover { .fesli-trigger { .opacity(0.6); &:hover { .opacity(1); } } } } ul { list-style: none; padding: 0; margin: 0; } &:hover .scrollbar-vertical { opacity: 1; } } .fesli-trigger { .opacity(0); .transition(all); .transition-duration(200ms); position: absolute; top: 0; right: 0; width: 40px; height: 100%; cursor: pointer; background: url(../../img/more-h-light.svg) no-repeat left; } /* Scrollbar */ .scrollbar-vertical { position: absolute; right: 5px; width: 4px; height: 100%; opacity: 0; .transition(opacity); .transition-duration(300ms); div { border-radius: 1px !important; background-color: #6a6a6a !important; } } /*-------------------------- Host ----------------------------*/ .fes-host { position: fixed; left: 0; bottom: 0; z-index: 1; background: @dark-gray; color: rgba(255, 255, 255, 0.4); font-size: 15px; font-weight: 400; width: @fe-sidebar-width; padding: 20px; .text-overflow(); & > i { margin-right: 10px; } }