song-ui-u/theme/checkbox.css

vue3 + js的PC前端组件库

@charset "UTF-8";.x-checkbox{--x-checkbox-text-color:var(--x-text-color-primary);--x-checkbox-border-color:var(--x-border-color-default);--x-checkbox-bg-color:var(--x-color-white);--x-checkbox-icon-color:var(--x-color-white);--x-checkbox-disabled-text-color:var(--x-text-color-disabled);--x-checkbox-disabled-border-color:var(--x-border-color-disabled);--x-checkbox-disabled-bg-color:var(--x-color-disabled-bg);--x-checkbox-disabled-icon-color:var(--x-text-color-disabled);--x-checkbox-checked-text-color:var(--x-text-color-primary);--x-checkbox-checked-border-color:var(--x-color-primary);--x-checkbox-checked-bg-color:var(--x-color-primary);--x-checkbox-checked-icon-color:var(--x-color-white);--x-checkbox-check-size:var(--x-checkbox-size-default);--x-checkbox-check-round:var(--x-checkbox-round-default);--x-checkbox-check-icon-size:var(--x-checkbox-icon-size-default);--x-checkbox-check-indeterminate-size:var(--x-checkbox-indeterminate-size-default);--x-checkbox-check-indeterminate-round:var(--x-checkbox-indeterminate-round-default);--x-checkbox-size:var(--x-component-size-default);--x-checkbox-font-size:var(--x-font-size-default);display:inline-flex;align-items:center;cursor:pointer;margin-right:24px}.x-checkbox:hover{--x-checkbox-border-color:var(--x-border-color-hover)}.x-checkbox.is-checked,.x-checkbox.is-loading{--x-checkbox-border-color:var(--x-color-primary);--x-checkbox-bg-color:var(--x-color-primary)}.x-checkbox.is-checked .x-icon,.x-checkbox.is-loading .x-icon{transform:scale(1)}.x-checkbox.is-disabled{--x-checkbox-border-color:var(--x-checkbox-disabled-border-color);--x-checkbox-bg-color:var(--x-checkbox-disabled-bg-color);--x-checkbox-text-color:var(--x-checkbox-disabled-text-color);--x-checkbox-icon-color:var(--x-checkbox-disabled-icon-color);cursor:not-allowed}.x-checkbox__wrapper{position:relative}.x-checkbox__input{position:absolute;margin:0;padding:0;outline:0;border:none;background:0 0;opacity:0;z-index:2;height:0;width:0;cursor:pointer}.x-checkbox__inner{position:relative;display:flex;align-items:center;justify-content:center;height:var(--x-checkbox-check-size);width:var(--x-checkbox-check-size);border-radius:var(--x-checkbox-check-round);border:2px solid var(--x-checkbox-border-color);background-color:var(--x-checkbox-bg-color);color:var(--x-checkbox-icon-color);box-sizing:border-box;transition:var(--x-transition)}.x-checkbox__inner .x-icon{color:var(--x-checkbox-check-color);transform:scale(0);transition:var(--x-transition);font-size:var(--x-checkbox-check-icon-size)}.x-checkbox__inner.is-indeterminate{background:#fff}.x-checkbox__indeterminate{background-color:var(--x-checkbox-bg-color);border-radius:var(--x-checkbox-check-indeterminate-round);display:block;width:var(--x-checkbox-check-indeterminate-size);height:var(--x-checkbox-check-indeterminate-size);box-sizing:border-box;transition:var(--x-transition)}.x-checkbox__label{margin-left:8px;line-height:1;color:var(--x-checkbox-text-color);font-size:var(--x-checkbox-font-size)}.x-checkbox--size_small{--x-checkbox-font-size:var(--x-font-size-small);--x-checkbox-size:var(--x-component-size-small);--x-checkbox-check-size:var(--x-checkbox-size-small);--x-checkbox-check-round:var(--x-checkbox-round-small);--x-checkbox-check-indeterminate-size:var(--x-checkbox-indeterminate-size-small);--x-checkbox-check-indeterminate-round:var(--x-checkbox-indeterminate-round-small)}.x-checkbox--size_small .x-icon{--x-checkbox-check-icon-size:var(--x-checkbox-icon-size-small)}.x-checkbox--size_default{--x-checkbox-font-size:var(--x-font-size-default);--x-checkbox-size:var(--x-component-size-default);--x-checkbox-check-size:var(--x-checkbox-size-default);--x-checkbox-check-round:var(--x-checkbox-round-default);--x-checkbox-check-indeterminate-size:var(--x-checkbox-indeterminate-size-default);--x-checkbox-check-indeterminate-round:var(--x-checkbox-indeterminate-round-default)}.x-checkbox--size_default .x-icon{--x-checkbox-check-icon-size:var(--x-checkbox-icon-size-default)}.x-checkbox--size_large{--x-checkbox-font-size:var(--x-font-size-large);--x-checkbox-size:var(--x-component-size-large);--x-checkbox-check-size:var(--x-checkbox-size-large);--x-checkbox-check-round:var(--x-checkbox-round-large);--x-checkbox-check-indeterminate-size:var(--x-checkbox-indeterminate-size-large);--x-checkbox-check-indeterminate-round:var(--x-checkbox-indeterminate-round-large)}.x-checkbox--size_large .x-icon{--x-checkbox-check-icon-size:var(--x-checkbox-icon-size-large)}.x-checkbox-group{display:flex;flex-wrap:wrap;row-gap:12px}.x-checkbox-all{display:flex;align-items:flex-start;flex-direction:column;row-gap:12px}.x-checkbox-all__label{display:flex}.x-checkbox-all.is-inline{display:flex;flex-direction:row}.x-checkbox-all__wrapper{flex:1}.x-checkbox--primary.is-checked,.x-checkbox--primary.is-loading{--x-checkbox-text-color:var(--x-color-primary);--x-checkbox-border-color:var(--x-color-primary);--x-checkbox-bg-color:var(--x-color-primary);--x-checkbox-icon-color:var(--x-color-white);--x-checkbox-disabled-text-color:var(--x-color-primary-light-5);--x-checkbox-disabled-border-color:var(--x-color-primary-light-5);--x-checkbox-disabled-bg-color:var(--x-color-primary-light-5);--x-checkbox-disabled-icon-color:var(--x-color-white);--x-checkbox-checked-text-color:var(--x-color-primary);--x-checkbox-checked-border-color:var(--x-color-primary);--x-checkbox-checked-bg-color:var(--x-color-primary);--x-checkbox-checked-icon-color:var(--x-color-white);--x-checkbox-icon-color:var(--x-color-white)}.x-checkbox--primary.is-disabled{--x-checkbox-border-color:var(--x-checkbox-disabled-border-color);--x-checkbox-bg-color:var(--x-checkbox-disabled-bg-color);--x-checkbox-text-color:var(--x-checkbox-disabled-text-color);--x-checkbox-text-color:var(--x-checkbox-disabled-text-color)}.x-checkbox--success.is-checked,.x-checkbox--success.is-loading{--x-checkbox-text-color:var(--x-color-success);--x-checkbox-border-color:var(--x-color-success);--x-checkbox-bg-color:var(--x-color-success);--x-checkbox-icon-color:var(--x-color-white);--x-checkbox-disabled-text-color:var(--x-color-success-light-5);--x-checkbox-disabled-border-color:var(--x-color-success-light-5);--x-checkbox-disabled-bg-color:var(--x-color-success-light-5);--x-checkbox-disabled-icon-color:var(--x-color-white);--x-checkbox-checked-text-color:var(--x-color-success);--x-checkbox-checked-border-color:var(--x-color-success);--x-checkbox-checked-bg-color:var(--x-color-success);--x-checkbox-checked-icon-color:var(--x-color-white);--x-checkbox-icon-color:var(--x-color-white)}.x-checkbox--success.is-disabled{--x-checkbox-border-color:var(--x-checkbox-disabled-border-color);--x-checkbox-bg-color:var(--x-checkbox-disabled-bg-color);--x-checkbox-text-color:var(--x-checkbox-disabled-text-color);--x-checkbox-text-color:var(--x-checkbox-disabled-text-color)}.x-checkbox--warning.is-checked,.x-checkbox--warning.is-loading{--x-checkbox-text-color:var(--x-color-warning);--x-checkbox-border-color:var(--x-color-warning);--x-checkbox-bg-color:var(--x-color-warning);--x-checkbox-icon-color:var(--x-color-white);--x-checkbox-disabled-text-color:var(--x-color-warning-light-5);--x-checkbox-disabled-border-color:var(--x-color-warning-light-5);--x-checkbox-disabled-bg-color:var(--x-color-warning-light-5);--x-checkbox-disabled-icon-color:var(--x-color-white);--x-checkbox-checked-text-color:var(--x-color-warning);--x-checkbox-checked-border-color:var(--x-color-warning);--x-checkbox-checked-bg-color:var(--x-color-warning);--x-checkbox-checked-icon-color:var(--x-color-white);--x-checkbox-icon-color:var(--x-color-white)}.x-checkbox--warning.is-disabled{--x-checkbox-border-color:var(--x-checkbox-disabled-border-color);--x-checkbox-bg-color:var(--x-checkbox-disabled-bg-color);--x-checkbox-text-color:var(--x-checkbox-disabled-text-color);--x-checkbox-text-color:var(--x-checkbox-disabled-text-color)}.x-checkbox--error.is-checked,.x-checkbox--error.is-loading{--x-checkbox-text-color:var(--x-color-error);--x-checkbox-border-color:var(--x-color-error);--x-checkbox-bg-color:var(--x-color-error);--x-checkbox-icon-color:var(--x-color-white);--x-checkbox-disabled-text-color:var(--x-color-error-light-5);--x-checkbox-disabled-border-color:var(--x-color-error-light-5);--x-checkbox-disabled-bg-color:var(--x-color-error-light-5);--x-checkbox-disabled-icon-color:var(--x-color-white);--x-checkbox-checked-text-color:var(--x-color-error);--x-checkbox-checked-border-color:var(--x-color-error);--x-checkbox-checked-bg-color:var(--x-color-error);--x-checkbox-checked-icon-color:var(--x-color-white);--x-checkbox-icon-color:var(--x-color-white)}.x-checkbox--error.is-disabled{--x-checkbox-border-color:var(--x-checkbox-disabled-border-color);--x-checkbox-bg-color:var(--x-checkbox-disabled-bg-color);--x-checkbox-text-color:var(--x-checkbox-disabled-text-color);--x-checkbox-text-color:var(--x-checkbox-disabled-text-color)}