Switch.css 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. /* Switch - default */
  2. .mblSwitch {
  3. margin: 0;
  4. position: relative;
  5. width: 94px;
  6. height: 27px;
  7. line-height: 29px;
  8. overflow: hidden;
  9. text-align: left;
  10. -webkit-tap-highlight-color: rgba(255,255,255,0);
  11. }
  12. .mblItemSwitch {
  13. position: absolute;
  14. right: 12px;
  15. }
  16. .mblSwitchInner {
  17. position: absolute;
  18. top: 0px;
  19. height: 27px;
  20. }
  21. .mblSwitchAnimation .mblSwitchInner {
  22. -webkit-transition-property: left;
  23. -webkit-transition-duration: .3s;
  24. }
  25. .mblSwitchOn .mblSwitchInner {
  26. left: 0px;
  27. }
  28. .mblSwitchOff .mblSwitchInner {
  29. left: -53px;
  30. }
  31. .mblSwitchBg {
  32. position: absolute;
  33. top: 0px;
  34. height: 27px;
  35. border-width: 1px;
  36. border-style: inset;
  37. border-color: #9CACC0;
  38. font-family: Helvetica;
  39. font-size: 16px;
  40. font-weight: bold;
  41. line-height: 29px;
  42. -webkit-box-sizing: border-box;
  43. }
  44. .mblSwitchBgLeft {
  45. left: 0px;
  46. width: 94px;
  47. color: white;
  48. background-color: #3F84EB;
  49. }
  50. .mblSwitchBgRight {
  51. left: 53px;
  52. width: 94px;
  53. color: #7F7F7F;
  54. }
  55. .mblSwitchKnob {
  56. position: absolute;
  57. top: 1px;
  58. left: 53px;
  59. width: 41px;
  60. height: 26px;
  61. font-size: 1px;
  62. border-width: 1px;
  63. border-style: solid;
  64. border-color: #EFEFEF #A5A5A5 #969696 #325E9E;
  65. -webkit-box-sizing: border-box;
  66. }
  67. .mblSwitchText {
  68. position: relative;
  69. top: 0px;
  70. width: 53px;
  71. height: 27px;
  72. padding: 0px;
  73. line-height: 28px;
  74. text-align: center;
  75. }
  76. .mblSwitchTextLeft {
  77. left: 0px;
  78. }
  79. .mblSwitchTextRight {
  80. left: 40px;
  81. }
  82. /* Round Shape1 */
  83. .mblSwRoundShape1 {
  84. height: 28px;
  85. -webkit-mask-image: -webkit-canvas(mblSwRoundShape1Mask);
  86. }
  87. .mblSwRoundShape1.mblItemSwitch {
  88. top: 8px;
  89. }
  90. .mblSwRoundShape1 .mblSwitchInner {
  91. height: 28px;
  92. }
  93. .mblSwRoundShape1.mblSwitchOff .mblSwitchInner {
  94. left: -67px;
  95. }
  96. .mblSwRoundShape1 .mblSwitchBg {
  97. height: 28px;
  98. -webkit-border-radius: 14px;
  99. }
  100. .mblSwRoundShape1 .mblSwitchBgLeft {
  101. }
  102. .mblSwRoundShape1 .mblSwitchBgRight {
  103. left: 67px;
  104. }
  105. .mblSwRoundShape1 .mblSwitchKnob {
  106. left: 67px;
  107. width: 26px;
  108. height: 26px;
  109. -webkit-border-radius: 13px;
  110. }
  111. .mblSwRoundShape1 .mblSwitchText {
  112. width: 67px;
  113. height: 26px;
  114. }
  115. .mblSwRoundShape1 .mblSwitchTextRight {
  116. left: 26px;
  117. }
  118. /* Round Shape2 */
  119. .mblSwRoundShape2 {
  120. height: 28px;
  121. -webkit-mask-image: -webkit-canvas(mblSwRoundShape2Mask);
  122. }
  123. .mblSwRoundShape2.mblItemSwitch {
  124. top: 8px;
  125. }
  126. .mblSwRoundShape2 .mblSwitchInner {
  127. height: 28px;
  128. }
  129. .mblSwRoundShape2.mblSwitchOff .mblSwitchInner {
  130. left: -51px;
  131. }
  132. .mblSwRoundShape2 .mblSwitchBg {
  133. height: 28px;
  134. -webkit-border-radius: 14px;
  135. }
  136. .mblSwRoundShape2 .mblSwitchBgRight {
  137. left: 51px;
  138. }
  139. .mblSwRoundShape2 .mblSwitchKnob {
  140. left: 51px;
  141. width: 42px;
  142. height: 26px;
  143. -webkit-border-radius: 13px;
  144. }
  145. .mblSwRoundShape2 .mblSwitchText {
  146. width: 51px;
  147. height: 28px;
  148. }
  149. .mblSwRoundShape2 .mblSwitchTextRight {
  150. left: 42px;
  151. }
  152. /* Arc Shape1 */
  153. .mblSwArcShape1 {
  154. height: 28px;
  155. -webkit-border-radius: 6px/14px;
  156. }
  157. .mblSwArcShape1.mblItemSwitch {
  158. top: 8px;
  159. }
  160. .mblSwArcShape1 .mblSwitchInner {
  161. height: 28px;
  162. }
  163. .mblSwArcShape1.mblSwitchOff .mblSwitchInner {
  164. left: -67px;
  165. }
  166. .mblSwArcShape1 .mblSwitchBg {
  167. height: 28px;
  168. -webkit-border-radius: 6px/14px;
  169. }
  170. .mblSwArcShape1 .mblSwitchBgRight {
  171. left: 67px;
  172. }
  173. .mblSwArcShape1 .mblSwitchKnob {
  174. left: 67px;
  175. width: 26px;
  176. height: 26px;
  177. -webkit-border-radius: 5px/13px;
  178. }
  179. .mblSwArcShape1 .mblSwitchText {
  180. width: 67px;
  181. height: 26px;
  182. }
  183. .mblSwArcShape1 .mblSwitchTextRight {
  184. left: 26px;
  185. }
  186. /* Arc Shape2 */
  187. .mblSwArcShape2 {
  188. height: 28px;
  189. -webkit-border-radius: 6px/14px;
  190. }
  191. .mblSwArcShape2.mblItemSwitch {
  192. top: 8px;
  193. }
  194. .mblSwArcShape2 .mblSwitchInner {
  195. height: 28px;
  196. }
  197. .mblSwArcShape2.mblSwitchOff .mblSwitchInner {
  198. left: -51px;
  199. }
  200. .mblSwArcShape2 .mblSwitchBg {
  201. height: 28px;
  202. -webkit-border-radius: 6px/14px;
  203. }
  204. .mblSwArcShape2 .mblSwitchBgRight {
  205. left: 51px;
  206. }
  207. .mblSwArcShape2 .mblSwitchKnob {
  208. left: 51px;
  209. width: 42px;
  210. height: 26px;
  211. -webkit-border-radius: 5px/13px;
  212. }
  213. .mblSwArcShape2 .mblSwitchText {
  214. width: 51px;
  215. height: 26px;
  216. }
  217. .mblSwArcShape2 .mblSwitchTextRight {
  218. left: 42px;
  219. }