@gravity-ui/uikit
Version:
Gravity UI base styling and components
113 lines • 2.75 kB
CSS
@charset "UTF-8";
.g-checkbox__indicator {
display: inline-block;
position: relative;
cursor: inherit;
}
.g-checkbox__indicator::before {
content: "";
position: absolute;
inset: 0;
background-color: transparent;
border: 1px solid var(--g-color-line-generic-accent);
border-radius: 4px;
transition: background 0.1s linear;
}
.g-checkbox__indicator::after {
content: " ";
visibility: hidden;
}
.g-checkbox__icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
visibility: hidden;
color: transparent;
transform: translateY(-5px);
transition: color 0.1s, transform 0.2s;
}
.g-checkbox__control {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
background: none;
border: none;
outline: none;
cursor: inherit;
}
.g-checkbox__outline {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
height: 100%;
background: none;
pointer-events: none;
border-radius: 4px;
}
.g-checkbox__control:focus-visible + .g-checkbox__outline {
outline: 2px solid var(--g-color-line-focus);
}
.g-checkbox_size_m .g-checkbox__icon-svg_type_tick {
width: 8px;
height: 10px;
}
.g-checkbox_size_m .g-checkbox__icon-svg_type_dash {
width: 12px;
height: 12px;
}
.g-checkbox_size_m .g-checkbox__indicator {
width: 14px;
height: 14px;
}
.g-checkbox_size_l .g-checkbox__icon-svg_type_tick {
width: 11px;
height: 9px;
}
.g-checkbox_size_l .g-checkbox__icon-svg_type_dash {
width: 15px;
height: 15px;
}
.g-checkbox_size_l .g-checkbox__indicator {
width: 17px;
height: 17px;
}
.g-checkbox_size_xl .g-checkbox__icon-svg_type_tick {
width: 16px;
height: 13px;
}
.g-checkbox_size_xl .g-checkbox__icon-svg_type_dash {
width: 22px;
height: 22px;
}
.g-checkbox_size_xl .g-checkbox__indicator {
width: 24px;
height: 24px;
}
.g-checkbox:hover .g-checkbox__indicator::before {
border-color: var(--g-color-line-generic-accent-hover);
}
.g-checkbox_checked .g-checkbox__indicator::before, .g-checkbox_indeterminate .g-checkbox__indicator::before {
background-color: var(--g-color-base-brand);
border: transparent;
}
.g-checkbox_checked .g-checkbox__icon, .g-checkbox_indeterminate .g-checkbox__icon {
visibility: visible;
color: var(--g-color-text-brand-contrast);
transform: translateX(0);
}
.g-checkbox_disabled .g-checkbox__indicator::before {
background-color: var(--g-color-base-generic-accent-disabled);
border: transparent;
}
.g-checkbox_disabled.g-checkbox_checked .g-checkbox__icon, .g-checkbox_disabled.g-checkbox_indeterminate .g-checkbox__icon {
color: var(--g-color-text-hint);
}