studiokit-scaffolding-js 7.0.12-next.1.7 → 7.0.12-next.1.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/LICENSE +21 -21
- package/README.md +137 -137
- package/lib/components/Impersonation/UserDetail.css +22 -22
- package/lib/components/Quill/TableModule/index.css +171 -171
- package/lib/css/base/_base.css +98 -98
- package/lib/css/base/_typography.css +130 -130
- package/lib/css/components/_alert.css +86 -86
- package/lib/css/components/_bootstrap-grid.css +28 -28
- package/lib/css/components/_buttons.css +397 -397
- package/lib/css/components/_forms.css +101 -101
- package/lib/css/components/_menu.css +56 -56
- package/lib/css/components/_modals.css +46 -46
- package/lib/css/components/_quill.css +315 -315
- package/lib/css/components/_tables.css +497 -497
- package/lib/css/components/_tags.css +12 -12
- package/lib/css/index-with-variables.css +15 -15
- package/lib/css/index.css +14 -14
- package/lib/css/utils/_border.css +463 -463
- package/lib/css/utils/_color.css +317 -317
- package/lib/css/utils/_display.css +305 -305
- package/lib/css/utils/_general.css +48 -48
- package/lib/css/utils/_icon.css +16 -16
- package/lib/css/utils/_text.css +25 -25
- package/lib/css/utils/_width.css +60 -60
- package/lib/css/variables.css +84 -84
- package/package.json +214 -214
|
@@ -1,497 +1,497 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--cell-padding-horiz: 1rem;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
/* table style overrides */
|
|
6
|
-
|
|
7
|
-
td,
|
|
8
|
-
.MuiTableCell-body {
|
|
9
|
-
padding: 0.9rem var(--cell-padding-horiz);
|
|
10
|
-
font-size: 1rem;
|
|
11
|
-
border-bottom: 2px solid var(--color-light-grey);
|
|
12
|
-
width: 130px;
|
|
13
|
-
|
|
14
|
-
& button {
|
|
15
|
-
overflow: hidden;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
th,
|
|
20
|
-
.MuiTableCell-head {
|
|
21
|
-
background-color: var(--color-off-white);
|
|
22
|
-
border-bottom: 1px solid var(--color-light-grey);
|
|
23
|
-
color: var(--color-dark-grey);
|
|
24
|
-
font-size: 0.9rem;
|
|
25
|
-
padding: 0.75rem var(--cell-padding-horiz);
|
|
26
|
-
text-transform: uppercase;
|
|
27
|
-
font-weight: var(--font-weight-bold);
|
|
28
|
-
height: auto;
|
|
29
|
-
width: 130px;
|
|
30
|
-
|
|
31
|
-
&.header-sort {
|
|
32
|
-
padding: 0;
|
|
33
|
-
white-space: pre-wrap;
|
|
34
|
-
|
|
35
|
-
& button {
|
|
36
|
-
display: block;
|
|
37
|
-
padding: 0.75rem 18px;
|
|
38
|
-
height: auto;
|
|
39
|
-
width: 100%;
|
|
40
|
-
margin: 0;
|
|
41
|
-
line-height: 1.4rem;
|
|
42
|
-
|
|
43
|
-
& span {
|
|
44
|
-
text-transform: uppercase;
|
|
45
|
-
padding: 0 8px 0 0;
|
|
46
|
-
font-size: 0.9rem;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
& svg {
|
|
50
|
-
margin: -4px 0 0;
|
|
51
|
-
vertical-align: middle;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.MuiTableCell-footer {
|
|
58
|
-
font-size: 1rem;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* react table
|
|
63
|
-
*/
|
|
64
|
-
|
|
65
|
-
.table-container {
|
|
66
|
-
width: 100%;
|
|
67
|
-
overflow-x: auto;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.table-search-container {
|
|
71
|
-
padding: 0 !important;
|
|
72
|
-
text-align: left;
|
|
73
|
-
background: white;
|
|
74
|
-
border: 1px solid rgb(0 0 0 / 10%);
|
|
75
|
-
border-radius: 3px;
|
|
76
|
-
width: 100%;
|
|
77
|
-
|
|
78
|
-
& .MuiSvgIcon-root {
|
|
79
|
-
margin-top: 0.55rem;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
& .table-search-input {
|
|
83
|
-
text-align: left;
|
|
84
|
-
outline: none !important;
|
|
85
|
-
border: none !important;
|
|
86
|
-
width: 100%;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
& input[type="search"] {
|
|
90
|
-
-webkit-appearance: none;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
& input[type="search"]::-webkit-search-cancel-button {
|
|
94
|
-
-webkit-appearance: searchfield-cancel-button;
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.ReactTable {
|
|
99
|
-
& .rt-thead .rt-tr {
|
|
100
|
-
background-color: var(--color-off-white);
|
|
101
|
-
border-bottom: 1px solid var(--color-light-grey);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
& .rt-th {
|
|
105
|
-
font-weight: var(--font-weight-bold);
|
|
106
|
-
color: var(--color-dark-grey);
|
|
107
|
-
font-size: 0.9rem;
|
|
108
|
-
text-transform: uppercase;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
& .rt-th > div {
|
|
112
|
-
padding: 0.75rem var(--cell-padding-horiz);
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
& .rt-td {
|
|
116
|
-
padding: var(--cell-padding-horiz);
|
|
117
|
-
font-size: 1rem;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
& .rt-td.overflow-visible {
|
|
121
|
-
overflow: visible;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
& .pagination-top,
|
|
125
|
-
& .pagination-bottom {
|
|
126
|
-
background-color: var(--color-off-white);
|
|
127
|
-
|
|
128
|
-
& .-pagination {
|
|
129
|
-
padding: 0.5rem 0.6rem;
|
|
130
|
-
border-top: none;
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
& .pagination-top .-pagination {
|
|
135
|
-
border-bottom: 1px solid var(--color-light-grey);
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
& .pagination-bottom .-pagination {
|
|
139
|
-
border-top: 1px solid var(--color-light-grey);
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
& .-pagination .-previous,
|
|
143
|
-
& .-pagination .-next {
|
|
144
|
-
& .MuiButton-text {
|
|
145
|
-
background-color: var(--color-white);
|
|
146
|
-
border: 1px solid var(--color-light-grey);
|
|
147
|
-
|
|
148
|
-
&[disabled] {
|
|
149
|
-
background-color: var(--color-light-grey);
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
& .MuiButton-label .MuiSvgIcon-root {
|
|
153
|
-
margin: 0;
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
/* duplicate .form-control styles */
|
|
159
|
-
& .-pagination input,
|
|
160
|
-
.-pagination select {
|
|
161
|
-
display: block;
|
|
162
|
-
width: 100%;
|
|
163
|
-
height: calc(1.5em + 0.75rem + 2px);
|
|
164
|
-
font-size: 1rem;
|
|
165
|
-
font-weight: 400;
|
|
166
|
-
line-height: 1.5;
|
|
167
|
-
color: #495057;
|
|
168
|
-
background-color: #fff;
|
|
169
|
-
background-clip: padding-box;
|
|
170
|
-
border: 1px solid #ced4da;
|
|
171
|
-
border-radius: 0.25rem;
|
|
172
|
-
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
173
|
-
font-family: var(--text-font-stack);
|
|
174
|
-
padding: 0.5rem;
|
|
175
|
-
border-color: var(--color-light-grey);
|
|
176
|
-
box-shadow: none;
|
|
177
|
-
|
|
178
|
-
&:focus {
|
|
179
|
-
border-color: #80bdff;
|
|
180
|
-
outline: 0;
|
|
181
|
-
-webkit-box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
|
|
182
|
-
box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
&::placeholder {
|
|
186
|
-
color: #6c757d;
|
|
187
|
-
opacity: 1;
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
& .-pagination .-pageSizeOptions.select {
|
|
192
|
-
padding: 0.375rem 0.75rem;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
&.single-row-action-button {
|
|
196
|
-
& .rt-tbody {
|
|
197
|
-
padding-bottom: 108px;
|
|
198
|
-
}
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
& .rt-noData {
|
|
202
|
-
top: 128px;
|
|
203
|
-
color: var(--color-dark-grey);
|
|
204
|
-
font-weight: bold;
|
|
205
|
-
border-width: 0.1rem;
|
|
206
|
-
border-style: solid;
|
|
207
|
-
border-radius: 0.25rem;
|
|
208
|
-
background-color: color-mod(var(--color-accent-blue) lightness(98%)) !important;
|
|
209
|
-
border-color: color-mod(var(--color-accent-blue) lightness(69%)) !important;
|
|
210
|
-
padding: 1rem;
|
|
211
|
-
width: 100%;
|
|
212
|
-
text-align: center;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
& .dropdown {
|
|
216
|
-
position: static;
|
|
217
|
-
}
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
.striped-table tr:nth-child(even) {
|
|
221
|
-
background-color: var(--color-light-blue) !important;
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
.ReactTable.-striped {
|
|
225
|
-
& .rt-tr.-odd {
|
|
226
|
-
background: var(--color-off-white) !important;
|
|
227
|
-
}
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
/**
|
|
231
|
-
* react-super-responsive-table
|
|
232
|
-
*/
|
|
233
|
-
|
|
234
|
-
/* RESET STYLES at the package's breakpoint */
|
|
235
|
-
|
|
236
|
-
@media screen and (max-width: 40em) {
|
|
237
|
-
.responsiveTable table {
|
|
238
|
-
display: table;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
.responsiveTable thead {
|
|
242
|
-
display: table-header-group;
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
.responsiveTable tbody {
|
|
246
|
-
display: table-row-group;
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
.responsiveTable th,
|
|
250
|
-
.responsiveTable td {
|
|
251
|
-
display: table-cell;
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
.responsiveTable tr {
|
|
255
|
-
display: table-row;
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
.responsiveTable thead tr {
|
|
259
|
-
position: static;
|
|
260
|
-
top: auto;
|
|
261
|
-
left: auto;
|
|
262
|
-
border-bottom: inherit;
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
.responsiveTable tbody tr {
|
|
266
|
-
border: inherit;
|
|
267
|
-
padding: 0;
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
.responsiveTable td.pivoted {
|
|
271
|
-
border: inherit !important;
|
|
272
|
-
position: static;
|
|
273
|
-
padding-left: var(--cell-padding-horiz) !important;
|
|
274
|
-
text-align: inherit !important;
|
|
275
|
-
white-space: normal;
|
|
276
|
-
overflow-wrap: normal;
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
.responsiveTable td .tdBefore {
|
|
280
|
-
display: none;
|
|
281
|
-
}
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
/**
|
|
285
|
-
* SET STYLES to use our "lt-sm" breakpoint
|
|
286
|
-
* COPIED DIRECTLY from /node_modules/react-super-responsive-table/dist/SuperResponsiveTableStyle.css
|
|
287
|
-
*/
|
|
288
|
-
@media (--lt-sm) {
|
|
289
|
-
.responsiveTable table,
|
|
290
|
-
.responsiveTable thead,
|
|
291
|
-
.responsiveTable tbody,
|
|
292
|
-
.responsiveTable th,
|
|
293
|
-
.responsiveTable td,
|
|
294
|
-
.responsiveTable tr {
|
|
295
|
-
display: block;
|
|
296
|
-
}
|
|
297
|
-
|
|
298
|
-
.responsiveTable thead tr {
|
|
299
|
-
position: absolute;
|
|
300
|
-
top: -9999px;
|
|
301
|
-
left: -9999px;
|
|
302
|
-
border-bottom: 2px solid #333;
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
.responsiveTable tbody tr {
|
|
306
|
-
border: 1px solid #000;
|
|
307
|
-
padding: 0.25em;
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
.responsiveTable td.pivoted {
|
|
311
|
-
/* Behave like a "row" */
|
|
312
|
-
border: none !important;
|
|
313
|
-
position: relative;
|
|
314
|
-
padding-left: calc(50% + 10px) !important;
|
|
315
|
-
text-align: left !important;
|
|
316
|
-
white-space: pre-wrap;
|
|
317
|
-
overflow-wrap: break-word;
|
|
318
|
-
}
|
|
319
|
-
|
|
320
|
-
.responsiveTable td .tdBefore {
|
|
321
|
-
/* Now like a table header */
|
|
322
|
-
position: absolute;
|
|
323
|
-
display: block;
|
|
324
|
-
|
|
325
|
-
/* Top/left values mimic padding */
|
|
326
|
-
left: 1rem;
|
|
327
|
-
width: calc(50% - 20px);
|
|
328
|
-
white-space: pre-wrap;
|
|
329
|
-
overflow-wrap: break-word;
|
|
330
|
-
text-align: left !important;
|
|
331
|
-
font-weight: 600;
|
|
332
|
-
}
|
|
333
|
-
}
|
|
334
|
-
|
|
335
|
-
/**
|
|
336
|
-
* SET STYLES to use our "lt-md" breakpoint
|
|
337
|
-
* COPIED DIRECTLY from /node_modules/react-super-responsive-table/dist/SuperResponsiveTableStyle.css
|
|
338
|
-
*/
|
|
339
|
-
@media (--lt-md) {
|
|
340
|
-
.responsiveTable-lt-md table,
|
|
341
|
-
.responsiveTable-lt-md thead,
|
|
342
|
-
.responsiveTable-lt-md tbody,
|
|
343
|
-
.responsiveTable-lt-md th,
|
|
344
|
-
.responsiveTable-lt-md td,
|
|
345
|
-
.responsiveTable-lt-md tr {
|
|
346
|
-
display: block;
|
|
347
|
-
}
|
|
348
|
-
|
|
349
|
-
.responsiveTable-lt-md thead tr {
|
|
350
|
-
position: absolute;
|
|
351
|
-
top: -9999px;
|
|
352
|
-
left: -9999px;
|
|
353
|
-
border-bottom: 2px solid #333;
|
|
354
|
-
}
|
|
355
|
-
|
|
356
|
-
.responsiveTable-lt-md tbody tr {
|
|
357
|
-
border: 1px solid #000;
|
|
358
|
-
padding: 0.25em;
|
|
359
|
-
}
|
|
360
|
-
|
|
361
|
-
.responsiveTable-lt-md td.pivoted {
|
|
362
|
-
/* Behave like a "row" */
|
|
363
|
-
border: none !important;
|
|
364
|
-
position: relative;
|
|
365
|
-
padding-left: calc(50% + 10px) !important;
|
|
366
|
-
text-align: left !important;
|
|
367
|
-
white-space: pre-wrap;
|
|
368
|
-
overflow-wrap: break-word;
|
|
369
|
-
}
|
|
370
|
-
|
|
371
|
-
.responsiveTable-lt-md td .tdBefore {
|
|
372
|
-
/* Now like a table header */
|
|
373
|
-
position: absolute;
|
|
374
|
-
display: block;
|
|
375
|
-
|
|
376
|
-
/* Top/left values mimic padding */
|
|
377
|
-
left: 1rem;
|
|
378
|
-
width: calc(50% - 20px);
|
|
379
|
-
white-space: pre-wrap;
|
|
380
|
-
overflow-wrap: break-word;
|
|
381
|
-
text-align: left !important;
|
|
382
|
-
font-weight: 600;
|
|
383
|
-
}
|
|
384
|
-
}
|
|
385
|
-
|
|
386
|
-
/* CUSTOM OVERRIDES for react-super-responsive-table */
|
|
387
|
-
|
|
388
|
-
.responsiveTable {
|
|
389
|
-
margin-top: 1.2rem;
|
|
390
|
-
|
|
391
|
-
& th {
|
|
392
|
-
font-size: 0.94rem;
|
|
393
|
-
text-transform: uppercase;
|
|
394
|
-
border: none;
|
|
395
|
-
}
|
|
396
|
-
|
|
397
|
-
& td.pivoted {
|
|
398
|
-
font-size: 0.96rem;
|
|
399
|
-
width: auto;
|
|
400
|
-
border-bottom: 1px solid var(--color-light-grey) !important;
|
|
401
|
-
}
|
|
402
|
-
|
|
403
|
-
/* at normal widths, show the icon button and hide the text button */
|
|
404
|
-
& .action-list-icon-button {
|
|
405
|
-
display: inherit;
|
|
406
|
-
}
|
|
407
|
-
|
|
408
|
-
& .action-list-text-button {
|
|
409
|
-
display: none;
|
|
410
|
-
}
|
|
411
|
-
}
|
|
412
|
-
|
|
413
|
-
/* default: table is responsive at xs widths and below */
|
|
414
|
-
@media (--lt-sm) {
|
|
415
|
-
.responsiveTable {
|
|
416
|
-
& td {
|
|
417
|
-
width: 100%;
|
|
418
|
-
|
|
419
|
-
& .tdBefore {
|
|
420
|
-
width: 100%;
|
|
421
|
-
position: static !important;
|
|
422
|
-
}
|
|
423
|
-
}
|
|
424
|
-
|
|
425
|
-
& tbody > tr {
|
|
426
|
-
background-color: color-mod(var(--color-off-white) l(99%));
|
|
427
|
-
border-color: var(--color-light-grey) !important;
|
|
428
|
-
margin-bottom: 1.5rem;
|
|
429
|
-
border-width: 0.15rem;
|
|
430
|
-
|
|
431
|
-
& > td.pivoted {
|
|
432
|
-
padding-left: var(--cell-padding-horiz) !important;
|
|
433
|
-
|
|
434
|
-
&:last-child {
|
|
435
|
-
border-bottom: none !important;
|
|
436
|
-
}
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
&:last-child {
|
|
440
|
-
margin-bottom: 0;
|
|
441
|
-
}
|
|
442
|
-
}
|
|
443
|
-
|
|
444
|
-
/* hide the icon button and show the text button if there is no default action displayed */
|
|
445
|
-
& .action-list-icon-button:not(.with-default-action) {
|
|
446
|
-
display: none;
|
|
447
|
-
}
|
|
448
|
-
|
|
449
|
-
& .action-list-text-button:not(.with-default-action) {
|
|
450
|
-
display: inherit;
|
|
451
|
-
}
|
|
452
|
-
}
|
|
453
|
-
}
|
|
454
|
-
|
|
455
|
-
/*
|
|
456
|
-
* table is responsive at small widths and below
|
|
457
|
-
*/
|
|
458
|
-
@media (--lt-md) {
|
|
459
|
-
.responsiveTable-lt-md {
|
|
460
|
-
& td {
|
|
461
|
-
width: 100%;
|
|
462
|
-
|
|
463
|
-
& .tdBefore {
|
|
464
|
-
width: 100%;
|
|
465
|
-
position: static !important;
|
|
466
|
-
}
|
|
467
|
-
}
|
|
468
|
-
|
|
469
|
-
& tbody > tr {
|
|
470
|
-
background-color: color-mod(var(--color-off-white) l(99%));
|
|
471
|
-
border-color: var(--color-light-grey) !important;
|
|
472
|
-
margin-bottom: 1.5rem;
|
|
473
|
-
border-width: 0.15rem;
|
|
474
|
-
|
|
475
|
-
& > td.pivoted {
|
|
476
|
-
padding-left: var(--cell-padding-horiz) !important;
|
|
477
|
-
|
|
478
|
-
&:last-child {
|
|
479
|
-
border-bottom: none !important;
|
|
480
|
-
}
|
|
481
|
-
}
|
|
482
|
-
|
|
483
|
-
&:last-child {
|
|
484
|
-
margin-bottom: 0;
|
|
485
|
-
}
|
|
486
|
-
}
|
|
487
|
-
|
|
488
|
-
/* hide the icon button and show the text button if there is no default action displayed */
|
|
489
|
-
& .action-list-icon-button:not(.with-default-action) {
|
|
490
|
-
display: none;
|
|
491
|
-
}
|
|
492
|
-
|
|
493
|
-
& .action-list-text-button:not(.with-default-action) {
|
|
494
|
-
display: inherit;
|
|
495
|
-
}
|
|
496
|
-
}
|
|
497
|
-
}
|
|
1
|
+
:root {
|
|
2
|
+
--cell-padding-horiz: 1rem;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
/* table style overrides */
|
|
6
|
+
|
|
7
|
+
td,
|
|
8
|
+
.MuiTableCell-body {
|
|
9
|
+
padding: 0.9rem var(--cell-padding-horiz);
|
|
10
|
+
font-size: 1rem;
|
|
11
|
+
border-bottom: 2px solid var(--color-light-grey);
|
|
12
|
+
width: 130px;
|
|
13
|
+
|
|
14
|
+
& button {
|
|
15
|
+
overflow: hidden;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
th,
|
|
20
|
+
.MuiTableCell-head {
|
|
21
|
+
background-color: var(--color-off-white);
|
|
22
|
+
border-bottom: 1px solid var(--color-light-grey);
|
|
23
|
+
color: var(--color-dark-grey);
|
|
24
|
+
font-size: 0.9rem;
|
|
25
|
+
padding: 0.75rem var(--cell-padding-horiz);
|
|
26
|
+
text-transform: uppercase;
|
|
27
|
+
font-weight: var(--font-weight-bold);
|
|
28
|
+
height: auto;
|
|
29
|
+
width: 130px;
|
|
30
|
+
|
|
31
|
+
&.header-sort {
|
|
32
|
+
padding: 0;
|
|
33
|
+
white-space: pre-wrap;
|
|
34
|
+
|
|
35
|
+
& button {
|
|
36
|
+
display: block;
|
|
37
|
+
padding: 0.75rem 18px;
|
|
38
|
+
height: auto;
|
|
39
|
+
width: 100%;
|
|
40
|
+
margin: 0;
|
|
41
|
+
line-height: 1.4rem;
|
|
42
|
+
|
|
43
|
+
& span {
|
|
44
|
+
text-transform: uppercase;
|
|
45
|
+
padding: 0 8px 0 0;
|
|
46
|
+
font-size: 0.9rem;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
& svg {
|
|
50
|
+
margin: -4px 0 0;
|
|
51
|
+
vertical-align: middle;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.MuiTableCell-footer {
|
|
58
|
+
font-size: 1rem;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* react table
|
|
63
|
+
*/
|
|
64
|
+
|
|
65
|
+
.table-container {
|
|
66
|
+
width: 100%;
|
|
67
|
+
overflow-x: auto;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.table-search-container {
|
|
71
|
+
padding: 0 !important;
|
|
72
|
+
text-align: left;
|
|
73
|
+
background: white;
|
|
74
|
+
border: 1px solid rgb(0 0 0 / 10%);
|
|
75
|
+
border-radius: 3px;
|
|
76
|
+
width: 100%;
|
|
77
|
+
|
|
78
|
+
& .MuiSvgIcon-root {
|
|
79
|
+
margin-top: 0.55rem;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
& .table-search-input {
|
|
83
|
+
text-align: left;
|
|
84
|
+
outline: none !important;
|
|
85
|
+
border: none !important;
|
|
86
|
+
width: 100%;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
& input[type="search"] {
|
|
90
|
+
-webkit-appearance: none;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
& input[type="search"]::-webkit-search-cancel-button {
|
|
94
|
+
-webkit-appearance: searchfield-cancel-button;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.ReactTable {
|
|
99
|
+
& .rt-thead .rt-tr {
|
|
100
|
+
background-color: var(--color-off-white);
|
|
101
|
+
border-bottom: 1px solid var(--color-light-grey);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
& .rt-th {
|
|
105
|
+
font-weight: var(--font-weight-bold);
|
|
106
|
+
color: var(--color-dark-grey);
|
|
107
|
+
font-size: 0.9rem;
|
|
108
|
+
text-transform: uppercase;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
& .rt-th > div {
|
|
112
|
+
padding: 0.75rem var(--cell-padding-horiz);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
& .rt-td {
|
|
116
|
+
padding: var(--cell-padding-horiz);
|
|
117
|
+
font-size: 1rem;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
& .rt-td.overflow-visible {
|
|
121
|
+
overflow: visible;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
& .pagination-top,
|
|
125
|
+
& .pagination-bottom {
|
|
126
|
+
background-color: var(--color-off-white);
|
|
127
|
+
|
|
128
|
+
& .-pagination {
|
|
129
|
+
padding: 0.5rem 0.6rem;
|
|
130
|
+
border-top: none;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
& .pagination-top .-pagination {
|
|
135
|
+
border-bottom: 1px solid var(--color-light-grey);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
& .pagination-bottom .-pagination {
|
|
139
|
+
border-top: 1px solid var(--color-light-grey);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
& .-pagination .-previous,
|
|
143
|
+
& .-pagination .-next {
|
|
144
|
+
& .MuiButton-text {
|
|
145
|
+
background-color: var(--color-white);
|
|
146
|
+
border: 1px solid var(--color-light-grey);
|
|
147
|
+
|
|
148
|
+
&[disabled] {
|
|
149
|
+
background-color: var(--color-light-grey);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
& .MuiButton-label .MuiSvgIcon-root {
|
|
153
|
+
margin: 0;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* duplicate .form-control styles */
|
|
159
|
+
& .-pagination input,
|
|
160
|
+
.-pagination select {
|
|
161
|
+
display: block;
|
|
162
|
+
width: 100%;
|
|
163
|
+
height: calc(1.5em + 0.75rem + 2px);
|
|
164
|
+
font-size: 1rem;
|
|
165
|
+
font-weight: 400;
|
|
166
|
+
line-height: 1.5;
|
|
167
|
+
color: #495057;
|
|
168
|
+
background-color: #fff;
|
|
169
|
+
background-clip: padding-box;
|
|
170
|
+
border: 1px solid #ced4da;
|
|
171
|
+
border-radius: 0.25rem;
|
|
172
|
+
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
173
|
+
font-family: var(--text-font-stack);
|
|
174
|
+
padding: 0.5rem;
|
|
175
|
+
border-color: var(--color-light-grey);
|
|
176
|
+
box-shadow: none;
|
|
177
|
+
|
|
178
|
+
&:focus {
|
|
179
|
+
border-color: #80bdff;
|
|
180
|
+
outline: 0;
|
|
181
|
+
-webkit-box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
|
|
182
|
+
box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
&::placeholder {
|
|
186
|
+
color: #6c757d;
|
|
187
|
+
opacity: 1;
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
& .-pagination .-pageSizeOptions.select {
|
|
192
|
+
padding: 0.375rem 0.75rem;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
&.single-row-action-button {
|
|
196
|
+
& .rt-tbody {
|
|
197
|
+
padding-bottom: 108px;
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
& .rt-noData {
|
|
202
|
+
top: 128px;
|
|
203
|
+
color: var(--color-dark-grey);
|
|
204
|
+
font-weight: bold;
|
|
205
|
+
border-width: 0.1rem;
|
|
206
|
+
border-style: solid;
|
|
207
|
+
border-radius: 0.25rem;
|
|
208
|
+
background-color: color-mod(var(--color-accent-blue) lightness(98%)) !important;
|
|
209
|
+
border-color: color-mod(var(--color-accent-blue) lightness(69%)) !important;
|
|
210
|
+
padding: 1rem;
|
|
211
|
+
width: 100%;
|
|
212
|
+
text-align: center;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
& .dropdown {
|
|
216
|
+
position: static;
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.striped-table tr:nth-child(even) {
|
|
221
|
+
background-color: var(--color-light-blue) !important;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.ReactTable.-striped {
|
|
225
|
+
& .rt-tr.-odd {
|
|
226
|
+
background: var(--color-off-white) !important;
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
/**
|
|
231
|
+
* react-super-responsive-table
|
|
232
|
+
*/
|
|
233
|
+
|
|
234
|
+
/* RESET STYLES at the package's breakpoint */
|
|
235
|
+
|
|
236
|
+
@media screen and (max-width: 40em) {
|
|
237
|
+
.responsiveTable table {
|
|
238
|
+
display: table;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.responsiveTable thead {
|
|
242
|
+
display: table-header-group;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.responsiveTable tbody {
|
|
246
|
+
display: table-row-group;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.responsiveTable th,
|
|
250
|
+
.responsiveTable td {
|
|
251
|
+
display: table-cell;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.responsiveTable tr {
|
|
255
|
+
display: table-row;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.responsiveTable thead tr {
|
|
259
|
+
position: static;
|
|
260
|
+
top: auto;
|
|
261
|
+
left: auto;
|
|
262
|
+
border-bottom: inherit;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
.responsiveTable tbody tr {
|
|
266
|
+
border: inherit;
|
|
267
|
+
padding: 0;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.responsiveTable td.pivoted {
|
|
271
|
+
border: inherit !important;
|
|
272
|
+
position: static;
|
|
273
|
+
padding-left: var(--cell-padding-horiz) !important;
|
|
274
|
+
text-align: inherit !important;
|
|
275
|
+
white-space: normal;
|
|
276
|
+
overflow-wrap: normal;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.responsiveTable td .tdBefore {
|
|
280
|
+
display: none;
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
/**
|
|
285
|
+
* SET STYLES to use our "lt-sm" breakpoint
|
|
286
|
+
* COPIED DIRECTLY from /node_modules/react-super-responsive-table/dist/SuperResponsiveTableStyle.css
|
|
287
|
+
*/
|
|
288
|
+
@media (--lt-sm) {
|
|
289
|
+
.responsiveTable table,
|
|
290
|
+
.responsiveTable thead,
|
|
291
|
+
.responsiveTable tbody,
|
|
292
|
+
.responsiveTable th,
|
|
293
|
+
.responsiveTable td,
|
|
294
|
+
.responsiveTable tr {
|
|
295
|
+
display: block;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.responsiveTable thead tr {
|
|
299
|
+
position: absolute;
|
|
300
|
+
top: -9999px;
|
|
301
|
+
left: -9999px;
|
|
302
|
+
border-bottom: 2px solid #333;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.responsiveTable tbody tr {
|
|
306
|
+
border: 1px solid #000;
|
|
307
|
+
padding: 0.25em;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.responsiveTable td.pivoted {
|
|
311
|
+
/* Behave like a "row" */
|
|
312
|
+
border: none !important;
|
|
313
|
+
position: relative;
|
|
314
|
+
padding-left: calc(50% + 10px) !important;
|
|
315
|
+
text-align: left !important;
|
|
316
|
+
white-space: pre-wrap;
|
|
317
|
+
overflow-wrap: break-word;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.responsiveTable td .tdBefore {
|
|
321
|
+
/* Now like a table header */
|
|
322
|
+
position: absolute;
|
|
323
|
+
display: block;
|
|
324
|
+
|
|
325
|
+
/* Top/left values mimic padding */
|
|
326
|
+
left: 1rem;
|
|
327
|
+
width: calc(50% - 20px);
|
|
328
|
+
white-space: pre-wrap;
|
|
329
|
+
overflow-wrap: break-word;
|
|
330
|
+
text-align: left !important;
|
|
331
|
+
font-weight: 600;
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
/**
|
|
336
|
+
* SET STYLES to use our "lt-md" breakpoint
|
|
337
|
+
* COPIED DIRECTLY from /node_modules/react-super-responsive-table/dist/SuperResponsiveTableStyle.css
|
|
338
|
+
*/
|
|
339
|
+
@media (--lt-md) {
|
|
340
|
+
.responsiveTable-lt-md table,
|
|
341
|
+
.responsiveTable-lt-md thead,
|
|
342
|
+
.responsiveTable-lt-md tbody,
|
|
343
|
+
.responsiveTable-lt-md th,
|
|
344
|
+
.responsiveTable-lt-md td,
|
|
345
|
+
.responsiveTable-lt-md tr {
|
|
346
|
+
display: block;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.responsiveTable-lt-md thead tr {
|
|
350
|
+
position: absolute;
|
|
351
|
+
top: -9999px;
|
|
352
|
+
left: -9999px;
|
|
353
|
+
border-bottom: 2px solid #333;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.responsiveTable-lt-md tbody tr {
|
|
357
|
+
border: 1px solid #000;
|
|
358
|
+
padding: 0.25em;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
.responsiveTable-lt-md td.pivoted {
|
|
362
|
+
/* Behave like a "row" */
|
|
363
|
+
border: none !important;
|
|
364
|
+
position: relative;
|
|
365
|
+
padding-left: calc(50% + 10px) !important;
|
|
366
|
+
text-align: left !important;
|
|
367
|
+
white-space: pre-wrap;
|
|
368
|
+
overflow-wrap: break-word;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
.responsiveTable-lt-md td .tdBefore {
|
|
372
|
+
/* Now like a table header */
|
|
373
|
+
position: absolute;
|
|
374
|
+
display: block;
|
|
375
|
+
|
|
376
|
+
/* Top/left values mimic padding */
|
|
377
|
+
left: 1rem;
|
|
378
|
+
width: calc(50% - 20px);
|
|
379
|
+
white-space: pre-wrap;
|
|
380
|
+
overflow-wrap: break-word;
|
|
381
|
+
text-align: left !important;
|
|
382
|
+
font-weight: 600;
|
|
383
|
+
}
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
/* CUSTOM OVERRIDES for react-super-responsive-table */
|
|
387
|
+
|
|
388
|
+
.responsiveTable {
|
|
389
|
+
margin-top: 1.2rem;
|
|
390
|
+
|
|
391
|
+
& th {
|
|
392
|
+
font-size: 0.94rem;
|
|
393
|
+
text-transform: uppercase;
|
|
394
|
+
border: none;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
& td.pivoted {
|
|
398
|
+
font-size: 0.96rem;
|
|
399
|
+
width: auto;
|
|
400
|
+
border-bottom: 1px solid var(--color-light-grey) !important;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
/* at normal widths, show the icon button and hide the text button */
|
|
404
|
+
& .action-list-icon-button {
|
|
405
|
+
display: inherit;
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
& .action-list-text-button {
|
|
409
|
+
display: none;
|
|
410
|
+
}
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
/* default: table is responsive at xs widths and below */
|
|
414
|
+
@media (--lt-sm) {
|
|
415
|
+
.responsiveTable {
|
|
416
|
+
& td {
|
|
417
|
+
width: 100%;
|
|
418
|
+
|
|
419
|
+
& .tdBefore {
|
|
420
|
+
width: 100%;
|
|
421
|
+
position: static !important;
|
|
422
|
+
}
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
& tbody > tr {
|
|
426
|
+
background-color: color-mod(var(--color-off-white) l(99%));
|
|
427
|
+
border-color: var(--color-light-grey) !important;
|
|
428
|
+
margin-bottom: 1.5rem;
|
|
429
|
+
border-width: 0.15rem;
|
|
430
|
+
|
|
431
|
+
& > td.pivoted {
|
|
432
|
+
padding-left: var(--cell-padding-horiz) !important;
|
|
433
|
+
|
|
434
|
+
&:last-child {
|
|
435
|
+
border-bottom: none !important;
|
|
436
|
+
}
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
&:last-child {
|
|
440
|
+
margin-bottom: 0;
|
|
441
|
+
}
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
/* hide the icon button and show the text button if there is no default action displayed */
|
|
445
|
+
& .action-list-icon-button:not(.with-default-action) {
|
|
446
|
+
display: none;
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
& .action-list-text-button:not(.with-default-action) {
|
|
450
|
+
display: inherit;
|
|
451
|
+
}
|
|
452
|
+
}
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
/*
|
|
456
|
+
* table is responsive at small widths and below
|
|
457
|
+
*/
|
|
458
|
+
@media (--lt-md) {
|
|
459
|
+
.responsiveTable-lt-md {
|
|
460
|
+
& td {
|
|
461
|
+
width: 100%;
|
|
462
|
+
|
|
463
|
+
& .tdBefore {
|
|
464
|
+
width: 100%;
|
|
465
|
+
position: static !important;
|
|
466
|
+
}
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
& tbody > tr {
|
|
470
|
+
background-color: color-mod(var(--color-off-white) l(99%));
|
|
471
|
+
border-color: var(--color-light-grey) !important;
|
|
472
|
+
margin-bottom: 1.5rem;
|
|
473
|
+
border-width: 0.15rem;
|
|
474
|
+
|
|
475
|
+
& > td.pivoted {
|
|
476
|
+
padding-left: var(--cell-padding-horiz) !important;
|
|
477
|
+
|
|
478
|
+
&:last-child {
|
|
479
|
+
border-bottom: none !important;
|
|
480
|
+
}
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
&:last-child {
|
|
484
|
+
margin-bottom: 0;
|
|
485
|
+
}
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
/* hide the icon button and show the text button if there is no default action displayed */
|
|
489
|
+
& .action-list-icon-button:not(.with-default-action) {
|
|
490
|
+
display: none;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
& .action-list-text-button:not(.with-default-action) {
|
|
494
|
+
display: inherit;
|
|
495
|
+
}
|
|
496
|
+
}
|
|
497
|
+
}
|