mui.switch.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. /*!
  2. * =====================================================
  3. * Mui v2.9.0 Switch (http://dev.dcloud.net.cn/mui)
  4. * =====================================================
  5. */
  6. .mui-table-view-cell>.mui-switch,
  7. .mui-table-view-cell>a>.mui-switch {
  8. position: absolute;
  9. top: 50%;
  10. right: 15px;
  11. -webkit-transform: translateY(-50%);
  12. transform: translateY(-50%)
  13. }
  14. .mui-table-view-cell .mui-navigate-right>.mui-switch,
  15. .mui-table-view-cell .mui-push-left>.mui-switch,
  16. .mui-table-view-cell .mui-push-right>.mui-switch,
  17. .mui-table-view-cell>a .mui-navigate-right>.mui-switch,
  18. .mui-table-view-cell>a .mui-push-left>.mui-switch,
  19. .mui-table-view-cell>a .mui-push-right>.mui-switch {
  20. right: 35px
  21. }
  22. .mui-input-row .mui-switch {
  23. float: right;
  24. margin-top: 5px;
  25. margin-right: 20px
  26. }
  27. .mui-switch {
  28. position: relative;
  29. display: block;
  30. width: 74px;
  31. height: 30px;
  32. -webkit-transition-timing-function: ease-in-out;
  33. transition-timing-function: ease-in-out;
  34. -webkit-transition-duration: .2s;
  35. transition-duration: .2s;
  36. -webkit-transition-property: background-color, border;
  37. transition-property: background-color, border;
  38. border: 2px solid #ddd;
  39. border-radius: 20px;
  40. background-color: #fff;
  41. background-clip: padding-box
  42. }
  43. .mui-switch.mui-disabled {
  44. opacity: .3
  45. }
  46. .mui-switch .mui-switch-handle {
  47. position: absolute;
  48. z-index: 1;
  49. top: -1px;
  50. left: -1px;
  51. width: 28px;
  52. height: 28px;
  53. -webkit-transition: .2s ease-in-out;
  54. transition: .2s ease-in-out;
  55. -webkit-transition-property: -webkit-transform, width, left;
  56. transition-property: transform, width, left;
  57. border-radius: 16px;
  58. background-color: #fff;
  59. background-clip: padding-box;
  60. -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
  61. box-shadow: 0 2px 5px rgba(0, 0, 0, .4)
  62. }
  63. .mui-switch:before {
  64. font-size: 13px;
  65. position: absolute;
  66. top: 3px;
  67. right: 11px;
  68. content: 'Off';
  69. text-transform: uppercase;
  70. color: #999
  71. }
  72. .mui-switch.mui-dragging {
  73. border-color: #f7f7f7;
  74. background-color: #f7f7f7
  75. }
  76. .mui-switch.mui-dragging .mui-switch-handle {
  77. width: 38px
  78. }
  79. .mui-switch.mui-dragging.mui-active .mui-switch-handle {
  80. left: -11px;
  81. width: 38px
  82. }
  83. .mui-switch.mui-active {
  84. border-color: #4cd964;
  85. background-color: #4cd964
  86. }
  87. .mui-switch.mui-active .mui-switch-handle {
  88. -webkit-transform: translate(43px, 0);
  89. transform: translate(43px, 0)
  90. }
  91. .mui-switch.mui-active:before {
  92. right: auto;
  93. left: 15px;
  94. content: 'On';
  95. color: #fff
  96. }
  97. .mui-switch input[type=checkbox] {
  98. display: none
  99. }
  100. .mui-switch-mini {
  101. width: 47px
  102. }
  103. .mui-switch-mini:before {
  104. display: none
  105. }
  106. .mui-switch-mini.mui-active .mui-switch-handle {
  107. -webkit-transform: translate(16px, 0);
  108. transform: translate(16px, 0)
  109. }
  110. .mui-switch-blue.mui-active {
  111. border: 2px solid #007aff;
  112. background-color: #007aff
  113. }