@innovaccer/design-system 4.7.0 → 4.9.0
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/CHANGELOG.md +86 -0
- package/css/dist/index.css +333 -158
- package/css/dist/index.css.map +1 -1
- package/css/src/ai-components/button.module.css +32 -47
- package/css/src/components/chatInput.module.css +83 -0
- package/css/src/components/checkbox.module.css +1 -1
- package/css/src/components/grid.module.css +175 -93
- package/css/src/components/select.module.css +0 -1
- package/css/src/components/verticalNav.module.css +1 -0
- package/dist/brotli/index.js +1 -1
- package/dist/brotli/index.js.br +0 -0
- package/dist/cjs/index.js +1 -1
- package/dist/core/ai-components/AIButton/index.d.ts +2 -1
- package/dist/core/components/atoms/paragraph/Paragraph.d.ts +1 -1
- package/dist/core/components/atoms/subheading/Subheading.d.ts +1 -1
- package/dist/core/components/molecules/chat/Chat.d.ts +1 -0
- package/dist/core/components/molecules/chat/chatInput/ChatInput.d.ts +18 -0
- package/dist/core/components/molecules/chat/chatInput/index.d.ts +2 -0
- package/dist/core/components/organisms/grid/Grid.d.ts +1 -0
- package/dist/core/components/organisms/grid/rowUtility.d.ts +1 -0
- package/dist/core/components/organisms/table/Table.d.ts +2 -0
- package/dist/core/index.type.d.ts +1 -0
- package/dist/core/utils/navigationHelper.d.ts +1 -1
- package/dist/esm/index.js +1022 -808
- package/dist/figma/ChatInput.figma.d.ts +1 -0
- package/dist/gzip/index.js +1 -1
- package/dist/gzip/index.js.gz +0 -0
- package/dist/index.js +837 -636
- package/dist/index.js.map +1 -1
- package/dist/index.umd.css +333 -158
- package/dist/index.umd.js +1 -1
- package/dist/types/tsconfig.type.tsbuildinfo +72 -25
- package/package.json +1 -1
|
@@ -9,62 +9,47 @@
|
|
|
9
9
|
line-height: var(--font-height-s);
|
|
10
10
|
display: flex;
|
|
11
11
|
align-items: center;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.AIButton:disabled {
|
|
15
|
-
cursor: not-allowed;
|
|
16
|
-
pointer-events: none;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.AIButton:focus {
|
|
20
|
-
outline: 0;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
/* Primary Button */
|
|
24
|
-
|
|
25
|
-
.AIButton--primary {
|
|
26
|
-
background: var(--primary);
|
|
27
|
-
color: var(--white);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.AIButton--primary:hover {
|
|
31
|
-
background: var(--primary-dark);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.AIButton--primary:active {
|
|
35
|
-
background: var(--primary-darker);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.AIButton--primary:disabled {
|
|
39
|
-
background: var(--primary-lighter);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.AIButton--primary:focus {
|
|
43
|
-
box-shadow: var(--shadow-spread) var(--primary-shadow);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
/* Basic Button */
|
|
47
|
-
|
|
48
|
-
.AIButton--basic {
|
|
49
|
-
background: var(--secondary-light);
|
|
50
12
|
color: var(--inverse);
|
|
13
|
+
background: linear-gradient(
|
|
14
|
+
277deg,
|
|
15
|
+
rgba(227, 28, 121, 0.15) 0%,
|
|
16
|
+
rgba(231, 56, 79, 0.24) 28%,
|
|
17
|
+
rgba(240, 125, 0, 0.15) 100%
|
|
18
|
+
);
|
|
51
19
|
}
|
|
52
20
|
|
|
53
|
-
.AIButton
|
|
54
|
-
background:
|
|
21
|
+
.AIButton:hover {
|
|
22
|
+
background: linear-gradient(
|
|
23
|
+
277deg,
|
|
24
|
+
rgba(227, 28, 121, 0.2) 0%,
|
|
25
|
+
rgba(231, 56, 79, 0.32) 28%,
|
|
26
|
+
rgba(240, 125, 0, 0.2) 100%
|
|
27
|
+
);
|
|
55
28
|
}
|
|
56
29
|
|
|
57
|
-
.AIButton
|
|
58
|
-
background:
|
|
30
|
+
.AIButton:active {
|
|
31
|
+
background: linear-gradient(
|
|
32
|
+
277deg,
|
|
33
|
+
rgba(227, 28, 121, 0.31) 0%,
|
|
34
|
+
rgba(231, 56, 79, 0.48) 28%,
|
|
35
|
+
rgba(240, 125, 0, 0.31) 100%
|
|
36
|
+
);
|
|
59
37
|
}
|
|
60
38
|
|
|
61
|
-
.AIButton
|
|
62
|
-
|
|
63
|
-
|
|
39
|
+
.AIButton:disabled {
|
|
40
|
+
cursor: not-allowed;
|
|
41
|
+
opacity: var(--opacity-10);
|
|
42
|
+
background: linear-gradient(
|
|
43
|
+
277deg,
|
|
44
|
+
rgba(227, 28, 121, 0.15) 0%,
|
|
45
|
+
rgba(231, 56, 79, 0.24) 28%,
|
|
46
|
+
rgba(240, 125, 0, 0.15) 100%
|
|
47
|
+
);
|
|
64
48
|
}
|
|
65
49
|
|
|
66
|
-
.AIButton
|
|
67
|
-
|
|
50
|
+
.AIButton:focus {
|
|
51
|
+
outline: 0;
|
|
52
|
+
box-shadow: var(--shadow-spread) var(--primary-shadow);
|
|
68
53
|
}
|
|
69
54
|
|
|
70
55
|
/* Button Icon */
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
.ChatInput {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: row;
|
|
4
|
+
align-items: center;
|
|
5
|
+
border: var(--border-width-2-5) solid var(--secondary);
|
|
6
|
+
padding: var(--spacing-20);
|
|
7
|
+
border-radius: var(--border-radius-10);
|
|
8
|
+
background: var(--white);
|
|
9
|
+
max-width: 100%;
|
|
10
|
+
min-width: var(--spacing-640);
|
|
11
|
+
transition: all var(--duration--slow-01) var(--standard-productive-curve);
|
|
12
|
+
max-height: var(--spacing-440);
|
|
13
|
+
position: relative;
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
line-height: var(--font-height-m);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.ChatInput--expanded {
|
|
19
|
+
flex-direction: column;
|
|
20
|
+
align-items: flex-start;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.ChatInput--disabled {
|
|
24
|
+
background: var(--secondary-lightest);
|
|
25
|
+
cursor: not-allowed;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.ChatInput:hover {
|
|
29
|
+
background: var(--secondary-lighter);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.ChatInput:focus-within,
|
|
33
|
+
.ChatInput:focus,
|
|
34
|
+
.ChatInput:focus-visible {
|
|
35
|
+
outline: none;
|
|
36
|
+
border: var(--border-width-2-5) solid var(--primary);
|
|
37
|
+
box-shadow: var(--shadow-spread) var(--primary-shadow);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.ChatInput-textarea {
|
|
41
|
+
flex: 1;
|
|
42
|
+
/* height: 100%; */
|
|
43
|
+
height: var(--spacing-60);
|
|
44
|
+
width: 100%;
|
|
45
|
+
resize: none;
|
|
46
|
+
border: none;
|
|
47
|
+
outline: none;
|
|
48
|
+
transition-delay: var(--duration--slow-01);
|
|
49
|
+
transition: width var(--duration--slow-01) var(--standard-productive-curve);
|
|
50
|
+
box-sizing: border-box;
|
|
51
|
+
cursor: auto;
|
|
52
|
+
padding: var(--spacing-05) 0;
|
|
53
|
+
background: none;
|
|
54
|
+
word-break: break-all;
|
|
55
|
+
overflow-y: scroll;
|
|
56
|
+
font-family: var(--font-family);
|
|
57
|
+
font-weight: var(--font-weight-normal);
|
|
58
|
+
line-height: var(--font-height);
|
|
59
|
+
font-size: var(--font-size);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.ChatInput-textarea::placeholder {
|
|
63
|
+
color: var(--inverse-lighter);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.ChatInput textarea:disabled::placeholder {
|
|
67
|
+
color: var(--inverse-lightest);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.ChatInput-actions {
|
|
71
|
+
display: flex;
|
|
72
|
+
flex-shrink: 0;
|
|
73
|
+
transition: all var(--duration--slow-01) var(--standard-productive-curve);
|
|
74
|
+
margin-left: var(--spacing-20);
|
|
75
|
+
align-items: center;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.ChatInput-actions--expanded {
|
|
79
|
+
width: 100%;
|
|
80
|
+
justify-content: flex-end;
|
|
81
|
+
margin-top: var(--spacing-20);
|
|
82
|
+
margin-left: 0;
|
|
83
|
+
}
|
|
@@ -21,7 +21,6 @@
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
.Checkbox-labelWrapper {
|
|
24
|
-
padding-left: var(--spacing-20);
|
|
25
24
|
display: flex;
|
|
26
25
|
flex-direction: column;
|
|
27
26
|
min-width: 0;
|
|
@@ -39,6 +38,7 @@
|
|
|
39
38
|
.Checkbox-outerWrapper {
|
|
40
39
|
position: relative;
|
|
41
40
|
margin-top: var(--spacing-05);
|
|
41
|
+
margin-right: var(--spacing-20);
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
.Checkbox-outerWrapper--regular {
|
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
/** Grid **/
|
|
2
|
-
|
|
3
|
-
.Grid-wrapper {
|
|
4
|
-
display: flex;
|
|
5
|
-
position: relative;
|
|
6
|
-
overflow: hidden;
|
|
7
|
-
height: 100%;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
1
|
.Grid {
|
|
11
2
|
display: flex;
|
|
12
3
|
flex-direction: column;
|
|
@@ -16,20 +7,11 @@
|
|
|
16
7
|
background: var(--white);
|
|
17
8
|
}
|
|
18
9
|
|
|
19
|
-
.Grid
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
.Grid--resource .Grid-row--body:active,
|
|
26
|
-
.Grid--resource .Grid-row--body:active .Grid-cellGroup {
|
|
27
|
-
background: var(--secondary-lighter);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.Grid--resource .Grid-row--body:focus {
|
|
31
|
-
box-shadow: var(--shadow-spread) color-mod(var(--secondary) a(var(--opacity-4)));
|
|
32
|
-
outline: none;
|
|
10
|
+
.Grid-wrapper {
|
|
11
|
+
display: flex;
|
|
12
|
+
position: relative;
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
height: 100%;
|
|
33
15
|
}
|
|
34
16
|
|
|
35
17
|
.Grid--pinned {
|
|
@@ -131,42 +113,6 @@
|
|
|
131
113
|
border-bottom: var(--border);
|
|
132
114
|
}
|
|
133
115
|
|
|
134
|
-
.Grid-row {
|
|
135
|
-
display: flex;
|
|
136
|
-
flex-grow: 1;
|
|
137
|
-
flex-shrink: 0;
|
|
138
|
-
box-sizing: border-box;
|
|
139
|
-
background: var(--white);
|
|
140
|
-
transition: var(--duration--fast-02) var(--standard-productive-curve);
|
|
141
|
-
transition-delay: var(--duration--fast-01);
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
.Grid-row--body {
|
|
145
|
-
border-color: var(--secondary-light);
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
.Grid-row--selected,
|
|
149
|
-
.Grid-row--selected .Grid-cellGroup {
|
|
150
|
-
background: color-mod(var(--primary-lightest) a(var(--opacity-12)));
|
|
151
|
-
transition: var(--duration--fast-02) var(--standard-productive-curve);
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
.Grid-row--selected:hover,
|
|
155
|
-
.Grid-row--selected .Grid-cellGroup:hover {
|
|
156
|
-
background: color-mod(var(--primary-lighter) a(var(--opacity-12))) !important;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
.Grid-row--selected:active,
|
|
160
|
-
.Grid-row--selected .Grid-cellGroup:active {
|
|
161
|
-
background: var(--primary-lighter) !important;
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
.Grid-row--selected:focus,
|
|
165
|
-
.Grid-row--selected .Grid-cellGroup:focus {
|
|
166
|
-
outline: none;
|
|
167
|
-
box-shadow: var(--shadow-spread) color-mod(var(--primary) a(var(--opacity-4)));
|
|
168
|
-
}
|
|
169
|
-
|
|
170
116
|
.Grid-rowWrapper:last-child .Grid-row--body {
|
|
171
117
|
border-bottom: 0;
|
|
172
118
|
}
|
|
@@ -203,6 +149,7 @@
|
|
|
203
149
|
box-sizing: border-box;
|
|
204
150
|
padding-left: var(--spacing-30);
|
|
205
151
|
padding-right: var(--spacing-30);
|
|
152
|
+
flex-grow: 1;
|
|
206
153
|
}
|
|
207
154
|
|
|
208
155
|
.Grid-cell--body {
|
|
@@ -238,15 +185,6 @@
|
|
|
238
185
|
border-left: none;
|
|
239
186
|
}
|
|
240
187
|
|
|
241
|
-
/* .Grid .Grid-cellGroup--main .Grid-cell--head.Grid-cell:last-child {
|
|
242
|
-
border-right: var(--border);
|
|
243
|
-
} */
|
|
244
|
-
|
|
245
|
-
.Grid-row--disabled {
|
|
246
|
-
opacity: var(--opacity-10);
|
|
247
|
-
pointer-events: none;
|
|
248
|
-
}
|
|
249
|
-
|
|
250
188
|
.Grid-cell--head.Grid-cell--selected {
|
|
251
189
|
background: var(--primary-light);
|
|
252
190
|
}
|
|
@@ -261,6 +199,15 @@
|
|
|
261
199
|
overflow: visible !important;
|
|
262
200
|
}
|
|
263
201
|
|
|
202
|
+
.Grid-cell--separator {
|
|
203
|
+
border-left: var(--border);
|
|
204
|
+
border-color: var(--secondary-light);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.Grid-cell--selected {
|
|
208
|
+
background: var(--primary-lightest);
|
|
209
|
+
}
|
|
210
|
+
|
|
264
211
|
.Grid-sortingIcons {
|
|
265
212
|
display: flex;
|
|
266
213
|
align-items: center;
|
|
@@ -322,7 +269,7 @@
|
|
|
322
269
|
.Grid-cellGroup {
|
|
323
270
|
display: flex;
|
|
324
271
|
box-sizing: border-box;
|
|
325
|
-
|
|
272
|
+
height: 100%;
|
|
326
273
|
}
|
|
327
274
|
|
|
328
275
|
.Grid-cellGroup--pinned {
|
|
@@ -332,32 +279,10 @@
|
|
|
332
279
|
|
|
333
280
|
.Grid-cellGroup--pinned-left {
|
|
334
281
|
left: 0;
|
|
335
|
-
border-style: inset;
|
|
336
|
-
border-right: var(--spacing-2-5) solid rgba(213, 213, 213, var(--opacity-3));
|
|
337
|
-
border-right-width: var(--border-width-10);
|
|
338
|
-
border-image: linear-gradient(
|
|
339
|
-
to right,
|
|
340
|
-
var(--secondary-light),
|
|
341
|
-
var(--secondary-light) 25%,
|
|
342
|
-
color-mod(var(--secondary) a(0.1)) 25%,
|
|
343
|
-
color-mod(var(--secondary) a(0.1))
|
|
344
|
-
)
|
|
345
|
-
1 100%;
|
|
346
282
|
}
|
|
347
283
|
|
|
348
284
|
.Grid-cellGroup--pinned-right {
|
|
349
285
|
right: 0;
|
|
350
|
-
border-style: inset;
|
|
351
|
-
border-left: var(--border-width-2-5) solid rgba(213, 213, 213, var(--opacity-3));
|
|
352
|
-
border-left-width: var(--border-width-10);
|
|
353
|
-
border-image: linear-gradient(
|
|
354
|
-
to left,
|
|
355
|
-
var(--secondary-light),
|
|
356
|
-
var(--secondary-light) 25%,
|
|
357
|
-
color-mod(var(--secondary) a(0.1)) 25%,
|
|
358
|
-
color-mod(var(--secondary) a(0.1))
|
|
359
|
-
)
|
|
360
|
-
1 100%;
|
|
361
286
|
}
|
|
362
287
|
|
|
363
288
|
.Grid .Checkbox-wrapper {
|
|
@@ -374,13 +299,11 @@
|
|
|
374
299
|
}
|
|
375
300
|
|
|
376
301
|
.GridCell--align-left {
|
|
377
|
-
/* flex-direction: row; */
|
|
378
302
|
justify-content: flex-start;
|
|
379
303
|
text-align: left;
|
|
380
304
|
}
|
|
381
305
|
|
|
382
306
|
.GridCell--align-right {
|
|
383
|
-
/* flex-direction: row-reverse; */
|
|
384
307
|
justify-content: flex-end;
|
|
385
308
|
text-align: right;
|
|
386
309
|
}
|
|
@@ -390,6 +313,9 @@
|
|
|
390
313
|
text-align: center;
|
|
391
314
|
}
|
|
392
315
|
|
|
316
|
+
.GridCell--default {
|
|
317
|
+
}
|
|
318
|
+
|
|
393
319
|
.GridCell--metaList {
|
|
394
320
|
display: flex;
|
|
395
321
|
flex-direction: column;
|
|
@@ -514,3 +440,159 @@
|
|
|
514
440
|
margin-left: auto;
|
|
515
441
|
margin-bottom: var(--spacing-40);
|
|
516
442
|
}
|
|
443
|
+
|
|
444
|
+
/* Grid row */
|
|
445
|
+
|
|
446
|
+
.Grid-row--disabled {
|
|
447
|
+
opacity: var(--opacity-10);
|
|
448
|
+
pointer-events: none;
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
.Grid-row {
|
|
452
|
+
display: flex;
|
|
453
|
+
flex-grow: 1;
|
|
454
|
+
flex-shrink: 0;
|
|
455
|
+
box-sizing: border-box;
|
|
456
|
+
background: var(--white);
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
.Grid-row--body {
|
|
460
|
+
border-color: var(--secondary-light);
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
.Grid--resource .Grid-row--body:hover {
|
|
464
|
+
cursor: pointer;
|
|
465
|
+
background: var(--secondary-lightest);
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
.Grid--resource .Grid-row--body:active {
|
|
469
|
+
background: var(--secondary-lighter);
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
.Grid--resource .Grid-row--body:focus {
|
|
473
|
+
box-shadow: var(--shadow-spread) color-mod(var(--secondary) a(var(--opacity-4)));
|
|
474
|
+
outline: none;
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
/* Selected States */
|
|
478
|
+
|
|
479
|
+
.Grid-row--selected {
|
|
480
|
+
background: color-mod(var(--primary-lightest) a(var(--opacity-12)));
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
.Grid-row--selected:hover {
|
|
484
|
+
background: color-mod(var(--primary-lighter) a(var(--opacity-12))) !important;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
.Grid-row--selected:active {
|
|
488
|
+
background: var(--primary-lighter) !important;
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
.Grid-row--selected:focus {
|
|
492
|
+
outline: none;
|
|
493
|
+
box-shadow: var(--shadow-spread) color-mod(var(--primary) a(var(--opacity-4)));
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
/* Activated States */
|
|
497
|
+
|
|
498
|
+
.Grid-row--activated {
|
|
499
|
+
background: var(--primary-lightest);
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
/* Pinned Columns Default State */
|
|
503
|
+
|
|
504
|
+
.Grid--resource .Grid-row--body:hover .Grid-cellWrapper--pinned {
|
|
505
|
+
cursor: pointer;
|
|
506
|
+
background: var(--secondary-lightest);
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
.Grid--resource .Grid-row--body:active .Grid-cellWrapper--pinned {
|
|
510
|
+
background: var(--secondary-lighter);
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
.Grid--resource .Grid-row--body:focus .Grid-cellWrapper--pinned {
|
|
514
|
+
box-shadow: var(--shadow-spread) color-mod(var(--secondary) a(var(--opacity-4)));
|
|
515
|
+
outline: none;
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
/* Pinned Columns Selected State */
|
|
519
|
+
|
|
520
|
+
.Grid-row--selected .Grid-cellWrapper--pinned {
|
|
521
|
+
background: color-mod(var(--primary-lightest) a(var(--opacity-12)));
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
.Grid-row--selected:hover .Grid-cellWrapper--pinned {
|
|
525
|
+
background: color-mod(var(--primary-lighter) a(var(--opacity-12))) !important;
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
.Grid-row--selected:active .Grid-cellWrapper--pinned {
|
|
529
|
+
background: var(--primary-lighter) !important;
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
.Grid-row--selected:focus .Grid-cellWrapper--pinned {
|
|
533
|
+
outline: none;
|
|
534
|
+
box-shadow: var(--shadow-spread) color-mod(var(--primary) a(var(--opacity-4)));
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
/* Grid header */
|
|
538
|
+
.Grid-row--head .Grid-cellGroup--pinned {
|
|
539
|
+
background: var(--white);
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
.Grid-row--head .Grid-cellGroup--pinned-left {
|
|
543
|
+
border-style: inset;
|
|
544
|
+
border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
|
|
545
|
+
border-right-width: 4px;
|
|
546
|
+
border-image: linear-gradient(
|
|
547
|
+
to right,
|
|
548
|
+
var(--secondary-light),
|
|
549
|
+
var(--secondary-light) 25%,
|
|
550
|
+
color-mod(var(--secondary) a(0.1)) 25%,
|
|
551
|
+
color-mod(var(--secondary) a(0.1))
|
|
552
|
+
)
|
|
553
|
+
1 100%;
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
.Grid-row--head .Grid-cellGroup--pinned-right {
|
|
557
|
+
border-style: inset;
|
|
558
|
+
border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
|
|
559
|
+
border-left-width: 4px;
|
|
560
|
+
border-image: linear-gradient(
|
|
561
|
+
to left,
|
|
562
|
+
var(--secondary-light),
|
|
563
|
+
var(--secondary-light) 25%,
|
|
564
|
+
color-mod(var(--secondary) a(0.1)) 25%,
|
|
565
|
+
color-mod(var(--secondary) a(0.1))
|
|
566
|
+
)
|
|
567
|
+
1 100%;
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
/* Pinned Column Border */
|
|
571
|
+
|
|
572
|
+
.Grid-cellWrapper--pinned-left {
|
|
573
|
+
border-style: inset;
|
|
574
|
+
border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
|
|
575
|
+
border-right-width: 4px;
|
|
576
|
+
border-image: linear-gradient(
|
|
577
|
+
to right,
|
|
578
|
+
var(--secondary-light),
|
|
579
|
+
var(--secondary-light) 25%,
|
|
580
|
+
color-mod(var(--secondary) a(0.1)) 25%,
|
|
581
|
+
color-mod(var(--secondary) a(0.1))
|
|
582
|
+
)
|
|
583
|
+
1 100%;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
.Grid-cellWrapper--pinned-right {
|
|
587
|
+
border-style: inset;
|
|
588
|
+
border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
|
|
589
|
+
border-left-width: 4px;
|
|
590
|
+
border-image: linear-gradient(
|
|
591
|
+
to left,
|
|
592
|
+
var(--secondary-light),
|
|
593
|
+
var(--secondary-light) 25%,
|
|
594
|
+
color-mod(var(--secondary) a(0.1)) 25%,
|
|
595
|
+
color-mod(var(--secondary) a(0.1))
|
|
596
|
+
)
|
|
597
|
+
1 100%;
|
|
598
|
+
}
|