lightcordwarez
/
BetterDiscordApp-v2
mirror of https://github.com/JsSucks/BetterDiscordApp
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

Make colour picker a popout and style it

This commit is contained in:
Jiiks 2018-02-28 04:29:28 +02:00
parent 160e6699e3
commit 779a59c87e
3 changed files with 51 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
client/src/styles/partials/generic/forms/colourpicker.scss Normal file
View File

@ -0,0 +1,50 @@
.bd-form-colourpicker .bd-title {
display: flex;
}
.bd-form-colourpicker .bd-title h3 {
font-weight: 500;
color: #f6f6f7;
flex: 1;
line-height: 24px;
margin-bottom: 0;
margin-top: 0;
}
.bd-colourpicker-swatch {
width: 50px;
height: 30px;
border-radius: 3px;
border: 1px solid hsla(0,0%,100%,.1);
}
.bd-form-colourpicker {
position: relative;
.vc-chrome {
position: absolute;
right: 10px;
top: 35px;
border-radius: 3px;
.vc-chrome-body {
background: #36393e;
.vc-chrome-fields-wrap {
.vc-input__input {
background: #1e2124;
color: #FFF;
box-shadow: inset 0 0 0 1px #000;
}
.vc-chrome-toggle-icon-highlight {
background: #1e2124;
}
.vc-chrome-toggle-btn svg path {
fill: #FFF;
}
}
}
}
}

1
client/src/styles/partials/generic/forms/index.scss
View File

@ -6,3 +6,4 @@
@import './sliders.scss';
@import './switches.scss';
@import './arrays.scss';
@import './colourpicker.scss';

17
client/src/ui/components/bd/setting/Colour.vue
View File

@ -67,21 +67,4 @@
.bd-hidden {
display: none;
}
.bd-form-colourpicker .bd-title {
display: flex;
}
.bd-form-colourpicker .bd-title h3 {
font-weight: 500;
color: #f6f6f7;
flex: 1;
line-height: 24px;
margin-bottom: 0;
margin-top: 0;
}
.bd-colourpicker-swatch {
width: 50px;
height: 30px;
border-radius: 3px;
border: 1px solid hsla(0,0%,100%,.1);
}
</style>