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