bootstrap-switch.css 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. /*! ===========================================================
  2. * bootstrap-switch v1.9.0 by Larentis Mattia @SpiritualGuru
  3. * http://www.larentis.eu/
  4. *
  5. * Enhanced for radiobuttons by Stein, Peter @BdMdesigN
  6. * http://www.bdmdesign.org/
  7. *
  8. * Project site:
  9. * http://www.bootstrap-switch.org
  10. * ============================================================
  11. * Licensed under the Apache License, Version 2.0
  12. * http://www.apache.org/licenses/LICENSE-2.0
  13. * ============================================================ */
  14. .has-switch {
  15. display: inline-block;
  16. cursor: pointer;
  17. border-radius: 4px;
  18. border: 1px solid;
  19. border-color: #cccccc;
  20. position: relative;
  21. text-align: left;
  22. overflow: hidden;
  23. line-height: 8px;
  24. -webkit-user-select: none;
  25. -moz-user-select: none;
  26. -ms-user-select: none;
  27. -o-user-select: none;
  28. user-select: none;
  29. vertical-align: middle;
  30. min-width: 100px;
  31. }
  32. .has-switch.switch-mini {
  33. min-width: 72px;
  34. }
  35. .has-switch.switch-mini i.switch-mini-icons {
  36. height: 1.20em;
  37. line-height: 9px;
  38. vertical-align: text-top;
  39. text-align: center;
  40. transform: scale(0.6);
  41. margin-top: -1px;
  42. margin-bottom: -1px;
  43. }
  44. .has-switch.switch-small {
  45. min-width: 80px;
  46. }
  47. .has-switch.switch-large {
  48. min-width: 120px;
  49. }
  50. .has-switch.deactivate {
  51. opacity: 0.5;
  52. filter: alpha(opacity=50);
  53. cursor: default !important;
  54. }
  55. .has-switch.deactivate label,
  56. .has-switch.deactivate span {
  57. cursor: default !important;
  58. }
  59. .has-switch > div {
  60. display: inline-block;
  61. width: 150%;
  62. position: relative;
  63. top: 0;
  64. }
  65. .has-switch > div.switch-animate {
  66. -webkit-transition: left 0.5s;
  67. transition: left 0.5s;
  68. }
  69. .has-switch > div.switch-off {
  70. left: -50%;
  71. }
  72. .has-switch > div.switch-on {
  73. left: 0%;
  74. }
  75. .has-switch input[type=radio],
  76. .has-switch input[type=checkbox] {
  77. display: none;
  78. }
  79. .has-switch span,
  80. .has-switch label {
  81. -webkit-box-sizing: border-box;
  82. -moz-box-sizing: border-box;
  83. box-sizing: border-box;
  84. cursor: pointer;
  85. position: relative;
  86. display: inline-block;
  87. height: 100%;
  88. padding-bottom: 4px;
  89. padding-top: 4px;
  90. font-size: 14px;
  91. line-height: 20px;
  92. }
  93. .has-switch span.switch-mini,
  94. .has-switch label.switch-mini {
  95. padding-bottom: 4px;
  96. padding-top: 4px;
  97. font-size: 10px;
  98. line-height: 9px;
  99. }
  100. .has-switch span.switch-small,
  101. .has-switch label.switch-small {
  102. padding-bottom: 3px;
  103. padding-top: 3px;
  104. font-size: 12px;
  105. line-height: 18px;
  106. }
  107. .has-switch span.switch-large,
  108. .has-switch label.switch-large {
  109. padding-bottom: 9px;
  110. padding-top: 9px;
  111. font-size: 16px;
  112. line-height: normal;
  113. }
  114. .has-switch label {
  115. text-align: center;
  116. margin-top: -1px;
  117. margin-bottom: -1px;
  118. z-index: 100;
  119. width: 34%;
  120. background: #ffffff;
  121. }
  122. .has-switch label i {
  123. color: #000;
  124. text-shadow: 0 1px 0 #fff;
  125. line-height: 18px;
  126. pointer-events: none;
  127. }
  128. .has-switch span {
  129. text-align: center;
  130. z-index: 1;
  131. width: 33%;
  132. }
  133. .has-switch span.switch-left {
  134. color: #f00;
  135. border-bottom-left-radius: 4px;
  136. border-top-left-radius: 4px;
  137. }
  138. .has-switch span.switch-right {
  139. color: #000;
  140. background: #eeeeee;
  141. }
  142. .has-switch span.switch-primary,
  143. .has-switch span.switch-left {
  144. color: #fff;
  145. background: #428bca;
  146. }
  147. .has-switch span.switch-info {
  148. color: #fff;
  149. background: #5bc0de;
  150. }
  151. .has-switch span.switch-success {
  152. color: #fff;
  153. background: #5cb85c;
  154. }
  155. .has-switch span.switch-warning {
  156. background: #f0ad4e;
  157. color: #fff;
  158. }
  159. .has-switch span.switch-danger {
  160. color: #fff;
  161. background: #d9534f;
  162. }
  163. .has-switch span.switch-default {
  164. color: #000;
  165. background: #eeeeee;
  166. }