various-ui/styles/checkbox.css

This is a test version of the Vue 3 component library

.ui-checkbox{--uioption-checkbox-border-color:var(--uicolor-font-4);--uioption-checkbox-background-color:var(--uicolor-font-6);--uioption-checkbox-active-border-color:var(--uicolor-main-color);--uioption-checkbox-active-background-color:var(--uicolor-main-color);--uioption-checkbox-disabled-border-color:var(--uicolor-font-4);--uioption-checkbox-disabled-background-color:var(--uicolor-font-4)}.ui-checkbox{cursor:pointer;display:inline-flex;align-items:center;vertical-align:bottom}.ui-checkbox>.ui-checkbox-control{width:20px;height:20px;border:1px solid var(--uioption-checkbox-border-color);position:relative;transition:all .3s;border-radius:2px;background-color:var(--uioption-checkbox-background-color)}.ui-checkbox>.ui-checkbox-control .ui-checkbox-input{width:0;height:0;opacity:0}.ui-checkbox>.ui-checkbox-control .ui-checkbox-icon{transition:all .3s;font-size:20px;position:absolute;opacity:0;color:#fff;left:-1px;top:-1px}.ui-checkbox>.ui-checkbox-content{margin:0 0 0 8px}.ui-checkbox.ui-active>.ui-checkbox-control{border-color:var(--uioption-checkbox-active-border-color);background-color:var(--uioption-checkbox-active-background-color)}.ui-checkbox.ui-active>.ui-checkbox-control .ui-checkbox-icon{opacity:1}.ui-checkbox.ui-disabled-status{cursor:auto}.ui-checkbox.ui-disabled-status>.ui-checkbox-control{border-color:var(--uioption-checkbox-disabled-border-color);background-color:var(--uioption-checkbox-disabled-background-color)}