Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 
 

469 wiersze
9.3 KiB

  1. fieldset[disabled] .multiselect {
  2. pointer-events: none;
  3. }
  4. .multiselect__spinner {
  5. position: absolute;
  6. right: 1px;
  7. top: 1px;
  8. width: 40px;
  9. height: 38px;
  10. background: #fff;
  11. display: block;
  12. }
  13. .multiselect__spinner::before,
  14. .multiselect__spinner::after {
  15. position: absolute;
  16. content: "";
  17. top: 50%;
  18. left: 50%;
  19. margin: -8px 0 0 -8px;
  20. width: 16px;
  21. height: 16px;
  22. border-radius: 100%;
  23. border-color: #41b883 transparent transparent;
  24. border-style: solid;
  25. border-width: 2px;
  26. box-shadow: 0 0 0 1px transparent;
  27. }
  28. .multiselect__spinner::before {
  29. animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
  30. animation-iteration-count: infinite;
  31. }
  32. .multiselect__spinner::after {
  33. animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
  34. animation-iteration-count: infinite;
  35. }
  36. .multiselect__loading-enter-active,
  37. .multiselect__loading-leave-active {
  38. transition: opacity 0.4s ease-in-out;
  39. opacity: 1;
  40. }
  41. .multiselect__loading-enter,
  42. .multiselect__loading-leave-active {
  43. opacity: 0;
  44. }
  45. .multiselect,
  46. .multiselect__input,
  47. .multiselect__single {
  48. font-family: inherit;
  49. font-size: 16px;
  50. touch-action: manipulation;
  51. }
  52. .multiselect {
  53. box-sizing: content-box;
  54. display: block;
  55. position: relative;
  56. width: 100%;
  57. min-height: 40px;
  58. text-align: left;
  59. color: #35495e;
  60. }
  61. .multiselect * {
  62. box-sizing: border-box;
  63. }
  64. .multiselect:focus {
  65. outline: none;
  66. }
  67. .multiselect--disabled {
  68. background: #ededed;
  69. pointer-events: none;
  70. opacity: 0.6;
  71. }
  72. .multiselect--active {
  73. z-index: 50;
  74. }
  75. .multiselect--active:not(.multiselect--above) .multiselect__current,
  76. .multiselect--active:not(.multiselect--above) .multiselect__input,
  77. .multiselect--active:not(.multiselect--above) .multiselect__tags {
  78. border-bottom-left-radius: 0;
  79. border-bottom-right-radius: 0;
  80. }
  81. .multiselect--active .multiselect__select {
  82. transform: rotateZ(180deg);
  83. }
  84. .multiselect--above.multiselect--active .multiselect__current,
  85. .multiselect--above.multiselect--active .multiselect__input,
  86. .multiselect--above.multiselect--active .multiselect__tags {
  87. border-top-left-radius: 0;
  88. border-top-right-radius: 0;
  89. }
  90. .multiselect__input,
  91. .multiselect__single {
  92. position: relative;
  93. display: inline-block;
  94. min-height: 20px;
  95. line-height: 20px;
  96. border: none;
  97. border-radius: 5px;
  98. background: #fff;
  99. padding: 0 0 0 5px;
  100. width: calc(100%);
  101. transition: border 0.1s ease;
  102. box-sizing: border-box;
  103. margin-bottom: 8px;
  104. vertical-align: top;
  105. }
  106. .multiselect__input::placeholder {
  107. color: #35495e;
  108. }
  109. .multiselect__tag ~ .multiselect__input,
  110. .multiselect__tag ~ .multiselect__single {
  111. width: auto;
  112. }
  113. .multiselect__input:hover,
  114. .multiselect__single:hover {
  115. border-color: #cfcfcf;
  116. }
  117. .multiselect__input:focus,
  118. .multiselect__single:focus {
  119. border-color: #a8a8a8;
  120. outline: none;
  121. }
  122. .multiselect__single {
  123. padding-left: 5px;
  124. margin-bottom: 8px;
  125. }
  126. .multiselect__tags-wrap {
  127. display: inline;
  128. }
  129. .multiselect__tags {
  130. min-height: 40px;
  131. display: block;
  132. padding: 8px 40px 0 8px;
  133. border-radius: 5px;
  134. border: 1px solid #e8e8e8;
  135. background: #fff;
  136. font-size: 14px;
  137. }
  138. .multiselect__tag {
  139. position: relative;
  140. display: inline-block;
  141. padding: 4px 26px 4px 10px;
  142. border-radius: 5px;
  143. margin-right: 10px;
  144. color: #fff;
  145. line-height: 1;
  146. background: #41b883;
  147. margin-bottom: 5px;
  148. white-space: nowrap;
  149. overflow: hidden;
  150. max-width: 100%;
  151. text-overflow: ellipsis;
  152. }
  153. .multiselect__tag-icon {
  154. cursor: pointer;
  155. margin-left: 7px;
  156. position: absolute;
  157. right: 0;
  158. top: 0;
  159. bottom: 0;
  160. font-weight: 700;
  161. font-style: initial;
  162. width: 22px;
  163. text-align: center;
  164. line-height: 22px;
  165. transition: all 0.2s ease;
  166. border-radius: 5px;
  167. }
  168. .multiselect__tag-icon::after {
  169. content: "×";
  170. color: #266d4d;
  171. font-size: 14px;
  172. }
  173. /* // Remove these lines to avoid green closing button
  174. //.multiselect__tag-icon:focus,
  175. //.multiselect__tag-icon:hover {
  176. // background: #369a6e;
  177. //} */
  178. .multiselect__tag-icon:focus::after,
  179. .multiselect__tag-icon:hover::after {
  180. color: white;
  181. }
  182. .multiselect__current {
  183. line-height: 16px;
  184. min-height: 40px;
  185. box-sizing: border-box;
  186. display: block;
  187. overflow: hidden;
  188. padding: 8px 12px 0;
  189. padding-right: 30px;
  190. white-space: nowrap;
  191. margin: 0;
  192. text-decoration: none;
  193. border-radius: 5px;
  194. border: 1px solid #e8e8e8;
  195. cursor: pointer;
  196. }
  197. .multiselect__select {
  198. line-height: 16px;
  199. display: block;
  200. position: absolute;
  201. box-sizing: border-box;
  202. width: 40px;
  203. height: 38px;
  204. right: 1px;
  205. top: 1px;
  206. padding: 4px 8px;
  207. margin: 0;
  208. text-decoration: none;
  209. text-align: center;
  210. cursor: pointer;
  211. transition: transform 0.2s ease;
  212. }
  213. .multiselect__select::before {
  214. position: relative;
  215. right: 0;
  216. top: 65%;
  217. color: #999;
  218. margin-top: 4px;
  219. border-style: solid;
  220. border-width: 5px 5px 0 5px;
  221. border-color: #999 transparent transparent transparent;
  222. content: "";
  223. }
  224. .multiselect__placeholder {
  225. color: #adadad;
  226. display: inline-block;
  227. margin-bottom: 10px;
  228. padding-top: 2px;
  229. }
  230. .multiselect--active .multiselect__placeholder {
  231. display: none;
  232. }
  233. .multiselect__content-wrapper {
  234. position: absolute;
  235. display: block;
  236. background: #fff;
  237. width: 100%;
  238. max-height: 240px;
  239. overflow: auto;
  240. border: 1px solid #e8e8e8;
  241. border-top: none;
  242. border-bottom-left-radius: 5px;
  243. border-bottom-right-radius: 5px;
  244. z-index: 50;
  245. -webkit-overflow-scrolling: touch;
  246. }
  247. .multiselect__content {
  248. list-style: none;
  249. display: inline-block;
  250. padding: 0;
  251. margin: 0;
  252. min-width: 100%;
  253. vertical-align: top;
  254. }
  255. .multiselect--above .multiselect__content-wrapper {
  256. bottom: 100%;
  257. border-bottom-left-radius: 0;
  258. border-bottom-right-radius: 0;
  259. border-top-left-radius: 5px;
  260. border-top-right-radius: 5px;
  261. border-bottom: none;
  262. border-top: 1px solid #e8e8e8;
  263. }
  264. .multiselect__content::-webkit-scrollbar {
  265. display: none;
  266. }
  267. .multiselect__element {
  268. display: block;
  269. }
  270. .multiselect__option {
  271. display: block;
  272. padding: 12px;
  273. min-height: 40px;
  274. line-height: 16px;
  275. text-decoration: none;
  276. text-transform: none;
  277. vertical-align: middle;
  278. position: relative;
  279. cursor: pointer;
  280. white-space: nowrap;
  281. }
  282. .multiselect__option::after {
  283. top: 0;
  284. right: 0;
  285. position: absolute;
  286. line-height: 40px;
  287. padding-right: 12px;
  288. padding-left: 20px;
  289. font-size: 13px;
  290. }
  291. .multiselect__option--highlight {
  292. background: #41b883;
  293. outline: none;
  294. color: white;
  295. }
  296. .multiselect__option--highlight::after {
  297. content: attr(data-select);
  298. background: #41b883;
  299. color: white;
  300. }
  301. .multiselect__option--selected {
  302. background: #f3f3f3;
  303. color: #35495e;
  304. font-weight: bold;
  305. }
  306. .multiselect__option--selected::after {
  307. content: attr(data-selected);
  308. color: silver;
  309. background: inherit;
  310. }
  311. .multiselect__option--selected.multiselect__option--highlight {
  312. background: #ff6a6a;
  313. color: #fff;
  314. }
  315. .multiselect__option--selected.multiselect__option--highlight::after {
  316. background: #ff6a6a;
  317. content: attr(data-deselect);
  318. color: #fff;
  319. }
  320. .multiselect--disabled .multiselect__current,
  321. .multiselect--disabled .multiselect__select {
  322. background: #ededed;
  323. color: #a6a6a6;
  324. }
  325. .multiselect__option--disabled {
  326. background: #ededed !important;
  327. color: #a6a6a6 !important;
  328. cursor: text;
  329. pointer-events: none;
  330. }
  331. .multiselect__option--group {
  332. background: #ededed;
  333. color: #35495e;
  334. }
  335. .multiselect__option--group.multiselect__option--highlight {
  336. background: #35495e;
  337. color: #fff;
  338. }
  339. .multiselect__option--group.multiselect__option--highlight::after {
  340. background: #35495e;
  341. }
  342. .multiselect__option--disabled.multiselect__option--highlight {
  343. background: #dedede;
  344. }
  345. .multiselect__option--group-selected.multiselect__option--highlight {
  346. background: #ff6a6a;
  347. color: #fff;
  348. }
  349. .multiselect__option--group-selected.multiselect__option--highlight::after {
  350. background: #ff6a6a;
  351. content: attr(data-deselect);
  352. color: #fff;
  353. }
  354. .multiselect-enter-active,
  355. .multiselect-leave-active {
  356. transition: all 0.15s ease;
  357. }
  358. .multiselect-enter,
  359. .multiselect-leave-active {
  360. opacity: 0;
  361. }
  362. .multiselect__strong {
  363. margin-bottom: 8px;
  364. line-height: 20px;
  365. display: inline-block;
  366. vertical-align: top;
  367. }
  368. *[dir="rtl"] .multiselect {
  369. text-align: right;
  370. }
  371. *[dir="rtl"] .multiselect__select {
  372. right: auto;
  373. left: 1px;
  374. }
  375. *[dir="rtl"] .multiselect__tags {
  376. padding: 8px 8px 0 40px;
  377. }
  378. *[dir="rtl"] .multiselect__content {
  379. text-align: right;
  380. }
  381. *[dir="rtl"] .multiselect__option::after {
  382. right: auto;
  383. left: 0;
  384. }
  385. *[dir="rtl"] .multiselect__clear {
  386. right: auto;
  387. left: 12px;
  388. }
  389. *[dir="rtl"] .multiselect__spinner {
  390. right: auto;
  391. left: 1px;
  392. }
  393. @keyframes spinning {
  394. from {
  395. transform: rotate(0);
  396. }
  397. to {
  398. transform: rotate(2turn);
  399. }
  400. }