diff options
| author | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-09-09 00:50:59 +0300 |
|---|---|---|
| committer | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-09-09 00:50:59 +0300 |
| commit | efb3a536053b48f3b6f86e9dc936427e7cba4f2f (patch) | |
| tree | 831b3f51b386e3949eef49d8506777f391fb747c | |
| parent | 2f46c3a80f6949bbf67d7ab80e0c87ab88e55031 (diff) | |
| parent | e1af325de812cb7fa62a7512b7830ef6024b4a8f (diff) | |
Merge branch 'sidebar-drop-shadow' into 'master'
Adds drop shadow to the expanded sidebar
Closes #36750 and #13983
See merge request !13994
| -rw-r--r-- | app/assets/javascripts/new_sidebar.js | 5 | ||||
| -rw-r--r-- | app/assets/stylesheets/new_sidebar.scss | 7 |
2 files changed, 12 insertions, 0 deletions
diff --git a/app/assets/javascripts/new_sidebar.js b/app/assets/javascripts/new_sidebar.js index 709a5d33b9f..fbe474f2f61 100644 --- a/app/assets/javascripts/new_sidebar.js +++ b/app/assets/javascripts/new_sidebar.js @@ -19,6 +19,11 @@ export default class NewNavSidebar { } bindEvents() { + document.addEventListener('click', (e) => { + if (!e.target.closest('.nav-sidebar') && (bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md')) { + this.toggleCollapsedSidebar(true); + } + }); this.$openSidebar.on('click', () => this.toggleSidebarNav(true)); this.$closeSidebar.on('click', () => this.toggleSidebarNav(false)); this.$overlay.on('click', () => this.toggleSidebarNav(false)); diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss index 3082f728ac8..378ef8926d5 100644 --- a/app/assets/stylesheets/new_sidebar.scss +++ b/app/assets/stylesheets/new_sidebar.scss @@ -99,6 +99,13 @@ $new-sidebar-collapsed-width: 50px; box-shadow: inset -2px 0 0 $border-color; transform: translate3d(0, 0, 0); + &:not(.sidebar-icons-only) { + @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) { + box-shadow: inset -2px 0 0 $border-color, + 2px 1px 3px $dropdown-shadow-color; + } + } + &.sidebar-icons-only { width: $new-sidebar-collapsed-width; |