I have developed a unique custom toggle switch component with the following structure:
<template>
<div>
<label class="switch">
<input
type="checkbox"
:checked="value"
@change="changeSwitch"
>
<span class="slider round" />
<img
:src="require('../../assets/img/sun.svg')"
class="toggle-img"
alt="moon"
width="18"
height="18"
>
<img
:src="require('../../assets/img/moon.svg')"
class="toggle-img right"
alt="moon"
width="18"
height="18"
>
</label>
</div>
</template>
Here are the styles applied to this component:
@use "../variables" as v;
@import "../mixins";
.switch {
position: relative;
display: inline-block;
@include size(34px, 60px);
input {
display: none;
}
.toggle-img {
z-index: 5;
@include positions($top: 0, $bottom: 0);
@include margin(auto, 0, auto, 5px);
position: absolute;
&.right {
@include positions($right: 0);
@include margin(7px, 5px, auto, 0);
}
}
.slider {
z-index: 4;
@include positions(0, 0, 0, 0);
position: absolute;
cursor: pointer;
background-color: var(--color-header-bg-pale);
-webkit-transition: 0.4s;
transition: 0.4s;
&:before {
@include size(26px, 26px);
@include positions($left: 4px, $bottom: 4px);
position: absolute;
content: "";
background-color: var(--color-font-color);
-webkit-transition: 0.4s;
transition: 0.4s;
}
&.round {
border-radius: 34px;
&:before {
border-radius: 50%;
}
}
}
input:checked + .slider:before {
-ms-transform: translateX(26px);
transform: translateX(26px);
}
}
The challenge I'm facing is positioning the icons below the slider element using z-index property. Despite various attempts and modifications in z-index values, I couldn't achieve the desired layout.
I experimented with assigning z-index values to both parent and child elements, even removing other z-index values from the project, but it didn't yield any results.
Click here to see how the current layout appears.