123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131 |
- /*!
- * =====================================================
- * 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
- }
|