gd-bs 6.7.6 → 6.7.8
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/build/bs.js +1 -1
- package/build/components/dropdown/formItem.js +4 -0
- package/build/components/dropdown/index.js +75 -0
- package/build/components/dropdown/item.js +4 -0
- package/build/components/floating-ui/index.js +48 -42
- package/dist/gd-bs-icons.js +1 -1
- package/dist/gd-bs-icons.min.js +1 -1
- package/dist/gd-bs.d.ts +5 -0
- package/dist/gd-bs.js +1 -1
- package/dist/gd-bs.min.js +1 -1
- package/indexv2.html +26 -1
- package/package.json +60 -60
- package/src/components/dropdown/formItem.ts +6 -0
- package/src/components/dropdown/index.ts +84 -0
- package/src/components/dropdown/item.ts +6 -0
- package/src/components/dropdown/types.d.ts +1 -0
- package/src/components/floating-ui/index.ts +60 -48
- package/src/components/floating-ui/types.d.ts +4 -0
- package/src/styles/_floating-ui.scss +139 -33
|
@@ -25,11 +25,22 @@
|
|
|
25
25
|
border-radius: var(--bs-dropdown-border-radius, 5px);
|
|
26
26
|
min-width: var(--bs-dropdown-min-width, 10rem);
|
|
27
27
|
padding: var(--bs-dropdown-padding-y, 0.5rem) var (--bs-dropdown-padding-x, 0);
|
|
28
|
+
max-height: var(--bs-dropdown-max-height, 500px);
|
|
29
|
+
overflow-y: auto;
|
|
28
30
|
}
|
|
29
31
|
|
|
30
32
|
&.floating-dropdown .dropdown-item {
|
|
31
33
|
border-radius: var(--bs-dropdown-border-radius, 5px);
|
|
32
34
|
}
|
|
35
|
+
|
|
36
|
+
&.floating-dropdown .dropdown-item.active {
|
|
37
|
+
background-color: var(--sp-theme-primary, #0078d4);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&.floating-dropdown .dropdown-item:hover {
|
|
41
|
+
background-color: var(--bs-dropdown-link-hover-bg, #faf9f8);
|
|
42
|
+
color: var(--bs-dropdown-link-hover-color, #201f1e);
|
|
43
|
+
}
|
|
33
44
|
}
|
|
34
45
|
|
|
35
46
|
/** Floating-UI */
|
|
@@ -47,11 +58,21 @@
|
|
|
47
58
|
|
|
48
59
|
/* Floating UI primary theme color */
|
|
49
60
|
&[data-theme~='primary'],
|
|
50
|
-
&[data-theme~='primary']>div
|
|
61
|
+
&[data-theme~='primary']>div,
|
|
62
|
+
&[data-theme~='primary'] .dropdown-item {
|
|
51
63
|
background-color: var(--sp-theme-primary, #0078d4);
|
|
52
64
|
color: var(--sp-white, #ffffff);
|
|
53
65
|
}
|
|
54
66
|
|
|
67
|
+
&[data-theme~='primary'] .dropdown-item.active {
|
|
68
|
+
background-color: var(--sp-white, #ffffff);
|
|
69
|
+
color: var(--sp-theme-primary, #0078d4);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&[data-theme~='primary'] .dropdown-item:hover {
|
|
73
|
+
background-color: var(--sp-theme-tertiary);
|
|
74
|
+
}
|
|
75
|
+
|
|
55
76
|
&[data-theme~='primary'] {
|
|
56
77
|
border-style: solid;
|
|
57
78
|
border-width: .8px;
|
|
@@ -76,11 +97,21 @@
|
|
|
76
97
|
|
|
77
98
|
/* Floating UI secondary theme color */
|
|
78
99
|
&[data-theme~='secondary'],
|
|
79
|
-
&[data-theme~='secondary']>div
|
|
100
|
+
&[data-theme~='secondary']>div,
|
|
101
|
+
&[data-theme~='secondary'] .dropdown-item {
|
|
80
102
|
background-color: var(--sp-info-icon, #605e5c);
|
|
81
103
|
color: var(--sp-white, #ffffff);
|
|
82
104
|
}
|
|
83
105
|
|
|
106
|
+
&[data-theme~='secondary'] .dropdown-item.active {
|
|
107
|
+
background-color: var(--sp-white, #ffffff);
|
|
108
|
+
color: var(--sp-info-icon, #605e5c);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
&[data-theme~='secondary'] .dropdown-item:hover {
|
|
112
|
+
background-color: var(--sp-neutral-lighter);
|
|
113
|
+
}
|
|
114
|
+
|
|
84
115
|
&[data-theme~='secondary'] {
|
|
85
116
|
border-style: solid;
|
|
86
117
|
border-width: .8px;
|
|
@@ -105,12 +136,22 @@
|
|
|
105
136
|
|
|
106
137
|
/* Floating UI success theme color */
|
|
107
138
|
&[data-theme~='success'],
|
|
108
|
-
&[data-theme~='success']>div
|
|
139
|
+
&[data-theme~='success']>div,
|
|
140
|
+
&[data-theme~='success'] .dropdown-item {
|
|
109
141
|
background-color: var(--sp-success-icon, #107c10);
|
|
110
142
|
color: var(--sp-white, #ffffff);
|
|
111
143
|
}
|
|
112
144
|
|
|
113
|
-
&[data-theme~='
|
|
145
|
+
&[data-theme~='success'] .dropdown-item.active {
|
|
146
|
+
background-color: var(--sp-white, #ffffff);
|
|
147
|
+
color: var(--sp-success-icon, #107c10);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
&[data-theme~='success'] .dropdown-item:hover {
|
|
151
|
+
background-color: var(--sp-neutral-lighter);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
&[data-theme~='success'] {
|
|
114
155
|
border-style: solid;
|
|
115
156
|
border-width: .8px;
|
|
116
157
|
border-color: var(--sp-theme-primary, #107c10);
|
|
@@ -134,12 +175,22 @@
|
|
|
134
175
|
|
|
135
176
|
/* Floating UI info theme color */
|
|
136
177
|
&[data-theme~='info'],
|
|
137
|
-
&[data-theme~='info']>div
|
|
178
|
+
&[data-theme~='info']>div,
|
|
179
|
+
&[data-theme~='info'] .dropdown-item {
|
|
138
180
|
background-color: var(--sp-accent, #8764b8);
|
|
139
181
|
color: var(--sp-black, #000000);
|
|
140
182
|
}
|
|
141
183
|
|
|
142
|
-
&[data-theme~='
|
|
184
|
+
&[data-theme~='info'] .dropdown-item.active {
|
|
185
|
+
background-color: var(--sp-black, #000000);
|
|
186
|
+
color: var(--sp-accent, #8764b8);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
&[data-theme~='info'] .dropdown-item:hover {
|
|
190
|
+
background-color: var(--sp-neutral-dark);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
&[data-theme~='info'] {
|
|
143
194
|
border-style: solid;
|
|
144
195
|
border-width: .8px;
|
|
145
196
|
border-color: var(--sp-theme-primary, #8764b8);
|
|
@@ -163,12 +214,22 @@
|
|
|
163
214
|
|
|
164
215
|
/* Floating UI warning theme color */
|
|
165
216
|
&[data-theme~='warning'],
|
|
166
|
-
&[data-theme~='warning']>div
|
|
217
|
+
&[data-theme~='warning']>div,
|
|
218
|
+
&[data-theme~='warning'] .dropdown-item {
|
|
167
219
|
background-color: var(--sp-severe-warning-icon, #d83b01);
|
|
168
220
|
color: var(--sp-white, #ffffff);
|
|
169
221
|
}
|
|
170
222
|
|
|
171
|
-
&[data-theme~='
|
|
223
|
+
&[data-theme~='warning'] .dropdown-item.active {
|
|
224
|
+
background-color: var(--sp-white, #ffffff);
|
|
225
|
+
color: var(--sp-severe-warning-icon, #d83b01);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
&[data-theme~='warning'] .dropdown-item:hover {
|
|
229
|
+
background-color: var(--sp-neutral-lighter);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
&[data-theme~='warning'] {
|
|
172
233
|
border-style: solid;
|
|
173
234
|
border-width: .8px;
|
|
174
235
|
border-color: var(--sp-theme-primary, #d83b01);
|
|
@@ -192,12 +253,22 @@
|
|
|
192
253
|
|
|
193
254
|
/* Floating UI danger theme color */
|
|
194
255
|
&[data-theme~='danger'],
|
|
195
|
-
&[data-theme~='danger']>div
|
|
256
|
+
&[data-theme~='danger']>div,
|
|
257
|
+
&[data-theme~='danger'] .dropdown-item {
|
|
196
258
|
background-color: var(--sp-error-icon, #a80000);
|
|
197
259
|
color: var(--sp-white, #ffffff);
|
|
198
260
|
}
|
|
199
261
|
|
|
200
|
-
&[data-theme~='
|
|
262
|
+
&[data-theme~='danger'] .dropdown-item.active {
|
|
263
|
+
background-color: var(--sp-white, #ffffff);
|
|
264
|
+
color: var(--sp-error-icon, #a80000);
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
&[data-theme~='danger'] .dropdown-item:hover {
|
|
268
|
+
background-color: var(--sp-neutral-lighter);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
&[data-theme~='danger'] {
|
|
201
272
|
border-style: solid;
|
|
202
273
|
border-width: .8px;
|
|
203
274
|
border-color: var(--sp-theme-primary, #a80000);
|
|
@@ -221,79 +292,108 @@
|
|
|
221
292
|
|
|
222
293
|
/* Floating UI light theme color - override Tippy default to match Bootstrap */
|
|
223
294
|
&[data-theme~='light'],
|
|
224
|
-
&[data-theme~='light']>div
|
|
225
|
-
|
|
226
|
-
color: var(--sp-
|
|
295
|
+
&[data-theme~='light']>div,
|
|
296
|
+
&[data-theme~='light'] .dropdown-item {
|
|
297
|
+
background-color: var(--sp-neutral-lighter, #f3f2f1);
|
|
298
|
+
color: var(--sp-black, #000000);
|
|
227
299
|
}
|
|
228
300
|
|
|
229
|
-
&[data-theme~='
|
|
301
|
+
&[data-theme~='light'] .dropdown-item.active {
|
|
302
|
+
background-color: var(--sp-black, #000000);
|
|
303
|
+
color: var(--sp-neutral-lighter, #f3f2f1);
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
&[data-theme~='light'] .dropdown-item:hover {
|
|
307
|
+
background-color: var(--sp-white);
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
&[data-theme~='light'] {
|
|
230
311
|
border-style: solid;
|
|
231
312
|
border-width: .8px;
|
|
232
313
|
border-color: var(--sp-theme-primary, #f3f2f1);
|
|
233
314
|
}
|
|
234
315
|
|
|
235
316
|
&[data-theme~='light'][data-placement^='top']>.arrow::before {
|
|
236
|
-
border-top-color: var(--sp-neutral-lighter, #f3f2f1)
|
|
317
|
+
border-top-color: var(--sp-neutral-lighter, #f3f2f1);
|
|
237
318
|
}
|
|
238
319
|
|
|
239
320
|
&[data-theme~='light'][data-placement^='bottom']>.arrow::before {
|
|
240
|
-
border-bottom-color: var(--sp-neutral-lighter, #f3f2f1)
|
|
321
|
+
border-bottom-color: var(--sp-neutral-lighter, #f3f2f1);
|
|
241
322
|
}
|
|
242
323
|
|
|
243
324
|
&[data-theme~='light'][data-placement^='left']>.arrow::before {
|
|
244
|
-
border-left-color: var(--sp-neutral-lighter, #f3f2f1)
|
|
325
|
+
border-left-color: var(--sp-neutral-lighter, #f3f2f1);
|
|
245
326
|
}
|
|
246
327
|
|
|
247
328
|
&[data-theme~='light'][data-placement^='right']>.arrow::before {
|
|
248
|
-
border-right-color: var(--sp-neutral-lighter, #f3f2f1)
|
|
329
|
+
border-right-color: var(--sp-neutral-lighter, #f3f2f1);
|
|
249
330
|
}
|
|
250
331
|
|
|
251
332
|
/* Floating UI light-border theme color - override Tippy default to match Bootstrap */
|
|
252
333
|
&[data-theme~='light-border'],
|
|
253
|
-
&[data-theme~='light-border']>div
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
color: var(--sp-primary-text, #333333)
|
|
334
|
+
&[data-theme~='light-border']>div,
|
|
335
|
+
&[data-theme~='light-border'] .dropdown-item {
|
|
336
|
+
background-color: var(--sp-white, #ffffff);
|
|
337
|
+
color: var(--sp-primary-text, #333333);
|
|
257
338
|
}
|
|
258
339
|
|
|
259
|
-
&[data-theme~='
|
|
340
|
+
&[data-theme~='light-border'] .dropdown-item.active {
|
|
341
|
+
background-color: var(--sp-primary-text, #333333);
|
|
342
|
+
color: var(--sp-white, #ffffff);
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
&[data-theme~='light-border'] .dropdown-item:hover {
|
|
346
|
+
background-color: var(--sp-black);
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
&[data-theme~='light-border'] {
|
|
260
350
|
border-style: solid;
|
|
261
351
|
border-width: .8px;
|
|
262
352
|
border-color: var(--sp-theme-primary, #ffffff);
|
|
263
353
|
}
|
|
264
354
|
|
|
265
355
|
&[data-theme~='light-border'][data-placement^='top']>.arrow::before {
|
|
266
|
-
border-top-color: var(--sp-white, #ffffff)
|
|
356
|
+
border-top-color: var(--sp-white, #ffffff);
|
|
267
357
|
}
|
|
268
358
|
|
|
269
359
|
&[data-theme~='light-border'][data-placement^='bottom']>.arrow::before {
|
|
270
|
-
border-bottom-color: var(--sp-white, #ffffff)
|
|
360
|
+
border-bottom-color: var(--sp-white, #ffffff);
|
|
271
361
|
}
|
|
272
362
|
|
|
273
363
|
&[data-theme~='light-border'][data-placement^='left']>.arrow::before {
|
|
274
|
-
border-left-color: var(--sp-white, #ffffff)
|
|
364
|
+
border-left-color: var(--sp-white, #ffffff);
|
|
275
365
|
}
|
|
276
366
|
|
|
277
367
|
&[data-theme~='light-border'][data-placement^='right']>.arrow::before {
|
|
278
|
-
border-right-color: var(--sp-white, #ffffff)
|
|
368
|
+
border-right-color: var(--sp-white, #ffffff);
|
|
279
369
|
}
|
|
280
370
|
|
|
281
371
|
&[data-theme~='light-border'][data-placement^='bottom']>.arrow::after {
|
|
282
|
-
border-bottom-color: var(--sp-neutral-quaternary, #d2d0ce)
|
|
372
|
+
border-bottom-color: var(--sp-neutral-quaternary, #d2d0ce);
|
|
283
373
|
}
|
|
284
374
|
|
|
285
375
|
&[data-theme~='light-border'][data-placement^='top']>.arrow::after {
|
|
286
|
-
border-top-color: var(--sp-neutral-quaternary, #d2d0ce)
|
|
376
|
+
border-top-color: var(--sp-neutral-quaternary, #d2d0ce);
|
|
287
377
|
}
|
|
288
378
|
|
|
289
379
|
/* Floating UI dark theme color */
|
|
290
380
|
&[data-theme~='dark'],
|
|
291
|
-
&[data-theme~='dark']>div
|
|
381
|
+
&[data-theme~='dark']>div,
|
|
382
|
+
&[data-theme~='dark'] .dropdown-item {
|
|
292
383
|
background-color: var(--sp-neutral-dark, #201f1e);
|
|
293
384
|
color: var(--sp-white, #ffffff);
|
|
294
385
|
}
|
|
295
386
|
|
|
296
|
-
&[data-theme~='
|
|
387
|
+
&[data-theme~='dark'] .dropdown-item.active {
|
|
388
|
+
background-color: var(--sp-white, #ffffff);
|
|
389
|
+
color: var(--sp-neutral-dark, #201f1e);
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
&[data-theme~='dark'] .dropdown-item:hover {
|
|
393
|
+
background-color: var(--sp-neutral-lighter);
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
&[data-theme~='dark'] {
|
|
297
397
|
border-style: solid;
|
|
298
398
|
border-width: .8px;
|
|
299
399
|
border-color: var(--sp-theme-primary, #201f1e);
|
|
@@ -317,12 +417,18 @@
|
|
|
317
417
|
|
|
318
418
|
/* Floating UI SharePoint theme color */
|
|
319
419
|
&[data-theme~='sharepoint'],
|
|
320
|
-
&[data-theme~='sharepoint']>div
|
|
420
|
+
&[data-theme~='sharepoint']>div,
|
|
421
|
+
&[data-theme~='sharepoint'] .dropdown-item {
|
|
321
422
|
background-color: var(--sp-theme-dark, #005a9e);
|
|
322
423
|
color: var(--sp-white, #ffffff);
|
|
323
424
|
}
|
|
324
425
|
|
|
325
|
-
&[data-theme~='
|
|
426
|
+
&[data-theme~='sharepoint'] .dropdown-item.active {
|
|
427
|
+
background-color: var(--sp-white, #ffffff);
|
|
428
|
+
color: var(--sp-theme-dark, #005a9e);
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
&[data-theme~='sharepoint'] {
|
|
326
432
|
border-style: solid;
|
|
327
433
|
border-width: .8px;
|
|
328
434
|
border-color: var(--sp-theme-primary, #005a9e);
|