gd-bs 6.3.4 → 6.3.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.
Files changed (22) hide show
  1. package/build/bs.js +1 -1
  2. package/build/components/button/index.js +1 -1
  3. package/build/components/dropdown/item.js +1 -1
  4. package/build/components/iconLink/index.js +1 -1
  5. package/build/components/navbar/item.js +1 -1
  6. package/dist/gd-bs-icons.js +1 -1
  7. package/dist/gd-bs-icons.js.LICENSE.txt +83 -87
  8. package/dist/gd-bs-icons.min.js +1 -1
  9. package/dist/gd-bs.js +1 -1
  10. package/dist/gd-bs.js.LICENSE.txt +56 -68
  11. package/dist/gd-bs.min.js +1 -1
  12. package/package.json +13 -13
  13. package/pnpm-lock.yaml +1042 -1051
  14. package/src/bs.scss +10 -6
  15. package/src/components/button/index.ts +1 -1
  16. package/src/components/dropdown/item.ts +1 -1
  17. package/src/components/iconLink/index.ts +1 -1
  18. package/src/components/navbar/item.ts +1 -1
  19. package/src/styles/_custom.scss +196 -146
  20. package/src/styles/_dataTables.scss +5 -5
  21. package/src/styles/_root.scss +47 -0
  22. package/src/styles/_tippy.scss +65 -50
package/src/bs.scss CHANGED
@@ -2,18 +2,22 @@
2
2
 
3
3
  @import "./styles/core.scss";
4
4
 
5
- /** TippyJS */
5
+ /** Root Theme */
6
6
 
7
- @import "./styles/tippy.scss";
7
+ @import "./styles/root.scss";
8
+
9
+ /** Customizations */
10
+
11
+ @import "./styles/custom.scss";
8
12
 
9
13
  /** DataTables.net */
10
14
 
11
15
  @import "./styles/dataTables.scss";
12
16
 
13
- /** Customizations */
17
+ /** Icons */
14
18
 
15
- @import "./styles/custom.scss";
19
+ @import "./styles/icons.scss";
16
20
 
17
- /** Icons */
21
+ /** TippyJS */
18
22
 
19
- @import "./styles/icons.scss";
23
+ @import "./styles/tippy.scss";
package/src/components/button/index.ts CHANGED
@@ -125,7 +125,7 @@ class _Button extends Base<IButtonProps> implements IButton {
125
125
  this.el.prepend((this.props.iconType as Function)(this.props.iconSize, this.props.iconSize, this.props.iconClassName));
126
126
  }
127
127
  // Else, it's an element
