2018-09-21 09:18:32 +00:00
|
|
|
/* TODO: Maybe move this to reset? */
|
2018-10-19 15:17:02 +00:00
|
|
|
%toggle label span {
|
2018-09-21 09:18:32 +00:00
|
|
|
cursor: pointer;
|
|
|
|
}
|
2018-10-19 15:17:02 +00:00
|
|
|
%toggle label span::after {
|
2018-09-21 09:18:32 +00:00
|
|
|
border-radius: $decor-radius-full;
|
|
|
|
}
|
2018-10-19 15:17:02 +00:00
|
|
|
%toggle label span::before {
|
2018-09-21 09:18:32 +00:00
|
|
|
border-radius: 7px;
|
|
|
|
}
|
2018-10-19 15:17:02 +00:00
|
|
|
%toggle-negative {
|
|
|
|
border: 0;
|
2018-09-21 09:18:32 +00:00
|
|
|
}
|
2018-10-19 15:17:02 +00:00
|
|
|
%toggle.type-negative {
|
|
|
|
@extend %toggle-negative;
|
|
|
|
}
|
|
|
|
%toggle label span {
|
2018-09-21 09:18:32 +00:00
|
|
|
color: $ui-gray-900;
|
|
|
|
}
|
2018-10-19 15:17:02 +00:00
|
|
|
%toggle label span::after {
|
2018-09-21 09:18:32 +00:00
|
|
|
background-color: $ui-white;
|
|
|
|
}
|
2018-10-19 15:17:02 +00:00
|
|
|
%toggle label input:checked + span::before,
|
|
|
|
%toggle-negative label input + span::before {
|
|
|
|
background-color: $ui-blue-500;
|
|
|
|
}
|
|
|
|
%toggle label span::before,
|
|
|
|
%toggle-negative label input:checked + span::before {
|
2018-09-21 09:18:32 +00:00
|
|
|
background-color: $ui-gray-300;
|
|
|
|
}
|