@syncfusion/ej2-dropdowns 23.1.43 → 23.2.4-13895

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 (288) hide show
  1. package/CHANGELOG.md +2114 -2084
  2. package/{README.md → ReadMe.md} +217 -217
  3. package/dist/ej2-dropdowns.min.js +1 -10
  4. package/dist/ej2-dropdowns.umd.min.js +1 -10
  5. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es2015.js +83 -71
  7. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  8. package/dist/es6/ej2-dropdowns.es5.js +225 -212
  9. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  10. package/dist/global/ej2-dropdowns.min.js +1 -10
  11. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  12. package/dist/global/index.d.ts +0 -9
  13. package/dist/ts/auto-complete/auto-complete.ts +615 -0
  14. package/dist/ts/combo-box/combo-box.ts +1028 -0
  15. package/dist/ts/common/highlight-search.ts +57 -0
  16. package/dist/ts/common/incremental-search.ts +131 -0
  17. package/dist/ts/common/interface.ts +72 -0
  18. package/dist/ts/common/virtual-scroll.ts +354 -0
  19. package/dist/ts/drop-down-base/drop-down-base.ts +1864 -0
  20. package/dist/ts/drop-down-list/drop-down-list.ts +3954 -0
  21. package/dist/ts/drop-down-tree/drop-down-tree.ts +3741 -0
  22. package/dist/ts/list-box/list-box.ts +2753 -0
  23. package/dist/ts/mention/mention.ts +1857 -0
  24. package/dist/ts/multi-select/checkbox-selection.ts +547 -0
  25. package/dist/ts/multi-select/float-label.ts +176 -0
  26. package/dist/ts/multi-select/interface.ts +70 -0
  27. package/dist/ts/multi-select/multi-select.ts +4880 -0
  28. package/helpers/e2e/autocomplete.js +13 -13
  29. package/helpers/e2e/combobox.js +13 -13
  30. package/helpers/e2e/dropdownlist.js +13 -13
  31. package/helpers/e2e/index.js +3 -3
  32. package/helpers/e2e/listboxHelper.js +13 -13
  33. package/helpers/e2e/multiselect.js +13 -13
  34. package/license +2 -2
  35. package/package.json +80 -80
  36. package/src/auto-complete/auto-complete-model.d.ts +188 -188
  37. package/src/auto-complete/auto-complete.d.ts +12 -12
  38. package/src/auto-complete/auto-complete.js +21 -21
  39. package/src/combo-box/combo-box-model.d.ts +224 -224
  40. package/src/combo-box/combo-box.d.ts +27 -27
  41. package/src/combo-box/combo-box.js +29 -29
  42. package/src/common/virtual-scroll.js +46 -46
  43. package/src/drop-down-base/drop-down-base-model.d.ts +200 -200
  44. package/src/drop-down-base/drop-down-base.d.ts +15 -15
  45. package/src/drop-down-base/drop-down-base.js +23 -21
  46. package/src/drop-down-list/drop-down-list-model.d.ts +202 -202
  47. package/src/drop-down-list/drop-down-list.d.ts +4 -4
  48. package/src/drop-down-list/drop-down-list.js +24 -21
  49. package/src/drop-down-tree/drop-down-tree-model.d.ts +468 -468
  50. package/src/drop-down-tree/drop-down-tree.d.ts +0 -1
  51. package/src/drop-down-tree/drop-down-tree.js +19 -27
  52. package/src/list-box/list-box-model.d.ts +193 -193
  53. package/src/list-box/list-box.d.ts +5 -2
  54. package/src/list-box/list-box.js +38 -21
  55. package/src/mention/mention-model.d.ts +261 -261
  56. package/src/mention/mention.js +20 -21
  57. package/src/multi-select/multi-select-model.d.ts +512 -512
  58. package/src/multi-select/multi-select.js +19 -19
  59. package/styles/auto-complete/_all.scss +1 -1
  60. package/styles/auto-complete/_bootstrap-dark-definition.scss +3 -3
  61. package/styles/auto-complete/_bootstrap-definition.scss +2 -2
  62. package/styles/auto-complete/_bootstrap4-definition.scss +11 -11
  63. package/styles/auto-complete/_bootstrap5-definition.scss +2 -2
  64. package/styles/auto-complete/_fabric-dark-definition.scss +2 -2
  65. package/styles/auto-complete/_fabric-definition.scss +2 -2
  66. package/styles/auto-complete/_fluent-definition.scss +2 -2
  67. package/styles/auto-complete/_fusionnew-definition.scss +2 -2
  68. package/styles/auto-complete/_highcontrast-definition.scss +2 -2
  69. package/styles/auto-complete/_highcontrast-light-definition.scss +2 -2
  70. package/styles/auto-complete/_material-dark-definition.scss +2 -2
  71. package/styles/auto-complete/_material-definition.scss +2 -2
  72. package/styles/auto-complete/_material3-definition.scss +2 -2
  73. package/styles/auto-complete/_tailwind-definition.scss +2 -2
  74. package/styles/auto-complete/material3-dark.scss +1 -1
  75. package/styles/auto-complete/material3.scss +1 -1
  76. package/styles/bootstrap-dark.css +5 -0
  77. package/styles/bootstrap5-dark.css +2 -1
  78. package/styles/bootstrap5.css +2 -1
  79. package/styles/combo-box/_all.scss +1 -1
  80. package/styles/combo-box/_bootstrap-dark-definition.scss +2 -2
  81. package/styles/combo-box/_bootstrap-definition.scss +2 -2
  82. package/styles/combo-box/_bootstrap4-definition.scss +11 -11
  83. package/styles/combo-box/_bootstrap5-definition.scss +2 -2
  84. package/styles/combo-box/_fabric-dark-definition.scss +2 -2
  85. package/styles/combo-box/_fabric-definition.scss +2 -2
  86. package/styles/combo-box/_fluent-definition.scss +2 -2
  87. package/styles/combo-box/_fusionnew-definition.scss +2 -2
  88. package/styles/combo-box/_highcontrast-definition.scss +2 -2
  89. package/styles/combo-box/_highcontrast-light-definition.scss +3 -3
  90. package/styles/combo-box/_material-dark-definition.scss +2 -2
  91. package/styles/combo-box/_material-definition.scss +2 -2
  92. package/styles/combo-box/_material3-definition.scss +2 -2
  93. package/styles/combo-box/_tailwind-definition.scss +2 -2
  94. package/styles/combo-box/material3-dark.scss +1 -1
  95. package/styles/combo-box/material3.scss +1 -1
  96. package/styles/drop-down-base/_all.scss +2 -2
  97. package/styles/drop-down-base/_bootstrap-dark-definition.scss +83 -83
  98. package/styles/drop-down-base/_bootstrap-definition.scss +83 -83
  99. package/styles/drop-down-base/_bootstrap4-definition.scss +90 -90
  100. package/styles/drop-down-base/_bootstrap5-definition.scss +117 -117
  101. package/styles/drop-down-base/_definition.scss +23 -23
  102. package/styles/drop-down-base/_fabric-dark-definition.scss +86 -86
  103. package/styles/drop-down-base/_fabric-definition.scss +84 -84
  104. package/styles/drop-down-base/_fluent-definition.scss +121 -121
  105. package/styles/drop-down-base/_fusionnew-definition.scss +117 -117
  106. package/styles/drop-down-base/_highcontrast-definition.scss +105 -105
  107. package/styles/drop-down-base/_highcontrast-light-definition.scss +105 -105
  108. package/styles/drop-down-base/_layout.scss +195 -195
  109. package/styles/drop-down-base/_material-dark-definition.scss +86 -86
  110. package/styles/drop-down-base/_material-definition.scss +85 -85
  111. package/styles/drop-down-base/_material3-definition.scss +87 -87
  112. package/styles/drop-down-base/_tailwind-definition.scss +129 -129
  113. package/styles/drop-down-base/_theme.scss +391 -391
  114. package/styles/drop-down-base/material3-dark.scss +1 -1
  115. package/styles/drop-down-base/material3.scss +1 -1
  116. package/styles/drop-down-list/_all.scss +3 -3
  117. package/styles/drop-down-list/_bootstrap-dark-definition.scss +157 -157
  118. package/styles/drop-down-list/_bootstrap-definition.scss +156 -156
  119. package/styles/drop-down-list/_bootstrap4-definition.scss +202 -202
  120. package/styles/drop-down-list/_bootstrap5-definition.scss +201 -201
  121. package/styles/drop-down-list/_fabric-dark-definition.scss +128 -128
  122. package/styles/drop-down-list/_fabric-definition.scss +124 -124
  123. package/styles/drop-down-list/_fluent-definition.scss +185 -185
  124. package/styles/drop-down-list/_fusionnew-definition.scss +201 -201
  125. package/styles/drop-down-list/_highcontrast-definition.scss +142 -142
  126. package/styles/drop-down-list/_highcontrast-light-definition.scss +144 -144
  127. package/styles/drop-down-list/_layout.scss +310 -310
  128. package/styles/drop-down-list/_material-dark-definition.scss +143 -143
  129. package/styles/drop-down-list/_material-definition.scss +167 -167
  130. package/styles/drop-down-list/_material3-definition.scss +180 -180
  131. package/styles/drop-down-list/_tailwind-definition.scss +134 -134
  132. package/styles/drop-down-list/_theme.scss +10 -10
  133. package/styles/drop-down-list/icons/_bootstrap-dark.scss +14 -14
  134. package/styles/drop-down-list/icons/_bootstrap.scss +14 -14
  135. package/styles/drop-down-list/icons/_bootstrap4.scss +14 -14
  136. package/styles/drop-down-list/icons/_bootstrap5.scss +14 -14
  137. package/styles/drop-down-list/icons/_fabric-dark.scss +14 -14
  138. package/styles/drop-down-list/icons/_fabric.scss +14 -14
  139. package/styles/drop-down-list/icons/_fluent.scss +14 -14
  140. package/styles/drop-down-list/icons/_fusionnew.scss +14 -14
  141. package/styles/drop-down-list/icons/_highcontrast-light.scss +14 -14
  142. package/styles/drop-down-list/icons/_highcontrast.scss +14 -14
  143. package/styles/drop-down-list/icons/_material-dark.scss +14 -14
  144. package/styles/drop-down-list/icons/_material.scss +14 -14
  145. package/styles/drop-down-list/icons/_material3.scss +14 -14
  146. package/styles/drop-down-list/icons/_tailwind.scss +14 -14
  147. package/styles/drop-down-list/material3-dark.scss +1 -1
  148. package/styles/drop-down-list/material3.scss +1 -1
  149. package/styles/drop-down-tree/_all.scss +2 -2
  150. package/styles/drop-down-tree/_bootstrap-dark-definition.scss +71 -71
  151. package/styles/drop-down-tree/_bootstrap-definition.scss +70 -70
  152. package/styles/drop-down-tree/_bootstrap4-definition.scss +71 -71
  153. package/styles/drop-down-tree/_bootstrap5-definition.scss +59 -59
  154. package/styles/drop-down-tree/_fabric-dark-definition.scss +71 -71
  155. package/styles/drop-down-tree/_fabric-definition.scss +71 -71
  156. package/styles/drop-down-tree/_fluent-definition.scss +65 -65
  157. package/styles/drop-down-tree/_fusionnew-definition.scss +59 -59
  158. package/styles/drop-down-tree/_highcontrast-definition.scss +71 -71
  159. package/styles/drop-down-tree/_highcontrast-light-definition.scss +71 -71
  160. package/styles/drop-down-tree/_layout.scss +1418 -1412
  161. package/styles/drop-down-tree/_material-dark-definition.scss +72 -72
  162. package/styles/drop-down-tree/_material-definition.scss +72 -72
  163. package/styles/drop-down-tree/_material3-definition.scss +76 -76
  164. package/styles/drop-down-tree/_tailwind-definition.scss +61 -61
  165. package/styles/drop-down-tree/_theme.scss +132 -132
  166. package/styles/drop-down-tree/fluent-dark.css +2 -0
  167. package/styles/drop-down-tree/fluent.css +2 -0
  168. package/styles/drop-down-tree/icons/_bootstrap-dark.scss +11 -11
  169. package/styles/drop-down-tree/icons/_bootstrap.scss +11 -11
  170. package/styles/drop-down-tree/icons/_bootstrap4.scss +11 -11
  171. package/styles/drop-down-tree/icons/_bootstrap5.scss +11 -11
  172. package/styles/drop-down-tree/icons/_fabric-dark.scss +11 -11
  173. package/styles/drop-down-tree/icons/_fabric.scss +11 -11
  174. package/styles/drop-down-tree/icons/_fluent.scss +11 -11
  175. package/styles/drop-down-tree/icons/_fusionnew.scss +11 -11
  176. package/styles/drop-down-tree/icons/_highcontrast-light.scss +11 -11
  177. package/styles/drop-down-tree/icons/_highcontrast.scss +11 -11
  178. package/styles/drop-down-tree/icons/_material-dark.scss +11 -11
  179. package/styles/drop-down-tree/icons/_material.scss +11 -11
  180. package/styles/drop-down-tree/icons/_material3.scss +11 -11
  181. package/styles/drop-down-tree/icons/_tailwind-dark.scss +11 -11
  182. package/styles/drop-down-tree/icons/_tailwind.scss +11 -11
  183. package/styles/drop-down-tree/material3-dark.scss +1 -1
  184. package/styles/drop-down-tree/material3.scss +1 -1
  185. package/styles/fabric-dark.css +5 -0
  186. package/styles/fluent-dark.css +4 -1
  187. package/styles/fluent.css +4 -1
  188. package/styles/highcontrast.css +5 -0
  189. package/styles/list-box/_all.scss +2 -2
  190. package/styles/list-box/_bootstrap-dark-definition.scss +126 -126
  191. package/styles/list-box/_bootstrap-definition.scss +119 -119
  192. package/styles/list-box/_bootstrap4-definition.scss +124 -124
  193. package/styles/list-box/_bootstrap5-definition.scss +120 -120
  194. package/styles/list-box/_fabric-dark-definition.scss +126 -126
  195. package/styles/list-box/_fabric-definition.scss +119 -119
  196. package/styles/list-box/_fluent-definition.scss +120 -120
  197. package/styles/list-box/_fusionnew-definition.scss +111 -111
  198. package/styles/list-box/_highcontrast-definition.scss +119 -119
  199. package/styles/list-box/_highcontrast-light-definition.scss +126 -126
  200. package/styles/list-box/_layout.scss +542 -542
  201. package/styles/list-box/_material-dark-definition.scss +126 -126
  202. package/styles/list-box/_material-definition.scss +119 -119
  203. package/styles/list-box/_material3-definition.scss +119 -119
  204. package/styles/list-box/_tailwind-definition.scss +119 -119
  205. package/styles/list-box/_theme.scss +382 -382
  206. package/styles/list-box/icons/_bootstrap-dark.scss +25 -25
  207. package/styles/list-box/icons/_bootstrap.scss +25 -25
  208. package/styles/list-box/icons/_bootstrap4.scss +25 -25
  209. package/styles/list-box/icons/_bootstrap5.scss +25 -25
  210. package/styles/list-box/icons/_fabric-dark.scss +25 -25
  211. package/styles/list-box/icons/_fabric.scss +25 -25
  212. package/styles/list-box/icons/_fluent.scss +25 -25
  213. package/styles/list-box/icons/_fusionnew.scss +25 -25
  214. package/styles/list-box/icons/_highcontrast-light.scss +25 -25
  215. package/styles/list-box/icons/_highcontrast.scss +25 -25
  216. package/styles/list-box/icons/_material-dark.scss +25 -25
  217. package/styles/list-box/icons/_material.scss +25 -25
  218. package/styles/list-box/icons/_material3.scss +25 -25
  219. package/styles/list-box/icons/_tailwind-dark.scss +25 -25
  220. package/styles/list-box/icons/_tailwind.scss +25 -25
  221. package/styles/list-box/material3-dark.scss +1 -1
  222. package/styles/list-box/material3.scss +1 -1
  223. package/styles/material3-dark.scss +1 -1
  224. package/styles/material3.scss +1 -1
  225. package/styles/mention/_all.scss +1 -1
  226. package/styles/mention/_bootstrap-dark-definition.scss +3 -3
  227. package/styles/mention/_bootstrap-definition.scss +3 -3
  228. package/styles/mention/_bootstrap4-definition.scss +3 -3
  229. package/styles/mention/_bootstrap5-definition.scss +1 -1
  230. package/styles/mention/_fabric-dark-definition.scss +2 -2
  231. package/styles/mention/_fabric-definition.scss +3 -3
  232. package/styles/mention/_fluent-definition.scss +1 -1
  233. package/styles/mention/_fusionnew-definition.scss +1 -1
  234. package/styles/mention/_highcontrast-definition.scss +3 -3
  235. package/styles/mention/_highcontrast-light-definition.scss +3 -3
  236. package/styles/mention/_layout.scss +6 -6
  237. package/styles/mention/_material-dark-definition.scss +3 -3
  238. package/styles/mention/_material-definition.scss +3 -3
  239. package/styles/mention/_material3-definition.scss +1 -1
  240. package/styles/mention/_tailwind-definition.scss +1 -1
  241. package/styles/mention/material3-dark.scss +1 -1
  242. package/styles/mention/material3.scss +1 -1
  243. package/styles/multi-select/_all.scss +2 -2
  244. package/styles/multi-select/_bootstrap-dark-definition.scss +203 -198
  245. package/styles/multi-select/_bootstrap-definition.scss +192 -192
  246. package/styles/multi-select/_bootstrap4-definition.scss +278 -278
  247. package/styles/multi-select/_bootstrap5-definition.scss +230 -229
  248. package/styles/multi-select/_fabric-dark-definition.scss +192 -187
  249. package/styles/multi-select/_fabric-definition.scss +183 -183
  250. package/styles/multi-select/_fluent-definition.scss +241 -240
  251. package/styles/multi-select/_fusionnew-definition.scss +227 -227
  252. package/styles/multi-select/_highcontrast-definition.scss +303 -298
  253. package/styles/multi-select/_highcontrast-light-definition.scss +297 -297
  254. package/styles/multi-select/_layout.scss +2199 -2199
  255. package/styles/multi-select/_material-dark-definition.scss +230 -230
  256. package/styles/multi-select/_material-definition.scss +223 -223
  257. package/styles/multi-select/_material3-definition.scss +246 -246
  258. package/styles/multi-select/_tailwind-definition.scss +235 -234
  259. package/styles/multi-select/_theme.scss +586 -586
  260. package/styles/multi-select/bootstrap-dark.css +5 -0
  261. package/styles/multi-select/bootstrap5-dark.css +2 -1
  262. package/styles/multi-select/bootstrap5.css +2 -1
  263. package/styles/multi-select/fabric-dark.css +5 -0
  264. package/styles/multi-select/fluent-dark.css +2 -1
  265. package/styles/multi-select/fluent.css +2 -1
  266. package/styles/multi-select/highcontrast.css +5 -0
  267. package/styles/multi-select/icons/_bootstrap-dark.scss +26 -26
  268. package/styles/multi-select/icons/_bootstrap.scss +26 -26
  269. package/styles/multi-select/icons/_bootstrap4.scss +37 -37
  270. package/styles/multi-select/icons/_bootstrap5.scss +26 -26
  271. package/styles/multi-select/icons/_fabric-dark.scss +26 -26
  272. package/styles/multi-select/icons/_fabric.scss +26 -26
  273. package/styles/multi-select/icons/_fluent.scss +55 -55
  274. package/styles/multi-select/icons/_fusionnew.scss +26 -26
  275. package/styles/multi-select/icons/_highcontrast-light.scss +26 -26
  276. package/styles/multi-select/icons/_highcontrast.scss +26 -26
  277. package/styles/multi-select/icons/_material-dark.scss +693 -693
  278. package/styles/multi-select/icons/_material.scss +693 -693
  279. package/styles/multi-select/icons/_material3.scss +692 -692
  280. package/styles/multi-select/icons/_tailwind.scss +26 -26
  281. package/styles/multi-select/material3-dark.scss +1 -1
  282. package/styles/multi-select/material3.scss +1 -1
  283. package/styles/multi-select/tailwind-dark.css +2 -1
  284. package/styles/multi-select/tailwind.css +2 -1
  285. package/styles/tailwind-dark.css +2 -1
  286. package/styles/tailwind.css +2 -1
  287. package/.eslintrc.json +0 -260
  288. package/tslint.json +0 -111
@@ -1,2199 +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
- .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
- }
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
+ }