@keenmate/web-multiselect 1.0.0-rc11 → 1.1.0
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.
- package/README.md +554 -89
- package/dist/multiselect.js +1508 -1267
- package/dist/multiselect.umd.js +42 -47
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/scss/_badges-display.scss +229 -0
- package/src/scss/_base.scss +2 -2
- package/src/scss/_css-variables.scss +364 -218
- package/src/scss/_input-dropdown.scss +82 -69
- package/src/scss/_modifiers.scss +38 -38
- package/src/scss/_options.scss +83 -65
- package/src/scss/_rtl.scss +35 -35
- package/src/scss/_tooltips-popover.scss +69 -57
- package/src/scss/_variables.scss +61 -56
- package/src/scss/main.scss +4 -4
- package/src/scss/_pills-display.scss +0 -228
|
@@ -1,228 +0,0 @@
|
|
|
1
|
-
// ==============================================================================
|
|
2
|
-
// PILLS & DISPLAY MODES
|
|
3
|
-
// ==============================================================================
|
|
4
|
-
// Pills container, count display, individual pills, and remove buttons
|
|
5
|
-
|
|
6
|
-
@use 'variables' as *;
|
|
7
|
-
|
|
8
|
-
// ==============================================================================
|
|
9
|
-
// PILLS CONTAINER
|
|
10
|
-
// ==============================================================================
|
|
11
|
-
|
|
12
|
-
// Selected pills container
|
|
13
|
-
.ml__pills {
|
|
14
|
-
display: flex;
|
|
15
|
-
flex-wrap: wrap;
|
|
16
|
-
gap: var(--ml-pills-gap, $ml-pills-gap);
|
|
17
|
-
padding: 0;
|
|
18
|
-
|
|
19
|
-
&:empty {
|
|
20
|
-
display: none;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
// Position variants
|
|
24
|
-
&--bottom {
|
|
25
|
-
margin-top: var(--ml-pills-margin-bottom, $ml-pills-margin-bottom);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
&--top {
|
|
29
|
-
margin-bottom: var(--ml-pills-margin-top, $ml-pills-margin-top);
|
|
30
|
-
order: var(--ml-order-first, $ml-order-first); // Place before multiselect in flex container
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
&--left {
|
|
34
|
-
order: var(--ml-order-first, $ml-order-first); // Place before multiselect
|
|
35
|
-
margin-right: var(--ml-pills-margin-left, $ml-pills-margin-left);
|
|
36
|
-
justify-content: flex-end; // Pills at right edge of container, close to input
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
&--right {
|
|
40
|
-
margin-left: var(--ml-pills-margin-right, $ml-pills-margin-right);
|
|
41
|
-
justify-content: flex-start; // Pills at left edge of container, close to input
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
// ==============================================================================
|
|
46
|
-
// COUNT DISPLAY MODE
|
|
47
|
-
// ==============================================================================
|
|
48
|
-
|
|
49
|
-
// Count display (alternative to pills)
|
|
50
|
-
.ml__count-display {
|
|
51
|
-
display: flex;
|
|
52
|
-
align-items: center;
|
|
53
|
-
|
|
54
|
-
&:empty {
|
|
55
|
-
display: none;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
// Position variants
|
|
59
|
-
&--bottom {
|
|
60
|
-
margin-top: var(--ml-count-display-margin-bottom, $ml-count-display-margin-bottom);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
&--top {
|
|
64
|
-
margin-bottom: var(--ml-count-display-margin-top, $ml-count-display-margin-top);
|
|
65
|
-
order: var(--ml-order-first, $ml-order-first); // Place before multiselect in flex container
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
&--left {
|
|
69
|
-
order: var(--ml-order-first, $ml-order-first); // Place before multiselect
|
|
70
|
-
margin-right: var(--ml-count-display-margin-left, $ml-count-display-margin-left);
|
|
71
|
-
justify-content: flex-start;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
&--right {
|
|
75
|
-
margin-left: var(--ml-count-display-margin-right, $ml-count-display-margin-right);
|
|
76
|
-
justify-content: flex-end;
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
// Wrapper containing count text and clear button
|
|
81
|
-
.ml__count-badge-wrapper {
|
|
82
|
-
display: inline-flex;
|
|
83
|
-
align-items: center;
|
|
84
|
-
gap: var(--ml-count-badge-wrapper-gap, $ml-count-badge-wrapper-gap);
|
|
85
|
-
background: var(--ml-count-badge-wrapper-bg, $ml-count-badge-wrapper-bg);
|
|
86
|
-
border: var(--ml-count-badge-wrapper-border, $ml-count-badge-wrapper-border);
|
|
87
|
-
border-radius: var(--ml-count-badge-wrapper-border-radius, $ml-count-badge-wrapper-border-radius);
|
|
88
|
-
padding: var(--ml-count-badge-wrapper-padding, $ml-count-badge-wrapper-padding);
|
|
89
|
-
transition: all var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
|
|
90
|
-
|
|
91
|
-
&:hover {
|
|
92
|
-
background: var(--ml-count-badge-wrapper-bg-hover, $ml-count-badge-wrapper-bg-hover);
|
|
93
|
-
border-color: var(--ml-count-badge-wrapper-border-color-hover, $ml-count-badge-wrapper-border-color-hover);
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.ml__count-text {
|
|
98
|
-
display: inline-flex;
|
|
99
|
-
align-items: center;
|
|
100
|
-
background: var(--ml-count-text-bg, $ml-count-text-bg);
|
|
101
|
-
border: var(--ml-count-text-border, $ml-count-text-border);
|
|
102
|
-
padding: 0;
|
|
103
|
-
font-size: var(--ml-count-text-font-size, $ml-count-text-font-size);
|
|
104
|
-
color: var(--ml-count-text-color, $ml-count-text-color);
|
|
105
|
-
cursor: pointer;
|
|
106
|
-
transition: color var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.ml__count-clear {
|
|
110
|
-
flex-shrink: 0;
|
|
111
|
-
display: flex;
|
|
112
|
-
align-items: center;
|
|
113
|
-
justify-content: center;
|
|
114
|
-
width: var(--ml-count-clear-size, $ml-count-clear-size);
|
|
115
|
-
height: var(--ml-count-clear-size, $ml-count-clear-size);
|
|
116
|
-
padding: 0;
|
|
117
|
-
border: none;
|
|
118
|
-
background: var(--ml-count-clear-bg, $ml-count-clear-bg);
|
|
119
|
-
color: var(--ml-count-clear-color, $ml-count-clear-color);
|
|
120
|
-
font-size: var(--ml-count-clear-font-size, $ml-count-clear-font-size);
|
|
121
|
-
line-height: var(--ml-line-height-none, $ml-line-height-none);
|
|
122
|
-
cursor: pointer;
|
|
123
|
-
border-radius: var(--ml-count-clear-border-radius, $ml-count-clear-border-radius);
|
|
124
|
-
transition: all var(--ml-transition-fast, $ml-transition-fast) var(--ml-easing-snappy, $ml-easing-snappy);
|
|
125
|
-
|
|
126
|
-
&:hover {
|
|
127
|
-
background: var(--ml-count-clear-bg-hover, $ml-count-clear-bg-hover);
|
|
128
|
-
color: var(--ml-count-clear-color-hover, $ml-count-clear-color-hover);
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
&::before {
|
|
132
|
-
content: var(--ml-icon-clear, $ml-icon-clear);
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
// ==============================================================================
|
|
137
|
-
// INDIVIDUAL PILLS
|
|
138
|
-
// ==============================================================================
|
|
139
|
-
|
|
140
|
-
// Individual pill (styled like Pure Admin composite badge)
|
|
141
|
-
.ml__pill {
|
|
142
|
-
display: inline-flex;
|
|
143
|
-
align-items: center;
|
|
144
|
-
height: var(--ml-pill-height, $ml-pill-height); // Match composite badge height
|
|
145
|
-
font-size: var(--ml-pill-font-size, $ml-pill-font-size);
|
|
146
|
-
font-weight: var(--ml-pill-font-weight, $ml-pill-font-weight);
|
|
147
|
-
line-height: var(--ml-line-height-none, $ml-line-height-none);
|
|
148
|
-
border-radius: var(--ml-pill-border-radius, $ml-pill-border-radius);
|
|
149
|
-
overflow: hidden;
|
|
150
|
-
max-width: 100%;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
// Pill text (like composite badge label)
|
|
154
|
-
.ml__pill-text {
|
|
155
|
-
display: flex;
|
|
156
|
-
align-items: center;
|
|
157
|
-
height: 100%;
|
|
158
|
-
padding: var(--ml-pill-text-padding, $ml-pill-text-padding);
|
|
159
|
-
background: var(--ml-pill-text-bg, $ml-pill-text-bg);
|
|
160
|
-
color: var(--ml-pill-text-color, $ml-pill-text-color);
|
|
161
|
-
overflow: hidden;
|
|
162
|
-
text-overflow: ellipsis;
|
|
163
|
-
white-space: nowrap;
|
|
164
|
-
transition: background-color var(--ml-transition-normal, $ml-transition-normal) ease;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
// Pill remove button (like composite badge button)
|
|
168
|
-
.ml__pill-remove {
|
|
169
|
-
display: flex;
|
|
170
|
-
align-items: center;
|
|
171
|
-
justify-content: center;
|
|
172
|
-
width: var(--ml-pill-remove-width, $ml-pill-remove-width);
|
|
173
|
-
height: 100%;
|
|
174
|
-
flex-shrink: 0;
|
|
175
|
-
background: var(--ml-pill-remove-bg, $ml-pill-remove-bg);
|
|
176
|
-
color: var(--ml-pill-remove-color, $ml-pill-remove-color);
|
|
177
|
-
border: var(--ml-pill-remove-border, $ml-pill-remove-border);
|
|
178
|
-
cursor: pointer;
|
|
179
|
-
transition: background-color var(--ml-transition-normal, $ml-transition-normal) ease;
|
|
180
|
-
font-size: var(--ml-pill-remove-font-size, $ml-pill-remove-font-size);
|
|
181
|
-
|
|
182
|
-
&:hover {
|
|
183
|
-
background: var(--ml-pill-remove-bg-hover, $ml-pill-remove-bg-hover);
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
&:focus {
|
|
187
|
-
outline: none;
|
|
188
|
-
box-shadow: var(--ml-pill-remove-box-shadow-focus, $ml-pill-remove-box-shadow-focus);
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
&::before {
|
|
192
|
-
content: var(--ml-icon-remove, $ml-icon-remove);
|
|
193
|
-
font-size: var(--ml-font-size-base, $ml-font-size-base);
|
|
194
|
-
line-height: var(--ml-line-height-none, $ml-line-height-none);
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
// ==============================================================================
|
|
199
|
-
// INDICATOR PILL VARIANT (for "+ X more", "3 selected", compact mode)
|
|
200
|
-
// ==============================================================================
|
|
201
|
-
// Gray/neutral styling to distinguish from regular blue pills
|
|
202
|
-
.ml__pill--indicator {
|
|
203
|
-
border: var(--ml-pill-indicator-border, $ml-pill-indicator-border);
|
|
204
|
-
|
|
205
|
-
.ml__pill-text {
|
|
206
|
-
background: var(--ml-pill-indicator-text-bg, $ml-pill-indicator-text-bg);
|
|
207
|
-
color: var(--ml-pill-indicator-text-color, $ml-pill-indicator-text-color);
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
.ml__pill-remove {
|
|
211
|
-
background: var(--ml-pill-indicator-remove-bg, $ml-pill-indicator-remove-bg);
|
|
212
|
-
color: var(--ml-pill-indicator-remove-color, $ml-pill-indicator-remove-color);
|
|
213
|
-
|
|
214
|
-
&:hover {
|
|
215
|
-
background: var(--ml-pill-indicator-remove-bg-hover, $ml-pill-indicator-remove-bg-hover);
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
// ==============================================================================
|
|
221
|
-
// "+X MORE" PILL VARIANT
|
|
222
|
-
// ==============================================================================
|
|
223
|
-
|
|
224
|
-
// "+X more" pill variant (partial mode)
|
|
225
|
-
// Now uses .ml__pill--indicator for styling, this just adds cursor
|
|
226
|
-
.ml__pill--more {
|
|
227
|
-
cursor: pointer;
|
|
228
|
-
}
|