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

fix: sidebar overlay style.

Browse Source
This commit is contained in:
a.bouhuolia
2021-08-03 21:18:42 +02:00
parent d2b75f6ed8
commit 6cd6bd8700
6 changed files with 128 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/config/sidebarMenu.js
View File

@@ -311,8 +311,4 @@ export default [
text: <T id={'billing'} />,
href: '/billing',
},
{
text: <T id={'auditing_system'} />,
href: '/auditing/list',
},
];

7
client/src/style/App.scss
View File

@@ -26,6 +26,7 @@
@import 'components/PageForm';
@import 'components/Tooltip';
@import 'components/Postbox';
@import 'components/Overlay';
@import 'components/SidebarOverlay';
// Pages
@@ -101,9 +102,6 @@ body.hide-scrollbar .Pane2 {
background-color: #0066ff;
}
.bp3-overlay-backdrop {
background-color: rgba(0, 10, 30, 0.7);
}
.ReactVirtualized__Collection {}
@@ -209,4 +207,5 @@ html[lang^="ar"] {
.bp3-tooltip2 .bp3-popover2-arrow:before{
box-shadow: 0 0 0;
}
}

6
client/src/style/components/Overlay.scss Normal file
View File

@@ -0,0 +1,6 @@
.bp3-overlay-backdrop {
background-color: rgba(0, 10, 30, 0.7);
}

235
client/src/style/components/SidebarOverlay.scss
View File

@@ -1,129 +1,130 @@
.sidebar-overlay {
background: #fff;
background: #fff;
height: 100%;
width: 225px;
outline: 0;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
z-index: 15;
&__scroll-wrapper {
height: 100%
}
.ScrollbarsCustom-Track {
&.ScrollbarsCustom-TrackY,
&.ScrollbarsCustom-TrackX {
background: rgba(0, 0, 0, 0);
}
}
.ScrollbarsCustom-Thumb {
&.ScrollbarsCustom-ThumbX,
&.ScrollbarsCustom-ThumbY {
background: rgba(0, 0, 0, 0);
}
}
.ScrollbarsCustom-Content {
display: flex;
flex-direction: column;
height: 100%;
width: 225px;
outline: 0;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
&__scroll-wrapper {
height: 100%
}
.ScrollbarsCustom-Track {
&.ScrollbarsCustom-TrackY,
&.ScrollbarsCustom-TrackX {
background: rgba(0, 0, 0, 0);
}
}
}
&:hover {
.ScrollbarsCustom-Thumb {
&.ScrollbarsCustom-ThumbX,
&.ScrollbarsCustom-ThumbY {
background: rgba(0, 0, 0, 0);
background: rgba(0, 0, 0, 0.5);
}
}
.ScrollbarsCustom-Content {
display: flex;
flex-direction: column;
height: 100%;
}
&:hover {
.ScrollbarsCustom-Thumb {
&.ScrollbarsCustom-ThumbX,
&.ScrollbarsCustom-ThumbY {
background: rgba(0, 0, 0, 0.5);
}
}
}
&__menu {
margin: 16px 0;
}
&__item {
font-size: 15px;
color: #00102b;
a {
color: inherit;
display: block;
padding: 10px 22px;
text-decoration: none;
&:hover,
&:focus{
background: #f3f3f3;
}
}
}
&__divider {
height: 1px;
margin: 6px 0;
background: #e2e5ec;
}
&__label{
text-transform: uppercase;
font-size: 12px;
padding: 14px 20px 10px;
letter-spacing: 1px;
color: #707a85;
html[lang^="ar"] & {
font-size: 13px;
letter-spacing: 0;
font-weight: 500;
}
}
&__label + .sidebar-overlay__divider{
margin-top: 0;
}
}
.sidebar-overlay-transition {
transform: translateX(-100%);
&.bp3-overlay{
&-appear,
&-enter {
transform: translateX(-100%)
}
&-appear-active,
&-enter-active {
transform: translateX(0) !important;
transition: all 100ms ease-in-out;
}
&-appear-done,
&-enter-done {
transform: translateX(0) !important;
}
&-exit {
transform: translateX(0) !important;
}
&-exit-active {
transform: translateX(-100%) !important;
transition: all 100ms ease-in-out;
}
&-exit-done{
transform: translateX(-100%) !important;
&__menu {
margin: 16px 0;
}
&__item {
font-size: 15px;
color: #00102b;
a {
color: inherit;
display: block;
padding: 10px 22px;
text-decoration: none;
&:hover,
&:focus {
background: #f3f3f3;
}
}
}
.sidebar-overlay-backdrop{
background-color: rgba(0, 10, 30, 0.15);
&__divider {
height: 1px;
margin: 6px 0;
background: #e2e5ec;
}
&__label {
text-transform: uppercase;
font-size: 12px;
padding: 14px 20px 10px;
letter-spacing: 1px;
color: #707a85;
html[lang^="ar"] & {
font-size: 13px;
letter-spacing: 0;
font-weight: 500;
}
}
&__label+.sidebar-overlay__divider {
margin-top: 0;
}
}
.sidebar-overlay-transition {
transform: translateX(-100%);
&.bp3-overlay {
&-appear,
&-enter {
transform: translateX(-100%)
}
&-appear-active,
&-enter-active {
transform: translateX(0) !important;
transition: all 100ms ease-in-out;
}
&-appear-done,
&-enter-done {
transform: translateX(0) !important;
}
&-exit {
transform: translateX(0) !important;
}
&-exit-active {
transform: translateX(-100%) !important;
transition: all 100ms ease-in-out;
}
&-exit-done {
transform: translateX(-100%) !important;
}
}
}
.sidebar-overlay-backdrop {
background-color: rgba(0, 10, 30, 0.15);
z-index: 14;
}

1
client/src/style/pages/Dashboard/Dashboard.scss
View File

@@ -54,7 +54,6 @@ $dashboard-views-bar-height: 45px;
}
.#{$ns}-icon {
color: #1552c8;
margin-right: 5px;
}
}

2
client/src/style/variables.scss
View File

@@ -15,7 +15,7 @@ $menu-item-color-active: $light-gray3;
$breadcrumbs-collapsed-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#6B8193' enable-background='new 0 0 16 16' xml:space='preserve'><g><circle cx='2' cy='8.03' r='2'/><circle cx='14' cy='8.03' r='2'/><circle cx='8' cy='8.03' r='2'/></g></svg>");
$sidebar-zindex: 21;
$sidebar-zindex: 16;
$pt-font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont,
Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue,
Icons16, sans-serif;