fontawesome-iconpicker.css 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  1. /*!
  2. * Font Awesome Icon Picker
  3. * http://mjolnic.github.io/fontawesome-iconpicker/
  4. *
  5. * Originally written by (c) 2014 Javier Aguilar @mjolnic
  6. * Licensed under the MIT License
  7. * https://github.com/mjolnic/fontawesome-iconpicker/blob/master/LICENSE
  8. *
  9. */
  10. /*
  11. * Font Awesome Icon Picker
  12. * http://mjolnic.github.io/fontawesome-iconpicker/
  13. *
  14. * Originally written by (c) 2014 Javier Aguilar @mjolnic
  15. * Licensed under the MIT License
  16. * https://github.com/mjolnic/fontawesome-iconpicker/blob/master/LICENSE
  17. *
  18. */
  19. /*
  20. * Font Awesome Icon Picker
  21. * http://mjolnic.github.io/fontawesome-iconpicker/
  22. *
  23. * Originally written by (c) 2014 Javier Aguilar @mjolnic
  24. * Licensed under the MIT License
  25. * https://github.com/mjolnic/fontawesome-iconpicker/blob/master/LICENSE
  26. *
  27. */
  28. .iconpicker-popover.popover {
  29. position: absolute;
  30. top: 0;
  31. left: 0;
  32. display: none;
  33. max-width: none;
  34. padding: 1px;
  35. text-align: left;
  36. width: 216px;
  37. background: #f7f7f7;
  38. }
  39. .iconpicker-popover.popover.top,
  40. .iconpicker-popover.popover.topLeftCorner,
  41. .iconpicker-popover.popover.topLeft,
  42. .iconpicker-popover.popover.topRight,
  43. .iconpicker-popover.popover.topRightCorner {
  44. margin-top: -10px;
  45. }
  46. .iconpicker-popover.popover.right,
  47. .iconpicker-popover.popover.rightTop,
  48. .iconpicker-popover.popover.rightBottom {
  49. margin-left: 10px;
  50. }
  51. .iconpicker-popover.popover.bottom,
  52. .iconpicker-popover.popover.bottomRightCorner,
  53. .iconpicker-popover.popover.bottomRight,
  54. .iconpicker-popover.popover.bottomLeft,
  55. .iconpicker-popover.popover.bottomLeftCorner {
  56. margin-top: 10px;
  57. }
  58. .iconpicker-popover.popover.left,
  59. .iconpicker-popover.popover.leftBottom,
  60. .iconpicker-popover.popover.leftTop {
  61. margin-left: -10px;
  62. }
  63. .iconpicker-popover.popover.inline {
  64. margin: 0 0 12px 0;
  65. position: relative;
  66. display: inline-block;
  67. opacity: 1;
  68. top: auto;
  69. left: auto;
  70. bottom: auto;
  71. right: auto;
  72. max-width: 100%;
  73. box-shadow: none;
  74. z-index: auto;
  75. vertical-align: top;
  76. }
  77. .iconpicker-popover.popover.inline > .arrow {
  78. display: none;
  79. }
  80. .dropdown-menu .iconpicker-popover.inline {
  81. margin: 0;
  82. border: none;
  83. }
  84. .dropdown-menu.iconpicker-container {
  85. padding: 0;
  86. }
  87. .iconpicker-popover.popover .popover-title {
  88. padding: 12px;
  89. font-size: 13px;
  90. line-height: 15px;
  91. border-bottom: 1px solid #ebebeb;
  92. background-color: #f7f7f7;
  93. }
  94. .iconpicker-popover.popover .popover-title input[type=search].iconpicker-search {
  95. margin: 0 0 2px 0;
  96. }
  97. .iconpicker-popover.popover .popover-title-text ~ input[type=search].iconpicker-search {
  98. margin-top: 12px;
  99. }
  100. .iconpicker-popover.popover .popover-content {
  101. padding: 0px;
  102. text-align: center;
  103. }
  104. .iconpicker-popover .popover-footer {
  105. float: none;
  106. clear: both;
  107. padding: 12px;
  108. text-align: right;
  109. margin: 0;
  110. border-top: 1px solid #ebebeb;
  111. background-color: #f7f7f7;
  112. }
  113. .iconpicker-popover .popover-footer:before,
  114. .iconpicker-popover .popover-footer:after {
  115. content: " ";
  116. display: table;
  117. }
  118. .iconpicker-popover .popover-footer:after {
  119. clear: both;
  120. }
  121. .iconpicker-popover .popover-footer .iconpicker-btn {
  122. margin-left: 10px;
  123. }
  124. .iconpicker-popover .popover-footer input[type=search].iconpicker-search {
  125. /*width:auto;
  126. float:left;*/
  127. margin-bottom: 12px;
  128. }
  129. .iconpicker-popover.popover > .arrow,
  130. .iconpicker-popover.popover > .arrow:after {
  131. position: absolute;
  132. display: block;
  133. width: 0;
  134. height: 0;
  135. border-color: transparent;
  136. border-style: solid;
  137. }
  138. .iconpicker-popover.popover > .arrow {
  139. border-width: 11px;
  140. }
  141. .iconpicker-popover.popover > .arrow:after {
  142. border-width: 10px;
  143. content: "";
  144. }
  145. .iconpicker-popover.popover.top > .arrow,
  146. .iconpicker-popover.popover.topLeft > .arrow,
  147. .iconpicker-popover.popover.topRight > .arrow {
  148. left: 50%;
  149. margin-left: -11px;
  150. border-bottom-width: 0;
  151. border-top-color: #999999;
  152. border-top-color: rgba(0, 0, 0, 0.25);
  153. bottom: -11px;
  154. }
  155. .iconpicker-popover.popover.top > .arrow:after,
  156. .iconpicker-popover.popover.topLeft > .arrow:after,
  157. .iconpicker-popover.popover.topRight > .arrow:after {
  158. content: " ";
  159. bottom: 1px;
  160. margin-left: -10px;
  161. border-bottom-width: 0;
  162. border-top-color: #ffffff;
  163. }
  164. .iconpicker-popover.popover.topLeft > .arrow {
  165. left: 8px;
  166. margin-left: 0;
  167. }
  168. .iconpicker-popover.popover.topRight > .arrow {
  169. left: auto;
  170. right: 8px;
  171. margin-left: 0;
  172. }
  173. .iconpicker-popover.popover.right > .arrow,
  174. .iconpicker-popover.popover.rightTop > .arrow,
  175. .iconpicker-popover.popover.rightBottom > .arrow {
  176. top: 50%;
  177. left: -11px;
  178. margin-top: -11px;
  179. border-left-width: 0;
  180. border-right-color: #999999;
  181. border-right-color: rgba(0, 0, 0, 0.25);
  182. }
  183. .iconpicker-popover.popover.right > .arrow:after,
  184. .iconpicker-popover.popover.rightTop > .arrow:after,
  185. .iconpicker-popover.popover.rightBottom > .arrow:after {
  186. content: " ";
  187. left: 1px;
  188. bottom: -10px;
  189. border-left-width: 0;
  190. border-right-color: #ffffff;
  191. }
  192. .iconpicker-popover.popover.rightTop > .arrow {
  193. top: auto;
  194. bottom: 8px;
  195. margin-top: 0;
  196. }
  197. .iconpicker-popover.popover.rightBottom > .arrow {
  198. top: 8px;
  199. margin-top: 0;
  200. }
  201. .iconpicker-popover.popover.bottom > .arrow,
  202. .iconpicker-popover.popover.bottomRight > .arrow,
  203. .iconpicker-popover.popover.bottomLeft > .arrow {
  204. left: 50%;
  205. margin-left: -11px;
  206. border-top-width: 0;
  207. border-bottom-color: #999999;
  208. border-bottom-color: rgba(0, 0, 0, 0.25);
  209. top: -11px;
  210. }
  211. .iconpicker-popover.popover.bottom > .arrow:after,
  212. .iconpicker-popover.popover.bottomRight > .arrow:after,
  213. .iconpicker-popover.popover.bottomLeft > .arrow:after {
  214. content: " ";
  215. top: 1px;
  216. margin-left: -10px;
  217. border-top-width: 0;
  218. border-bottom-color: #ffffff;
  219. }
  220. .iconpicker-popover.popover.bottomLeft > .arrow {
  221. left: 8px;
  222. margin-left: 0;
  223. }
  224. .iconpicker-popover.popover.bottomRight > .arrow {
  225. left: auto;
  226. right: 8px;
  227. margin-left: 0;
  228. }
  229. .iconpicker-popover.popover.left > .arrow,
  230. .iconpicker-popover.popover.leftBottom > .arrow,
  231. .iconpicker-popover.popover.leftTop > .arrow {
  232. top: 50%;
  233. right: -11px;
  234. margin-top: -11px;
  235. border-right-width: 0;
  236. border-left-color: #999999;
  237. border-left-color: rgba(0, 0, 0, 0.25);
  238. }
  239. .iconpicker-popover.popover.left > .arrow:after,
  240. .iconpicker-popover.popover.leftBottom > .arrow:after,
  241. .iconpicker-popover.popover.leftTop > .arrow:after {
  242. content: " ";
  243. right: 1px;
  244. border-right-width: 0;
  245. border-left-color: #ffffff;
  246. bottom: -10px;
  247. }
  248. .iconpicker-popover.popover.leftBottom > .arrow {
  249. top: 8px;
  250. margin-top: 0;
  251. }
  252. .iconpicker-popover.popover.leftTop > .arrow {
  253. top: auto;
  254. bottom: 8px;
  255. margin-top: 0;
  256. }
  257. .iconpicker {
  258. position: relative;
  259. text-align: left;
  260. text-shadow: none;
  261. line-height: 0;
  262. display: block;
  263. margin: 0;
  264. overflow: hidden;
  265. }
  266. .iconpicker * {
  267. -webkit-box-sizing: content-box;
  268. -moz-box-sizing: content-box;
  269. box-sizing: content-box;
  270. position: relative;
  271. }
  272. .iconpicker:before,
  273. .iconpicker:after {
  274. content: " ";
  275. display: table;
  276. }
  277. .iconpicker:after {
  278. clear: both;
  279. }
  280. .iconpicker .iconpicker-items {
  281. position: relative;
  282. clear: both;
  283. float: none;
  284. padding: 12px 0 0 12px;
  285. background: #fff;
  286. margin: 0;
  287. overflow: hidden;
  288. overflow-y: auto;
  289. min-height: 49px;
  290. max-height: 246px;
  291. }
  292. .iconpicker .iconpicker-items:before,
  293. .iconpicker .iconpicker-items:after {
  294. content: " ";
  295. display: table;
  296. }
  297. .iconpicker .iconpicker-items:after {
  298. clear: both;
  299. }
  300. .iconpicker .iconpicker-item {
  301. float: left;
  302. width: 14px;
  303. height: 14px;
  304. padding: 12px;
  305. margin: 0 12px 12px 0;
  306. text-align: center;
  307. cursor: pointer;
  308. border-radius: 3px;
  309. font-size: 14px;
  310. box-shadow: 0 0 0 1px #dddddd;
  311. color: inherit;
  312. /*&:nth-child(4n+4) {
  313. margin-right: 0;
  314. }
  315. &:nth-last-child(-n+4) {
  316. margin-bottom: 0;
  317. }*/
  318. }
  319. .iconpicker .iconpicker-item:hover:not(.iconpicker-selected) {
  320. background-color: #eeeeee;
  321. }
  322. .iconpicker .iconpicker-item.iconpicker-selected {
  323. box-shadow: none;
  324. color: #fff;
  325. }
  326. .iconpicker-component {
  327. cursor: pointer;
  328. }