bootstrap-switch.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. /* ========================================================================
  2. * bootstrap-switch - v2.0.0
  3. * http://www.bootstrap-switch.org
  4. * ========================================================================
  5. * Copyright 2012-2013 Mattia Larentis
  6. *
  7. * ========================================================================
  8. * Licensed under the Apache License, Version 2.0 (the "License");
  9. * you may not use this file except in compliance with the License.
  10. * You may obtain a copy of the License at
  11. *
  12. * http://www.apache.org/licenses/LICENSE-2.0
  13. *
  14. * Unless required by applicable law or agreed to in writing, software
  15. * distributed under the License is distributed on an "AS IS" BASIS,
  16. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17. * See the License for the specific language governing permissions and
  18. * limitations under the License.
  19. * ========================================================================
  20. */
  21. .has-switch {
  22. display: inline-block;
  23. cursor: pointer;
  24. border-radius: 4px;
  25. border: 1px solid;
  26. border-color: #cccccc;
  27. position: relative;
  28. text-align: left;
  29. overflow: hidden;
  30. line-height: 8px;
  31. -webkit-user-select: none;
  32. -moz-user-select: none;
  33. -ms-user-select: none;
  34. -o-user-select: none;
  35. user-select: none;
  36. vertical-align: middle;
  37. min-width: 100px;
  38. }
  39. .has-switch.switch-mini {
  40. min-width: 72px;
  41. }
  42. .has-switch.switch-mini i.switch-mini-icons {
  43. height: 1.20em;
  44. line-height: 9px;
  45. vertical-align: text-top;
  46. text-align: center;
  47. transform: scale(0.6);
  48. margin-top: -1px;
  49. margin-bottom: -1px;
  50. }
  51. .has-switch.switch-small {
  52. min-width: 80px;
  53. }
  54. .has-switch.switch-large {
  55. min-width: 120px;
  56. }
  57. .has-switch.deactivate {
  58. opacity: 0.5;
  59. filter: alpha(opacity=50);
  60. cursor: default !important;
  61. }
  62. .has-switch.deactivate label,
  63. .has-switch.deactivate span {
  64. cursor: default !important;
  65. }
  66. .has-switch > div {
  67. display: inline-block;
  68. width: 150%;
  69. position: relative;
  70. top: 0;
  71. }
  72. .has-switch > div.switch-animate {
  73. -webkit-transition: left 0.5s;
  74. transition: left 0.5s;
  75. }
  76. .has-switch > div.switch-off {
  77. left: -50%;
  78. }
  79. .has-switch > div.switch-on {
  80. left: 0%;
  81. }
  82. .has-switch input[type=radio],
  83. .has-switch input[type=checkbox] {
  84. display: none;
  85. }
  86. .has-switch span,
  87. .has-switch label {
  88. -webkit-box-sizing: border-box;
  89. -moz-box-sizing: border-box;
  90. box-sizing: border-box;
  91. cursor: pointer;
  92. position: relative;
  93. display: inline-block !important;
  94. height: 100%;
  95. padding-bottom: 4px;
  96. padding-top: 4px;
  97. font-size: 14px;
  98. line-height: 20px;
  99. }
  100. .has-switch span.switch-mini,
  101. .has-switch label.switch-mini {
  102. padding-bottom: 4px;
  103. padding-top: 4px;
  104. font-size: 10px;
  105. line-height: 9px;
  106. }
  107. .has-switch span.switch-small,
  108. .has-switch label.switch-small {
  109. padding-bottom: 3px;
  110. padding-top: 3px;
  111. font-size: 12px;
  112. line-height: 18px;
  113. }
  114. .has-switch span.switch-large,
  115. .has-switch label.switch-large {
  116. padding-bottom: 9px;
  117. padding-top: 9px;
  118. font-size: 16px;
  119. line-height: normal;
  120. }
  121. .has-switch label {
  122. text-align: center;
  123. margin-top: -1px;
  124. margin-bottom: -1px;
  125. z-index: 100;
  126. width: 34%;
  127. background: #ffffff;
  128. }
  129. .has-switch label i {
  130. color: #000;
  131. text-shadow: 0 1px 0 #fff;
  132. line-height: 18px;
  133. pointer-events: none;
  134. }
  135. .has-switch span {
  136. text-align: center;
  137. z-index: 1;
  138. width: 33%;
  139. }
  140. .has-switch span.switch-left {
  141. color: #f00;
  142. border-bottom-left-radius: 4px;
  143. border-top-left-radius: 4px;
  144. }
  145. .has-switch span.switch-right {
  146. color: #000;
  147. background: #eeeeee;
  148. }
  149. .has-switch span.switch-primary,
  150. .has-switch span.switch-left {
  151. color: #fff;
  152. background: #428bca;
  153. }
  154. .has-switch span.switch-info {
  155. color: #fff;
  156. background: #5bc0de;
  157. }
  158. .has-switch span.switch-success {
  159. color: #fff;
  160. background: #5cb85c;
  161. }
  162. .has-switch span.switch-warning {
  163. background: #f0ad4e;
  164. color: #fff;
  165. }
  166. .has-switch span.switch-danger {
  167. color: #fff;
  168. background: #d9534f;
  169. }
  170. .has-switch span.switch-default {
  171. color: #000;
  172. background: #eeeeee;
  173. }