@syncfusion/ej2-dropdowns 23.1.38 → 23.1.40-85814

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (306) hide show
  1. package/CHANGELOG.md +2042 -2034
  2. package/{README.md → ReadMe.md} +217 -217
  3. package/dist/ej2-dropdowns.umd.min.js +1 -10
  4. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-dropdowns.es2015.js +60 -57
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +202 -199
  8. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  9. package/dist/global/ej2-dropdowns.min.js +1 -10
  10. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  11. package/dist/global/index.d.ts +0 -9
  12. package/dist/ts/auto-complete/auto-complete.ts +615 -0
  13. package/dist/ts/combo-box/combo-box.ts +1028 -0
  14. package/dist/ts/common/highlight-search.ts +57 -0
  15. package/dist/ts/common/incremental-search.ts +131 -0
  16. package/dist/ts/common/interface.ts +72 -0
  17. package/dist/ts/common/virtual-scroll.ts +354 -0
  18. package/dist/ts/drop-down-base/drop-down-base.ts +1838 -0
  19. package/dist/ts/drop-down-list/drop-down-list.ts +3889 -0
  20. package/dist/ts/drop-down-tree/drop-down-tree.ts +3750 -0
  21. package/dist/ts/list-box/list-box.ts +2736 -0
  22. package/dist/ts/mention/mention.ts +1828 -0
  23. package/dist/ts/multi-select/checkbox-selection.ts +547 -0
  24. package/dist/ts/multi-select/float-label.ts +176 -0
  25. package/dist/ts/multi-select/interface.ts +70 -0
  26. package/dist/ts/multi-select/multi-select.ts +4874 -0
  27. package/helpers/e2e/autocomplete.js +13 -13
  28. package/helpers/e2e/combobox.js +13 -13
  29. package/helpers/e2e/dropdownlist.js +13 -13
  30. package/helpers/e2e/index.js +3 -3
  31. package/helpers/e2e/listboxHelper.js +13 -13
  32. package/helpers/e2e/multiselect.js +13 -13
  33. package/license +2 -2
  34. package/package.json +79 -79
  35. package/src/auto-complete/auto-complete-model.d.ts +188 -188
  36. package/src/auto-complete/auto-complete.d.ts +12 -12
  37. package/src/auto-complete/auto-complete.js +21 -21
  38. package/src/combo-box/combo-box-model.d.ts +224 -224
  39. package/src/combo-box/combo-box.d.ts +27 -27
  40. package/src/combo-box/combo-box.js +29 -29
  41. package/src/common/virtual-scroll.js +46 -46
  42. package/src/drop-down-base/drop-down-base-model.d.ts +200 -200
  43. package/src/drop-down-base/drop-down-base.d.ts +15 -15
  44. package/src/drop-down-base/drop-down-base.js +20 -20
  45. package/src/drop-down-list/drop-down-list-model.d.ts +202 -202
  46. package/src/drop-down-list/drop-down-list.d.ts +4 -4
  47. package/src/drop-down-list/drop-down-list.js +24 -21
  48. package/src/drop-down-tree/drop-down-tree-model.d.ts +468 -468
  49. package/src/drop-down-tree/drop-down-tree.js +19 -19
  50. package/src/list-box/list-box-model.d.ts +193 -193
  51. package/src/list-box/list-box.d.ts +2 -2
  52. package/src/list-box/list-box.js +19 -19
  53. package/src/mention/mention-model.d.ts +261 -261
  54. package/src/mention/mention.js +19 -19
  55. package/src/multi-select/multi-select-model.d.ts +512 -512
  56. package/src/multi-select/multi-select.js +19 -19
  57. package/styles/auto-complete/_all.scss +1 -1
  58. package/styles/auto-complete/_bootstrap-dark-definition.scss +3 -3
  59. package/styles/auto-complete/_bootstrap-definition.scss +2 -2
  60. package/styles/auto-complete/_bootstrap4-definition.scss +11 -11
  61. package/styles/auto-complete/_bootstrap5-definition.scss +2 -2
  62. package/styles/auto-complete/_fabric-dark-definition.scss +2 -2
  63. package/styles/auto-complete/_fabric-definition.scss +2 -2
  64. package/styles/auto-complete/_fluent-definition.scss +2 -2
  65. package/styles/auto-complete/_fusionnew-definition.scss +2 -2
  66. package/styles/auto-complete/_highcontrast-definition.scss +2 -2
  67. package/styles/auto-complete/_highcontrast-light-definition.scss +2 -2
  68. package/styles/auto-complete/_material-dark-definition.scss +2 -2
  69. package/styles/auto-complete/_material-definition.scss +2 -2
  70. package/styles/auto-complete/_material3-definition.scss +2 -2
  71. package/styles/auto-complete/_tailwind-definition.scss +2 -2
  72. package/styles/auto-complete/bootstrap4.css +13 -2
  73. package/styles/auto-complete/material3-dark.scss +1 -1
  74. package/styles/auto-complete/material3.scss +1 -1
  75. package/styles/bootstrap-dark.css +12 -1
  76. package/styles/bootstrap.css +12 -1
  77. package/styles/bootstrap4.css +44 -3
  78. package/styles/bootstrap5-dark.css +12 -1
  79. package/styles/bootstrap5.css +12 -1
  80. package/styles/combo-box/_all.scss +1 -1
  81. package/styles/combo-box/_bootstrap-dark-definition.scss +2 -2
  82. package/styles/combo-box/_bootstrap-definition.scss +2 -2
  83. package/styles/combo-box/_bootstrap4-definition.scss +11 -11
  84. package/styles/combo-box/_bootstrap5-definition.scss +2 -2
  85. package/styles/combo-box/_fabric-dark-definition.scss +2 -2
  86. package/styles/combo-box/_fabric-definition.scss +2 -2
  87. package/styles/combo-box/_fluent-definition.scss +2 -2
  88. package/styles/combo-box/_fusionnew-definition.scss +2 -2
  89. package/styles/combo-box/_highcontrast-definition.scss +2 -2
  90. package/styles/combo-box/_highcontrast-light-definition.scss +3 -3
  91. package/styles/combo-box/_material-dark-definition.scss +2 -2
  92. package/styles/combo-box/_material-definition.scss +2 -2
  93. package/styles/combo-box/_material3-definition.scss +2 -2
  94. package/styles/combo-box/_tailwind-definition.scss +2 -2
  95. package/styles/combo-box/bootstrap4.css +13 -2
  96. package/styles/combo-box/material3-dark.scss +1 -1
  97. package/styles/combo-box/material3.scss +1 -1
  98. package/styles/drop-down-base/_all.scss +2 -2
  99. package/styles/drop-down-base/_bootstrap-dark-definition.scss +83 -83
  100. package/styles/drop-down-base/_bootstrap-definition.scss +83 -83
  101. package/styles/drop-down-base/_bootstrap4-definition.scss +90 -90
  102. package/styles/drop-down-base/_bootstrap5-definition.scss +117 -117
  103. package/styles/drop-down-base/_definition.scss +23 -23
  104. package/styles/drop-down-base/_fabric-dark-definition.scss +86 -86
  105. package/styles/drop-down-base/_fabric-definition.scss +84 -84
  106. package/styles/drop-down-base/_fluent-definition.scss +121 -121
  107. package/styles/drop-down-base/_fusionnew-definition.scss +117 -117
  108. package/styles/drop-down-base/_highcontrast-definition.scss +105 -105
  109. package/styles/drop-down-base/_highcontrast-light-definition.scss +105 -105
  110. package/styles/drop-down-base/_layout.scss +195 -195
  111. package/styles/drop-down-base/_material-dark-definition.scss +86 -86
  112. package/styles/drop-down-base/_material-definition.scss +85 -85
  113. package/styles/drop-down-base/_material3-definition.scss +87 -87
  114. package/styles/drop-down-base/_tailwind-definition.scss +129 -129
  115. package/styles/drop-down-base/_theme.scss +391 -391
  116. package/styles/drop-down-base/material3-dark.scss +1 -1
  117. package/styles/drop-down-base/material3.scss +1 -1
  118. package/styles/drop-down-list/_all.scss +3 -3
  119. package/styles/drop-down-list/_bootstrap-dark-definition.scss +157 -157
  120. package/styles/drop-down-list/_bootstrap-definition.scss +156 -156
  121. package/styles/drop-down-list/_bootstrap4-definition.scss +202 -191
  122. package/styles/drop-down-list/_bootstrap5-definition.scss +201 -201
  123. package/styles/drop-down-list/_fabric-dark-definition.scss +128 -128
  124. package/styles/drop-down-list/_fabric-definition.scss +124 -124
  125. package/styles/drop-down-list/_fluent-definition.scss +185 -185
  126. package/styles/drop-down-list/_fusionnew-definition.scss +201 -201
  127. package/styles/drop-down-list/_highcontrast-definition.scss +142 -142
  128. package/styles/drop-down-list/_highcontrast-light-definition.scss +144 -144
  129. package/styles/drop-down-list/_layout.scss +310 -310
  130. package/styles/drop-down-list/_material-dark-definition.scss +143 -143
  131. package/styles/drop-down-list/_material-definition.scss +167 -167
  132. package/styles/drop-down-list/_material3-definition.scss +180 -180
  133. package/styles/drop-down-list/_tailwind-definition.scss +134 -134
  134. package/styles/drop-down-list/_theme.scss +10 -10
  135. package/styles/drop-down-list/bootstrap4.css +13 -2
  136. package/styles/drop-down-list/icons/_bootstrap-dark.scss +14 -14
  137. package/styles/drop-down-list/icons/_bootstrap.scss +14 -14
  138. package/styles/drop-down-list/icons/_bootstrap4.scss +14 -14
  139. package/styles/drop-down-list/icons/_bootstrap5.scss +14 -14
  140. package/styles/drop-down-list/icons/_fabric-dark.scss +14 -14
  141. package/styles/drop-down-list/icons/_fabric.scss +14 -14
  142. package/styles/drop-down-list/icons/_fluent.scss +14 -14
  143. package/styles/drop-down-list/icons/_fusionnew.scss +14 -14
  144. package/styles/drop-down-list/icons/_highcontrast-light.scss +14 -14
  145. package/styles/drop-down-list/icons/_highcontrast.scss +14 -14
  146. package/styles/drop-down-list/icons/_material-dark.scss +14 -14
  147. package/styles/drop-down-list/icons/_material.scss +14 -14
  148. package/styles/drop-down-list/icons/_material3.scss +14 -14
  149. package/styles/drop-down-list/icons/_tailwind.scss +14 -14
  150. package/styles/drop-down-list/material3-dark.scss +1 -1
  151. package/styles/drop-down-list/material3.scss +1 -1
  152. package/styles/drop-down-tree/_all.scss +2 -2
  153. package/styles/drop-down-tree/_bootstrap-dark-definition.scss +71 -71
  154. package/styles/drop-down-tree/_bootstrap-definition.scss +70 -70
  155. package/styles/drop-down-tree/_bootstrap4-definition.scss +71 -71
  156. package/styles/drop-down-tree/_bootstrap5-definition.scss +59 -59
  157. package/styles/drop-down-tree/_fabric-dark-definition.scss +71 -71
  158. package/styles/drop-down-tree/_fabric-definition.scss +71 -71
  159. package/styles/drop-down-tree/_fluent-definition.scss +65 -65
  160. package/styles/drop-down-tree/_fusionnew-definition.scss +59 -59
  161. package/styles/drop-down-tree/_highcontrast-definition.scss +71 -71
  162. package/styles/drop-down-tree/_highcontrast-light-definition.scss +71 -71
  163. package/styles/drop-down-tree/_layout.scss +1418 -1412
  164. package/styles/drop-down-tree/_material-dark-definition.scss +72 -72
  165. package/styles/drop-down-tree/_material-definition.scss +72 -72
  166. package/styles/drop-down-tree/_material3-definition.scss +76 -76
  167. package/styles/drop-down-tree/_tailwind-definition.scss +61 -61
  168. package/styles/drop-down-tree/_theme.scss +132 -132
  169. package/styles/drop-down-tree/fluent-dark.css +2 -0
  170. package/styles/drop-down-tree/fluent.css +2 -0
  171. package/styles/drop-down-tree/icons/_bootstrap-dark.scss +11 -11
  172. package/styles/drop-down-tree/icons/_bootstrap.scss +11 -11
  173. package/styles/drop-down-tree/icons/_bootstrap4.scss +11 -11
  174. package/styles/drop-down-tree/icons/_bootstrap5.scss +11 -11
  175. package/styles/drop-down-tree/icons/_fabric-dark.scss +11 -11
  176. package/styles/drop-down-tree/icons/_fabric.scss +11 -11
  177. package/styles/drop-down-tree/icons/_fluent.scss +11 -11
  178. package/styles/drop-down-tree/icons/_fusionnew.scss +11 -11
  179. package/styles/drop-down-tree/icons/_highcontrast-light.scss +11 -11
  180. package/styles/drop-down-tree/icons/_highcontrast.scss +11 -11
  181. package/styles/drop-down-tree/icons/_material-dark.scss +11 -11
  182. package/styles/drop-down-tree/icons/_material.scss +11 -11
  183. package/styles/drop-down-tree/icons/_material3.scss +11 -11
  184. package/styles/drop-down-tree/icons/_tailwind-dark.scss +11 -11
  185. package/styles/drop-down-tree/icons/_tailwind.scss +11 -11
  186. package/styles/drop-down-tree/material3-dark.scss +1 -1
  187. package/styles/drop-down-tree/material3.scss +1 -1
  188. package/styles/fabric-dark.css +13 -2
  189. package/styles/fabric.css +13 -2
  190. package/styles/fluent-dark.css +14 -1
  191. package/styles/fluent.css +14 -1
  192. package/styles/highcontrast-light.css +12 -1
  193. package/styles/highcontrast.css +12 -1
  194. package/styles/list-box/_all.scss +2 -2
  195. package/styles/list-box/_bootstrap-dark-definition.scss +126 -126
  196. package/styles/list-box/_bootstrap-definition.scss +119 -119
  197. package/styles/list-box/_bootstrap4-definition.scss +124 -124
  198. package/styles/list-box/_bootstrap5-definition.scss +120 -120
  199. package/styles/list-box/_fabric-dark-definition.scss +126 -126
  200. package/styles/list-box/_fabric-definition.scss +119 -119
  201. package/styles/list-box/_fluent-definition.scss +120 -120
  202. package/styles/list-box/_fusionnew-definition.scss +111 -111
  203. package/styles/list-box/_highcontrast-definition.scss +119 -119
  204. package/styles/list-box/_highcontrast-light-definition.scss +126 -126
  205. package/styles/list-box/_layout.scss +542 -542
  206. package/styles/list-box/_material-dark-definition.scss +126 -126
  207. package/styles/list-box/_material-definition.scss +119 -119
  208. package/styles/list-box/_material3-definition.scss +119 -119
  209. package/styles/list-box/_tailwind-definition.scss +119 -119
  210. package/styles/list-box/_theme.scss +382 -382
  211. package/styles/list-box/icons/_bootstrap-dark.scss +25 -25
  212. package/styles/list-box/icons/_bootstrap.scss +25 -25
  213. package/styles/list-box/icons/_bootstrap4.scss +25 -25
  214. package/styles/list-box/icons/_bootstrap5.scss +25 -25
  215. package/styles/list-box/icons/_fabric-dark.scss +25 -25
  216. package/styles/list-box/icons/_fabric.scss +25 -25
  217. package/styles/list-box/icons/_fluent.scss +25 -25
  218. package/styles/list-box/icons/_fusionnew.scss +25 -25
  219. package/styles/list-box/icons/_highcontrast-light.scss +25 -25
  220. package/styles/list-box/icons/_highcontrast.scss +25 -25
  221. package/styles/list-box/icons/_material-dark.scss +25 -25
  222. package/styles/list-box/icons/_material.scss +25 -25
  223. package/styles/list-box/icons/_material3.scss +25 -25
  224. package/styles/list-box/icons/_tailwind-dark.scss +25 -25
  225. package/styles/list-box/icons/_tailwind.scss +25 -25
  226. package/styles/list-box/material3-dark.scss +1 -1
  227. package/styles/list-box/material3.scss +1 -1
  228. package/styles/material-dark.css +12 -1
  229. package/styles/material.css +12 -1
  230. package/styles/material3-dark.css +10 -0
  231. package/styles/material3-dark.scss +1 -1
  232. package/styles/material3.css +10 -0
  233. package/styles/material3.scss +1 -1
  234. package/styles/mention/_all.scss +1 -1
  235. package/styles/mention/_bootstrap-dark-definition.scss +3 -3
  236. package/styles/mention/_bootstrap-definition.scss +3 -3
  237. package/styles/mention/_bootstrap4-definition.scss +3 -3
  238. package/styles/mention/_bootstrap5-definition.scss +1 -1
  239. package/styles/mention/_fabric-dark-definition.scss +2 -2
  240. package/styles/mention/_fabric-definition.scss +3 -3
  241. package/styles/mention/_fluent-definition.scss +1 -1
  242. package/styles/mention/_fusionnew-definition.scss +1 -1
  243. package/styles/mention/_highcontrast-definition.scss +3 -3
  244. package/styles/mention/_highcontrast-light-definition.scss +3 -3
  245. package/styles/mention/_layout.scss +6 -6
  246. package/styles/mention/_material-dark-definition.scss +3 -3
  247. package/styles/mention/_material-definition.scss +3 -3
  248. package/styles/mention/_material3-definition.scss +1 -1
  249. package/styles/mention/_tailwind-definition.scss +1 -1
  250. package/styles/mention/material3-dark.scss +1 -1
  251. package/styles/mention/material3.scss +1 -1
  252. package/styles/multi-select/_all.scss +2 -2
  253. package/styles/multi-select/_bootstrap-dark-definition.scss +198 -196
  254. package/styles/multi-select/_bootstrap-definition.scss +192 -190
  255. package/styles/multi-select/_bootstrap4-definition.scss +278 -257
  256. package/styles/multi-select/_bootstrap5-definition.scss +229 -227
  257. package/styles/multi-select/_fabric-dark-definition.scss +187 -185
  258. package/styles/multi-select/_fabric-definition.scss +183 -181
  259. package/styles/multi-select/_fluent-definition.scss +240 -238
  260. package/styles/multi-select/_fusionnew-definition.scss +227 -227
  261. package/styles/multi-select/_highcontrast-definition.scss +298 -296
  262. package/styles/multi-select/_highcontrast-light-definition.scss +297 -295
  263. package/styles/multi-select/_layout.scss +2199 -2188
  264. package/styles/multi-select/_material-dark-definition.scss +230 -228
  265. package/styles/multi-select/_material-definition.scss +223 -221
  266. package/styles/multi-select/_material3-definition.scss +246 -246
  267. package/styles/multi-select/_tailwind-definition.scss +234 -232
  268. package/styles/multi-select/_theme.scss +586 -586
  269. package/styles/multi-select/bootstrap-dark.css +12 -1
  270. package/styles/multi-select/bootstrap.css +12 -1
  271. package/styles/multi-select/bootstrap4.css +31 -1
  272. package/styles/multi-select/bootstrap5-dark.css +12 -1
  273. package/styles/multi-select/bootstrap5.css +12 -1
  274. package/styles/multi-select/fabric-dark.css +13 -2
  275. package/styles/multi-select/fabric.css +13 -2
  276. package/styles/multi-select/fluent-dark.css +12 -1
  277. package/styles/multi-select/fluent.css +12 -1
  278. package/styles/multi-select/highcontrast-light.css +12 -1
  279. package/styles/multi-select/highcontrast.css +12 -1
  280. package/styles/multi-select/icons/_bootstrap-dark.scss +26 -26
  281. package/styles/multi-select/icons/_bootstrap.scss +26 -26
  282. package/styles/multi-select/icons/_bootstrap4.scss +37 -37
  283. package/styles/multi-select/icons/_bootstrap5.scss +26 -26
  284. package/styles/multi-select/icons/_fabric-dark.scss +26 -26
  285. package/styles/multi-select/icons/_fabric.scss +26 -26
  286. package/styles/multi-select/icons/_fluent.scss +55 -55
  287. package/styles/multi-select/icons/_fusionnew.scss +26 -26
  288. package/styles/multi-select/icons/_highcontrast-light.scss +26 -26
  289. package/styles/multi-select/icons/_highcontrast.scss +26 -26
  290. package/styles/multi-select/icons/_material-dark.scss +693 -693
  291. package/styles/multi-select/icons/_material.scss +693 -693
  292. package/styles/multi-select/icons/_material3.scss +692 -692
  293. package/styles/multi-select/icons/_tailwind.scss +26 -26
  294. package/styles/multi-select/material-dark.css +12 -1
  295. package/styles/multi-select/material.css +12 -1
  296. package/styles/multi-select/material3-dark.css +10 -0
  297. package/styles/multi-select/material3-dark.scss +1 -1
  298. package/styles/multi-select/material3.css +10 -0
  299. package/styles/multi-select/material3.scss +1 -1
  300. package/styles/multi-select/tailwind-dark.css +12 -1
  301. package/styles/multi-select/tailwind.css +12 -1
  302. package/styles/tailwind-dark.css +12 -1
  303. package/styles/tailwind.css +12 -1
  304. package/.eslintrc.json +0 -260
  305. package/dist/ej2-dropdowns.min.js +0 -10
  306. package/tslint.json +0 -111
