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