Nessuna descrizione

bootstrap-select.less 9.1KB

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