From ddaa6630679d7ac88a7d0d95eb4740d90ae7f729 Mon Sep 17 00:00:00 2001 From: Jiiks Date: Fri, 19 Jan 2018 11:26:36 +0200 Subject: [PATCH] Updated styles and components --- .../modules/ui/components/ContentHeader.vue | 23 ++ .../modules/ui/components/CoreSettings.vue | 56 +++++ .../modules/ui/components/SettingSwitch.vue | 107 +++++++++ .../src/modules/ui/components/UISettings.vue | 46 ++++ client/src/modules/ui/components/bdbutton.vue | 78 +------ .../src/modules/ui/components/bdsettings.vue | 88 +++++--- .../modules/ui/components/sidebar/Button.vue | 33 +-- .../modules/ui/components/sidebar/Content.vue | 48 ++++ .../modules/ui/components/sidebar/Header.vue | 20 +- .../modules/ui/components/sidebar/Sidebar.vue | 23 +- .../modules/ui/components/sidebar/View.vue | 167 +------------- .../modules/ui/components/sidebar/index.js | 3 +- client/src/styles/index.scss | 1 + client/src/styles/partials/bdsettings.scss | 77 +++++++ client/src/styles/partials/index.scss | 2 + client/src/styles/partials/sidebar.scss | 77 +++++++ client/src/styles/partials/sidebarview.scss | 213 ++++++++++++++++++ 17 files changed, 726 insertions(+), 336 deletions(-) create mode 100644 client/src/modules/ui/components/ContentHeader.vue create mode 100644 client/src/modules/ui/components/CoreSettings.vue create mode 100644 client/src/modules/ui/components/SettingSwitch.vue create mode 100644 client/src/modules/ui/components/UISettings.vue create mode 100644 client/src/modules/ui/components/sidebar/Content.vue create mode 100644 client/src/styles/partials/bdsettings.scss create mode 100644 client/src/styles/partials/index.scss create mode 100644 client/src/styles/partials/sidebar.scss create mode 100644 client/src/styles/partials/sidebarview.scss diff --git a/client/src/modules/ui/components/ContentHeader.vue b/client/src/modules/ui/components/ContentHeader.vue new file mode 100644 index 00000000..48d5fa9c --- /dev/null +++ b/client/src/modules/ui/components/ContentHeader.vue @@ -0,0 +1,23 @@ + + + diff --git a/client/src/modules/ui/components/CoreSettings.vue b/client/src/modules/ui/components/CoreSettings.vue new file mode 100644 index 00000000..59244cc8 --- /dev/null +++ b/client/src/modules/ui/components/CoreSettings.vue @@ -0,0 +1,56 @@ + + + \ No newline at end of file diff --git a/client/src/modules/ui/components/SettingSwitch.vue b/client/src/modules/ui/components/SettingSwitch.vue new file mode 100644 index 00000000..ccdb1cec --- /dev/null +++ b/client/src/modules/ui/components/SettingSwitch.vue @@ -0,0 +1,107 @@ + + + diff --git a/client/src/modules/ui/components/UISettings.vue b/client/src/modules/ui/components/UISettings.vue new file mode 100644 index 00000000..2040035e --- /dev/null +++ b/client/src/modules/ui/components/UISettings.vue @@ -0,0 +1,46 @@ + + + \ No newline at end of file diff --git a/client/src/modules/ui/components/bdbutton.vue b/client/src/modules/ui/components/bdbutton.vue index 4147f08c..3ee9c86c 100644 --- a/client/src/modules/ui/components/bdbutton.vue +++ b/client/src/modules/ui/components/bdbutton.vue @@ -1,12 +1,11 @@ - - - \ No newline at end of file diff --git a/client/src/modules/ui/components/bdsettings.vue b/client/src/modules/ui/components/bdsettings.vue index b6f03e24..00cf0a78 100644 --- a/client/src/modules/ui/components/bdsettings.vue +++ b/client/src/modules/ui/components/bdsettings.vue @@ -1,14 +1,24 @@ - - \ No newline at end of file diff --git a/client/src/modules/ui/components/sidebar/Button.vue b/client/src/modules/ui/components/sidebar/Button.vue index 4e90f853..8c97b9f5 100644 --- a/client/src/modules/ui/components/sidebar/Button.vue +++ b/client/src/modules/ui/components/sidebar/Button.vue @@ -5,35 +5,4 @@ export default { props: ['item', 'onClick'] } - - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/modules/ui/components/sidebar/Content.vue b/client/src/modules/ui/components/sidebar/Content.vue new file mode 100644 index 00000000..caa3c70f --- /dev/null +++ b/client/src/modules/ui/components/sidebar/Content.vue @@ -0,0 +1,48 @@ + + + \ No newline at end of file diff --git a/client/src/modules/ui/components/sidebar/Header.vue b/client/src/modules/ui/components/sidebar/Header.vue index 0739eed9..3d498776 100644 --- a/client/src/modules/ui/components/sidebar/Header.vue +++ b/client/src/modules/ui/components/sidebar/Header.vue @@ -5,22 +5,4 @@ export default { props: ['item'] } - - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/modules/ui/components/sidebar/Sidebar.vue b/client/src/modules/ui/components/sidebar/Sidebar.vue index 238e6134..10260530 100644 --- a/client/src/modules/ui/components/sidebar/Sidebar.vue +++ b/client/src/modules/ui/components/sidebar/Sidebar.vue @@ -8,25 +8,4 @@ export default { } - - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/modules/ui/components/sidebar/View.vue b/client/src/modules/ui/components/sidebar/View.vue index bdbcb511..efcb1f04 100644 --- a/client/src/modules/ui/components/sidebar/View.vue +++ b/client/src/modules/ui/components/sidebar/View.vue @@ -24,169 +24,4 @@ export default { } } } - - + \ No newline at end of file diff --git a/client/src/modules/ui/components/sidebar/index.js b/client/src/modules/ui/components/sidebar/index.js index ff8e8a4e..51862d45 100644 --- a/client/src/modules/ui/components/sidebar/index.js +++ b/client/src/modules/ui/components/sidebar/index.js @@ -2,4 +2,5 @@ export { default as SidebarHeader } from './Header.vue'; export { default as SidebarButton } from './Button.vue'; export { default as SidebarItem } from './Item.vue'; export { default as SidebarView } from './View.vue'; -export { default as Sidebar } from './Sidebar.vue'; \ No newline at end of file +export { default as Sidebar } from './Sidebar.vue'; +export { default as SidebarViewContent } from './Content.vue'; \ No newline at end of file diff --git a/client/src/styles/index.scss b/client/src/styles/index.scss index e69de29b..a5a02b66 100644 --- a/client/src/styles/index.scss +++ b/client/src/styles/index.scss @@ -0,0 +1 @@ +@import './partials/index.scss'; \ No newline at end of file diff --git a/client/src/styles/partials/bdsettings.scss b/client/src/styles/partials/bdsettings.scss new file mode 100644 index 00000000..3885ffdc --- /dev/null +++ b/client/src/styles/partials/bdsettings.scss @@ -0,0 +1,77 @@ +.bd-settings-button { + position: absolute; + z-index: 90001; + top: 22px; + width: 70px; + height: 48px; + left: 0; + background: #202225; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.06); + opacity: 1; + + &.active { + background: transparent; + opacity: 1; + box-shadow: none; + + .bd-settings-button-btn { + filter: none; + opacity: 1; + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTk0MCA2NDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE5NDAgNjQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTU2LjEsMjczLjlIMjl2MTQyLjdsODQuNiw3Ni4yVjM1NC4yaDQ1LjJjMjguNywwLDQyLjksMTMuOCw0Mi45LDM2djEwNmMwLDIyLjItMTMuNCwzNy4xLTQyLjksMzcuMUgyOC42djgwLjdoMTI3YzY4LjEsMC40LDEzMi0zMy43LDEzMi0xMTEuN3YtMTE0QzI4OC4xLDMwOC43LDIyNC4yLDI3My45LDE1Ni4xLDI3My45TDE1Ni4xLDI3My45eiIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik04MjEuOSw1MDIuM1YzODUuMmMwLTQyLjEsNzUuOC01MS43LDk4LjctOS42bDcwLTI4LjNjLTI3LjYtNjAuNS03Ny43LTc4LjEtMTE5LjQtNzguMWMtNjguMSwwLTEzNS41LDM5LjQtMTM1LjUsMTE1Ljl2MTE3LjFjMCw3Ny4zLDY3LjMsMTE1LjksMTMzLjksMTE1LjljNDIuOSwwLDk0LjEtMjEsMTIyLjUtNzYuMmwtNzUtMzQuNEM4OTguOCw1NTQuOCw4MjEuOSw1NDMuMyw4MjEuOSw1MDIuM0w4MjEuOSw1MDIuM3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNTkwLjQsNDAxLjNjLTI2LjQtNS43LTQ0LTE1LjMtNDUuMi0zMS44YzEuNS0zOS40LDYyLjQtNDAuOSw5OC0zLjFsNTYuMy00My4yYy0zNS4yLTQyLjktNzUtNTQuMy0xMTUuOS01NC4zYy02Mi40LDAtMTIyLjgsMzUuMi0xMjIuOCwxMDEuOGMwLDY0LjcsNDkuNyw5OS41LDEwNC41LDEwNy45YzI3LjksMy44LDU4LjksMTQuOSw1OC4yLDM0LjFjLTIuMywzNi40LTc3LjMsMzQuNC0xMTEuNC02LjlsLTU0LjMsNTAuOWMzMS44LDQwLjksNzUsNjEuNiwxMTUuNiw2MS42YzYyLjQsMCwxMzEuNi0zNiwxMzQuMy0xMDEuOEM3MTEuMyw0MzMuNSw2NTAuOSw0MTIuNCw1OTAuNCw0MDEuM0w1OTAuNCw0MDEuM3oiLz48cmVjdCB4PSIzMzQiIHk9IjI3My45IiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iODUuNyIgaGVpZ2h0PSIzMzkuOCIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNzc5LjMsMjczLjloLTEyN3YxNDIuN2w4NC42LDc2LjJWMzU0LjJoNDUuMmMyOC43LDAsNDIuOSwxMy44LDQyLjksMzZ2MTA2YzAsMjIuMi0xMy40LDM3LjEtNDIuOSwzNy4xaC0xMzAuMXY4MC43aDEyNy40YzY4LjEsMC40LDEzMi0zMy43LDEzMi0xMTEuN3YtMTE0QzE5MTEuNCwzMDguNywxODQ3LjUsMjczLjksMTc3OS4zLDI3My45TDE3NzkuMywyNzMuOXoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTE1NiwyNjkuM2MtNzAuNCwwLTE0MC40LDM4LjMtMTQwLjQsMTE2LjdWNTAyYzAsNzcuNyw3MC40LDExNi43LDE0MS4yLDExNi43YzcwLjQsMCwxNDAuNC0zOSwxNDAuNC0xMTYuN1YzODZDMTI5Ny4yLDMwNy45LDEyMjYuNCwyNjkuMywxMTU2LDI2OS4zeiBNMTIxMS4xLDUwMmMwLDI0LjUtMjcuNiwzNy4xLTU0LjcsMzcuMWMtMjcuNiwwLTU1LjEtMTEuOS01NS4xLTM3LjFWMzg2YzAtMjQuOSwyNi44LTM4LjMsNTMuNi0zOC4zYzI3LjksMCw1Ni4zLDExLjksNTYuMywzOC4zVjUwMnoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTUzOC4zLDQ5Ny40YzQwLjktMTMsNjYuNi00OC42LDY2LjYtMTExLjRjLTEuOS03OS42LTU2LjMtMTExLjctMTI2LjMtMTExLjdoLTEzNS44djMzOS44aDg2LjlWNTA2LjJoMTUuM2w3OC44LDEwNy45aDEwNy4xTDE1MzguMyw0OTcuNHogTTE0ODAuMSw0MzEuOWgtNTAuNXYtNzcuN2g1MC41QzE1MzQuMSwzNTQuMiwxNTM0LjEsNDMxLjksMTQ4MC4xLDQzMS45eiIvPjwvZz48Zz48cGF0aCBmaWxsPSIjM0U4MkU1IiBkPSJNMTAzLjMsNDMuM0gyOC42djc3LjFsNDcuNyw0M1Y4MS43aDI3LjhjMjkuNiwwLDI5LjYsMzcuMiwwLDM3LjJIODUuOHYzNS42aDE4LjNjMjkuNiwwLDI5LjYsMzcuMiwwLDM3LjJIMjguNlYyMzBoNzQuNmMzOC41LDAsNjguMy0xNS40LDY5LjQtNTMuNmMwLTE3LjYtNC44LTMwLjctMTMuMy0zOS44YzguNS05LjEsMTMuMy0yMi4yLDEzLjMtMzkuOEMxNzEuNiw1OC43LDE0MS44LDQzLjMsMTAzLjMsNDMuM3oiLz48cG9seWdvbiBmaWxsPSIjM0U4MkU1IiBwb2ludHM9IjM1OC43LDQzLjMgMzU4LjcsODEuNyA0MDYuOCw4MS43IDQwNi44LDIzMCA0NTQuNSwyMzAgNDU0LjUsODEuNyA1MjkuOCw4MS43IDUyOS44LDIzMCA1NzcuNiwyMzAgNTc3LjYsODEuNyA2MjUuNyw4MS43IDYyNS43LDQzLjMgIi8+PHBvbHlnb24gZmlsbD0iIzNFODJFNSIgcG9pbnRzPSIxOTcuNiw0My4zIDE5Ny42LDIzMCAzNDEuNywyMzAgMzQxLjcsMTkxLjcgMjQ1LjQsMTkxLjcgMjQ1LjQsMTYwLjUgMjk2LjUsMTYwLjUgMjk2LjUsMTEyLjggMjQ1LjQsMTEyLjggMjQ1LjQsODEuNyAzNDEuNyw4MS43IDM0MS43LDQzLjMgIi8+PHBvbHlnb24gZmlsbD0iIzNFODJFNSIgcG9pbnRzPSI2NDIuNCw0My4zIDY0Mi40LDIzMCA3ODYuNCwyMzAgNzg2LjQsMTkxLjcgNjkwLjEsMTkxLjcgNjkwLjEsMTYwLjUgNzQxLjMsMTYwLjUgNzQxLjMsMTEyLjggNjkwLjEsMTEyLjggNjkwLjEsODEuNyA3ODYuNCw4MS43IDc4Ni40LDQzLjMgIi8+PHBhdGggZmlsbD0iIzNFODJFNSIgZD0iTTkxOC42LDE2NmMyMi41LTcuMSwzNi41LTI2LjYsMzYuNS02MS4xYy0xLTQzLjYtMzAuOC02MS43LTY5LjItNjEuN2gtNzQuNVYyMzBIODU5di01OS4yaDguNGw0My4yLDU5LjJoNTguN0w5MTguNiwxNjZ6IE04ODYuNywxMzAuMkg4NTlWODEuN2gyNy43QzkxNi4zLDgxLjcsOTE2LjMsMTMwLjIsODg2LjcsMTMwLjJ6Ii8+PC9nPjwvc3ZnPg==); + width: 130px; + height: 80px; + background-size: 100% 100%; + margin-left: 20px; + cursor: default; + } + } + + .bd-settings-button-btn { + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==); + background-size: 50% 50%; + background-repeat: no-repeat; + background-position: center; + width: 100%; + height: 100%; + z-index: 3000; + cursor: pointer; + filter: grayscale(100%); + opacity: 0.5; + transition: all 0.4s ease-in-out; + + &:hover { + filter: none; + opacity: 1; + } + } + + &settigns { + position: absolute; + top: 22px; + left: 0; + bottom: 0; + z-index: 90000; + width: 200px; + } +} + +.bd-settings { + position: absolute; + top: 22px; + left: 0; + bottom: 0; + z-index: 3000; + width: 310px; + transform: translateX(-100%) translateY(-100%); + opacity: 0; + transition: all .4s ease-in-out; + + &.active { + width: 900px; + } +} + +.bd-settings.active { + transform: none; + opacity: 1; +} diff --git a/client/src/styles/partials/index.scss b/client/src/styles/partials/index.scss new file mode 100644 index 00000000..e0ec2b67 --- /dev/null +++ b/client/src/styles/partials/index.scss @@ -0,0 +1,2 @@ +@import './sidebarview'; +@import './bdsettings.scss'; \ No newline at end of file diff --git a/client/src/styles/partials/sidebar.scss b/client/src/styles/partials/sidebar.scss new file mode 100644 index 00000000..4afa91fa --- /dev/null +++ b/client/src/styles/partials/sidebar.scss @@ -0,0 +1,77 @@ +.bd-sidebar-view { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + display: flex; + box-sizing: border-box; + + .bd-sidebar-region { + background: #202225; + -webkit-box-flex: 1; + -webkit-box-pack: end; + display: -webkit-box; + display: flex; + padding-top: 50px; + z-index: 5; + + .bd-settingsWrap { + display: flex; + height: 100%; + -webkit-box-flex: 1; + flex: 1; + min-height: 1px; + box-sizing: border-box; + + .bd-scroller { + width: 100%; + padding-right: 20px; + + .bd-sidebar { + padding: 0; + + .bd-header { + padding: 6px 0; + margin-left: 10px; + margin-top: 15px; + color: rgba(255,255,255,0.15); + font-size: 14px; + font-weight: 700; + line-height: 16px; + text-transform: uppercase; + font-weight: 600; + flex-shrink: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif; + } + + .bd-item { + border-radius: 3px; + margin-bottom: 2px; + padding-bottom: 6px; + padding-top: 6px; + padding: 6px 10px; + color: #b9bbbe; + cursor: pointer; + font-size: 17px; + line-height: 20px; + position: relative; + flex-shrink: 0; + font-weight: 500; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif; + } + } + } + } + } + + .bd-content-region { + + } +} \ No newline at end of file diff --git a/client/src/styles/partials/sidebarview.scss b/client/src/styles/partials/sidebarview.scss new file mode 100644 index 00000000..34aeda32 --- /dev/null +++ b/client/src/styles/partials/sidebarview.scss @@ -0,0 +1,213 @@ +.bd-sidebar-view { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + display: flex; + box-sizing: border-box; + + .bd-sidebar-region { + background: #202225; + -webkit-box-flex: 1; + -webkit-box-pack: end; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + justify-content: flex-end; + flex: 1 0 30%; + z-index: 5; + max-width: 300px; + + .bd-settingsWrap { + display: flex; + height: 100%; + -webkit-box-flex: 1; + flex: 1; + min-height: 1px; + box-sizing: border-box; + padding: 50px 15px 15px 15px; + + .bd-scroller { + width: 100%; + padding-right: 20px; + + .bd-sidebar { + padding: 0; + + .bd-header { + padding: 6px 0; + margin-left: 10px; + margin-top: 15px; + color: rgba(255, 255, 255, 0.15); + font-size: 14px; + font-weight: 700; + line-height: 16px; + text-transform: uppercase; + font-weight: 600; + flex-shrink: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif; + } + + .bd-item { + border-radius: 3px; + margin-bottom: 2px; + padding-bottom: 6px; + padding-top: 6px; + padding: 6px 10px; + color: #b9bbbe; + cursor: pointer; + font-size: 17px; + line-height: 20px; + position: relative; + flex-shrink: 0; + font-weight: 500; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif; + + &:hover, + &.active { + background: rgba(0, 0, 0, 0.4); + } + + &.active { + color: #FFF; + } + } + } + } + } + } +} + +.bd-settings-x { + position: absolute; + top: 0; + left: 250px; + border: 2px solid #6e6e6e; + border-radius: 50%; + width: 25px; + height: 25px; + justify-content: center; + display: flex; + align-items: center; + cursor: pointer; + + &:hover { + background-color: hsla(218,5%,47%,.3); + } +} + +.bd-sidebar-view { + .bd-content-region { + flex-grow: 1; + transform: translateX(-100%); + background: #2F3136; + + .bd-content-tools { + width: 100px; + min-width: 100px; + } + } + + .bd-content > div:not(.active) { + opacity: 0; + } + + .bd-content { + animation: bd-fade-in .4s forwards; + + .animating { + animation: bd-fade-out .4s forwards; + } + + .bd-settingsWrap { + padding: 20px 15px 15px 15px; + } + } + + &.active { + .bd-content-region { + animation: bd-slidein .6s forwards; + } + } +} + + + + +@keyframes bd-slidein { + 0% { + transform: translateX(-100%); + opacity: .2; + } + + 70% { + transform: translateX(0%); + opacity: 1; + } + + 100% { + transform: translateX(0%); + opacity: 1; + } +} + +@keyframes bd-slideout { + 0% { + transform: translateX(0%); + opacity: 1; + } + + 100% { + transform: translateX(-100%); + opacity: .2; + } +} + +@keyframes bd-slideoutin { + 0% { + transform: translateX(-10%); + opacity: 1; + } + + 20% { + transform: translateX(-100%); + opacity: .2; + } + + 70% { + transform: translateX(0%); + opacity: 1; + } + + 100% { + transform: translateX(-10%); + opacity: 1; + } +} + +@keyframes bd-fade-out { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} + +@keyframes bd-fade-in { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +}