@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
package/src/scss/_rtl.scss
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// RTL (Right-to-Left) SUPPORT
|
|
3
3
|
// ==============================================================================
|
|
4
4
|
// Styles for RTL languages (Arabic, Hebrew, etc.)
|
|
5
|
-
// Applied when .
|
|
5
|
+
// Applied when .ms--rtl class is present
|
|
6
6
|
|
|
7
7
|
@use 'variables' as *;
|
|
8
8
|
|
|
@@ -10,26 +10,26 @@
|
|
|
10
10
|
// INPUT & TOGGLE ICON
|
|
11
11
|
// ==============================================================================
|
|
12
12
|
|
|
13
|
-
.
|
|
14
|
-
.
|
|
13
|
+
.ms--rtl {
|
|
14
|
+
.ms__input-wrapper {
|
|
15
15
|
direction: rtl;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
.
|
|
18
|
+
.ms__input {
|
|
19
19
|
text-align: right;
|
|
20
|
-
padding-left: var(--
|
|
21
|
-
padding-right: var(--
|
|
20
|
+
padding-left: var(--ms-input-padding-right, $ml-input-padding-right);
|
|
21
|
+
padding-right: var(--ms-input-padding-h, $ml-input-padding-h);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
// Move toggle icon to left side
|
|
25
|
-
.
|
|
26
|
-
left: var(--
|
|
25
|
+
.ms__toggle {
|
|
26
|
+
left: var(--ms-toggle-right, $ml-toggle-right) !important;
|
|
27
27
|
right: auto !important;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
// Move count badge to left side
|
|
31
|
-
.
|
|
32
|
-
left: var(--
|
|
31
|
+
.ms__counter {
|
|
32
|
+
left: var(--ms-counter-offset, $ml-counter-offset) !important;
|
|
33
33
|
right: auto !important;
|
|
34
34
|
}
|
|
35
35
|
|
|
@@ -37,64 +37,64 @@
|
|
|
37
37
|
// DROPDOWN OPTIONS
|
|
38
38
|
// ==============================================================================
|
|
39
39
|
|
|
40
|
-
.
|
|
40
|
+
.ms__dropdown {
|
|
41
41
|
direction: rtl;
|
|
42
42
|
text-align: right;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
// Checkbox on right side
|
|
46
|
-
.
|
|
46
|
+
.ms__option {
|
|
47
47
|
flex-direction: row-reverse;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
.
|
|
51
|
-
margin-left: var(--
|
|
50
|
+
.ms__checkbox {
|
|
51
|
+
margin-left: var(--ms-spacing-sm, $ml-spacing-sm);
|
|
52
52
|
margin-right: 0;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
.
|
|
55
|
+
.ms__option-content {
|
|
56
56
|
text-align: right;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
-
.
|
|
60
|
-
margin-left: var(--
|
|
59
|
+
.ms__option-icon {
|
|
60
|
+
margin-left: var(--ms-spacing-xs, $ml-spacing-xs);
|
|
61
61
|
margin-right: 0;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
// ==============================================================================
|
|
65
|
-
//
|
|
65
|
+
// BADGES LAYOUT
|
|
66
66
|
// ==============================================================================
|
|
67
67
|
|
|
68
|
-
.
|
|
68
|
+
.ms__badges {
|
|
69
69
|
direction: rtl;
|
|
70
70
|
}
|
|
71
71
|
|
|
72
|
-
//
|
|
73
|
-
.
|
|
72
|
+
// Badges flow right-to-left
|
|
73
|
+
.ms__badge {
|
|
74
74
|
flex-direction: row-reverse;
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
-
// Remove button on left side of
|
|
78
|
-
.
|
|
79
|
-
border-radius: var(--
|
|
80
|
-
border-left: var(--
|
|
77
|
+
// Remove button on left side of badge
|
|
78
|
+
.ms__badge-remove {
|
|
79
|
+
border-radius: var(--ms-badge-remove-border-radius-rtl, $ml-badge-border-radius) 0 0 var(--ms-badge-remove-border-radius-rtl, $ml-badge-border-radius);
|
|
80
|
+
border-left: var(--ms-badge-remove-border, $ml-badge-remove-border);
|
|
81
81
|
border-right: none;
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
-
//
|
|
85
|
-
.
|
|
86
|
-
border-radius: 0 var(--
|
|
84
|
+
// Badge text rounded on right
|
|
85
|
+
.ms__badge-text {
|
|
86
|
+
border-radius: 0 var(--ms-badge-text-border-radius-rtl, $ml-badge-border-radius) var(--ms-badge-text-border-radius-rtl, $ml-badge-border-radius) 0;
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
// ==============================================================================
|
|
90
90
|
// COUNT DISPLAY
|
|
91
91
|
// ==============================================================================
|
|
92
92
|
|
|
93
|
-
.
|
|
93
|
+
.ms__count-display {
|
|
94
94
|
direction: rtl;
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
-
.
|
|
97
|
+
.ms__counter-wrapper {
|
|
98
98
|
flex-direction: row-reverse;
|
|
99
99
|
}
|
|
100
100
|
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
// SELECTED POPOVER
|
|
103
103
|
// ==============================================================================
|
|
104
104
|
|
|
105
|
-
.
|
|
105
|
+
.ms__selected-popover {
|
|
106
106
|
direction: rtl;
|
|
107
107
|
text-align: right;
|
|
108
108
|
}
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
// ACTIONS
|
|
112
112
|
// ==============================================================================
|
|
113
113
|
|
|
114
|
-
.
|
|
114
|
+
.ms__actions {
|
|
115
115
|
direction: rtl;
|
|
116
116
|
}
|
|
117
117
|
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
// GROUPS
|
|
120
120
|
// ==============================================================================
|
|
121
121
|
|
|
122
|
-
.
|
|
122
|
+
.ms__group-label {
|
|
123
123
|
text-align: right;
|
|
124
124
|
}
|
|
125
125
|
|
|
@@ -127,7 +127,7 @@
|
|
|
127
127
|
// EMPTY STATE
|
|
128
128
|
// ==============================================================================
|
|
129
129
|
|
|
130
|
-
.
|
|
130
|
+
.ms__empty {
|
|
131
131
|
text-align: right;
|
|
132
132
|
}
|
|
133
133
|
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
// HINT
|
|
136
136
|
// ==============================================================================
|
|
137
137
|
|
|
138
|
-
.
|
|
138
|
+
.ms__hint {
|
|
139
139
|
direction: rtl;
|
|
140
140
|
text-align: right;
|
|
141
141
|
}
|
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
// ==============================================================================
|
|
2
2
|
// TOOLTIPS & POPOVER
|
|
3
3
|
// ==============================================================================
|
|
4
|
-
//
|
|
4
|
+
// Badge tooltips and selected items popover
|
|
5
5
|
|
|
6
6
|
@use 'variables' as *;
|
|
7
7
|
|
|
8
8
|
// ==============================================================================
|
|
9
|
-
//
|
|
9
|
+
// BADGE TOOLTIPS
|
|
10
10
|
// ==============================================================================
|
|
11
11
|
|
|
12
|
-
.
|
|
12
|
+
.ms__badge-tooltip {
|
|
13
13
|
position: fixed;
|
|
14
|
-
z-index: var(--
|
|
14
|
+
z-index: var(--ms-tooltip-z-index, $ml-tooltip-z-index);
|
|
15
15
|
opacity: 0;
|
|
16
16
|
visibility: hidden;
|
|
17
|
-
transition: opacity var(--
|
|
18
|
-
|
|
19
|
-
background: var(--
|
|
20
|
-
color: var(--
|
|
21
|
-
padding: var(--
|
|
22
|
-
border-radius: var(--
|
|
23
|
-
font-size: var(--
|
|
24
|
-
line-height: var(--
|
|
25
|
-
max-width: var(--
|
|
17
|
+
transition: opacity var(--ms-transition-normal, $ml-transition-normal) ease, visibility var(--ms-transition-normal, $ml-transition-normal) ease;
|
|
18
|
+
|
|
19
|
+
background: var(--ms-tooltip-background, $ml-tooltip-bg);
|
|
20
|
+
color: var(--ms-tooltip-text-color, $ml-tooltip-color);
|
|
21
|
+
padding: var(--ms-tooltip-padding, $ml-tooltip-padding);
|
|
22
|
+
border-radius: var(--ms-tooltip-border-radius, $ml-tooltip-border-radius);
|
|
23
|
+
font-size: var(--ms-tooltip-font-size, $ml-tooltip-font-size);
|
|
24
|
+
line-height: var(--ms-line-height-relaxed, $ml-line-height-relaxed);
|
|
25
|
+
max-width: var(--ms-tooltip-max-width, $ml-tooltip-max-width);
|
|
26
26
|
word-wrap: break-word;
|
|
27
27
|
white-space: pre-wrap;
|
|
28
|
-
box-shadow: var(--
|
|
28
|
+
box-shadow: var(--ms-tooltip-shadow, $ml-tooltip-shadow);
|
|
29
29
|
pointer-events: none; // Prevent tooltip from interfering with mouse events
|
|
30
30
|
|
|
31
31
|
&--visible {
|
|
@@ -39,16 +39,16 @@
|
|
|
39
39
|
// ==============================================================================
|
|
40
40
|
|
|
41
41
|
// Selected items popover (for count display mode)
|
|
42
|
-
.
|
|
42
|
+
.ms__selected-popover {
|
|
43
43
|
display: none;
|
|
44
44
|
position: absolute;
|
|
45
|
-
z-index: var(--
|
|
46
|
-
background: var(--
|
|
47
|
-
border: var(--
|
|
48
|
-
border-radius: var(--
|
|
49
|
-
box-shadow: var(--
|
|
50
|
-
width: var(--
|
|
51
|
-
max-height: var(--
|
|
45
|
+
z-index: var(--ms-z-index-popover, $ml-z-index-popover);
|
|
46
|
+
background: var(--ms-selected-popover-background, $ml-selected-popover-bg);
|
|
47
|
+
border: var(--ms-selected-popover-border, $ml-selected-popover-border);
|
|
48
|
+
border-radius: var(--ms-selected-popover-border-radius, $ml-selected-popover-border-radius);
|
|
49
|
+
box-shadow: var(--ms-selected-popover-box-shadow, $ml-selected-popover-box-shadow);
|
|
50
|
+
width: var(--ms-selected-popover-width, $ml-selected-popover-width);
|
|
51
|
+
max-height: var(--ms-selected-popover-max-height, $ml-selected-popover-max-height);
|
|
52
52
|
overflow: hidden;
|
|
53
53
|
|
|
54
54
|
&--visible {
|
|
@@ -64,59 +64,64 @@
|
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
.
|
|
67
|
+
.ms__selected-popover-header {
|
|
68
68
|
display: flex;
|
|
69
69
|
align-items: center;
|
|
70
70
|
justify-content: space-between;
|
|
71
|
-
padding: var(--
|
|
72
|
-
background: var(--
|
|
73
|
-
border-bottom: var(--
|
|
74
|
-
font-size: var(--
|
|
75
|
-
font-weight: var(--
|
|
76
|
-
color: var(--
|
|
71
|
+
padding: var(--ms-selected-popover-header-padding, $ml-selected-popover-header-padding);
|
|
72
|
+
background: var(--ms-selected-popover-header-background, $ml-selected-popover-header-bg);
|
|
73
|
+
border-bottom: var(--ms-selected-popover-header-border-bottom, $ml-selected-popover-header-border-bottom);
|
|
74
|
+
font-size: var(--ms-selected-popover-header-font-size, $ml-selected-popover-header-font-size);
|
|
75
|
+
font-weight: var(--ms-selected-popover-header-font-weight, $ml-selected-popover-header-font-weight);
|
|
76
|
+
color: var(--ms-selected-popover-header-color, $ml-selected-popover-header-color);
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
-
.
|
|
79
|
+
.ms__selected-popover-close {
|
|
80
80
|
display: flex;
|
|
81
81
|
align-items: center;
|
|
82
82
|
justify-content: center;
|
|
83
|
-
width: var(--
|
|
84
|
-
height: var(--
|
|
83
|
+
width: var(--ms-popover-close-size, $ml-popover-close-size);
|
|
84
|
+
height: var(--ms-popover-close-size, $ml-popover-close-size);
|
|
85
85
|
padding: 0;
|
|
86
86
|
border: none;
|
|
87
|
-
background: var(--
|
|
88
|
-
color: var(--
|
|
89
|
-
font-size: var(--
|
|
90
|
-
line-height: var(--
|
|
87
|
+
background: var(--ms-selected-popover-close-background, $ml-selected-popover-close-bg);
|
|
88
|
+
color: var(--ms-selected-popover-close-color, $ml-selected-popover-close-color);
|
|
89
|
+
font-size: var(--ms-selected-popover-close-font-size, $ml-selected-popover-close-font-size);
|
|
90
|
+
line-height: var(--ms-line-height-none, $ml-line-height-none);
|
|
91
91
|
cursor: pointer;
|
|
92
|
-
border-radius: var(--
|
|
93
|
-
transition: all var(--
|
|
92
|
+
border-radius: var(--ms-selected-popover-close-border-radius, $ml-selected-popover-close-border-radius);
|
|
93
|
+
transition: all var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
|
|
94
94
|
|
|
95
95
|
&:hover {
|
|
96
|
-
background: var(--
|
|
97
|
-
color: var(--
|
|
96
|
+
background: var(--ms-selected-popover-close-background-hover, $ml-selected-popover-close-bg-hover);
|
|
97
|
+
color: var(--ms-selected-popover-close-color-hover, $ml-selected-popover-close-color-hover);
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
-
.
|
|
101
|
+
.ms__selected-popover-body {
|
|
102
102
|
display: flex;
|
|
103
103
|
flex-direction: column;
|
|
104
|
-
gap: var(--
|
|
105
|
-
padding: var(--
|
|
104
|
+
gap: var(--ms-selected-popover-body-gap, $ml-selected-popover-body-gap);
|
|
105
|
+
padding: var(--ms-selected-popover-body-padding, $ml-selected-popover-body-padding);
|
|
106
106
|
overflow-y: auto;
|
|
107
|
-
max-height: var(--
|
|
107
|
+
max-height: var(--ms-selected-popover-body-max-height, $ml-selected-popover-body-max-height);
|
|
108
108
|
|
|
109
|
-
//
|
|
110
|
-
.
|
|
109
|
+
// Badges inside popover (non-virtual mode)
|
|
110
|
+
.ms__badge {
|
|
111
111
|
width: 100%;
|
|
112
|
+
min-height: fit-content; // Allow badges to expand based on content
|
|
113
|
+
line-height: var(--ms-line-height-relaxed, $ml-line-height-relaxed); // Override line-height: 1 to allow multi-line content
|
|
112
114
|
}
|
|
113
115
|
|
|
114
|
-
.
|
|
116
|
+
.ms__badge-text {
|
|
115
117
|
flex: 1;
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
118
|
+
min-width: 0; // Allow proper flex sizing
|
|
119
|
+
white-space: normal; // Explicitly allow wrapping
|
|
120
|
+
word-wrap: break-word; // Break long words
|
|
121
|
+
// Remove overflow constraints to allow multi-line content
|
|
122
|
+
// overflow: hidden;
|
|
123
|
+
// text-overflow: ellipsis;
|
|
124
|
+
// white-space: nowrap;
|
|
120
125
|
}
|
|
121
126
|
|
|
122
127
|
// Virtual scroll mode
|
|
@@ -126,14 +131,21 @@
|
|
|
126
131
|
max-height: none; // Remove max-height constraint
|
|
127
132
|
padding: 0; // Remove padding as virtual scroll has its own spacing
|
|
128
133
|
|
|
129
|
-
.
|
|
130
|
-
// Fixed height for virtual scroll (default: 36px, configurable via
|
|
131
|
-
height: var(--
|
|
132
|
-
min-height: var(--
|
|
133
|
-
max-height: var(--
|
|
134
|
-
margin-bottom: var(--
|
|
134
|
+
.ms__badge {
|
|
135
|
+
// Fixed height for virtual scroll (default: 36px, configurable via badge-height attribute)
|
|
136
|
+
height: var(--ms-badge-height-virtual, 36px);
|
|
137
|
+
min-height: var(--ms-badge-height-virtual, 36px);
|
|
138
|
+
max-height: var(--ms-badge-height-virtual, 36px);
|
|
139
|
+
margin-bottom: var(--ms-selected-popover-body-gap, $ml-selected-popover-body-gap); // Add gap between badges
|
|
135
140
|
overflow: hidden;
|
|
136
141
|
box-sizing: border-box;
|
|
137
142
|
}
|
|
143
|
+
|
|
144
|
+
.ms__badge-text {
|
|
145
|
+
// Enforce single-line truncation for virtual scroll fixed heights
|
|
146
|
+
white-space: nowrap;
|
|
147
|
+
overflow: hidden;
|
|
148
|
+
text-overflow: ellipsis;
|
|
149
|
+
}
|
|
138
150
|
}
|
|
139
151
|
}
|
package/src/scss/_variables.scss
CHANGED
|
@@ -111,14 +111,14 @@ $ml-z-index-popover: 10000 !default;
|
|
|
111
111
|
// 8. LAYOUT & DIMENSIONS
|
|
112
112
|
// ==============================================================================
|
|
113
113
|
$ml-input-icon-spacing: 2.5rem !default;
|
|
114
|
-
$ml-
|
|
114
|
+
$ml-counter-offset: 2rem !default;
|
|
115
115
|
$ml-option-icon-size: 1.25rem !default;
|
|
116
116
|
$ml-count-clear-size: 1rem !default;
|
|
117
|
-
$ml-
|
|
118
|
-
$ml-
|
|
117
|
+
$ml-badge-height: 1.7rem !default;
|
|
118
|
+
$ml-badge-remove-width: 1.7rem !default;
|
|
119
119
|
$ml-popover-close-size: 1.5rem !default;
|
|
120
120
|
|
|
121
|
-
$ml-
|
|
121
|
+
$ml-options-max-height: 20rem !default;
|
|
122
122
|
$ml-selected-popover-width: 20rem !default;
|
|
123
123
|
$ml-selected-popover-max-height: 20rem !default;
|
|
124
124
|
$ml-selected-popover-body-max-height: 18rem !default;
|
|
@@ -203,13 +203,13 @@ $ml-toggle-right: $ml-input-padding-h !default;
|
|
|
203
203
|
|
|
204
204
|
// Count Badge (in input)
|
|
205
205
|
// ==============================================================================
|
|
206
|
-
$ml-
|
|
207
|
-
$ml-
|
|
208
|
-
$ml-
|
|
209
|
-
$ml-
|
|
210
|
-
$ml-
|
|
211
|
-
$ml-
|
|
212
|
-
$ml-
|
|
206
|
+
$ml-counter-padding: 0.125rem 0.25rem !default;
|
|
207
|
+
$ml-counter-bg: $ml-accent-color !default;
|
|
208
|
+
$ml-counter-color: $ml-text-white !default;
|
|
209
|
+
$ml-counter-font-size: $ml-font-size-xs !default;
|
|
210
|
+
$ml-counter-font-weight: $ml-font-weight-semibold !default;
|
|
211
|
+
$ml-counter-border-radius: $ml-border-radius-sm !default;
|
|
212
|
+
$ml-counter-bg-hover: $ml-accent-color-hover !default;
|
|
213
213
|
|
|
214
214
|
// Floating Hint
|
|
215
215
|
// ==============================================================================
|
|
@@ -232,7 +232,7 @@ $ml-dropdown-text: $ml-color-neutral-darkest !default;
|
|
|
232
232
|
$ml-dropdown-border: $ml-border-width-base solid $ml-dropdown-border-color !default;
|
|
233
233
|
$ml-dropdown-border-radius: $ml-border-radius !default;
|
|
234
234
|
$ml-dropdown-box-shadow: $ml-dropdown-shadow !default;
|
|
235
|
-
$ml-
|
|
235
|
+
$ml-option-color: $ml-dropdown-text !default;
|
|
236
236
|
|
|
237
237
|
// Dropdown Actions
|
|
238
238
|
// ==============================================================================
|
|
@@ -326,14 +326,14 @@ $ml-loader-gap: $ml-spacing-sm !default;
|
|
|
326
326
|
$ml-loading-text-font-size: $ml-font-size-sm !default;
|
|
327
327
|
$ml-loading-text-color: $ml-text-secondary !default;
|
|
328
328
|
|
|
329
|
-
//
|
|
329
|
+
// Badges Container
|
|
330
330
|
// ==============================================================================
|
|
331
|
-
$ml-
|
|
332
|
-
$ml-
|
|
333
|
-
$ml-
|
|
334
|
-
$ml-
|
|
335
|
-
$ml-
|
|
336
|
-
$ml-
|
|
331
|
+
$ml-badge-gap: $ml-spacing-sm !default;
|
|
332
|
+
$ml-badges-gap: $ml-badge-gap !default;
|
|
333
|
+
$ml-badges-margin-bottom: $ml-spacing-sm !default;
|
|
334
|
+
$ml-badges-margin-top: $ml-spacing-sm !default;
|
|
335
|
+
$ml-badges-margin-left: $ml-spacing-xs !default;
|
|
336
|
+
$ml-badges-margin-right: $ml-spacing-xs !default;
|
|
337
337
|
|
|
338
338
|
// Count Display
|
|
339
339
|
// ==============================================================================
|
|
@@ -344,13 +344,13 @@ $ml-count-display-margin-right: $ml-spacing-sm !default;
|
|
|
344
344
|
|
|
345
345
|
// Count Badge Wrapper
|
|
346
346
|
// ==============================================================================
|
|
347
|
-
$ml-
|
|
348
|
-
$ml-
|
|
349
|
-
$ml-
|
|
350
|
-
$ml-
|
|
351
|
-
$ml-
|
|
352
|
-
$ml-
|
|
353
|
-
$ml-
|
|
347
|
+
$ml-counter-wrapper-bg: transparent !default;
|
|
348
|
+
$ml-counter-wrapper-border: $ml-border-width-base solid $ml-border-color !default;
|
|
349
|
+
$ml-counter-wrapper-border-radius: $ml-border-radius-sm !default;
|
|
350
|
+
$ml-counter-wrapper-padding: $ml-spacing-xs $ml-spacing-sm !default;
|
|
351
|
+
$ml-counter-wrapper-gap: $ml-spacing-xs !default;
|
|
352
|
+
$ml-counter-wrapper-bg-hover: $ml-option-hover-bg !default;
|
|
353
|
+
$ml-counter-wrapper-border-color-hover: $ml-accent-color !default;
|
|
354
354
|
|
|
355
355
|
// Count Text
|
|
356
356
|
// ==============================================================================
|
|
@@ -368,48 +368,48 @@ $ml-count-clear-border-radius: $ml-border-radius-full !default;
|
|
|
368
368
|
$ml-count-clear-bg-hover: rgba($ml-accent-color, $ml-opacity-highlight-bg) !default;
|
|
369
369
|
$ml-count-clear-color-hover: $ml-accent-color !default;
|
|
370
370
|
|
|
371
|
-
//
|
|
371
|
+
// Badge
|
|
372
372
|
// ==============================================================================
|
|
373
|
-
$ml-
|
|
374
|
-
$ml-
|
|
375
|
-
$ml-
|
|
373
|
+
$ml-badge-bg: $ml-color-accent-lightest !default;
|
|
374
|
+
$ml-badge-bg-hover: $ml-color-white !default;
|
|
375
|
+
$ml-badge-bg-active: $ml-color-accent-lighter !default;
|
|
376
376
|
|
|
377
|
-
$ml-
|
|
378
|
-
$ml-
|
|
379
|
-
$ml-
|
|
377
|
+
$ml-badge-font-size: $ml-font-size-xs !default;
|
|
378
|
+
$ml-badge-font-weight: $ml-font-weight-semibold !default;
|
|
379
|
+
$ml-badge-border-radius: $ml-border-radius !default;
|
|
380
380
|
|
|
381
|
-
//
|
|
381
|
+
// Badge Text
|
|
382
382
|
// ==============================================================================
|
|
383
|
-
$ml-
|
|
384
|
-
$ml-
|
|
385
|
-
$ml-
|
|
383
|
+
$ml-badge-text-padding: 0 $ml-spacing-sm !default;
|
|
384
|
+
$ml-badge-text-bg: $ml-badge-bg !default;
|
|
385
|
+
$ml-badge-text-color: $ml-accent-color !default;
|
|
386
386
|
|
|
387
|
-
//
|
|
387
|
+
// Badge Remove Button
|
|
388
388
|
// ==============================================================================
|
|
389
|
-
$ml-
|
|
390
|
-
$ml-
|
|
391
|
-
$ml-
|
|
392
|
-
$ml-
|
|
393
|
-
$ml-
|
|
394
|
-
$ml-
|
|
389
|
+
$ml-badge-remove-bg: $ml-accent-color !default;
|
|
390
|
+
$ml-badge-remove-color: $ml-text-white !default;
|
|
391
|
+
$ml-badge-remove-border: none !default;
|
|
392
|
+
$ml-badge-remove-font-size: $ml-font-size-xs !default;
|
|
393
|
+
$ml-badge-remove-bg-hover: $ml-accent-color-hover !default;
|
|
394
|
+
$ml-badge-remove-box-shadow-focus: 0 0 0 $ml-focus-outline-width
|
|
395
395
|
rgba($ml-accent-color, $ml-opacity-focus-shadow) !default;
|
|
396
396
|
|
|
397
|
-
//
|
|
397
|
+
// Badge Indicator (for "+ X more", "3 selected", compact mode display)
|
|
398
398
|
// ==============================================================================
|
|
399
|
-
$ml-
|
|
400
|
-
$ml-
|
|
401
|
-
$ml-
|
|
402
|
-
$ml-
|
|
403
|
-
$ml-
|
|
404
|
-
$ml-
|
|
405
|
-
$ml-
|
|
406
|
-
$ml-
|
|
399
|
+
$ml-badge-counter-bg: transparent !default;
|
|
400
|
+
$ml-badge-counter-border: $ml-border-width-base solid $ml-border-color !default;
|
|
401
|
+
$ml-badge-counter-border-radius: $ml-border-radius-sm !default;
|
|
402
|
+
$ml-badge-counter-text-color: $ml-text-secondary !default;
|
|
403
|
+
$ml-badge-counter-text-bg: $ml-color-neutral-base !default;
|
|
404
|
+
$ml-badge-counter-remove-bg: $ml-color-neutral-dark !default;
|
|
405
|
+
$ml-badge-counter-remove-color: $ml-color-white !default;
|
|
406
|
+
$ml-badge-counter-remove-bg-hover: $ml-color-neutral-darkest !default;
|
|
407
407
|
|
|
408
408
|
// "+X more" badge (partial mode)
|
|
409
409
|
// ==============================================================================
|
|
410
|
-
$ml-more-badge-bg: $ml-
|
|
411
|
-
$ml-more-badge-hover-bg: $ml-
|
|
412
|
-
$ml-more-badge-active-bg: $ml-
|
|
410
|
+
$ml-more-badge-bg: $ml-badge-text-bg !default;
|
|
411
|
+
$ml-more-badge-hover-bg: $ml-badge-bg-hover !default;
|
|
412
|
+
$ml-more-badge-active-bg: $ml-badge-bg-active !default;
|
|
413
413
|
|
|
414
414
|
// Tooltip
|
|
415
415
|
// ==============================================================================
|
|
@@ -455,6 +455,11 @@ $ml-selected-popover-body-padding: $ml-spacing-sm !default;
|
|
|
455
455
|
// ==============================================================================
|
|
456
456
|
$ml-checkbox-offset: 0.125rem !default;
|
|
457
457
|
$ml-checkbox-margin-top: $ml-checkbox-offset !default;
|
|
458
|
+
$ml-checkbox-margin-right: 0 !default; // Horizontal spacing handled by flexbox gap
|
|
459
|
+
$ml-checkbox-margin-bottom: 0 !default;
|
|
460
|
+
$ml-checkbox-margin-left: 0 !default;
|
|
461
|
+
$ml-checkbox-size: 16px !default; // Width and height of checkbox
|
|
462
|
+
$ml-checkbox-scale: 1 !default; // Scale multiplier for checkbox size
|
|
458
463
|
|
|
459
464
|
// Placeholder
|
|
460
465
|
// ==============================================================================
|
package/src/scss/main.scss
CHANGED
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
// - _variables.scss : All variables (base primitives + semantic)
|
|
8
8
|
// - _css-variables.scss : CSS custom properties at :host level (for theming)
|
|
9
9
|
// - _base.scss : FOUC prevention + layout containers
|
|
10
|
-
// - _input-dropdown.scss : Input, toggle,
|
|
10
|
+
// - _input-dropdown.scss : Input, toggle, counter, hint, dropdown, actions
|
|
11
11
|
// - _options.scss : Options list, groups, checkbox, content, states
|
|
12
|
-
// -
|
|
13
|
-
// - _tooltips-popover.scss:
|
|
12
|
+
// - _badges-display.scss : Badges, count display, individual badges
|
|
13
|
+
// - _tooltips-popover.scss: Badge tooltips + selected items popover
|
|
14
14
|
// - _rtl.scss : RTL (Right-to-Left) language support
|
|
15
15
|
// - _modifiers.scss : Size variants + state modifiers
|
|
16
16
|
// - _debug.scss : Debug information panel
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
@use 'base';
|
|
22
22
|
@use 'input-dropdown';
|
|
23
23
|
@use 'options';
|
|
24
|
-
@use '
|
|
24
|
+
@use 'badges-display';
|
|
25
25
|
@use 'tooltips-popover';
|
|
26
26
|
@use 'rtl';
|
|
27
27
|
@use 'modifiers';
|