mirror of
https://github.com/datahub-project/datahub.git
synced 2025-08-03 06:47:55 +00:00
80 lines
2.1 KiB
SCSS
80 lines
2.1 KiB
SCSS
input[type='checkbox'] {
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
margin: 16px 2px 0 0;
|
|
position: absolute;
|
|
|
|
& + label {
|
|
display: block;
|
|
line-height: 20px;
|
|
margin-bottom: 0;
|
|
padding: 0 0 0 28px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
&:before,
|
|
&:after {
|
|
content: ' ';
|
|
height: 22px;
|
|
width: 22px;
|
|
top: -1px;
|
|
left: -1px;
|
|
position: absolute;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
transition-property: box-shadow;
|
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
transition-duration: 167ms;
|
|
}
|
|
|
|
&:before {
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6) inset;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
background-clip: padding-box;
|
|
padding: 2px;
|
|
}
|
|
|
|
&:after {
|
|
display: none;
|
|
height: 16px;
|
|
width: 16px;
|
|
overflow: hidden;
|
|
margin: 3px;
|
|
}
|
|
}
|
|
|
|
&:checked + label {
|
|
&:before {
|
|
box-shadow: 0 0 0 11px get-color(blue7) inset;
|
|
}
|
|
|
|
&:after {
|
|
display: block;
|
|
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBpZD0ic3ZnLXNvdXJjZSIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmVyc2lvbj0iMS4xIiBkYXRhLWVtYmVyLWV4dGVuc2lvbj0iMSI+CiAgPHBhdGggZD0iTTE1LDNMNi41NywxMy43MkEwLjcsMC43LDAsMCwxLDYsMTRhMC43MiwwLjcyLDAsMCwxLS41Ni0wLjI3TDEsOC4wNywyLjM2LDcsNiwxMS43MiwxMy42OCwyWiIgY2xhc3M9InNtYWxsLWljb24iIHN0eWxlPSJmaWxsLW9wYWNpdHk6IDE7ZmlsbDogd2hpdGUiIGlkPSJjaGVjay1pY29uLXNtYWxsIi8+Cjwvc3ZnPg==');
|
|
color: white;
|
|
font-weight: 200;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type='checkbox'] + label.checkbox-input__wrapper {
|
|
$checkbox-width: 28px;
|
|
$container-margin: item-spacing(4);
|
|
display: flex;
|
|
padding: item-spacing(2) $container-margin item-spacing(2) ($container-margin + $checkbox-width);
|
|
box-sizing: content-box;
|
|
margin: 0 (-1 * $container-margin);
|
|
|
|
&:hover {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
&:before,
|
|
&:after {
|
|
left: $container-margin;
|
|
top: item-spacing(2) - 1;
|
|
}
|
|
}
|