@mijadesign/mjui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
2 lines (1 loc) • 8.24 kB
CSS
.nut-checkboxgroup .nut-checkbox-button{background-color:var(--nutui-color-background, #f8f8f8)}.nut-checkboxgroup-vertical{display:flex;flex-direction:column}.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, #006dfc));background-color:var(--nutui-color-primary-light-pressed, var(--nutui-color-primary-background, #e6f0ff))}.nut-checkboxgroup-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}.nut-checkboxgroup-horizontal .nut-checkbox{display:inline-flex;flex:1;margin-right:20px}.nut-checkboxgroup-horizontal .nut-checkbox-button-active{border:var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #006dfc));background-color:var(--nutui-color-primary-light-pressed, var(--nutui-color-primary-background, #e6f0ff))}.nut-checkboxgroup-list{flex-grow:1;border-bottom:var(--nutui-checkbox-list-item-border, 1px solid var(--nutui-color-border, #e6e6e6));border-top:var(--nutui-checkbox-list-item-border, 1px solid var(--nutui-color-border, #e6e6e6));padding:var(--nutui-checkbox-list-padding, 0 var(--nutui-spacing-3, 16px));background:var(--nutui-checkbox-list-background-color, #ffffff);box-sizing:border-box}.nut-checkboxgroup-list .nut-checkbox{margin-bottom:5px}.nut-checkboxgroup-list .nut-checkbox.nut-checkbox-reverse{width:auto;flex-grow:1;justify-content:space-between}.nut-checkboxgroup-list .nut-checkbox-list-item:first-child{border-top:none}[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-cell-group-wrap-divider .nut-cell-divider{position:absolute;box-sizing:border-box;pointer-events:none;right:var(--nutui-cell-divider-right, var(--nutui-spacing-3, 16px));bottom:0;left:var(--nutui-cell-divider-left, var(--nutui-spacing-3, 16px));transform:scaleY(.5);border-top:var(--nutui-cell-divider-border-bottom, .5px solid var(--nutui-color-border, #e6e6e6))}.nut-cell-group-wrap-divider .nut-cell:last-child .nut-cell-divider{border-top:0}.nut-cell-group-wrap-divider .nut-cell:first-child .nut-cell-divider{border-top:var(--nutui-cell-divider-border-bottom, .5px solid var(--nutui-color-border, #e6e6e6))}.nut-checkbox{display:flex;align-items:center}.nut-checkbox-icon{color:var(--nutui-color-text-disabled, #999999);font-size:var(--nutui-checkbox-icon-font-size, var(--nutui-font-size-4, 20px));flex-shrink:0}.nut-checkbox-icon-wrap{font-size:0px;line-height:0px;border-radius:50%;box-shadow:0 2px 4px #ff0f2333}.nut-checkbox-icon-checked{color:var(--nutui-color-primary, #006dfc);transition-duration:.3s;transition-property:color,border-color,background-color;border-radius:50%}.nut-checkbox-icon-checked.nut-checkbox-icon-disabled{color:var(--nutui-color-primary-disabled-special, var(--nutui-color-primary, #006dfc))}.nut-checkbox-label{margin-left:var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-0, 4px));font-size:var(--nutui-checkbox-label-font-size, var(--nutui-font-size-2, 15px));color:var(--nutui-checkbox-label-color, var(--nutui-color-title, #0d0d0d));flex-shrink:0}.nut-checkbox-label-disabled{color:var(--nutui-color-text-disabled, #999999)}.nut-checkbox-icon-indeterminate{color:var(--nutui-color-primary, #006dfc);box-shadow:0 2px 4px #ff0f2333;border-radius:50%}.nut-checkbox-icon-indeterminate.nut-checkbox-icon-disabled{color:var(--nutui-color-primary-disabled-special, var(--nutui-color-primary, #006dfc))}.nut-checkbox-icon-disabled{color:var(--nutui-color-text-disabled, #999999);box-shadow:none}.nut-checkbox-reverse{flex-direction:row-reverse}.nut-checkbox-reverse .nut-checkbox-label{margin-right:var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-0, 4px));margin-left:0}.nut-checkbox-button{position:relative;display:inline-flex;align-items:center;min-height:32px;padding:var(--nutui-checkbox-button-padding, 5px 18px);font-size:var(--nutui-checkbox-button-font-size, var(--nutui-font-size-1, 13px));background:var(--nutui-color-background, #f8f8f8);border-radius:var(--nutui-checkbox-button-border-radius, 15px);color:var(--nutui-checkbox-label-color, var(--nutui-color-title, #0d0d0d));box-sizing:border-box;border:1px solid var(--nutui-color-background, #f8f8f8);overflow:hidden}.nut-checkbox-button-active{background:var(--nutui-color-primary-light-pressed, var(--nutui-color-primary-background, #e6f0ff));color:var(--nutui-color-primary, #006dfc);border:var(--nutui-checkbox-button-active-border, 1px solid var(--nutui-color-primary, #006dfc))}.nut-checkbox-button-disabled{color:var(--nutui-color-text-disabled, #999999);border:1px solid var(--nutui-color-background, #f8f8f8)}.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, #006dfc);border-right:10px solid var(--nutui-color-primary, #006dfc);display:flex;align-items:flex-end;justify-content:flex-end}.nut-checkbox-button .nut-checkbox-button-icon-checked{width:12px;height:12px;position:absolute;color:#fff;right:0;bottom:0;transform:translate(-1px,-2px)}.nut-checkbox-button .nut-icon{position:absolute;font-size:12px;width:12px;height:12px}.nut-checkbox-button .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, #999999);color:#fff;border:1px solid var(--nutui-color-text-disabled, #999999)}.nut-checkbox-list-item{display:flex;justify-content:space-between;padding:var(--nutui-checkbox-list-item-padding, 0);border-top:var(--nutui-checkbox-list-item-border, 1px solid var(--nutui-color-border, #e6e6e6))}.nut-checkbox-list-item .nut-checkbox-label,.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-0, 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-0, 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, #006dfc)}[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}.nut-checkbox{line-height:1.5;align-items:flex-start}.nut-checkboxgroup-vertical .nut-checkbox{margin-bottom:var(--nutui-spacing-2, 12px)}.nut-checkboxgroup-list{width:auto;border:0;border-radius:var(--nutui-radius-1, 8px)}.nut-checkboxgroup-list .nut-checkbox{margin-bottom:0}.nut-checkboxgroup-list .nut-checkbox-list-item{height:56px;display:flex;align-items:center;width:100%}.nut-checkbox-icon-disabled{opacity:var(--nutui-color-disabled-opacity, .4)}.nut-checkbox-icon-disabled.icon-unselected{opacity:1;background:var(--nutui-color-border, #e6e6e6);height:calc(var(--nutui-checkbox-icon-font-size, var(--nutui-font-size-4, 20px)) - 2px)}.nut-checkbox-icon{height:var(--nutui-font-size-5, 22px);width:calc(var(--nutui-checkbox-icon-font-size, var(--nutui-font-size-4, 20px)) - 2px);display:flex;align-items:center;justify-content:center;font-size:var(--nutui-checkbox-icon-font-size, var(--nutui-font-size-4, 20px));border-radius:100%;margin:1px;line-height:var(--nutui-font-size-5, 22px)}.nut-checkbox-label{font-weight:600;display:block;flex:1;margin-left:var(--nutui-spacing-1, 8px)}.nut-checkbox-icon-wrap,.nut-checkbox-icon-indeterminate{box-shadow:0 0 #000}