tui-grid/examples/css/checkbox.css

TOAST UI Grid : Powerful data grid control supported by TOAST UI

.Checkbox_checkbox {
    position: relative;
    display: inline-block
}

.Checkbox_checkbox+.Checkbox_checkbox {
    margin-left: 36px
}

.Checkbox_checkbox+.Checkbox_checkbox:first-child {
    margin-left: 0
}

.Checkbox_input[type=checkbox] {
    display: none;
    box-sizing: border-box
}

.Checkbox_indicator {
    cursor: pointer;
    position: relative;
    padding: 0;
    display: inline;
    display: -ms-flexbox;
    display: flex
}

.Checkbox_indicator:before {
    transition: .2s ease-out;
    content: "";
    width: 16px;
    height: 16px;
    display: inline-block;
    background: #f7f9f9;
    border: 1px solid #ddd;
    border-radius: 2px;
    vertical-align: middle
}

.Checkbox_indicator:after {
    transition: .2s ease-out;
    content: "";
    position: absolute;
    width: 5px;
    height: 8px;
    top: 3px;
    left: 6px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
}

.Checkbox_label {
    margin-left: 8px;
    margin-top: 8px;
    color: #242727
}

input[type=checkbox][disabled]~.Checkbox_indicator {
    opacity: .4;
    cursor: not-allowed
}

input[type=checkbox]:checked~.Checkbox_indicator:before {
    background: #3b7b8f;
    border: 1px solid #3b7b8f
}

input[type=checkbox]:checked~.Checkbox_indicator.Checkbox_isTypeSecondary:before {
    background: #39a898;
    border: 1px solid #39a898
}

input[type=checkbox]~.Checkbox_indicator:after {
    visibility: hidden
}

input[type=checkbox]:checked~.Checkbox_indicator:after {
    visibility: visible;
    visibility: initial
}

input[type=checkbox]+.Checkbox_indicator+.Checkbox_label {
    font-weight: 700;
    color: #648089
}

input[type=checkbox]:checked+.Checkbox_indicator+.Checkbox_label {
    font-weight: 700;
    color: #242727
}

input[type=checkbox]+.Checkbox_indicator>.Checkbox_label, input[type=checkbox]:checked+.Checkbox_indicator>.Checkbox_label {
    font-weight: 500;
    color: #242727
}

input[type=checkbox]+.Checkbox_indicator.Checkbox_isTypeSecondary>.Checkbox_label {
    font-weight: 700;
    color: #648089
}

input[type=checkbox]:checked+.Checkbox_indicator.Checkbox_isTypeSecondary>.Checkbox_label {
    font-weight: 700;
    color: #242727
}