border-radius: 10px;
width: 100%; height: 34px;
position: relative;
+ flex: 1;
span {
position: absolute;
top: 0; left: 0;
background: #92BD39;
border-radius: 10px;
&:after {
+ white-space: nowrap;
+ color: #083F4D;
+ top: 0; left:10px; bottom: 2px;
+ @include rwd($B5) {
+ color: #FFFFFF;
+ right: 13px;
+ left: auto;
+ }
margin: auto;
position: absolute;
- top: 0; right: 13px; bottom: 2px;
content: attr(data-label);
font-weight: bold;
font-size: 15px;
- color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
display: flex;
margin-top: 7px;
justify-content: space-between;
- align-items: center;
+ align-items: flex-start;
+ gap: 15px;
p {
margin: 0;
font-weight: normal;
align-items: center;
justify-content: center;
margin-top: 35px;
+ width: 100%;
}
.l-switch {
}
.l-switch label {
- color: #fff;
+ color: #74BDC2;
font-weight: 600;
font-size: 18.5px;
line-height: 26px;
z-index: 2;
}
+.toggle-input-left:checked ~ .l-switch__wrapper {
+ .toggle-for-left {
+ color: #003C3C;
+ }
+ .toggle {
+ left: 5px;
+ }
+}
+.toggle-input-right:checked ~ .l-switch__wrapper {
+ .toggle-for-right {
+ color: #003C3C;
+ }
+ .toggle {
+ left: 39px;
+ }
+}
.l-switch input:checked~label:nth-of-type(1) { color: #003C3C; }
-.l-switch input:checked~label:nth-of-type(2) { color: #74BDC2; }
-
-.l-switch input~:checked~label:nth-of-type(1) { color: #74BDC2; }
.l-switch input~:checked~label:nth-of-type(2) { color: #003C3C; }
.l-switch input:checked~.toggle {
> div, > button {
width: calc(33.333% - 20px);
+ margin-left: 24px;
}
}
}