gd-bs 6.4.3 → 6.4.5

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gd-bs",
3
- "version": "6.4.3",
3
+ "version": "6.4.5",
4
4
  "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
5
5
  "main": "build/index.js",
6
6
  "typings": "src/index.d.ts",
@@ -31,14 +31,35 @@
31
31
  -webkit-mask: var(--bs-accordion-btn-active-icon);
32
32
  -webkit-mask-repeat: no-repeat;
33
33
  }
34
+ .bg-danger {
35
+ background-color: var(--sp-error-icon, #a80000) !important;
36
+ }
37
+ .bg-dark {
38
+ background-color: var(--sp-neutral-dark, #201f1e) !important;
39
+ }
40
+ .bg-info {
41
+ background-color: var(--sp-accent, #8764b8) !important;
42
+ }
43
+ .bg-light {
44
+ background-color: var(--sp-neutral-lighter, #f3f2f1) !important;
45
+ }
34
46
  .bg-primary {
35
47
  background-color: var(--sp-theme-primary, #0078d4) !important;
36
48
  }
37
- /* Create a reusable 'SharePoint Blue' background color */
49
+ .bg-secondary {
50
+ background-color: var(--sp-info-icon, #605e5c) !important;
51
+ }
52
+ /* Create a reusable 'SharePoint' background color */
38
53
  .bg-sharepoint {
39
- background-color: var(--sp-theme-primary, #0078d4) !important;
54
+ background-color: var(--sp-theme-dark, #005a9e) !important;
55
+ }
56
+ .bg-success {
57
+ background-color: var(--sp-success-icon, #107c10) !important;
40
58
  }
41
- .bg-white {
59
+ .bg-warning {
60
+ background-color: var(--sp-severe-warning-icon, #d83b01) !important;
61
+ }
62
+ .bg-white, .bg-body {
42
63
  background-color: var(--sp-white, #ffffff) !important;
43
64
  }
44
65
  /* Fix breadcrumb alignment */
@@ -58,7 +79,6 @@
58
79
  /* Color match breadcrumb active links */
59
80
  .breadcrumb-item>a:active {
60
81
  color: var(--sp-primary-text, #333333);
61
- font-weight: 500;
62
82
  text-decoration: underline;
63
83
  }
64
84
  /* Fix breadcrumb alignment */
@@ -187,6 +207,7 @@
187
207
  }
188
208
  /* Fix color for outline light active */
189
209
  .btn-outline-light:active, .btn-outline-light:hover {
210
+ color: var(--sp-black, #000000);
190
211
  svg.brand path {
191
212
  fill: var(--sp-black, #000000);
192
213
  }
@@ -205,6 +226,9 @@
205
226
  .btn-check:checked+.btn-primary:focus, .btn-check:active+.btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show>.btn-primary.dropdown-toggle:focus {
206
227
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 25%);
207
228
  }
229
+ .card {
230
+ --bs-card-border-color: var(--bs-border-color);
231
+ }
208
232
  .carousel-caption {
209
233
  color: var(--sp-neutral-dark, #201f1e) !important;
210
234
  }
@@ -261,6 +285,17 @@
261
285
  border-color: var(--sp-neutral-light, #edebe9);
262
286
  color: var(--sp-neutral-tertiary, #a19f9d);
263
287
  }
288
+ /* Fix validation styling */
289
+ .form-control.is-invalid {
290
+ --bs-control-invalid-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23a80000'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23a80000' stroke='none'/%3e%3c/svg%3e");
291
+ background-image: var(--bs-control-invalid-image);
292
+ border-color: var(--sp-error-icon, #a80000) !important;
293
+ }
294
+ .form-control.is-valid {
295
+ --bs-control-valid-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23107c10' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
296
+ background-image: var(--bs-control-valid-image);
297
+ border-color: var(--sp-success-icon, #107c10) !important;
298
+ }
264
299
  .form-control::placeholder {
265
300
  color: var(--sp-info-icon, #605e5c);
266
301
  }
@@ -269,13 +304,23 @@
269
304
  }
270
305
  /* Bootstrap Icon: Custom - caret-up-fill + caret-down-fill */
271
306
  .form-select {
272
- background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 16 25.333' fill='%23605e5c' width='1em' height='1em'><path d='M0.34 8.03C-0.44 8.92 0.2 10.32 1.38 10.32C2.71 10.32 13.3 10.32 14.62 10.32C15.38 10.32 16 9.7 16 8.94C16 8.61 15.88 8.28 15.66 8.03C15 7.28 9.7 1.23 9.04 0.47C8.54 -0.1 7.67 -0.16 7.09 0.34C7.05 0.38 7 0.43 6.96 0.47C6.96 0.47 1.01 7.28 0.34 8.03Z'/><path d='M0.34 17.3C-0.44 16.41 0.2 15.01 1.38 15.01C2.71 15.01 13.3 15.01 14.62 15.01C15.38 15.01 16 15.63 16 16.39C16 16.73 15.88 17.05 15.66 17.3C15 18.06 9.7 24.11 9.04 24.86C8.54 25.43 7.67 25.49 7.09 24.99C7.05 24.95 7 24.91 6.96 24.86C6.96 24.86 1.01 18.06 0.34 17.3Z'/></svg>");
307
+ --bs-form-select-bg-img: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 16 25.333' fill='%23605e5c' width='1em' height='1em'><path d='M0.34 8.03C-0.44 8.92 0.2 10.32 1.38 10.32C2.71 10.32 13.3 10.32 14.62 10.32C15.38 10.32 16 9.7 16 8.94C16 8.61 15.88 8.28 15.66 8.03C15 7.28 9.7 1.23 9.04 0.47C8.54 -0.1 7.67 -0.16 7.09 0.34C7.05 0.38 7 0.43 6.96 0.47C6.96 0.47 1.01 7.28 0.34 8.03Z'/><path d='M0.34 17.3C-0.44 16.41 0.2 15.01 1.38 15.01C2.71 15.01 13.3 15.01 14.62 15.01C15.38 15.01 16 15.63 16 16.39C16 16.73 15.88 17.05 15.66 17.3C15 18.06 9.7 24.11 9.04 24.86C8.54 25.43 7.67 25.49 7.09 24.99C7.05 24.95 7 24.91 6.96 24.86C6.96 24.86 1.01 18.06 0.34 17.3Z'/></svg>");
273
308
  }
274
309
  /* Color match form-select active */
275
310
  .form-select:active, .form-select:focus {
276
311
  border-color: var(--sp-theme-secondary, #2b88d8);
277
312
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 65%);
278
313
  }
314
+ .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
315
+ --bs-select-invalid-image: var(--bs-form-select-bg-img),var(--bs-control-invalid-image);
316
+ background-image: var(--bs-select-invalid-image);
317
+ border-color: var(--sp-error-icon, #a80000) !important;
318
+ }
319
+ .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
320
+ --bs-select-valid-image: var(--bs-form-select-bg-img),var(--bs-control-valid-image);
321
+ background-image: var(--bs-select-valid-image);
322
+ border-color: var(--sp-success-icon, #107c10) !important;
323
+ }
279
324
  /* Fix text width on dataTables_length */
280
325
  .form-select-sm {
281
326
  background-size: 8px 10px;
@@ -286,8 +331,8 @@
286
331
  .form-check-input {
287
332
  height: 1.25em;
288
333
  }
289
- .form-check-input:focus {
290
- --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%232b88d8'/%3e%3c/svg%3e");
334
+ .form-check-input:focus:not(:checked):not(.dark) {
335
+ --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238a8886'/%3e%3c/svg%3e");
291
336
  }
292
337
  .form-check-input.dark, .form-check-input.dark:focus, .form-check-input.dark:checked {
293
338
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23faf9f8'/%3e%3c/svg%3e");
@@ -370,8 +415,12 @@
370
415
  color: var(--sp-primary-button-text, #ffffff);
371
416
  }
372
417
  .navbar {
373
- --bs-navbar-brand-color: var(--sp-primary-button-text, #ffffff);
374
418
  --bs-navbar-color: var(--sp-primary-button-text, #ffffff);
419
+ --bs-navbar-hover-color: var(--sp-theme-darker, #004578);
420
+ --bs-navbar-disabled-color: var(--sp-neutral-tertiary, #a19f9d);
421
+ --bs-navbar-active-color: var(--sp-theme-light, #c7e0f4);
422
+ --bs-navbar-brand-color: var(--sp-primary-button-text, #ffffff);
423
+ --bs-navbar-brand-hover-color: var(--sp-theme-darker, #004578);
375
424
  }
376
425
  /* Properly align the navbar brand text */
377
426
  .navbar-brand {
@@ -497,6 +546,11 @@
497
546
  table.dataTable {
498
547
  margin-top: 0rem !important;
499
548
  }
549
+ .table {
550
+ --bs-table-striped-bg: color-mix(in srgb, var(--sp-black, #000000), transparent 95%);
551
+ --bs-table-active-bg: color-mix(in srgb, var(--sp-black, #000000), transparent 90%);
552
+ --bs-table-hover-bg: color-mix(in srgb, var(--sp-black, #000000), transparent 92%);
553
+ }
500
554
  .table>:not(caption)>*>* {
501
555
  color: var(--sp-neutral-dark, #201f1e);
502
556
  }
@@ -557,25 +611,9 @@
557
611
  .w-5 {
558
612
  width: 5% !important;
559
613
  }
560
- /* Fix validation styling */
561
- .form-control.is-invalid {
562
- border-color: var(--sp-error-icon, #a80000) !important;
563
- background-image: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23a80000%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23a80000%27 stroke=%27none%27/></svg>");
564
- }
565
- .form-control.is-valid {
566
- border-color: var(--sp-success-icon, #107c10) !important;
567
- background-image: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 8%27%3e%3cpath fill=%27%23107c10%27 d=%27M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z%27/></svg>");
568
- }
569
- .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
570
- background-image: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 viewBox=%270 0 16 25.333%27 fill=%27%23605e5c%27 width=%271em%27 height=%271em%27><path d=%27M0.34 8.03C-0.44 8.92 0.2 10.32 1.38 10.32C2.71 10.32 13.3 10.32 14.62 10.32C15.38 10.32 16 9.7 16 8.94C16 8.61 15.88 8.28 15.66 8.03C15 7.28 9.7 1.23 9.04 0.47C8.54 -0.1 7.67 -0.16 7.09 0.34C7.05 0.38 7 0.43 6.96 0.47C6.96 0.47 1.01 7.28 0.34 8.03Z%27/><path d=%27M0.34 17.3C-0.44 16.41 0.2 15.01 1.38 15.01C2.71 15.01 13.3 15.01 14.62 15.01C15.38 15.01 16 15.63 16 16.39C16 16.73 15.88 17.05 15.66 17.3C15 18.06 9.7 24.11 9.04 24.86C8.54 25.43 7.67 25.49 7.09 24.99C7.05 24.95 7 24.91 6.96 24.86C6.96 24.86 1.01 18.06 0.34 17.3Z%27/></svg>"),url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23a80000%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23a80000%27 stroke=%27none%27/%3e%3c/svg%3e");
571
- }
572
- .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
573
- background-image: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 viewBox=%270 0 16 25.333%27 fill=%27%23605e5c%27 width=%271em%27 height=%271em%27><path d=%27M0.34 8.03C-0.44 8.92 0.2 10.32 1.38 10.32C2.71 10.32 13.3 10.32 14.62 10.32C15.38 10.32 16 9.7 16 8.94C16 8.61 15.88 8.28 15.66 8.03C15 7.28 9.7 1.23 9.04 0.47C8.54 -0.1 7.67 -0.16 7.09 0.34C7.05 0.38 7 0.43 6.96 0.47C6.96 0.47 1.01 7.28 0.34 8.03Z%27/><path d=%27M0.34 17.3C-0.44 16.41 0.2 15.01 1.38 15.01C2.71 15.01 13.3 15.01 14.62 15.01C15.38 15.01 16 15.63 16 16.39C16 16.73 15.88 17.05 15.66 17.3C15 18.06 9.7 24.11 9.04 24.86C8.54 25.43 7.67 25.49 7.09 24.99C7.05 24.95 7 24.91 6.96 24.86C6.96 24.86 1.01 18.06 0.34 17.3Z%27/></svg>"),url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 8%27%3e%3cpath fill=%27%23107c10%27 d=%27M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z%27/%3e%3c/svg%3e");
574
- }
575
614
  }
576
615
 
577
616
  /** Modal background - Shouldn't be under the .bs class */
578
-
579
617
  .modal-backdrop {
580
618
  --bs-backdrop-zindex: #{$zindex-modal-backdrop};
581
619
  --bs-backdrop-bg: #{$modal-backdrop-bg};
@@ -585,7 +623,6 @@
585
623
  }
586
624
 
587
625
  /** Offcanvas background - Shouldn't be under the .bs class */
588
-
589
626
  .offcanvas-backdrop {
590
627
  @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
591
628
  }
@@ -1,20 +1,15 @@
1
1
  /* Center the dataTables_info element properly */
2
-
3
2
  div.dataTables_wrapper div.dataTables_info {
4
3
  padding-top: 0.9rem;
5
4
  }
6
5
 
7
-
8
6
  /* Add proper width for dataTables_length select */
9
-
10
7
  div.dataTables_wrapper div.dataTables_length select {
11
8
  width: 3.75rem;
12
9
  }
13
10
 
14
11
  /* Be sure to escape any characters, such as # to %23 when specifying hex color values in background-image */
15
-
16
12
  /* DataTables sorting with Bootstrap Icons */
17
-
18
13
  table.dataTable thead .sorting,
19
14
  table.dataTable thead .sorting_asc,
20
15
  table.dataTable thead .sorting_desc,
@@ -38,27 +33,24 @@ table.dataTable thead .sorting_desc_disabled:after {
38
33
  }
39
34
 
40
35
  /* Bootstrap Icon: caret-up */
41
-
42
36
  table.dataTable thead .sorting {
43
- background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23605e5c' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M3.204 11L8 5.519 12.796 11H3.204zm-.753-.659l4.796-5.48a1 1 0 0 1 1.506 0l4.796 5.48c.566.647.106 1.659-.753 1.659H3.204a1 1 0 0 1-.753-1.659z'/></svg>");
37
+ --dt-sorting-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23605e5c' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M3.204 11L8 5.519 12.796 11H3.204zm-.753-.659l4.796-5.48a1 1 0 0 1 1.506 0l4.796 5.48c.566.647.106 1.659-.753 1.659H3.204a1 1 0 0 1-.753-1.659z'/></svg>");
38
+ background-image: var(--dt-sorting-image);
44
39
  }
45
40
 
46
-
47
41
  /* Bootstrap Icon: caret-up-fill */
48
-
49
42
  table.dataTable thead .sorting_asc {
50
- background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23605e5c' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/></svg>");
43
+ --dt-sorting-asc-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23605e5c' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/></svg>");
44
+ background-image: var(--dt-sorting-asc-image);
51
45
  }
52
46
 
53
-
54
47
  /* Bootstrap Icon: caret-down-fill */
55
-
56
48
  table.dataTable thead .sorting_desc {
57
- background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23605e5c' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
49
+ --dt-sorting-desc-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23605e5c' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
50
+ background-image: var(--dt-sorting-desc-image);
58
51
  }
59
52
 
60
53
  /* Color match colReorder line */
61
-
62
54
  div.DTCR_pointer {
63
- background-color: var(--sp-theme-accent, #0078d4);
55
+ background-color: var(--sp-theme-primary, #0078d4);
64
56
  }
@@ -1,4 +1,4 @@
1
- /** Root Styles */
1
+ /** Define default root styles */
2
2
  :root {
3
3
  --sp-accent: #8764b8;
4
4
  --sp-black: #000000;
@@ -38,7 +38,6 @@
38
38
  --sp-success-background: #dff6dd;
39
39
  --sp-success-icon: #107c10;
40
40
  --sp-teal: #008272;
41
- --sp-theme-accent: #0078d4;
42
41
  --sp-theme-dark: #005a9e;
43
42
  --sp-theme-darker: #004578;
44
43
  --sp-theme-dark-alt: #106ebe;
@@ -54,6 +53,7 @@
54
53
  --sp-yellow: #ffb900;
55
54
  --sp-yellow-dark: #d29200;
56
55
 
56
+ /* Map the Bootstrap root variables to SharePoint */
57
57
  --bs-blue: var(--sp-blue);
58
58
  --bs-indigo: var(--sp-purple-dark);
59
59
  --bs-purple: var(--sp-purple);
@@ -97,7 +97,7 @@
97
97
  --bs-secondary-bg-subtle: var(--sp-info-background);
98
98
  --bs-success-bg-subtle: var(--sp-success-background);
99
99
  --bs-info-bg-subtle: var(--sp-theme-lighter-alt);
100
- --bs-warning-bg-subtle: var(--sp-severe-warning-background);
100
+ --bs-warning-bg-subtle: var(--sp-warning-background);
101
101
  --bs-danger-bg-subtle: var(--sp-error-background);
102
102
  --bs-light-bg-subtle: var(--sp-neutral-lighter-alt);
103
103
  --bs-dark-bg-subtle: var(--sp-neutral-quaternary-alt);
@@ -105,7 +105,7 @@
105
105
  --bs-secondary-border-subtle: var(--sp-neutral-tertiary-alt);
106
106
  --bs-success-border-subtle: var(--sp-green-light);
107
107
  --bs-info-border-subtle: var(--sp-purple-light);
108
- --bs-warning-border-subtle: var(--sp-warning-background);
108
+ --bs-warning-border-subtle: var(--sp-severe-warning-background);
109
109
  --bs-danger-border-subtle: var(--sp-blocking-icon);
110
110
  --bs-light-border-subtle: var(--sp-neutral-light);
111
111
  --bs-dark-border-subtle: var(--sp-neutral-tertiary);