gd-bs 5.8.0 → 5.8.1
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/offcanvas/index.js +20 -10
- package/dist/gd-bs-icons.js +5 -5
- package/dist/gd-bs-icons.min.js +1 -1
- package/dist/gd-bs.d.ts +5 -0
- package/dist/gd-bs.js +2 -2
- package/dist/gd-bs.min.js +1 -1
- package/package.json +60 -60
- package/pnpm-lock.yaml +49 -62
- package/src/bs.scss +9 -744
- package/src/components/offcanvas/index.ts +20 -10
- package/src/components/offcanvas/types.d.ts +5 -0
- package/src/styles/_core.scss +51 -0
- package/src/styles/_custom.scss +444 -0
- package/src/styles/_dataTables.scss +45 -0
- package/src/styles/_icons.scss +19 -0
- package/src/styles/_tippy.scss +185 -0
|
@@ -9,31 +9,41 @@ import { HTML } from "./templates";
|
|
|
9
9
|
* Offcanvas Size
|
|
10
10
|
*/
|
|
11
11
|
export enum OffcanvasSize {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
12
|
+
Small = 1,
|
|
13
|
+
Small1 = 2,
|
|
14
|
+
Small2 = 3,
|
|
15
|
+
Small3 = 4,
|
|
16
|
+
Medium = 5,
|
|
17
|
+
Medium1 = 6,
|
|
18
|
+
Medium2 = 7,
|
|
19
|
+
Medium3 = 8,
|
|
20
|
+
Large = 9,
|
|
21
|
+
Large1 = 10,
|
|
22
|
+
Large2 = 11,
|
|
23
|
+
Large3 = 12,
|
|
24
|
+
XLarge = 13,
|
|
25
|
+
XXLarge = 14,
|
|
26
|
+
Full = 15
|
|
22
27
|
}
|
|
23
28
|
|
|
24
29
|
/**
|
|
25
30
|
* Offcanvas Size Classes
|
|
26
31
|
*/
|
|
27
32
|
export const OffcanvasSizeClassNames = new ClassNames([
|
|
33
|
+
"offcanvas-sm",
|
|
28
34
|
"offcanvas-size-sm1",
|
|
29
35
|
"offcanvas-size-sm2",
|
|
30
36
|
"offcanvas-size-sm3",
|
|
37
|
+
"offcanvas-md",
|
|
31
38
|
"offcanvas-size-md1",
|
|
32
39
|
"offcanvas-size-md2",
|
|
33
40
|
"offcanvas-size-md3",
|
|
41
|
+
"offcanvas-lg",
|
|
34
42
|
"offcanvas-size-lg1",
|
|
35
43
|
"offcanvas-size-lg2",
|
|
36
44
|
"offcanvas-size-lg3",
|
|
45
|
+
"offcanvas-xl",
|
|
46
|
+
"offcanvas-xxl",
|
|
37
47
|
"offcanvas-size-full"
|
|
38
48
|
]);
|
|
39
49
|
|
|
@@ -143,15 +143,20 @@ export interface IOffcanvasOptions {
|
|
|
143
143
|
* Offcanvas Size
|
|
144
144
|
*/
|
|
145
145
|
export type IOffcanvasSize = {
|
|
146
|
+
Small: number;
|
|
146
147
|
Small1: number;
|
|
147
148
|
Small2: number;
|
|
148
149
|
Small3: number;
|
|
150
|
+
Medium: number;
|
|
149
151
|
Medium1: number;
|
|
150
152
|
Medium2: number;
|
|
151
153
|
Medium3: number;
|
|
154
|
+
Large: number;
|
|
152
155
|
Large1: number;
|
|
153
156
|
Large2: number;
|
|
154
157
|
Large3: number;
|
|
158
|
+
XLarge: number;
|
|
159
|
+
XXLarge: number;
|
|
155
160
|
Full: number;
|
|
156
161
|
}
|
|
157
162
|
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
// Configuration
|
|
2
|
+
@import "~bootstrap/scss/functions";
|
|
3
|
+
@import "~bootstrap/scss/variables";
|
|
4
|
+
@import "~bootstrap/scss/maps";
|
|
5
|
+
@import "~bootstrap/scss/mixins";
|
|
6
|
+
@import "~bootstrap/scss/utilities";
|
|
7
|
+
|
|
8
|
+
.bs {
|
|
9
|
+
// Layout & components
|
|
10
|
+
@import "~bootstrap/scss/root";
|
|
11
|
+
@import "~bootstrap/scss/reboot";
|
|
12
|
+
@import "~bootstrap/scss/type";
|
|
13
|
+
@import "~bootstrap/scss/images";
|
|
14
|
+
@import "~bootstrap/scss/containers";
|
|
15
|
+
@import "~bootstrap/scss/grid";
|
|
16
|
+
@import "~bootstrap/scss/tables";
|
|
17
|
+
@import "~bootstrap/scss/forms";
|
|
18
|
+
@import "~bootstrap/scss/buttons";
|
|
19
|
+
@import "~bootstrap/scss/transitions";
|
|
20
|
+
@import "~bootstrap/scss/dropdown";
|
|
21
|
+
@import "~bootstrap/scss/button-group";
|
|
22
|
+
@import "~bootstrap/scss/nav";
|
|
23
|
+
@import "~bootstrap/scss/navbar";
|
|
24
|
+
@import "~bootstrap/scss/card";
|
|
25
|
+
@import "~bootstrap/scss/accordion";
|
|
26
|
+
@import "~bootstrap/scss/breadcrumb";
|
|
27
|
+
@import "~bootstrap/scss/pagination";
|
|
28
|
+
@import "~bootstrap/scss/badge";
|
|
29
|
+
@import "~bootstrap/scss/alert";
|
|
30
|
+
@import "~bootstrap/scss/progress";
|
|
31
|
+
@import "~bootstrap/scss/list-group";
|
|
32
|
+
@import "~bootstrap/scss/close";
|
|
33
|
+
@import "~bootstrap/scss/toasts";
|
|
34
|
+
@import "~bootstrap/scss/modal";
|
|
35
|
+
/* We are using tippyjs styling
|
|
36
|
+
@import "~bootstrap/scss/tooltip";
|
|
37
|
+
@import "~bootstrap/scss/popover";
|
|
38
|
+
*/
|
|
39
|
+
@import "~bootstrap/scss/carousel";
|
|
40
|
+
@import "~bootstrap/scss/spinners";
|
|
41
|
+
@import "~bootstrap/scss/offcanvas";
|
|
42
|
+
@import "~bootstrap/scss/placeholders";
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/** Helpers */
|
|
46
|
+
|
|
47
|
+
@import "~bootstrap/scss/helpers";
|
|
48
|
+
|
|
49
|
+
/** Utilities */
|
|
50
|
+
|
|
51
|
+
@import "~bootstrap/scss/utilities/api";
|
|
@@ -0,0 +1,444 @@
|
|
|
1
|
+
/** Customizations */
|
|
2
|
+
|
|
3
|
+
.bs {
|
|
4
|
+
/* Color match links to 'SharePoint Blue' */
|
|
5
|
+
a,
|
|
6
|
+
.link-primary {
|
|
7
|
+
color: #0078d4;
|
|
8
|
+
}
|
|
9
|
+
/* Color match hover links */
|
|
10
|
+
a:hover,
|
|
11
|
+
a:focus,
|
|
12
|
+
.link-primary:hover,
|
|
13
|
+
.link-primary:focus {
|
|
14
|
+
color: #004c86;
|
|
15
|
+
}
|
|
16
|
+
/* Color match active links */
|
|
17
|
+
a:active,
|
|
18
|
+
.link-primary:active {
|
|
19
|
+
color: #c4e4ff;
|
|
20
|
+
}
|
|
21
|
+
/* Color match accordion on focus */
|
|
22
|
+
.accordion-button:focus {
|
|
23
|
+
border-color: #2d8ad6;
|
|
24
|
+
box-shadow: 0 0 0 0.25rem rgba(45, 138, 214, 0.25);
|
|
25
|
+
}
|
|
26
|
+
/* Color match accordion while expanded */
|
|
27
|
+
.accordion-button:not(.collapsed) {
|
|
28
|
+
background-color: #c4e4ff;
|
|
29
|
+
color: #0078d4;
|
|
30
|
+
}
|
|
31
|
+
/* Color match accordion while expanded */
|
|
32
|
+
.accordion-button:not(.collapsed)::after {
|
|
33
|
+
background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%230078d4%27%3e%3cpath fill-rule=%27evenodd%27 d=%27M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z%27/%3e%3c/svg%3e");
|
|
34
|
+
}
|
|
35
|
+
/* Create a reusable 'SharePoint Blue' background color */
|
|
36
|
+
.bg-sharepoint {
|
|
37
|
+
background-color: #0078d4 !important;
|
|
38
|
+
}
|
|
39
|
+
/* Fix breadcrumb alignment */
|
|
40
|
+
.breadcrumb {
|
|
41
|
+
margin-bottom: 0;
|
|
42
|
+
}
|
|
43
|
+
/* Color match breadcrumb links */
|
|
44
|
+
.breadcrumb-item.active,
|
|
45
|
+
.breadcrumb-item>a {
|
|
46
|
+
color: #fff;
|
|
47
|
+
text-decoration: none;
|
|
48
|
+
}
|
|
49
|
+
/* Color match breadcrumb hover links */
|
|
50
|
+
.breadcrumb-item>a:hover,
|
|
51
|
+
.breadcrumb-item>a:focus {
|
|
52
|
+
color: #dee2e6;
|
|
53
|
+
text-decoration: underline;
|
|
54
|
+
}
|
|
55
|
+
/* Color match breadcrumb active links */
|
|
56
|
+
.breadcrumb-item>a:active {
|
|
57
|
+
color: #333333;
|
|
58
|
+
font-weight: 500;
|
|
59
|
+
text-decoration: underline;
|
|
60
|
+
}
|
|
61
|
+
/* Fix breadcrumb alignment */
|
|
62
|
+
.breadcrumb-item+.breadcrumb-item::before {
|
|
63
|
+
padding-top: 0.15rem;
|
|
64
|
+
}
|
|
65
|
+
/* Close button alignment */
|
|
66
|
+
.btn-close {
|
|
67
|
+
min-width: auto;
|
|
68
|
+
}
|
|
69
|
+
/** Button Icon - Custom class */
|
|
70
|
+
.btn-icon {
|
|
71
|
+
font-size: inherit;
|
|
72
|
+
line-height: inherit;
|
|
73
|
+
min-width: 0px;
|
|
74
|
+
padding: 2px;
|
|
75
|
+
}
|
|
76
|
+
/* Align icon properly when using btn-sm */
|
|
77
|
+
.btn-icon-sm {
|
|
78
|
+
margin: 0 0.25rem 0.14rem -0.25rem;
|
|
79
|
+
}
|
|
80
|
+
/* Color match the primary button to 'SharePoint Blue' */
|
|
81
|
+
/* 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;
|
|
87
|
+
}
|
|
88
|
+
/* Color match the primary button hover */
|
|
89
|
+
.btn-primary:hover {
|
|
90
|
+
background-color: #004c86;
|
|
91
|
+
border-color: #004c86;
|
|
92
|
+
}
|
|
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;
|
|
99
|
+
}
|
|
100
|
+
/* Color match primary outline button hover */
|
|
101
|
+
.btn-outline-primary:hover {
|
|
102
|
+
background-color: #0078d4;
|
|
103
|
+
border-color: #0078d4;
|
|
104
|
+
}
|
|
105
|
+
/* Fix color for outline light focus */
|
|
106
|
+
.btn-outline-light:focus {
|
|
107
|
+
color: #f8f9fa;
|
|
108
|
+
}
|
|
109
|
+
/* Fix color for outline light active */
|
|
110
|
+
.btn-outline-light:active,
|
|
111
|
+
.btn-outline-light:hover {
|
|
112
|
+
color: #000;
|
|
113
|
+
}
|
|
114
|
+
/* 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);
|
|
118
|
+
}
|
|
119
|
+
/* 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;
|
|
127
|
+
}
|
|
128
|
+
/* 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);
|
|
134
|
+
}
|
|
135
|
+
/* 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;
|
|
143
|
+
}
|
|
144
|
+
/* 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);
|
|
151
|
+
}
|
|
152
|
+
/* Color match dropdown hover */
|
|
153
|
+
.dropdown-item:hover,
|
|
154
|
+
.dropdown-item:focus {
|
|
155
|
+
background-color: #dee2e6;
|
|
156
|
+
}
|
|
157
|
+
/* Color match dropdown active */
|
|
158
|
+
.dropdown-item.active,
|
|
159
|
+
.dropdown-item:active {
|
|
160
|
+
background-color: #0078d4;
|
|
161
|
+
}
|
|
162
|
+
/* Dropdown Menu - Using the popover component for the menu, so we don't need to hide it by default */
|
|
163
|
+
.dropdown-menu {
|
|
164
|
+
display: inherit;
|
|
165
|
+
}
|
|
166
|
+
/* Show the toggles as buttons */
|
|
167
|
+
.form-check-input {
|
|
168
|
+
cursor: pointer;
|
|
169
|
+
height: 1.25em;
|
|
170
|
+
}
|
|
171
|
+
/** Color match the toggle background color to 'SharePoint Blue' */
|
|
172
|
+
.form-check-input:checked {
|
|
173
|
+
background-color: #0078d4;
|
|
174
|
+
border-color: #0078d4;
|
|
175
|
+
}
|
|
176
|
+
/* Color match form elements */
|
|
177
|
+
.form-control {
|
|
178
|
+
border-color: #6c757d;
|
|
179
|
+
}
|
|
180
|
+
/* Color match disabled form elements */
|
|
181
|
+
.form-control:disabled,
|
|
182
|
+
.form-control[readonly] {
|
|
183
|
+
border-color: #eaeaea;
|
|
184
|
+
color: #a6a6a6;
|
|
185
|
+
}
|
|
186
|
+
/* Bootstrap Icon: Custom - caret-up-fill + caret-down-fill */
|
|
187
|
+
.form-select {
|
|
188
|
+
background: #fff 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>") no-repeat right 0.75rem center/8px 10px !important;
|
|
189
|
+
border: 1px solid #6c757d;
|
|
190
|
+
}
|
|
191
|
+
/* Set cursor on hover */
|
|
192
|
+
.form-select:hover {
|
|
193
|
+
cursor: pointer;
|
|
194
|
+
}
|
|
195
|
+
/* Color match form-select active */
|
|
196
|
+
.form-select:active,
|
|
197
|
+
.form-select:focus {
|
|
198
|
+
border-color: #2d8ad6;
|
|
199
|
+
box-shadow: 0 0 0 0.25rem rgba(45, 138, 214, 0.25);
|
|
200
|
+
}
|
|
201
|
+
/* Fix text width on dataTables_length */
|
|
202
|
+
.form-select-sm {
|
|
203
|
+
padding-right: 1.65rem;
|
|
204
|
+
}
|
|
205
|
+
/* Color match the toggle on focus */
|
|
206
|
+
.form-switch .form-check-input:focus {
|
|
207
|
+
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");
|
|
208
|
+
}
|
|
209
|
+
/* Update toggle to white after checked */
|
|
210
|
+
.form-switch .form-check-input:checked {
|
|
211
|
+
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");
|
|
212
|
+
}
|
|
213
|
+
/* Color match the active list group item */
|
|
214
|
+
.list-group-item.active {
|
|
215
|
+
background-color: #0078d4;
|
|
216
|
+
border-color: #0078d4;
|
|
217
|
+
}
|
|
218
|
+
/* Increase modal border size */
|
|
219
|
+
.modal-footer {
|
|
220
|
+
border-top: 2px solid #dee2e6;
|
|
221
|
+
}
|
|
222
|
+
/* Increase modal border size */
|
|
223
|
+
.modal-header {
|
|
224
|
+
border-bottom: 2px solid #dee2e6;
|
|
225
|
+
.btn-close {
|
|
226
|
+
padding: 1rem;
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
/* Align modal header to the left */
|
|
230
|
+
.modal-title {
|
|
231
|
+
line-height: 1.2;
|
|
232
|
+
margin: 0;
|
|
233
|
+
}
|
|
234
|
+
/* Define a custom margin-end value */
|
|
235
|
+
.me-75 {
|
|
236
|
+
margin-right: 0.75rem !important;
|
|
237
|
+
}
|
|
238
|
+
/* Define a custom margin-start value */
|
|
239
|
+
.ms-75 {
|
|
240
|
+
margin-left: 0.75rem !important;
|
|
241
|
+
}
|
|
242
|
+
/* Define a custom margin-x value */
|
|
243
|
+
.mx-75 {
|
|
244
|
+
margin-left: 0.75rem !important;
|
|
245
|
+
margin-right: 0.75rem !important;
|
|
246
|
+
}
|
|
247
|
+
/* Set max-width to fit content */
|
|
248
|
+
.mw-fit {
|
|
249
|
+
max-width: fit-content !important;
|
|
250
|
+
}
|
|
251
|
+
/* Set color for nav links */
|
|
252
|
+
.nav-link {
|
|
253
|
+
color: #0078d4;
|
|
254
|
+
}
|
|
255
|
+
/* Set background color and border for nav-tabs */
|
|
256
|
+
.nav-tabs .nav-link {
|
|
257
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
258
|
+
border-radius: 0.25rem 0.25rem 0 0;
|
|
259
|
+
border: 2px solid #dee2e6;
|
|
260
|
+
}
|
|
261
|
+
/* Color match nav-tabs hover to secondary color */
|
|
262
|
+
.nav-tabs .nav-link:hover {
|
|
263
|
+
background-color: #6c757d;
|
|
264
|
+
border-color: #6c757d;
|
|
265
|
+
color: #fff;
|
|
266
|
+
}
|
|
267
|
+
/* Color match nav-tabs active to SharePoint */
|
|
268
|
+
.nav-tabs .nav-link.active,
|
|
269
|
+
.nav-tabs .show>.nav-link,
|
|
270
|
+
.nav-tabs .nav-link:focus {
|
|
271
|
+
background-color: #0078d4;
|
|
272
|
+
border-color: #0078d4;
|
|
273
|
+
color: #fff;
|
|
274
|
+
}
|
|
275
|
+
/* Properly align the navbar brand text */
|
|
276
|
+
.navbar-brand {
|
|
277
|
+
align-items: baseline;
|
|
278
|
+
}
|
|
279
|
+
/* Match off-canvas border color to modal */
|
|
280
|
+
.offcanvas-header {
|
|
281
|
+
border-bottom: 2px solid #dee2e6;
|
|
282
|
+
padding: 0.5rem 0.5rem 0.5rem 1rem;
|
|
283
|
+
}
|
|
284
|
+
/* Off-canvas close button alignment */
|
|
285
|
+
.offcanvas-header .btn-close {
|
|
286
|
+
margin: 0rem 0rem 0rem auto;
|
|
287
|
+
padding: 1rem;
|
|
288
|
+
}
|
|
289
|
+
/* Off-canvas sizes (Small 1) */
|
|
290
|
+
.offcanvas-start.offcanvas-size-sm1, .offcanvas-end.offcanvas-size-sm1 { width: 20vw; }
|
|
291
|
+
.offcanvas-top.offcanvas-size-sm1, .offcanvas-bottom.offcanvas-size-sm1 { height: 20vh; }
|
|
292
|
+
/* Off-canvas sizes (Small 2) */
|
|
293
|
+
.offcanvas-start.offcanvas-size-sm2, .offcanvas-end.offcanvas-size-sm2 { width: 25vw; }
|
|
294
|
+
.offcanvas-top.offcanvas-size-sm2, .offcanvas-bottom.offcanvas-size-sm2 { height: 25vh; }
|
|
295
|
+
/* Off-canvas sizes (Small 3) */
|
|
296
|
+
.offcanvas-start.offcanvas-size-sm3, .offcanvas-end.offcanvas-size-sm3 { width: 30vw; }
|
|
297
|
+
.offcanvas-top.offcanvas-size-sm3, .offcanvas-bottom.offcanvas-size-sm3 { height: 30vh; }
|
|
298
|
+
/* Off-canvas sizes (Medium 1) */
|
|
299
|
+
.offcanvas-start.offcanvas-size-md1, .offcanvas-end.offcanvas-size-md1 { width: 40vw; }
|
|
300
|
+
.offcanvas-top.offcanvas-size-md1, .offcanvas-bottom.offcanvas-size-md1 { height: 40vh; }
|
|
301
|
+
/* Off-canvas sizes (Medium 2) */
|
|
302
|
+
.offcanvas-start.offcanvas-size-md2, .offcanvas-end.offcanvas-size-md2 { width: 50vw; }
|
|
303
|
+
.offcanvas-top.offcanvas-size-md2, .offcanvas-bottom.offcanvas-size-md2 { height: 50vh; }
|
|
304
|
+
/* Off-canvas sizes (Medium 3) */
|
|
305
|
+
.offcanvas-start.offcanvas-size-md3, .offcanvas-end.offcanvas-size-md3 { width: 60vw; }
|
|
306
|
+
.offcanvas-top.offcanvas-size-md3, .offcanvas-bottom.offcanvas-size-md3 { height: 60vh; }
|
|
307
|
+
/* Off-canvas sizes (Large 1) */
|
|
308
|
+
.offcanvas-start.offcanvas-size-lg1, .offcanvas-end.offcanvas-size-lg1 { width: 75vw; }
|
|
309
|
+
.offcanvas-top.offcanvas-size-lg1, .offcanvas-bottom.offcanvas-size-lg1 { height: 75vh; }
|
|
310
|
+
/* Off-canvas sizes (Large 2) */
|
|
311
|
+
.offcanvas-start.offcanvas-size-lg2, .offcanvas-end.offcanvas-size-lg2 { width: 80vw; }
|
|
312
|
+
.offcanvas-top.offcanvas-size-lg2, .offcanvas-bottom.offcanvas-size-lg2 { height: 80vh; }
|
|
313
|
+
/* Off-canvas sizes (Large 3) */
|
|
314
|
+
.offcanvas-start.offcanvas-size-lg3, .offcanvas-end.offcanvas-size-lg3 { width: 90vw; }
|
|
315
|
+
.offcanvas-top.offcanvas-size-lg3, .offcanvas-bottom.offcanvas-size-lg3 { height: 90vh; }
|
|
316
|
+
/* Off-canvas sizes (Full) */
|
|
317
|
+
.offcanvas-start.offcanvas-size-full, .offcanvas-end.offcanvas-size-full { width: 100vw; }
|
|
318
|
+
.offcanvas-top.offcanvas-size-full, .offcanvas-bottom.offcanvas-size-full { height: 100vh; }
|
|
319
|
+
/* Color match the pagination link color to 'SharePoint Blue' */
|
|
320
|
+
.page-link {
|
|
321
|
+
border-color: #6c757d;
|
|
322
|
+
color: #0078d4;
|
|
323
|
+
}
|
|
324
|
+
/* Color match the pagination active link colors */
|
|
325
|
+
.page-item.active .page-link {
|
|
326
|
+
background-color: #6c757d;
|
|
327
|
+
border-color: #6c757d;
|
|
328
|
+
z-index: inherit;
|
|
329
|
+
}
|
|
330
|
+
/* Color match the pagination disabled border colors */
|
|
331
|
+
.page-item.disabled .page-link {
|
|
332
|
+
border-color: #6c757d;
|
|
333
|
+
}
|
|
334
|
+
/* Color match for SharePoint */
|
|
335
|
+
.page-link:focus {
|
|
336
|
+
background-color: #dee2e6;
|
|
337
|
+
}
|
|
338
|
+
/* Color match for SharePoint */
|
|
339
|
+
.page-link:hover {
|
|
340
|
+
color: #333333;
|
|
341
|
+
background-color: #dee2e6;
|
|
342
|
+
border-color: #6c757d;
|
|
343
|
+
}
|
|
344
|
+
/* Color match for SharePoint */
|
|
345
|
+
.page-link:focus,
|
|
346
|
+
.form-control:focus,
|
|
347
|
+
.form-check-input:focus {
|
|
348
|
+
border-color: #2d8ad6;
|
|
349
|
+
box-shadow: 0 0 0 0.25rem rgba(45, 138, 214, 0.25);
|
|
350
|
+
color: #333333;
|
|
351
|
+
}
|
|
352
|
+
/* Define a custom padding-end value */
|
|
353
|
+
.pe-06 {
|
|
354
|
+
padding-right: 0.6rem !important;
|
|
355
|
+
}
|
|
356
|
+
/* Define a custom padding-end value */
|
|
357
|
+
.pe-75 {
|
|
358
|
+
padding-right: 0.75rem !important;
|
|
359
|
+
}
|
|
360
|
+
/* Define a custom padding-start value */
|
|
361
|
+
.ps-75 {
|
|
362
|
+
padding-left: 0.75rem !important;
|
|
363
|
+
}
|
|
364
|
+
/* Define a custom padding-top value */
|
|
365
|
+
.pt-03 {
|
|
366
|
+
padding-top: 0.3rem !important;
|
|
367
|
+
}
|
|
368
|
+
/* Define a custom padding-x value */
|
|
369
|
+
.px-75 {
|
|
370
|
+
padding-left: 0.75rem !important;
|
|
371
|
+
padding-right: 0.75rem !important;
|
|
372
|
+
}
|
|
373
|
+
/* Fix for TippyJS Placement */
|
|
374
|
+
.popover-body>* {
|
|
375
|
+
position: relative !important;
|
|
376
|
+
}
|
|
377
|
+
/* Fix extra top margin in Firefox */
|
|
378
|
+
table.dataTable {
|
|
379
|
+
margin-top: 0rem !important;
|
|
380
|
+
}
|
|
381
|
+
/* Match the table header to the table footer; size & color */
|
|
382
|
+
.table>:not(:last-child)>:last-child>* {
|
|
383
|
+
border-bottom: 3px solid #dee2e6;
|
|
384
|
+
}
|
|
385
|
+
/* Match the table footer to the table header; size & color */
|
|
386
|
+
.tbl-footer {
|
|
387
|
+
border-bottom: 2px solid #dee2e6;
|
|
388
|
+
}
|
|
389
|
+
/* Add the default text color */
|
|
390
|
+
.text-default {
|
|
391
|
+
color: #333333;
|
|
392
|
+
}
|
|
393
|
+
/* Auto size the toast width */
|
|
394
|
+
.toast {
|
|
395
|
+
width: auto;
|
|
396
|
+
}
|
|
397
|
+
/* Fix for TippyJS Placement */
|
|
398
|
+
.tooltip-body>* {
|
|
399
|
+
position: relative !important;
|
|
400
|
+
}
|
|
401
|
+
/* Define a custom width value */
|
|
402
|
+
.w-5 {
|
|
403
|
+
width: 5% !important;
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
/** Modal background - Shouldn't be under the .bs class */
|
|
408
|
+
|
|
409
|
+
.modal-backdrop {
|
|
410
|
+
position: fixed;
|
|
411
|
+
top: 0;
|
|
412
|
+
left: 0;
|
|
413
|
+
z-index: $zindex-modal-backdrop;
|
|
414
|
+
width: 100vw;
|
|
415
|
+
height: 100vh;
|
|
416
|
+
background-color: $modal-backdrop-bg;
|
|
417
|
+
// Fade for backdrop
|
|
418
|
+
&.fade {
|
|
419
|
+
opacity: 0;
|
|
420
|
+
}
|
|
421
|
+
&.show {
|
|
422
|
+
opacity: $modal-backdrop-opacity;
|
|
423
|
+
}
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
|
|
427
|
+
/** Offcanvas background - Shouldn't be under the .bs class */
|
|
428
|
+
|
|
429
|
+
.offcanvas-backdrop {
|
|
430
|
+
position: fixed;
|
|
431
|
+
top: 0;
|
|
432
|
+
left: 0;
|
|
433
|
+
z-index: $zindex-offcanvas-backdrop;
|
|
434
|
+
width: 100vw;
|
|
435
|
+
height: 100vh;
|
|
436
|
+
background-color: $offcanvas-backdrop-bg;
|
|
437
|
+
// Fade for backdrop
|
|
438
|
+
&.fade {
|
|
439
|
+
opacity: 0;
|
|
440
|
+
}
|
|
441
|
+
&.show {
|
|
442
|
+
opacity: $offcanvas-backdrop-opacity;
|
|
443
|
+
}
|
|
444
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/* Center the dataTables_info element properly */
|
|
2
|
+
|
|
3
|
+
div.dataTables_wrapper div.dataTables_info {
|
|
4
|
+
padding-top: 0.9rem;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
/* Add proper width for dataTables_length select */
|
|
9
|
+
|
|
10
|
+
div.dataTables_wrapper div.dataTables_length select {
|
|
11
|
+
width: 3.75rem;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
/* Color match colReorder line */
|
|
16
|
+
|
|
17
|
+
div.DTCR_pointer {
|
|
18
|
+
background-color: #0078d4;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* Be sure to escape any characters, such as # to %23 when specifying hex color values in background-image */
|
|
22
|
+
|
|
23
|
+
/* DataTables sorting with Bootstrap Icons */
|
|
24
|
+
|
|
25
|
+
table.dataTable thead .sorting,
|
|
26
|
+
table.dataTable thead .sorting_asc,
|
|
27
|
+
table.dataTable thead .sorting_desc,
|
|
28
|
+
table.dataTable thead .sorting_asc_disabled,
|
|
29
|
+
table.dataTable thead .sorting_desc_disabled,
|
|
30
|
+
table.dataTable thead .sorting:before,
|
|
31
|
+
table.dataTable thead .sorting_asc:before,
|
|
32
|
+
table.dataTable thead .sorting_desc:before,
|
|
33
|
+
table.dataTable thead .sorting_asc_disabled:before,
|
|
34
|
+
table.dataTable thead .sorting_desc_disabled:before,
|
|
35
|
+
table.dataTable thead .sorting:after,
|
|
36
|
+
table.dataTable thead .sorting_asc:after,
|
|
37
|
+
table.dataTable thead .sorting_desc:after,
|
|
38
|
+
table.dataTable thead .sorting_asc_disabled:after,
|
|
39
|
+
table.dataTable thead .sorting_desc_disabled:after {
|
|
40
|
+
background-image: none;
|
|
41
|
+
background-position: right;
|
|
42
|
+
background-repeat: no-repeat;
|
|
43
|
+
background-size: 1rem 1rem;
|
|
44
|
+
content: "" !important;
|
|
45
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/* Bootstrap Icon: caret-up */
|
|
2
|
+
|
|
3
|
+
table.dataTable thead .sorting {
|
|
4
|
+
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%236c757d' 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>");
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
/* Bootstrap Icon: caret-up-fill */
|
|
9
|
+
|
|
10
|
+
table.dataTable thead .sorting_asc {
|
|
11
|
+
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%236c757d' 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>");
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
/* Bootstrap Icon: caret-down-fill */
|
|
16
|
+
|
|
17
|
+
table.dataTable thead .sorting_desc {
|
|
18
|
+
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%236c757d' 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>");
|
|
19
|
+
}
|