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

refactor: BEMify, better use of SCSS, collate styles

Browse source
This commit is contained in:
Sebin Nyshkim 2022-01-11 21:54:09 +01:00
parent 1016d119a4
commit 0c635b5630
1 changed files with 35 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/components/NsfwSwitch.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<label class="nsfw-switch" :for="id"> <label class="nsfw-switch" :for="id">
<div>😇</div> <div class="nsfw-switch__label">😇</div>
<div class="toggle-wrap"> <div class="nsfw-switch__toggle">
<input <input
:checked="modelValue" :checked="modelValue"
@change="$emit('update:modelValue', $event.target.checked)" @change="$emit('update:modelValue', $event.target.checked)"
@ -9,9 +9,9 @@
name="nsfw" name="nsfw"
:id="id" :id="id"
/> />
<div class="toggle"></div> <div class="nsfw-switch__toggle-inner"></div>
</div> </div>
<div>😈</div> <div class="nsfw-switch__label">😈</div>
</label> </label>
</template> </template>
@ -34,23 +34,36 @@ export default {
padding: 0.5em; padding: 0.5em;
display: inline-flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
align-content: center; align-content: center;
> div { &__label,
&__toggle {
flex: 0 1 auto; flex: 0 1 auto;
align-self: center; align-self: center;
line-height: 1; line-height: 1;
text-align: center; text-align: center;
} }
.toggle-wrap { &__toggle {
margin: 0 0.5em; margin: 0 0.5em;
& input:checked + &-inner {
background-color: $bg-color-light;
&:before {
transform: translate3d(0.9em, 0.1em, 0) scale3d(0, 0, 0);
}
&:after {
transform: translate3d(1.1em, 0.1em, 0);
}
}
} }
.toggle { &__toggle-inner {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 2.3em; width: 2.3em;
@ -60,61 +73,43 @@ export default {
vertical-align: text-bottom; vertical-align: text-bottom;
transition: all 0.3s linear; transition: all 0.3s linear;
&::before { &:before,
&:after {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
width: 2.1em;
height: 1.1em; height: 1.1em;
background-color: #fff; background-color: #fff;
border-radius: 0.55em; border-radius: 0.55em;
}
&:before {
width: 2.1em;
transform: translate3d(0.1em, 0.1em, 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;
} }
&::after { &:after {
content: "";
position: absolute;
left: 0;
width: 1.1em; width: 1.1em;
height: 1.1em;
background-color: #fff;
border-radius: 0.55em;
box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.24); box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.24);
transform: translate3d(0.1em, 0.1em, 0); transform: translate3d(0.1em, 0.1em, 0);
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
} }
&:active {
.toggle::after {
width: 1.4em;
transform: translate3d(0.1em, 0.1em, 0);
}
input {
&:checked + .toggle::after {
transform: translate3d(0.8em, 0.1em, 0);
}
}
}
input { input {
position: absolute; position: absolute;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
}
&:checked + .toggle { &:active &__toggle-inner:after {
background-color: $bg-color-light; width: 1.4em;
transform: translate3d(0.1em, 0.1em, 0);
}
&::before { &:active input:checked + &__toggle-inner:after {
transform: translate3d(0.9em, 0.1em, 0) scale3d(0, 0, 0); transform: translate3d(0.8em, 0.1em, 0);
}
&::after {
transform: translate3d(1.1em, 0.1em, 0);
}
}
} }
} }
</style> </style>