@@ -1,2188 +1,2199 @@
1
- .e-multi-select-wrapper {
2
- box-sizing: border-box;
3
- cursor: text;
4
- line-height: normal;
5
- min-height: $ddl-control-height;
6
- padding: $ddl-control-placholder-padding;
7
- position: relative;
8
- user-select: none;
9
- width: 100%;
10
-
11
- #{if(&, '&', '*')}.e-delimiter {
12
- #{if(&, '&', '*')} .e-searcher,
13
- #{if(&, '&', '*')} .e-multi-searcher {
14
- height: 27px;
15
- vertical-align: middle;
16
- #{if(&, '&', '*')} .e-dropdownbase {
17
- height: 100%;
18
- min-height: 100%;
19
- }
20
- }
21
- }
22
-
23
- .e-delim-view {
24
- white-space: nowrap;
25
-
26
- #{if(&, '&', '*')}.e-delim-values.e-delim-overflow,
27
- #{if(&, '&', '*')}.e-delim-values.e-delim-total {
28
- box-sizing: border-box;
29
- display: inline-block;
30
- overflow: hidden;
31
- text-overflow: ellipsis;
32
- @if $ddl-multiselect-skin-name == 'tailwind' {
33
- padding: 0;
34
- }
35
- }
36
- }
37
-
38
- .e-chips.e-mob-chip.e-chip-selected .e-chips-close::before {
39
- color: $ddl-chip-mobile-font;
40
- font-size: $ddl-chip-close-font;
41
- left: $ddl-sel-chip-close-mobile-left;
42
- top: $ddl-sel-chip-close-mobile-top;
43
- }
44
-
45
- .e-chips.e-mob-chip.e-chip-selected .e-chipcontent {
46
- @if $ddl-multiselect-skin-name == 'Material3' {
47
- background: $ddl-chip-mobile-bg;
48
- }
49
- @if $ddl-multiselect-skin-name != 'Material3' {
50
- background-color: $ddl-chip-mobile-bg;
51
- }
52
- color: $ddl-chip-mobile-font;
53
- padding: $ddl-chip-selected-padding;
54
- }
55
-
56
- .e-searcher.e-zero-size:not(.e-multiselect-box),
57
- .e-multi-searcher.e-zero-size:not(.e-multiselect-box) {
58
- width: 0;
59
-
60
- input[type = 'text'] {
61
- height: 1px;
62
- min-height: 1px;
63
- }
64
- }
65
-
66
- .e-chips.e-mob-chip > .e-chipcontent {
67
- max-width: 100%;
68
- }
69
- }
70
-
71
- .e-multiselect.e-control-container,
72
- .e-multiselect.e-control-container.e-input-group {
73
- .e-multi-select-wrapper .e-multi-searcher {
74
- display: flex;
75
- float: left;
76
- width: auto;
77
- }
78
-
79
- .e-multi-select-wrapper.e-delimiter .e-multi-searcher {
80
- display: inline-flex;
81
- float: none;
82
- }
83
-
84
- .e-multi-select-wrapper .e-multi-searcher.e-zero-size:not(.e-multiselect-box) {
85
- width: 0;
86
- }
87
-
88
- .e-multi-select-wrapper .e-delim-values.e-delim-hide,
89
- .e-multi-select-wrapper .e-delim-view.e-delim-values.e-delim-hide,
90
- .e-multi-select-wrapper .e-chips-collection.e-delim-hide {
91
- display: none;
92
- }
93
-
94
- .e-multi-select-wrapper.e-down-icon {
95
- padding: 0 48px 0 0;
96
- }
97
-
98
- .e-multi-select-wrapper .e-delim-values {
99
- align-items: center;
100
- display: inline;
101
- max-width: 100%;
102
- word-break: break-word;
103
- }
104
-
105
- .e-multi-select-wrapper .e-clear-icon,
106
- .e-multi-select-wrapper .e-ddl-icon {
107
- align-items: center;
108
- cursor: pointer;
109
- display: none;
110
- flex-direction: row;
111
- margin-top: $ddl-clear-margin-top;
112
- @if $ddl-multiselect-skin-name == 'tailwind' {
113
- margin-top: -1.55em;
114
- }
115
- outline: 0;
116
- padding: 0;
117
- position: absolute;
118
- right: $ddl-chip-hooker-right;
119
- top: $ddl-closer-hooker-top;
120
- @if $ddl-multiselect-skin-name == 'FluentUI' {
121
- right: $ddl-clear-icon-right;
122
- top: $ddl-clear-icon-top;
123
- }
124
- }
125
-
126
- :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon,
127
- .e-multi-select-wrapper .e-ddl-icon {
128
- display: flex;
129
- }
130
-
131
- .e-multi-select-wrapper .e-ddl-icon {
132
- margin-right: 0;
133
- margin-top: $ddl-icon-margin-top;
134
- right: 0;
135
- @if $ddl-multiselect-skin-name == 'tailwind' or $ddl-multiselect-skin-name == 'tailwind-dark'{
136
- min-width: 30px;
137
- }
138
- }
139
-
140
- .e-multi-select-wrapper.e-delimiter {
141
- @if $ddl-multiselect-skin-name != 'FluentUI' {
142
- top: -1px;
143
- }
144
- }
145
-
146
- .e-multi-select-wrapper .e-clear-icon {
147
- font-size: $ddl-closer-hooker-font;
148
- @if $ddl-multiselect-skin-name != 'bootstrap' {
149
- height: $ddl-chip-hooker-square;
150
- width: $ddl-chip-hooker-square;
151
- }
152
- }
153
- }
154
-
155
- .e-multiselect.e-control-container.e-rtl,
156
- .e-multiselect.e-control-container.e-input-group.e-rtl {
157
- .e-multi-select-wrapper .e-multi-searcher {
158
- float: right;
159
- }
160
-
161
- .e-multi-select-wrapper .e-clear-icon,
162
- .e-multi-select-wrapper .e-ddl-icon {
163
- left: 0;
164
- right: auto;
165
- }
166
-
167
- .e-multi-select-wrapper.e-down-icon {
168
- padding: 0 0 0 48px;
169
- }
170
- }
171
-
172
- .e-bigger .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
173
- @if $ddl-multiselect-skin-name != 'Material3' {
174
- margin-top: $ddl-icon-margin-top-bigger;
175
- }
176
- }
177
-
178
- .e-popup.e-multi-select-list-wrapper .e-list-item.e-disabled,
179
- .e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-list-group-item.e-disabled {
180
- opacity: .7;
181
- pointer-events: none;
182
- }
183
-
184
- .e-multiselect.e-input-group,
185
- .e-multiselect.e-float-input {
186
- word-wrap: initial;
187
- }
188
-
189
- .e-multiselect.e-input-group .e-searcher .e-label-top,
190
- .e-multiselect.e-input-group .e-multi-searcher .e-label-top {
191
- top: $ddl-multiselect-label-position;
192
- }
193
-
194
- .e-bigger .e-multi-select-wrapper {
195
- min-height: $ddl-control-bigger-height;
196
- }
197
-
198
- .e-multi-select-wrapper.e-close-icon-hide {
199
- padding-right: 0;
200
- }
201
-
202
- .e-multi-select-wrapper .e-chips-collection {
203
- cursor: default;
204
- display: block;
205
- }
206
-
207
- .e-multi-select-wrapper .e-multi-hidden {
208
- border: 0;
209
- height: 0;
210
- position: absolute;
211
- visibility: hidden;
212
- width: 0;
213
- }
214
-
215
- .e-multi-select-wrapper .e-chips {
216
- align-items: center;
217
- display: inline-flex;
218
- float: left;
219
- margin: $ddl-chip-margin;
220
- max-width: 100%;
221
- overflow: hidden;
222
- padding: $ddl-chip-padding;
223
- text-overflow: ellipsis;
224
- white-space: nowrap;
225
- }
226
-
227
- .e-bigger .e-multi-select-wrapper .e-chips {
228
- margin: $ddl-chip-margin-bigger;
229
- }
230
-
231
- .e-multi-select-wrapper .e-chips > .e-chipcontent {
232
- max-width: 100%;
233
- overflow: hidden;
234
- padding: $ddl-chip-content-padding;
235
- text-indent: 0;
236
- text-overflow: ellipsis;
237
- white-space: nowrap;
238
- @if $ddl-multiselect-skin-name == 'bootstrap5' {
239
- line-height: 1.5;
240
- }
241
- }
242
-
243
- .e-small .e-multi-select-wrapper .e-chips {
244
- @if $ddl-multiselect-skin-name == 'highcontrast' {
245
- margin: $ddl-chip-small-margin;
246
- #{if(&, '&', '*')} > .e-chipcontent {
247
- padding: $ddl-chip-small-content-padding;
248
- }
249
- }
250
- }
251
-
252
- .e-multi-select-wrapper.e-delimiter {
253
- .e-searcher {
254
- display: inline-block;
255
- float: none;
256
- }
257
- }
258
-
259
- .e-multi-select-wrapper .e-mob-chip.e-chips > .e-chipcontent,
260
- .e-bigger .e-multi-select-wrapper .e-chips > .e-chipcontent {
261
- padding: $ddl-chip-mobile-content-padding;
262
- }
263
-
264
- .e-bigger .e-multi-select-wrapper .e-chips > .e-chipcontent {
265
- @if $ddl-multiselect-skin-name == 'bootstrap4' or $ddl-multiselect-skin-name == 'bootstrap5' {
266
- padding: $ddl-chip-bigger-content-padding;
267
- }
268
- @if $ddl-multiselect-skin-name == 'tailwind' {
269
- font-size: $ddl-chip-bigger-font-size;
270
- }
271
- }
272
-
273
- #{&}.e-multiselect.e-rtl .e-multi-select-wrapper .e-mob-chip.e-chips>.e-chipcontent,
274
- .e-bigger #{&}.e-multiselect.e-rtl .e-multi-select-wrapper .e-chips>.e-chipcontent {
275
- padding: $ddl-rtl-chip-mobile-content-padding;
276
- }
277
-
278
- .e-multi-select-wrapper .e-chips-close {
279
- align-self: center;
280
- display: flex;
281
- float: right;
282
- font-family: 'e-icons';
283
- height: $ddl-chip-close-square;
284
- margin: $ddl-chip-close-margin;
285
- width: $ddl-chip-close-width;
286
- }
287
-
288
- .e-rtl .e-multi-select-wrapper .e-chips-close {
289
- margin: $ddl-chip-close-rtl-margin;
290
- }
291
-
292
- .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
293
- margin: $ddl-chip-mobile-close-margin;
294
- }
295
-
296
- .e-multi-select-wrapper .e-chips-close.e-close-hooker {
297
- cursor: default;
298
- font-size: $ddl-closer-hooker-font;
299
- height: $ddl-chip-hooker-square;
300
- margin-top: $ddl-closer-margin-top;
301
- position: absolute;
302
- right: $ddl-chip-hooker-right;
303
- width: $ddl-chip-hooker-width;
304
- @if $ddl-multiselect-skin-name != 'Material3' {
305
- top: $ddl-closer-hooker-top;
306
- }
307
- @else {
308
- top: $ddl-closer-hooker-top-margin;
309
- border-radius: $ddl-closer-hooker-font;
310
- }
311
- }
312
-
313
- .e-multiselect .e-chips-close.e-close-hooker:hover {
314
- @if $ddl-multiselect-skin-name == 'Material3' {
315
- background: $ddl-bigger-closer-hooker-bg-color;
316
- border: 1px;
317
- }
318
- }
319
-
320
- .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
321
- .e-small.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
322
- .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
323
- right: $ddl-close-icon-left;
324
- }
325
-
326
- .e-bigger .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
327
- @if $ddl-multiselect-skin-name == 'Material3' {
328
- right: $ddl-close-icon-bigger-right;
329
- }
330
- }
331
-
332
- .e-bigger .e-multiselect .e-down-icon .e-chips-close.e-close-hooker {
333
- @if $ddl-multiselect-skin-name == 'Material3' {
334
- right: 41px;
335
- }
336
- }
337
-
338
- .e-bigger.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
339
- .e-bigger .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
340
- .e-bigger .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
341
- .e-bigger.e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
342
- .e-bigger.e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
343
- .e-bigger .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
344
- @if $ddl-multiselect-skin-name == 'FluentUI' {
345
- font-size: $ddl-bigger-chip-down-icon-font;
346
- right: $ddl-close-icon-bigger-right;
347
- }
348
- }
349
-
350
- .e-bigger.e-small.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
351
- .e-bigger.e-small .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
352
- .e-bigger.e-small .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
353
- .e-bigger.e-small.e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
354
- .e-bigger.e-small.e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
355
- .e-bigger.e-small .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
356
- @if $ddl-multiselect-skin-name == 'FluentUI' {
357
- font-size: $ddl-biggersmall-chip-down-icon-font;
358
- right: $ddl-close-icon-bigger-right;
359
- }
360
- }
361
-
362
- .e-small.e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
363
- .e-small.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
364
- .e-small.e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
365
- @if $ddl-multiselect-skin-name == 'FluentUI' {
366
- font-size: $ddl-closer-hooker-font-small;
367
- }
368
- @if $ddl-multiselect-skin-name == 'Material3' {
369
- right: 30px;
370
- }
371
- }
372
-
373
- .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
374
- .e-multiselect .e-down-icon .e-chips-close.e-close-hooker {
375
- @if $ddl-multiselect-skin-name == 'FluentUI' {
376
- font-size: $ddl-chip-close-font;
377
- }
378
- }
379
-
380
- .e-bigger .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
381
- .e-bigger .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
382
- @if $ddl-multiselect-skin-name == 'Fabric' or $ddl-multiselect-skin-name == 'highcontrast' {
383
- right: 38px;
384
- }
385
- }
386
-
387
- .e-bigger.e-small .e-multiselect .e-down-icon .e-chips-close.e-close-hooker {
388
- @if $ddl-multiselect-skin-name == 'FluentUI' or $ddl-multiselect-skin-name == 'bootstrap5' {
389
- right: $ddl-close-down-icon-left;
390
- }
391
- }
392
-
393
- .e-multiselect.e-input-group.e-control-container.e-rtl .e-multi-select-wrapper.e-down-icon .e-clear-icon {
394
- left: $ddl-close-icon-left;
395
- right: auto;
396
- }
397
-
398
- .e-bigger.e-small .e-multiselect.e-input-group.e-control-container.e-rtl .e-multi-select-wrapper.e-down-icon .e-clear-icon,
399
- .e-bigger.e-small.e-multiselect.e-input-group.e-control-container.e-rtl .e-multi-select-wrapper.e-down-icon .e-clear-icon {
400
- @if $ddl-multiselect-skin-name == 'bootstrap5' {
401
- left: 45px;
402
- right: auto;
403
- }
404
- }
405
-
406
- .e-small .e-multiselect.e-rtl .e-multi-select-wrapper .e-chips-close.e-close-hooker,
407
- .e-small.e-multiselect.e-rtl .e-multi-select-wrapper .e-chips-close.e-close-hooker,
408
- .e-small.e-bigger .e-multiselect.e-rtl .e-multi-select-wrapper .e-chips-close.e-close-hooker,
409
- .e-small.e-bigger.e-multiselect.e-rtl .e-multi-select-wrapper .e-chips-close.e-close-hooker {
410
- @if $ddl-multiselect-skin-name == 'bootstrap5' {
411
- left: 12px;
412
- right: auto;
413
- }
414
- }
415
-
416
- .e-bigger .e-multiselect.e-input-group.e-control-container.e-rtl .e-multi-select-wrapper.e-down-icon .e-clear-icon,
417
- .e-bigger.e-multiselect.e-input-group.e-control-container.e-rtl .e-multi-select-wrapper.e-down-icon .e-clear-icon {
418
- @if $ddl-multiselect-skin-name == 'Fabric' or $ddl-multiselect-skin-name == 'highcontrast' {
419
- left: 38px;
420
- right: auto;
421
- }
422
- }
423
-
424
- .e-bigger .e-multi-select-wrapper .e-chips-close.e-close-hooker {
425
- @if $ddl-multiselect-skin-name != 'Material3' {
426
- margin-top: $ddl-closer-margin-top-bigger;
427
- }
428
- @if $ddl-multiselect-skin-name == 'tailwind' {
429
- height: $ddl-bigger-clear-icon-height;
430
- width: $ddl-bigger-clear-icon-width;
431
- }
432
- @if $ddl-multiselect-skin-name == 'FluentUI' {
433
- font-size: $ddl-bigger-chip-down-icon-font;
434
- }
435
- @if $ddl-multiselect-skin-name == 'Material3' {
436
- margin-top: -2.3em;
437
- font-size: $ddl-bigger-chip-down-icon-font;
438
- top: 100%;
439
- border-radius: $ddl-bigger-closer-hooker-border-radius;
440
- width: $ddl-bigger-closer-hooker-width;
441
- height: $ddl-bigger-closer-hooker-height;
442
- line-height: 28px;
443
- }
444
- }
445
-
446
- .e-bigger .e-multi-select-wrapper .e-chips-close.e-close-hooker:hover {
447
- @if $ddl-multiselect-skin-name == 'Material3' {
448
- background: $ddl-bigger-closer-hooker-bg-color;
449
- border: 1px;
450
- }
451
- }
452
-
453
- .e-bigger.e-small .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-clear-icon {
454
- @if $ddl-multiselect-skin-name == 'Material3' {
455
- height: $ddl-bigger-small-closer-hooker-height;
456
- width: $ddl-bigger-small-closer-hooker-width;
457
- margin-top: $ddl-closer-margin-top-bigger-small;
458
- }
459
- }
460
-
461
- .e-bigger .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-clear-icon {
462
- @if $ddl-multiselect-skin-name == 'Material3' {
463
- width: $ddl-bigger-closer-hooker-width;
464
- height: $ddl-bigger-closer-hooker-width;
465
- }
466
- }
467
-
468
- .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
469
- margin-top: $ddl-closer-margin-top-bigger;
470
- @if $ddl-multiselect-skin-name == 'FluentUI' {
471
- margin-top: $ddl-bigger-clear-margin-top;
472
- }
473
- @if $ddl-multiselect-skin-name == 'bootstrap5' {
474
- margin-top: -2.15em;
475
- }
476
- @if $ddl-multiselect-skin-name == 'tailwind' {
477
- height: $ddl-bigger-clear-icon-height;
478
- margin-top: $ddl-clear-margin-top;
479
- width: $ddl-bigger-clear-icon-width;
480
- }
481
- }
482
-
483
- .e-bigger .e-multi-select-wrapper .e-chips-close.e-close-hooker,
484
- .e-bigger.e-multiselect .e-down-icon .e-chips-close.e-close-hooker.e-multi-select-wrapper .e-chips-close.e-close-hooker {
485
- @if $ddl-multiselect-skin-name == 'bootstrap4' or $ddl-multiselect-skin-name == 'tailwind' {
486
- font-size: $ddl-closer-hooker-font-bigger;
487
- margin-top: $ddl-closer-margin-top;
488
- }
489
- @if $ddl-multiselect-skin-name == 'tailwind' {
490
- margin-top: $ddl-closer-margin-top-bigger;
491
- }
492
- }
493
-
494
- .e-multi-select-wrapper input[type = 'text'] {
495
- background: none;
496
- border: 0;
497
- font-family: $ddl-chip-font-family;
498
- font-size: $ddl-chip-font-size;
499
- font-weight: normal;
500
- height: $ddl-input-height;
501
- min-height: $ddl-input-height;
502
- outline: none;
503
- @if $ddl-multiselect-skin-name == 'Material3' {
504
- padding: 0;
505
- }
506
- @else {
507
- padding: $ddl-input-placeholder-padding;
508
- }
509
- text-indent: 0;
510
- }
511
-
512
- .e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {
513
- background: none;
514
- border: 0;
515
- color: inherit;
516
- font-family: $ddl-chip-font-family;
517
- font-size: $ddl-delim-font-size;
518
- font-weight: normal;
519
- height: $ddl-input-height;
520
- min-height: $ddl-input-height;
521
- outline: none;
522
- padding: 0;
523
- text-indent: $ddl-input-text-indent;
524
- }
525
-
526
- .e-rtl.e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {
527
- padding: 5px;
528
- }
529
-
530
- .e-bigger .e-multi-select-wrapper input[type = 'text'],
531
- .e-multi-select-wrapper.e-mob-wrapper input[type = 'text'] {
532
- height: $ddl-input-height;
533
- min-height: $ddl-input-height;
534
- }
535
-
536
- .e-bigger .e-multi-select-wrapper input[type = 'text'] {
537
- @if $ddl-multiselect-skin-name == 'bootstrap4' {
538
- font-size: $ddl-chip-bigger-font-size;
539
- }
540
- @if $ddl-multiselect-skin-name == 'tailwind' {
541
- font-size: $ddl-chip-bigger-font-size;
542
- }
543
- height: $ddl-input-bigger-height;
544
- min-height: $ddl-input-bigger-height;
545
- }
546
-
547
- /* stylelint-disable property-no-vendor-prefix */
548
- .e-multi-select-wrapper input[type = 'text']::-ms-clear {
549
- display: none;
550
- }
551
-
552
- .e-multi-select-wrapper .e-searcher {
553
- display: block;
554
- float: left;
555
- width: auto;
556
- }
557
-
558
- // bootstrap modal search wrapper width
559
- .e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
560
- width: $ddl-search-wrapper-width;
561
- }
562
-
563
- .e-bigger .e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
564
- .e-bigger.e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
565
- width: $ddl-bigger-search-wrapper-width;
566
- }
567
-
568
- .e-small .e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
569
- .e-small.e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
570
- width: $ddl-small-search-wrapper-width;
571
- }
572
-
573
- .e-bigger.e-small .e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
574
- .e-bigger.e-small.e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
575
- .e-bigger .e-small.e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
576
- .e-small .e-bigger.e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
577
- width: $ddl-bigger-small-search-wrapper-width;
578
- }
579
-
580
- // Outline bootstrap modal search wrapper width
581
- .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
582
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
583
- width: $ddl-search-wrapper-width;
584
- }
585
- }
586
-
587
- .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
588
- .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
589
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
590
- width: $ddl-bigger-search-wrapper-width;
591
- }
592
- }
593
-
594
- .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
595
- .e-small .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
596
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
597
- width: $ddl-small-search-wrapper-width;
598
- }
599
- }
600
-
601
- .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
602
- .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
603
- .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
604
- .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
605
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
606
- width: $ddl-bigger-small-search-wrapper-width;
607
- }
608
- }
609
-
610
- .e-multi-select-wrapper .e-delim-values {
611
- font-family: $ddl-chip-font-family;
612
- font-size: $ddl-delim-font-size;
613
- line-height: $ddl-delimviewheight;
614
- max-width: 100%;
615
- padding-left: $ddl-delim-text-indent;
616
- padding-right: $ddl-delim-text-padding-right;
617
- @if $ddl-multiselect-skin-name != 'bootstrap5' or $ddl-multiselect-skin-name != 'FluentUI' {
618
- vertical-align: middle;
619
- }
620
- }
621
-
622
- .e-bigger .e-multi-select-wrapper .e-delim-values {
623
- @if $ddl-multiselect-skin-name == 'tailwind' {
624
- font-size: $ddl-delim-bigger-font-size;
625
- }
626
- line-height: $ddl-delimviewheight-bigger;
627
- padding-left: $ddl-delimview-bigger-padding-left;
628
- }
629
-
630
- .e-bigger .e-multi-select-wrapper .e-delim-values .e-remain {
631
- @if $ddl-multiselect-skin-name == 'bootstrap4' {
632
- padding-left: 12px;
633
- }
634
- @else if $ddl-multiselect-skin-name == 'bootstrap5' {
635
- padding-left: 0;
636
- }
637
- @if $ddl-multiselect-skin-name == 'tailwind' {
638
- font-size: $ddl-chip-bigger-font-size;
639
- }
640
- }
641
-
642
- .e-small .e-multi-select-wrapper .e-delim-values .e-remain {
643
- @if $ddl-multiselect-skin-name == 'tailwind' {
644
- font-size: $ddl-chip-small-font-size;
645
- }
646
- }
647
-
648
- .e-bigger.e-small .e-multi-select-wrapper .e-delim-values .e-remain {
649
- @if $ddl-multiselect-skin-name == 'tailwind' {
650
- font-size: $ddl-chip-bigger-small-font-size;
651
- }
652
- }
653
-
654
- .e-multi-select-list-wrapper .e-hide-listitem,
655
- .e-multi-select-list-wrapper .e-hide-group-header {
656
- display: none;
657
- }
658
-
659
- .e-multi-select-wrapper .e-delim-values .e-remain {
660
- color: $ddl-remains-font-color;
661
- cursor: pointer;
662
- display: inline-block;
663
- font-size: $ddl-chip-font-size;
664
- padding-left: $ddl-remains-padding-left;
665
- }
666
-
667
- #{&}.e-multiselect.e-disabled .e-multi-select-wrapper,
668
- #{&}.e-multiselect.e-disabled .e-multi-select-wrapper .e-chips .e-chips-close::before {
669
- cursor: not-allowed;
670
- }
671
-
672
- .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected .e-chips-close {
673
- height: $ddl-chip-sel-mobile-height;
674
- left: $ddl-chip-mob-left;
675
- margin: $ddl-chip-sel-mobile-close-margin;
676
- margin-left: auto;
677
- position: relative;
678
- top: $ddl-chip-close-mob-top;
679
- width: $ddl-chip-sel-mobile-height;
680
- }
681
-
682
- .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected {
683
- align-self: center;
684
- box-shadow: $ddl-chip-selected-shadow-value;
685
- display: inline-flex;
686
- padding: $ddl-chip-mob-padding;
687
- width: 92%;
688
- }
689
-
690
- .e-multi-select-wrapper .e-ddl-disable-icon::before {
691
- content: '';
692
- }
693
-
694
- #{&}.e-multiselect.e-rtl .e-multi-select-wrapper.e-delimiter {
695
- .e-searcher {
696
- float: none;
697
- }
698
- }
699
-
700
- #{&}.e-multiselect.e-rtl {
701
- .e-multi-select-wrapper.e-close-icon-hide {
702
- padding-left: 0;
703
- }
704
-
705
- .e-multi-select-wrapper {
706
- padding: $ddl-rtl-wrapper;
707
-
708
- .e-chips.e-mob-chip.e-chip-selected .e-chips-close::before {
709
- left: $ddl-rtl-chip-sel-close-left;
710
- }
711
-
712
- .e-chips.e-mob-chip.e-chip-selected .e-chips-close {
713
- margin: 0;
714
- margin-right: auto;
715
- }
716
-
717
- .e-searcher {
718
- float: right;
719
- }
720
-
721
- .e-chips {
722
- float: right;
723
- margin: $ddl-rtl-mob-chip-content-margin;
724
- padding: $ddl-rtl-chip-padding;
725
-
726
- .e-chipcontent {
727
- padding: $ddl-rtl-chip-content-padding;
728
- }
729
-
730
- .e-chips-close {
731
- float: left;
732
- }
733
-
734
- .e-chips-close::before {
735
- left: $ddl-rtl-chip-close-left;
736
- }
737
- }
738
-
739
- .e-chips.e-mob-chip {
740
- padding: $ddl-rtl-mob-chip-padding;
741
-
742
- .e-chipcontent {
743
- padding: $ddl-rtl-mob-chip-content-padding;
744
- }
745
- }
746
-
747
- .e-chips.e-mob-chip.e-chip-selected {
748
- padding: $ddl-rtl-mob-sel-chip-padding;
749
-
750
- .e-chipcontent {
751
- padding: $ddl-rtl-mob-sel-chip-content-padding;
752
- }
753
- }
754
-
755
- .e-chips-close.e-close-hooker {
756
- left: $ddl-close-icon-left;
757
- position: absolute;
758
- right: auto;
759
- @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'tailwind' {
760
- left: 0;
761
- }
762
- }
763
-
764
- .e-close-hooker::before {
765
- left: $ddl-rtl-hooker-left;
766
- }
767
-
768
- .e-delim-values .e-remain {
769
- padding-right: $ddl-remains-padding-left;
770
- }
771
- }
772
- }
773
-
774
- .e-multiselect.e-rtl .e-down-icon .e-chips-close.e-close-hooker {
775
- left: $ddl-close-rtl-icon-left;
776
- }
777
-
778
- .e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
779
- left: $ddl-chip-close-rtl-left;
780
- }
781
-
782
- .e-small.e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before,
783
- .e-small .e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
784
- @if ($ddl-multiselect-skin-name == 'bootstrap5') {
785
- left: $ddl-chip-close-rtl-small-left;
786
- }
787
- }
788
-
789
- .e-bigger.e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before,
790
- .e-bigger .e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
791
- @if ($ddl-multiselect-skin-name == 'bootstrap5') {
792
- left: $ddl-chip-close-rtl-bigger-left;
793
- }
794
- }
795
-
796
- .e-bigger.e-small.e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before,
797
- .e-bigger.e-small .e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
798
- @if ($ddl-multiselect-skin-name == 'bootstrap5') {
799
- left: $ddl-chip-close-rtl-small-bigger-left;
800
- }
801
- }
802
-
803
- .e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper {
804
- bottom: 1px;
805
- margin-right: $ddl-check-right-margin;
806
- position: relative;
807
- text-indent: 0;
808
- vertical-align: middle;
809
- }
810
-
811
- .e-popup.e-multi-select-list-wrapper.e-multiselect-group:not(.e-rtl) .e-list-item .e-checkbox-wrapper {
812
- @if ($ddl-multiselect-skin-name != 'tailwind' and $ddl-multiselect-skin-name != 'FluentUI') {
813
- padding-left: $ddl-multiselect-group-checkbox-wrapper-padding-left;
814
- }
815
- }
816
-
817
- .e-popup.e-multi-select-list-wrapper.e-multiselect-group:not(.e-rtl) .e-list-item .e-checkbox-wrapper .e-ripple-container {
818
- @if ($ddl-multiselect-skin-name == 'Material3') {
819
- left: 4px;
820
- }
821
- }
822
-
823
- .e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-rtl .e-list-item .e-checkbox-wrapper {
824
- @if ($ddl-multiselect-skin-name != 'tailwind' and $ddl-multiselect-skin-name != 'FluentUI') {
825
- padding-right: $ddl-multiselect-group-list-item-rtl-padding-right;
826
- }
827
- }
828
-
829
- .e-bigger .e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-rtl .e-list-item .e-checkbox-wrapper {
830
- @if ($ddl-multiselect-skin-name != 'tailwind' and $ddl-multiselect-skin-name != 'FluentUI') {
831
- padding-right: $ddl-bigger-multiselect-group-list-item-rtl-padding-right;
832
- }
833
- }
834
-
835
- .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item .e-checkbox-wrapper {
836
- bottom: 1px;
837
- @if $ddl-multiselect-skin-name == 'bootstrap5' {
838
- bottom: 2px;
839
- }
840
- margin-right: $ddl-check-right-margin;
841
- position: relative;
842
- text-indent: 0;
843
- vertical-align: middle;
844
- }
845
-
846
- .e-bigger .e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper,
847
- .e-bigger.e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper {
848
- bottom: 1px;
849
- @if $ddl-multiselect-skin-name == 'bootstrap5' {
850
- bottom: 2px;
851
- }
852
- margin-right: $ddl-bigger-check-right-margin;
853
- }
854
-
855
- .e-bigger .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item .e-checkbox-wrapper,
856
- .e-bigger.e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item .e-checkbox-wrapper {
857
- bottom: 1px;
858
- @if $ddl-multiselect-skin-name == 'bootstrap5' {
859
- bottom: 2px;
860
- }
861
- margin-right: $ddl-bigger-check-right-margin;
862
- }
863
-
864
- .e-popup.e-multi-select-list-wrapper.e-rtl .e-list-item .e-checkbox-wrapper {
865
- margin-left: 12px;
866
- margin-right: 0;
867
- }
868
-
869
- .e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-rtl .e-list-group-item .e-checkbox-wrapper {
870
- margin-left: 12px;
871
- margin-right: 0;
872
- }
873
-
874
- .e-popup.e-multi-select-list-wrapper.e-rtl .e-list-item {
875
- @if ($ddl-multiselect-skin-name != 'tailwind') {
876
- padding-right: 0;
877
- }
878
- }
879
-
880
- .e-popup.e-multi-select-list-wrapper.e-rtl .e-dropdownbase.e-rtl.e-dd-group .e-list-item {
881
- @if ($ddl-multiselect-skin-name != 'tailwind') {
882
- padding-right: $ddl-list-rtl-padding-right;
883
- }
884
- }
885
-
886
- .e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-rtl .e-dropdownbase.e-rtl.e-dd-group .e-list-group-item {
887
- @if $ddl-multiselect-skin-name == 'highcontrast' or $ddl-multiselect-skin-name == 'fabric' {
888
- padding-right: $ddl-multiselect-group-list-group-item-rtl-padding-right;
889
- }
890
- }
891
-
892
- .e-bigger .e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-rtl .e-dropdownbase.e-rtl.e-dd-group .e-list-group-item {
893
- @if $ddl-multiselect-skin-name == 'highcontrast' or $ddl-multiselect-skin-name == 'fabric' {
894
- padding-right: $ddl-list-padding-right;
895
- }
896
- }
897
-
898
- .e-bigger .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-dropdownbase.e-dd-group .e-list-group-item {
899
- @if ($ddl-multiselect-skin-name != 'tailwind') {
900
- padding-left: $ddl-multiselect-group-list-group-item-padding-left;
901
- }
902
- }
903
-
904
- .e-bigger .e-popup.e-multi-select-list-wrapper.e-multiselect-group:not(.e-rtl) .e-dropdownbase.e-dd-group .e-list-item .e-checkbox-wrapper {
905
- @if ($ddl-multiselect-skin-name != 'tailwind' and $ddl-multiselect-skin-name != 'FluentUI') {
906
- padding-left: $ddl-bigger-multiselect-group-checkbox-wrapper-padding-left;
907
- }
908
- }
909
-
910
- .e-multi-select-list-wrapper .e-selectall-parent {
911
- cursor: pointer;
912
- display: block;
913
- line-height: $ddl-select-all-height;
914
- overflow: hidden;
915
- padding-right: $ddl-list-padding-right;
916
- position: relative;
917
- text-indent: $ddl-check-right;
918
- white-space: nowrap;
919
- width: 100%;
920
- }
921
-
922
- .e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-selectall-parent {
923
- @if ($ddl-multiselect-skin-name == 'FluentUI') {
924
- text-indent: $ddl-check-group-right;
925
- }
926
- }
927
-
928
- .e-rtl .e-multi-select-list-wrapper .e-selectall-parent,
929
- .e-multi-select-list-wrapper.e-rtl .e-selectall-parent {
930
- padding-left: $ddl-list-rtl-padding-left;
931
- padding-right: $ddl-list-rtl-padding-right;
932
- }
933
-
934
- .e-multi-select-list-wrapper .e-selectall-parent .e-all-text {
935
- color: $ddl-multi-list-default-font-color;
936
- font-family: $ddl-chip-font-family;
937
- font-size: $ddl-selectall-font-size;
938
- }
939
-
940
- .e-bigger.e-multi-select-list-wrapper .e-selectall-parent .e-all-text,
941
- .e-bigger .e-multi-select-list-wrapper .e-selectall-parent .e-all-text {
942
- @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'tailwind' or $ddl-multiselect-skin-name == 'FluentUI' {
943
- font-size: $ddl-bigger-selectall-font-size;
944
- }
945
- }
946
-
947
- .e-small.e-multi-select-list-wrapper .e-selectall-parent .e-all-text,
948
- .e-small .e-multi-select-list-wrapper .e-selectall-parent .e-all-text {
949
- @if $ddl-multiselect-skin-name == 'tailwind' {
950
- font-size: $ddl-small-selectall-font-size;
951
- }
952
- }
953
-
954
- .e-bigger.e-small.e-multi-select-list-wrapper .e-selectall-parent .e-all-text,
955
- .e-bigger.e-small .e-multi-select-list-wrapper .e-selectall-parent .e-all-text {
956
- @if $ddl-multiselect-skin-name == 'tailwind' {
957
- font-size: $ddl-bigger-small-selectall-font-size;
958
- }
959
- }
960
-
961
- .e-bigger.e-multi-select-list-wrapper .e-selectall-parent,
962
- .e-bigger .e-multi-select-list-wrapper .e-selectall-parent {
963
- font-size: $ddl-chip-font-size;
964
- line-height: $ddl-bigger-select-all-height;
965
- text-indent: $ddl-bigger-check-right;
966
- }
967
-
968
- .e-bigger .e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-selectall-parent,
969
- .e-bigger.e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-selectall-parent {
970
- @if $ddl-multiselect-skin-name == 'FluentUI' {
971
- font-size: $ddl-chip-font-size;
972
- line-height: $ddl-bigger-select-all-height;
973
- text-indent: $ddl-bigger-check-right;
974
- }
975
- }
976
-
977
- .e-multi-select-list-wrapper .e-selectall-parent .e-checkbox-wrapper {
978
- bottom: 1px;
979
- margin-right: $ddl-check-right-margin;
980
- position: relative;
981
- text-indent: 0;
982
- vertical-align: middle;
983
- }
984
-
985
- .e-bigger.e-multi-select-list-wrapper .e-selectall-parent .e-checkbox-wrapper,
986
- .e-bigger .e-multi-select-list-wrapper .e-selectall-parent .e-checkbox-wrapper {
987
- bottom: 1px;
988
- @if $ddl-multiselect-skin-name == 'bootstrap5' {
989
- bottom: 2px;
990
- }
991
- margin-right: $ddl-bigger-check-right-margin;
992
- }
993
-
994
- .e-multi-select-list-wrapper.e-rtl .e-selectall-parent .e-checkbox-wrapper {
995
- margin-left: $ddl-check-left;
996
- margin-right: 0;
997
- }
998
-
999
- .e-multiselect .e-input-group-icon.e-ddl-icon {
1000
- float: right;
1001
- margin-top: $ddl-check-icon-top;
1002
- @if $ddl-multiselect-skin-name == 'Material3' {
1003
- top: 1px;
1004
- }
1005
- }
1006
-
1007
- .e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
1008
- @if $ddl-multiselect-skin-name == 'Material3' {
1009
- top: 6px;
1010
- }
1011
- }
1012
-
1013
- .e-bigger.e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
1014
- @if $ddl-multiselect-skin-name == 'Material3' {
1015
- top: 3px;
1016
- }
1017
- }
1018
-
1019
- .e-multiselect.e-rtl .e-input-group-icon.e-ddl-icon {
1020
- float: left;
1021
- }
1022
-
1023
- .e-multiselect .e-ddl-icon::before {
1024
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1025
- transform: rotate(0deg);
1026
- transition: transform 300ms ease;
1027
- }
1028
- }
1029
-
1030
- .e-multiselect.e-icon-anim .e-ddl-icon::before {
1031
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1032
- transform: rotate(180deg);
1033
- transition: transform 300ms ease;
1034
- }
1035
- }
1036
-
1037
- .e-multiselect.e-checkbox .e-multi-select-wrapper,
1038
- .e-multiselect .e-multi-select-wrapper.e-down-icon {
1039
- padding: 0;
1040
- }
1041
-
1042
- .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-filter,
1043
- .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group.e-input-focus .e-input-filter {
1044
- @if $ddl-multiselect-skin-name != 'bootstrap5' and $ddl-multiselect-skin-name != 'tailwind' {
1045
- padding: $ddl-filterbar-padding;
1046
- }
1047
- }
1048
-
1049
- .e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-filter,
1050
- .e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group.e-input-focus {
1051
- @if $ddl-multiselect-skin-name != 'bootstrap5' and $ddl-multiselect-skin-name != 'tailwind' and $ddl-multiselect-skin-name != 'Material3' {
1052
- padding: $ddl-bigger-filterbar-padding;
1053
- }
1054
- }
1055
-
1056
- .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group:not(.e-control-container) .e-clear-icon,
1057
- .e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group:not(.e-control-container) .e-clear-icon {
1058
- @if $ddl-multiselect-skin-name != 'Material3' {
1059
- padding-left: 8px;
1060
- }
1061
- @if $ddl-multiselect-skin-name == 'material' {
1062
- padding-right: 8px;
1063
- }
1064
- }
1065
-
1066
- .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-back-icon {
1067
- padding: $ddl-back-icon-padding;
1068
- }
1069
-
1070
- .e-bigger .e-checkbox .e-multi-select-wrapper .e-delim-values {
1071
- @if $ddl-multiselect-skin-name != 'highcontrast' {
1072
- line-height: $ddl-delimviewheight-check-bigger;
1073
- }
1074
- }
1075
-
1076
- .e-checkbox .e-multi-select-wrapper .e-delim-values .e-remain {
1077
- line-height: 20px;
1078
- padding-left: 10px;
1079
- @if $ddl-multiselect-skin-name == 'bootstrap5' {
1080
- padding-left: 0;
1081
- }
1082
- }
1083
-
1084
- .e-popup.e-multi-select-list-wrapper .e-list-item.e-disable .e-checkbox-wrapper .e-frame,
1085
- .e-popup.e-multi-select-list-wrapper .e-list-group-item.e-disable .e-checkbox-wrapper .e-frame {
1086
- opacity: .3;
1087
- }
1088
-
1089
- .e-popup.e-multi-select-list-wrapper .e-list-item.e-disable,
1090
- .e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-list-group-item.e-disable {
1091
- opacity: .7;
1092
- }
1093
-
1094
- .e-multi-select-wrapper input[readonly = 'true'] {
1095
- pointer-events: none;
1096
- }
1097
-
1098
- .e-multiselect.e-checkbox .e-multi-select-wrapper .e-searcher {
1099
- pointer-events: none;
1100
- }
1101
-
1102
- ejs-multiselect {
1103
- display: block;
1104
- }
1105
-
1106
- .e-bigger .e-multi-select-wrapper .e-chips-close {
1107
- @if $ddl-multiselect-skin-name == 'tailwind' {
1108
- height: $ddl-bigger-chip-close-square;
1109
- width: $ddl-bigger-chip-close-width;
1110
- }
1111
- }
1112
-
1113
- .e-bigger .e-multi-select-wrapper .e-chips .e-chips-close::before {
1114
- @if $ddl-multiselect-skin-name == 'tailwind' {
1115
- font-size: $ddl-bigger-chip-close-font;
1116
- }
1117
- }
1118
-
1119
- // small size
1120
- .e-small.e-multi-select-list-wrapper .e-selectall-parent,
1121
- .e-small .e-multi-select-list-wrapper .e-selectall-parent {
1122
- line-height: $ddl-select-all-height-small;
1123
- @if $ddl-multiselect-skin-name == 'tailwind' {
1124
- font-size: $ddl-chip-small-font-size;
1125
- text-indent: $ddl-small-check-right;
1126
- }
1127
- }
1128
-
1129
- .e-small .e-multi-select-wrapper .e-chips-close {
1130
- height: $ddl-small-chip-close-square;
1131
- width: $ddl-small-chip-close-width;
1132
- }
1133
-
1134
- .e-small .e-multiselect .e-down-icon .e-chips-close.e-close-hooker {
1135
- @if $ddl-multiselect-skin-name == 'Material3' {
1136
- right: 24px;
1137
- }
1138
- }
1139
-
1140
- .e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker {
1141
- @if $ddl-multiselect-skin-name == 'Material3' {
1142
- margin-top: $ddl-small-close-hooker-margin-top;
1143
- height: $ddl-small-chip-close-hooker-height;
1144
- width: $ddl-small-chip-close-hooker-width;
1145
- line-height: 2px;
1146
- }
1147
- }
1148
-
1149
- .e-small .e-multi-select-wrapper {
1150
- min-height: $ddl-control-small-height;
1151
- }
1152
-
1153
- .e-small .e-multi-select-wrapper.e-delimiter .e-searcher,
1154
- .e-small .e-multi-select-wrapper.e-delimiter .e-multi-searcher {
1155
- @if $ddl-multiselect-skin-name == 'tailwind' or $ddl-multiselect-skin-name == 'FluentUI' {
1156
- height: $ddl-small-input-height;
1157
- }
1158
- }
1159
-
1160
- .e-bigger.e-small .e-multi-select-wrapper.e-delimiter .e-searcher,
1161
- .e-bigger.e-small .e-multi-select-wrapper.e-delimiter .e-multi-searcher {
1162
- @if $ddl-multiselect-skin-name == 'tailwind' or $ddl-multiselect-skin-name == 'FluentUI' {
1163
- height: $ddl-bigger-small-input-height;
1164
- }
1165
- }
1166
-
1167
- .e-bigger .e-multi-select-wrapper.e-delimiter .e-searcher,
1168
- .e-bigger .e-multi-select-wrapper.e-delimiter .e-multi-searcher {
1169
- @if $ddl-multiselect-skin-name == 'tailwind' or $ddl-multiselect-skin-name == 'FluentUI' {
1170
- height: $ddl-input-bigger-height;
1171
- }
1172
- }
1173
-
1174
- .e-small .e-multi-select-wrapper input[type = 'text'] {
1175
- @if $ddl-multiselect-skin-name == 'tailwind' {
1176
- font-size: $ddl-chip-small-font-size;
1177
- }
1178
- height: $ddl-small-input-height;
1179
- min-height: $ddl-small-input-height;
1180
- }
1181
-
1182
- .e-small .e-multi-select-wrapper .e-delim-values {
1183
- font-size: $ddl-delim-small-font-size;
1184
- line-height: $ddl-delimviewheight-small;
1185
- }
1186
-
1187
- .e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker,
1188
- .e-small .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1189
- margin-top: $ddl-small-closer-margin-top;
1190
- @if $ddl-multiselect-skin-name == 'tailwind' or $ddl-multiselect-skin-name == 'FluentUI' or $ddl-multiselect-skin-name == 'Material3' {
1191
- font-size: $ddl-closer-hooker-font-small;
1192
- height: $ddl-small-clear-icon-height;
1193
- width: $ddl-small-clear-icon-width;
1194
- }
1195
- }
1196
-
1197
- .e-small .e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon,
1198
- .e-small .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
1199
- @if $ddl-multiselect-skin-name == 'Material3' {
1200
- margin-top: $ddl-small-ddl-icon-top;
1201
- }
1202
- }
1203
-
1204
- .e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker {
1205
- @if ddl-multiselect-skin-name == 'Material3' {
1206
- height: $ddl-small-clear-icon-height;
1207
- width: $ddl-small-clear-icon-width;
1208
- }
1209
- }
1210
-
1211
- .e-small .e-multi-select-wrapper .e-chips > .e-chipcontent {
1212
- @if $ddl-multiselect-skin-name == 'bootstrap4' {
1213
- padding: $ddl-chip-small-content-padding;
1214
- }
1215
- }
1216
-
1217
- // Touch small
1218
- .e-bigger.e-small.e-multi-select-list-wrapper .e-selectall-parent,
1219
- .e-bigger.e-small .e-multi-select-list-wrapper .e-selectall-parent {
1220
- line-height: $ddl-select-all-height-bigger-small;
1221
- @if $ddl-multiselect-skin-name == 'tailwind' {
1222
- font-size: $ddl-chip-bigger-small-font-size;
1223
- text-indent: $ddl-bigger-small-check-right;
1224
- }
1225
- }
1226
-
1227
- .e-bigger.e-small .e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon,
1228
- .e-bigger.e-small .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
1229
- @if $ddl-multiselect-skin-name == 'Material3' {
1230
- margin-top: $ddl-bigger-small-ddl-icon-top;
1231
- top: 100%;
1232
- }
1233
- }
1234
-
1235
- .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
1236
- height: $ddl-bigger-small-chip-close-square;
1237
- width: $ddl-bigger-small-chip-close-width;
1238
- @if $ddl-multiselect-skin-name == 'bootstrap4' {
1239
- margin: 3px 10px 10px 0;
1240
- }
1241
- }
1242
-
1243
- .e-bigger.e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker {
1244
- @if $ddl-multiselect-skin-name == 'Material3' {
1245
- min-height: $ddl-bigger-small-close-hooker-height;
1246
- min-width: $ddl-bigger-small-close-hooker-width;
1247
- }
1248
- }
1249
-
1250
- .e-bigger.e-small .e-multi-select-wrapper {
1251
- min-height: $ddl-control-bigger-small-height;
1252
- }
1253
-
1254
- .e-bigger.e-small .e-multi-select-wrapper input[type = 'text'] {
1255
- @if $ddl-multiselect-skin-name == 'tailwind' {
1256
- font-size: $ddl-chip-bigger-small-font-size;
1257
- }
1258
- height: $ddl-bigger-small-input-height;
1259
- min-height: $ddl-bigger-small-input-height;
1260
- }
1261
-
1262
- .e-small.e-bigger .e-multi-select-wrapper .e-delim-values {
1263
- font-size: $ddl-delim-bigger-small-font-size;
1264
- line-height: $ddl-delimviewheight-bigger-small;
1265
- }
1266
-
1267
- .e-bigger.e-small .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
1268
- @if $ddl-multiselect-skin-name == 'Material3' {
1269
- right: $ddl-close-icon-bigger-small-right;
1270
- }
1271
- }
1272
-
1273
- .e-small .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
1274
- @if $ddl-multiselect-skin-name == 'Material3' {
1275
- right: $ddl-close-icon-small-right;
1276
- }
1277
- }
1278
-
1279
- .e-bigger.e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker,
1280
- .e-bigger.e-small .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1281
- margin-top: $ddl-closer-margin-top-bigger-small;
1282
- @if $ddl-multiselect-skin-name != 'bootstrap5' and $ddl-multiselect-skin-name != 'tailwind' {
1283
- right: $ddl-chip-hooker-right;
1284
- }
1285
- @if $ddl-multiselect-skin-name == 'Material3' {
1286
- right: $ddl-chip-hooker-bigger-small-right;
1287
- }
1288
- @if $ddl-multiselect-skin-name == 'tailwind' {
1289
- font-size: $ddl-closer-hooker-font-bigger-small;
1290
- height: $ddl-bigger-small-clear-icon-height;
1291
- width: $ddl-bigger-small-clear-icon-width;
1292
- }
1293
- @if $ddl-multiselect-skin-name == 'FluentUI' {
1294
- font-size: $ddl-biggersmall-chip-down-icon-font;
1295
- }
1296
- }
1297
-
1298
- .e-small.e-bigger .e-multi-select-wrapper .e-chips > .e-chipcontent {
1299
- @if $ddl-multiselect-skin-name == 'bootstrap4' {
1300
- padding: $ddl-chip-bigger-content-padding;
1301
- }
1302
- }
1303
-
1304
- .e-content-placeholder.e-multiselect.e-placeholder-multiselect {
1305
- background-size: 300px 33px;
1306
- min-height: 33px;
1307
- }
1308
-
1309
- .e-bigger .e-content-placeholder.e-multiselect.e-placeholder-multiselect,
1310
- .e-bigger.e-content-placeholder.e-multiselect.e-placeholder-multiselect {
1311
- background-size: 300px 40px;
1312
- min-height: 40px;
1313
- }
1314
-
1315
- // Outline textbox configuration
1316
-
1317
- .e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'] {
1318
- color: inherit;
1319
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1320
- font-size: inherit;
1321
- min-height: $outline-multiselect-inner-input-height;
1322
- padding: 8px 12px 9px;
1323
- }
1324
- }
1325
-
1326
- .e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'] {
1327
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1328
- padding: 8px 12px 9px;
1329
- }
1330
- }
1331
-
1332
- .e-small.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'],
1333
- .e-small .e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'] {
1334
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1335
- font-size: inherit;
1336
- min-height: $outline-multiselect-small-inner-input-height;
1337
- padding: 7px 10px;
1338
- }
1339
- }
1340
-
1341
- .e-small.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'],
1342
- .e-small .e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'] {
1343
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1344
- padding: 7px 10px;
1345
- }
1346
- }
1347
-
1348
- .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'],
1349
- .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'],
1350
- .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'],
1351
- .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'] {
1352
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1353
- font-size: inherit;
1354
- min-height: $outline-multiselect-inner-input-height;
1355
- padding: 8px 12px 9px;
1356
- }
1357
- }
1358
-
1359
- .e-bigger.e-small.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'],
1360
- .e-bigger.e-small .e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'],
1361
- .e-bigger .e-small.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'],
1362
- .e-small .e-bigger.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'] {
1363
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1364
- padding: 8px 12px 9px;
1365
- }
1366
- }
1367
-
1368
- .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'],
1369
- .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'] {
1370
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1371
- font-size: inherit;
1372
- min-height: $outline-multiselect-bigger-inner-input-height;
1373
- }
1374
- }
1375
-
1376
- // Multiselect heigh changes
1377
-
1378
- .e-bigger {
1379
- .e-multiselect.e-outline .e-multi-select-wrapper,
1380
- #{if(&, '&', '*')}.e-multiselect.e-outline .e-multi-select-wrapper {
1381
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1382
- min-height: $outline-multiselect-bigger-height;
1383
- padding: $outline-multiselect-bigger-overall-padding;
1384
- }
1385
- }
1386
-
1387
- .e-small {
1388
- #{if(&, '&', '*')}.e-multiselect.e-outline .e-multi-select-wrapper {
1389
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1390
- min-height: $ddl-outline-multiselect-height;
1391
- padding: $outline-multiselect-overall-padding;
1392
- }
1393
- }
1394
- }
1395
-
1396
- #{if(&, '&', '*')}.e-small {
1397
- .e-multiselect.e-outline .e-multi-select-wrapper,
1398
- #{if(&, '&', '*')}.e-multiselect.e-outline .e-multi-select-wrapper {
1399
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1400
- min-height: $ddl-outline-multiselect-height;
1401
- padding: $outline-multiselect-overall-padding;
1402
- }
1403
- }
1404
- }
1405
- }
1406
-
1407
- .e-small {
1408
- .e-multiselect.e-outline .e-multi-select-wrapper,
1409
- #{if(&, '&', '*')}.e-multiselect.e-outline .e-multi-select-wrapper {
1410
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1411
- min-height: $outline-multiselect-small-height;
1412
- padding: $outline-multiselect-overall-padding;
1413
- }
1414
- }
1415
-
1416
- .e-bigger {
1417
- #{if(&, '&', '*')}.e-multiselect.e-outline .e-multi-select-wrapper {
1418
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1419
- min-height: $ddl-outline-multiselect-height;
1420
- padding: $outline-multiselect-overall-padding;
1421
- }
1422
- }
1423
- }
1424
-
1425
- #{if(&, '&', '*')}.e-bigger {
1426
- .e-multiselect.e-outline .e-multi-select-wrapper {
1427
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1428
- min-height: $ddl-outline-multiselect-height;
1429
- padding: $outline-multiselect-overall-padding;
1430
- }
1431
- }
1432
- }
1433
- }
1434
-
1435
- .e-multiselect.e-outline .e-multi-select-wrapper {
1436
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1437
- min-height: $ddl-outline-multiselect-height;
1438
- padding: $outline-multiselect-overall-padding;
1439
- }
1440
- }
1441
-
1442
- .e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1443
- .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1444
- .e-bigger.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1445
- .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1446
- .e-bigger .e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1447
- .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon {
1448
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1449
- padding-right: 0;
1450
- }
1451
- }
1452
-
1453
- .e-rtl.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1454
- .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1455
- .e-rtl .e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1456
- .e-rtl .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1457
- .e-rtl.e-bigger.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1458
- .e-rtl.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1459
- .e-bigger .e-rtl.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1460
- .e-bigger .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1461
- .e-rtl .e-bigger.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1462
- .e-rtl .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1463
- .e-rtl.e-small.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1464
- .e-rtl.e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1465
- .e-small .e-rtl.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1466
- .e-small .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1467
- .e-rtl .e-small.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1468
- .e-rtl .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1469
- .e-rtl.e-bigger .e-small.e-multiselect.e-outline.e-checkbox .e-multi-select-wrapper,
1470
- .e-rtl.e-small .e-bigger.e-multiselect.e-outline.e-checkbox .e-multi-select-wrapper,
1471
- .e-rtl .e-bigger .e-small.e-multiselect.e-outline.e-checkbox .e-multi-select-wrapper,
1472
- .e-rtl .e-small .e-bigger.e-multiselect.e-outline.e-checkbox .e-multi-select-wrapper,
1473
- .e-rtl.e-small.e-bigger .e-multiselect.e-outline.e-checkbox .e-multi-select-wrapper,
1474
- .e-rtl.e-small.e-bigger.e-multiselect.e-outline.e-checkbox .e-multi-select-wrapper,
1475
- .e-rtl.e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1476
- .e-rtl.e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1477
- .e-rtl .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1478
- .e-rtl .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1479
- .e-rtl.e-small.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1480
- .e-rtl.e-small.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon {
1481
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1482
- padding-left: 0;
1483
- }
1484
- }
1485
-
1486
- .e-rtl .e-multiselect.e-outline .e-multi-select-wrapper,
1487
- .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper,
1488
- .e-rtl .e-small.e-multiselect.e-outline .e-multi-select-wrapper,
1489
- .e-rtl.e-small .e-multiselect.e-outline .e-multi-select-wrapper,
1490
- .e-rtl.e-small.e-multiselect.e-outline .e-multi-select-wrapper,
1491
- .e-rtl.e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper,
1492
- .e-rtl.e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper,
1493
- .e-rtl .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper,
1494
- .e-rtl .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper,
1495
- .e-rtl.e-small.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper,
1496
- .e-rtl.e-small.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper {
1497
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1498
- padding: $outline-rtl-multiselect-overall-padding;
1499
- }
1500
- }
1501
-
1502
- .e-rtl .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper,
1503
- .e-rtl.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper,
1504
- .e-rtl.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper {
1505
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1506
- padding: $outline-rtl-multiselect-bigger-overall-padding;
1507
- }
1508
- }
1509
-
1510
- .e-rtl .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1511
- .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1512
- .e-rtl .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1513
- .e-rtl.e-small .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1514
- .e-rtl.e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1515
- .e-rtl.e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1516
- .e-rtl.e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1517
- .e-rtl .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1518
- .e-rtl .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1519
- .e-rtl.e-small.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1520
- .e-rtl.e-small.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1521
- .e-rtl .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1522
- .e-rtl.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1523
- .e-rtl.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide {
1524
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1525
- padding-left: 0;
1526
- }
1527
- }
1528
-
1529
- .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1530
- .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1531
- .e-small .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1532
- .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1533
- .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1534
- .e-small.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1535
- .e-small.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1536
- .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1537
- .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide {
1538
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1539
- padding-right: 0;
1540
- }
1541
- }
1542
-
1543
- // Delimeter padding and left
1544
-
1545
- .e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher {
1546
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1547
- height: $ddl-outline-multiselect-height;
1548
- }
1549
- }
1550
-
1551
- .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher,
1552
- .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher {
1553
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1554
- height: $outline-multiselect-bigger-height;
1555
- }
1556
- }
1557
-
1558
- .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher,
1559
- .e-small .e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher {
1560
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1561
- height: $outline-multiselect-small-height;
1562
- }
1563
- }
1564
-
1565
- .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher,
1566
- .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher,
1567
- .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher,
1568
- .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher {
1569
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1570
- height: $ddl-outline-multiselect-height;
1571
- }
1572
- }
1573
-
1574
- .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
1575
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1576
- font-size: 14px;
1577
- line-height: $ddl-outline-multiselect-height;
1578
- padding: $outline-multiselect-delimeter-padding;
1579
- }
1580
- }
1581
-
1582
- .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1583
- .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
1584
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1585
- font-size: 16px;
1586
- line-height: $outline-multiselect-bigger-height;
1587
- padding: $outline-multiselect-bigger-delimeter-padding;
1588
- }
1589
- }
1590
-
1591
- .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1592
- .e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
1593
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1594
- font-size: 13px;
1595
- line-height: $outline-multiselect-small-height;
1596
- padding: $outline-multiselect-small-delimeter-padding;
1597
- }
1598
- }
1599
-
1600
- .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1601
- .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1602
- .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1603
- .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
1604
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1605
- font-size: 14px;
1606
- line-height: $ddl-outline-multiselect-height;
1607
- padding: $outline-multiselect-delimeter-padding;
1608
- }
1609
- }
1610
-
1611
- .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
1612
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1613
- padding: $outline-rtl-multiselect-delimeter-padding;
1614
- }
1615
- }
1616
-
1617
- .e-rtl.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1618
- .e-rtl.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1619
- .e-rtl .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1620
- .e-bigger .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1621
- .e-bigger .e-rtl .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1622
- .e-rtl .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
1623
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1624
- padding: $outline-rtl-multiselect-bigger-delimeter-padding;
1625
- }
1626
- }
1627
-
1628
- .e-rtl.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1629
- .e-rtl.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1630
- .e-rtl .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1631
- .e-small .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1632
- .e-small .e-rtl .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1633
- .e-rtl .e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
1634
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1635
- padding: $outline-rtl-multiselect-small-delimeter-padding;
1636
- }
1637
- }
1638
-
1639
- .e-rtl.e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1640
- .e-rtl.e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1641
- .e-rtl .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1642
- .e-bigger.e-small .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1643
- .e-rtl.e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1644
- .e-rtl .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1645
- .e-bigger .e-rtl.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1646
- .e-bigger .e-rtl .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1647
- .e-rtl.e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1648
- .e-rtl .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1649
- .e-small .e-rtl .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1650
- .e-small .e-rtl.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
1651
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1652
- padding: $outline-rtl-multiselect-delimeter-padding;
1653
- }
1654
- }
1655
-
1656
- // Chip size configuration
1657
-
1658
- .e-multiselect.e-outline .e-multi-select-wrapper .e-chips {
1659
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1660
- height: $outline-multiselect-chip-height;
1661
- margin: $outline-multiselect-chip-margin;
1662
- padding: $outline-multiselect-chip-padding;
1663
- }
1664
- }
1665
-
1666
- .e-rtl .e-multiselect.e-outline .e-multi-select-wrapper .e-chips,
1667
- .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper .e-chips {
1668
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1669
- margin: $outline-rtl-multiselect-chip-margin;
1670
- }
1671
- }
1672
-
1673
- .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips,
1674
- .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-chips {
1675
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1676
- height: $outline-multiselect-bigger-chip-height;
1677
- padding: $outline-multiselect-bigger-chip-padding;
1678
- }
1679
- }
1680
-
1681
- .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips,
1682
- .e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-chips {
1683
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1684
- height: $outline-multiselect-small-chip-height;
1685
- padding: $outline-multiselect-chip-padding;
1686
- }
1687
- }
1688
-
1689
- .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips,
1690
- .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-chips,
1691
- .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips,
1692
- .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips {
1693
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1694
- height: $outline-multiselect-chip-height;
1695
- padding: $outline-multiselect-chip-padding;
1696
- }
1697
- }
1698
-
1699
- .e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent {
1700
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1701
- padding: 0 8px 0 0;
1702
- }
1703
- }
1704
-
1705
- .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent,
1706
- .e-rtl .e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent {
1707
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1708
- padding: 0 0 0 8px;
1709
- }
1710
- }
1711
-
1712
- .e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent,
1713
- .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent,
1714
- .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent,
1715
- .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent,
1716
- .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent {
1717
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1718
- font-size: $outline-multiselect-chip-font-size;
1719
- }
1720
- }
1721
-
1722
- .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent,
1723
- .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent {
1724
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1725
- font-size: $outline-multiselect-bigger-chip-font-size;
1726
- }
1727
- }
1728
-
1729
- .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent,
1730
- .e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent {
1731
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1732
- font-size: $outline-multiselect-small-chip-font-size;
1733
- }
1734
- }
1735
-
1736
- .e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
1737
- .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1738
- align-items: normal;
1739
- }
1740
-
1741
- //+2 more configutations
1742
-
1743
- .e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
1744
- .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain {
1745
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1746
- font-size: 14px;
1747
- }
1748
- }
1749
-
1750
- .e-bigger.e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
1751
- .e-bigger .e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
1752
- .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain,
1753
- .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain {
1754
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1755
- font-size: 16px;
1756
- }
1757
- }
1758
-
1759
- .e-small.e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
1760
- .e-small .e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
1761
- .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain,
1762
- .e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain {
1763
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1764
- font-size: 13px;
1765
- }
1766
- }
1767
-
1768
- .e-bigger.e-small.e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
1769
- .e-bigger.e-small .e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
1770
- .e-bigger .e-small.e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
1771
- .e-small .e-bigger.e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
1772
- .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain,
1773
- .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain,
1774
- .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain,
1775
- .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain {
1776
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1777
- font-size: 14px;
1778
- }
1779
- }
1780
-
1781
- // Filled theme specifications
1782
-
1783
- // Multiselect wrapper
1784
- .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper {
1785
- padding: 0 12px 0 8px;
1786
- }
1787
-
1788
- .e-small.e-filled:not(.e-bigger).e-multiselect:not(.e-float-input) .e-multi-select-wrapper,
1789
- .e-small .e-filled:not(.e-bigger).e-multiselect:not(.e-float-input) .e-multi-select-wrapper {
1790
- padding: 3px 12px 0 4px;
1791
- }
1792
-
1793
- .e-multiselect.e-filled.e-input-group.e-control-wrapper,
1794
- .e-bigger.e-small.e-multiselect.e-filled.e-input-group.e-control-wrapper,
1795
- .e-bigger.e-small .e-multiselect.e-filled.e-input-group.e-control-wrapper,
1796
- .e-bigger .e-small.e-multiselect.e-filled.e-input-group.e-control-wrapper,
1797
- .e-small .e-bigger.e-multiselect.e-filled.e-input-group.e-control-wrapper {
1798
- padding: 0;
1799
- }
1800
-
1801
- .e-filled.e-float-input .e-multi-select-wrapper,
1802
- .e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper,
1803
- .e-bigger.e-small .e-filled.e-float-input .e-multi-select-wrapper,
1804
- .e-bigger .e-small.e-filled.e-float-input .e-multi-select-wrapper,
1805
- .e-small .e-bigger.e-filled.e-float-input .e-multi-select-wrapper {
1806
- padding: 11px 12px 0;
1807
- }
1808
-
1809
- .e-small.e-filled.e-float-input .e-multi-select-wrapper,
1810
- .e-small .e-filled.e-float-input .e-multi-select-wrapper {
1811
- padding: 12px 12px 0 8px;
1812
- }
1813
-
1814
- .e-bigger.e-filled.e-float-input .e-multi-select-wrapper,
1815
- .e-bigger .e-filled.e-float-input .e-multi-select-wrapper {
1816
- padding: 19px 12px 0 16px;
1817
- }
1818
-
1819
- .e-bigger:not(.e-small).e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper {
1820
- padding-top: 3px;
1821
- }
1822
-
1823
- .e-rtl.e-multiselect.e-filled.e-input-group.e-control-wrapper,
1824
- .e-rtl.e-multiselect.e-filled.e-float-input.e-control-wrapper {
1825
- padding: 0;
1826
- }
1827
-
1828
- // Searchable input
1829
-
1830
- .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
1831
- .e-bigger.e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
1832
- .e-bigger.e-small .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
1833
- .e-bigger .e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
1834
- .e-small .e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'] {
1835
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1836
- min-height: $ddl-multiselect-filled-input-min-height;
1837
- padding-right: 10px;
1838
- }
1839
- }
1840
-
1841
- .e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
1842
- .e-small .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'] {
1843
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1844
- min-height: $ddl-multiselect-filled-input-min-height-small;
1845
- }
1846
- }
1847
-
1848
- .e-small.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper input[type = 'text'],
1849
- .e-small .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper input[type = 'text'] {
1850
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1851
- height: $ddl-multiselect-filled-float-input-min-height-small;
1852
- min-height: $ddl-multiselect-filled-float-input-min-height-small;
1853
- padding: 2px;
1854
- }
1855
- }
1856
-
1857
- .e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
1858
- .e-bigger .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'] {
1859
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1860
- min-height: $ddl-multiselect-filled-input-min-height-bigger;
1861
- }
1862
- }
1863
-
1864
- .e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper input[type = 'text'],
1865
- .e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper input[type = 'text'] {
1866
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1867
- min-height: $ddl-multiselect-filled-float-input-min-height-bigger;
1868
- }
1869
- }
1870
-
1871
- .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper.e-delimiter .e-searcher {
1872
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1873
- height: $ddl-multiselect-filled-input-min-height;
1874
- }
1875
- }
1876
-
1877
- .e-small.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper.e-delimiter .e-searcher,
1878
- .e-small .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper.e-delimiter .e-searcher {
1879
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1880
- height: $ddl-multiselect-filled-input-min-height-small;
1881
- }
1882
- }
1883
-
1884
- .e-small.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher,
1885
- .e-small .e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher {
1886
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1887
- height: $ddl-multiselect-filled-float-input-min-height-small;
1888
- }
1889
- }
1890
-
1891
- .e-bigger.e-filled:not(.e-small).e-multiselect:not(.e-float-input) .e-multi-select-wrapper.e-delimiter .e-searcher,
1892
- .e-bigger .e-filled:not(.e-small).e-multiselect:not(.e-float-input) .e-multi-select-wrapper.e-delimiter .e-searcher {
1893
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1894
- height: $ddl-multiselect-filled-input-min-height-bigger;
1895
- }
1896
- }
1897
-
1898
- .e-bigger.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher,
1899
- .e-bigger .e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher {
1900
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1901
- height: $ddl-multiselect-filled-float-input-min-height-bigger;
1902
- }
1903
- }
1904
-
1905
- .e-bigger.e-small.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher,
1906
- .e-bigger.e-small .e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher .e-bigger .e-small.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher,
1907
- .e-small .e-bigger.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher {
1908
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1909
- height: $ddl-multiselect-filled-float-input-min-height;
1910
- }
1911
- }
1912
-
1913
- .e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper.e-delimiter input[type = 'text'],
1914
- .e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper.e-delimiter input[type = 'text'] {
1915
- padding: 5px 0;
1916
- }
1917
-
1918
- .e-multiselect.e-filled.e-float-input .e-searcher .e-dropdownbase,
1919
- .e-bigger.e-small.e-multiselect.e-filled.e-float-input .e-searcher .e-dropdownbase,
1920
- .e-bigger.e-small .e-multiselect.e-filled.e-float-input .e-searcher .e-dropdownbase,
1921
- .e-bigger .e-small.e-multiselect.e-filled.e-float-input .e-searcher .e-dropdownbase,
1922
- .e-small .e-bigger.e-multiselect.e-filled.e-float-input .e-searcher .e-dropdownbase {
1923
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1924
- min-height: $ddl-multiselect-filled-float-input-min-height;
1925
- }
1926
- }
1927
-
1928
- // Delimiter wrapper specifications
1929
-
1930
- .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
1931
- .e-small.e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
1932
- .e-small.e-bigger .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
1933
- .e-small .e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
1934
- .e-bigger .e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values {
1935
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1936
- font-size: 13px;
1937
- line-height: $ddl-multiselect-filled-input-min-height;
1938
- }
1939
- }
1940
-
1941
- .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
1942
- .e-small.e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
1943
- .e-small.e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
1944
- .e-small .e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
1945
- .e-bigger .e-small.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values {
1946
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1947
- font-size: 14px;
1948
- line-height: $ddl-multiselect-filled-float-input-min-height;
1949
- }
1950
- }
1951
-
1952
- .e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
1953
- .e-bigger .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
1954
- .e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
1955
- .e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values {
1956
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1957
- font-size: 16px;
1958
- line-height: $ddl-multiselect-filled-input-min-height-bigger;
1959
- }
1960
- }
1961
-
1962
- .e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
1963
- .e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values {
1964
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1965
- line-height: $ddl-multiselect-filled-float-input-min-height-bigger;
1966
- }
1967
- }
1968
-
1969
- .e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
1970
- .e-small .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
1971
- .e-small.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
1972
- .e-small .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values {
1973
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1974
- font-size: $ddl-delim-bigger-small-font-size;
1975
- line-height: $ddl-multiselect-filled-input-min-height-small;
1976
- }
1977
- }
1978
-
1979
- .e-small.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
1980
- .e-small .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values {
1981
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1982
- line-height: $ddl-multiselect-filled-float-input-min-height-small;
1983
- }
1984
- }
1985
-
1986
- // Chip specifications
1987
-
1988
- .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
1989
- .e-bigger.e-small.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips,
1990
- .e-bigger.e-small .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips,
1991
- .e-bigger .e-small.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips,
1992
- .e-small .e-bigger.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips {
1993
- height: 28px;
1994
- }
1995
-
1996
- .e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
1997
- .e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
1998
- .e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
1999
- .e-small .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
2000
- height: 24px;
2001
- }
2002
-
2003
- .e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2004
- .e-bigger .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
2005
- height: 32px;
2006
- }
2007
-
2008
- .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper.e-mob-wrapper .e-chips.e-mob-chip {
2009
- height: 24px;
2010
- }
2011
-
2012
- .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2013
- .e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2014
- .e-bigger.e-small .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2015
- .e-bigger .e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2016
- .e-small .e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips {
2017
- height: 18px;
2018
- }
2019
-
2020
- .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2021
- .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2022
- .e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2023
- .e-bigger.e-small .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2024
- .e-bigger .e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2025
- .e-small .e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2026
- .e-bigger.e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2027
- .e-bigger.e-small .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2028
- .e-bigger .e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2029
- .e-small .e-bigger.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
2030
- margin: 8px 8px 0 0;
2031
- padding: 0 8px;
2032
- }
2033
-
2034
- .e-rtl.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2035
- .e-rtl.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2036
- .e-rtl.e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2037
- .e-rtl.e-bigger.e-small .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2038
- .e-rtl.e-bigger .e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2039
- .e-rtl.e-small .e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2040
- .e-rtl.e-bigger.e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2041
- .e-rtl.e-bigger.e-small .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2042
- .e-rtl.e-bigger .e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2043
- .e-rtl.e-small .e-bigger.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
2044
- margin: 8px 0 0 8px;
2045
- padding: 0 8px;
2046
- }
2047
-
2048
- .e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2049
- .e-bigger.e-small .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2050
- .e-bigger .e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2051
- .e-small .e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips {
2052
- padding-left: 8px;
2053
- }
2054
-
2055
- .e-small .e-filled .e-multi-select-wrapper .e-chips,
2056
- .e-small.e-filled .e-multi-select-wrapper .e-chips {
2057
- height: 16px;
2058
- margin: 4px 4px 0 0;
2059
- padding-right: 8px;
2060
- }
2061
-
2062
- .e.rtl.e-small .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2063
- .e-rtl.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips {
2064
- margin: 4px 0 0 4px;
2065
- }
2066
-
2067
- .e-small .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2068
- .e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
2069
- height: 24px;
2070
- }
2071
-
2072
- .e-filled.e-multiselect.e-float-input .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close,
2073
- .e-small.e-filled:not(.e-bigger).e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close,
2074
- .e-small .e-filled:not(.e-bigger).e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close,
2075
- .e-bigger.e-small.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close,
2076
- .e-bigger.e-small .e-filled.e-multiselect.e-float-input .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close,
2077
- .e-bigger .e-small.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close,
2078
- .e-small .e-bigger.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close {
2079
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
2080
- height: $ddl-multiselect-filled-float-input-chip-clear-icon-size;
2081
- width: $ddl-multiselect-filled-float-input-chip-clear-icon-size;
2082
- }
2083
- }
2084
-
2085
- .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent,
2086
- .e-bigger.e-small.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent,
2087
- .e-bigger.e-small .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent,
2088
- .e-bigger .e-small.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent,
2089
- .e-small .e-bigger.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent {
2090
- font-size: 13px;
2091
- padding: 0 8px 0 0;
2092
- }
2093
-
2094
- .e-small.e-filled.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2095
- .e-small .e-filled.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent {
2096
- font-size: 12px;
2097
- }
2098
-
2099
- .e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2100
- .e-bigger.e-small.e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2101
- .e-bigger.e-small .e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2102
- .e-bigger .e-small.e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2103
- .e-small .e-bigger.e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent {
2104
- font-size: 12px;
2105
- padding: 0 4px 0 0;
2106
- }
2107
-
2108
- .e-rtl.e-filled.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2109
- .e-rtl.e-bigger.e-small.e-filled.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2110
- .e-rtl.e-bigger.e-small .e-filled.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2111
- .e-rtl.e-bigger .e-small.e-filled.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2112
- .e-rtl.e-small .e-bigger.e-filled.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent {
2113
- padding: 0 0 0 4px;
2114
- }
2115
-
2116
- .e-small.e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2117
- .e-small .e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent {
2118
- font-size: 10px;
2119
- }
2120
-
2121
- .e-bigger.e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2122
- .e-bigger .e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent {
2123
- font-size: 13px;
2124
- }
2125
-
2126
- .e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-mob-wrapper .e-chips > .e-chipcontent {
2127
- font-size: 13px;
2128
- padding-right: 4px;
2129
- }
2130
-
2131
- .e-bigger.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent,
2132
- .e-bigger .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent {
2133
- @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
2134
- font-size: $ddl-multiselect-filled-chip-clear-icon-size;
2135
- }
2136
- }
2137
-
2138
- .e-rtl.e-bigger.e-filled .e-multi-select-wrapper .e-chips,
2139
- .e-rtl.e-bigger .e-filled .e-multi-select-wrapper .e-chips,
2140
- .e-rtl.e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2141
- .e-rtl.e-bigger .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2142
- .e-bigger.e-filled .e-multi-select-wrapper .e-chips,
2143
- .e-bigger .e-filled .e-multi-select-wrapper .e-chips {
2144
- padding: 0 12px;
2145
- }
2146
-
2147
- .e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2148
- .e-bigger .e-filled.e-float-input .e-multi-select-wrapper .e-chips {
2149
- padding-right: 8px;
2150
- }
2151
-
2152
- // Clear icon styles
2153
-
2154
- .e-filled.e-multi-select-wrapper .e-chips-close.e-close-hooker,
2155
- .e-multiselect.e-control-container .e-filled.e-multi-select-wrapper .e-clear-icon {
2156
- height: 38px;
2157
- margin-top: -38px;
2158
- right: 12px;
2159
- top: 100%;
2160
- width: 16px;
2161
- }
2162
-
2163
- .e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
2164
- .e-outline.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
2165
- .e-filled.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
2166
- .e-multiselect.e-readonly.e-control-wrapper.e-input-group.e-control-container :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon,
2167
- .e-multiselect.e-readonly.e-control-wrapper.e-input-group.e-control-container.e-input-group :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon {
2168
- display: none;
2169
- }
2170
-
2171
- .e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
2172
- @if $ddl-multiselect-skin-name != 'Material3' {
2173
- margin-right: 0;
2174
- }
2175
- @else {
2176
- margin: 0;
2177
- }
2178
- }
2179
-
2180
- .e-multiselect.e-control-container.e-input-group.e-disabled .e-input-group-icon.e-ddl-icon.e-icons,
2181
- .e-multiselect.e-control-container.e-input-group.e-disabled .e-clear-icon {
2182
- cursor: not-allowed;
2183
- }
2184
-
2185
- .e-multiselect.e-control-wrapper.e-control-container.e-input-group.e-checkbox .e-multi-select-wrapper.e-down-icon,
2186
- .e-multiselect.e-control-wrapper.e-control-container.e-input-group.e-checkbox .e-multi-select-wrapper.e-down-icon .e-multi-searcher .e-dropdownbase.e-control.e-multiselect.e-lib {
2187
- cursor: pointer;
2188
- }
1
+ .e-multi-select-wrapper {
2
+ box-sizing: border-box;
3
+ cursor: text;
4
+ line-height: normal;
5
+ min-height: $ddl-control-height;
6
+ padding: $ddl-control-placholder-padding;
7
+ position: relative;
8
+ user-select: none;
9
+ width: 100%;
10
+
11
+ #{if(&, '&', '*')}.e-delimiter {
12
+ #{if(&, '&', '*')} .e-searcher,
13
+ #{if(&, '&', '*')} .e-multi-searcher {
14
+ height: 27px;
15
+ vertical-align: middle;
16
+ #{if(&, '&', '*')} .e-dropdownbase {
17
+ height: 100%;
18
+ min-height: 100%;
19
+ }
20
+ }
21
+ }
22
+
23
+ .e-delim-view {
24
+ white-space: nowrap;
25
+
26
+ #{if(&, '&', '*')}.e-delim-values.e-delim-overflow,
27
+ #{if(&, '&', '*')}.e-delim-values.e-delim-total {
28
+ box-sizing: border-box;
29
+ display: inline-block;
30
+ overflow: hidden;
31
+ text-overflow: ellipsis;
32
+ @if $ddl-multiselect-skin-name == 'tailwind' {
33
+ padding: 0;
34
+ }
35
+ }
36
+ }
37
+
38
+ .e-chips.e-mob-chip.e-chip-selected .e-chips-close::before {
39
+ color: $ddl-chip-mobile-font;
40
+ font-size: $ddl-chip-close-font;
41
+ left: $ddl-sel-chip-close-mobile-left;
42
+ top: $ddl-sel-chip-close-mobile-top;
43
+ }
44
+
45
+ .e-chips.e-mob-chip.e-chip-selected .e-chipcontent {
46
+ @if $ddl-multiselect-skin-name == 'Material3' {
47
+ background: $ddl-chip-mobile-bg;
48
+ }
49
+ @if $ddl-multiselect-skin-name != 'Material3' {
50
+ background-color: $ddl-chip-mobile-bg;
51
+ }
52
+ color: $ddl-chip-mobile-font;
53
+ padding: $ddl-chip-selected-padding;
54
+ }
55
+
56
+ .e-searcher.e-zero-size:not(.e-multiselect-box),
57
+ .e-multi-searcher.e-zero-size:not(.e-multiselect-box) {
58
+ width: 0;
59
+
60
+ input[type = 'text'] {
61
+ height: 1px;
62
+ min-height: 1px;
63
+ }
64
+ }
65
+
66
+ .e-chips.e-mob-chip > .e-chipcontent {
67
+ max-width: 100%;
68
+ }
69
+ }
70
+
71
+ .e-multiselect.e-control-container,
72
+ .e-multiselect.e-control-container.e-input-group {
73
+ .e-multi-select-wrapper .e-multi-searcher {
74
+ display: flex;
75
+ float: left;
76
+ width: auto;
77
+ }
78
+
79
+ .e-multi-select-wrapper.e-delimiter .e-multi-searcher {
80
+ display: inline-flex;
81
+ float: none;
82
+ }
83
+
84
+ .e-multi-select-wrapper .e-multi-searcher.e-zero-size:not(.e-multiselect-box) {
85
+ width: 0;
86
+ }
87
+
88
+ .e-multi-select-wrapper .e-delim-values.e-delim-hide,
89
+ .e-multi-select-wrapper .e-delim-view.e-delim-values.e-delim-hide,
90
+ .e-multi-select-wrapper .e-chips-collection.e-delim-hide {
91
+ display: none;
92
+ }
93
+
94
+ .e-multi-select-wrapper.e-down-icon {
95
+ padding: 0 48px 0 0;
96
+ }
97
+
98
+ .e-multi-select-wrapper .e-delim-values {
99
+ align-items: center;
100
+ display: inline;
101
+ max-width: 100%;
102
+ word-break: break-word;
103
+ }
104
+
105
+ .e-multi-select-wrapper .e-clear-icon,
106
+ .e-multi-select-wrapper .e-ddl-icon {
107
+ align-items: center;
108
+ cursor: pointer;
109
+ display: none;
110
+ flex-direction: row;
111
+ margin-top: $ddl-clear-margin-top;
112
+ @if $ddl-multiselect-skin-name == 'tailwind' {
113
+ margin-top: -1.55em;
114
+ }
115
+ outline: 0;
116
+ padding: 0;
117
+ position: absolute;
118
+ right: $ddl-chip-hooker-right;
119
+ top: $ddl-closer-hooker-top;
120
+ @if $ddl-multiselect-skin-name == 'FluentUI' {
121
+ right: $ddl-clear-icon-right;
122
+ top: $ddl-clear-icon-top;
123
+ }
124
+ }
125
+
126
+ :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon,
127
+ .e-multi-select-wrapper .e-ddl-icon {
128
+ display: flex;
129
+ }
130
+
131
+ .e-multi-select-wrapper .e-ddl-icon {
132
+ margin-right: 0;
133
+ margin-top: $ddl-icon-margin-top;
134
+ right: 0;
135
+ @if $ddl-multiselect-skin-name == 'tailwind' or $ddl-multiselect-skin-name == 'tailwind-dark'{
136
+ min-width: 30px;
137
+ }
138
+ }
139
+
140
+ .e-multi-select-wrapper.e-delimiter {
141
+ @if $ddl-multiselect-skin-name != 'FluentUI' {
142
+ top: -1px;
143
+ }
144
+ }
145
+
146
+ .e-multi-select-wrapper .e-clear-icon {
147
+ font-size: $ddl-closer-hooker-font;
148
+ @if $ddl-multiselect-skin-name != 'bootstrap' {
149
+ height: $ddl-chip-hooker-square;
150
+ width: $ddl-chip-hooker-square;
151
+ }
152
+ }
153
+ }
154
+
155
+ .e-multiselect.e-control-container.e-rtl,
156
+ .e-multiselect.e-control-container.e-input-group.e-rtl {
157
+ .e-multi-select-wrapper .e-multi-searcher {
158
+ float: right;
159
+ }
160
+
161
+ .e-multi-select-wrapper .e-clear-icon,
162
+ .e-multi-select-wrapper .e-ddl-icon {
163
+ left: 0;
164
+ right: auto;
165
+ }
166
+
167
+ .e-multi-select-wrapper.e-down-icon {
168
+ padding: 0 0 0 48px;
169
+ }
170
+ }
171
+
172
+ .e-bigger .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon,
173
+ .e-bigger.e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
174
+ @if $ddl-multiselect-skin-name != 'Material3' {
175
+ margin-top: $ddl-icon-margin-top-bigger;
176
+ }
177
+ }
178
+
179
+ .e-popup.e-multi-select-list-wrapper .e-list-item.e-disabled,
180
+ .e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-list-group-item.e-disabled {
181
+ opacity: .7;
182
+ pointer-events: none;
183
+ }
184
+
185
+ .e-multiselect.e-input-group,
186
+ .e-multiselect.e-float-input {
187
+ word-wrap: initial;
188
+ }
189
+
190
+ .e-multiselect.e-input-group .e-searcher .e-label-top,
191
+ .e-multiselect.e-input-group .e-multi-searcher .e-label-top {
192
+ top: $ddl-multiselect-label-position;
193
+ }
194
+
195
+ .e-bigger .e-multi-select-wrapper {
196
+ min-height: $ddl-control-bigger-height;
197
+ }
198
+
199
+ .e-multi-select-wrapper.e-close-icon-hide {
200
+ padding-right: 0;
201
+ }
202
+
203
+ .e-multi-select-wrapper .e-chips-collection {
204
+ cursor: default;
205
+ display: block;
206
+ }
207
+
208
+ .e-multi-select-wrapper .e-multi-hidden {
209
+ border: 0;
210
+ height: 0;
211
+ position: absolute;
212
+ visibility: hidden;
213
+ width: 0;
214
+ }
215
+
216
+ .e-multi-select-wrapper .e-chips {
217
+ align-items: center;
218
+ display: inline-flex;
219
+ float: left;
220
+ margin: $ddl-chip-margin;
221
+ max-width: 100%;
222
+ overflow: hidden;
223
+ padding: $ddl-chip-padding;
224
+ text-overflow: ellipsis;
225
+ white-space: nowrap;
226
+ }
227
+
228
+ .e-bigger .e-multi-select-wrapper .e-chips {
229
+ margin: $ddl-chip-margin-bigger;
230
+ }
231
+
232
+ .e-multi-select-wrapper .e-chips > .e-chipcontent {
233
+ max-width: 100%;
234
+ overflow: hidden;
235
+ padding: $ddl-chip-content-padding;
236
+ text-indent: 0;
237
+ text-overflow: ellipsis;
238
+ white-space: nowrap;
239
+ @if $ddl-multiselect-skin-name == 'bootstrap5' {
240
+ line-height: 1.5;
241
+ }
242
+ }
243
+
244
+ .e-small .e-multi-select-wrapper .e-chips {
245
+ @if $ddl-multiselect-skin-name == 'highcontrast' {
246
+ margin: $ddl-chip-small-margin;
247
+ #{if(&, '&', '*')} > .e-chipcontent {
248
+ padding: $ddl-chip-small-content-padding;
249
+ }
250
+ }
251
+ }
252
+
253
+ .e-multi-select-wrapper.e-delimiter {
254
+ .e-searcher {
255
+ display: inline-block;
256
+ float: none;
257
+ }
258
+ }
259
+
260
+ .e-multi-select-wrapper .e-mob-chip.e-chips > .e-chipcontent,
261
+ .e-bigger .e-multi-select-wrapper .e-chips > .e-chipcontent {
262
+ padding: $ddl-chip-mobile-content-padding;
263
+ }
264
+
265
+ .e-bigger .e-multi-select-wrapper .e-chips > .e-chipcontent {
266
+ @if $ddl-multiselect-skin-name == 'bootstrap4' or $ddl-multiselect-skin-name == 'bootstrap5' {
267
+ padding: $ddl-chip-bigger-content-padding;
268
+ }
269
+ @if $ddl-multiselect-skin-name == 'tailwind' {
270
+ font-size: $ddl-chip-bigger-font-size;
271
+ }
272
+ }
273
+
274
+ #{&}.e-multiselect.e-rtl .e-multi-select-wrapper .e-mob-chip.e-chips>.e-chipcontent,
275
+ .e-bigger #{&}.e-multiselect.e-rtl .e-multi-select-wrapper .e-chips>.e-chipcontent {
276
+ padding: $ddl-rtl-chip-mobile-content-padding;
277
+ }
278
+
279
+ .e-multi-select-wrapper .e-chips-close {
280
+ align-self: center;
281
+ display: flex;
282
+ float: right;
283
+ font-family: 'e-icons';
284
+ height: $ddl-chip-close-square;
285
+ margin: $ddl-chip-close-margin;
286
+ width: $ddl-chip-close-width;
287
+ }
288
+
289
+ .e-rtl .e-multi-select-wrapper .e-chips-close {
290
+ margin: $ddl-chip-close-rtl-margin;
291
+ }
292
+
293
+ .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
294
+ margin: $ddl-chip-mobile-close-margin;
295
+ }
296
+
297
+ .e-multi-select-wrapper .e-chips-close.e-close-hooker {
298
+ cursor: default;
299
+ font-size: $ddl-closer-hooker-font;
300
+ height: $ddl-chip-hooker-square;
301
+ margin-top: $ddl-closer-margin-top;
302
+ position: absolute;
303
+ right: $ddl-chip-hooker-right;
304
+ width: $ddl-chip-hooker-width;
305
+ @if $ddl-multiselect-skin-name != 'Material3' {
306
+ top: $ddl-closer-hooker-top;
307
+ }
308
+ @else {
309
+ top: $ddl-closer-hooker-top-margin;
310
+ border-radius: $ddl-closer-hooker-font;
311
+ }
312
+ }
313
+
314
+ .e-multiselect .e-chips-close.e-close-hooker:hover {
315
+ @if $ddl-multiselect-skin-name == 'Material3' {
316
+ background: $ddl-bigger-closer-hooker-bg-color;
317
+ border: 1px;
318
+ }
319
+ }
320
+
321
+ .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
322
+ .e-small.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
323
+ .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
324
+ right: $ddl-close-icon-left;
325
+ }
326
+
327
+ .e-bigger .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
328
+ @if $ddl-multiselect-skin-name == 'Material3' {
329
+ right: $ddl-close-icon-bigger-right;
330
+ }
331
+ }
332
+
333
+ .e-bigger .e-multiselect .e-down-icon .e-chips-close.e-close-hooker {
334
+ @if $ddl-multiselect-skin-name == 'Material3' {
335
+ right: 41px;
336
+ }
337
+ }
338
+
339
+ .e-bigger.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
340
+ .e-bigger .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
341
+ .e-bigger .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
342
+ .e-bigger.e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
343
+ .e-bigger.e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
344
+ .e-bigger .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
345
+ @if $ddl-multiselect-skin-name == 'FluentUI' {
346
+ font-size: $ddl-bigger-chip-down-icon-font;
347
+ right: $ddl-close-icon-bigger-right;
348
+ }
349
+ }
350
+
351
+ .e-bigger.e-small.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
352
+ .e-bigger.e-small .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
353
+ .e-bigger.e-small .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
354
+ .e-bigger.e-small.e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
355
+ .e-bigger.e-small.e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
356
+ .e-bigger.e-small .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
357
+ @if $ddl-multiselect-skin-name == 'FluentUI' {
358
+ font-size: $ddl-biggersmall-chip-down-icon-font;
359
+ right: $ddl-close-icon-bigger-right;
360
+ }
361
+ }
362
+
363
+ .e-small.e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
364
+ .e-small.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
365
+ .e-small.e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
366
+ @if $ddl-multiselect-skin-name == 'FluentUI' {
367
+ font-size: $ddl-closer-hooker-font-small;
368
+ }
369
+ @if $ddl-multiselect-skin-name == 'Material3' {
370
+ right: 30px;
371
+ }
372
+ }
373
+
374
+ .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
375
+ .e-multiselect .e-down-icon .e-chips-close.e-close-hooker {
376
+ @if $ddl-multiselect-skin-name == 'FluentUI' {
377
+ font-size: $ddl-chip-close-font;
378
+ }
379
+ }
380
+
381
+ .e-bigger .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
382
+ .e-bigger .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
383
+ @if $ddl-multiselect-skin-name == 'Fabric' or $ddl-multiselect-skin-name == 'highcontrast' {
384
+ right: 38px;
385
+ }
386
+ }
387
+
388
+ .e-bigger.e-small .e-multiselect .e-down-icon .e-chips-close.e-close-hooker {
389
+ @if $ddl-multiselect-skin-name == 'FluentUI' or $ddl-multiselect-skin-name == 'bootstrap5' {
390
+ right: $ddl-close-down-icon-left;
391
+ }
392
+ }
393
+
394
+ .e-multiselect.e-input-group.e-control-container.e-rtl .e-multi-select-wrapper.e-down-icon .e-clear-icon {
395
+ left: $ddl-close-icon-left;
396
+ right: auto;
397
+ }
398
+
399
+ .e-bigger.e-small .e-multiselect.e-input-group.e-control-container.e-rtl .e-multi-select-wrapper.e-down-icon .e-clear-icon,
400
+ .e-bigger.e-small.e-multiselect.e-input-group.e-control-container.e-rtl .e-multi-select-wrapper.e-down-icon .e-clear-icon {
401
+ @if $ddl-multiselect-skin-name == 'bootstrap5' {
402
+ left: 45px;
403
+ right: auto;
404
+ }
405
+ }
406
+
407
+ .e-small .e-multiselect.e-rtl .e-multi-select-wrapper .e-chips-close.e-close-hooker,
408
+ .e-small.e-multiselect.e-rtl .e-multi-select-wrapper .e-chips-close.e-close-hooker,
409
+ .e-small.e-bigger .e-multiselect.e-rtl .e-multi-select-wrapper .e-chips-close.e-close-hooker,
410
+ .e-small.e-bigger.e-multiselect.e-rtl .e-multi-select-wrapper .e-chips-close.e-close-hooker {
411
+ @if $ddl-multiselect-skin-name == 'bootstrap5' {
412
+ left: 12px;
413
+ right: auto;
414
+ }
415
+ }
416
+
417
+ .e-bigger .e-multiselect.e-input-group.e-control-container.e-rtl .e-multi-select-wrapper.e-down-icon .e-clear-icon,
418
+ .e-bigger.e-multiselect.e-input-group.e-control-container.e-rtl .e-multi-select-wrapper.e-down-icon .e-clear-icon {
419
+ @if $ddl-multiselect-skin-name == 'Fabric' or $ddl-multiselect-skin-name == 'highcontrast' {
420
+ left: 38px;
421
+ right: auto;
422
+ }
423
+ }
424
+
425
+ .e-bigger .e-multi-select-wrapper .e-chips-close.e-close-hooker {
426
+ @if $ddl-multiselect-skin-name != 'Material3' {
427
+ margin-top: $ddl-closer-margin-top-bigger;
428
+ }
429
+ @if $ddl-multiselect-skin-name == 'tailwind' {
430
+ height: $ddl-bigger-clear-icon-height;
431
+ width: $ddl-bigger-clear-icon-width;
432
+ }
433
+ @if $ddl-multiselect-skin-name == 'FluentUI' {
434
+ font-size: $ddl-bigger-chip-down-icon-font;
435
+ }
436
+ @if $ddl-multiselect-skin-name == 'Material3' {
437
+ margin-top: -2.3em;
438
+ font-size: $ddl-bigger-chip-down-icon-font;
439
+ top: 100%;
440
+ border-radius: $ddl-bigger-closer-hooker-border-radius;
441
+ width: $ddl-bigger-closer-hooker-width;
442
+ height: $ddl-bigger-closer-hooker-height;
443
+ line-height: 28px;
444
+ }
445
+ }
446
+
447
+ .e-bigger .e-multi-select-wrapper .e-chips-close.e-close-hooker:hover {
448
+ @if $ddl-multiselect-skin-name == 'Material3' {
449
+ background: $ddl-bigger-closer-hooker-bg-color;
450
+ border: 1px;
451
+ }
452
+ }
453
+
454
+ .e-bigger.e-small .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-clear-icon {
455
+ @if $ddl-multiselect-skin-name == 'Material3' {
456
+ height: $ddl-bigger-small-closer-hooker-height;
457
+ width: $ddl-bigger-small-closer-hooker-width;
458
+ margin-top: $ddl-closer-margin-top-bigger-small;
459
+ }
460
+ }
461
+
462
+ .e-bigger .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-clear-icon {
463
+ @if $ddl-multiselect-skin-name == 'Material3' {
464
+ width: $ddl-bigger-closer-hooker-width;
465
+ height: $ddl-bigger-closer-hooker-width;
466
+ }
467
+ }
468
+
469
+ .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
470
+ margin-top: $ddl-closer-margin-top-bigger;
471
+ @if $ddl-multiselect-skin-name == 'FluentUI' {
472
+ margin-top: $ddl-bigger-clear-margin-top;
473
+ }
474
+ @if $ddl-multiselect-skin-name == 'bootstrap5' {
475
+ margin-top: -2.15em;
476
+ }
477
+ @if $ddl-multiselect-skin-name == 'tailwind' {
478
+ height: $ddl-bigger-clear-icon-height;
479
+ margin-top: $ddl-clear-margin-top;
480
+ width: $ddl-bigger-clear-icon-width;
481
+ }
482
+ }
483
+
484
+ .e-bigger .e-multi-select-wrapper .e-chips-close.e-close-hooker,
485
+ .e-bigger.e-multiselect .e-down-icon .e-chips-close.e-close-hooker.e-multi-select-wrapper .e-chips-close.e-close-hooker {
486
+ @if $ddl-multiselect-skin-name == 'bootstrap4' or $ddl-multiselect-skin-name == 'tailwind' {
487
+ font-size: $ddl-closer-hooker-font-bigger;
488
+ margin-top: $ddl-closer-margin-top;
489
+ }
490
+ @if $ddl-multiselect-skin-name == 'tailwind' {
491
+ margin-top: $ddl-closer-margin-top-bigger;
492
+ }
493
+ }
494
+
495
+ .e-multi-select-wrapper input[type = 'text'] {
496
+ background: none;
497
+ border: 0;
498
+ font-family: $ddl-chip-font-family;
499
+ font-size: $ddl-chip-font-size;
500
+ font-weight: normal;
501
+ height: $ddl-input-height;
502
+ min-height: $ddl-input-height;
503
+ outline: none;
504
+ @if $ddl-multiselect-skin-name == 'Material3' {
505
+ padding: 0;
506
+ }
507
+ @else {
508
+ padding: $ddl-input-placeholder-padding;
509
+ }
510
+ text-indent: 0;
511
+ }
512
+
513
+ .e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {
514
+ background: none;
515
+ border: 0;
516
+ color: inherit;
517
+ font-family: $ddl-chip-font-family;
518
+ font-size: $ddl-delim-font-size;
519
+ font-weight: normal;
520
+ height: $ddl-input-height;
521
+ min-height: $ddl-input-height;
522
+ outline: none;
523
+ padding: 0;
524
+ text-indent: $ddl-input-text-indent;
525
+ }
526
+
527
+ .e-rtl.e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {
528
+ padding: 5px;
529
+ }
530
+
531
+ .e-bigger .e-multi-select-wrapper input[type = 'text'],
532
+ .e-multi-select-wrapper.e-mob-wrapper input[type = 'text'] {
533
+ height: $ddl-input-height;
534
+ min-height: $ddl-input-height;
535
+ }
536
+
537
+ .e-bigger .e-multi-select-wrapper input[type = 'text'] {
538
+ @if $ddl-multiselect-skin-name == 'bootstrap4' {
539
+ font-size: $ddl-chip-bigger-font-size;
540
+ }
541
+ @if $ddl-multiselect-skin-name == 'tailwind' {
542
+ font-size: $ddl-chip-bigger-font-size;
543
+ }
544
+ height: $ddl-input-bigger-height;
545
+ min-height: $ddl-input-bigger-height;
546
+ }
547
+
548
+ /* stylelint-disable property-no-vendor-prefix */
549
+ .e-multi-select-wrapper input[type = 'text']::-ms-clear {
550
+ display: none;
551
+ }
552
+
553
+ .e-multi-select-wrapper .e-searcher {
554
+ display: block;
555
+ float: left;
556
+ width: auto;
557
+ }
558
+
559
+ // bootstrap modal search wrapper width
560
+ .e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
561
+ width: $ddl-search-wrapper-width;
562
+ }
563
+
564
+ .e-bigger .e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
565
+ .e-bigger.e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
566
+ width: $ddl-bigger-search-wrapper-width;
567
+ }
568
+
569
+ .e-small .e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
570
+ .e-small.e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
571
+ width: $ddl-small-search-wrapper-width;
572
+ }
573
+
574
+ .e-bigger.e-small .e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
575
+ .e-bigger.e-small.e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
576
+ .e-bigger .e-small.e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
577
+ .e-small .e-bigger.e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
578
+ width: $ddl-bigger-small-search-wrapper-width;
579
+ }
580
+
581
+ // Outline bootstrap modal search wrapper width
582
+ .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
583
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
584
+ width: $ddl-search-wrapper-width;
585
+ }
586
+ }
587
+
588
+ .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
589
+ .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
590
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
591
+ width: $ddl-bigger-search-wrapper-width;
592
+ }
593
+ }
594
+
595
+ .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
596
+ .e-small .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
597
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
598
+ width: $ddl-small-search-wrapper-width;
599
+ }
600
+ }
601
+
602
+ .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
603
+ .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
604
+ .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
605
+ .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
606
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
607
+ width: $ddl-bigger-small-search-wrapper-width;
608
+ }
609
+ }
610
+
611
+ .e-multi-select-wrapper .e-delim-values {
612
+ font-family: $ddl-chip-font-family;
613
+ font-size: $ddl-delim-font-size;
614
+ line-height: $ddl-delimviewheight;
615
+ max-width: 100%;
616
+ padding-left: $ddl-delim-text-indent;
617
+ padding-right: $ddl-delim-text-padding-right;
618
+ @if $ddl-multiselect-skin-name != 'bootstrap5' or $ddl-multiselect-skin-name != 'FluentUI' {
619
+ vertical-align: middle;
620
+ }
621
+ }
622
+
623
+ .e-bigger .e-multi-select-wrapper .e-delim-values {
624
+ @if $ddl-multiselect-skin-name == 'tailwind' {
625
+ font-size: $ddl-delim-bigger-font-size;
626
+ }
627
+ line-height: $ddl-delimviewheight-bigger;
628
+ padding-left: $ddl-delimview-bigger-padding-left;
629
+ }
630
+
631
+ .e-bigger .e-multi-select-wrapper .e-delim-values .e-remain {
632
+ @if $ddl-multiselect-skin-name == 'bootstrap4' {
633
+ padding-left: 12px;
634
+ }
635
+ @else if $ddl-multiselect-skin-name == 'bootstrap5' {
636
+ padding-left: 0;
637
+ }
638
+ @if $ddl-multiselect-skin-name == 'tailwind' {
639
+ font-size: $ddl-chip-bigger-font-size;
640
+ }
641
+ }
642
+
643
+ .e-small .e-multi-select-wrapper .e-delim-values .e-remain {
644
+ @if $ddl-multiselect-skin-name == 'tailwind' {
645
+ font-size: $ddl-chip-small-font-size;
646
+ }
647
+ }
648
+
649
+ .e-bigger.e-small .e-multi-select-wrapper .e-delim-values .e-remain {
650
+ @if $ddl-multiselect-skin-name == 'tailwind' {
651
+ font-size: $ddl-chip-bigger-small-font-size;
652
+ }
653
+ }
654
+
655
+ .e-multi-select-list-wrapper .e-hide-listitem,
656
+ .e-multi-select-list-wrapper .e-hide-group-header {
657
+ display: none;
658
+ }
659
+
660
+ .e-multi-select-wrapper .e-delim-values .e-remain {
661
+ color: $ddl-remains-font-color;
662
+ cursor: pointer;
663
+ display: inline-block;
664
+ font-size: $ddl-chip-font-size;
665
+ padding-left: $ddl-remains-padding-left;
666
+ }
667
+
668
+ #{&}.e-multiselect.e-disabled .e-multi-select-wrapper,
669
+ #{&}.e-multiselect.e-disabled .e-multi-select-wrapper .e-chips .e-chips-close::before {
670
+ cursor: not-allowed;
671
+ }
672
+
673
+ .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected .e-chips-close {
674
+ height: $ddl-chip-sel-mobile-height;
675
+ left: $ddl-chip-mob-left;
676
+ margin: $ddl-chip-sel-mobile-close-margin;
677
+ margin-left: auto;
678
+ position: relative;
679
+ top: $ddl-chip-close-mob-top;
680
+ width: $ddl-chip-sel-mobile-height;
681
+ }
682
+
683
+ .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected {
684
+ align-self: center;
685
+ box-shadow: $ddl-chip-selected-shadow-value;
686
+ display: inline-flex;
687
+ padding: $ddl-chip-mob-padding;
688
+ width: 92%;
689
+ }
690
+
691
+ .e-multi-select-wrapper .e-ddl-disable-icon::before {
692
+ content: '';
693
+ }
694
+
695
+ #{&}.e-multiselect.e-rtl .e-multi-select-wrapper.e-delimiter {
696
+ .e-searcher {
697
+ float: none;
698
+ }
699
+ }
700
+
701
+ #{&}.e-multiselect.e-rtl {
702
+ .e-multi-select-wrapper.e-close-icon-hide {
703
+ padding-left: 0;
704
+ }
705
+
706
+ .e-multi-select-wrapper {
707
+ padding: $ddl-rtl-wrapper;
708
+
709
+ .e-chips.e-mob-chip.e-chip-selected .e-chips-close::before {
710
+ left: $ddl-rtl-chip-sel-close-left;
711
+ }
712
+
713
+ .e-chips.e-mob-chip.e-chip-selected .e-chips-close {
714
+ margin: 0;
715
+ margin-right: auto;
716
+ }
717
+
718
+ .e-searcher {
719
+ float: right;
720
+ }
721
+
722
+ .e-chips {
723
+ float: right;
724
+ margin: $ddl-rtl-mob-chip-content-margin;
725
+ padding: $ddl-rtl-chip-padding;
726
+
727
+ .e-chipcontent {
728
+ padding: $ddl-rtl-chip-content-padding;
729
+ }
730
+
731
+ .e-chips-close {
732
+ float: left;
733
+ }
734
+
735
+ .e-chips-close::before {
736
+ left: $ddl-rtl-chip-close-left;
737
+ }
738
+ }
739
+
740
+ .e-chips.e-mob-chip {
741
+ padding: $ddl-rtl-mob-chip-padding;
742
+
743
+ .e-chipcontent {
744
+ padding: $ddl-rtl-mob-chip-content-padding;
745
+ }
746
+ }
747
+
748
+ .e-chips.e-mob-chip.e-chip-selected {
749
+ padding: $ddl-rtl-mob-sel-chip-padding;
750
+
751
+ .e-chipcontent {
752
+ padding: $ddl-rtl-mob-sel-chip-content-padding;
753
+ }
754
+ }
755
+
756
+ .e-chips-close.e-close-hooker {
757
+ left: $ddl-close-icon-left;
758
+ position: absolute;
759
+ right: auto;
760
+ @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'tailwind' {
761
+ left: 0;
762
+ }
763
+ }
764
+
765
+ .e-close-hooker::before {
766
+ left: $ddl-rtl-hooker-left;
767
+ }
768
+
769
+ .e-delim-values .e-remain {
770
+ padding-right: $ddl-remains-padding-left;
771
+ }
772
+ }
773
+ }
774
+
775
+ .e-multiselect.e-rtl .e-down-icon .e-chips-close.e-close-hooker {
776
+ left: $ddl-close-rtl-icon-left;
777
+ }
778
+
779
+ .e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
780
+ left: $ddl-chip-close-rtl-left;
781
+ }
782
+
783
+ .e-small.e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before,
784
+ .e-small .e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
785
+ @if ($ddl-multiselect-skin-name == 'bootstrap5') {
786
+ left: $ddl-chip-close-rtl-small-left;
787
+ }
788
+ }
789
+
790
+ .e-bigger.e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before,
791
+ .e-bigger .e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
792
+ @if ($ddl-multiselect-skin-name == 'bootstrap5') {
793
+ left: $ddl-chip-close-rtl-bigger-left;
794
+ }
795
+ }
796
+
797
+ .e-bigger.e-small.e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before,
798
+ .e-bigger.e-small .e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
799
+ @if ($ddl-multiselect-skin-name == 'bootstrap5') {
800
+ left: $ddl-chip-close-rtl-small-bigger-left;
801
+ }
802
+ }
803
+
804
+ .e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper {
805
+ bottom: 1px;
806
+ margin-right: $ddl-check-right-margin;
807
+ position: relative;
808
+ text-indent: 0;
809
+ vertical-align: middle;
810
+ }
811
+
812
+ .e-popup.e-multi-select-list-wrapper.e-multiselect-group:not(.e-rtl) .e-list-item .e-checkbox-wrapper {
813
+ @if ($ddl-multiselect-skin-name != 'tailwind' and $ddl-multiselect-skin-name != 'FluentUI') {
814
+ padding-left: $ddl-multiselect-group-checkbox-wrapper-padding-left;
815
+ }
816
+ }
817
+
818
+ .e-popup.e-multi-select-list-wrapper.e-multiselect-group:not(.e-rtl) .e-list-item .e-checkbox-wrapper .e-ripple-container {
819
+ @if ($ddl-multiselect-skin-name == 'Material3') {
820
+ left: 4px;
821
+ }
822
+ }
823
+
824
+ .e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-rtl .e-list-item .e-checkbox-wrapper {
825
+ @if ($ddl-multiselect-skin-name != 'tailwind' and $ddl-multiselect-skin-name != 'FluentUI') {
826
+ padding-right: $ddl-multiselect-group-list-item-rtl-padding-right;
827
+ }
828
+ }
829
+
830
+ .e-bigger .e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-rtl .e-list-item .e-checkbox-wrapper {
831
+ @if ($ddl-multiselect-skin-name != 'tailwind' and $ddl-multiselect-skin-name != 'FluentUI') {
832
+ padding-right: $ddl-bigger-multiselect-group-list-item-rtl-padding-right;
833
+ }
834
+ }
835
+
836
+ .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item .e-checkbox-wrapper {
837
+ bottom: 1px;
838
+ @if $ddl-multiselect-skin-name == 'bootstrap5' {
839
+ bottom: 2px;
840
+ }
841
+ margin-right: $ddl-check-right-margin;
842
+ position: relative;
843
+ text-indent: 0;
844
+ vertical-align: middle;
845
+ }
846
+
847
+ .e-bigger .e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper,
848
+ .e-bigger.e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper {
849
+ bottom: 1px;
850
+ @if $ddl-multiselect-skin-name == 'bootstrap5' {
851
+ bottom: 2px;
852
+ }
853
+ margin-right: $ddl-bigger-check-right-margin;
854
+ }
855
+
856
+ .e-bigger .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item .e-checkbox-wrapper,
857
+ .e-bigger.e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item .e-checkbox-wrapper {
858
+ bottom: 1px;
859
+ @if $ddl-multiselect-skin-name == 'bootstrap5' {
860
+ bottom: 2px;
861
+ }
862
+ margin-right: $ddl-bigger-check-right-margin;
863
+ }
864
+
865
+ .e-popup.e-multi-select-list-wrapper.e-rtl .e-list-item .e-checkbox-wrapper {
866
+ margin-left: 12px;
867
+ margin-right: 0;
868
+ }
869
+
870
+ .e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-rtl .e-list-group-item .e-checkbox-wrapper {
871
+ margin-left: 12px;
872
+ margin-right: 0;
873
+ }
874
+
875
+ .e-popup.e-multi-select-list-wrapper.e-rtl .e-list-item {
876
+ @if ($ddl-multiselect-skin-name != 'tailwind') {
877
+ padding-right: 0;
878
+ }
879
+ }
880
+
881
+ .e-popup.e-multi-select-list-wrapper.e-rtl .e-dropdownbase.e-rtl.e-dd-group .e-list-item {
882
+ @if ($ddl-multiselect-skin-name != 'tailwind') {
883
+ padding-right: $ddl-list-rtl-padding-right;
884
+ }
885
+ }
886
+
887
+ .e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-rtl .e-dropdownbase.e-rtl.e-dd-group .e-list-group-item {
888
+ @if $ddl-multiselect-skin-name == 'highcontrast' or $ddl-multiselect-skin-name == 'fabric' {
889
+ padding-right: $ddl-multiselect-group-list-group-item-rtl-padding-right;
890
+ }
891
+ }
892
+
893
+ .e-bigger .e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-rtl .e-dropdownbase.e-rtl.e-dd-group .e-list-group-item {
894
+ @if $ddl-multiselect-skin-name == 'highcontrast' or $ddl-multiselect-skin-name == 'fabric' {
895
+ padding-right: $ddl-list-padding-right;
896
+ }
897
+ }
898
+
899
+ .e-bigger .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-dropdownbase.e-dd-group .e-list-group-item {
900
+ @if ($ddl-multiselect-skin-name != 'tailwind') {
901
+ padding-left: $ddl-multiselect-group-list-group-item-padding-left;
902
+ }
903
+ }
904
+
905
+ .e-bigger .e-popup.e-multi-select-list-wrapper.e-multiselect-group:not(.e-rtl) .e-dropdownbase.e-dd-group .e-list-item .e-checkbox-wrapper {
906
+ @if ($ddl-multiselect-skin-name != 'tailwind' and $ddl-multiselect-skin-name != 'FluentUI') {
907
+ padding-left: $ddl-bigger-multiselect-group-checkbox-wrapper-padding-left;
908
+ }
909
+ }
910
+
911
+ .e-multi-select-list-wrapper .e-selectall-parent {
912
+ cursor: pointer;
913
+ display: block;
914
+ line-height: $ddl-select-all-height;
915
+ overflow: hidden;
916
+ padding-right: $ddl-list-padding-right;
917
+ position: relative;
918
+ text-indent: $ddl-check-right;
919
+ white-space: nowrap;
920
+ width: 100%;
921
+ }
922
+
923
+ .e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-selectall-parent {
924
+ @if ($ddl-multiselect-skin-name == 'FluentUI') {
925
+ text-indent: $ddl-check-group-right;
926
+ }
927
+ }
928
+
929
+ .e-rtl .e-multi-select-list-wrapper .e-selectall-parent,
930
+ .e-multi-select-list-wrapper.e-rtl .e-selectall-parent {
931
+ padding-left: $ddl-list-rtl-padding-left;
932
+ padding-right: $ddl-list-rtl-padding-right;
933
+ }
934
+
935
+ .e-multi-select-list-wrapper .e-selectall-parent .e-all-text {
936
+ color: $ddl-multi-list-default-font-color;
937
+ font-family: $ddl-chip-font-family;
938
+ font-size: $ddl-selectall-font-size;
939
+ }
940
+
941
+ .e-bigger.e-multi-select-list-wrapper .e-selectall-parent .e-all-text,
942
+ .e-bigger .e-multi-select-list-wrapper .e-selectall-parent .e-all-text {
943
+ @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'tailwind' or $ddl-multiselect-skin-name == 'FluentUI' {
944
+ font-size: $ddl-bigger-selectall-font-size;
945
+ }
946
+ }
947
+
948
+ .e-small.e-multi-select-list-wrapper .e-selectall-parent .e-all-text,
949
+ .e-small .e-multi-select-list-wrapper .e-selectall-parent .e-all-text {
950
+ @if $ddl-multiselect-skin-name == 'tailwind' {
951
+ font-size: $ddl-small-selectall-font-size;
952
+ }
953
+ }
954
+
955
+ .e-bigger.e-small.e-multi-select-list-wrapper .e-selectall-parent .e-all-text,
956
+ .e-bigger.e-small .e-multi-select-list-wrapper .e-selectall-parent .e-all-text {
957
+ @if $ddl-multiselect-skin-name == 'tailwind' {
958
+ font-size: $ddl-bigger-small-selectall-font-size;
959
+ }
960
+ }
961
+
962
+ .e-bigger.e-multi-select-list-wrapper .e-selectall-parent,
963
+ .e-bigger .e-multi-select-list-wrapper .e-selectall-parent {
964
+ font-size: $ddl-chip-font-size;
965
+ line-height: $ddl-bigger-select-all-height;
966
+ text-indent: $ddl-bigger-check-right;
967
+ }
968
+
969
+ .e-bigger .e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-selectall-parent,
970
+ .e-bigger.e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-selectall-parent {
971
+ @if $ddl-multiselect-skin-name == 'FluentUI' {
972
+ font-size: $ddl-chip-font-size;
973
+ line-height: $ddl-bigger-select-all-height;
974
+ text-indent: $ddl-bigger-check-right;
975
+ }
976
+ }
977
+
978
+ .e-multi-select-list-wrapper .e-selectall-parent .e-checkbox-wrapper {
979
+ bottom: 1px;
980
+ margin-right: $ddl-check-right-margin;
981
+ position: relative;
982
+ text-indent: 0;
983
+ vertical-align: middle;
984
+ }
985
+
986
+ .e-bigger.e-multi-select-list-wrapper .e-selectall-parent .e-checkbox-wrapper,
987
+ .e-bigger .e-multi-select-list-wrapper .e-selectall-parent .e-checkbox-wrapper {
988
+ bottom: 1px;
989
+ @if $ddl-multiselect-skin-name == 'bootstrap5' {
990
+ bottom: 2px;
991
+ }
992
+ margin-right: $ddl-bigger-check-right-margin;
993
+ }
994
+
995
+ .e-multi-select-list-wrapper.e-rtl .e-selectall-parent .e-checkbox-wrapper {
996
+ margin-left: $ddl-check-left;
997
+ margin-right: 0;
998
+ }
999
+
1000
+ .e-multiselect .e-input-group-icon.e-ddl-icon {
1001
+ float: right;
1002
+ margin-top: $ddl-check-icon-top;
1003
+ @if $ddl-multiselect-skin-name == 'Material3' {
1004
+ top: 1px;
1005
+ }
1006
+ }
1007
+
1008
+ .e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
1009
+ @if $ddl-multiselect-skin-name == 'Material3' {
1010
+ top: 6px;
1011
+ }
1012
+ }
1013
+
1014
+ .e-bigger.e-small .e-multiselect .e-input-group-icon.e-ddl-icon {
1015
+ @if $ddl-multiselect-skin-name == 'Material3' {
1016
+ top: 3px;
1017
+ }
1018
+ }
1019
+
1020
+ .e-multiselect.e-rtl .e-input-group-icon.e-ddl-icon {
1021
+ float: left;
1022
+ }
1023
+
1024
+ .e-multiselect .e-ddl-icon::before {
1025
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1026
+ transform: rotate(0deg);
1027
+ transition: transform 300ms ease;
1028
+ }
1029
+ }
1030
+
1031
+ .e-multiselect.e-icon-anim .e-ddl-icon::before {
1032
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1033
+ transform: rotate(180deg);
1034
+ transition: transform 300ms ease;
1035
+ }
1036
+ }
1037
+
1038
+ .e-multiselect.e-checkbox .e-multi-select-wrapper,
1039
+ .e-multiselect .e-multi-select-wrapper.e-down-icon {
1040
+ padding: 0;
1041
+ }
1042
+
1043
+ .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-filter,
1044
+ .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group.e-input-focus .e-input-filter {
1045
+ @if $ddl-multiselect-skin-name != 'bootstrap5' and $ddl-multiselect-skin-name != 'tailwind' {
1046
+ padding: $ddl-filterbar-padding;
1047
+ }
1048
+ }
1049
+
1050
+ .e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-filter,
1051
+ .e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group.e-input-focus {
1052
+ @if $ddl-multiselect-skin-name != 'bootstrap5' and $ddl-multiselect-skin-name != 'tailwind' and $ddl-multiselect-skin-name != 'Material3' {
1053
+ padding: $ddl-bigger-filterbar-padding;
1054
+ }
1055
+ }
1056
+
1057
+ .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group:not(.e-control-container) .e-clear-icon,
1058
+ .e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group:not(.e-control-container) .e-clear-icon {
1059
+ @if $ddl-multiselect-skin-name != 'Material3' {
1060
+ padding-left: 8px;
1061
+ }
1062
+ @if $ddl-multiselect-skin-name == 'material' {
1063
+ padding-right: 8px;
1064
+ }
1065
+ }
1066
+
1067
+ .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-back-icon {
1068
+ padding: $ddl-back-icon-padding;
1069
+ }
1070
+
1071
+ .e-bigger .e-checkbox .e-multi-select-wrapper .e-delim-values {
1072
+ @if $ddl-multiselect-skin-name != 'highcontrast' {
1073
+ line-height: $ddl-delimviewheight-check-bigger;
1074
+ }
1075
+ }
1076
+
1077
+ .e-checkbox .e-multi-select-wrapper .e-delim-values .e-remain {
1078
+ line-height: 20px;
1079
+ padding-left: 10px;
1080
+ @if $ddl-multiselect-skin-name == 'bootstrap5' {
1081
+ padding-left: 0;
1082
+ }
1083
+ }
1084
+
1085
+ .e-popup.e-multi-select-list-wrapper .e-list-item.e-disable .e-checkbox-wrapper .e-frame,
1086
+ .e-popup.e-multi-select-list-wrapper .e-list-group-item.e-disable .e-checkbox-wrapper .e-frame {
1087
+ opacity: .3;
1088
+ }
1089
+
1090
+ .e-popup.e-multi-select-list-wrapper .e-list-item.e-disable,
1091
+ .e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-list-group-item.e-disable {
1092
+ opacity: .7;
1093
+ }
1094
+
1095
+ .e-multi-select-wrapper input[readonly = 'true'] {
1096
+ pointer-events: none;
1097
+ }
1098
+
1099
+ .e-multiselect.e-checkbox .e-multi-select-wrapper .e-searcher {
1100
+ pointer-events: none;
1101
+ }
1102
+
1103
+ ejs-multiselect {
1104
+ display: block;
1105
+ }
1106
+
1107
+ .e-bigger .e-multi-select-wrapper .e-chips-close {
1108
+ @if $ddl-multiselect-skin-name == 'tailwind' {
1109
+ height: $ddl-bigger-chip-close-square;
1110
+ width: $ddl-bigger-chip-close-width;
1111
+ }
1112
+ }
1113
+
1114
+ .e-bigger .e-multi-select-wrapper .e-chips .e-chips-close::before {
1115
+ @if $ddl-multiselect-skin-name == 'tailwind' {
1116
+ font-size: $ddl-bigger-chip-close-font;
1117
+ }
1118
+ }
1119
+
1120
+ // small size
1121
+ .e-small.e-multi-select-list-wrapper .e-selectall-parent,
1122
+ .e-small .e-multi-select-list-wrapper .e-selectall-parent {
1123
+ line-height: $ddl-select-all-height-small;
1124
+ @if $ddl-multiselect-skin-name == 'tailwind' {
1125
+ font-size: $ddl-chip-small-font-size;
1126
+ text-indent: $ddl-small-check-right;
1127
+ }
1128
+ }
1129
+
1130
+ .e-small .e-multi-select-wrapper .e-chips-close {
1131
+ height: $ddl-small-chip-close-square;
1132
+ width: $ddl-small-chip-close-width;
1133
+ }
1134
+
1135
+ .e-small .e-multiselect .e-down-icon .e-chips-close.e-close-hooker {
1136
+ @if $ddl-multiselect-skin-name == 'Material3' {
1137
+ right: 24px;
1138
+ }
1139
+ }
1140
+
1141
+ .e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker {
1142
+ @if $ddl-multiselect-skin-name == 'Material3' {
1143
+ margin-top: $ddl-small-close-hooker-margin-top;
1144
+ height: $ddl-small-chip-close-hooker-height;
1145
+ width: $ddl-small-chip-close-hooker-width;
1146
+ line-height: 2px;
1147
+ }
1148
+ }
1149
+
1150
+ .e-small .e-multi-select-wrapper {
1151
+ min-height: $ddl-control-small-height;
1152
+ }
1153
+
1154
+ .e-small .e-multi-select-wrapper.e-delimiter .e-searcher,
1155
+ .e-small .e-multi-select-wrapper.e-delimiter .e-multi-searcher {
1156
+ @if $ddl-multiselect-skin-name == 'tailwind' or $ddl-multiselect-skin-name == 'FluentUI' {
1157
+ height: $ddl-small-input-height;
1158
+ }
1159
+ }
1160
+
1161
+ .e-bigger.e-small .e-multi-select-wrapper.e-delimiter .e-searcher,
1162
+ .e-bigger.e-small .e-multi-select-wrapper.e-delimiter .e-multi-searcher {
1163
+ @if $ddl-multiselect-skin-name == 'tailwind' or $ddl-multiselect-skin-name == 'FluentUI' {
1164
+ height: $ddl-bigger-small-input-height;
1165
+ }
1166
+ }
1167
+
1168
+ .e-bigger .e-multi-select-wrapper.e-delimiter .e-searcher,
1169
+ .e-bigger .e-multi-select-wrapper.e-delimiter .e-multi-searcher {
1170
+ @if $ddl-multiselect-skin-name == 'tailwind' or $ddl-multiselect-skin-name == 'FluentUI' {
1171
+ height: $ddl-input-bigger-height;
1172
+ }
1173
+ }
1174
+
1175
+ .e-small .e-multi-select-wrapper input[type = 'text'] {
1176
+ @if $ddl-multiselect-skin-name == 'tailwind' {
1177
+ font-size: $ddl-chip-small-font-size;
1178
+ }
1179
+ height: $ddl-small-input-height;
1180
+ min-height: $ddl-small-input-height;
1181
+ }
1182
+
1183
+ .e-small .e-multi-select-wrapper .e-delim-values {
1184
+ font-size: $ddl-delim-small-font-size;
1185
+ line-height: $ddl-delimviewheight-small;
1186
+ }
1187
+
1188
+ .e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker,
1189
+ .e-small .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1190
+ margin-top: $ddl-small-closer-margin-top;
1191
+ @if $ddl-multiselect-skin-name == 'tailwind' or $ddl-multiselect-skin-name == 'FluentUI' or $ddl-multiselect-skin-name == 'Material3' {
1192
+ font-size: $ddl-closer-hooker-font-small;
1193
+ height: $ddl-small-clear-icon-height;
1194
+ width: $ddl-small-clear-icon-width;
1195
+ }
1196
+ }
1197
+
1198
+ .e-small .e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon,
1199
+ .e-small .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
1200
+ @if $ddl-multiselect-skin-name == 'Material3' {
1201
+ margin-top: $ddl-small-ddl-icon-top;
1202
+ }
1203
+ }
1204
+
1205
+ .e-small.e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon,
1206
+ .e-small.e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
1207
+ margin-top: $ddl-small-ddl-icon-top;
1208
+ }
1209
+
1210
+ .e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker {
1211
+ @if ddl-multiselect-skin-name == 'Material3' {
1212
+ height: $ddl-small-clear-icon-height;
1213
+ width: $ddl-small-clear-icon-width;
1214
+ }
1215
+ }
1216
+
1217
+ .e-small .e-multi-select-wrapper .e-chips > .e-chipcontent {
1218
+ @if $ddl-multiselect-skin-name == 'bootstrap4' {
1219
+ padding: $ddl-chip-small-content-padding;
1220
+ }
1221
+ }
1222
+
1223
+ // Touch small
1224
+ .e-bigger.e-small.e-multi-select-list-wrapper .e-selectall-parent,
1225
+ .e-bigger.e-small .e-multi-select-list-wrapper .e-selectall-parent {
1226
+ line-height: $ddl-select-all-height-bigger-small;
1227
+ @if $ddl-multiselect-skin-name == 'tailwind' {
1228
+ font-size: $ddl-chip-bigger-small-font-size;
1229
+ text-indent: $ddl-bigger-small-check-right;
1230
+ }
1231
+ }
1232
+
1233
+ .e-bigger.e-small .e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon,
1234
+ .e-bigger.e-small .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
1235
+ @if $ddl-multiselect-skin-name == 'Material3' {
1236
+ margin-top: $ddl-bigger-small-ddl-icon-top;
1237
+ top: 100%;
1238
+ }
1239
+ }
1240
+
1241
+ .e-bigger.e-small.e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon,
1242
+ .e-bigger.e-small.e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
1243
+ margin-top: $ddl-bigger-small-ddl-icon-top;
1244
+ }
1245
+
1246
+ .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
1247
+ height: $ddl-bigger-small-chip-close-square;
1248
+ width: $ddl-bigger-small-chip-close-width;
1249
+ @if $ddl-multiselect-skin-name == 'bootstrap4' {
1250
+ margin: 3px 10px 10px 0;
1251
+ }
1252
+ }
1253
+
1254
+ .e-bigger.e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker {
1255
+ @if $ddl-multiselect-skin-name == 'Material3' {
1256
+ min-height: $ddl-bigger-small-close-hooker-height;
1257
+ min-width: $ddl-bigger-small-close-hooker-width;
1258
+ }
1259
+ }
1260
+
1261
+ .e-bigger.e-small .e-multi-select-wrapper {
1262
+ min-height: $ddl-control-bigger-small-height;
1263
+ }
1264
+
1265
+ .e-bigger.e-small .e-multi-select-wrapper input[type = 'text'] {
1266
+ @if $ddl-multiselect-skin-name == 'tailwind' {
1267
+ font-size: $ddl-chip-bigger-small-font-size;
1268
+ }
1269
+ height: $ddl-bigger-small-input-height;
1270
+ min-height: $ddl-bigger-small-input-height;
1271
+ }
1272
+
1273
+ .e-small.e-bigger .e-multi-select-wrapper .e-delim-values {
1274
+ font-size: $ddl-delim-bigger-small-font-size;
1275
+ line-height: $ddl-delimviewheight-bigger-small;
1276
+ }
1277
+
1278
+ .e-bigger.e-small .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
1279
+ @if $ddl-multiselect-skin-name == 'Material3' {
1280
+ right: $ddl-close-icon-bigger-small-right;
1281
+ }
1282
+ }
1283
+
1284
+ .e-small .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
1285
+ @if $ddl-multiselect-skin-name == 'Material3' {
1286
+ right: $ddl-close-icon-small-right;
1287
+ }
1288
+ }
1289
+
1290
+ .e-bigger.e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker,
1291
+ .e-bigger.e-small .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1292
+ margin-top: $ddl-closer-margin-top-bigger-small;
1293
+ @if $ddl-multiselect-skin-name != 'bootstrap5' and $ddl-multiselect-skin-name != 'tailwind' {
1294
+ right: $ddl-chip-hooker-right;
1295
+ }
1296
+ @if $ddl-multiselect-skin-name == 'Material3' {
1297
+ right: $ddl-chip-hooker-bigger-small-right;
1298
+ }
1299
+ @if $ddl-multiselect-skin-name == 'tailwind' {
1300
+ font-size: $ddl-closer-hooker-font-bigger-small;
1301
+ height: $ddl-bigger-small-clear-icon-height;
1302
+ width: $ddl-bigger-small-clear-icon-width;
1303
+ }
1304
+ @if $ddl-multiselect-skin-name == 'FluentUI' {
1305
+ font-size: $ddl-biggersmall-chip-down-icon-font;
1306
+ }
1307
+ }
1308
+
1309
+ .e-small.e-bigger .e-multi-select-wrapper .e-chips > .e-chipcontent {
1310
+ @if $ddl-multiselect-skin-name == 'bootstrap4' {
1311
+ padding: $ddl-chip-bigger-content-padding;
1312
+ }
1313
+ }
1314
+
1315
+ .e-content-placeholder.e-multiselect.e-placeholder-multiselect {
1316
+ background-size: 300px 33px;
1317
+ min-height: 33px;
1318
+ }
1319
+
1320
+ .e-bigger .e-content-placeholder.e-multiselect.e-placeholder-multiselect,
1321
+ .e-bigger.e-content-placeholder.e-multiselect.e-placeholder-multiselect {
1322
+ background-size: 300px 40px;
1323
+ min-height: 40px;
1324
+ }
1325
+
1326
+ // Outline textbox configuration
1327
+
1328
+ .e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'] {
1329
+ color: inherit;
1330
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1331
+ font-size: inherit;
1332
+ min-height: $outline-multiselect-inner-input-height;
1333
+ padding: 8px 12px 9px;
1334
+ }
1335
+ }
1336
+
1337
+ .e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'] {
1338
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1339
+ padding: 8px 12px 9px;
1340
+ }
1341
+ }
1342
+
1343
+ .e-small.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'],
1344
+ .e-small .e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'] {
1345
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1346
+ font-size: inherit;
1347
+ min-height: $outline-multiselect-small-inner-input-height;
1348
+ padding: 7px 10px;
1349
+ }
1350
+ }
1351
+
1352
+ .e-small.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'],
1353
+ .e-small .e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'] {
1354
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1355
+ padding: 7px 10px;
1356
+ }
1357
+ }
1358
+
1359
+ .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'],
1360
+ .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'],
1361
+ .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'],
1362
+ .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'] {
1363
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1364
+ font-size: inherit;
1365
+ min-height: $outline-multiselect-inner-input-height;
1366
+ padding: 8px 12px 9px;
1367
+ }
1368
+ }
1369
+
1370
+ .e-bigger.e-small.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'],
1371
+ .e-bigger.e-small .e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'],
1372
+ .e-bigger .e-small.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'],
1373
+ .e-small .e-bigger.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'] {
1374
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1375
+ padding: 8px 12px 9px;
1376
+ }
1377
+ }
1378
+
1379
+ .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'],
1380
+ .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'] {
1381
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1382
+ font-size: inherit;
1383
+ min-height: $outline-multiselect-bigger-inner-input-height;
1384
+ }
1385
+ }
1386
+
1387
+ // Multiselect heigh changes
1388
+
1389
+ .e-bigger {
1390
+ .e-multiselect.e-outline .e-multi-select-wrapper,
1391
+ #{if(&, '&', '*')}.e-multiselect.e-outline .e-multi-select-wrapper {
1392
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1393
+ min-height: $outline-multiselect-bigger-height;
1394
+ padding: $outline-multiselect-bigger-overall-padding;
1395
+ }
1396
+ }
1397
+
1398
+ .e-small {
1399
+ #{if(&, '&', '*')}.e-multiselect.e-outline .e-multi-select-wrapper {
1400
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1401
+ min-height: $ddl-outline-multiselect-height;
1402
+ padding: $outline-multiselect-overall-padding;
1403
+ }
1404
+ }
1405
+ }
1406
+
1407
+ #{if(&, '&', '*')}.e-small {
1408
+ .e-multiselect.e-outline .e-multi-select-wrapper,
1409
+ #{if(&, '&', '*')}.e-multiselect.e-outline .e-multi-select-wrapper {
1410
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1411
+ min-height: $ddl-outline-multiselect-height;
1412
+ padding: $outline-multiselect-overall-padding;
1413
+ }
1414
+ }
1415
+ }
1416
+ }
1417
+
1418
+ .e-small {
1419
+ .e-multiselect.e-outline .e-multi-select-wrapper,
1420
+ #{if(&, '&', '*')}.e-multiselect.e-outline .e-multi-select-wrapper {
1421
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1422
+ min-height: $outline-multiselect-small-height;
1423
+ padding: $outline-multiselect-overall-padding;
1424
+ }
1425
+ }
1426
+
1427
+ .e-bigger {
1428
+ #{if(&, '&', '*')}.e-multiselect.e-outline .e-multi-select-wrapper {
1429
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1430
+ min-height: $ddl-outline-multiselect-height;
1431
+ padding: $outline-multiselect-overall-padding;
1432
+ }
1433
+ }
1434
+ }
1435
+
1436
+ #{if(&, '&', '*')}.e-bigger {
1437
+ .e-multiselect.e-outline .e-multi-select-wrapper {
1438
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1439
+ min-height: $ddl-outline-multiselect-height;
1440
+ padding: $outline-multiselect-overall-padding;
1441
+ }
1442
+ }
1443
+ }
1444
+ }
1445
+
1446
+ .e-multiselect.e-outline .e-multi-select-wrapper {
1447
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1448
+ min-height: $ddl-outline-multiselect-height;
1449
+ padding: $outline-multiselect-overall-padding;
1450
+ }
1451
+ }
1452
+
1453
+ .e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1454
+ .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1455
+ .e-bigger.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1456
+ .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1457
+ .e-bigger .e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1458
+ .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon {
1459
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1460
+ padding-right: 0;
1461
+ }
1462
+ }
1463
+
1464
+ .e-rtl.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1465
+ .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1466
+ .e-rtl .e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1467
+ .e-rtl .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1468
+ .e-rtl.e-bigger.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1469
+ .e-rtl.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1470
+ .e-bigger .e-rtl.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1471
+ .e-bigger .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1472
+ .e-rtl .e-bigger.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1473
+ .e-rtl .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1474
+ .e-rtl.e-small.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1475
+ .e-rtl.e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1476
+ .e-small .e-rtl.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1477
+ .e-small .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1478
+ .e-rtl .e-small.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
1479
+ .e-rtl .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1480
+ .e-rtl.e-bigger .e-small.e-multiselect.e-outline.e-checkbox .e-multi-select-wrapper,
1481
+ .e-rtl.e-small .e-bigger.e-multiselect.e-outline.e-checkbox .e-multi-select-wrapper,
1482
+ .e-rtl .e-bigger .e-small.e-multiselect.e-outline.e-checkbox .e-multi-select-wrapper,
1483
+ .e-rtl .e-small .e-bigger.e-multiselect.e-outline.e-checkbox .e-multi-select-wrapper,
1484
+ .e-rtl.e-small.e-bigger .e-multiselect.e-outline.e-checkbox .e-multi-select-wrapper,
1485
+ .e-rtl.e-small.e-bigger.e-multiselect.e-outline.e-checkbox .e-multi-select-wrapper,
1486
+ .e-rtl.e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1487
+ .e-rtl.e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1488
+ .e-rtl .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1489
+ .e-rtl .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1490
+ .e-rtl.e-small.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
1491
+ .e-rtl.e-small.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon {
1492
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1493
+ padding-left: 0;
1494
+ }
1495
+ }
1496
+
1497
+ .e-rtl .e-multiselect.e-outline .e-multi-select-wrapper,
1498
+ .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper,
1499
+ .e-rtl .e-small.e-multiselect.e-outline .e-multi-select-wrapper,
1500
+ .e-rtl.e-small .e-multiselect.e-outline .e-multi-select-wrapper,
1501
+ .e-rtl.e-small.e-multiselect.e-outline .e-multi-select-wrapper,
1502
+ .e-rtl.e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper,
1503
+ .e-rtl.e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper,
1504
+ .e-rtl .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper,
1505
+ .e-rtl .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper,
1506
+ .e-rtl.e-small.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper,
1507
+ .e-rtl.e-small.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper {
1508
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1509
+ padding: $outline-rtl-multiselect-overall-padding;
1510
+ }
1511
+ }
1512
+
1513
+ .e-rtl .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper,
1514
+ .e-rtl.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper,
1515
+ .e-rtl.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper {
1516
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1517
+ padding: $outline-rtl-multiselect-bigger-overall-padding;
1518
+ }
1519
+ }
1520
+
1521
+ .e-rtl .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1522
+ .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1523
+ .e-rtl .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1524
+ .e-rtl.e-small .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1525
+ .e-rtl.e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1526
+ .e-rtl.e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1527
+ .e-rtl.e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1528
+ .e-rtl .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1529
+ .e-rtl .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1530
+ .e-rtl.e-small.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1531
+ .e-rtl.e-small.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1532
+ .e-rtl .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1533
+ .e-rtl.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1534
+ .e-rtl.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide {
1535
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1536
+ padding-left: 0;
1537
+ }
1538
+ }
1539
+
1540
+ .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1541
+ .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1542
+ .e-small .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1543
+ .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1544
+ .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1545
+ .e-small.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1546
+ .e-small.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1547
+ .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
1548
+ .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide {
1549
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1550
+ padding-right: 0;
1551
+ }
1552
+ }
1553
+
1554
+ // Delimeter padding and left
1555
+
1556
+ .e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher {
1557
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1558
+ height: $ddl-outline-multiselect-height;
1559
+ }
1560
+ }
1561
+
1562
+ .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher,
1563
+ .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher {
1564
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1565
+ height: $outline-multiselect-bigger-height;
1566
+ }
1567
+ }
1568
+
1569
+ .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher,
1570
+ .e-small .e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher {
1571
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1572
+ height: $outline-multiselect-small-height;
1573
+ }
1574
+ }
1575
+
1576
+ .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher,
1577
+ .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher,
1578
+ .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher,
1579
+ .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher {
1580
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1581
+ height: $ddl-outline-multiselect-height;
1582
+ }
1583
+ }
1584
+
1585
+ .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
1586
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1587
+ font-size: 14px;
1588
+ line-height: $ddl-outline-multiselect-height;
1589
+ padding: $outline-multiselect-delimeter-padding;
1590
+ }
1591
+ }
1592
+
1593
+ .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1594
+ .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
1595
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1596
+ font-size: 16px;
1597
+ line-height: $outline-multiselect-bigger-height;
1598
+ padding: $outline-multiselect-bigger-delimeter-padding;
1599
+ }
1600
+ }
1601
+
1602
+ .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1603
+ .e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
1604
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1605
+ font-size: 13px;
1606
+ line-height: $outline-multiselect-small-height;
1607
+ padding: $outline-multiselect-small-delimeter-padding;
1608
+ }
1609
+ }
1610
+
1611
+ .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1612
+ .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1613
+ .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1614
+ .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
1615
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1616
+ font-size: 14px;
1617
+ line-height: $ddl-outline-multiselect-height;
1618
+ padding: $outline-multiselect-delimeter-padding;
1619
+ }
1620
+ }
1621
+
1622
+ .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
1623
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1624
+ padding: $outline-rtl-multiselect-delimeter-padding;
1625
+ }
1626
+ }
1627
+
1628
+ .e-rtl.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1629
+ .e-rtl.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1630
+ .e-rtl .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1631
+ .e-bigger .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1632
+ .e-bigger .e-rtl .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1633
+ .e-rtl .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
1634
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1635
+ padding: $outline-rtl-multiselect-bigger-delimeter-padding;
1636
+ }
1637
+ }
1638
+
1639
+ .e-rtl.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1640
+ .e-rtl.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1641
+ .e-rtl .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1642
+ .e-small .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1643
+ .e-small .e-rtl .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1644
+ .e-rtl .e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
1645
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1646
+ padding: $outline-rtl-multiselect-small-delimeter-padding;
1647
+ }
1648
+ }
1649
+
1650
+ .e-rtl.e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1651
+ .e-rtl.e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1652
+ .e-rtl .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1653
+ .e-bigger.e-small .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1654
+ .e-rtl.e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1655
+ .e-rtl .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1656
+ .e-bigger .e-rtl.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1657
+ .e-bigger .e-rtl .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1658
+ .e-rtl.e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1659
+ .e-rtl .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1660
+ .e-small .e-rtl .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
1661
+ .e-small .e-rtl.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
1662
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1663
+ padding: $outline-rtl-multiselect-delimeter-padding;
1664
+ }
1665
+ }
1666
+
1667
+ // Chip size configuration
1668
+
1669
+ .e-multiselect.e-outline .e-multi-select-wrapper .e-chips {
1670
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1671
+ height: $outline-multiselect-chip-height;
1672
+ margin: $outline-multiselect-chip-margin;
1673
+ padding: $outline-multiselect-chip-padding;
1674
+ }
1675
+ }
1676
+
1677
+ .e-rtl .e-multiselect.e-outline .e-multi-select-wrapper .e-chips,
1678
+ .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper .e-chips {
1679
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1680
+ margin: $outline-rtl-multiselect-chip-margin;
1681
+ }
1682
+ }
1683
+
1684
+ .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips,
1685
+ .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-chips {
1686
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1687
+ height: $outline-multiselect-bigger-chip-height;
1688
+ padding: $outline-multiselect-bigger-chip-padding;
1689
+ }
1690
+ }
1691
+
1692
+ .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips,
1693
+ .e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-chips {
1694
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1695
+ height: $outline-multiselect-small-chip-height;
1696
+ padding: $outline-multiselect-chip-padding;
1697
+ }
1698
+ }
1699
+
1700
+ .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips,
1701
+ .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-chips,
1702
+ .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips,
1703
+ .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips {
1704
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1705
+ height: $outline-multiselect-chip-height;
1706
+ padding: $outline-multiselect-chip-padding;
1707
+ }
1708
+ }
1709
+
1710
+ .e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent {
1711
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1712
+ padding: 0 8px 0 0;
1713
+ }
1714
+ }
1715
+
1716
+ .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent,
1717
+ .e-rtl .e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent {
1718
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1719
+ padding: 0 0 0 8px;
1720
+ }
1721
+ }
1722
+
1723
+ .e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent,
1724
+ .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent,
1725
+ .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent,
1726
+ .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent,
1727
+ .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent {
1728
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1729
+ font-size: $outline-multiselect-chip-font-size;
1730
+ }
1731
+ }
1732
+
1733
+ .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent,
1734
+ .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent {
1735
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1736
+ font-size: $outline-multiselect-bigger-chip-font-size;
1737
+ }
1738
+ }
1739
+
1740
+ .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent,
1741
+ .e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent {
1742
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1743
+ font-size: $outline-multiselect-small-chip-font-size;
1744
+ }
1745
+ }
1746
+
1747
+ .e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
1748
+ .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
1749
+ align-items: normal;
1750
+ }
1751
+
1752
+ //+2 more configutations
1753
+
1754
+ .e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
1755
+ .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain {
1756
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1757
+ font-size: 14px;
1758
+ }
1759
+ }
1760
+
1761
+ .e-bigger.e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
1762
+ .e-bigger .e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
1763
+ .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain,
1764
+ .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain {
1765
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1766
+ font-size: 16px;
1767
+ }
1768
+ }
1769
+
1770
+ .e-small.e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
1771
+ .e-small .e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
1772
+ .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain,
1773
+ .e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain {
1774
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1775
+ font-size: 13px;
1776
+ }
1777
+ }
1778
+
1779
+ .e-bigger.e-small.e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
1780
+ .e-bigger.e-small .e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
1781
+ .e-bigger .e-small.e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
1782
+ .e-small .e-bigger.e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
1783
+ .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain,
1784
+ .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain,
1785
+ .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain,
1786
+ .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain {
1787
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1788
+ font-size: 14px;
1789
+ }
1790
+ }
1791
+
1792
+ // Filled theme specifications
1793
+
1794
+ // Multiselect wrapper
1795
+ .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper {
1796
+ padding: 0 12px 0 8px;
1797
+ }
1798
+
1799
+ .e-small.e-filled:not(.e-bigger).e-multiselect:not(.e-float-input) .e-multi-select-wrapper,
1800
+ .e-small .e-filled:not(.e-bigger).e-multiselect:not(.e-float-input) .e-multi-select-wrapper {
1801
+ padding: 3px 12px 0 4px;
1802
+ }
1803
+
1804
+ .e-multiselect.e-filled.e-input-group.e-control-wrapper,
1805
+ .e-bigger.e-small.e-multiselect.e-filled.e-input-group.e-control-wrapper,
1806
+ .e-bigger.e-small .e-multiselect.e-filled.e-input-group.e-control-wrapper,
1807
+ .e-bigger .e-small.e-multiselect.e-filled.e-input-group.e-control-wrapper,
1808
+ .e-small .e-bigger.e-multiselect.e-filled.e-input-group.e-control-wrapper {
1809
+ padding: 0;
1810
+ }
1811
+
1812
+ .e-filled.e-float-input .e-multi-select-wrapper,
1813
+ .e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper,
1814
+ .e-bigger.e-small .e-filled.e-float-input .e-multi-select-wrapper,
1815
+ .e-bigger .e-small.e-filled.e-float-input .e-multi-select-wrapper,
1816
+ .e-small .e-bigger.e-filled.e-float-input .e-multi-select-wrapper {
1817
+ padding: 11px 12px 0;
1818
+ }
1819
+
1820
+ .e-small.e-filled.e-float-input .e-multi-select-wrapper,
1821
+ .e-small .e-filled.e-float-input .e-multi-select-wrapper {
1822
+ padding: 12px 12px 0 8px;
1823
+ }
1824
+
1825
+ .e-bigger.e-filled.e-float-input .e-multi-select-wrapper,
1826
+ .e-bigger .e-filled.e-float-input .e-multi-select-wrapper {
1827
+ padding: 19px 12px 0 16px;
1828
+ }
1829
+
1830
+ .e-bigger:not(.e-small).e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper {
1831
+ padding-top: 3px;
1832
+ }
1833
+
1834
+ .e-rtl.e-multiselect.e-filled.e-input-group.e-control-wrapper,
1835
+ .e-rtl.e-multiselect.e-filled.e-float-input.e-control-wrapper {
1836
+ padding: 0;
1837
+ }
1838
+
1839
+ // Searchable input
1840
+
1841
+ .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
1842
+ .e-bigger.e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
1843
+ .e-bigger.e-small .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
1844
+ .e-bigger .e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
1845
+ .e-small .e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'] {
1846
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1847
+ min-height: $ddl-multiselect-filled-input-min-height;
1848
+ padding-right: 10px;
1849
+ }
1850
+ }
1851
+
1852
+ .e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
1853
+ .e-small .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'] {
1854
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1855
+ min-height: $ddl-multiselect-filled-input-min-height-small;
1856
+ }
1857
+ }
1858
+
1859
+ .e-small.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper input[type = 'text'],
1860
+ .e-small .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper input[type = 'text'] {
1861
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1862
+ height: $ddl-multiselect-filled-float-input-min-height-small;
1863
+ min-height: $ddl-multiselect-filled-float-input-min-height-small;
1864
+ padding: 2px;
1865
+ }
1866
+ }
1867
+
1868
+ .e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
1869
+ .e-bigger .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'] {
1870
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1871
+ min-height: $ddl-multiselect-filled-input-min-height-bigger;
1872
+ }
1873
+ }
1874
+
1875
+ .e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper input[type = 'text'],
1876
+ .e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper input[type = 'text'] {
1877
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1878
+ min-height: $ddl-multiselect-filled-float-input-min-height-bigger;
1879
+ }
1880
+ }
1881
+
1882
+ .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper.e-delimiter .e-searcher {
1883
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1884
+ height: $ddl-multiselect-filled-input-min-height;
1885
+ }
1886
+ }
1887
+
1888
+ .e-small.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper.e-delimiter .e-searcher,
1889
+ .e-small .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper.e-delimiter .e-searcher {
1890
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1891
+ height: $ddl-multiselect-filled-input-min-height-small;
1892
+ }
1893
+ }
1894
+
1895
+ .e-small.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher,
1896
+ .e-small .e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher {
1897
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1898
+ height: $ddl-multiselect-filled-float-input-min-height-small;
1899
+ }
1900
+ }
1901
+
1902
+ .e-bigger.e-filled:not(.e-small).e-multiselect:not(.e-float-input) .e-multi-select-wrapper.e-delimiter .e-searcher,
1903
+ .e-bigger .e-filled:not(.e-small).e-multiselect:not(.e-float-input) .e-multi-select-wrapper.e-delimiter .e-searcher {
1904
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1905
+ height: $ddl-multiselect-filled-input-min-height-bigger;
1906
+ }
1907
+ }
1908
+
1909
+ .e-bigger.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher,
1910
+ .e-bigger .e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher {
1911
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1912
+ height: $ddl-multiselect-filled-float-input-min-height-bigger;
1913
+ }
1914
+ }
1915
+
1916
+ .e-bigger.e-small.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher,
1917
+ .e-bigger.e-small .e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher .e-bigger .e-small.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher,
1918
+ .e-small .e-bigger.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher {
1919
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1920
+ height: $ddl-multiselect-filled-float-input-min-height;
1921
+ }
1922
+ }
1923
+
1924
+ .e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper.e-delimiter input[type = 'text'],
1925
+ .e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper.e-delimiter input[type = 'text'] {
1926
+ padding: 5px 0;
1927
+ }
1928
+
1929
+ .e-multiselect.e-filled.e-float-input .e-searcher .e-dropdownbase,
1930
+ .e-bigger.e-small.e-multiselect.e-filled.e-float-input .e-searcher .e-dropdownbase,
1931
+ .e-bigger.e-small .e-multiselect.e-filled.e-float-input .e-searcher .e-dropdownbase,
1932
+ .e-bigger .e-small.e-multiselect.e-filled.e-float-input .e-searcher .e-dropdownbase,
1933
+ .e-small .e-bigger.e-multiselect.e-filled.e-float-input .e-searcher .e-dropdownbase {
1934
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1935
+ min-height: $ddl-multiselect-filled-float-input-min-height;
1936
+ }
1937
+ }
1938
+
1939
+ // Delimiter wrapper specifications
1940
+
1941
+ .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
1942
+ .e-small.e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
1943
+ .e-small.e-bigger .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
1944
+ .e-small .e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
1945
+ .e-bigger .e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values {
1946
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1947
+ font-size: 13px;
1948
+ line-height: $ddl-multiselect-filled-input-min-height;
1949
+ }
1950
+ }
1951
+
1952
+ .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
1953
+ .e-small.e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
1954
+ .e-small.e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
1955
+ .e-small .e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
1956
+ .e-bigger .e-small.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values {
1957
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1958
+ font-size: 14px;
1959
+ line-height: $ddl-multiselect-filled-float-input-min-height;
1960
+ }
1961
+ }
1962
+
1963
+ .e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
1964
+ .e-bigger .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
1965
+ .e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
1966
+ .e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values {
1967
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1968
+ font-size: 16px;
1969
+ line-height: $ddl-multiselect-filled-input-min-height-bigger;
1970
+ }
1971
+ }
1972
+
1973
+ .e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
1974
+ .e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values {
1975
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1976
+ line-height: $ddl-multiselect-filled-float-input-min-height-bigger;
1977
+ }
1978
+ }
1979
+
1980
+ .e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
1981
+ .e-small .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
1982
+ .e-small.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
1983
+ .e-small .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values {
1984
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1985
+ font-size: $ddl-delim-bigger-small-font-size;
1986
+ line-height: $ddl-multiselect-filled-input-min-height-small;
1987
+ }
1988
+ }
1989
+
1990
+ .e-small.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
1991
+ .e-small .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values {
1992
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
1993
+ line-height: $ddl-multiselect-filled-float-input-min-height-small;
1994
+ }
1995
+ }
1996
+
1997
+ // Chip specifications
1998
+
1999
+ .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2000
+ .e-bigger.e-small.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2001
+ .e-bigger.e-small .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2002
+ .e-bigger .e-small.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2003
+ .e-small .e-bigger.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips {
2004
+ height: 28px;
2005
+ }
2006
+
2007
+ .e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2008
+ .e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2009
+ .e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2010
+ .e-small .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
2011
+ height: 24px;
2012
+ }
2013
+
2014
+ .e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2015
+ .e-bigger .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
2016
+ height: 32px;
2017
+ }
2018
+
2019
+ .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper.e-mob-wrapper .e-chips.e-mob-chip {
2020
+ height: 24px;
2021
+ }
2022
+
2023
+ .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2024
+ .e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2025
+ .e-bigger.e-small .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2026
+ .e-bigger .e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2027
+ .e-small .e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips {
2028
+ height: 18px;
2029
+ }
2030
+
2031
+ .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2032
+ .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2033
+ .e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2034
+ .e-bigger.e-small .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2035
+ .e-bigger .e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2036
+ .e-small .e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2037
+ .e-bigger.e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2038
+ .e-bigger.e-small .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2039
+ .e-bigger .e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2040
+ .e-small .e-bigger.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
2041
+ margin: 8px 8px 0 0;
2042
+ padding: 0 8px;
2043
+ }
2044
+
2045
+ .e-rtl.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2046
+ .e-rtl.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2047
+ .e-rtl.e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2048
+ .e-rtl.e-bigger.e-small .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2049
+ .e-rtl.e-bigger .e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2050
+ .e-rtl.e-small .e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2051
+ .e-rtl.e-bigger.e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2052
+ .e-rtl.e-bigger.e-small .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2053
+ .e-rtl.e-bigger .e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2054
+ .e-rtl.e-small .e-bigger.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
2055
+ margin: 8px 0 0 8px;
2056
+ padding: 0 8px;
2057
+ }
2058
+
2059
+ .e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2060
+ .e-bigger.e-small .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2061
+ .e-bigger .e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2062
+ .e-small .e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips {
2063
+ padding-left: 8px;
2064
+ }
2065
+
2066
+ .e-small .e-filled .e-multi-select-wrapper .e-chips,
2067
+ .e-small.e-filled .e-multi-select-wrapper .e-chips {
2068
+ height: 16px;
2069
+ margin: 4px 4px 0 0;
2070
+ padding-right: 8px;
2071
+ }
2072
+
2073
+ .e.rtl.e-small .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2074
+ .e-rtl.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips {
2075
+ margin: 4px 0 0 4px;
2076
+ }
2077
+
2078
+ .e-small .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
2079
+ .e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
2080
+ height: 24px;
2081
+ }
2082
+
2083
+ .e-filled.e-multiselect.e-float-input .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close,
2084
+ .e-small.e-filled:not(.e-bigger).e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close,
2085
+ .e-small .e-filled:not(.e-bigger).e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close,
2086
+ .e-bigger.e-small.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close,
2087
+ .e-bigger.e-small .e-filled.e-multiselect.e-float-input .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close,
2088
+ .e-bigger .e-small.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close,
2089
+ .e-small .e-bigger.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close {
2090
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
2091
+ height: $ddl-multiselect-filled-float-input-chip-clear-icon-size;
2092
+ width: $ddl-multiselect-filled-float-input-chip-clear-icon-size;
2093
+ }
2094
+ }
2095
+
2096
+ .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent,
2097
+ .e-bigger.e-small.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent,
2098
+ .e-bigger.e-small .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent,
2099
+ .e-bigger .e-small.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent,
2100
+ .e-small .e-bigger.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent {
2101
+ font-size: 13px;
2102
+ padding: 0 8px 0 0;
2103
+ }
2104
+
2105
+ .e-small.e-filled.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2106
+ .e-small .e-filled.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent {
2107
+ font-size: 12px;
2108
+ }
2109
+
2110
+ .e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2111
+ .e-bigger.e-small.e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2112
+ .e-bigger.e-small .e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2113
+ .e-bigger .e-small.e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2114
+ .e-small .e-bigger.e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent {
2115
+ font-size: 12px;
2116
+ padding: 0 4px 0 0;
2117
+ }
2118
+
2119
+ .e-rtl.e-filled.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2120
+ .e-rtl.e-bigger.e-small.e-filled.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2121
+ .e-rtl.e-bigger.e-small .e-filled.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2122
+ .e-rtl.e-bigger .e-small.e-filled.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2123
+ .e-rtl.e-small .e-bigger.e-filled.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent {
2124
+ padding: 0 0 0 4px;
2125
+ }
2126
+
2127
+ .e-small.e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2128
+ .e-small .e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent {
2129
+ font-size: 10px;
2130
+ }
2131
+
2132
+ .e-bigger.e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
2133
+ .e-bigger .e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent {
2134
+ font-size: 13px;
2135
+ }
2136
+
2137
+ .e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-mob-wrapper .e-chips > .e-chipcontent {
2138
+ font-size: 13px;
2139
+ padding-right: 4px;
2140
+ }
2141
+
2142
+ .e-bigger.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent,
2143
+ .e-bigger .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent {
2144
+ @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
2145
+ font-size: $ddl-multiselect-filled-chip-clear-icon-size;
2146
+ }
2147
+ }
2148
+
2149
+ .e-rtl.e-bigger.e-filled .e-multi-select-wrapper .e-chips,
2150
+ .e-rtl.e-bigger .e-filled .e-multi-select-wrapper .e-chips,
2151
+ .e-rtl.e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2152
+ .e-rtl.e-bigger .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2153
+ .e-bigger.e-filled .e-multi-select-wrapper .e-chips,
2154
+ .e-bigger .e-filled .e-multi-select-wrapper .e-chips {
2155
+ padding: 0 12px;
2156
+ }
2157
+
2158
+ .e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
2159
+ .e-bigger .e-filled.e-float-input .e-multi-select-wrapper .e-chips {
2160
+ padding-right: 8px;
2161
+ }
2162
+
2163
+ // Clear icon styles
2164
+
2165
+ .e-filled.e-multi-select-wrapper .e-chips-close.e-close-hooker,
2166
+ .e-multiselect.e-control-container .e-filled.e-multi-select-wrapper .e-clear-icon {
2167
+ height: 38px;
2168
+ margin-top: -38px;
2169
+ right: 12px;
2170
+ top: 100%;
2171
+ width: 16px;
2172
+ }
2173
+
2174
+ .e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
2175
+ .e-outline.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
2176
+ .e-filled.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
2177
+ .e-multiselect.e-readonly.e-control-wrapper.e-input-group.e-control-container :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon,
2178
+ .e-multiselect.e-readonly.e-control-wrapper.e-input-group.e-control-container.e-input-group :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon {
2179
+ display: none;
2180
+ }
2181
+
2182
+ .e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
2183
+ @if $ddl-multiselect-skin-name != 'Material3' {
2184
+ margin-right: 0;
2185
+ }
2186
+ @else {
2187
+ margin: 0;
2188
+ }
2189
+ }
2190
+
2191
+ .e-multiselect.e-control-container.e-input-group.e-disabled .e-input-group-icon.e-ddl-icon.e-icons,
2192
+ .e-multiselect.e-control-container.e-input-group.e-disabled .e-clear-icon {
2193
+ cursor: not-allowed;
2194
+ }
2195
+
2196
+ .e-multiselect.e-control-wrapper.e-control-container.e-input-group.e-checkbox .e-multi-select-wrapper.e-down-icon,
2197
+ .e-multiselect.e-control-wrapper.e-control-container.e-input-group.e-checkbox .e-multi-select-wrapper.e-down-icon .e-multi-searcher .e-dropdownbase.e-control.e-multiselect.e-lib {
2198
+ cursor: pointer;
2199
+ }