umami/components/common/Checkbox.module.css
Kipras Melnikovas 4e4ae0a7d0
Toggle the checkbox when clicking on the label
Pretty sure the `user-select: none` could be employed
in other places aswell

Signed-off-by: Kipras Melnikovas <kipras@kipras.org>
2021-03-28 20:07:09 +03:00

31 lines
500 B
CSS

.container {
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.checkbox {
display: flex;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
border: 1px solid var(--gray500);
border-radius: 4px;
}
.label {
margin-left: 10px;
user-select: none; /* disable text selection when clicking to toggle the checkbox */
}
.input {
position: absolute;
visibility: hidden;
height: 0;
width: 0;
bottom: 100%;
right: 100%;
}