element-gui/packages/theme-chalk/lib/switch.css

A Component Library for Vue.js.

@charset "UTF-8";.el-switch,.el-switch__label{position:relative;height:20px;font-size:14px}.el-switch{display:inline-flex;align-items:center;line-height:20px;vertical-align:middle}.el-switch.is-disabled .el-switch__core,.el-switch.is-disabled .el-switch__label{cursor:not-allowed}.el-switch__core,.el-switch__label{box-sizing:border-box;cursor:pointer}.el-switch:focus-within .el-switch__core{outline-offset:1px;outline:#1890ff solid 1px}.el-switch__label{transition:.2s;display:inline-block;font-weight:400;color:#999;text-align:right;width:100%;padding:0 5px 0 25px}.el-switch__label em{font-style:normal;display:inline}.el-switch__label.is-active{color:#fff;text-align:left;padding:0 25px 0 5px}.el-switch__label--left,.el-switch__label--right{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.el-switch__label *{line-height:19px;font-size:14px;display:inline-block;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-khtml-user-select:none;user-select:none}.el-switch__input{position:absolute;width:0;height:0;opacity:0;margin:0}.el-switch__core{margin:0;display:inline-block;position:relative;min-width:40px;height:20px;border:1px solid #e5e5e5;outline:0;border-radius:10px;background:#e5e5e5;transition:border-color .3s,background-color .3s;vertical-align:middle;line-height:20px}.el-switch__core .is-loading{position:absolute;top:2px;left:2px;z-index:2;transition:all .3s}.el-switch__core:after{content:"";position:absolute;top:1px;left:1px;border-radius:100%;transition:all .3s;width:16px;height:16px;background-color:#fff}.el-switch.is-checked .el-switch__core{border-color:#1890ff;background-color:#1890ff}.el-switch.is-checked .el-switch__core .is-loading{right:2px;left:auto}.el-switch.is-checked .el-switch__core::after{left:100%;margin-left:-17px}.el-switch.is-disabled{opacity:.6}.el-switch--wide .el-switch__label.el-switch__label--left span{left:10px}.el-switch--wide .el-switch__label.el-switch__label--right span{right:10px}.el-switch--medium{line-height:18px;height:18px}.el-switch--medium .el-switch__core{line-height:18px;height:18px;min-width:36px}.el-switch--medium .el-switch__core .is-loading{font-size:12px}.el-switch--medium .el-switch__core::after{width:14px;height:14px}.el-switch--medium .el-switch__label{height:17px;padding-left:18px}.el-switch--medium .el-switch__label *{font-size:14px;line-height:17px}.el-switch--medium .el-switch__label.is-active{padding-left:5px;padding-right:18px}.el-switch--medium.is-checked .el-switch__core::after{margin-left:-15px}.el-switch--small{line-height:16px;height:16px}.el-switch--small .el-switch__core{line-height:16px;height:16px;min-width:34px}.el-switch--small .el-switch__core .is-loading{font-size:11px}.el-switch--small .el-switch__core::after{width:12px;height:12px}.el-switch--small .el-switch__label{height:14px;padding-left:16px}.el-switch--small .el-switch__label *{font-size:12px;line-height:14px}.el-switch--small .el-switch__label.is-active{padding-left:5px;padding-right:16px}.el-switch--small.is-checked .el-switch__core::after{margin-left:-13px}.el-switch--mini{line-height:14px;height:14px}.el-switch--mini .el-switch__core{line-height:14px;height:14px;min-width:28px}.el-switch--mini .el-switch__core .is-loading{top:1px;left:1px;font-size:10px}.el-switch--mini .el-switch__core::after{width:10px;height:10px}.el-switch--mini .el-switch__label{height:14px;padding-left:14px}.el-switch--mini .el-switch__label *{font-size:12px;line-height:14px}.el-switch--mini .el-switch__label.is-active{padding-left:5px;padding-right:14px}.el-switch--mini.is-checked .el-switch__core .is-loading{right:1px}.el-switch--mini.is-checked .el-switch__core::after{margin-left:-11px}.el-switch .label-fade-enter,.el-switch .label-fade-leave-active{opacity:0}