tinper-bee/dist/Switch/index.css

React Components living for enterprise-class pc backend application

.u-switch{position:relative;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;width:44px;height:22px;line-height:20px;vertical-align:middle;border-radius:20px;border:1px solid #a5adba;background-color:#a5adba;cursor:pointer;outline:0;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.u-switch-inner{color:#fff;position:absolute;font-size:12px;left:22px}.u-switch-backdrop{display:inline-block;width:44px;height:22px;border-radius:20px;background:#fff}.u-switch:active:after{width:24px}.u-switch:focus{-webkit-box-shadow:0 0 0 2px rgba(16,142,233,.2);box-shadow:0 0 0 2px rgba(16,142,233,.2);outline:0}.u-switch:after{position:absolute;width:18px;height:18px;top:1px;left:0;border-radius:18px;background-color:#fff;content:" ";cursor:pointer;-webkit-transition:left .3s cubic-bezier(.78,.14,.15,.86),width .3s cubic-bezier(.78,.14,.15,.86);transition:left .3s cubic-bezier(.78,.14,.15,.86),width .3s cubic-bezier(.78,.14,.15,.86)}.u-switch.is-checked{border-color:#f53c32;background-color:#f53c32}.u-switch.is-checked .u-switch-inner{left:8px}.u-switch.is-checked:after{left:24px}.u-switch.is-checked:active:after{left:16px}.u-switch.u-switch-disabled{cursor:no-drop;background:#dfe1e6;border-color:#dfe1e6}.u-switch.u-switch-disabled.is-checked{border-color:#f53c32;background-color:#f53c32;opacity:.35}.u-switch.u-switch-disabled:after{background:#fff;-webkit-animation-name:none;animation-name:none;cursor:no-drop}.u-switch.u-switch-disabled:hover:after{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-name:none;animation-name:none}.u-switch.u-switch-sm{width:32px;height:16px;line-height:12px}.u-switch.u-switch-sm .u-switch-inner{color:#fff;position:absolute;font-size:10px;left:16px}.u-switch.u-switch-sm:active:after{width:16px}.u-switch.u-switch-sm:after{width:14px;height:14px;top:0;left:0}.u-switch.u-switch-sm.is-checked .u-switch-inner{left:4px}.u-switch.u-switch-sm.is-checked:after{left:16px}.u-switch.u-switch-sm.is-checked:active:after{left:10px}.u-switch.u-switch-lg{width:60px;height:30px;line-height:12px}.u-switch.u-switch-lg .u-switch-inner{color:#fff;position:absolute;font-size:18px;left:30px;top:8px}.u-switch.u-switch-lg:active:after{width:32px}.u-switch.u-switch-lg:after{width:26px;height:26px;top:1px;left:0}.u-switch.u-switch-lg.is-checked .u-switch-inner{left:8px}.u-switch.u-switch-lg.is-checked:after{left:32px}.u-switch.u-switch-lg.is-checked:active:after{left:26px}.u-switch-primary.is-checked{background:#f53c32;border:1px solid #f53c32}.u-switch-info.is-checked{background:#00bcd4;border:1px solid #00bcd4}.is-checked.u-switch-danger{background:#f44336;border:1px solid #f44336}.u-switch-warning.is-checked{background:#ff9800;border:1px solid #ff9800}.u-switch-dark.is-checked{background:#616161;border:1px solid #616161}.u-switch-success.is-checked{background:#4caf50;border:1px solid #4caf50}