thirdparty-chosen.less 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  1. .enable_plugin_chosen() when(@enable-plugin-chosen = true) {
  2. .chosen-container + .help-inline {
  3. vertical-align:middle;
  4. }
  5. //chosen select boxes -- replace icons with FontAwesome
  6. /**
  7. .chosen-select {
  8. display: inline !important; //for validation plugin to work it must be displayed
  9. visibility: hidden;
  10. opacity: 0;
  11. position: absolute;
  12. z-index: -1;
  13. width: 0;
  14. height: 0;
  15. border-width: 0;
  16. }
  17. */
  18. .chosen-container , [class*="chosen-container"]{
  19. vertical-align: middle;
  20. > .chosen-single {
  21. line-height: 28px;
  22. height: 32px;
  23. box-shadow: none;
  24. background: #FAFAFA;
  25. }
  26. }
  27. .chosen-choices {
  28. box-shadow:none !important;
  29. }
  30. .chosen-container-single .chosen-single abbr {
  31. background: none;
  32. }
  33. .chosen-container-single .chosen-single abbr:after {
  34. content:"\f00d";
  35. display: inline-block;
  36. color:#888;
  37. font-family: FontAwesome;
  38. font-size: 13px;
  39. position: absolute;
  40. right: 0;
  41. top: -7px;
  42. }
  43. .chosen-container-single .chosen-single abbr:hover:after {
  44. color:#464646;
  45. }
  46. .chosen-container-single.chosen-disabled .chosen-single abbr:hover:after {
  47. color:#464646;
  48. }
  49. .chosen-single div b {
  50. background: none !important;
  51. &:before {
  52. content: "\f0d7";
  53. display: inline-block;
  54. color: #888;
  55. font-family: FontAwesome;
  56. font-size: 12px;
  57. position:relative; top:-1px; left:1px;
  58. }
  59. }
  60. .chosen-container-active.chosen-with-drop .chosen-single div b:before {
  61. content:"\f0d8";
  62. }
  63. .chosen-container-single {
  64. .chosen-search {
  65. position:relative;
  66. input[type="text"] {
  67. background:none;
  68. border-radius:0;
  69. line-height:28px;
  70. height:28px;
  71. }
  72. &:after{
  73. content:"\f002";
  74. display:inline-block;
  75. color: #888;
  76. font-family: FontAwesome;
  77. font-size:14px;
  78. position:absolute;
  79. top:8px;
  80. right:12px;
  81. }
  82. }
  83. }
  84. .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  85. height:25px;
  86. }
  87. .chosen-container-multi .chosen-choices li.search-choice {
  88. line-height: 16px;
  89. padding-bottom: 4px;
  90. }
  91. .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  92. background:none;
  93. &:before {
  94. content:"\f00d";
  95. display: inline-block;
  96. color:#888;
  97. font-family:FontAwesome;
  98. font-size:13px;
  99. position: absolute;
  100. right: 2px; top: -1px;
  101. }
  102. &:hover {
  103. text-decoration:none;
  104. }
  105. &:hover:before {
  106. color:#464646;
  107. }
  108. }
  109. .chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close:before {
  110. color:#464646;
  111. }
  112. .chosen-container .chosen-results-scroll-down ,
  113. .chosen-container .chosen-results-scroll-up {
  114. span {
  115. background: none;
  116. &:before{
  117. content: "\f0d7";
  118. display: inline-block;
  119. color: #888;
  120. font-family: FontAwesome;
  121. font-size: 12px;
  122. position:relative; top:-1px; left:1px;
  123. }
  124. }
  125. }
  126. .chosen-container .chosen-results-scroll-up span:before {
  127. content:"\f0d8";
  128. }
  129. .chosen-container-active .chosen-single-with-drop div b:before {
  130. content:"\f0d8";
  131. }
  132. .chosen-rtl .chosen-search {
  133. input[type="text"] {
  134. background: none;
  135. }
  136. &:after {
  137. content:"";
  138. display:none;
  139. }
  140. &:before {
  141. content: "\f002";
  142. display: inline-block;
  143. color: #888;
  144. font-family: FontAwesome;
  145. font-size: 14px;
  146. position:absolute; top:9px; left:12px;
  147. }
  148. }
  149. /** chosen - etc */
  150. .chosen-container-single .chosen-single {
  151. border-radius:0;
  152. }
  153. .chosen-container .chosen-results li.highlighted {
  154. // background:#86BD6F;/* green */
  155. //background:#4492C9;/* blue1 */
  156. background:#316AC5;
  157. color: #FFF;
  158. }
  159. .chosen-container-single .chosen-drop {
  160. border-radius:0;
  161. border-bottom:3px solid #4492C9;
  162. border-color:#4492C9;
  163. }
  164. .chosen-single.chosen-single-with-drop , .chosen-container-active .chosen-single{
  165. border-color:#4492C9;
  166. }
  167. .chosen-single {
  168. .form-group.has-error & {
  169. border-color:@error-state-border !important;
  170. }
  171. .form-group.has-info & {
  172. border-color:@info-state-border !important;
  173. }
  174. .form-group.has-warning & {
  175. border-color:@warning-state-border !important;
  176. }
  177. .form-group.has-success & {
  178. border-color:@success-state-border !important;
  179. }
  180. }
  181. //.chosen-rtl .chosen-container-single-nosearch .chosen-search { left: -9999px; }
  182. //.chosen-rtl .chosen-drop { left: -9999px; }
  183. // .modal .chosen-rtl .chosen-container-single-nosearch .chosen-search { left: 9999px; }
  184. // .modal .chosen-rtl .chosen-drop { left: 9999px; }
  185. //.rtl .modal .chosen-container.chosen-with-drop .chosen-drop { left: auto; right: 0; }
  186. .chosen-container-active.chosen-with-drop .chosen-single {
  187. border-color:#4492C9;
  188. }
  189. .chosen-container .chosen-drop {
  190. display: none;
  191. }
  192. .chosen-container.chosen-with-drop .chosen-drop {
  193. left: auto;
  194. right: auto;
  195. display: block;
  196. }
  197. @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) {
  198. .chosen-rtl .chosen-search input[type="text"], .chosen-container-single .chosen-single abbr, .chosen-container-single .chosen-single div b, .chosen-container-single .chosen-search input[type="text"], .chosen-container-multi .chosen-choices li.search-choice .search-choice-close, .chosen-container .chosen-results-scroll-down span, .chosen-container .chosen-results-scroll-up span {
  199. background-image: none !important;
  200. background-repeat: no-repeat !important;
  201. background-size: auto !important;
  202. }
  203. }
  204. //a second style (like tag inpit)
  205. .enable_plugin_chosen_style_2() when(@enable-plugin-chosen-style-2 = true) {
  206. .tag-input-style + .chosen-container-multi {
  207. .chosen-choices li.search-choice {
  208. background-image:none;
  209. background-color:@tag-bg;
  210. color: #FFFFFF;
  211. display: inline-block;
  212. font-size: @baseFontSize;
  213. font-weight: normal;
  214. margin-bottom: 3px;
  215. margin-right: 3px;
  216. padding: 6px 22px 7px 9px;
  217. position: relative;
  218. text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
  219. transition: all 0.2s ease 0s;
  220. vertical-align: baseline;
  221. white-space: nowrap;
  222. border:none;
  223. .box-shadow(none);
  224. .border-radius(0);
  225. .search-choice-close {
  226. position:absolute;
  227. top:0; bottom:0;
  228. right:0;
  229. width:18px;
  230. height:auto;
  231. line-height:25px;
  232. text-align:center;
  233. &:before {
  234. color:#FFF;
  235. position:static;
  236. font-size:11px;
  237. }
  238. &:hover {
  239. background-color:rgba(0,0,0,0.2);
  240. &:before {
  241. color:#FFF;
  242. }
  243. }
  244. }
  245. }
  246. }
  247. .tag-input-style + .chosen-container-multi.chosen-rtl {
  248. .chosen-choices li.search-choice {
  249. padding: 6px 9px 7px 22px;
  250. margin-left: 0;
  251. margin-right:3px !important;//to override .RTL's
  252. .search-choice-close {
  253. right:auto;
  254. left:0;
  255. }
  256. }
  257. }
  258. }
  259. .enable_plugin_chosen_style_2();
  260. }
  261. .enable_plugin_chosen();