/*! * ===================================================== * Mui v2.9.0 Switch (http://dev.dcloud.net.cn/mui) * ===================================================== */ .mui-table-view-cell>.mui-switch, .mui-table-view-cell>a>.mui-switch { position: absolute; top: 50%; right: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .mui-table-view-cell .mui-navigate-right>.mui-switch, .mui-table-view-cell .mui-push-left>.mui-switch, .mui-table-view-cell .mui-push-right>.mui-switch, .mui-table-view-cell>a .mui-navigate-right>.mui-switch, .mui-table-view-cell>a .mui-push-left>.mui-switch, .mui-table-view-cell>a .mui-push-right>.mui-switch { right: 35px } .mui-input-row .mui-switch { float: right; margin-top: 5px; margin-right: 20px } .mui-switch { position: relative; display: block; width: 74px; height: 30px; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transition-property: background-color, border; transition-property: background-color, border; border: 2px solid #ddd; border-radius: 20px; background-color: #fff; background-clip: padding-box } .mui-switch.mui-disabled { opacity: .3 } .mui-switch .mui-switch-handle { position: absolute; z-index: 1; top: -1px; left: -1px; width: 28px; height: 28px; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; -webkit-transition-property: -webkit-transform, width, left; transition-property: transform, width, left; border-radius: 16px; background-color: #fff; background-clip: padding-box; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .4); box-shadow: 0 2px 5px rgba(0, 0, 0, .4) } .mui-switch:before { font-size: 13px; position: absolute; top: 3px; right: 11px; content: 'Off'; text-transform: uppercase; color: #999 } .mui-switch.mui-dragging { border-color: #f7f7f7; background-color: #f7f7f7 } .mui-switch.mui-dragging .mui-switch-handle { width: 38px } .mui-switch.mui-dragging.mui-active .mui-switch-handle { left: -11px; width: 38px } .mui-switch.mui-active { border-color: #4cd964; background-color: #4cd964 } .mui-switch.mui-active .mui-switch-handle { -webkit-transform: translate(43px, 0); transform: translate(43px, 0) } .mui-switch.mui-active:before { right: auto; left: 15px; content: 'On'; color: #fff } .mui-switch input[type=checkbox] { display: none } .mui-switch-mini { width: 47px } .mui-switch-mini:before { display: none } .mui-switch-mini.mui-active .mui-switch-handle { -webkit-transform: translate(16px, 0); transform: translate(16px, 0) } .mui-switch-blue.mui-active { border: 2px solid #007aff; background-color: #007aff }