File: /home/intake/public_html/wwwroot/css/sass/base/_sidebar-left.scss
/* Sidebar Left */
.sidebar-left {
background: #1D2127;
z-index: 1010;
// SIDEBAR HEADER
// -----------------------------------------------------------------------------
.sidebar-header {
position: relative;
color: $color-default-inverse;
height: 50px;
.sidebar-title {
background: #1D2127;
color: #465162;
padding: 15px;
font-size: 0.8rem;
}
.sidebar-toggle {
position: absolute;
top: 0;
right: 0;
width: 73px;
height: 50px;
background-color: #171717;
border-radius: 0 0 0 5px;
text-align: center;
cursor: pointer;
i {
color: #C3C3C3;
font-size: 0.9rem;
line-height: 50px;
transition: all 0.15s ease-in-out;
}
&:hover {
i {
color: $color-primary;
}
}
}
}
hr.separator {
background: none;
margin: 20px 10px 20px;
}
}
@media only screen and (max-width: 767px) {
.sidebar-left {
background: #1D2127;
}
}
html.mobile-device {
.sidebar-left {
background: #1D2127;
}
}
// REMOVE NANO STYLE FOR BOXED AND SCROLL
// -----------------------------------------------------------------------------
/* Unstyle nano for non fixed layouts */
@media only screen and (min-width: 768px) {
html.scroll,
html.boxed,
html.sidebar-left-big-icons {
.sidebar-left {
min-height: 100vh;
.sidebar-header {
margin-bottom: -3px;
}
.nano {
position: static;
overflow: visible;
width: 100%;
.nano-content {
margin-right: 0 !important;
position: relative;
overflow: visible;
margin-top: 3px;
}
.nano-pane {
display: none !important;
}
}
}
}
html.boxed,
html.scroll,
html.sidebar-left-big-icons {
.sidebar-left {
.nano {
> .nano-content {
overflow: visible !important;
}
}
}
}
html.boxed {
.sidebar-left {
.nano {
padding-bottom: 10px;
}
}
}
html.scroll,
html.sidebar-left-big-icons {
.sidebar-left {
.nano {
padding-bottom: 10px;
}
}
}
}
// SIDEBAR LEFT COLLAPSED
// -----------------------------------------------------------------------------
@media only screen and (min-width: 768px) {
html.sidebar-left-collapsed {
.sidebar-left {
.nano {
background: #1D2127;
box-shadow: -5px 0 0 #2F3139 inset;
}
.sidebar-title {
margin-left: -300px;
opacity: 0;
}
.sidebar-toggle {
border-radius: 0;
}
.nav-main {
> li > a {
overflow: hidden;
text-overflow: clip;
}
li {
// has children
&.nav-parent {
// arrow
a:after {
display: none;
}
> ul.nav-children {
display: none;
}
}
}
// text
a span {
visibility: hidden;
}
}
.sidebar-widget,
.separator {
display: none;
}
}
}
// auto expand on hover
html.sidebar-left-collapsed {
.sidebar-left {
.nano:hover {
width: 300px;
.nav-main {
.nav-expanded {
> ul.nav-children {
display: block;
}
}
li {
// has children
&.nav-parent {
// arrow
a:after {
display: inline-block;
}
}
// text
a span {
visibility: visible;
}
}
}
.sidebar-widget,
.separator {
display: block;
}
}
// Chrome fix
.nano {
&.hovered {
width: 300px;
.nav-main {
li {
a {
span {
visibility: visible;
}
}
&.nav-parent {
a:after {
display: inline-block;
}
}
}
.nav-expanded {
> ul.nav-children {
display: block;
}
}
}
}
}
}
}
html.sidebar-left-collapsed.sidebar-left-opened {
.sidebar-left {
.nano {
width: 300px;
.nav-main {
.nav-expanded {
> ul.nav-children {
display: block;
}
}
li {
// has children
&.nav-parent {
// arrow
a:after {
display: inline-block;
}
}
// text
a span {
visibility: visible;
}
}
}
.sidebar-widget,
.separator {
display: block;
}
}
}
}
}
// SIDEBAR LIGHT
// -----------------------------------------------------------------------------
html.sidebar-light:not(.dark) {
.sidebar-left {
background: #FFF;
.sidebar-header {
.sidebar-title {
background: #FFF;
}
.sidebar-toggle {
i {
color: #333;
}
background: #f6f6f6;
}
}
.nano {
box-shadow: -5px 0 0 #f6f6f6 inset;
background: #FFF;
}
}
&.sidebar-left-collapsed {
.sidebar-left {
.nano {
box-shadow: -5px 0 0 #f6f6f6 inset;
background: #FFF;
}
}
}
}
@media only screen and (max-width: 767px) {
html.sidebar-light {
.sidebar-left {
background: #FFF;
}
}
}
html.mobile-device.sidebar-light {
.sidebar-left {
background: #FFF;
}
}
// SIDEBAR LEFT BIG ICONS
// -----------------------------------------------------------------------------
@media only screen and (min-width: 768px) {
html.sidebar-left-big-icons {
.sidebar-left {
width: 152px;
.sidebar-header {
.sidebar-toggle {
width: 55px;
border-radius: 0;
}
}
.nano {
box-shadow: none !important;
.nav-main {
margin-right: 0;
> li {
&:hover {
> ul.nav-children {
display: block;
}
> a {
background: #21262d;
}
}
&:last-child {
> a {
border-top: 1px solid #21262d;
border-bottom: 1px solid #21262d;
}
}
&.nav-active {
> a {
background: #21262d;
}
}
> a {
position: relative;
text-align: center;
padding: 12px 10px;
border-top: 1px solid #21262d;
&:after {
content: none;
}
i {
margin-right: 0;
font-size: 1.8rem;
}
span {
display: block;
&.badge {
position: absolute;
top: 2px;
left: 60%;
transform: translateX(-50%);
}
}
.not-included {
display: block;
}
}
ul.nav-children {
position: absolute;
top: 0;
left: 100%;
min-width: 210px;
border-left: 3px solid #2f3139;
background: #21262d;
li {
&:hover {
> ul.nav-children {
display: block;
}
> a {
color: #FFF;
&:hover {
background: transparent;
}
}
}
a {
padding: 6px 15px;
overflow: visible;
}
&.nav-parent {
> a {
padding-right: 30px;
&:after {
content: '\f105';
padding: 6px 10px;
right: 5px;
}
}
}
}
ul.nav-children {
padding: 10px 0;
}
}
}
li {
&.nav-parent {
&:hover {
> a {
&:before {
content: '';
display: block;
position: absolute;
top: 0;
right: -3px;
bottom: 0;
border-right: 4px solid #21262d;
z-index: 1;
}
}
}
&.nav-expanded {
> ul.nav-children {
display: none;
}
&:hover {
> ul.nav-children {
display: block;
}
}
}
}
}
}
.sidebar-widget {
display: none;
}
}
}
//// SIDEBAR LEFT COLLAPSED ////
&.sidebar-left-collapsed {
.sidebar-left {
width: 55px;
.nano {
&:hover {
width: 55px;
.sidebar-widget {
display: none;
}
}
.nav-main {
> li {
> a {
overflow: visible;
span {
display: none;
}
> i {
font-size: 1.2rem;
}
}
}
}
}
}
}
//// SIDEBAR LIGHT ////
&.sidebar-light {
.sidebar-left {
.nano {
.nav-main {
> li {
&:hover {
> a {
background: #fafafa;
}
}
&:last-child {
> a {
border-top: 1px solid #fafafa;
border-bottom: 1px solid #fafafa;
}
}
&.nav-active {
> a {
background: #fafafa;
}
}
> a {
border-top: 1px solid #fafafa;
}
ul.nav-children {
border-left: 3px solid #F1F1F1;
background: #fafafa;
li {
&:hover {
> a {
color: #000;
&:hover {
background: transparent;
}
}
}
}
}
}
li {
&.nav-parent:hover {
> a {
&:before {
border-right: 4px solid #fafafa;
}
}
}
}
}
}
}
&.sidebar-left-with-menu {
&.boxed, .content-with-menu {
&:after {
box-shadow: none;
}
}
&:not(.sidebar-right-opened) {
.inner-menu {
border-left: 2px solid #e2e3e6;
}
}
&.no-overflowscrolling:not(.dark) {
.inner-menu {
.nano {
box-shadow: none;
}
}
}
}
}
//// SIDEBAR WITH MENU ////
&.sidebar-left-with-menu {
/* Sidebar Left Opened - Sidebar Right Closed / Not Scroll */
&:not(.sidebar-right-opened):not(.scroll) {
.inner-body {
margin-left: 153px;
}
.page-header, .inner-menu {
left: 152px;
}
.content-with-menu {
.inner-toolbar {
left: 450px;
}
}
}
/* Sidebar Left Opened - Sidebar Right Closed */
&:not(.sidebar-right-opened) {
.inner-menu {
border-left: 2px solid #282d36;
}
}
/* Sidebar Left Collapsed */
&.sidebar-left-collapsed {
&:not(.sidebar-right-opened):not(.scroll) {
.content-body {
margin-left: 55px;
}
.content-with-menu {
.inner-toolbar {
left: 355px;
}
}
.page-header, .inner-menu, .inner-menu-toggle {
left: 55px;
}
}
&:not(.scroll) {
.inner-body {
margin-left: 300px;
}
}
}
/* Scroll Layout */
&.scroll {
.content-with-menu {
display: flex;
width: calc(100% + 80px);
height: calc(100% + 40px);
border-top: 0;
margin: -40px;
}
}
/* min 768px & max 1365px */
@media (max-width: 1365px) {
.inner-body {
width: calc(100% - 153px);
}
.content-body {
margin-left: 0;
}
/* Sidebar Left Opened - Sidebar Right Closed / Not Scroll */
&:not(.sidebar-right-opened):not(.scroll) {
.inner-menu-toggle {
left: 152px;
}
.content-with-menu {
.inner-toolbar {
left: 152px;
}
}
}
/* Sidebar Left Collapsed */
&.sidebar-left-collapsed {
.inner-body {
width: 100% !important;
margin-left: 0 !important;
}
&.inner-menu-opened {
&:not(.sidebar-right-opened):not(.scroll) {
.content-body {
margin-left: 355px;
}
.content-with-menu {
.inner-toolbar {
left: 355px;
}
}
}
}
&:not(.sidebar-right-opened):not(.scroll) {
.content-with-menu {
.inner-toolbar {
left: 55px;
}
}
}
}
/* Inner Menu Opened */
&.inner-menu-opened {
&:not(.sidebar-right-opened):not(.scroll) {
.content-body {
margin-left: 300px;
}
.content-with-menu {
.inner-toolbar {
left: 452px;
}
}
}
}
}
}
}
}
// SIDEBAR LEFT PANEL
// -----------------------------------------------------------------------------
@media only screen and (min-width: 768px) {
html.left-sidebar-panel {
.inner-wrapper {
padding-top: 85px;
}
.content-body {
padding: 0;
margin-right: 25px;
}
.page-header {
display: inline-flex;
flex-direction: column;
width: 100%;
margin-bottom: 15px;
}
.sidebar-left {
margin: 0 25px 25px;
border-radius: 5px;
overflow: hidden;
}
/* Sidebar Right Opened */
&.sidebar-right-opened {
.sidebar-left {
margin: 0 25px 0 0;
}
}
/* Fixed */
&.fixed {
.page-header {
position: relative;
left: 0;
top: 0;
}
.content-body {
margin-left: 350px;
}
.sidebar-left {
margin: 25px;
padding-bottom: 0;
}
/* Fixed & Sidebar Right Opened */
&.sidebar-right-opened {
.page-header {
margin-right: 0;
}
.sidebar-left {
margin-left: 0;
}
.content-body {
margin-left: 325px;
}
}
}
/* Boxed */
&.boxed {
}
/* ie9 */
&.ie9 {
&.no-overflowscrolling {
.nano {
min-height: 100vh;
> .nano-content {
position: static;
}
}
}
.sidebar-left {
left: 25px;
}
.content-body {
padding-right: 70px;
left: 50px;
}
}
}
}