bootstrapSwitch.css 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. /* ============================================================
  2. * bootstrapSwitch v1.0 by Larentis Mattia @spiritualGuru
  3. * http://www.larentis.eu/switch/
  4. * ============================================================
  5. * Licensed under the Apache License, Version 2.0
  6. * http://www.apache.org/licenses/LICENSE-2.0
  7. * ============================================================ */
  8. /* line 18, ../sass/bootstrapSwitch.scss */
  9. .switch {
  10. display: inline-block;
  11. cursor: pointer;
  12. -webkit-border-radius: 5px;
  13. -moz-border-radius: 5px;
  14. -ms-border-radius: 5px;
  15. -o-border-radius: 5px;
  16. border-radius: 5px;
  17. border: 1px solid;
  18. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  19. background: #e6e6e6;
  20. position: relative;
  21. text-align: left;
  22. overflow: hidden;
  23. line-height: 8px;
  24. -webkit-touch-callout: none;
  25. -webkit-user-select: none;
  26. -khtml-user-select: none;
  27. -moz-user-select: none;
  28. -ms-user-select: none;
  29. user-select: none;
  30. min-width: 102px;
  31. }
  32. /* line 40, ../sass/bootstrapSwitch.scss */
  33. .switch.switch-mini {
  34. min-width: 72px;
  35. }
  36. /* line 44, ../sass/bootstrapSwitch.scss */
  37. .switch.switch-small {
  38. min-width: 81px;
  39. }
  40. /* line 48, ../sass/bootstrapSwitch.scss */
  41. .switch.switch-large {
  42. min-width: 120px;
  43. }
  44. /* line 52, ../sass/bootstrapSwitch.scss */
  45. .switch.deactivate {
  46. filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  47. opacity: 0.5;
  48. cursor: default !important;
  49. }
  50. /* line 55, ../sass/bootstrapSwitch.scss */
  51. .switch.deactivate label, .switch.deactivate span {
  52. cursor: default !important;
  53. }
  54. /* line 59, ../sass/bootstrapSwitch.scss */
  55. .switch > div {
  56. display: inline-block;
  57. width: 150%;
  58. position: relative;
  59. top: 0;
  60. }
  61. /* line 65, ../sass/bootstrapSwitch.scss */
  62. .switch > div.switch-animate {
  63. -webkit-transition: left 0.5s;
  64. -moz-transition: left 0.5s;
  65. -o-transition: left 0.5s;
  66. transition: left 0.5s;
  67. }
  68. /* line 68, ../sass/bootstrapSwitch.scss */
  69. .switch > div.switch-off {
  70. left: -50%;
  71. }
  72. /* line 71, ../sass/bootstrapSwitch.scss */
  73. .switch > div.switch-on {
  74. left: 0%;
  75. }
  76. /* line 75, ../sass/bootstrapSwitch.scss */
  77. .switch input[type=checkbox] {
  78. display: none;
  79. }
  80. /* line 83, ../sass/bootstrapSwitch.scss */
  81. .switch span, .switch label {
  82. -webkit-box-sizing: border-box;
  83. -moz-box-sizing: border-box;
  84. box-sizing: border-box;
  85. cursor: pointer;
  86. position: relative;
  87. display: inline-block;
  88. height: 100%;
  89. padding-bottom: 4px;
  90. padding-top: 4px;
  91. font-size: 14px;
  92. line-height: 20px;
  93. }
  94. /* line 96, ../sass/bootstrapSwitch.scss */
  95. .switch span.switch-mini, .switch label.switch-mini {
  96. padding-bottom: 4px;
  97. padding-top: 4px;
  98. font-size: 10px;
  99. line-height: 9px;
  100. }
  101. /* line 103, ../sass/bootstrapSwitch.scss */
  102. .switch span.switch-small, .switch label.switch-small {
  103. padding-bottom: 3px;
  104. padding-top: 3px;
  105. font-size: 12px;
  106. line-height: 18px;
  107. }
  108. /* line 110, ../sass/bootstrapSwitch.scss */
  109. .switch span.switch-large, .switch label.switch-large {
  110. padding-bottom: 9px;
  111. padding-top: 9px;
  112. font-size: 16px;
  113. line-height: normal;
  114. }
  115. /* line 118, ../sass/bootstrapSwitch.scss */
  116. .switch label {
  117. background: white;
  118. margin-top: -1px;
  119. margin-bottom: -1px;
  120. z-index: 100;
  121. width: 33.333333%;
  122. border-left: 1px solid #e6e6e6;
  123. border-right: 1px solid #e6e6e6;
  124. background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6));
  125. background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  126. background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  127. background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  128. background-image: linear-gradient(top, #ffffff, #e6e6e6);
  129. }
  130. /* line 130, ../sass/bootstrapSwitch.scss */
  131. .switch span {
  132. color: white;
  133. text-align: center;
  134. z-index: 1;
  135. width: 33.333333%;
  136. }
  137. /* line 136, ../sass/bootstrapSwitch.scss */
  138. .switch span.switch-left {
  139. -moz-border-radius-topleft: 4px;
  140. -webkit-border-top-left-radius: 4px;
  141. border-top-left-radius: 4px;
  142. -moz-border-radius-bottomleft: 4px;
  143. -webkit-border-bottom-left-radius: 4px;
  144. border-bottom-left-radius: 4px;
  145. }
  146. /* line 140, ../sass/bootstrapSwitch.scss */
  147. .switch span.switch-right {
  148. color: black;
  149. -moz-border-radius-topright: 4px;
  150. -webkit-border-top-right-radius: 4px;
  151. border-top-right-radius: 4px;
  152. -moz-border-radius-bottomright: 4px;
  153. -webkit-border-bottom-right-radius: 4px;
  154. border-bottom-right-radius: 4px;
  155. background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6));
  156. background-image: -webkit-linear-gradient(bottom, #ffffff, #e6e6e6);
  157. background-image: -moz-linear-gradient(bottom, #ffffff, #e6e6e6);
  158. background-image: -o-linear-gradient(bottom, #ffffff, #e6e6e6);
  159. background-image: linear-gradient(bottom, #ffffff, #e6e6e6);
  160. }
  161. /* line 147, ../sass/bootstrapSwitch.scss */
  162. .switch span.switch-primary, .switch span.switch-left {
  163. color: white;
  164. background: #0088cc;
  165. background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #0088cc), color-stop(100%, #0055cc));
  166. background-image: -webkit-linear-gradient(bottom, #0088cc, #0055cc);
  167. background-image: -moz-linear-gradient(bottom, #0088cc, #0055cc);
  168. background-image: -o-linear-gradient(bottom, #0088cc, #0055cc);
  169. background-image: linear-gradient(bottom, #0088cc, #0055cc);
  170. }
  171. /* line 152, ../sass/bootstrapSwitch.scss */
  172. .switch span.switch-info {
  173. color: white;
  174. background: #5bc0de;
  175. background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #5bc0de), color-stop(100%, #2f96b4));
  176. background-image: -webkit-linear-gradient(bottom, #5bc0de, #2f96b4);
  177. background-image: -moz-linear-gradient(bottom, #5bc0de, #2f96b4);
  178. background-image: -o-linear-gradient(bottom, #5bc0de, #2f96b4);
  179. background-image: linear-gradient(bottom, #5bc0de, #2f96b4);
  180. }
  181. /* line 158, ../sass/bootstrapSwitch.scss */
  182. .switch span.switch-success {
  183. color: white;
  184. background: #62c462;
  185. background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #62c462), color-stop(100%, #51a351));
  186. background-image: -webkit-linear-gradient(bottom, #62c462, #51a351);
  187. background-image: -moz-linear-gradient(bottom, #62c462, #51a351);
  188. background-image: -o-linear-gradient(bottom, #62c462, #51a351);
  189. background-image: linear-gradient(bottom, #62c462, #51a351);
  190. }
  191. /* line 164, ../sass/bootstrapSwitch.scss */
  192. .switch span.switch-warning {
  193. color: white;
  194. background: #dbb450;
  195. background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #dbb450), color-stop(100%, #f89406));
  196. background-image: -webkit-linear-gradient(bottom, #dbb450, #f89406);
  197. background-image: -moz-linear-gradient(bottom, #dbb450, #f89406);
  198. background-image: -o-linear-gradient(bottom, #dbb450, #f89406);
  199. background-image: linear-gradient(bottom, #dbb450, #f89406);
  200. }
  201. /* line 170, ../sass/bootstrapSwitch.scss */
  202. .switch span.switch-danger {
  203. color: white;
  204. background: #ee5f5b;
  205. background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #ee5f5b), color-stop(100%, #bd362f));
  206. background-image: -webkit-linear-gradient(bottom, #ee5f5b, #bd362f);
  207. background-image: -moz-linear-gradient(bottom, #ee5f5b, #bd362f);
  208. background-image: -o-linear-gradient(bottom, #ee5f5b, #bd362f);
  209. background-image: linear-gradient(bottom, #ee5f5b, #bd362f);
  210. }