bootstrap-select.less 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467
  1. @import "variables";
  2. // Mixins
  3. .cursor-disabled() {
  4. cursor: not-allowed;
  5. }
  6. // Rules
  7. select.bs-select-hidden,
  8. .bootstrap-select > select.bs-select-hidden,
  9. select.selectpicker {
  10. display: none !important;
  11. }
  12. .bootstrap-select {
  13. width: 220px \0; /*IE9 and below*/
  14. vertical-align: middle;
  15. // The selectpicker button
  16. > .dropdown-toggle {
  17. position: relative;
  18. width: 100%;
  19. z-index: 1;
  20. // necessary for proper positioning of caret in Bootstrap 4 (pushes caret to the right)
  21. text-align: right;
  22. white-space: nowrap;
  23. &.bs-placeholder {
  24. &,
  25. &:hover,
  26. &:focus,
  27. &:active {
  28. color: @input-color-placeholder;
  29. }
  30. &.btn-primary,
  31. &.btn-secondary,
  32. &.btn-success,
  33. &.btn-danger,
  34. &.btn-info,
  35. &.btn-dark {
  36. &,
  37. &:hover,
  38. &:focus,
  39. &:active {
  40. color: @input-alt-color-placeholder;
  41. }
  42. }
  43. }
  44. }
  45. > select {
  46. position: absolute !important;
  47. bottom: 0;
  48. left: 50%;
  49. display: block !important;
  50. width: 0.5px !important;
  51. height: 100% !important;
  52. padding: 0 !important;
  53. opacity: 0 !important;
  54. border: none;
  55. &.mobile-device {
  56. top: 0;
  57. left: 0;
  58. display: block !important;
  59. width: 100% !important;
  60. z-index: 2;
  61. }
  62. }
  63. // Error display
  64. .has-error & .dropdown-toggle,
  65. .error & .dropdown-toggle,
  66. &.is-invalid .dropdown-toggle,
  67. .was-validated & .selectpicker:invalid + .dropdown-toggle {
  68. border-color: @color-red-error;
  69. }
  70. &.is-valid .dropdown-toggle,
  71. .was-validated & .selectpicker:valid + .dropdown-toggle {
  72. border-color: @color-green-success;
  73. }
  74. &.fit-width {
  75. width: auto !important;
  76. }
  77. &:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  78. width: @width-default;
  79. }
  80. > select.mobile-device:focus + .dropdown-toggle,
  81. .dropdown-toggle:focus {
  82. outline: thin dotted #333333 !important;
  83. outline: 5px auto -webkit-focus-ring-color !important;
  84. outline-offset: -2px;
  85. }
  86. }
  87. .bootstrap-select.form-control {
  88. margin-bottom: 0;
  89. padding: 0;
  90. border: none;
  91. :not(.input-group) > &:not([class*="col-"]) {
  92. width: 100%;
  93. }
  94. &.input-group-btn {
  95. z-index: auto;
  96. &:not(:first-child):not(:last-child) {
  97. > .btn {
  98. border-radius: 0;
  99. }
  100. }
  101. }
  102. }
  103. // The selectpicker components
  104. .bootstrap-select {
  105. &:not(.input-group-btn),
  106. &[class*="col-"] {
  107. float: none;
  108. display: inline-block;
  109. margin-left: 0;
  110. }
  111. // Forces the pull to the right, if necessary
  112. &,
  113. &[class*="col-"],
  114. .row &[class*="col-"] {
  115. &.dropdown-menu-right {
  116. float: right;
  117. }
  118. }
  119. .form-inline &,
  120. .form-horizontal &,
  121. .form-group & {
  122. margin-bottom: 0;
  123. }
  124. .form-group-lg &.form-control,
  125. .form-group-sm &.form-control {
  126. padding: 0;
  127. .dropdown-toggle {
  128. height: 100%;
  129. font-size: inherit;
  130. line-height: inherit;
  131. border-radius: inherit;
  132. }
  133. }
  134. &.form-control-sm .dropdown-toggle,
  135. &.form-control-lg .dropdown-toggle {
  136. font-size: inherit;
  137. line-height: inherit;
  138. border-radius: inherit;
  139. }
  140. &.form-control-sm .dropdown-toggle {
  141. padding: @input-padding-y-sm @input-padding-x-sm;
  142. }
  143. &.form-control-lg .dropdown-toggle {
  144. padding: @input-padding-y-lg @input-padding-x-lg;
  145. }
  146. // Set the width of the live search (and any other form control within an inline form)
  147. // see https://github.com/silviomoreto/bootstrap-select/issues/685
  148. .form-inline & .form-control {
  149. width: 100%;
  150. }
  151. &.disabled,
  152. > .disabled {
  153. .cursor-disabled();
  154. &:focus {
  155. outline: none !important;
  156. }
  157. }
  158. &.bs-container {
  159. position: absolute;
  160. top: 0;
  161. left: 0;
  162. height: 0 !important;
  163. padding: 0 !important;
  164. .dropdown-menu {
  165. z-index: @zindex-select-dropdown;
  166. }
  167. }
  168. // The selectpicker button
  169. .dropdown-toggle {
  170. // necessary to maintain proper button height with Bootstrap 3
  171. &:before {
  172. content: '';
  173. display: inline-block;
  174. }
  175. .filter-option {
  176. position: absolute;
  177. top: 0;
  178. left: 0;
  179. padding-top: inherit;
  180. padding-right: inherit;
  181. padding-bottom: inherit; // needed for proper alignment of show-menu-arrow (deprecated)
  182. padding-left: inherit;
  183. height: 100%;
  184. width: 100%;
  185. text-align: left;
  186. }
  187. .filter-option-inner {
  188. padding-right: inherit;
  189. }
  190. .filter-option-inner-inner {
  191. overflow: hidden;
  192. }
  193. .caret {
  194. position: absolute;
  195. top: 50%;
  196. right: 12px;
  197. margin-top: -2px;
  198. vertical-align: middle;
  199. }
  200. }
  201. .input-group &.form-control .dropdown-toggle {
  202. border-radius: inherit;
  203. }
  204. &[class*="col-"] .dropdown-toggle {
  205. width: 100%;
  206. }
  207. // The selectpicker dropdown
  208. .dropdown-menu {
  209. min-width: 100%;
  210. box-sizing: border-box;
  211. > .inner:focus {
  212. outline: none !important;
  213. }
  214. &.inner {
  215. position: static;
  216. float: none;
  217. border: 0;
  218. padding: 0;
  219. margin: 0;
  220. border-radius: 0;
  221. box-shadow: none;
  222. }
  223. li {
  224. position: relative;
  225. &.active small {
  226. color: @input-alt-color-placeholder !important;
  227. }
  228. &.disabled a {
  229. .cursor-disabled();
  230. }
  231. a {
  232. cursor: pointer;
  233. user-select: none;
  234. &.opt {
  235. position: relative;
  236. padding-left: 2.25em;
  237. }
  238. span.check-mark {
  239. display: none;
  240. }
  241. span.text {
  242. display: inline-block;
  243. }
  244. }
  245. small {
  246. padding-left: 0.5em;
  247. }
  248. }
  249. .notify {
  250. position: absolute;
  251. bottom: 5px;
  252. width: 96%;
  253. margin: 0 2%;
  254. min-height: 26px;
  255. padding: 3px 5px;
  256. background: rgb(245, 245, 245);
  257. border: 1px solid rgb(227, 227, 227);
  258. box-shadow: inset 0 1px 1px fade(rgb(0, 0, 0), 5%);
  259. pointer-events: none;
  260. opacity: 0.9;
  261. box-sizing: border-box;
  262. }
  263. }
  264. .no-results {
  265. padding: 3px;
  266. background: #f5f5f5;
  267. margin: 0 5px;
  268. white-space: nowrap;
  269. }
  270. &.fit-width .dropdown-toggle {
  271. .filter-option {
  272. position: static;
  273. display: inline;
  274. padding: 0;
  275. }
  276. .filter-option-inner,
  277. .filter-option-inner-inner {
  278. display: inline;
  279. }
  280. .caret {
  281. position: static;
  282. top: auto;
  283. margin-top: -1px;
  284. }
  285. }
  286. &.show-tick .dropdown-menu {
  287. .selected span.check-mark {
  288. position: absolute;
  289. display: inline-block;
  290. right: 15px;
  291. top: 5px;
  292. }
  293. li a span.text {
  294. margin-right: 34px;
  295. }
  296. }
  297. // default check mark for use without an icon font
  298. .bs-ok-default:after {
  299. content: '';
  300. display: block;
  301. width: 0.5em;
  302. height: 1em;
  303. border-style: solid;
  304. border-width: 0 0.26em 0.26em 0;
  305. transform: rotate(45deg);
  306. }
  307. }
  308. .bootstrap-select.show-menu-arrow {
  309. &.open > .dropdown-toggle,
  310. &.show > .dropdown-toggle {
  311. z-index: (@zindex-select-dropdown + 1);
  312. }
  313. .dropdown-toggle .filter-option {
  314. &:before {
  315. content: '';
  316. border-left: 7px solid transparent;
  317. border-right: 7px solid transparent;
  318. border-bottom: 7px solid @color-grey-arrow;
  319. position: absolute;
  320. bottom: -4px;
  321. left: 9px;
  322. display: none;
  323. }
  324. &:after {
  325. content: '';
  326. border-left: 6px solid transparent;
  327. border-right: 6px solid transparent;
  328. border-bottom: 6px solid white;
  329. position: absolute;
  330. bottom: -4px;
  331. left: 10px;
  332. display: none;
  333. }
  334. }
  335. &.dropup .dropdown-toggle .filter-option {
  336. &:before {
  337. bottom: auto;
  338. top: -4px;
  339. border-top: 7px solid @color-grey-arrow;
  340. border-bottom: 0;
  341. }
  342. &:after {
  343. bottom: auto;
  344. top: -4px;
  345. border-top: 6px solid white;
  346. border-bottom: 0;
  347. }
  348. }
  349. &.pull-right .dropdown-toggle .filter-option {
  350. &:before {
  351. right: 12px;
  352. left: auto;
  353. }
  354. &:after {
  355. right: 13px;
  356. left: auto;
  357. }
  358. }
  359. &.open > .dropdown-toggle .filter-option,
  360. &.show > .dropdown-toggle .filter-option {
  361. &:before,
  362. &:after {
  363. display: block;
  364. }
  365. }
  366. }
  367. .bs-searchbox,
  368. .bs-actionsbox,
  369. .bs-donebutton {
  370. padding: 4px 8px;
  371. }
  372. .bs-actionsbox {
  373. width: 100%;
  374. box-sizing: border-box;
  375. & .btn-group button {
  376. width: 50%;
  377. }
  378. }
  379. .bs-donebutton {
  380. float: left;
  381. width: 100%;
  382. box-sizing: border-box;
  383. & .btn-group button {
  384. width: 100%;
  385. }
  386. }
  387. .bs-searchbox {
  388. & + .bs-actionsbox {
  389. padding: 0 8px 4px;
  390. }
  391. & .form-control {
  392. margin-bottom: 0;
  393. width: 100%;
  394. float: none;
  395. }
  396. }