Files
bigcapital/client/src/style/views/Sidebar.scss
2020-03-25 21:27:52 +02:00

107 lines
1.9 KiB
SCSS

$sidebar-background: #01194E;
$sidebar-text-color: #fff;
$sidebar-width: 220px;
$sidebar-menu-item-color: #E9EBF7;
$sidebar-popover-submenu-bg: rgb(1, 20, 62);
.sidebar{
background: $sidebar-background;
color: $sidebar-text-color;
width: $sidebar-width;
&__head{
padding: 16px 10px;
&-company-meta{
.company-name{
font-size: 16px;
font-weight: 200;
margin-bottom: 5px;
}
.company-meta{
color: #A7AFC2;
font-size: 12px;
}
}
}
&-menu{
background: transparent;
padding: 0;
min-width: $sidebar-width;
border-radius: 0;
.#{$ns}-menu-item{
color: $sidebar-menu-item-color;
border-radius: 0;
padding: 10px 16px;
font-size: 15px;
font-weight: 200;
&:hover{
background: #012470;
}
&:focus,
&:active{
background: #01143e;
}
> .#{$ns}-icon{
color: #767B9B;
margin-right: 12px;
margin-top: 0;
}
> .#{$ns}-icon-caret-right{
margin-right: -2px;
margin-top: 2px;
color: #767B9B;
}
}
.#{$ns}-submenu{
.#{$ns}-menu{
padding: 10px 0;
margin: 0;
background: $sidebar-popover-submenu-bg;
border-radius: 0;
&-item{
padding-top: 7px;
padding-bottom: 7px;
padding-left: 16px;
padding-right: 16px;
font-size: 14px;
&,
&:hover,
&:active,
&:focus{
color: #fff;
background: transparent;
}
}
}
.#{$ns}-popover{
padding: 0;
&-content{
box-shadow: 0 0 0;
}
}
}
.#{$ns}-popover-target.#{$ns}-popover-open .#{$ns}-menu-item{
color: $sidebar-menu-item-color;
}
.#{$ns}-menu-divider{
border-top-color: #183C86;
margin-left: 0;
margin-right: 0;
}
}
}