@keenmate/web-multiselect 1.3.0 → 1.5.0-rc01
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 +97 -4
- package/dist/multiselect.js +838 -860
- package/dist/multiselect.umd.js +10 -10
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/scss/_badges-display.scss +81 -64
- package/src/scss/_base.scss +3 -2
- package/src/scss/_css-variables.scss +273 -261
- package/src/scss/_debug.scss +23 -23
- package/src/scss/_input-dropdown.scss +76 -69
- package/src/scss/_modifiers.scss +6 -65
- package/src/scss/_options.scss +126 -70
- package/src/scss/_rtl.scss +13 -11
- package/src/scss/_tooltips-popover.scss +45 -45
- package/src/scss/_variables.scss +302 -304
package/src/scss/_variables.scss
CHANGED
|
@@ -34,127 +34,139 @@ $border-width-base: 1px !default;
|
|
|
34
34
|
// ==============================================================================
|
|
35
35
|
// 2. SPACING SCALE
|
|
36
36
|
// ==============================================================================
|
|
37
|
-
$
|
|
38
|
-
$
|
|
39
|
-
$
|
|
40
|
-
$
|
|
37
|
+
$ms-spacing-xs: $padding-xs !default; // 4px
|
|
38
|
+
$ms-spacing-sm: $padding-sm !default; // 8px
|
|
39
|
+
$ms-spacing-md: $padding-base !default; // 12px
|
|
40
|
+
$ms-spacing-lg: $padding-lg !default; // 16px
|
|
41
41
|
|
|
42
42
|
// ==============================================================================
|
|
43
43
|
// 3. COLOR PALETTE
|
|
44
44
|
// ==============================================================================
|
|
45
45
|
// Neutral Colors
|
|
46
|
-
$
|
|
47
|
-
$
|
|
48
|
-
$
|
|
49
|
-
$
|
|
50
|
-
$
|
|
51
|
-
$
|
|
52
|
-
$
|
|
46
|
+
$ms-color-white: #ffffff !default;
|
|
47
|
+
$ms-color-neutral-lightest: #f9fafb !default;
|
|
48
|
+
$ms-color-neutral-lighter: #f3f4f6 !default;
|
|
49
|
+
$ms-color-neutral-light: #e5e7eb !default;
|
|
50
|
+
$ms-color-neutral-base: #d1d5db !default;
|
|
51
|
+
$ms-color-neutral-dark: #6b7280 !default;
|
|
52
|
+
$ms-color-neutral-darkest: #111827 !default;
|
|
53
53
|
|
|
54
54
|
// Accent Colors
|
|
55
|
-
$
|
|
56
|
-
$
|
|
57
|
-
$
|
|
58
|
-
$
|
|
59
|
-
$
|
|
55
|
+
$ms-color-accent-lightest: #eff6ff !default;
|
|
56
|
+
$ms-color-accent-lighter: #e0f2fe !default;
|
|
57
|
+
$ms-color-accent-base: #3b82f6 !default;
|
|
58
|
+
$ms-color-accent-dark: #2563eb !default;
|
|
59
|
+
$ms-color-accent-darker: #1d4ed8 !default;
|
|
60
60
|
|
|
61
61
|
// Tooltip Colors
|
|
62
|
-
$
|
|
63
|
-
$
|
|
62
|
+
$ms-color-tooltip-bg: #333 !default;
|
|
63
|
+
$ms-color-tooltip-text: #fff !default;
|
|
64
64
|
|
|
65
65
|
// ==============================================================================
|
|
66
66
|
// 4. TYPOGRAPHY SCALE (using --ms-rem for scalability)
|
|
67
67
|
// ==============================================================================
|
|
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
68
|
|
|
75
|
-
|
|
76
|
-
$
|
|
69
|
+
// Font Family
|
|
70
|
+
$ms-font-family: inherit !default; // Inherits from parent, or set via --base-font-family
|
|
77
71
|
|
|
78
|
-
|
|
79
|
-
|
|
72
|
+
// Font Sizes (unitless multipliers × --ms-rem)
|
|
73
|
+
// These are SCSS fallbacks. CSS custom properties in _css-variables.scss use
|
|
74
|
+
// calc(var(--base-font-size-*, default) * var(--ms-rem)) for theme-designer integration.
|
|
75
|
+
$ms-font-size-2xs: calc(1 * var(--ms-rem)) !default; // 10px
|
|
76
|
+
$ms-font-size-xs: calc(1.2 * var(--ms-rem)) !default; // 12px
|
|
77
|
+
$ms-font-size-sm: calc(1.4 * var(--ms-rem)) !default; // 14px
|
|
78
|
+
$ms-font-size-base: calc(1.6 * var(--ms-rem)) !default; // 16px
|
|
79
|
+
$ms-font-size-lg: calc(1.8 * var(--ms-rem)) !default; // 18px
|
|
80
|
+
$ms-font-size-xl: calc(2 * var(--ms-rem)) !default; // 20px
|
|
80
81
|
|
|
81
|
-
|
|
82
|
+
// Font Weights
|
|
83
|
+
$ms-font-weight-normal: 400 !default;
|
|
84
|
+
$ms-font-weight-medium: 500 !default;
|
|
85
|
+
$ms-font-weight-semibold: 600 !default;
|
|
86
|
+
|
|
87
|
+
// Line Heights (Tailwind naming: tight < normal < relaxed)
|
|
88
|
+
$ms-line-height-none: 1 !default;
|
|
89
|
+
$ms-line-height-tight: 1.25 !default;
|
|
90
|
+
$ms-line-height-normal: 1.5 !default;
|
|
91
|
+
$ms-line-height-relaxed: 1.75 !default;
|
|
92
|
+
|
|
93
|
+
$ms-letter-spacing-wide: 0.05em !default;
|
|
82
94
|
|
|
83
95
|
// ==============================================================================
|
|
84
96
|
// 5. BORDERS & SHADOWS
|
|
85
97
|
// ==============================================================================
|
|
86
|
-
$
|
|
87
|
-
$
|
|
88
|
-
$
|
|
89
|
-
$
|
|
98
|
+
$ms-border-width-base: $border-width-base !default;
|
|
99
|
+
$ms-border-radius: $border-radius-base !default;
|
|
100
|
+
$ms-border-radius-sm: $border-radius-sm !default;
|
|
101
|
+
$ms-border-radius-full: $border-radius-full !default;
|
|
90
102
|
|
|
91
|
-
$
|
|
103
|
+
$ms-border-color: $ms-color-neutral-light !default;
|
|
92
104
|
|
|
93
|
-
$
|
|
94
|
-
$
|
|
105
|
+
$ms-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !default;
|
|
106
|
+
$ms-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !default;
|
|
95
107
|
|
|
96
108
|
// ==============================================================================
|
|
97
109
|
// 6. TRANSITIONS & ANIMATIONS
|
|
98
110
|
// ==============================================================================
|
|
99
|
-
$
|
|
100
|
-
$
|
|
101
|
-
$
|
|
111
|
+
$ms-transition-fast: 150ms !default;
|
|
112
|
+
$ms-transition-normal: 200ms !default;
|
|
113
|
+
$ms-easing-snappy: cubic-bezier(0.4, 0, 0.2, 1) !default;
|
|
102
114
|
|
|
103
115
|
// ==============================================================================
|
|
104
116
|
// 7. Z-INDEX LAYERS
|
|
105
117
|
// ==============================================================================
|
|
106
|
-
$
|
|
107
|
-
$
|
|
108
|
-
$
|
|
118
|
+
$ms-z-index-sticky: 1 !default;
|
|
119
|
+
$ms-z-index-dropdown: 9999 !default;
|
|
120
|
+
$ms-z-index-popover: 10000 !default;
|
|
109
121
|
|
|
110
122
|
// ==============================================================================
|
|
111
123
|
// 8. LAYOUT & DIMENSIONS (using --ms-rem for scalability)
|
|
112
124
|
// ==============================================================================
|
|
113
|
-
$
|
|
114
|
-
$
|
|
115
|
-
$
|
|
116
|
-
$
|
|
117
|
-
$
|
|
118
|
-
$
|
|
119
|
-
$
|
|
125
|
+
$ms-input-icon-spacing: calc(4 * var(--ms-rem)) !default; // 40px
|
|
126
|
+
$ms-counter-offset: calc(3.2 * var(--ms-rem)) !default; // 32px
|
|
127
|
+
$ms-option-icon-size: calc(2 * var(--ms-rem)) !default; // 20px
|
|
128
|
+
$ms-count-clear-size: calc(1.6 * var(--ms-rem)) !default; // 16px
|
|
129
|
+
$ms-badge-height: calc(2.7 * var(--ms-rem)) !default; // 27px
|
|
130
|
+
$ms-badge-remove-width: calc(2.7 * var(--ms-rem)) !default; // 27px
|
|
131
|
+
$ms-popover-close-size: calc(2.4 * var(--ms-rem)) !default; // 24px
|
|
120
132
|
|
|
121
|
-
$
|
|
122
|
-
$
|
|
123
|
-
$
|
|
124
|
-
$
|
|
125
|
-
$
|
|
133
|
+
$ms-options-max-height: calc(32 * var(--ms-rem)) !default; // 320px
|
|
134
|
+
$ms-selected-popover-width: calc(32 * var(--ms-rem)) !default; // 320px
|
|
135
|
+
$ms-selected-popover-max-height: calc(32 * var(--ms-rem)) !default; // 320px
|
|
136
|
+
$ms-selected-popover-body-max-height: calc(28.8 * var(--ms-rem)) !default; // 288px
|
|
137
|
+
$ms-tooltip-max-width: calc(32 * var(--ms-rem)) !default; // 320px
|
|
126
138
|
|
|
127
139
|
// ==============================================================================
|
|
128
140
|
// 9. OPACITY VALUES
|
|
129
141
|
// ==============================================================================
|
|
130
|
-
$
|
|
131
|
-
$
|
|
132
|
-
$
|
|
133
|
-
$
|
|
134
|
-
$
|
|
135
|
-
$
|
|
136
|
-
$
|
|
142
|
+
$ms-opacity-placeholder: 0.6 !default;
|
|
143
|
+
$ms-opacity-disabled: 0.5 !default;
|
|
144
|
+
$ms-opacity-disabled-input: 0.6 !default;
|
|
145
|
+
$ms-opacity-option-selected-bg: 0.1 !default;
|
|
146
|
+
$ms-opacity-highlight-bg: 0.2 !default;
|
|
147
|
+
$ms-opacity-focus-shadow: 0.5 !default;
|
|
148
|
+
$ms-opacity-disabled-bg: 0.05 !default;
|
|
137
149
|
|
|
138
150
|
// ==============================================================================
|
|
139
151
|
// 10. TRANSFORMS
|
|
140
152
|
// ==============================================================================
|
|
141
|
-
$
|
|
142
|
-
$
|
|
143
|
-
$
|
|
144
|
-
$
|
|
153
|
+
$ms-transform-center-y: translateY(-50%) !default;
|
|
154
|
+
$ms-transform-rotate-180: 180deg !default;
|
|
155
|
+
$ms-transform-scale-hover: 1.1 !default;
|
|
156
|
+
$ms-transform-scale-active: 0.98 !default;
|
|
145
157
|
|
|
146
158
|
// ==============================================================================
|
|
147
159
|
// 11. ICONS & CONTENT
|
|
148
160
|
// ==============================================================================
|
|
149
|
-
$
|
|
150
|
-
$
|
|
161
|
+
$ms-icon-clear: "×" !default;
|
|
162
|
+
$ms-icon-remove: "×" !default;
|
|
151
163
|
|
|
152
164
|
// ==============================================================================
|
|
153
165
|
// 12. LAYOUT HELPERS
|
|
154
166
|
// ==============================================================================
|
|
155
|
-
$
|
|
156
|
-
$
|
|
157
|
-
$
|
|
167
|
+
$ms-order-first: -1 !default;
|
|
168
|
+
$ms-focus-outline-width: 2px !default;
|
|
169
|
+
$ms-option-focus-outline-offset: -2px !default;
|
|
158
170
|
|
|
159
171
|
// ==============================================================================
|
|
160
172
|
// COMPONENT SEMANTIC VARIABLES
|
|
@@ -164,359 +176,345 @@ $ml-option-focus-outline-offset: -2px !default;
|
|
|
164
176
|
|
|
165
177
|
// Input Component
|
|
166
178
|
// ==============================================================================
|
|
167
|
-
$
|
|
168
|
-
$
|
|
169
|
-
$
|
|
170
|
-
$
|
|
171
|
-
$
|
|
172
|
-
$
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
$
|
|
176
|
-
$
|
|
177
|
-
$
|
|
178
|
-
$
|
|
179
|
-
$
|
|
180
|
-
$
|
|
181
|
-
|
|
182
|
-
|
|
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
|
|
179
|
+
$ms-input-padding-v: $ms-spacing-sm !default;
|
|
180
|
+
$ms-input-padding-h: $ms-spacing-md !default;
|
|
181
|
+
$ms-input-height: calc(3.5 * var(--ms-rem)) !default; // 35px - Input field height
|
|
182
|
+
$ms-input-bg: $ms-color-white !default;
|
|
183
|
+
$ms-input-text: $ms-color-neutral-darkest !default;
|
|
184
|
+
$ms-input-border: $ms-color-neutral-base !default;
|
|
185
|
+
$ms-input-focus-border-color: $ms-color-accent-base !default;
|
|
186
|
+
|
|
187
|
+
$ms-input-border-style: $ms-border-width-base solid $ms-input-border !default;
|
|
188
|
+
$ms-input-border-radius: $ms-border-radius !default;
|
|
189
|
+
$ms-input-border-hover: $ms-color-neutral-dark !default;
|
|
190
|
+
$ms-input-font-size: $ms-font-size-sm !default;
|
|
191
|
+
$ms-input-padding: $ms-input-padding-v $ms-input-padding-h !default;
|
|
192
|
+
$ms-input-padding-right: $ms-input-icon-spacing !default;
|
|
193
|
+
$ms-input-placeholder-color: $ms-color-neutral-dark !default;
|
|
194
|
+
$ms-input-bg-disabled: rgba($ms-color-neutral-dark, $ms-opacity-disabled-bg) !default;
|
|
211
195
|
|
|
212
196
|
// Text Colors
|
|
213
197
|
// ==============================================================================
|
|
214
|
-
$
|
|
215
|
-
$
|
|
216
|
-
$
|
|
198
|
+
$ms-text-primary: $ms-color-neutral-darkest !default;
|
|
199
|
+
$ms-text-secondary: $ms-color-neutral-dark !default;
|
|
200
|
+
$ms-text-on-accent: $ms-color-white !default;
|
|
217
201
|
|
|
218
202
|
// Accent Colors
|
|
219
203
|
// ==============================================================================
|
|
220
|
-
$
|
|
221
|
-
$
|
|
222
|
-
$
|
|
204
|
+
$ms-accent-color: $ms-color-accent-base !default;
|
|
205
|
+
$ms-accent-color-hover: $ms-color-accent-dark !default;
|
|
206
|
+
$ms-accent-color-active: $ms-color-accent-darker !default;
|
|
223
207
|
|
|
224
208
|
// Background Colors
|
|
225
209
|
// ==============================================================================
|
|
226
|
-
$
|
|
227
|
-
$
|
|
210
|
+
$ms-primary-bg: $ms-color-neutral-lighter !default;
|
|
211
|
+
$ms-primary-bg-hover: $ms-color-neutral-light !default;
|
|
228
212
|
|
|
229
213
|
// Toggle Icon
|
|
230
214
|
// ==============================================================================
|
|
231
|
-
$
|
|
232
|
-
$
|
|
215
|
+
$ms-toggle-color: $ms-text-secondary !default;
|
|
216
|
+
$ms-toggle-right: $ms-input-padding-h !default;
|
|
233
217
|
|
|
234
218
|
// Count Badge (in input)
|
|
235
219
|
// ==============================================================================
|
|
236
|
-
$
|
|
237
|
-
$
|
|
238
|
-
$
|
|
239
|
-
$
|
|
240
|
-
$
|
|
241
|
-
$
|
|
242
|
-
$
|
|
220
|
+
$ms-counter-padding: calc(0.2 * var(--ms-rem)) calc(0.4 * var(--ms-rem)) !default; // 2px 4px
|
|
221
|
+
$ms-counter-bg: $ms-accent-color !default;
|
|
222
|
+
$ms-counter-color: $ms-text-on-accent !default;
|
|
223
|
+
$ms-counter-font-size: $ms-font-size-xs !default;
|
|
224
|
+
$ms-counter-font-weight: $ms-font-weight-semibold !default;
|
|
225
|
+
$ms-counter-border-radius: $ms-border-radius-sm !default;
|
|
226
|
+
$ms-counter-bg-hover: $ms-accent-color-hover !default;
|
|
243
227
|
|
|
244
228
|
// Floating Hint
|
|
245
229
|
// ==============================================================================
|
|
246
|
-
$
|
|
247
|
-
$
|
|
248
|
-
$
|
|
249
|
-
$
|
|
250
|
-
$
|
|
251
|
-
$
|
|
252
|
-
$
|
|
253
|
-
$
|
|
230
|
+
$ms-hint-padding: $ms-spacing-sm $ms-spacing-md !default;
|
|
231
|
+
$ms-hint-bg: $ms-color-white !default;
|
|
232
|
+
$ms-hint-border-color: $ms-color-neutral-light !default;
|
|
233
|
+
$ms-hint-border: $ms-border-width-base solid $ms-hint-border-color !default;
|
|
234
|
+
$ms-hint-border-radius: $ms-border-radius !default;
|
|
235
|
+
$ms-hint-box-shadow: $ms-shadow-md !default;
|
|
236
|
+
$ms-hint-font-size: $ms-font-size-xs !default;
|
|
237
|
+
$ms-hint-color: $ms-text-secondary !default;
|
|
254
238
|
|
|
255
239
|
// Dropdown
|
|
256
240
|
// ==============================================================================
|
|
257
|
-
$
|
|
258
|
-
$
|
|
259
|
-
$
|
|
260
|
-
$
|
|
241
|
+
$ms-dropdown-bg: $ms-color-white !default;
|
|
242
|
+
$ms-dropdown-border-color: $ms-color-neutral-light !default;
|
|
243
|
+
$ms-dropdown-shadow: $ms-shadow-xl !default;
|
|
244
|
+
$ms-dropdown-text: $ms-color-neutral-darkest !default;
|
|
261
245
|
|
|
262
|
-
$
|
|
263
|
-
$
|
|
264
|
-
$
|
|
265
|
-
$
|
|
246
|
+
$ms-dropdown-border: $ms-border-width-base solid $ms-dropdown-border-color !default;
|
|
247
|
+
$ms-dropdown-border-radius: $ms-border-radius !default;
|
|
248
|
+
$ms-dropdown-box-shadow: $ms-dropdown-shadow !default;
|
|
249
|
+
$ms-option-color: $ms-dropdown-text !default;
|
|
266
250
|
|
|
267
251
|
// Dropdown Actions
|
|
268
252
|
// ==============================================================================
|
|
269
|
-
$
|
|
270
|
-
$
|
|
271
|
-
$
|
|
272
|
-
$
|
|
253
|
+
$ms-actions-gap: $ms-spacing-xs !default;
|
|
254
|
+
$ms-actions-padding: $ms-spacing-sm !default;
|
|
255
|
+
$ms-actions-border-bottom: $ms-border-width-base solid $ms-border-color !default;
|
|
256
|
+
$ms-actions-bg: $ms-dropdown-bg !default;
|
|
273
257
|
|
|
274
258
|
// Action Button
|
|
275
259
|
// ==============================================================================
|
|
276
|
-
$
|
|
277
|
-
$
|
|
278
|
-
$
|
|
279
|
-
$
|
|
280
|
-
$
|
|
281
|
-
$
|
|
282
|
-
$
|
|
283
|
-
$
|
|
260
|
+
$ms-action-btn-padding: $ms-spacing-xs $ms-spacing-sm !default;
|
|
261
|
+
$ms-action-btn-font-size: $ms-font-size-xs !default;
|
|
262
|
+
$ms-action-btn-border: $ms-border-width-base solid $ms-border-color !default;
|
|
263
|
+
$ms-action-btn-border-radius: $ms-border-radius-sm !default;
|
|
264
|
+
$ms-action-btn-bg: transparent !default;
|
|
265
|
+
$ms-action-btn-color: inherit !default;
|
|
266
|
+
$ms-action-btn-bg-hover: $ms-primary-bg !default;
|
|
267
|
+
$ms-action-btn-border-color-hover: $ms-accent-color !default;
|
|
284
268
|
|
|
285
269
|
// Options Container
|
|
286
270
|
// ==============================================================================
|
|
287
|
-
$
|
|
271
|
+
$ms-options-padding: $ms-spacing-xs 0 !default;
|
|
288
272
|
|
|
289
273
|
// Group
|
|
290
274
|
// ==============================================================================
|
|
291
|
-
$
|
|
292
|
-
$
|
|
293
|
-
$
|
|
275
|
+
$ms-group-border-top: $ms-border-width-base solid $ms-border-color !default;
|
|
276
|
+
$ms-group-margin-top: $ms-spacing-xs !default;
|
|
277
|
+
$ms-group-padding-top: $ms-spacing-xs !default;
|
|
294
278
|
|
|
295
279
|
// Group Label
|
|
296
280
|
// ==============================================================================
|
|
297
|
-
$
|
|
298
|
-
$
|
|
299
|
-
$
|
|
300
|
-
$
|
|
301
|
-
$
|
|
302
|
-
$
|
|
303
|
-
$
|
|
281
|
+
$ms-option-padding-h: $ms-spacing-md !default;
|
|
282
|
+
$ms-group-label-padding: $ms-spacing-xs $ms-option-padding-h !default;
|
|
283
|
+
$ms-group-label-font-size: $ms-font-size-xs !default;
|
|
284
|
+
$ms-group-label-font-weight: $ms-font-weight-semibold !default;
|
|
285
|
+
$ms-group-label-color: $ms-text-secondary !default;
|
|
286
|
+
$ms-group-label-transform: uppercase !default;
|
|
287
|
+
$ms-group-label-letter-spacing: $ms-letter-spacing-wide !default;
|
|
304
288
|
|
|
305
289
|
// Option
|
|
306
290
|
// ==============================================================================
|
|
307
|
-
$
|
|
308
|
-
$
|
|
309
|
-
$
|
|
291
|
+
$ms-option-padding-v: $ms-spacing-sm !default;
|
|
292
|
+
$ms-option-gap: $ms-spacing-sm !default;
|
|
293
|
+
$ms-option-hover-bg: $ms-color-neutral-lightest !default;
|
|
310
294
|
|
|
311
|
-
$
|
|
312
|
-
$
|
|
313
|
-
$
|
|
314
|
-
$
|
|
315
|
-
$
|
|
316
|
-
$
|
|
317
|
-
$
|
|
318
|
-
$
|
|
319
|
-
$
|
|
295
|
+
$ms-option-padding: $ms-option-padding-v $ms-option-padding-h !default;
|
|
296
|
+
$ms-option-bg: transparent !default;
|
|
297
|
+
$ms-option-bg-hover: $ms-option-hover-bg !default;
|
|
298
|
+
$ms-option-bg-focused: $ms-option-hover-bg !default;
|
|
299
|
+
$ms-option-outline-focused: $ms-focus-outline-width solid $ms-accent-color !default;
|
|
300
|
+
$ms-option-bg-matched: rgba($ms-accent-color, 0.08) !default;
|
|
301
|
+
$ms-option-border-matched: 3px solid rgba($ms-accent-color, 0.4) !default;
|
|
302
|
+
$ms-option-bg-selected: rgba($ms-accent-color, $ms-opacity-option-selected-bg) !default;
|
|
303
|
+
$ms-option-color-selected: inherit !default; // Text color when selected (use 'inherit' to keep default, or set explicit color like #ffffff)
|
|
304
|
+
|
|
305
|
+
// Option State Combinations
|
|
306
|
+
// ==============================================================================
|
|
307
|
+
$ms-option-bg-focused-hover: $ms-option-hover-bg !default;
|
|
308
|
+
$ms-option-bg-matched-hover: rgba($ms-accent-color, 0.12) !default;
|
|
309
|
+
$ms-option-bg-selected-focused: rgba($ms-accent-color, 0.15) !default;
|
|
310
|
+
$ms-option-bg-selected-matched: rgba($ms-accent-color, 0.15) !default;
|
|
311
|
+
$ms-option-bg-disabled-selected: rgba($ms-accent-color, $ms-opacity-option-selected-bg) !default;
|
|
320
312
|
|
|
321
313
|
// Option Content
|
|
322
314
|
// ==============================================================================
|
|
323
|
-
$
|
|
315
|
+
$ms-option-content-gap: $ms-spacing-sm !default;
|
|
324
316
|
|
|
325
317
|
// Option Icon
|
|
326
318
|
// ==============================================================================
|
|
327
|
-
$
|
|
319
|
+
$ms-option-icon-font-size: $ms-font-size-base !default;
|
|
328
320
|
|
|
329
321
|
// Option Title
|
|
330
322
|
// ==============================================================================
|
|
331
|
-
$
|
|
332
|
-
$
|
|
333
|
-
$
|
|
334
|
-
$
|
|
335
|
-
$
|
|
323
|
+
$ms-option-title-font-size: $ms-font-size-sm !default;
|
|
324
|
+
$ms-option-title-color: inherit !default;
|
|
325
|
+
$ms-option-mark-bg: rgba($ms-accent-color, $ms-opacity-highlight-bg) !default;
|
|
326
|
+
$ms-option-mark-color: inherit !default;
|
|
327
|
+
$ms-option-mark-font-weight: $ms-font-weight-semibold !default;
|
|
336
328
|
|
|
337
329
|
// Option Subtitle
|
|
338
330
|
// ==============================================================================
|
|
339
|
-
$
|
|
340
|
-
$
|
|
341
|
-
$
|
|
342
|
-
$
|
|
331
|
+
$ms-option-subtitle-margin-top: $ms-spacing-xs !default;
|
|
332
|
+
$ms-option-subtitle-font-size: $ms-font-size-xs !default;
|
|
333
|
+
$ms-option-subtitle-color: $ms-text-secondary !default;
|
|
334
|
+
$ms-option-subtitle-line-height: $ms-line-height-tight !default;
|
|
343
335
|
|
|
344
336
|
// Empty State
|
|
345
337
|
// ==============================================================================
|
|
346
|
-
$
|
|
347
|
-
$
|
|
348
|
-
$
|
|
338
|
+
$ms-empty-padding: $ms-spacing-lg $ms-option-padding-h !default;
|
|
339
|
+
$ms-empty-font-size: $ms-font-size-sm !default;
|
|
340
|
+
$ms-empty-color: $ms-text-secondary !default;
|
|
349
341
|
|
|
350
342
|
// Loader
|
|
351
343
|
// ==============================================================================
|
|
352
|
-
$
|
|
353
|
-
$
|
|
344
|
+
$ms-loader-padding: $ms-spacing-lg !default;
|
|
345
|
+
$ms-loader-gap: $ms-spacing-sm !default;
|
|
354
346
|
|
|
355
347
|
// Loading Text
|
|
356
348
|
// ==============================================================================
|
|
357
|
-
$
|
|
358
|
-
$
|
|
349
|
+
$ms-loading-text-font-size: $ms-font-size-sm !default;
|
|
350
|
+
$ms-loading-text-color: $ms-text-secondary !default;
|
|
359
351
|
|
|
360
352
|
// Badges Container
|
|
361
353
|
// ==============================================================================
|
|
362
|
-
$
|
|
363
|
-
$
|
|
364
|
-
$
|
|
365
|
-
$
|
|
366
|
-
$
|
|
367
|
-
$
|
|
354
|
+
$ms-badge-gap: $ms-spacing-sm !default;
|
|
355
|
+
$ms-badges-gap: $ms-badge-gap !default;
|
|
356
|
+
$ms-badges-margin-bottom: $ms-spacing-sm !default;
|
|
357
|
+
$ms-badges-margin-top: $ms-spacing-sm !default;
|
|
358
|
+
$ms-badges-margin-left: $ms-spacing-xs !default;
|
|
359
|
+
$ms-badges-margin-right: $ms-spacing-xs !default;
|
|
368
360
|
|
|
369
361
|
// Count Display
|
|
370
362
|
// ==============================================================================
|
|
371
|
-
$
|
|
372
|
-
$
|
|
373
|
-
$
|
|
374
|
-
$
|
|
363
|
+
$ms-count-display-margin-bottom: $ms-spacing-sm !default;
|
|
364
|
+
$ms-count-display-margin-top: $ms-spacing-sm !default;
|
|
365
|
+
$ms-count-display-margin-left: $ms-spacing-sm !default;
|
|
366
|
+
$ms-count-display-margin-right: $ms-spacing-sm !default;
|
|
375
367
|
|
|
376
368
|
// Count Badge Wrapper
|
|
377
369
|
// ==============================================================================
|
|
378
|
-
$
|
|
379
|
-
$
|
|
380
|
-
$
|
|
381
|
-
$
|
|
382
|
-
$
|
|
383
|
-
$
|
|
384
|
-
$
|
|
370
|
+
$ms-counter-wrapper-bg: transparent !default;
|
|
371
|
+
$ms-counter-wrapper-border: $ms-border-width-base solid $ms-border-color !default;
|
|
372
|
+
$ms-counter-wrapper-border-radius: $ms-border-radius-sm !default;
|
|
373
|
+
$ms-counter-wrapper-padding: $ms-spacing-xs $ms-spacing-sm !default;
|
|
374
|
+
$ms-counter-wrapper-gap: $ms-spacing-xs !default;
|
|
375
|
+
$ms-counter-wrapper-bg-hover: $ms-option-hover-bg !default;
|
|
376
|
+
$ms-counter-wrapper-border-color-hover: $ms-accent-color !default;
|
|
385
377
|
|
|
386
378
|
// Count Text
|
|
387
379
|
// ==============================================================================
|
|
388
|
-
$
|
|
389
|
-
$
|
|
390
|
-
$
|
|
391
|
-
$
|
|
380
|
+
$ms-count-text-bg: transparent !default;
|
|
381
|
+
$ms-count-text-border: none !default;
|
|
382
|
+
$ms-count-text-font-size: $ms-font-size-sm !default;
|
|
383
|
+
$ms-count-text-color: $ms-text-primary !default;
|
|
392
384
|
|
|
393
385
|
// Count Clear Button
|
|
394
386
|
// ==============================================================================
|
|
395
|
-
$
|
|
396
|
-
$
|
|
397
|
-
$
|
|
398
|
-
$
|
|
399
|
-
$
|
|
400
|
-
$
|
|
387
|
+
$ms-count-clear-bg: transparent !default;
|
|
388
|
+
$ms-count-clear-color: $ms-text-secondary !default;
|
|
389
|
+
$ms-count-clear-font-size: $ms-font-size-lg !default;
|
|
390
|
+
$ms-count-clear-border-radius: $ms-border-radius-full !default;
|
|
391
|
+
$ms-count-clear-bg-hover: rgba($ms-accent-color, $ms-opacity-highlight-bg) !default;
|
|
392
|
+
$ms-count-clear-color-hover: $ms-accent-color !default;
|
|
401
393
|
|
|
402
394
|
// Badge
|
|
403
395
|
// ==============================================================================
|
|
404
|
-
$
|
|
405
|
-
$
|
|
406
|
-
$
|
|
396
|
+
$ms-badge-bg: $ms-color-accent-lightest !default;
|
|
397
|
+
$ms-badge-bg-hover: $ms-color-white !default;
|
|
398
|
+
$ms-badge-bg-active: $ms-color-accent-lighter !default;
|
|
407
399
|
|
|
408
|
-
$
|
|
409
|
-
$
|
|
410
|
-
$
|
|
411
|
-
$ml-badge-border: none !default; // No border by default
|
|
400
|
+
$ms-badge-font-size: $ms-font-size-xs !default;
|
|
401
|
+
$ms-badge-font-weight: $ms-font-weight-semibold !default;
|
|
402
|
+
$ms-badge-border-radius: $ms-border-radius !default;
|
|
412
403
|
|
|
413
404
|
// Badge Text
|
|
414
405
|
// ==============================================================================
|
|
415
|
-
$
|
|
416
|
-
$
|
|
417
|
-
$
|
|
406
|
+
$ms-badge-text-padding: 0 $ms-spacing-sm !default;
|
|
407
|
+
$ms-badge-text-bg: $ms-badge-bg !default;
|
|
408
|
+
$ms-badge-text-color: $ms-accent-color !default;
|
|
409
|
+
$ms-badge-text-border: none !default;
|
|
410
|
+
$ms-badge-text-bg-hover: $ms-badge-bg-hover !default;
|
|
411
|
+
$ms-badge-text-color-hover: $ms-badge-text-color !default;
|
|
418
412
|
|
|
419
413
|
// Badge Remove Button
|
|
420
414
|
// ==============================================================================
|
|
421
|
-
$
|
|
422
|
-
$
|
|
423
|
-
$
|
|
424
|
-
$
|
|
425
|
-
$
|
|
426
|
-
$
|
|
427
|
-
rgba($
|
|
415
|
+
$ms-badge-remove-bg: $ms-accent-color !default;
|
|
416
|
+
$ms-badge-remove-color: $ms-text-on-accent !default;
|
|
417
|
+
$ms-badge-remove-border: none !default;
|
|
418
|
+
$ms-badge-remove-font-size: $ms-font-size-xs !default;
|
|
419
|
+
$ms-badge-remove-bg-hover: $ms-accent-color-hover !default;
|
|
420
|
+
$ms-badge-remove-box-shadow-focus: 0 0 0 $ms-focus-outline-width
|
|
421
|
+
rgba($ms-accent-color, $ms-opacity-focus-shadow) !default;
|
|
428
422
|
|
|
429
423
|
// Badge Indicator (for "+ X more", "3 selected", compact mode display)
|
|
430
424
|
// ==============================================================================
|
|
431
|
-
$
|
|
432
|
-
$
|
|
433
|
-
$
|
|
434
|
-
$
|
|
435
|
-
$
|
|
436
|
-
$
|
|
437
|
-
$
|
|
438
|
-
$
|
|
425
|
+
$ms-badge-counter-bg: transparent !default;
|
|
426
|
+
$ms-badge-counter-border: $ms-border-width-base solid $ms-border-color !default;
|
|
427
|
+
$ms-badge-counter-border-radius: $ms-border-radius-sm !default;
|
|
428
|
+
$ms-badge-counter-text-color: $ms-text-secondary !default;
|
|
429
|
+
$ms-badge-counter-text-bg: $ms-color-neutral-base !default;
|
|
430
|
+
$ms-badge-counter-remove-bg: $ms-color-neutral-dark !default;
|
|
431
|
+
$ms-badge-counter-remove-color: $ms-color-white !default;
|
|
432
|
+
$ms-badge-counter-remove-bg-hover: $ms-color-neutral-darkest !default;
|
|
439
433
|
|
|
440
434
|
// "+X more" badge (partial mode)
|
|
441
435
|
// ==============================================================================
|
|
442
|
-
$
|
|
443
|
-
$
|
|
444
|
-
$
|
|
436
|
+
$ms-more-badge-bg: $ms-badge-text-bg !default;
|
|
437
|
+
$ms-more-badge-hover-bg: $ms-badge-bg-hover !default;
|
|
438
|
+
$ms-more-badge-active-bg: $ms-badge-bg-active !default;
|
|
445
439
|
|
|
446
440
|
// Tooltip
|
|
447
441
|
// ==============================================================================
|
|
448
|
-
$
|
|
449
|
-
$
|
|
450
|
-
$
|
|
451
|
-
$
|
|
452
|
-
$
|
|
453
|
-
$
|
|
454
|
-
$
|
|
442
|
+
$ms-tooltip-bg: $ms-color-tooltip-bg !default;
|
|
443
|
+
$ms-tooltip-color: $ms-color-tooltip-text !default;
|
|
444
|
+
$ms-tooltip-padding: $ms-spacing-sm $ms-spacing-md !default;
|
|
445
|
+
$ms-tooltip-border-radius: $ms-border-radius !default;
|
|
446
|
+
$ms-tooltip-font-size: $ms-font-size-sm !default;
|
|
447
|
+
$ms-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !default;
|
|
448
|
+
$ms-tooltip-z-index: $ms-z-index-popover !default;
|
|
455
449
|
|
|
456
450
|
// Selected Popover
|
|
457
451
|
// ==============================================================================
|
|
458
|
-
$
|
|
459
|
-
$
|
|
460
|
-
$
|
|
461
|
-
$
|
|
452
|
+
$ms-selected-popover-bg: $ms-dropdown-bg !default;
|
|
453
|
+
$ms-selected-popover-border: $ms-border-width-base solid $ms-dropdown-border-color !default;
|
|
454
|
+
$ms-selected-popover-border-radius: $ms-border-radius !default;
|
|
455
|
+
$ms-selected-popover-box-shadow: $ms-dropdown-shadow !default;
|
|
462
456
|
|
|
463
457
|
// Selected Popover Header
|
|
464
458
|
// ==============================================================================
|
|
465
|
-
$
|
|
466
|
-
$
|
|
467
|
-
$
|
|
468
|
-
$
|
|
469
|
-
$
|
|
470
|
-
$
|
|
459
|
+
$ms-selected-popover-header-padding: $ms-spacing-sm $ms-spacing-md !default;
|
|
460
|
+
$ms-selected-popover-header-bg: rgba($ms-accent-color, $ms-opacity-option-selected-bg) !default;
|
|
461
|
+
$ms-selected-popover-header-border-bottom: $ms-border-width-base solid $ms-border-color !default;
|
|
462
|
+
$ms-selected-popover-header-font-size: $ms-font-size-sm !default;
|
|
463
|
+
$ms-selected-popover-header-font-weight: $ms-font-weight-semibold !default;
|
|
464
|
+
$ms-selected-popover-header-color: $ms-text-primary !default;
|
|
471
465
|
|
|
472
466
|
// Selected Popover Close
|
|
473
467
|
// ==============================================================================
|
|
474
|
-
$
|
|
475
|
-
$
|
|
476
|
-
$
|
|
477
|
-
$
|
|
478
|
-
$
|
|
479
|
-
$
|
|
468
|
+
$ms-selected-popover-close-bg: transparent !default;
|
|
469
|
+
$ms-selected-popover-close-color: $ms-text-secondary !default;
|
|
470
|
+
$ms-selected-popover-close-font-size: $ms-font-size-xl !default;
|
|
471
|
+
$ms-selected-popover-close-border-radius: $ms-border-radius-full !default;
|
|
472
|
+
$ms-selected-popover-close-bg-hover: rgba($ms-accent-color, $ms-opacity-highlight-bg) !default;
|
|
473
|
+
$ms-selected-popover-close-color-hover: $ms-accent-color !default;
|
|
480
474
|
|
|
481
475
|
// Selected Popover Body
|
|
482
476
|
// ==============================================================================
|
|
483
|
-
$
|
|
484
|
-
$
|
|
477
|
+
$ms-selected-popover-body-gap: $ms-spacing-xs !default;
|
|
478
|
+
$ms-selected-popover-body-padding: $ms-spacing-sm !default;
|
|
485
479
|
|
|
486
480
|
// Checkbox
|
|
487
481
|
// ==============================================================================
|
|
488
|
-
$
|
|
489
|
-
$
|
|
490
|
-
$
|
|
491
|
-
$
|
|
492
|
-
$
|
|
493
|
-
$
|
|
494
|
-
$
|
|
482
|
+
$ms-checkbox-offset: calc(0.2 * var(--ms-rem)) !default; // 2px
|
|
483
|
+
$ms-checkbox-margin-top: $ms-checkbox-offset !default;
|
|
484
|
+
$ms-checkbox-margin-right: 0 !default; // Horizontal spacing handled by flexbox gap
|
|
485
|
+
$ms-checkbox-margin-bottom: 0 !default;
|
|
486
|
+
$ms-checkbox-margin-left: 0 !default;
|
|
487
|
+
$ms-checkbox-size: calc(1.6 * var(--ms-rem)) !default; // 16px - Width and height of checkbox
|
|
488
|
+
$ms-checkbox-scale: 1 !default; // Scale multiplier for checkbox size
|
|
495
489
|
|
|
496
490
|
// Checkbox Styling (custom checkbox appearance)
|
|
497
|
-
$
|
|
498
|
-
$
|
|
499
|
-
$
|
|
500
|
-
$
|
|
501
|
-
$
|
|
502
|
-
$
|
|
503
|
-
$
|
|
504
|
-
$
|
|
505
|
-
$
|
|
491
|
+
$ms-checkbox-bg: #ffffff !default; // White background for better contrast
|
|
492
|
+
$ms-checkbox-border: 1px solid $ms-color-neutral-base !default; // Darker border (#d1d5db)
|
|
493
|
+
$ms-checkbox-border-radius: calc(0.3 * var(--ms-rem)) !default; // 3px
|
|
494
|
+
$ms-checkbox-checked-bg: $ms-accent-color !default;
|
|
495
|
+
$ms-checkbox-checked-border: 1px solid $ms-accent-color !default;
|
|
496
|
+
$ms-checkbox-checkmark-color: $ms-text-on-accent !default;
|
|
497
|
+
$ms-checkbox-hover-border-color: $ms-accent-color !default;
|
|
498
|
+
$ms-checkbox-disabled-bg: $ms-primary-bg-hover !default;
|
|
499
|
+
$ms-checkbox-disabled-border: 1px solid $ms-border-color !default;
|
|
500
|
+
|
|
501
|
+
// Checkbox State Combinations
|
|
502
|
+
$ms-checkbox-checked-bg-hover: $ms-accent-color-hover !default;
|
|
503
|
+
$ms-checkbox-checked-border-color-hover: $ms-accent-color-hover !default;
|
|
506
504
|
|
|
507
505
|
// Placeholder
|
|
508
506
|
// ==============================================================================
|
|
509
|
-
$
|
|
507
|
+
$ms-placeholder-opacity: $ms-opacity-placeholder !default;
|
|
510
508
|
|
|
511
509
|
// Disabled States
|
|
512
510
|
// ==============================================================================
|
|
513
|
-
$
|
|
514
|
-
$
|
|
511
|
+
$ms-disabled-opacity: $ms-opacity-disabled !default;
|
|
512
|
+
$ms-disabled-input-opacity: $ms-opacity-disabled-input !default;
|
|
515
513
|
|
|
516
514
|
// Scrollbar
|
|
517
515
|
// ==============================================================================
|
|
518
|
-
$
|
|
519
|
-
$
|
|
520
|
-
$
|
|
521
|
-
$
|
|
522
|
-
$
|
|
516
|
+
$ms-scrollbar-width: 8px !default;
|
|
517
|
+
$ms-scrollbar-track-bg: transparent !default;
|
|
518
|
+
$ms-scrollbar-thumb-bg: $ms-color-neutral-base !default; // #d1d5db
|
|
519
|
+
$ms-scrollbar-thumb-bg-hover: $ms-color-neutral-dark !default; // #6b7280
|
|
520
|
+
$ms-scrollbar-thumb-border-radius: 4px !default;
|