SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: use ems for switch styles

Browse source
This commit is contained in:
Sebin Nyshkim 2022-01-06 09:08:59 +01:00
parent 6f82f8c824
commit ae6c1f3eab
1 changed files with 19 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/components/NsfwSwitch.vue
View file

@ -34,13 +34,13 @@ export default {
padding: 0.5em; padding: 0.5em;
display: flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
align-content: center; align-content: center;
> div { > div {
flex: 0 1 33%; flex: 0 1 auto;
align-self: center; align-self: center;
line-height: 1; line-height: 1;
text-align: center; text-align: center;
@ -53,10 +53,10 @@ export default {
.toggle { .toggle {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 46px; width: 2.3em;
height: 26px; height: 1.3em;
background-color: #e6e6e6; background-color: #e6e6e6;
border-radius: 23px; border-radius: 1.15em;
vertical-align: text-bottom; vertical-align: text-bottom;
transition: all 0.3s linear; transition: all 0.3s linear;
@ -64,11 +64,11 @@ export default {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
width: 42px; width: 2.1em;
height: 22px; height: 1.1em;
background-color: #fff; background-color: #fff;
border-radius: 11px; border-radius: 0.55em;
transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1); transform: translate3d(0.1em, 0.1em, 0) scale3d(1, 1, 1);
transition: all 0.25s linear; transition: all 0.25s linear;
} }
@ -76,25 +76,25 @@ export default {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
width: 22px; width: 1.1em;
height: 22px; height: 1.1em;
background-color: #fff; background-color: #fff;
border-radius: 11px; border-radius: 0.55em;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.24);
transform: translate3d(2px, 2px, 0); transform: translate3d(0.1em, 0.1em, 0);
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
} }
&:active { &:active {
.toggle::after { .toggle::after {
width: 28px; width: 1.4em;
transform: translate3d(2px, 2px, 0); transform: translate3d(0.1em, 0.1em, 0);
} }
input { input {
&:checked + .toggle::after { &:checked + .toggle::after {
transform: translate3d(16px, 2px, 0); transform: translate3d(0.8em, 0.1em, 0);
} }
} }
} }
@ -108,11 +108,11 @@ export default {
background-color: $bg-color-light; background-color: $bg-color-light;
&::before { &::before {
transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); transform: translate3d(0.9em, 0.1em, 0) scale3d(0, 0, 0);
} }
&::after { &::after {
transform: translate3d(22px, 2px, 0); transform: translate3d(1.1em, 0.1em, 0);
} }
} }
} }