@vuesax-alpha/nightly/theme-chalk/vs-checkbox.css

A Component Library for Vue 3

@keyframes rotating{100%{transform:rotate(360deg)}}.vs-checkbox{--vs-checkbox-width:23px;--vs-checkbox-height:23px;--vs-color:var(--vs-primary)}.vs-checkbox{display:flex;justify-content:flex-start;align-items:center;position:relative;max-width:-moz-fit-content;max-width:fit-content}.vs-checkbox:active .vs-checkbox__input--mask{background:rgba(var(--vs-gray-4),1)!important}.vs-checkbox:hover .vs-checkbox__input--mask{background:rgba(var(--vs-gray-3),1)}.vs-checkbox:hover .vs-checkbox__input--mask:before{border:2px solid rgba(var(--vs-gray-4),0)}.vs-checkbox.is-disabled .vs-checkbox__label{opacity:.5}.vs-checkbox.is-disabled .vs-checkbox__input--mask{opacity:.6;background:0 0!important}.vs-checkbox.is-disabled .vs-checkbox__original{visibility:hidden;opacity:0;pointer-events:none}.vs-checkbox.is-checked .vs-checkbox__label.is-line-through{opacity:.4}.vs-checkbox.is-checked .vs-checkbox__label.is-line-through:before{width:calc(100% - 10px)}.vs-checkbox.is-checked:hover .vs-checkbox__input--mask{box-shadow:0 3px 15px 0 rgba(var(--vs-color),.35)}.vs-checkbox.is-checked .vs-checkbox__input--mask{box-shadow:0 0 0 0 rgba(var(--vs-color),.35)}.vs-checkbox.is-checked .vs-checkbox__input--mask i:not(.vs-icon-check){opacity:1;transform:scale(1);transition:var(--vs-transition-ease) .15s}.vs-checkbox.is-checked .vs-checkbox__input--mask:after{opacity:1;transform:scale(1);transition:all .2s 0s ease-in-out}.vs-checkbox.is-checked .vs-checkbox__input--mask:before{opacity:0;transform:scale(1.2)}.vs-checkbox.is-label-before .vs-checkbox__label{order:-1}.vs-checkbox.is-loading{pointer-events:none}.vs-checkbox.is-loading:not(.is-checked) .vs-icon-loading{color:rgba(var(--vs-divider),1)!important}.vs-checkbox.is-loading.is-checked .vs-checkbox__input--mask{opacity:0;transition:all .2s linear;background:0 0!important}.vs-checkbox.is-loading.is-checked .vs-checkbox__input--mask:after{transition:all .2s linear,opacity .6s linear;transform:scale(.5)}.vs-checkbox.is-loading .vs-checkbox__input--mask{background:0 0!important}.vs-checkbox.is-loading .vs-checkbox__input--mask:before{opacity:0!important;border-radius:50%}.vs-checkbox.is-loading .vs-checkbox__input--mask:after{opacity:0!important;border-radius:50%;transform:scale(.5)}.vs-checkbox__input{width:var(--vs-checkbox-width);height:var(--vs-checkbox-height);border-radius:9px;position:relative;z-index:1}.vs-checkbox__input--mask{position:absolute;z-index:-1;width:100%;height:100%;border-radius:32%;display:flex;justify-content:center;align-items:center;cursor:pointer;pointer-events:none;transition:var(--vs-transition-ease)}.vs-checkbox__input--mask i:not(.vs-icon-check){opacity:0;transition:var(--vs-transition-ease);color:#fff;font-size:1.1em;transform:scale(.5)}.vs-checkbox__input--mask .vs-icon-check__check{margin-right:1px}.vs-checkbox__input--mask:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(var(--vs-color),1);transform:scale(.5);border-radius:inherit;opacity:0;transition:all .18s .19s ease-in-out;z-index:-1}.vs-checkbox__input--mask:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;transition:var(--vs-transition-ease);z-index:-1;border:2px solid rgba(var(--vs-gray-4),1)}.vs-checkbox__input--mask .vs-icon-check{z-index:3}.vs-checkbox__original{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;opacity:0;z-index:100;cursor:pointer}.vs-checkbox__label{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;padding:7px;transition:var(--vs-transition-ease);position:relative;display:flex;justify-content:center;align-items:center;font-size:.9rem}.vs-checkbox__label:before{content:"";position:absolute;width:0;height:2px;border-radius:4px;background:rgba(var(--vs-text),.6);transition:var(--vs-transition-ease)}