128
- else if (typeof (this.props.iconType === "object")) {
128
+ else if (typeof (this.props.iconType) === "object") {
129
129
  // Append the icon
130
130
  this.el.prepend(this.props.iconType);
131
131
  }
package/src/components/dropdown/item.ts CHANGED
@@ -111,7 +111,7 @@ export class DropdownItem {
111
111
  elItem.prepend((this.props.iconType as Function)(iconSize, iconSize, this.props.iconClassName));
112
112
  }
113
113
  // Else, it's an element
114
- else if (typeof (this.props.iconType === "object")) {
114
+ else if (typeof (this.props.iconType) === "object") {
115
115
  // Append the icon
116
116
  elItem.prepend(this.props.iconType);
117
117
  }
package/src/components/iconLink/index.ts CHANGED
@@ -43,7 +43,7 @@ class _IconLink extends Base<IIconLinkProps> implements IIconLink {
43
43
  this._elIcon = (this.props.iconType as Function)(this.props.iconSize, this.props.iconSize, this.props.iconClassName);
44
44
  }
45
45
  // Else, it's an element
46
- else if (typeof (this.props.iconType === "object")) {
46
+ else if (typeof (this.props.iconType) === "object") {
47
47
  // Set the icon
48
48
  this._elIcon = this.props.iconType;
49
49
  } else { return; }
package/src/components/navbar/item.ts CHANGED
@@ -93,7 +93,7 @@ export class NavbarItem {
93
93
  link.prepend((this._props.iconType as Function)(iconSize, iconSize, this._props.iconClassName));
94
94
  }
95
95
  // Else, it's an element
96
- else if (typeof (this._props.iconType === "object")) {
96
+ else if (typeof (this._props.iconType) === "object") {
97
97
  // Append the icon
98
98
  link.prepend(this._props.iconType);
99
99
  }
package/src/styles/_custom.scss CHANGED
@@ -1,32 +1,26 @@
1
1
  /** Customizations */
2
-
3
2
  .bs {
4
3
  /* Color match links to 'SharePoint Blue' */
5
- a,
6
- .link-primary {
7
- color: #0078d4;
4
+ a, .link-primary {
5
+ color: var(--sp-theme-primary, #0078d4);
8
6
  }
9
7
  /* Color match hover links */
10
- a:hover,
11
- a:focus,
12
- .link-primary:hover,
13
- .link-primary:focus {
14
- color: #004c86;
8
+ a:hover, a:focus, .link-primary:hover, .link-primary:focus {
9
+ color: var(--sp-theme-darker, #004578);
15
10
  }
16
11
  /* Color match active links */
17
- a:active,
18
- .link-primary:active {
19
- color: #c4e4ff;
12
+ a:active, .link-primary:active {
13
+ color: var(--sp-theme-light, #c7e0f4);
20
14
  }
21
15
  /* Color match accordion on focus */
22
16
  .accordion-button:focus {
23
- border-color: #2d8ad6;
24
- box-shadow: 0 0 0 0.25rem rgba(45, 138, 214, 0.25);
17
+ border-color: var(--sp-theme-secondary, #2b88d8);
18
+ box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 65%);
25
19
  }
26
20
  /* Color match accordion while expanded */
27
21
  .accordion-button:not(.collapsed) {
28
- background-color: #c4e4ff;
29
- color: #0078d4;
22
+ background-color: var(--sp-theme-light, #c7e0f4);
23
+ color: var(--sp-theme-primary, #0078d4);
30
24
  }
31
25
  /* Color match accordion while expanded */
32
26
  .accordion-button:not(.collapsed)::after {
@@ -34,27 +28,31 @@
34
28
  }
35
29
  /* Create a reusable 'SharePoint Blue' background color */
36
30
  .bg-sharepoint {
37
- background-color: #0078d4 !important;
31
+ background-color: var(--sp-theme-primary, #0078d4) !important;
32
+ }
33
+ .bg-primary {
34
+ background-color: rgba(var(--sp-theme-primary, #0078d4), var(--bs-bg-opacity)) !important;
35
+ }
36
+ .bg-white {
37
+ background-color: var(--sp-white, #ffffff) !important;
38
38
  }
39
39
  /* Fix breadcrumb alignment */
40
40
  .breadcrumb {
41
41
  margin-bottom: 0;
42
42
  }
43
43
  /* Color match breadcrumb links */
44
- .breadcrumb-item.active,
45
- .breadcrumb-item>a {
46
- color: #fff;
44
+ .breadcrumb-item.active, .breadcrumb-item>a {
45
+ color: var(--sp-primary-button-text, #ffffff);
47
46
  text-decoration: none;
48
47
  }
49
48
  /* Color match breadcrumb hover links */
50
- .breadcrumb-item>a:hover,
51
- .breadcrumb-item>a:focus {
52
- color: #dee2e6;
49
+ .breadcrumb-item>a:hover, .breadcrumb-item>a:focus {
50
+ color: var(--sp-neutral-quaternary, #d2d0ce);
53
51
  text-decoration: underline;
54
52
  }
55
53
  /* Color match breadcrumb active links */
56
54
  .breadcrumb-item>a:active {
57
- color: #333333;
55
+ color: var(--sp-primary-text, #333333);
58
56
  font-weight: 500;
59
57
  text-decoration: underline;
60
58
  }
@@ -66,10 +64,14 @@
66
64
  .btn-close {
67
65
  min-width: auto;
68
66
  }
67
+ .btn:focus-visible {
68
+ background-color: var(--sp-neutral-dark, #201f1e);
69
+ border-color: var(--sp-neutral-dark, #201f1e);
70
+ color: var(--sp-neutral-lighter-alt, #faf9f8);
71
+ }
69
72
  /** Button Icon - Custom class */
70
73
  .btn-icon {
71
- font-size: inherit;
72
- line-height: inherit;
74
+ font-size: 0.875rem;
73
75
  min-width: 0px;
74
76
  padding: 2px;
75
77
  }
@@ -79,85 +81,106 @@
79
81
  }
80
82
  /* Color match the primary button to 'SharePoint Blue' */
81
83
  /* Don't reorder the btn-primary classes. It breaks active colors. */
82
- .btn-primary,
83
- .btn-primary:disabled,
84
- .btn-primary.disabled {
85
- background-color: #0078d4;
86
- border-color: #0078d4;
84
+ .btn-primary, .btn-primary:disabled, .btn-primary.disabled {
85
+ background-color: var(--sp-theme-primary, #0078d4);
86
+ border-color: var(--sp-theme-primary, #0078d4);
87
87
  }
88
88
  /* Color match the primary button hover */
89
89
  .btn-primary:hover {
90
- background-color: #004c86;
91
- border-color: #004c86;
90
+ background-color: var(--sp-theme-darker, #004578);
91
+ border-color: var(--sp-theme-darker, #004578);
92
92
  }
93
93
  /* Color match primary outline button */
94
- .btn-outline-primary,
95
- .btn-outline-primary:disabled,
96
- .btn-outline-primary.disabled {
97
- border-color: #0078d4;
98
- color: #0078d4;
94
+ .btn-outline-primary, .btn-outline-primary:disabled, .btn-outline-primary.disabled {
95
+ border-color: var(--sp-theme-primary, #0078d4);
96
+ color: var(--sp-theme-primary, #0078d4);
99
97
  }
100
98
  /* Color match primary outline button hover */
101
99
  .btn-outline-primary:hover {
102
- background-color: #0078d4;
103
- border-color: #0078d4;
100
+ background-color: var(--sp-theme-primary, #0078d4);
101
+ border-color: var(--sp-theme-primary, #0078d4);
102
+ }
103
+ .btn-outline-light {
104
+ --bs-btn-color: var(--sp-neutral-lighter-alt, #faf9f8);
105
+ --bs-btn-border-color: var(--sp-neutral-lighter-alt, #faf9f8);
106
+ --bs-btn-hover-color: var(--sp-black, #000000);
107
+ --bs-btn-hover-bg: var(--sp-neutral-lighter-alt, #faf9f8);
108
+ --bs-btn-hover-border-color: var(--sp-neutral-lighter-alt, #faf9f8);
109
+ --bs-btn-active-color: var(--sp-black, #000000);
110
+ --bs-btn-active-bg: var(--sp-neutral-lighter-alt, #faf9f8);
104
111
  }
105
112
  /* Fix color for outline light focus */
106
113
  .btn-outline-light:focus {
107
- color: #f8f9fa;
114
+ color: var(--sp-neutral-lighter-alt, #faf9f8);
108
115
  }
109
- /* Fix color for outline light active */
110
- .btn-outline-light:active,
111
116
  .btn-outline-light:hover {
112
- color: #000;
117
+ background-color: var(--sp-neutral-lighter-alt, #faf9f8);
118
+ border-color: var(--sp-neutral-lighter-alt, #faf9f8);
119
+ }
120
+ /* Fix color for outline light active */
121
+ .btn-outline-light:active, .btn-outline-light:hover {
122
+ color: var(--sp-black, #000000);
123
+ svg.brand path {
124
+ fill: var(--sp-black, #000000);
125
+ }
126
+ }
127
+ .btn-outline-secondary {
128
+ --bs-btn-color: var(--sp-neutral-secondary, #605e5c);
129
+ --bs-btn-border-color: var(--sp-neutral-secondary, #605e5c);
130
+ --bs-btn-hover-color: var(--sp-white, #ffffff);
131
+ --bs-btn-hover-bg: var(--sp-neutral-secondary, #605e5c);
132
+ --bs-btn-hover-border-color: var(--sp-neutral-secondary, #605e5c);
133
+ --bs-btn-active-color: var(--sp-white, #ffffff);
134
+ --bs-btn-active-bg: var(--sp-neutral-secondary, #605e5c);
135
+ --bs-btn-active-border-color: var(--sp-neutral-secondary, #605e5c);
136
+ --bs-btn-disabled-color: var(--sp-neutral-secondary, #605e5c);
137
+ --bs-btn-disabled-border-color: var(--sp-neutral-secondary, #605e5c);
138
+ }
139
+ .btn-check:checked+.btn, :not(.btn-check)+.btn:active, .btn:first-child:active, .btn.active, .btn.show {
140
+ background-color: var(--sp-theme-dark, #005a9e);
141
+ border-color: var(--sp-theme-dark, #005a9e);
142
+ color: var(--sp-primary-button-text, #ffffff);
113
143
  }
114
144
  /* Color match primary outline button focus */
115
- .btn-check:focus+.bs .btn-outline-primary,
116
- .btn-outline-primary:focus {
117
- box-shadow: 0 0 0 0.25rem rgba(45, 138, 214, 0.5);
145
+ .btn-check:focus+.bs .btn-outline-primary, .btn-outline-primary:focus {
146
+ box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 25%);
118
147
  }
119
148
  /* Color match primary outline button active */
120
- .btn-check:checked+.bs .btn-outline-primary,
121
- .btn-check:active+.bs .btn-outline-primary,
122
- .btn-outline-primary:active,
123
- .btn-outline-primary.active,
124
- .btn-outline-primary.dropdown-toggle.show {
125
- background-color: #004c86;
126
- border-color: #004c86;
149
+ .btn-check:checked+.bs .btn-outline-primary, .btn-check:active+.bs .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
150
+ background-color: var(--sp-theme-darker, #004578);
151
+ border-color: var(--sp-theme-darker, #004578);
127
152
  }
128
153
  /* Color match the primary button focus */
129
- .btn-check:focus+.btn-primary,
130
- .btn-primary:focus {
131
- background-color: #004c86;
132
- border-color: #004c86;
133
- box-shadow: 0 0 0 0.25rem rgba(45, 138, 214, 0.5);
154
+ .btn-check:focus+.btn-primary, .btn-primary:focus {
155
+ background-color: var(--sp-theme-darker, #004578);
156
+ border-color: var(--sp-theme-darker, #004578);
157
+ box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 25%);
134
158
  }
135
159
  /* Color match the primary button active */
136
- .bs .btn-check:checked+.btn-primary,
137
- .btn-check:active+.btn-primary,
138
- .btn-primary:active,
139
- .btn-primary.active,
140
- .show>.btn-primary.dropdown-toggle {
141
- background-color: #c4e4ff;
142
- border-color: #c4e4ff;
160
+ .btn-check:checked+.btn-primary, .btn-check:active+.btn-primary, .btn-primary:active, .btn-primary.active, .show>.btn-primary.dropdown-toggle {
161
+ background-color: var(--sp-theme-light, #c7e0f4);
162
+ border-color: var(--sp-theme-light, #c7e0f4);
143
163
  }
144
164
  /* Color match the shadow on active */
145
- .btn-check:checked+.btn-primary:focus,
146
- .btn-check:active+.btn-primary:focus,
147
- .btn-primary:active:focus,
148
- .btn-primary.active:focus,
149
- .show>.btn-primary.dropdown-toggle:focus {
150
- box-shadow: 0 0 0 0.25rem rgba(45, 138, 214, 0.5);
165
+ .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 {
166
+ box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 25%);
167
+ }
168
+ .carousel-caption {
169
+ color: var(--sp-neutral-dark, #201f1e) !important;
170
+ }
171
+ .carousel-control-prev-icon, .carousel-control-next-icon {
172
+ filter: invert(1);
173
+ }
174
+ .carousel-indicators [data-bs-target] {
175
+ background-color: var(--sp-neutral-dark, #201f1e) !important;
151
176
  }
152
177
  /* Color match dropdown hover */
153
- .dropdown-item:hover,
154
- .dropdown-item:focus {
155
- background-color: #dee2e6;
178
+ .dropdown-item:hover, .dropdown-item:focus {
179
+ background-color: var(--sp-neutral-quaternary, #d2d0ce);
156
180
  }
157
181
  /* Color match dropdown active */
158
- .dropdown-item.active,
159
- .dropdown-item:active {
160
- background-color: #0078d4;
182
+ .dropdown-item.active, .dropdown-item:active {
183
+ background-color: var(--sp-theme-primary, #0078d4);
161
184
  }
162
185
  /* Dropdown Menu - Using the popover component for the menu, so we don't need to hide it by default */
163
186
  .dropdown-menu {
@@ -179,35 +202,39 @@
179
202
  }
180
203
  /** Color match the toggle background color to 'SharePoint Blue' */
181
204
  .form-check-input:checked {
182
- background-color: #0078d4;
183
- border-color: #0078d4;
205
+ background-color: var(--sp-theme-primary, #0078d4);
206
+ border-color: var(--sp-theme-primary, #0078d4);
184
207
  }
185
208
  /* Color match form elements */
186
209
  .form-control {
187
- border-color: #6c757d;
188
- border-radius: var(--bs-border-radius);
210
+ border-color: var(--sp-neutral-secondary, #605e5c);
211
+ border-radius: var(--bs-border-radius, 0.375rem);
189
212
  }
190
213
  /* Color match disabled form elements */
191
- .form-control:disabled,
192
- .form-control[readonly] {
193
- border-color: #eaeaea;
194
- color: #a6a6a6;
214
+ .form-control:disabled, .form-control[readonly] {
215
+ border-color: var(--sp-neutral-light, #edebe9);
216
+ color: var(--sp-neutral-tertiary, #a19f9d);
217
+ }
218
+ .form-control::placeholder {
219
+ color: var(--sp-neutral-secondary, #605e5c);
220
+ }
221
+ .form-range::-webkit-slider-thumb {
222
+ background-color: var(--sp-theme-primary, #0078d4);
195
223
  }
196
224
  /* Bootstrap Icon: Custom - caret-up-fill + caret-down-fill */
197
225
  .form-select {
198
- 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='%236c757d' 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>");
199
- border: 1px solid #6c757d;
226
+ 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>");
227
+ border: 1px solid var(--sp-neutral-secondary, #605e5c);
200
228
  }
201
229
  /* Set cursor on hover */
202
230
  .form-select:hover {
203
- border-color: #c7e0f4;
231
+ border-color: var(--sp-theme-light, #c7e0f4);
204
232
  cursor: pointer;
205
233
  }
206
234
  /* Color match form-select active */
207
- .form-select:active,
208
- .form-select:focus {
209
- border-color: #2d8ad6;
210
- box-shadow: 0 0 0 0.25rem rgba(45, 138, 214, 0.25);
235
+ .form-select:active, .form-select:focus {
236
+ border-color: var(--sp-theme-secondary, #2b88d8);
237
+ box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 65%);
211
238
  }
212
239
  /* Fix text width on dataTables_length */
213
240
  .form-select-sm {
@@ -219,24 +246,36 @@
219
246
  }
220
247
  /* Color match the toggle on focus */
221
248
  .form-switch .form-check-input:focus {
222
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%232d8ad6'/%3e%3c/svg%3e");
249
+ background-image: 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");
223
250
  }
224
251
  /* Update toggle to white after checked */
225
252
  .form-switch .form-check-input:checked {
226
253
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
227
254
  }
255
+ button.btn-close.invert, :not(.btn-group).invert, .btn-group.invert::after, img.invert {
256
+ filter: invert(1);
257
+ }
258
+ .line-limit-1 {
259
+ display: -webkit-box;
260
+ overflow: hidden;
261
+ -webkit-box-orient: vertical;
262
+ -webkit-line-clamp: 1;
263
+ }
228
264
  /* Color match the active list group item */
229
265
  .list-group-item.active {
230
- background-color: #0078d4;
231
- border-color: #0078d4;
266
+ background-color: var(--sp-theme-primary, #0078d4);
267
+ border-color: var(--sp-theme-primary, #0078d4);
268
+ }
269
+ .modal-content {
270
+ color: var(--sp-neutral-dark, #201f1e);
232
271
  }
233
272
  /* Increase modal border size */
234
273
  .modal-footer {
235
- border-top: 2px solid #dee2e6;
274
+ border-top: 2px solid var(--sp-neutral-quaternary, #d2d0ce);
236
275
  }
237
276
  /* Increase modal border size */
238
277
  .modal-header {
239
- border-bottom: 2px solid #dee2e6;
278
+ border-bottom: 2px solid var(--sp-neutral-quaternary, #d2d0ce);
240
279
  .btn-close {
241
280
  padding: 1rem;
242
281
  }
@@ -265,27 +304,32 @@
265
304
  }
266
305
  /* Set color for nav links */
267
306
  .nav-link {
268
- color: #0078d4;
307
+ color: var(--sp-theme-primary, #0078d4);
308
+ }
309
+ .nav-tabs {
310
+ border-bottom: 0;
269
311
  }
270
312
  /* Set background color and border for nav-tabs */
271
313
  .nav-tabs .nav-link {
272
- background-color: rgba(0, 0, 0, 0.05);
314
+ background-color: var(--sp-neutral-lighter, #f3f2f1);
273
315
  border-radius: 0.25rem 0.25rem 0 0;
274
- border: 2px solid #dee2e6;
316
+ border: 2px solid var(--sp-neutral-quaternary, #d2d0ce);
275
317
  }
276
318
  /* Color match nav-tabs hover to secondary color */
277
319
  .nav-tabs .nav-link:hover {
278
- background-color: #6c757d;
279
- border-color: #6c757d;
280
- color: #fff;
320
+ background-color: var(--sp-neutral-secondary, #605e5c);
321
+ border-color: var(--sp-neutral-secondary, #605e5c);
322
+ color: var(--sp-primary-button-text, #ffffff);
281
323
  }
282
324
  /* Color match nav-tabs active to SharePoint */
283
- .nav-tabs .nav-link.active,
284
- .nav-tabs .show>.nav-link,
285
- .nav-tabs .nav-link:focus {
286
- background-color: #0078d4;
287
- border-color: #0078d4;
288
- color: #fff;
325
+ .nav-tabs .nav-link.active, .nav-tabs .show>.nav-link, .nav-tabs .nav-link:focus {
326
+ background-color: var(--sp-theme-primary, #0078d4);
327
+ border-color: var(--sp-theme-primary, #0078d4);
328
+ color: var(--sp-primary-button-text, #ffffff);
329
+ }
330
+ .navbar {
331
+ --bs-navbar-brand-color: var(--sp-primary-button-text, #ffffff);
332
+ --bs-navbar-color: var(--sp-primary-button-text, #ffffff);
289
333
  }
290
334
  /* Properly align the navbar brand text */
291
335
  .navbar-brand {
@@ -293,7 +337,7 @@
293
337
  }
294
338
  /* Match off-canvas border color to modal */
295
339
  .offcanvas-header {
296
- border-bottom: 2px solid #dee2e6;
340
+ border-bottom: 2px solid var(--sp-neutral-quaternary, #d2d0ce);
297
341
  padding: 0.5rem 0.5rem 0.5rem 1rem;
298
342
  }
299
343
  /* Off-canvas close button alignment */
@@ -333,41 +377,39 @@
333
377
  .offcanvas-top.offcanvas-size-full, .offcanvas-bottom.offcanvas-size-full { height: 100vh; }
334
378
  /* Color match the pagination link color to 'SharePoint Blue' */
335
379
  .page-link {
336
- border-color: #6c757d;
337
- color: #0078d4;
380
+ border-color: var(--sp-neutral-secondary, #605e5c);
381
+ color: var(--sp-theme-primary, #0078d4);
338
382
  font-size: 13px;
339
383
  }
340
- /* Color match the pagination active link colors */
341
- .page-item.active .page-link {
342
- background-color: #6c757d;
343
- border-color: #6c757d;
344
- color: #fff;
345
- z-index: inherit;
346
- }
347
384
  /* Color match the pagination disabled border colors */
348
385
  .page-item.disabled .page-link {
349
- background-color: #fff;
350
- border-color: #6c757d;
351
- color: #6c757d;
386
+ background-color: var(--sp-white, #ffffff);
387
+ border-color: var(--sp-neutral-secondary, #605e5c);
388
+ color: var(--sp-neutral-secondary, #605e5c);
352
389
  pointer-events: none;
353
390
  }
391
+ /* Color match the pagination active link colors */
392
+ .page-item.active .page-link {
393
+ background-color: var(--sp-neutral-secondary, #605e5c);
394
+ border-color: var(--sp-neutral-secondary, #605e5c);
395
+ color: var(--sp-primary-button-text, #ffffff);
396
+ z-index: inherit;
397
+ }
354
398
  /* Color match for SharePoint */
355
399
  .page-link:focus {
356
- background-color: #dee2e6;
400
+ background-color: var(--sp-neutral-quaternary, #d2d0ce);
357
401
  }
358
402
  /* Color match for SharePoint */
359
403
  .page-link:hover {
360
- color: #333333;
361
- background-color: #dee2e6;
362
- border-color: #6c757d;
404
+ color: var(--sp-primary-text, #333333);
405
+ background-color: var(--sp-neutral-quaternary, #d2d0ce);
406
+ border-color: var(--sp-neutral-secondary, #605e5c);
363
407
  }
364
408
  /* Color match for SharePoint */
365
- .page-link:focus,
366
- .form-control:focus,
367
- .form-check-input:focus {
368
- border-color: #2d8ad6;
369
- box-shadow: 0 0 0 0.25rem rgba(45, 138, 214, 0.25);
370
- color: #333333;
409
+ .page-link:focus, .form-control:focus, .form-check-input:focus {
410
+ border-color: var(--sp-theme-secondary, #2b88d8);
411
+ box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--sp-theme-tertiary, #71afe5), transparent 65%);
412
+ color: var(--sp-primary-text, #333333);
371
413
  }
372
414
  /* Define a custom padding-end value */
373
415
  .pe-06 {
@@ -397,27 +439,36 @@
397
439
  /* Fix Rich Textbox rounded corners */
398
440
  .rich-textbox {
399
441
  .editor-container {
400
- border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius) !important;
442
+ border-radius: 0 0 var(--bs-border-radius, 0.375rem) var(--bs-border-radius, 0.375rem) !important;
401
443
  }
402
444
  .toolbar-container {
403
- border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0 !important;
445
+ border-radius: var(--bs-border-radius, 0.375rem) var(--bs-border-radius, 0.375rem) 0 0 !important;
404
446
  }
405
447
  }
448
+ svg.brand path {
449
+ fill: var(--sp-white, #ffffff);
450
+ }
451
+ svg.icon-svg path {
452
+ fill: currentColor;
453
+ }
406
454
  /* Fix extra top margin in Firefox */
407
455
  table.dataTable {
408
456
  margin-top: 0rem !important;
409
457
  }
458
+ .table>:not(caption)>*>* {
459
+ color: var(--sp-neutral-dark, #201f1e);
460
+ }
410
461
  /* Match the table header to the table footer; size & color */
411
462
  .table>:not(:last-child)>:last-child>* {
412
- border-bottom: 3px solid #dee2e6;
463
+ border-bottom: 3px solid var(--sp-neutral-quaternary, #d2d0ce);
413
464
  }
414
465
  /* Match the table footer to the table header; size & color */
415
466
  .tbl-footer {
416
- border-bottom: 2px solid #dee2e6;
467
+ border-bottom: 2px solid var(--sp-neutral-quaternary, #d2d0ce);
417
468
  }
418
469
  /* Add the default text color */
419
470
  .text-default {
420
- color: #333333;
471
+ color: var(--sp-primary-text, #333333);
421
472
  }
422
473
  /* Auto size the toast width */
423
474
  .toast {
@@ -433,18 +484,18 @@
433
484
  }
434
485
  /* Fix validation styling */
435
486
  .form-control.is-invalid {
436
- border-color: #dc3545 !important;
437
- 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%23dc3545%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%23dc3545%27 stroke=%27none%27/></svg>");
487
+ border-color: var(--sp-error-icon, #a80000) !important;
488
+ 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>");
438
489
  }
439
490
  .form-control.is-valid {
440
- border-color: #198754 !important;
441
- 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%23198754%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>");
491
+ border-color: var(--sp-success-icon, #107c10) !important;
492
+ 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>");
442
493
  }
443
494
  .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
444
- 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%236c757d%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%23dc3545%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%23dc3545%27 stroke=%27none%27/%3e%3c/svg%3e");
495
+ 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");
445
496
  }
446
497
  .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
447
- 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%236c757d%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%23198754%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");
498
+ 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");
448
499
  }
449
500
  }
450
501
 
@@ -458,9 +509,8 @@
458
509
  @include overlay-backdrop(var(--bs-backdrop-zindex), var(--bs-backdrop-bg), var(--bs-backdrop-opacity));
459
510
  }
460
511
 
461
-
462
512
  /** Offcanvas background - Shouldn't be under the .bs class */
463
513
 
464
514
  .offcanvas-backdrop {
465
515
  @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
466
- }
516
+ }