bootstrap-colorpicker.css 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. /*!
  2. * Bootstrap Colorpicker v2.3.3
  3. * http://mjolnic.github.io/bootstrap-colorpicker/
  4. *
  5. * Originally written by (c) 2012 Stefan Petre
  6. * Licensed under the Apache License v2.0
  7. * http://www.apache.org/licenses/LICENSE-2.0.txt
  8. *
  9. */
  10. .colorpicker-saturation {
  11. width: 100px;
  12. height: 100px;
  13. background-image: url("../img/bootstrap-colorpicker/saturation.png");
  14. cursor: crosshair;
  15. float: left;
  16. }
  17. .colorpicker-saturation i {
  18. display: block;
  19. height: 5px;
  20. width: 5px;
  21. border: 1px solid #000;
  22. -webkit-border-radius: 5px;
  23. -moz-border-radius: 5px;
  24. border-radius: 5px;
  25. position: absolute;
  26. top: 0;
  27. left: 0;
  28. margin: -4px 0 0 -4px;
  29. }
  30. .colorpicker-saturation i b {
  31. display: block;
  32. height: 5px;
  33. width: 5px;
  34. border: 1px solid #fff;
  35. -webkit-border-radius: 5px;
  36. -moz-border-radius: 5px;
  37. border-radius: 5px;
  38. }
  39. .colorpicker-hue,
  40. .colorpicker-alpha {
  41. width: 15px;
  42. height: 100px;
  43. float: left;
  44. cursor: row-resize;
  45. margin-left: 4px;
  46. margin-bottom: 4px;
  47. }
  48. .colorpicker-hue i,
  49. .colorpicker-alpha i {
  50. display: block;
  51. height: 1px;
  52. background: #000;
  53. border-top: 1px solid #fff;
  54. position: absolute;
  55. top: 0;
  56. left: 0;
  57. width: 100%;
  58. margin-top: -1px;
  59. }
  60. .colorpicker-hue {
  61. background-image: url("../img/bootstrap-colorpicker/hue.png");
  62. }
  63. .colorpicker-alpha {
  64. background-image: url("../img/bootstrap-colorpicker/alpha.png");
  65. display: none;
  66. }
  67. .colorpicker-saturation,
  68. .colorpicker-hue,
  69. .colorpicker-alpha {
  70. background-size: contain;
  71. }
  72. .colorpicker {
  73. padding: 4px;
  74. min-width: 130px;
  75. margin-top: 1px;
  76. -webkit-border-radius: 4px;
  77. -moz-border-radius: 4px;
  78. border-radius: 4px;
  79. z-index: 2500;
  80. }
  81. .colorpicker:before,
  82. .colorpicker:after {
  83. display: table;
  84. content: "";
  85. line-height: 0;
  86. }
  87. .colorpicker:after {
  88. clear: both;
  89. }
  90. .colorpicker:before {
  91. content: '';
  92. display: inline-block;
  93. border-left: 7px solid transparent;
  94. border-right: 7px solid transparent;
  95. border-bottom: 7px solid #ccc;
  96. border-bottom-color: rgba(0, 0, 0, 0.2);
  97. position: absolute;
  98. top: -7px;
  99. left: 6px;
  100. }
  101. .colorpicker:after {
  102. content: '';
  103. display: inline-block;
  104. border-left: 6px solid transparent;
  105. border-right: 6px solid transparent;
  106. border-bottom: 6px solid #ffffff;
  107. position: absolute;
  108. top: -6px;
  109. left: 7px;
  110. }
  111. .colorpicker div {
  112. position: relative;
  113. }
  114. .colorpicker.colorpicker-with-alpha {
  115. min-width: 140px;
  116. }
  117. .colorpicker.colorpicker-with-alpha .colorpicker-alpha {
  118. display: block;
  119. }
  120. .colorpicker-color {
  121. height: 10px;
  122. margin-top: 5px;
  123. clear: both;
  124. background-image: url("../img/bootstrap-colorpicker/alpha.png");
  125. background-position: 0 100%;
  126. }
  127. .colorpicker-color div {
  128. height: 10px;
  129. }
  130. .colorpicker-selectors {
  131. display: none;
  132. height: 10px;
  133. margin-top: 5px;
  134. clear: both;
  135. }
  136. .colorpicker-selectors i {
  137. cursor: pointer;
  138. float: left;
  139. height: 10px;
  140. width: 10px;
  141. }
  142. .colorpicker-selectors i + i {
  143. margin-left: 3px;
  144. }
  145. .colorpicker-element .input-group-addon i,
  146. .colorpicker-element .add-on i {
  147. display: inline-block;
  148. cursor: pointer;
  149. height: 16px;
  150. vertical-align: text-top;
  151. width: 16px;
  152. }
  153. .colorpicker.colorpicker-inline {
  154. position: relative;
  155. display: inline-block;
  156. float: none;
  157. z-index: auto;
  158. }
  159. .colorpicker.colorpicker-horizontal {
  160. width: 110px;
  161. min-width: 110px;
  162. height: auto;
  163. }
  164. .colorpicker.colorpicker-horizontal .colorpicker-saturation {
  165. margin-bottom: 4px;
  166. }
  167. .colorpicker.colorpicker-horizontal .colorpicker-color {
  168. width: 100px;
  169. }
  170. .colorpicker.colorpicker-horizontal .colorpicker-hue,
  171. .colorpicker.colorpicker-horizontal .colorpicker-alpha {
  172. width: 100px;
  173. height: 15px;
  174. float: left;
  175. cursor: col-resize;
  176. margin-left: 0px;
  177. margin-bottom: 4px;
  178. }
  179. .colorpicker.colorpicker-horizontal .colorpicker-hue i,
  180. .colorpicker.colorpicker-horizontal .colorpicker-alpha i {
  181. display: block;
  182. height: 15px;
  183. background: #ffffff;
  184. position: absolute;
  185. top: 0;
  186. left: 0;
  187. width: 1px;
  188. border: none;
  189. margin-top: 0px;
  190. }
  191. .colorpicker.colorpicker-horizontal .colorpicker-hue {
  192. background-image: url("../img/bootstrap-colorpicker/hue-horizontal.png");
  193. }
  194. .colorpicker.colorpicker-horizontal .colorpicker-alpha {
  195. background-image: url("../img/bootstrap-colorpicker/alpha-horizontal.png");
  196. }
  197. .colorpicker.colorpicker-hidden {
  198. display: none;
  199. }
  200. .colorpicker.colorpicker-visible {
  201. display: block;
  202. }
  203. .colorpicker-inline.colorpicker-visible {
  204. display: inline-block;
  205. }
  206. .colorpicker-right:before {
  207. left: auto;
  208. right: 6px;
  209. }
  210. .colorpicker-right:after {
  211. left: auto;
  212. right: 7px;
  213. }
  214. .colorpicker-no-arrow:before {
  215. border-right: 0;
  216. border-left: 0;
  217. }
  218. .colorpicker-no-arrow:after {
  219. border-right: 0;
  220. border-left: 0;
  221. }
  222. /*# sourceMappingURL=bootstrap-colorpicker.css.map */