UNPKG

@nutui/nutui-react-taro

Version:

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

2 lines (1 loc) 2.36 kB
.nut-switch{cursor:pointer;display:flex;align-items:center;background-color:var(--nutui-switch-open-background-color, var(--nutui-color-primary, #fa2c19));border-radius:var(--nutui-switch-border-radius, 24px);background-size:100% 100%;background-repeat:no-repeat;background-position:center center;flex:0 0 auto}.nut-switch-button{display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--nutui-color-primary-text, #ffffff);transition:transform .3s;box-shadow:var(--nutui-switch-box-shadow, none)}.nut-switch-base{width:var(--nutui-switch-width, 40px);height:var(--nutui-switch-height, 24px);line-height:var(--nutui-switch-line-height, 24px)}.nut-switch-base .nut-switch-button{height:var(--nutui-switch-inside-height, 20px);width:var(--nutui-switch-inside-width, 20px);transform:var(--nutui-switch-inside-close-transform, translateX(14%))}.nut-switch-base.nut-switch-open .nut-switch-button{transform:var(--nutui-switch-inside-open-transform, translateX(90%))}.nut-switch-base.nut-switch-open.nut-switch-disabled{background-color:var(--nutui-switch-open-disabled-background-color, var(--nutui-color-primary-disabled, #fd9d94))}.nut-switch-base.nut-switch-close .nut-switch-close-line{width:12px;height:2px}.nut-switch-base.nut-switch-close.nut-switch-disabled{background-color:var(--nutui-switch-close-disabled-background-color, var(--nutui-black-3))}.nut-switch-close{background-color:var(--nutui-switch-close-background-color, var(--nutui-color-text-disabled, #bfbfbf))}.nut-switch-close-line{background:var(--nutui-switch-close-line-background-color, #fff);border-radius:2px}.nut-switch-label{color:var(--nutui-color-primary-text, #ffffff);font-size:var(--nutui-font-size-2, 12px)}.nut-switch-label.open{transform:translate(-18px)}.nut-switch-label.close{transform:translate(14px)}[dir=rtl] .nut-switch-base .nut-switch-button,.nut-rtl .nut-switch-base .nut-switch-button{transform:var(--nutui-switch-inside-close-transform, translateX(-14%))}[dir=rtl] .nut-switch-base.nut-switch-open .nut-switch-button,.nut-rtl .nut-switch-base.nut-switch-open .nut-switch-button{transform:var(--nutui-switch-inside-open-transform, translateX(-90%))}[dir=rtl] .nut-switch-label.open,.nut-rtl .nut-switch-label.open{transform:translate(18px)}[dir=rtl] .nut-switch-label.close,.nut-rtl .nut-switch-label.close{transform:translate(-14px)}