style.css 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. /*font*/
  2. /*size*/
  3. /*icon*/
  4. /*color*/
  5. /*input/radio/checkbox*/
  6. /*popup*/
  7. /*table*/
  8. /*filter*/
  9. /*menu*/
  10. /*loading*/
  11. /*validate*/
  12. /*grid*/
  13. /*toolbar*/
  14. /*tooltip*/
  15. /*pager*/
  16. /*modal*/
  17. /*checkbox*/
  18. /*radio*/
  19. /*button*/
  20. /*input*/
  21. /*textarea*/
  22. /*form*/
  23. /*select*/
  24. /*switch*/
  25. /*pulldown*/
  26. .vxe-switch {
  27. display: inline-block;
  28. color: #606266;
  29. vertical-align: middle;
  30. padding: 0.4em;
  31. -webkit-user-select: none;
  32. -moz-user-select: none;
  33. -ms-user-select: none;
  34. user-select: none;
  35. text-align: center; }
  36. .vxe-switch.is--animat .vxe-switch--button {
  37. -webkit-transition: border-color .3s, background-color .3s;
  38. transition: border-color .3s, background-color .3s; }
  39. .vxe-switch.is--animat .vxe-switch--icon {
  40. -webkit-transition: all 0.3s;
  41. transition: all 0.3s; }
  42. .vxe-switch.is--on .vxe-switch--button {
  43. padding-right: 1.7em;
  44. background-color: #409eff; }
  45. .vxe-switch.is--on .vxe-switch--icon {
  46. left: 100%;
  47. -webkit-transform: translateX(-1.4em);
  48. transform: translateX(-1.4em); }
  49. .vxe-switch.is--off .vxe-switch--button {
  50. padding-left: 1.7em;
  51. background-color: rgba(0, 0, 0, 0.35); }
  52. .vxe-switch.is--off .vxe-switch--icon {
  53. left: 0.2em;
  54. -webkit-transform: translateX(0);
  55. transform: translateX(0); }
  56. .vxe-switch.is--on .vxe-switch--label-off,
  57. .vxe-switch.is--off .vxe-switch--label-on {
  58. height: 0;
  59. visibility: hidden;
  60. overflow: hidden; }
  61. .vxe-switch.is--on .vxe-switch--label, .vxe-switch.is--off .vxe-switch--label {
  62. opacity: 1; }
  63. .vxe-switch:not(.is--disabled) .vxe-switch--button {
  64. cursor: pointer; }
  65. .vxe-switch:not(.is--disabled) .vxe-switch--button:focus {
  66. -webkit-box-shadow: 0 0 0.4em 0 #409eff;
  67. box-shadow: 0 0 0.4em 0 #409eff; }
  68. .vxe-switch.is--disabled .vxe-switch--button {
  69. cursor: no-drop; }
  70. .vxe-switch.is--disabled.is--on .vxe-switch--button {
  71. background-color: #a6d2ff; }
  72. .vxe-switch.is--disabled.is--off .vxe-switch--button {
  73. background-color: rgba(0, 0, 0, 0.15); }
  74. .vxe-switch .vxe-switch--button {
  75. display: block;
  76. position: relative;
  77. height: 1.6em;
  78. line-height: 1;
  79. min-width: 3.2em;
  80. padding: 0 0.6em;
  81. border-radius: 1em;
  82. border: 0;
  83. outline: 0; }
  84. .vxe-switch .vxe-switch--label {
  85. opacity: 0;
  86. display: block;
  87. color: #fff;
  88. font-size: 0.8em; }
  89. .vxe-switch .vxe-switch--icon {
  90. position: absolute;
  91. top: 0.2em;
  92. left: 0;
  93. width: 1.2em;
  94. height: 1.2em;
  95. border-radius: 50%;
  96. background-color: #fff; }
  97. .vxe-switch .vxe-switch--label-icon {
  98. margin-right: 0.25em; }
  99. .vxe-switch {
  100. font-size: 14px; }
  101. .vxe-switch.size--medium {
  102. font-size: 14px; }
  103. .vxe-switch.size--small {
  104. font-size: 13px; }
  105. .vxe-switch.size--mini {
  106. font-size: 12px; }