101 lines
1.8 KiB
CSS
101 lines
1.8 KiB
CSS
.checkbox {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
gap: var(--au-spacing-2);
|
|
}
|
|
|
|
.checkboxInput {
|
|
appearance: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid var(--au-border-medium);
|
|
border-radius: var(--au-radius-sm);
|
|
background-color: var(--au-surface);
|
|
cursor: pointer;
|
|
transition: all var(--au-transition-fast);
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.checkboxInput:hover:not(:disabled) {
|
|
border-color: var(--au-primary);
|
|
}
|
|
|
|
.checkboxInput:checked {
|
|
background-color: var(--au-primary);
|
|
border-color: var(--au-primary);
|
|
}
|
|
|
|
.checkboxInput:checked::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
width: 4px;
|
|
height: 8px;
|
|
border: solid white;
|
|
border-width: 0 2px 2px 0;
|
|
}
|
|
|
|
.checkboxInput:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.checkboxInput:focus-visible {
|
|
outline: 2px solid var(--au-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.checkboxLabel {
|
|
font-size: var(--au-text-sm);
|
|
color: var(--au-text-primary);
|
|
user-select: none;
|
|
}
|
|
|
|
.checkbox:has(.checkboxInput:disabled) .checkboxLabel {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Variants */
|
|
.success .checkboxInput:checked {
|
|
background-color: var(--au-success-600);
|
|
border-color: var(--au-success-600);
|
|
}
|
|
|
|
.warning .checkboxInput:checked {
|
|
background-color: var(--au-warning-600);
|
|
border-color: var(--au-warning-600);
|
|
}
|
|
|
|
.danger .checkboxInput:checked {
|
|
background-color: var(--au-danger-600);
|
|
border-color: var(--au-danger-600);
|
|
}
|
|
|
|
.info .checkboxInput:checked {
|
|
background-color: var(--au-info-600);
|
|
border-color: var(--au-info-600);
|
|
}
|
|
|
|
/* Sizes */
|
|
.sm .checkboxInput {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.md .checkboxInput {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.lg .checkboxInput {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|