comic-plus

Version:

1 lines • 2.36 kB

CSS

.cu-checkbox{display:inline-flex;align-items:center;cursor:pointer;font-size:14px;color:var(--cu-text-color);--cu-checkbox-color:var(--cu-color-primary);vertical-align:middle}.cu-checkbox.small{font-size:12px}.cu-checkbox.is-disabled{cursor:no-drop;color:var(--cu-text-color-light5)}.cu-checkbox.is-disabled .cu-checkbox__inner{background-color:var(--cu-background-color-disabled);color:var(--cu-text-color-light5);border-color:var(--cu-border-color-disabled)}.cu-checkbox:not(.is-disabled):hover{color:var(--cu-checkbox-color)}.cu-checkbox:not(.is-disabled):hover .cu-checkbox__inner{border-color:var(--cu-checkbox-color)}.cu-checkbox input.cu-checkbox__input{position:absolute;z-index:-1;display:none;width:0;height:0}.cu-checkbox:not(.is-disabled) .cu-checkbox__inner.indeterminate,.cu-checkbox:not(.is-disabled).is-check .cu-checkbox__inner{background-color:var(--cu-checkbox-color);border-color:var(--cu-checkbox-color)}.cu-checkbox:not(.is-disabled).is-check .cu-checkbox__label{color:var(--cu-checkbox-color)}.cu-checkbox__inner{display:inline-flex;align-items:center;justify-content:center;position:relative;width:16px;height:16px;border-radius:calc(var(--cu-border-radius) - 1px);border:1px solid var(--cu-border-color);color:#fff;transition:all .2s ease-in-out}.cu-checkbox.large .cu-checkbox__inner{width:20px;height:20px}.cu-checkbox.small .cu-checkbox__inner{width:12px;height:12px}.cu-checkbox__inner::after{margin-top:-2px;content:'';width:8px;height:4px;border-bottom:2px solid transparent;border-left:2px solid transparent;box-sizing:border-box;transition:transform .2s ease-in-out}.cu-checkbox:not(.is-check) .indeterminate::after{border-bottom-color:#fff;border-left:0}.cu-checkbox.is-check .cu-checkbox__inner::after{border-color:#fff;transform:rotate(-45deg)}.cu-checkbox.is-disabled.is-check .cu-checkbox__inner::after,.cu-checkbox.is-disabled:not(.is-check) .indeterminate::after{border-color:var(--cu-text-color-light7)}.cu-checkbox.small .cu-checkbox__inner::after{border-width:1px;width:6px;height:3px;margin-top:-1px}.cu-checkbox.large .cu-checkbox__inner::after{width:10px;height:6px}.cu-checkbox.large .cu-checkbox__inner.indeterminate::after{margin-top:-4px}.cu-checkbox-group{display:inline-flex;flex-wrap:wrap;vertical-align:middle}.cu-checkbox+.cu-checkbox{margin-left:10px}.cu-checkbox .cu-checkbox__label{margin-left:4px}