UNPKG

@nutui/nutui-react-taro

Version:

京东风格的轻量级移动端 React 组件库,支持一套代码生成 H5 和小程序

2 lines (1 loc) 5.76 kB
.nut-checkboxgroup .nut-checkbox-button{background-color:var(--nutui-gray-3, #f6f6f6)}.nut-checkboxgroup-vertical .nut-checkbox{margin-bottom:5px}.nut-checkboxgroup-vertical .nut-checkbox.nut-checkbox-reverse{width:100%;justify-content:space-between}.nut-checkboxgroup-vertical .nut-checkbox-button-active{border:var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #fa2c19));background-color:var(--nutui-color-primary-light, #ffeae8)}.nut-checkboxgroup-horizontal .nut-checkbox{display:inline-flex;margin-right:20px}.nut-checkboxgroup-horizontal .nut-checkbox-button-active{border:var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #fa2c19));background-color:var(--nutui-color-primary-light, #ffeae8)}.nut-checkboxgroup-list{width:100%;border-bottom:var(--nutui-checkbox-list-item-border, 1px solid var(--nutui-black-3, rgba(0, 0, 0, .06)));border-top:var(--nutui-checkbox-list-item-border, 1px solid var(--nutui-black-3, rgba(0, 0, 0, .06)));padding:var(--nutui-checkbox-list-padding, 0 0 0 12px);background:var(--nutui-checkbox-list-background-color, #ffffff)}.nut-checkboxgroup-list .nut-checkbox{margin-bottom:5px}.nut-checkboxgroup-list .nut-checkbox:first-child .nut-checkbox-list-item{border-top:none}.nut-checkboxgroup-list .nut-checkbox.nut-checkbox-reverse{width:100%;justify-content:space-between}[dir=rtl] .nut-checkboxgroup .nut-checkbox-label,.nut-rtl .nut-checkboxgroup .nut-checkbox-label,[dir=rtl] .nut-checkboxgroup-vertical .nut-checkbox-label,.nut-rtl .nut-checkboxgroup-vertical .nut-checkbox-label{margin-right:5px}[dir=rtl] .nut-checkboxgroup-horizontal .nut-checkbox,.nut-rtl .nut-checkboxgroup-horizontal .nut-checkbox{margin-right:0;margin-left:20px}.nut-checkbox{display:flex;align-items:center}.nut-checkbox-icon{color:var(--nutui-color-text-disabled, #bfbfbf);font-size:var(--nutui-checkbox-icon-font-size, var(--nutui-font-size-4, 16px))}.nut-checkbox-icon-checked{color:var(--nutui-color-primary, #fa2c19);transition-duration:.3s;transition-property:color,border-color,background-color}.nut-checkbox-icon-checked.nut-checkbox-icon-disabled{color:var(--nutui-color-primary-disabled, #fd9d94)}.nut-checkbox-label{margin-left:var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-2, 4px));font-size:var(--nutui-checkbox-label-font-size, var(--nutui-font-size-2, 12px));color:var(--nutui-checkbox-label-color, var(--nutui-gray-7, #1a1a1a))}.nut-checkbox-label-disabled{color:var(--nutui-color-text-disabled, #bfbfbf)}.nut-checkbox-icon-indeterminate{color:var(--nutui-color-primary, #fa2c19)}.nut-checkbox-icon-indeterminate.nut-checkbox-icon-disabled{color:var(--nutui-color-primary-disabled, #fd9d94)}.nut-checkbox-icon-disabled{color:var(--nutui-color-text-disabled, #bfbfbf)}.nut-checkbox-reverse{flex-direction:row-reverse}.nut-checkbox-reverse .nut-checkbox-label{margin-right:var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-2, 4px));margin-left:0}.nut-checkbox-button{position:relative;display:inline-flex;align-items:center;padding:var(--nutui-checkbox-button-padding, 5px 18px);font-size:var(--nutui-checkbox-button-font-size, var(--nutui-font-size-2, 12px));background:var(--nutui-gray-3, #f6f6f6);border-radius:var(--nutui-checkbox-button-border-radius, 15px);color:var(--nutui-checkbox-label-color, var(--nutui-gray-7, #1a1a1a));box-sizing:border-box;border:1px solid var(--nutui-gray-3, #f6f6f6);overflow:hidden}.nut-checkbox-button-active{background:var(--nutui-color-primary-light, #ffeae8);color:var(--nutui-color-primary, #fa2c19);border:var(--nutui-checkbox-button-active-border, 1px solid var(--nutui-color-primary, #fa2c19))}.nut-checkbox-button-disabled{color:var(--nutui-color-text-disabled, #bfbfbf);border:1px solid var(--nutui-gray-3, #f6f6f6)}.nut-checkbox-button-icon{position:absolute;right:0;bottom:0;width:0;height:0;border-top:10px solid transparent;border-left:10px solid transparent;border-bottom:10px solid var(--nutui-color-primary, #fa2c19);border-right:10px solid var(--nutui-color-primary, #fa2c19);display:flex;align-items:flex-end;justify-content:flex-end}.nut-checkbox-button-icon-checked{width:12px;height:12px;position:absolute;color:#fff;top:50%;left:50%;transform:translate(-3px,-3px)}.nut-checkbox-button-icon .nut-icon{position:absolute;font-size:12px;width:12px;height:12px}.nut-checkbox-button-icon .nut-icon:before{top:auto;bottom:-22px;margin-left:6px}.nut-checkbox .nut-checkbox-button-active.nut-checkbox-button-disabled{background:var(--nutui-color-text-disabled, #bfbfbf);color:#fff;border:1px solid var(--nutui-color-text-disabled, #bfbfbf)}.nut-checkbox-list-item{width:100%;display:flex;justify-content:flex-start;align-items:center;padding:var(--nutui-checkbox-list-item-padding, 12px 12px 12px 0);border-top:var(--nutui-checkbox-list-item-border, 1px solid var(--nutui-black-3, rgba(0, 0, 0, .06)))}.nut-checkbox-list-item .nut-checkbox-label{flex:auto}.nut-checkbox-list-item .nut-icon{flex:none}[dir=rtl] .nut-checkbox-label,.nut-rtl .nut-checkbox-label{margin-left:0;margin-right:var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-2, 4px))}[dir=rtl] .nut-checkbox-reverse .nut-checkbox-label,.nut-rtl .nut-checkbox-reverse .nut-checkbox-label{margin-left:var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-2, 4px));margin-right:0}[dir=rtl] .nut-checkbox-button-icon,.nut-rtl .nut-checkbox-button-icon{right:auto;left:0;border-right:10px solid transparent;border-left:10px solid var(--nutui-color-primary, #fa2c19)}[dir=rtl] .nut-checkbox-button-icon-checked,.nut-rtl .nut-checkbox-button-icon-checked{left:auto;right:50%;transform:translate(3px,-3px)}[dir=rtl] .nut-checkbox-button-icon .nut-icon:before,.nut-rtl .nut-checkbox-button-icon .nut-icon:before{margin-left:0;margin-right:6px}