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

Tidy switches SCSS files

This commit is contained in:
Samuel Elliott 2018-02-12 17:45:49 +00:00
parent 09cff282cb
commit 4fa91563a5
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
6 changed files with 72 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
client/src/styles/partials/bdsettings/card.scss
View File

@ -73,54 +73,12 @@
}
.bd-switch-wrapper {
flex: 0 0 auto;
user-select: none;
position: relative;
width: 40px;
height: 20px;
display: block;
input {
position: absolute;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
}
.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;
&:before {
content: "";
display: block;
width: 14px;
height: 14px;
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);
}
&.bd-checked {
background: $colbdblue;
&::before {
transform: translateX(20px);
}
}
.bd-switch::before {
width: 14px;
height: 14px;
}
}
}

56
client/src/styles/partials/bdsettings/plugin-settings-modal.scss
View File

@ -12,57 +12,13 @@
.bd-plugin-settings-body {
padding: 0 15px;
.bd-setting-switch {
.bd-switch-wrapper {
flex: 0 0 auto;
user-select: none;
position: relative;
width: 40px;
height: 20px;
display: block;
.bd-switch-wrapper {
width: 40px;
height: 20px;
input {
position: absolute;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
}
.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;
&:before {
content: "";
display: block;
width: 14px;
height: 14px;
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);
}
&.bd-checked {
background: $colbdblue;
&::before {
transform: translateX(20px);
}
}
}
.bd-switch::before {
width: 14px;
height: 14px;
}
}
}

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

@ -4,3 +4,4 @@
@import './dropdowns.scss';
@import './radios.scss';
@import './sliders.scss';
@import './switches.scss';

62
client/src/styles/partials/generic/forms/switches.scss Normal file
View File

@ -0,0 +1,62 @@
.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;
transition: opacity 0.2s ease;
}
.bd-switch-wrapper {
flex: 0 0 auto;
user-select: none;
position: relative;
width: 44px;
height: 24px;
display: block;
input {
position: absolute;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
}
.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;
&::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);
}
&.bd-checked {
background: $colbdblue;
&::before {
transform: translateX(20px);
}
}
}
}

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

@ -1,4 +1,3 @@
@import './switches.scss';
@import './spinners/index.scss';
@import './scrollable.scss';
@import './buttons.scss';

73
client/src/styles/partials/generic/switches.scss
View File

@ -1,73 +0,0 @@
.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-switch-wrapper {
flex: 0 0 auto;
user-select: none;
position: relative;
width: 44px;
height: 24px;
display: block;
input {
position: absolute;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
}
.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;
&::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);
}
&.bd-checked {
background: $colbdblue;
&::before {
transform: translateX(20px);
}
}
}
}
.bd-setting-switch-wrap {
transition: opacity 0.2s ease;
}
&.bd-disabled .bd-setting-switch-wrap {
opacity: 0.6;
&, input {
cursor: not-allowed !important;
}
}
}