115 lines
1.8 KiB
SCSS
115 lines
1.8 KiB
SCSS
// on-off switch control
|
|
.prestashop-switch {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
height: 21px;
|
|
margin-top: 7px;
|
|
|
|
&-nolabel {
|
|
label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
label {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
z-index: 1;
|
|
padding-left: 45px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
opacity: 0;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.slide-button {
|
|
position: relative;
|
|
position: absolute;
|
|
top: 50%;
|
|
z-index: 0;
|
|
display: block;
|
|
width: 35px;
|
|
height: 21px;
|
|
background: #b3c7cd;
|
|
transform: translateY(-50%);
|
|
@include transition(0.25s ease-out);
|
|
@include border-radius(1000px);
|
|
|
|
&::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
width: 50%;
|
|
height: calc(100% - 2px);
|
|
content: "";
|
|
background: #fff;
|
|
transform: translate(1px, -48%);
|
|
@include border-radius(50%);
|
|
@include transition(0.25s ease-out);
|
|
}
|
|
}
|
|
|
|
&-center {
|
|
.slide-button {
|
|
position: inherit;
|
|
margin: auto;
|
|
}
|
|
}
|
|
|
|
input {
|
|
position: absolute;
|
|
left: 0;
|
|
z-index: 3;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
|
|
~ .slide-button {
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
&:checked {
|
|
z-index: 0;
|
|
}
|
|
|
|
&:last-of-type:checked {
|
|
~ label:last-of-type {
|
|
opacity: 1;
|
|
}
|
|
|
|
&:disabled ~ label:last-of-type {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
~ .slide-button {
|
|
background: #b3c7cd;
|
|
}
|
|
}
|
|
|
|
&:first-of-type:checked {
|
|
~ label:first-of-type {
|
|
opacity: 1;
|
|
}
|
|
|
|
&:disabled ~ label:first-of-type {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
~ .slide-button {
|
|
background: $brand-success;
|
|
|
|
&::after {
|
|
transform: translate(15px, -48%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|