@keenmate/web-multiselect 1.1.0 → 1.3.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 +198 -110
- package/dist/multiselect.js +930 -908
- package/dist/multiselect.umd.js +22 -22
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/scss/_badges-display.scss +1 -0
- package/src/scss/_base.scss +1 -1
- package/src/scss/_css-variables.scss +65 -0
- package/src/scss/_input-dropdown.scss +52 -0
- package/src/scss/_options.scss +90 -3
- package/src/scss/_tooltips-popover.scss +21 -0
- package/src/scss/_variables.scss +91 -40
package/src/scss/_variables.scss
CHANGED
|
@@ -12,21 +12,21 @@
|
|
|
12
12
|
// ==============================================================================
|
|
13
13
|
// Raw values that other variables reference
|
|
14
14
|
|
|
15
|
-
// Padding & Spacing
|
|
16
|
-
$padding-xs: 0.
|
|
17
|
-
$padding-sm: 0.
|
|
18
|
-
$padding-base:
|
|
19
|
-
$padding-lg:
|
|
20
|
-
|
|
21
|
-
// Border Radius
|
|
22
|
-
$border-radius-base: 0.
|
|
23
|
-
$border-radius-sm: 0.
|
|
15
|
+
// Padding & Spacing (using --ms-rem for scalability)
|
|
16
|
+
$padding-xs: calc(0.4 * var(--ms-rem)) !default; // 4px
|
|
17
|
+
$padding-sm: calc(0.8 * var(--ms-rem)) !default; // 8px
|
|
18
|
+
$padding-base: calc(1.2 * var(--ms-rem)) !default; // 12px
|
|
19
|
+
$padding-lg: calc(1.6 * var(--ms-rem)) !default; // 16px
|
|
20
|
+
|
|
21
|
+
// Border Radius (using --ms-rem for scalability)
|
|
22
|
+
$border-radius-base: calc(0.6 * var(--ms-rem)) !default; // 6px
|
|
23
|
+
$border-radius-sm: calc(0.4 * var(--ms-rem)) !default; // 4px
|
|
24
24
|
$border-radius-full: 50% !default;
|
|
25
25
|
|
|
26
|
-
// Font Sizes
|
|
27
|
-
$font-size-base:
|
|
28
|
-
$font-size-sm:
|
|
29
|
-
$font-size-lg:
|
|
26
|
+
// Font Sizes (using --ms-rem for scalability)
|
|
27
|
+
$font-size-base: calc(1.4 * var(--ms-rem)) !default; // 14px
|
|
28
|
+
$font-size-sm: calc(1.2 * var(--ms-rem)) !default; // 12px
|
|
29
|
+
$font-size-lg: calc(1.6 * var(--ms-rem)) !default; // 16px
|
|
30
30
|
|
|
31
31
|
// Border Width
|
|
32
32
|
$border-width-base: 1px !default;
|
|
@@ -34,10 +34,10 @@ $border-width-base: 1px !default;
|
|
|
34
34
|
// ==============================================================================
|
|
35
35
|
// 2. SPACING SCALE
|
|
36
36
|
// ==============================================================================
|
|
37
|
-
$ml-spacing-xs: $padding-xs !default; //
|
|
38
|
-
$ml-spacing-sm: $padding-sm !default; //
|
|
39
|
-
$ml-spacing-md: $padding-base !default; //
|
|
40
|
-
$ml-spacing-lg: $padding-lg !default; //
|
|
37
|
+
$ml-spacing-xs: $padding-xs !default; // 4px
|
|
38
|
+
$ml-spacing-sm: $padding-sm !default; // 8px
|
|
39
|
+
$ml-spacing-md: $padding-base !default; // 12px
|
|
40
|
+
$ml-spacing-lg: $padding-lg !default; // 16px
|
|
41
41
|
|
|
42
42
|
// ==============================================================================
|
|
43
43
|
// 3. COLOR PALETTE
|
|
@@ -63,14 +63,14 @@ $ml-color-tooltip-bg: #333 !default;
|
|
|
63
63
|
$ml-color-tooltip-text: #fff !default;
|
|
64
64
|
|
|
65
65
|
// ==============================================================================
|
|
66
|
-
// 4. TYPOGRAPHY SCALE
|
|
66
|
+
// 4. TYPOGRAPHY SCALE (using --ms-rem for scalability)
|
|
67
67
|
// ==============================================================================
|
|
68
|
-
$ml-font-size-2xs:
|
|
69
|
-
$ml-font-size-xs: $font-size-sm !default;
|
|
70
|
-
$ml-font-size-sm: $font-size-base !default;
|
|
71
|
-
$ml-font-size-base: $font-size-lg !default;
|
|
72
|
-
$ml-font-size-lg: 1.
|
|
73
|
-
$ml-font-size-xl:
|
|
68
|
+
$ml-font-size-2xs: calc(1 * var(--ms-rem)) !default; // 10px
|
|
69
|
+
$ml-font-size-xs: $font-size-sm !default; // 12px (via $font-size-sm)
|
|
70
|
+
$ml-font-size-sm: $font-size-base !default; // 14px (via $font-size-base)
|
|
71
|
+
$ml-font-size-base: $font-size-lg !default; // 16px (via $font-size-lg)
|
|
72
|
+
$ml-font-size-lg: calc(1.8 * var(--ms-rem)) !default; // 18px
|
|
73
|
+
$ml-font-size-xl: calc(2 * var(--ms-rem)) !default; // 20px
|
|
74
74
|
|
|
75
75
|
$ml-font-weight-medium: 500 !default;
|
|
76
76
|
$ml-font-weight-semibold: 600 !default;
|
|
@@ -108,21 +108,21 @@ $ml-z-index-dropdown: 9999 !default;
|
|
|
108
108
|
$ml-z-index-popover: 10000 !default;
|
|
109
109
|
|
|
110
110
|
// ==============================================================================
|
|
111
|
-
// 8. LAYOUT & DIMENSIONS
|
|
111
|
+
// 8. LAYOUT & DIMENSIONS (using --ms-rem for scalability)
|
|
112
112
|
// ==============================================================================
|
|
113
|
-
$ml-input-icon-spacing:
|
|
114
|
-
$ml-counter-offset:
|
|
115
|
-
$ml-option-icon-size:
|
|
116
|
-
$ml-count-clear-size:
|
|
117
|
-
$ml-badge-height:
|
|
118
|
-
$ml-badge-remove-width:
|
|
119
|
-
$ml-popover-close-size:
|
|
113
|
+
$ml-input-icon-spacing: calc(4 * var(--ms-rem)) !default; // 40px
|
|
114
|
+
$ml-counter-offset: calc(3.2 * var(--ms-rem)) !default; // 32px
|
|
115
|
+
$ml-option-icon-size: calc(2 * var(--ms-rem)) !default; // 20px
|
|
116
|
+
$ml-count-clear-size: calc(1.6 * var(--ms-rem)) !default; // 16px
|
|
117
|
+
$ml-badge-height: calc(2.7 * var(--ms-rem)) !default; // 27px
|
|
118
|
+
$ml-badge-remove-width: calc(2.7 * var(--ms-rem)) !default; // 27px
|
|
119
|
+
$ml-popover-close-size: calc(2.4 * var(--ms-rem)) !default; // 24px
|
|
120
120
|
|
|
121
|
-
$ml-options-max-height:
|
|
122
|
-
$ml-selected-popover-width:
|
|
123
|
-
$ml-selected-popover-max-height:
|
|
124
|
-
$ml-selected-popover-body-max-height:
|
|
125
|
-
$ml-tooltip-max-width:
|
|
121
|
+
$ml-options-max-height: calc(32 * var(--ms-rem)) !default; // 320px
|
|
122
|
+
$ml-selected-popover-width: calc(32 * var(--ms-rem)) !default; // 320px
|
|
123
|
+
$ml-selected-popover-max-height: calc(32 * var(--ms-rem)) !default; // 320px
|
|
124
|
+
$ml-selected-popover-body-max-height: calc(28.8 * var(--ms-rem)) !default; // 288px
|
|
125
|
+
$ml-tooltip-max-width: calc(32 * var(--ms-rem)) !default; // 320px
|
|
126
126
|
|
|
127
127
|
// ==============================================================================
|
|
128
128
|
// 9. OPACITY VALUES
|
|
@@ -179,6 +179,36 @@ $ml-input-padding-right: $ml-input-icon-spacing !default;
|
|
|
179
179
|
$ml-input-placeholder-color: $ml-color-neutral-dark !default;
|
|
180
180
|
$ml-input-bg-disabled: rgba($ml-color-neutral-dark, $ml-opacity-disabled-bg) !default;
|
|
181
181
|
|
|
182
|
+
// Input Size Variants (using --ms-rem for scalability)
|
|
183
|
+
// ==============================================================================
|
|
184
|
+
// Heights: xs=31px, sm=33px, md=35px, lg=38px, xl=41px (Pure Admin standard)
|
|
185
|
+
// All values use calc() with --ms-rem for consistent scaling
|
|
186
|
+
|
|
187
|
+
$ms-input-size-xs-font: calc(1.2 * var(--ms-rem)) !default; // 12px
|
|
188
|
+
$ms-input-size-xs-padding-v: calc(0.4 * var(--ms-rem)) !default; // 4px
|
|
189
|
+
$ms-input-size-xs-padding-h: calc(0.8 * var(--ms-rem)) !default; // 8px
|
|
190
|
+
$ms-input-size-xs-height: calc(3.1 * var(--ms-rem)) !default; // 31px
|
|
191
|
+
|
|
192
|
+
$ms-input-size-sm-font: calc(1.3 * var(--ms-rem)) !default; // 13px
|
|
193
|
+
$ms-input-size-sm-padding-v: calc(0.5 * var(--ms-rem)) !default; // 5px
|
|
194
|
+
$ms-input-size-sm-padding-h: calc(0.8 * var(--ms-rem)) !default; // 8px
|
|
195
|
+
$ms-input-size-sm-height: calc(3.3 * var(--ms-rem)) !default; // 33px
|
|
196
|
+
|
|
197
|
+
$ms-input-size-md-font: calc(1.4 * var(--ms-rem)) !default; // 14px
|
|
198
|
+
$ms-input-size-md-padding-v: calc(0.8 * var(--ms-rem)) !default; // 8px
|
|
199
|
+
$ms-input-size-md-padding-h: calc(1.2 * var(--ms-rem)) !default; // 12px
|
|
200
|
+
$ms-input-size-md-height: calc(3.5 * var(--ms-rem)) !default; // 35px
|
|
201
|
+
|
|
202
|
+
$ms-input-size-lg-font: calc(1.6 * var(--ms-rem)) !default; // 16px
|
|
203
|
+
$ms-input-size-lg-padding-v: calc(1 * var(--ms-rem)) !default; // 10px
|
|
204
|
+
$ms-input-size-lg-padding-h: calc(1.4 * var(--ms-rem)) !default; // 14px
|
|
205
|
+
$ms-input-size-lg-height: calc(3.8 * var(--ms-rem)) !default; // 38px
|
|
206
|
+
|
|
207
|
+
$ms-input-size-xl-font: calc(1.8 * var(--ms-rem)) !default; // 18px
|
|
208
|
+
$ms-input-size-xl-padding-v: calc(1.2 * var(--ms-rem)) !default; // 12px
|
|
209
|
+
$ms-input-size-xl-padding-h: calc(1.6 * var(--ms-rem)) !default; // 16px
|
|
210
|
+
$ms-input-size-xl-height: calc(4.1 * var(--ms-rem)) !default; // 41px
|
|
211
|
+
|
|
182
212
|
// Text Colors
|
|
183
213
|
// ==============================================================================
|
|
184
214
|
$ml-text-primary: $ml-color-neutral-darkest !default;
|
|
@@ -203,7 +233,7 @@ $ml-toggle-right: $ml-input-padding-h !default;
|
|
|
203
233
|
|
|
204
234
|
// Count Badge (in input)
|
|
205
235
|
// ==============================================================================
|
|
206
|
-
$ml-counter-padding: 0.
|
|
236
|
+
$ml-counter-padding: calc(0.2 * var(--ms-rem)) calc(0.4 * var(--ms-rem)) !default; // 2px 4px
|
|
207
237
|
$ml-counter-bg: $ml-accent-color !default;
|
|
208
238
|
$ml-counter-color: $ml-text-white !default;
|
|
209
239
|
$ml-counter-font-size: $ml-font-size-xs !default;
|
|
@@ -286,6 +316,7 @@ $ml-option-outline-focused: $ml-focus-outline-width solid $ml-accent-color !defa
|
|
|
286
316
|
$ml-option-bg-matched: rgba($ml-accent-color, 0.08) !default;
|
|
287
317
|
$ml-option-border-matched: 3px solid rgba($ml-accent-color, 0.4) !default;
|
|
288
318
|
$ml-option-bg-selected: rgba($ml-accent-color, $ml-opacity-option-selected-bg) !default;
|
|
319
|
+
$ml-option-color-selected: inherit !default; // Text color when selected (use 'inherit' to keep default, or set explicit color like #ffffff)
|
|
289
320
|
|
|
290
321
|
// Option Content
|
|
291
322
|
// ==============================================================================
|
|
@@ -377,6 +408,7 @@ $ml-badge-bg-active: $ml-color-accent-lighter !default;
|
|
|
377
408
|
$ml-badge-font-size: $ml-font-size-xs !default;
|
|
378
409
|
$ml-badge-font-weight: $ml-font-weight-semibold !default;
|
|
379
410
|
$ml-badge-border-radius: $ml-border-radius !default;
|
|
411
|
+
$ml-badge-border: none !default; // No border by default
|
|
380
412
|
|
|
381
413
|
// Badge Text
|
|
382
414
|
// ==============================================================================
|
|
@@ -453,14 +485,25 @@ $ml-selected-popover-body-padding: $ml-spacing-sm !default;
|
|
|
453
485
|
|
|
454
486
|
// Checkbox
|
|
455
487
|
// ==============================================================================
|
|
456
|
-
$ml-checkbox-offset: 0.
|
|
488
|
+
$ml-checkbox-offset: calc(0.2 * var(--ms-rem)) !default; // 2px
|
|
457
489
|
$ml-checkbox-margin-top: $ml-checkbox-offset !default;
|
|
458
490
|
$ml-checkbox-margin-right: 0 !default; // Horizontal spacing handled by flexbox gap
|
|
459
491
|
$ml-checkbox-margin-bottom: 0 !default;
|
|
460
492
|
$ml-checkbox-margin-left: 0 !default;
|
|
461
|
-
$ml-checkbox-size:
|
|
493
|
+
$ml-checkbox-size: calc(1.6 * var(--ms-rem)) !default; // 16px - Width and height of checkbox
|
|
462
494
|
$ml-checkbox-scale: 1 !default; // Scale multiplier for checkbox size
|
|
463
495
|
|
|
496
|
+
// Checkbox Styling (custom checkbox appearance)
|
|
497
|
+
$ml-checkbox-bg: #ffffff !default; // White background for better contrast
|
|
498
|
+
$ml-checkbox-border: 1px solid $ml-color-neutral-base !default; // Darker border (#d1d5db)
|
|
499
|
+
$ml-checkbox-border-radius: calc(0.3 * var(--ms-rem)) !default; // 3px
|
|
500
|
+
$ml-checkbox-checked-bg: $ml-accent-color !default;
|
|
501
|
+
$ml-checkbox-checked-border: 1px solid $ml-accent-color !default;
|
|
502
|
+
$ml-checkbox-checkmark-color: $ml-text-white !default;
|
|
503
|
+
$ml-checkbox-hover-border-color: $ml-accent-color !default;
|
|
504
|
+
$ml-checkbox-disabled-bg: $ml-primary-bg-hover !default;
|
|
505
|
+
$ml-checkbox-disabled-border: 1px solid $ml-border-color !default;
|
|
506
|
+
|
|
464
507
|
// Placeholder
|
|
465
508
|
// ==============================================================================
|
|
466
509
|
$ml-placeholder-opacity: $ml-opacity-placeholder !default;
|
|
@@ -469,3 +512,11 @@ $ml-placeholder-opacity: $ml-opacity-placeholder !default;
|
|
|
469
512
|
// ==============================================================================
|
|
470
513
|
$ml-disabled-opacity: $ml-opacity-disabled !default;
|
|
471
514
|
$ml-disabled-input-opacity: $ml-opacity-disabled-input !default;
|
|
515
|
+
|
|
516
|
+
// Scrollbar
|
|
517
|
+
// ==============================================================================
|
|
518
|
+
$ml-scrollbar-width: 8px !default;
|
|
519
|
+
$ml-scrollbar-track-bg: transparent !default;
|
|
520
|
+
$ml-scrollbar-thumb-bg: $ml-color-neutral-base !default; // #d1d5db
|
|
521
|
+
$ml-scrollbar-thumb-bg-hover: $ml-color-neutral-dark !default; // #6b7280
|
|
522
|
+
$ml-scrollbar-thumb-border-radius: 4px !default;
|