QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 13:20:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP Feature / General & Users & Sidebar

Browse Source
This commit is contained in:
elforjani3
2020-04-20 16:52:25 +02:00
parent ff0a26a790
commit aaa370b9c3
21 changed files with 658 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
client/src/style/views/Sidebar.scss
View File

@@ -1,117 +1,191 @@
$sidebar-background: #01194E;
$sidebar-background: #01194e;
$sidebar-text-color: #fff;
$sidebar-width: 220px;
$sidebar-menu-item-color: #b8c0d5;
$sidebar-popover-submenu-bg: rgb(1, 20, 62);
.ScrollbarsCustom {
position: 'relative';
width: 100%;
height: 100%;
}
.sidebar{
.ScrollbarsCustom-Wrapper {
position: 'absolute';
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.ScrollbarsCustom-Content {
box-sizing: 'border-box';
}
.ScrollbarsCustom-Track {
&.ScrollbarsCustom-TrackY,
&.ScrollbarsCustom-TrackX {
position: absolute;
overflow: hidden;
border-radius: 4px;
background: rgba(0, 0, 0, 0.1);
user-select: none;
}
&.ScrollbarsCustom-TrackX {
height: 10px;
width: calc(100% - 20px);
bottom: 0;
left: 10px;
}
&.ScrollbarsCustom-TrackY {
width: 10px;
height: calc(100% - 20px);
top: 10px;
}
}
.ScrollbarsCustom-Thumb {
&.ScrollbarsCustom-ThumbX,
&.ScrollbarsCustom-ThumbY {
cursor: pointer;
border-radius: 4px;
background: rgba(255, 0, 0, 1);
}
&.ScrollbarsCustom-ThumbX {
height: 100%;
width: 0px;
}
&.ScrollbarsCustom-ThumbY {
height: 100%;
width: 0px;
}
}
.sidebar {
background: $sidebar-background;
color: $sidebar-text-color;
width: $sidebar-width;
position: fixed;
height: 100%;
&__inner{
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
// ::-webkit-scrollbar {
// width: 14px;
// background: transparent;
// }
// ::-webkit-scrollbar-thumb {
// background-clip: content-box;
// border: 4px solid transparent;
// border-radius: 7px;
// box-shadow: inset 0 0 0 10px;
// }
// ::-webkit-scrollbar-button {
// width: 0;
// height: 0;
// display: none;
// }
// overflow: auto;
// color: #ff000000;
// transition: color 0.3s;
&:hover {
color: rgba(255, 255, 255, 0.35);
}
// &__inner {
// overflow-y: scroll;
// overflow-x: hidden;
// height: 100%;
// }
&__head{
&__head {
padding: 16px 10px;
&-company-meta{
.company-name{
&-company-meta {
.company-name {
font-size: 16px;
font-weight: 200;
margin-bottom: 5px;
color: rgba(255, 255, 255, 0.75);
}
.company-meta{
.company-meta {
color: rgba(255, 255, 255, 0.4);
font-size: 12px;
}
}
}
&-menu{
&-menu {
background: transparent;
padding: 0;
min-width: $sidebar-width;
border-radius: 0;
padding-bottom: 2rem;
.#{$ns}-menu-item{
.#{$ns}-menu-item {
color: $sidebar-menu-item-color;
border-radius: 0;
padding: 10px 16px;
font-size: 15px;
font-weight: 400;
font-weight: 400;
&:hover,
&.bp3-active{
&.bp3-active {
background: #012470;
color: #c1c9dd;
}
&:focus,
&:active{
background: #01143e;
&:active {
background: #01143e;
}
> .#{$ns}-icon{
> .#{$ns}-icon {
color: #767b9b;
margin-right: 14px;
margin-top: 0;
}
> .#{$ns}-icon-caret-right{
> .#{$ns}-icon-caret-right {
margin-right: -4px;
margin-top: 3px;
color: #42547b;
}
}
.#{$ns}-submenu{
.#{$ns}-collapse{
.#{$ns}-submenu {
.#{$ns}-collapse {
border-left: 2px solid rgba(255, 255, 255, 0.15);
&-body{
&-body {
background-color: rgb(11, 34, 85);
padding-bottom: 6px;
padding-top: 6px;
}
.#{$ns}-menu-item{
.#{$ns}-menu-item {
padding: 7px 16px 7px 18px;
font-size: 15px;
color: #8a95b6;
&:hover,
&.bp3-active{
&.bp3-active {
background: transparent;
color: #C5CBE3;
color: #c5cbe3;
}
}
}
.#{$ns}-popover{
.#{$ns}-popover {
padding: 0;
&-content{
&-content {
box-shadow: 0 0 0;
}
}
}
.#{$ns}-popover-target.#{$ns}-popover-open .#{$ns}-menu-item{
.#{$ns}-popover-target.#{$ns}-popover-open .#{$ns}-menu-item {
color: $sidebar-menu-item-color;
}
.#{$ns}-menu-divider{
border-top-color: #1D366A;
color: #6B708C;
.#{$ns}-menu-divider {
border-top-color: #1d366a;
color: #6b708c;
margin: 4px 0;
}
}
}
}