Updated styles and components
This commit is contained in:
Jiiks
parent
4e1b5cfc89
commit
ddaa663067
|
|
@ -0,0 +1,23 @@
|
||||||
|
<template>
|
||||||
|
<h2 class="bd-content-title">{{text}}</h2>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
text: {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.bd-content-title {
|
||||||
|
color: #4D7DEC;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 100%;
|
||||||
|
outline: 0;
|
||||||
|
padding: 0;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
<template>
|
||||||
|
<div class="bd-settingsWrap">
|
||||||
|
<div class="bd-scroller">
|
||||||
|
<ContentHeader text="Core Settings" />
|
||||||
|
<div>
|
||||||
|
<SettingSwitch v-for="setting in settings" :setting="setting" :key="setting.id" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import ContentHeader from './ContentHeader.vue';
|
||||||
|
import SettingSwitch from './SettingSwitch.vue';
|
||||||
|
|
||||||
|
const settings = [
|
||||||
|
{id: 0, title: "Public Servers", hint: "Display public servers button"},
|
||||||
|
{id: 1, title: "Minimal Mode", hint: "Hide elements and reduce the size of elements"},
|
||||||
|
{id: 2, title: "Voice Mode", hint: "Only show voice chat"},
|
||||||
|
{id: 0, title: "Public Servers", hint: "Display public servers button"},
|
||||||
|
{id: 1, title: "Minimal Mode", hint: "Hide elements and reduce the size of elements"},
|
||||||
|
{id: 2, title: "Voice Mode", hint: "Only show voice chat"},
|
||||||
|
{id: 0, title: "Public Servers", hint: "Display public servers button"},
|
||||||
|
{id: 1, title: "Minimal Mode", hint: "Hide elements and reduce the size of elements"},
|
||||||
|
{id: 2, title: "Voice Mode", hint: "Only show voice chat"},
|
||||||
|
{id: 0, title: "Public Servers", hint: "Display public servers button"},
|
||||||
|
{id: 1, title: "Minimal Mode", hint: "Hide elements and reduce the size of elements"},
|
||||||
|
{id: 2, title: "Voice Mode", hint: "Only show voice chat"},
|
||||||
|
{id: 0, title: "Public Servers", hint: "Display public servers button"},
|
||||||
|
{id: 1, title: "Minimal Mode", hint: "Hide elements and reduce the size of elements"},
|
||||||
|
{id: 2, title: "Voice Mode", hint: "Only show voice chat"},
|
||||||
|
{id: 0, title: "Public Servers", hint: "Display public servers button"},
|
||||||
|
{id: 1, title: "Minimal Mode", hint: "Hide elements and reduce the size of elements"},
|
||||||
|
{id: 2, title: "Voice Mode", hint: "Only show voice chat"},
|
||||||
|
{id: 0, title: "Public Servers", hint: "Display public servers button"},
|
||||||
|
{id: 1, title: "Minimal Mode", hint: "Hide elements and reduce the size of elements"},
|
||||||
|
{id: 2, title: "Voice Mode", hint: "Only show voice chat"},
|
||||||
|
{id: 0, title: "Public Servers", hint: "Display public servers button"},
|
||||||
|
{id: 1, title: "Minimal Mode", hint: "Hide elements and reduce the size of elements"},
|
||||||
|
{id: 2, title: "Voice Mode", hint: "Only show voice chat"}
|
||||||
|
];
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
ContentHeader,
|
||||||
|
SettingSwitch
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
settings
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
<template>
|
||||||
|
<div class="bd-setting-switch">
|
||||||
|
<div class="bd-title">
|
||||||
|
<h3>{{setting.title}}</h3>
|
||||||
|
<label class="bd-switch-wrapper">
|
||||||
|
<input type="checkbox" class="bd-switch-checkbox" />
|
||||||
|
<div class="bd-switch" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="bd-hint">{{setting.hint}}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
setting: {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.bd-setting-switch {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
-webkit-box-pack: start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
-webkit-box-align: stretch;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-setting-switch .bd-title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
-webkit-box-align: stretch;
|
||||||
|
align-items: stretch;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-webkit-box-orient: horizontal;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-setting-switch .bd-switch-wrapper {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
user-select: none;
|
||||||
|
position: relative;
|
||||||
|
width: 44px;
|
||||||
|
height: 24px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-setting-switch .bd-switch-wrapper input {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-setting-switch .bd-switch-wrapper .bd-switch {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background: #72767d;
|
||||||
|
border-radius: 14px;
|
||||||
|
transition: background .15s ease-in-out,box-shadow .15s ease-in-out,border .15s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-setting-switch .bd-title h3 {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #f6f6f7;
|
||||||
|
flex: 1;
|
||||||
|
line-height: 24px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-setting-switch .bd-hint {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
color: #72767d;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
line-height: 30px;
|
||||||
|
border-bottom: 0px solid hsla(218,5%,47%,.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-setting-switch .bd-switch-wrapper .bd-switch:before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
position: absolute;
|
||||||
|
top: 3px;
|
||||||
|
left: 3px;
|
||||||
|
bottom: 3px;
|
||||||
|
background: #f6f6f7;
|
||||||
|
border-radius: 10px;
|
||||||
|
transition: all .15s ease;
|
||||||
|
box-shadow: 0 3px 1px 0 rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.1), 0 3px 3px 0 rgba(0,0,0,.05);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
<template>
|
||||||
|
<div class="bd-settingsWrap">
|
||||||
|
<div class="bd-scroller">
|
||||||
|
<ContentHeader text="UI Settings" />
|
||||||
|
<div>
|
||||||
|
<SettingSwitch v-for="setting in settings" :setting="setting" :key="setting.id" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import ContentHeader from './ContentHeader.vue';
|
||||||
|
import SettingSwitch from './SettingSwitch.vue';
|
||||||
|
|
||||||
|
const settings = [
|
||||||
|
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||||
|
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||||
|
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||||
|
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||||
|
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||||
|
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||||
|
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||||
|
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||||
|
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||||
|
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||||
|
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||||
|
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||||
|
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||||
|
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"}
|
||||||
|
];
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
ContentHeader,
|
||||||
|
SettingSwitch
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
settings
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -1,12 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="bd-settings-wrapper">
|
<div class="bd-settings-wrapper">
|
||||||
<div class="bd-settings-button" :class="{active: this.isActive}" @click="toggleSettings">
|
<div class="bd-settings-button" :class="{active: this.isActive}" @click="showSettings">
|
||||||
<div class="bd-settings-button-btn"></div>
|
<div class="bd-settings-button-btn"></div>
|
||||||
</div>
|
</div>
|
||||||
<BdSettings :isActive="this.isActive" />
|
<BdSettings :isActive="this.isActive" :close="hideSettings" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import BdSettings from './bdsettings.vue';
|
import BdSettings from './bdsettings.vue';
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -21,74 +20,13 @@
|
||||||
methods: {
|
methods: {
|
||||||
toggleSettings() {
|
toggleSettings() {
|
||||||
this.isActive = !this.isActive;
|
this.isActive = !this.isActive;
|
||||||
|
},
|
||||||
|
hideSettings() {
|
||||||
|
this.isActive = false;
|
||||||
|
},
|
||||||
|
showSettings() {
|
||||||
|
this.isActive = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
.guilds-wrapper {
|
|
||||||
padding-top: 50px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[class*="guilds-wrapper"] + [class*="flex"] {
|
|
||||||
border-radius: 0 0 0 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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,.2), 0 2px 0 rgba(0,0,0,.06);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-settings-button .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: .5;
|
|
||||||
transition: all .4s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-settings-button.active {
|
|
||||||
background: transparent;
|
|
||||||
opacity: 1;
|
|
||||||
box-shadow: none;
|
|
||||||
/*transform: translateY(-150%);*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-settings-button.active .bd-settings-button-btn,
|
|
||||||
.bd-settings-button .bd-settings-button-btn:hover {
|
|
||||||
filter: none;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-settings {
|
|
||||||
position: absolute;
|
|
||||||
top: 22px;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 90000;
|
|
||||||
width: 200px;
|
|
||||||
background: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-settings-button.active .bd-settings-button-btn {
|
|
||||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTk0MCA2NDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE5NDAgNjQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTU2LjEsMjczLjlIMjl2MTQyLjdsODQuNiw3Ni4yVjM1NC4yaDQ1LjJjMjguNywwLDQyLjksMTMuOCw0Mi45LDM2djEwNmMwLDIyLjItMTMuNCwzNy4xLTQyLjksMzcuMUgyOC42djgwLjdoMTI3YzY4LjEsMC40LDEzMi0zMy43LDEzMi0xMTEuN3YtMTE0QzI4OC4xLDMwOC43LDIyNC4yLDI3My45LDE1Ni4xLDI3My45TDE1Ni4xLDI3My45eiIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik04MjEuOSw1MDIuM1YzODUuMmMwLTQyLjEsNzUuOC01MS43LDk4LjctOS42bDcwLTI4LjNjLTI3LjYtNjAuNS03Ny43LTc4LjEtMTE5LjQtNzguMWMtNjguMSwwLTEzNS41LDM5LjQtMTM1LjUsMTE1Ljl2MTE3LjFjMCw3Ny4zLDY3LjMsMTE1LjksMTMzLjksMTE1LjljNDIuOSwwLDk0LjEtMjEsMTIyLjUtNzYuMmwtNzUtMzQuNEM4OTguOCw1NTQuOCw4MjEuOSw1NDMuMyw4MjEuOSw1MDIuM0w4MjEuOSw1MDIuM3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNTkwLjQsNDAxLjNjLTI2LjQtNS43LTQ0LTE1LjMtNDUuMi0zMS44YzEuNS0zOS40LDYyLjQtNDAuOSw5OC0zLjFsNTYuMy00My4yYy0zNS4yLTQyLjktNzUtNTQuMy0xMTUuOS01NC4zYy02Mi40LDAtMTIyLjgsMzUuMi0xMjIuOCwxMDEuOGMwLDY0LjcsNDkuNyw5OS41LDEwNC41LDEwNy45YzI3LjksMy44LDU4LjksMTQuOSw1OC4yLDM0LjFjLTIuMywzNi40LTc3LjMsMzQuNC0xMTEuNC02LjlsLTU0LjMsNTAuOWMzMS44LDQwLjksNzUsNjEuNiwxMTUuNiw2MS42YzYyLjQsMCwxMzEuNi0zNiwxMzQuMy0xMDEuOEM3MTEuMyw0MzMuNSw2NTAuOSw0MTIuNCw1OTAuNCw0MDEuM0w1OTAuNCw0MDEuM3oiLz48cmVjdCB4PSIzMzQiIHk9IjI3My45IiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iODUuNyIgaGVpZ2h0PSIzMzkuOCIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNzc5LjMsMjczLjloLTEyN3YxNDIuN2w4NC42LDc2LjJWMzU0LjJoNDUuMmMyOC43LDAsNDIuOSwxMy44LDQyLjksMzZ2MTA2YzAsMjIuMi0xMy40LDM3LjEtNDIuOSwzNy4xaC0xMzAuMXY4MC43aDEyNy40YzY4LjEsMC40LDEzMi0zMy43LDEzMi0xMTEuN3YtMTE0QzE5MTEuNCwzMDguNywxODQ3LjUsMjczLjksMTc3OS4zLDI3My45TDE3NzkuMywyNzMuOXoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTE1NiwyNjkuM2MtNzAuNCwwLTE0MC40LDM4LjMtMTQwLjQsMTE2LjdWNTAyYzAsNzcuNyw3MC40LDExNi43LDE0MS4yLDExNi43YzcwLjQsMCwxNDAuNC0zOSwxNDAuNC0xMTYuN1YzODZDMTI5Ny4yLDMwNy45LDEyMjYuNCwyNjkuMywxMTU2LDI2OS4zeiBNMTIxMS4xLDUwMmMwLDI0LjUtMjcuNiwzNy4xLTU0LjcsMzcuMWMtMjcuNiwwLTU1LjEtMTEuOS01NS4xLTM3LjFWMzg2YzAtMjQuOSwyNi44LTM4LjMsNTMuNi0zOC4zYzI3LjksMCw1Ni4zLDExLjksNTYuMywzOC4zVjUwMnoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTUzOC4zLDQ5Ny40YzQwLjktMTMsNjYuNi00OC42LDY2LjYtMTExLjRjLTEuOS03OS42LTU2LjMtMTExLjctMTI2LjMtMTExLjdoLTEzNS44djMzOS44aDg2LjlWNTA2LjJoMTUuM2w3OC44LDEwNy45aDEwNy4xTDE1MzguMyw0OTcuNHogTTE0ODAuMSw0MzEuOWgtNTAuNXYtNzcuN2g1MC41QzE1MzQuMSwzNTQuMiwxNTM0LjEsNDMxLjksMTQ4MC4xLDQzMS45eiIvPjwvZz48Zz48cGF0aCBmaWxsPSIjM0U4MkU1IiBkPSJNMTAzLjMsNDMuM0gyOC42djc3LjFsNDcuNyw0M1Y4MS43aDI3LjhjMjkuNiwwLDI5LjYsMzcuMiwwLDM3LjJIODUuOHYzNS42aDE4LjNjMjkuNiwwLDI5LjYsMzcuMiwwLDM3LjJIMjguNlYyMzBoNzQuNmMzOC41LDAsNjguMy0xNS40LDY5LjQtNTMuNmMwLTE3LjYtNC44LTMwLjctMTMuMy0zOS44YzguNS05LjEsMTMuMy0yMi4yLDEzLjMtMzkuOEMxNzEuNiw1OC43LDE0MS44LDQzLjMsMTAzLjMsNDMuM3oiLz48cG9seWdvbiBmaWxsPSIjM0U4MkU1IiBwb2ludHM9IjM1OC43LDQzLjMgMzU4LjcsODEuNyA0MDYuOCw4MS43IDQwNi44LDIzMCA0NTQuNSwyMzAgNDU0LjUsODEuNyA1MjkuOCw4MS43IDUyOS44LDIzMCA1NzcuNiwyMzAgNTc3LjYsODEuNyA2MjUuNyw4MS43IDYyNS43LDQzLjMgIi8+PHBvbHlnb24gZmlsbD0iIzNFODJFNSIgcG9pbnRzPSIxOTcuNiw0My4zIDE5Ny42LDIzMCAzNDEuNywyMzAgMzQxLjcsMTkxLjcgMjQ1LjQsMTkxLjcgMjQ1LjQsMTYwLjUgMjk2LjUsMTYwLjUgMjk2LjUsMTEyLjggMjQ1LjQsMTEyLjggMjQ1LjQsODEuNyAzNDEuNyw4MS43IDM0MS43LDQzLjMgIi8+PHBvbHlnb24gZmlsbD0iIzNFODJFNSIgcG9pbnRzPSI2NDIuNCw0My4zIDY0Mi40LDIzMCA3ODYuNCwyMzAgNzg2LjQsMTkxLjcgNjkwLjEsMTkxLjcgNjkwLjEsMTYwLjUgNzQxLjMsMTYwLjUgNzQxLjMsMTEyLjggNjkwLjEsMTEyLjggNjkwLjEsODEuNyA3ODYuNCw4MS43IDc4Ni40LDQzLjMgIi8+PHBhdGggZmlsbD0iIzNFODJFNSIgZD0iTTkxOC42LDE2NmMyMi41LTcuMSwzNi41LTI2LjYsMzYuNS02MS4xYy0xLTQzLjYtMzAuOC02MS43LTY5LjItNjEuN2gtNzQuNVYyMzBIODU5di01OS4yaDguNGw0My4yLDU5LjJoNTguN0w5MTguNiwxNjZ6IE04ODYuNywxMzAuMkg4NTlWODEuN2gyNy43QzkxNi4zLDgxLjcsOTE2LjMsMTMwLjIsODg2LjcsMTMwLjJ6Ii8+PC9nPjwvc3ZnPg==);
|
|
||||||
width: 130px;
|
|
||||||
height: 80px;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,14 +1,24 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="bd-settings" :class="{active: isActive}">
|
<div class="bd-settings" :class="{active: isActive}">
|
||||||
<SidebarView>
|
<SidebarView :contentVisible="this.activeIndex >= 0" :animating="this.animating">
|
||||||
<Sidebar slot="sidebar">
|
<Sidebar slot="sidebar">
|
||||||
|
<div class="bd-settings-x" @click="close">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 12 12"><g fill="none" fill-rule="evenodd"><path d="M0 0h12v12H0"></path><path class="fill" fill="#dcddde" d="M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6"></path></g></svg>
|
||||||
|
</div>
|
||||||
<SidebarItem v-for="item in sidebarItems" :item="item" :key="item.id" :onClick="itemOnClick" />
|
<SidebarItem v-for="item in sidebarItems" :item="item" :key="item.id" :onClick="itemOnClick" />
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
|
<SidebarViewContent slot="content">
|
||||||
|
<div :class="{active: activeContent('core'), animating: animatingContent('core')}">
|
||||||
|
<CoreSettings />
|
||||||
|
</div>
|
||||||
|
<div :class="{active: activeContent('ui'), animating: animatingContent('ui')}">
|
||||||
|
<UISettings />
|
||||||
|
</div>
|
||||||
|
</SidebarViewContent>
|
||||||
</SidebarView>
|
</SidebarView>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
const sidebarItems = [
|
const sidebarItems = [
|
||||||
|
|
@ -23,45 +33,71 @@
|
||||||
];
|
];
|
||||||
|
|
||||||
function itemOnClick(id) {
|
function itemOnClick(id) {
|
||||||
console.log(`Item Clicked! ${id}`);
|
if (this.animating || id === this.activeIndex) return;
|
||||||
|
if (this.activeIndex >= 0) this.sidebarItems.find(item => item.id === this.activeIndex).active = false;
|
||||||
|
this.sidebarItems.find(item => item.id === id).active = true;
|
||||||
|
this.animating = true;
|
||||||
|
this.lastActiveIndex = this.activeIndex;
|
||||||
|
this.activeIndex = id;
|
||||||
|
|
||||||
|
if (this.first) {
|
||||||
|
this.first = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.animating = false;
|
||||||
|
this.lastActiveIndex = -1;
|
||||||
|
}, 400);
|
||||||
|
}
|
||||||
|
|
||||||
|
function animatingContent(s) {
|
||||||
|
const item = this.sidebarItems.find(item => item.contentid === s);
|
||||||
|
if (!item) return false;
|
||||||
|
return item.id === this.lastActiveIndex;
|
||||||
|
}
|
||||||
|
|
||||||
|
function activeContent(s) {
|
||||||
|
const item = this.sidebarItems.find(item => item.contentid === s);
|
||||||
|
if (!item) return false;
|
||||||
|
return item.id === this.activeIndex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
import { SidebarItem, SidebarView, Sidebar } from './sidebar/index.js';
|
import { SidebarItem, SidebarView, Sidebar, SidebarViewContent } from './sidebar/index.js';
|
||||||
|
import CoreSettings from './CoreSettings.vue';
|
||||||
|
import UISettings from './UISettings.vue';
|
||||||
export default {
|
export default {
|
||||||
props: ['isActive'],
|
props: ['isActive', 'close'],
|
||||||
components: {
|
components: {
|
||||||
SidebarItem,
|
SidebarItem,
|
||||||
SidebarView,
|
SidebarView,
|
||||||
Sidebar
|
Sidebar,
|
||||||
|
SidebarViewContent,
|
||||||
|
CoreSettings,
|
||||||
|
UISettings
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
sidebarItems
|
sidebarItems,
|
||||||
|
activeIndex: -1,
|
||||||
|
lastActiveIndex: -1,
|
||||||
|
animating: false,
|
||||||
|
first: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
itemOnClick
|
itemOnClick,
|
||||||
|
activeContent,
|
||||||
|
animatingContent
|
||||||
|
},
|
||||||
|
updated: function () {
|
||||||
|
if (!this.isActive) {
|
||||||
|
this.activeIndex = this.lastActiveIndex = -1;
|
||||||
|
this.sidebarItems.forEach(sidebarItem => { sidebarItem.active = false; });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.bd-settings {
|
|
||||||
position: absolute;
|
|
||||||
top: 22px;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 3000;
|
|
||||||
width: 310px;
|
|
||||||
background: #202225;
|
|
||||||
transform: translateX(-100%) translateY(-100%);
|
|
||||||
opacity: 0;
|
|
||||||
transition: all .4s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-settings.active {
|
|
||||||
transform: none;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -6,34 +6,3 @@
|
||||||
props: ['item', 'onClick']
|
props: ['item', 'onClick']
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
|
||||||
.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
|
|
||||||
|
|
||||||
{
|
|
||||||
background: rgba(0,0,0,0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: #FFF;
|
|
||||||
background: rgba(0,0,0,0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
<template>
|
||||||
|
<div class='bd-content bd-content-column'>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.bd-content-column {
|
||||||
|
//position: relative;
|
||||||
|
height: 100%;
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-content-column > div {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-content-column .bd-settingsWrap {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.bd-content-column .bd-settingsWrap .bd-scroller {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
contain: layout;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: scroll;
|
||||||
|
z-index: 200;
|
||||||
|
width: auto;
|
||||||
|
margin-right: 15px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
-moz-appearance: scrollbartrack-vertical;
|
||||||
|
background-color: rgba(0,0,0,0.1);
|
||||||
|
width: 8px;
|
||||||
|
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: rgba(0,0,0,0.6);
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -6,21 +6,3 @@
|
||||||
props: ['item']
|
props: ['item']
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style>
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -9,24 +9,3 @@ export default {
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
|
||||||
.bd-sidebar {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 30px;
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #4D7DEC;
|
|
||||||
margin-left: 10px;
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|
||||||
padding-bottom: 13px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -25,168 +25,3 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style>
|
|
||||||
.bd-settingsWrap {
|
|
||||||
padding: 20px 15px 15px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-scroller {
|
|
||||||
width: 100%;
|
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-sidebar-view {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
display: flex;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-sidebar-view:not(.active) {
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-sidebar-view .bd-content-region {
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-sidebar-view .bd-content-region .bd-content-tools {
|
|
||||||
width: 100px;
|
|
||||||
min-width: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-sidebar-view.active .bd-content-region {
|
|
||||||
animation: slidein .6s forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-sidebar-view .bd-content > div:not(.active) {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-sidebar-view .bd-content .animating {
|
|
||||||
animation: fade-out .4s forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-sidebar-view .bd-content {
|
|
||||||
animation: fade-in .4s forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-sidebar-region {
|
|
||||||
background: #202225;
|
|
||||||
-webkit-box-flex: 1;
|
|
||||||
-webkit-box-pack: end;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
padding-top: 50px;
|
|
||||||
z-index: 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-content-region {
|
|
||||||
background: #2F3136;
|
|
||||||
-ms-flex: 1 1 800px;
|
|
||||||
-ms-flex-align: start;
|
|
||||||
-webkit-box-align: start;
|
|
||||||
-webkit-box-flex: 1;
|
|
||||||
align-items: flex-start;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
flex: 1 1 70%;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
padding-left: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-sidebar-view .bd-settingsWrap {
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
-webkit-box-flex: 1;
|
|
||||||
flex: 1;
|
|
||||||
min-height: 1px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-sidebar-view .bd-settingsWrap .scroller {
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
-webkit-box-flex: 1;
|
|
||||||
flex: 1;
|
|
||||||
min-height: 1px;
|
|
||||||
contain: layout;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slidein {
|
|
||||||
0% {
|
|
||||||
transform: translateX(-100%);
|
|
||||||
opacity: .2;
|
|
||||||
}
|
|
||||||
|
|
||||||
70% {
|
|
||||||
transform: translateX(0%);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateX(0%);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideout {
|
|
||||||
0% {
|
|
||||||
transform: translateX(0%);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateX(-100%);
|
|
||||||
opacity: .2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes 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 fade-out {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fade-in {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -3,3 +3,4 @@ export { default as SidebarButton } from './Button.vue';
|
||||||
export { default as SidebarItem } from './Item.vue';
|
export { default as SidebarItem } from './Item.vue';
|
||||||
export { default as SidebarView } from './View.vue';
|
export { default as SidebarView } from './View.vue';
|
||||||
export { default as Sidebar } from './Sidebar.vue';
|
export { default as Sidebar } from './Sidebar.vue';
|
||||||
|
export { default as SidebarViewContent } from './Content.vue';
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
@import './partials/index.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;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
@import './sidebarview';
|
||||||
|
@import './bdsettings.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 {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue