From 6cd6bd87003a9a8b5edc2db8f99c8cf25a9a03d4 Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Tue, 3 Aug 2021 21:18:42 +0200 Subject: [PATCH] fix: sidebar overlay style. --- client/src/config/sidebarMenu.js | 4 - client/src/style/App.scss | 7 +- client/src/style/components/Overlay.scss | 6 + .../src/style/components/SidebarOverlay.scss | 235 +++++++++--------- .../src/style/pages/Dashboard/Dashboard.scss | 1 - client/src/style/variables.scss | 2 +- 6 files changed, 128 insertions(+), 127 deletions(-) create mode 100644 client/src/style/components/Overlay.scss diff --git a/client/src/config/sidebarMenu.js b/client/src/config/sidebarMenu.js index 86aaaf652..3911a8945 100644 --- a/client/src/config/sidebarMenu.js +++ b/client/src/config/sidebarMenu.js @@ -311,8 +311,4 @@ export default [ text: , href: '/billing', }, - { - text: , - href: '/auditing/list', - }, ]; diff --git a/client/src/style/App.scss b/client/src/style/App.scss index 927ed9e04..e94202f9d 100644 --- a/client/src/style/App.scss +++ b/client/src/style/App.scss @@ -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; -} \ No newline at end of file +} + diff --git a/client/src/style/components/Overlay.scss b/client/src/style/components/Overlay.scss new file mode 100644 index 000000000..c5cdc5f0b --- /dev/null +++ b/client/src/style/components/Overlay.scss @@ -0,0 +1,6 @@ + + + +.bp3-overlay-backdrop { + background-color: rgba(0, 10, 30, 0.7); + } \ No newline at end of file diff --git a/client/src/style/components/SidebarOverlay.scss b/client/src/style/components/SidebarOverlay.scss index dc16f7876..ad4bb1ecc 100644 --- a/client/src/style/components/SidebarOverlay.scss +++ b/client/src/style/components/SidebarOverlay.scss @@ -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; } - - \ No newline at end of file + + &__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; +} \ No newline at end of file diff --git a/client/src/style/pages/Dashboard/Dashboard.scss b/client/src/style/pages/Dashboard/Dashboard.scss index e42d33523..007a155a7 100644 --- a/client/src/style/pages/Dashboard/Dashboard.scss +++ b/client/src/style/pages/Dashboard/Dashboard.scss @@ -54,7 +54,6 @@ $dashboard-views-bar-height: 45px; } .#{$ns}-icon { color: #1552c8; - margin-right: 5px; } } diff --git a/client/src/style/variables.scss b/client/src/style/variables.scss index 38f267d88..bea903aa4 100644 --- a/client/src/style/variables.scss +++ b/client/src/style/variables.scss @@ -15,7 +15,7 @@ $menu-item-color-active: $light-gray3; $breadcrumbs-collapsed-icon: url("data:image/svg+xml,"); -$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;