@salt-ds/ag-grid-theme 2.7.0 → 2.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/README.md +43 -0
- package/package.json +2 -2
- package/salt-ag-theme.css +103 -66
package/README.md
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
# `@salt-ds/ag-grid-theme`
|
|
2
|
+
|
|
3
|
+
The Salt theme for [AG Grid](https://www.ag-grid.com/). Applies the Salt visual
|
|
4
|
+
language (typography, spacing, color, density) to AG Grid via CSS custom
|
|
5
|
+
properties and a small layer of selector overrides.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm install @salt-ds/ag-grid-theme
|
|
11
|
+
# or
|
|
12
|
+
yarn add @salt-ds/ag-grid-theme
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Peer dependencies (install separately):
|
|
16
|
+
|
|
17
|
+
- [`ag-grid-community`](https://www.npmjs.com/package/ag-grid-community) `>=28`
|
|
18
|
+
- [`@salt-ds/theme`](https://www.npmjs.com/package/@salt-ds/theme)
|
|
19
|
+
|
|
20
|
+
> For users on AG Grid v33+, opt back into the legacy theming system with
|
|
21
|
+
> `provideGlobalGridOptions({ theme: "legacy" })`. A future major version of
|
|
22
|
+
> this package will adopt AG Grid's new Theming API.
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
```ts
|
|
27
|
+
import "ag-grid-community/styles/ag-grid.css";
|
|
28
|
+
import "@salt-ds/ag-grid-theme/salt-ag-theme.css";
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Apply the appropriate class name on the grid wrapper:
|
|
32
|
+
|
|
33
|
+
- `ag-theme-salt-light` / `ag-theme-salt-dark`
|
|
34
|
+
- `ag-theme-salt-compact-light` / `ag-theme-salt-compact-dark`
|
|
35
|
+
|
|
36
|
+
Optional modifiers can be added alongside the mode class:
|
|
37
|
+
|
|
38
|
+
- `ag-theme-salt-variant-secondary`, `ag-theme-salt-variant-tertiary`,
|
|
39
|
+
`ag-theme-salt-variant-zebra` — body background variants
|
|
40
|
+
- `ag-theme-salt-header-{primary,secondary,tertiary}` — header background
|
|
41
|
+
|
|
42
|
+
See the full
|
|
43
|
+
[documentation and examples](https://www.saltdesignsystem.com/salt/components/ag-grid-theme).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/ag-grid-theme",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.9.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"del": "^8.0.0"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|
|
31
|
-
"@salt-ds/theme": "^1.
|
|
31
|
+
"@salt-ds/theme": "^1.43.0",
|
|
32
32
|
"ag-grid-community": ">=28.0.0"
|
|
33
33
|
}
|
|
34
34
|
}
|
package/salt-ag-theme.css
CHANGED
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
background-color: var(--ag-selected-row-background-color);
|
|
13
13
|
border-color: var(--ag-selected-row-border-color);
|
|
14
14
|
}
|
|
15
|
-
.ag-theme-salt-light .ag-row-selected
|
|
16
|
-
.ag-theme-salt-dark .ag-row-selected
|
|
17
|
-
.ag-theme-salt-compact-light .ag-row-selected
|
|
18
|
-
.ag-theme-salt-compact-dark .ag-row-selected
|
|
15
|
+
.ag-theme-salt-light .ag-row-selected::before,
|
|
16
|
+
.ag-theme-salt-dark .ag-row-selected::before,
|
|
17
|
+
.ag-theme-salt-compact-light .ag-row-selected::before,
|
|
18
|
+
.ag-theme-salt-compact-dark .ag-row-selected::before,
|
|
19
19
|
.ag-theme-salt-light .ag-row-hover.ag-row-selected::before,
|
|
20
20
|
.ag-theme-salt-dark .ag-row-hover.ag-row-selected::before,
|
|
21
21
|
.ag-theme-salt-compact-light .ag-row-hover.ag-row-selected::before,
|
|
@@ -263,29 +263,29 @@
|
|
|
263
263
|
outline-offset: -2px;
|
|
264
264
|
border-color: transparent;
|
|
265
265
|
}
|
|
266
|
-
.ag-theme-salt-light .ag-cell.editable-cell.ag-cell-focus:focus
|
|
267
|
-
.ag-theme-salt-light .ag-cell.editable-numeric-cell.ag-cell-focus:focus
|
|
268
|
-
.ag-theme-salt-light .ag-cell.editable-cell.ag-cell-focus:focus-within
|
|
269
|
-
.ag-theme-salt-light .editable-cell.ag-cell-inline-editing
|
|
270
|
-
.ag-theme-salt-dark .ag-cell.editable-cell.ag-cell-focus:focus
|
|
271
|
-
.ag-theme-salt-dark .ag-cell.editable-numeric-cell.ag-cell-focus:focus
|
|
272
|
-
.ag-theme-salt-dark .ag-cell.editable-cell.ag-cell-focus:focus-within
|
|
273
|
-
.ag-theme-salt-dark .editable-cell.ag-cell-inline-editing
|
|
274
|
-
.ag-theme-salt-compact-light .ag-cell.editable-cell.ag-cell-focus:focus
|
|
275
|
-
.ag-theme-salt-compact-light .ag-cell.editable-numeric-cell.ag-cell-focus:focus
|
|
276
|
-
.ag-theme-salt-compact-light .ag-cell.editable-cell.ag-cell-focus:focus-within
|
|
277
|
-
.ag-theme-salt-compact-light .editable-cell.ag-cell-inline-editing
|
|
278
|
-
.ag-theme-salt-compact-dark .ag-cell.editable-cell.ag-cell-focus:focus
|
|
279
|
-
.ag-theme-salt-compact-dark .ag-cell.editable-numeric-cell.ag-cell-focus:focus
|
|
280
|
-
.ag-theme-salt-compact-dark .ag-cell.editable-cell.ag-cell-focus:focus-within
|
|
281
|
-
.ag-theme-salt-compact-dark .editable-cell.ag-cell-inline-editing
|
|
266
|
+
.ag-theme-salt-light .ag-cell.editable-cell.ag-cell-focus:focus::before,
|
|
267
|
+
.ag-theme-salt-light .ag-cell.editable-numeric-cell.ag-cell-focus:focus::before,
|
|
268
|
+
.ag-theme-salt-light .ag-cell.editable-cell.ag-cell-focus:focus-within::before,
|
|
269
|
+
.ag-theme-salt-light .editable-cell.ag-cell-inline-editing::before,
|
|
270
|
+
.ag-theme-salt-dark .ag-cell.editable-cell.ag-cell-focus:focus::before,
|
|
271
|
+
.ag-theme-salt-dark .ag-cell.editable-numeric-cell.ag-cell-focus:focus::before,
|
|
272
|
+
.ag-theme-salt-dark .ag-cell.editable-cell.ag-cell-focus:focus-within::before,
|
|
273
|
+
.ag-theme-salt-dark .editable-cell.ag-cell-inline-editing::before,
|
|
274
|
+
.ag-theme-salt-compact-light .ag-cell.editable-cell.ag-cell-focus:focus::before,
|
|
275
|
+
.ag-theme-salt-compact-light .ag-cell.editable-numeric-cell.ag-cell-focus:focus::before,
|
|
276
|
+
.ag-theme-salt-compact-light .ag-cell.editable-cell.ag-cell-focus:focus-within::before,
|
|
277
|
+
.ag-theme-salt-compact-light .editable-cell.ag-cell-inline-editing::before,
|
|
278
|
+
.ag-theme-salt-compact-dark .ag-cell.editable-cell.ag-cell-focus:focus::before,
|
|
279
|
+
.ag-theme-salt-compact-dark .ag-cell.editable-numeric-cell.ag-cell-focus:focus::before,
|
|
280
|
+
.ag-theme-salt-compact-dark .ag-cell.editable-cell.ag-cell-focus:focus-within::before,
|
|
281
|
+
.ag-theme-salt-compact-dark .editable-cell.ag-cell-inline-editing::before {
|
|
282
282
|
border-bottom: calc(var(--salt-size-adornment) + 4px) solid transparent;
|
|
283
283
|
border-left: calc(var(--salt-size-adornment) + 4px) solid var(--salt-editable-borderColor-hover);
|
|
284
284
|
border-top: 0 solid transparent;
|
|
285
285
|
content: "";
|
|
286
|
-
left:
|
|
286
|
+
left: 0;
|
|
287
287
|
position: absolute;
|
|
288
|
-
top:
|
|
288
|
+
top: 0;
|
|
289
289
|
z-index: 2;
|
|
290
290
|
}
|
|
291
291
|
.ag-theme-salt-light .editable-numeric-cell input,
|
|
@@ -379,7 +379,7 @@
|
|
|
379
379
|
.ag-theme-salt-compact-light .ag-rich-select-row-selected,
|
|
380
380
|
.ag-theme-salt-compact-dark .ag-select-list-item[aria-selected=true],
|
|
381
381
|
.ag-theme-salt-compact-dark .ag-rich-select-row-selected {
|
|
382
|
-
box-shadow: inset
|
|
382
|
+
box-shadow: inset 0 var(--salt-size-fixed-100) 0 var(--salt-selectable-borderColor-selected), inset 0 calc(var(--salt-size-fixed-100) * -1) 0 var(--salt-selectable-borderColor-selected);
|
|
383
383
|
}
|
|
384
384
|
.ag-theme-salt-light .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-top::after,
|
|
385
385
|
.ag-theme-salt-dark .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell).ag-cell-range-top::after,
|
|
@@ -435,9 +435,9 @@
|
|
|
435
435
|
.ag-theme-salt-dark .ag-standard-button,
|
|
436
436
|
.ag-theme-salt-compact-light .ag-standard-button,
|
|
437
437
|
.ag-theme-salt-compact-dark .ag-standard-button {
|
|
438
|
-
background: var(--salt-actionable-
|
|
438
|
+
background: var(--salt-actionable-subtle-background);
|
|
439
439
|
border: 0;
|
|
440
|
-
color: var(--salt-actionable-
|
|
440
|
+
color: var(--salt-actionable-subtle-foreground);
|
|
441
441
|
font-size: var(--salt-text-fontSize);
|
|
442
442
|
font-weight: 600;
|
|
443
443
|
height: var(--salt-size-base);
|
|
@@ -448,14 +448,14 @@
|
|
|
448
448
|
.ag-theme-salt-dark .ag-standard-button:hover,
|
|
449
449
|
.ag-theme-salt-compact-light .ag-standard-button:hover,
|
|
450
450
|
.ag-theme-salt-compact-dark .ag-standard-button:hover {
|
|
451
|
-
background-color: var(--salt-actionable-
|
|
452
|
-
color: var(--salt-actionable-
|
|
451
|
+
background-color: var(--salt-actionable-subtle-background-hover);
|
|
452
|
+
color: var(--salt-actionable-subtle-foreground-hover);
|
|
453
453
|
}
|
|
454
454
|
.ag-theme-salt-light .ag-ltr .ag-filter-apply-panel-button,
|
|
455
455
|
.ag-theme-salt-dark .ag-ltr .ag-filter-apply-panel-button,
|
|
456
456
|
.ag-theme-salt-compact-light .ag-ltr .ag-filter-apply-panel-button,
|
|
457
457
|
.ag-theme-salt-compact-dark .ag-ltr .ag-filter-apply-panel-button {
|
|
458
|
-
margin-left:
|
|
458
|
+
margin-left: var(--salt-spacing-100);
|
|
459
459
|
}
|
|
460
460
|
.ag-theme-salt-light .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton],
|
|
461
461
|
.ag-theme-salt-dark .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton],
|
|
@@ -465,8 +465,8 @@
|
|
|
465
465
|
.ag-theme-salt-dark .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton],
|
|
466
466
|
.ag-theme-salt-compact-light .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton],
|
|
467
467
|
.ag-theme-salt-compact-dark .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton] {
|
|
468
|
-
background: var(--salt-actionable-
|
|
469
|
-
color: var(--salt-actionable-
|
|
468
|
+
background: var(--salt-actionable-accented-bold-background);
|
|
469
|
+
color: var(--salt-actionable-accented-bold-foreground);
|
|
470
470
|
}
|
|
471
471
|
.ag-theme-salt-light .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton]:hover,
|
|
472
472
|
.ag-theme-salt-dark .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton]:hover,
|
|
@@ -476,13 +476,13 @@
|
|
|
476
476
|
.ag-theme-salt-dark .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton]:hover,
|
|
477
477
|
.ag-theme-salt-compact-light .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton]:hover,
|
|
478
478
|
.ag-theme-salt-compact-dark .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton]:hover {
|
|
479
|
-
background: var(--salt-actionable-
|
|
480
|
-
color: var(--salt-actionable-
|
|
479
|
+
background: var(--salt-actionable-accented-bold-background-hover);
|
|
480
|
+
color: var(--salt-actionable-accented-bold-foreground-hover);
|
|
481
481
|
}
|
|
482
|
-
.ag-theme-salt-light .ag-keyboard-focus .ag-header-cell:focus
|
|
483
|
-
.ag-theme-salt-dark .ag-keyboard-focus .ag-header-cell:focus
|
|
484
|
-
.ag-theme-salt-compact-light .ag-keyboard-focus .ag-header-cell:focus
|
|
485
|
-
.ag-theme-salt-compact-dark .ag-keyboard-focus .ag-header-cell:focus
|
|
482
|
+
.ag-theme-salt-light .ag-keyboard-focus .ag-header-cell:focus::after,
|
|
483
|
+
.ag-theme-salt-dark .ag-keyboard-focus .ag-header-cell:focus::after,
|
|
484
|
+
.ag-theme-salt-compact-light .ag-keyboard-focus .ag-header-cell:focus::after,
|
|
485
|
+
.ag-theme-salt-compact-dark .ag-keyboard-focus .ag-header-cell:focus::after {
|
|
486
486
|
border: 0;
|
|
487
487
|
}
|
|
488
488
|
.ag-theme-salt-light button[class^=ag-]:focus,
|
|
@@ -602,16 +602,33 @@
|
|
|
602
602
|
}
|
|
603
603
|
|
|
604
604
|
/* css/parts/ag-column-drop-list.css */
|
|
605
|
-
.ag-column-drop-cell-drag-handle {
|
|
605
|
+
[class*=ag-theme-salt] .ag-column-drop-cell-drag-handle {
|
|
606
606
|
margin-left: 0;
|
|
607
607
|
}
|
|
608
|
-
.ag-column-drop-cell {
|
|
608
|
+
[class*=ag-theme-salt] .ag-column-drop-cell {
|
|
609
609
|
height: calc(var(--salt-size-base) - var(--salt-spacing-100));
|
|
610
610
|
padding: 0 var(--salt-spacing-50);
|
|
611
611
|
}
|
|
612
|
-
.ag-column-drop-cell-button {
|
|
612
|
+
[class*=ag-theme-salt] .ag-column-drop-cell-button {
|
|
613
613
|
min-width: unset;
|
|
614
614
|
}
|
|
615
|
+
div[class*=ag-theme-salt] .ag-column-drop-cell {
|
|
616
|
+
--ag-secondary-foreground-color: var(--salt-actionable-bold-foreground);
|
|
617
|
+
--ag-icon-font-color: var(--salt-actionable-bold-foreground);
|
|
618
|
+
--ag-chip-background-color: var(--salt-actionable-bold-background);
|
|
619
|
+
color: var(--ag-secondary-foreground-color);
|
|
620
|
+
}
|
|
621
|
+
div[class*=ag-theme-salt] .ag-column-drop-cell:hover {
|
|
622
|
+
--ag-secondary-foreground-color: var(--salt-actionable-bold-foreground-hover);
|
|
623
|
+
--ag-icon-font-color: var(--salt-actionable-bold-foreground-hover);
|
|
624
|
+
--ag-chip-background-color: var(--salt-actionable-bold-background-hover);
|
|
625
|
+
}
|
|
626
|
+
div[class*=ag-theme-salt] .ag-column-drop-cell:active,
|
|
627
|
+
div[class*=ag-theme-salt] .ag-column-drop-cell[aria-expanded=true] {
|
|
628
|
+
--ag-secondary-foreground-color: var(--salt-actionable-bold-foreground-active);
|
|
629
|
+
--ag-icon-font-color: var(--salt-actionable-bold-foreground-active);
|
|
630
|
+
--ag-chip-background-color: var(--salt-actionable-bold-background-active);
|
|
631
|
+
}
|
|
615
632
|
|
|
616
633
|
/* css/parts/ag-header.css */
|
|
617
634
|
.ag-theme-salt-light .ag-header,
|
|
@@ -836,10 +853,10 @@
|
|
|
836
853
|
.ag-theme-salt-compact-dark .ag-filter-active {
|
|
837
854
|
--ag-icon-font-code-filter: var(--ag-icon-font-code-filter-filled);
|
|
838
855
|
}
|
|
839
|
-
.ag-theme-salt-light .ag-floating-filter
|
|
840
|
-
.ag-theme-salt-dark .ag-floating-filter
|
|
841
|
-
.ag-theme-salt-compact-light .ag-floating-filter
|
|
842
|
-
.ag-theme-salt-compact-dark .ag-floating-filter
|
|
856
|
+
.ag-theme-salt-light .ag-floating-filter::after,
|
|
857
|
+
.ag-theme-salt-dark .ag-floating-filter::after,
|
|
858
|
+
.ag-theme-salt-compact-light .ag-floating-filter::after,
|
|
859
|
+
.ag-theme-salt-compact-dark .ag-floating-filter::after {
|
|
843
860
|
width: 0;
|
|
844
861
|
}
|
|
845
862
|
.ag-theme-salt-light .ag-ltr .ag-floating-filter-button,
|
|
@@ -898,16 +915,16 @@
|
|
|
898
915
|
.ag-theme-salt-dark .ag-header-cell.ag-column-menu-visible,
|
|
899
916
|
.ag-theme-salt-compact-light .ag-header-cell.ag-column-menu-visible,
|
|
900
917
|
.ag-theme-salt-compact-dark .ag-header-cell.ag-column-menu-visible {
|
|
901
|
-
background: var(--salt-actionable-
|
|
902
|
-
color: var(--salt-actionable-
|
|
903
|
-
--ag-icon-font-color: var(--salt-actionable-
|
|
918
|
+
background: var(--salt-actionable-subtle-background-active);
|
|
919
|
+
color: var(--salt-actionable-subtle-foreground-active);
|
|
920
|
+
--ag-icon-font-color: var(--salt-actionable-subtle-foreground-active);
|
|
904
921
|
--salt-actionable-subtle-background-hover: var(--salt-actionable-subtle-background-active);
|
|
905
922
|
}
|
|
906
923
|
.ag-theme-salt-light .ag-header-cell.ag-column-menu-visible .ag-icon,
|
|
907
924
|
.ag-theme-salt-dark .ag-header-cell.ag-column-menu-visible .ag-icon,
|
|
908
925
|
.ag-theme-salt-compact-light .ag-header-cell.ag-column-menu-visible .ag-icon,
|
|
909
926
|
.ag-theme-salt-compact-dark .ag-header-cell.ag-column-menu-visible .ag-icon {
|
|
910
|
-
color: var(--salt-actionable-
|
|
927
|
+
color: var(--salt-actionable-subtle-foreground-active);
|
|
911
928
|
}
|
|
912
929
|
.ag-theme-salt-light .ag-cell-label-container,
|
|
913
930
|
.ag-theme-salt-dark .ag-cell-label-container,
|
|
@@ -1131,7 +1148,7 @@ div[class*=ag-theme-salt] {
|
|
|
1131
1148
|
--ag-checkbox-checked-color: var(--salt-selectable-foreground-selected);
|
|
1132
1149
|
--ag-checkbox-indeterminate-color: var(--salt-selectable-foreground);
|
|
1133
1150
|
--ag-checkbox-unchecked-color: var(--salt-selectable-borderColor);
|
|
1134
|
-
--ag-chip-background-color: var(--salt-actionable-
|
|
1151
|
+
--ag-chip-background-color: var(--salt-actionable-bold-background);
|
|
1135
1152
|
--ag-data-color: var(--salt-content-primary-foreground);
|
|
1136
1153
|
--ag-disabled-foreground-color: var(--salt-content-primary-foreground-disabled);
|
|
1137
1154
|
--ag-font-family: var(--salt-text-fontFamily);
|
|
@@ -1182,17 +1199,6 @@ div[class*=ag-theme-salt-compact] {
|
|
|
1182
1199
|
--salt-size-base: 16px;
|
|
1183
1200
|
--salt-size-selectable: 12px;
|
|
1184
1201
|
}
|
|
1185
|
-
div[class*=ag-theme-salt].ag-theme-salt-variant-secondary {
|
|
1186
|
-
--ag-header-background-color: var(--salt-container-secondary-background);
|
|
1187
|
-
--ag-secondary-border-color: var(--salt-separable-tertiary-borderColor);
|
|
1188
|
-
--ag-background-color: var(--salt-container-secondary-background);
|
|
1189
|
-
}
|
|
1190
|
-
div[class*=ag-theme-salt].ag-theme-salt-variant-zebra {
|
|
1191
|
-
--ag-background-color: var(--salt-container-secondary-background);
|
|
1192
|
-
--ag-odd-row-background-color: var(--salt-container-primary-background);
|
|
1193
|
-
--ag-header-background-color: var(--salt-container-primary-background);
|
|
1194
|
-
--ag-secondary-border-color: var(--salt-separable-tertiary-borderColor);
|
|
1195
|
-
}
|
|
1196
1202
|
.ag-theme-salt-light .ag-root-wrapper,
|
|
1197
1203
|
.ag-theme-salt-dark .ag-root-wrapper,
|
|
1198
1204
|
.ag-theme-salt-compact-light .ag-root-wrapper,
|
|
@@ -1201,32 +1207,49 @@ div[class*=ag-theme-salt].ag-theme-salt-variant-zebra {
|
|
|
1201
1207
|
}
|
|
1202
1208
|
|
|
1203
1209
|
/* css/parts/ag-row.css */
|
|
1204
|
-
|
|
1210
|
+
div[class*=ag-theme-salt].ag-theme-salt-variant-secondary {
|
|
1205
1211
|
--ag-header-background-color: var(--salt-container-secondary-background);
|
|
1206
1212
|
--ag-secondary-border-color: var(--salt-separable-tertiary-borderColor);
|
|
1207
1213
|
--ag-background-color: var(--salt-container-secondary-background);
|
|
1208
1214
|
}
|
|
1209
|
-
|
|
1215
|
+
div[class*=ag-theme-salt].ag-theme-salt-variant-tertiary {
|
|
1216
|
+
--ag-header-background-color: var(--salt-container-tertiary-background);
|
|
1217
|
+
--ag-secondary-border-color: var(--salt-separable-tertiary-borderColor);
|
|
1218
|
+
--ag-background-color: var(--salt-container-tertiary-background);
|
|
1219
|
+
}
|
|
1220
|
+
div[class*=ag-theme-salt].ag-theme-salt-variant-zebra {
|
|
1210
1221
|
--ag-background-color: var(--salt-container-secondary-background);
|
|
1211
1222
|
--ag-odd-row-background-color: var(--salt-container-primary-background);
|
|
1212
1223
|
--ag-header-background-color: var(--salt-container-primary-background);
|
|
1213
1224
|
--ag-secondary-border-color: var(--salt-separable-tertiary-borderColor);
|
|
1214
1225
|
}
|
|
1215
|
-
.
|
|
1226
|
+
div[class*=ag-theme-salt].ag-theme-salt-variant-secondary.ag-theme-salt-variant-zebra {
|
|
1227
|
+
--ag-background-color: var(--salt-container-primary-background);
|
|
1228
|
+
--ag-odd-row-background-color: var(--salt-container-secondary-background);
|
|
1229
|
+
--ag-header-background-color: var(--salt-container-secondary-background);
|
|
1230
|
+
--ag-secondary-border-color: var(--salt-separable-tertiary-borderColor);
|
|
1231
|
+
}
|
|
1232
|
+
div[class*=ag-theme-salt].ag-theme-salt-variant-tertiary.ag-theme-salt-variant-zebra {
|
|
1233
|
+
--ag-background-color: var(--salt-container-primary-background);
|
|
1234
|
+
--ag-odd-row-background-color: var(--salt-container-tertiary-background);
|
|
1235
|
+
--ag-header-background-color: var(--salt-container-tertiary-background);
|
|
1236
|
+
--ag-secondary-border-color: var(--salt-separable-tertiary-borderColor);
|
|
1237
|
+
}
|
|
1238
|
+
[class*=ag-theme-salt] .error-row {
|
|
1216
1239
|
--ag-background-color: var(--salt-status-error-background);
|
|
1217
1240
|
--ag-selected-row-background-color: var(--salt-status-error-background-selected);
|
|
1218
1241
|
--ag-selected-row-border-color: var(--salt-status-error-borderColor);
|
|
1219
1242
|
--ag-odd-row-background-color: var(--ag-background-color);
|
|
1220
1243
|
--ag-row-hover-color: var(--salt-overlayable-background-hover);
|
|
1221
1244
|
}
|
|
1222
|
-
.warning-row {
|
|
1245
|
+
[class*=ag-theme-salt] .warning-row {
|
|
1223
1246
|
--ag-background-color: var(--salt-status-warning-background);
|
|
1224
1247
|
--ag-selected-row-background-color: var(--salt-status-warning-background-selected);
|
|
1225
1248
|
--ag-selected-row-border-color: var(--salt-status-warning-borderColor);
|
|
1226
1249
|
--ag-odd-row-background-color: var(--ag-background-color);
|
|
1227
1250
|
--ag-row-hover-color: var(--salt-overlayable-background-hover);
|
|
1228
1251
|
}
|
|
1229
|
-
.success-row {
|
|
1252
|
+
[class*=ag-theme-salt] .success-row {
|
|
1230
1253
|
--ag-background-color: var(--salt-status-success-background);
|
|
1231
1254
|
--ag-selected-row-background-color: var(--salt-status-success-background-selected);
|
|
1232
1255
|
--ag-selected-row-border-color: var(--salt-status-success-borderColor);
|
|
@@ -1235,13 +1258,13 @@ div[class*=ag-theme-salt].ag-theme-salt-variant-zebra {
|
|
|
1235
1258
|
}
|
|
1236
1259
|
|
|
1237
1260
|
/* css/parts/ag-toggle-button.css */
|
|
1238
|
-
.ag-toggle-button-input-wrapper::before {
|
|
1261
|
+
[class*=ag-theme-salt] .ag-toggle-button-input-wrapper::before {
|
|
1239
1262
|
top: calc(1px - var(--ag-toggle-button-border-width));
|
|
1240
1263
|
left: calc(1px - var(--ag-toggle-button-border-width));
|
|
1241
1264
|
height: calc(var(--ag-toggle-button-height) - 2 * var(--ag-toggle-button-border-width));
|
|
1242
1265
|
width: calc(var(--ag-toggle-button-height) - 2 * var(--ag-toggle-button-border-width));
|
|
1243
1266
|
}
|
|
1244
|
-
.ag-toggle-button-input-wrapper.ag-checked::before {
|
|
1267
|
+
[class*=ag-theme-salt] .ag-toggle-button-input-wrapper.ag-checked::before {
|
|
1245
1268
|
--ag-toggle-button-switch-background-color: var(--salt-selectable-borderColor-selected);
|
|
1246
1269
|
border-color: var(--ag-toggle-button-switch-border-color);
|
|
1247
1270
|
left: calc(100% - var(--ag-toggle-button-height) + 2 * var(--ag-toggle-button-border-width));
|
|
@@ -1279,6 +1302,20 @@ div[class*=ag-theme-salt].ag-theme-salt-variant-zebra {
|
|
|
1279
1302
|
margin-bottom: var(--salt-spacing-100);
|
|
1280
1303
|
}
|
|
1281
1304
|
|
|
1305
|
+
/* css/parts/ag-header-variants.css */
|
|
1306
|
+
div[class*=ag-theme-salt].ag-theme-salt-header-primary,
|
|
1307
|
+
div[class*=ag-theme-salt].ag-theme-salt-header-primary.ag-theme-salt-variant-zebra {
|
|
1308
|
+
--ag-header-background-color: var(--salt-container-primary-background);
|
|
1309
|
+
}
|
|
1310
|
+
div[class*=ag-theme-salt].ag-theme-salt-header-secondary,
|
|
1311
|
+
div[class*=ag-theme-salt].ag-theme-salt-header-secondary.ag-theme-salt-variant-zebra {
|
|
1312
|
+
--ag-header-background-color: var(--salt-container-secondary-background);
|
|
1313
|
+
}
|
|
1314
|
+
div[class*=ag-theme-salt].ag-theme-salt-header-tertiary,
|
|
1315
|
+
div[class*=ag-theme-salt].ag-theme-salt-header-tertiary.ag-theme-salt-variant-zebra {
|
|
1316
|
+
--ag-header-background-color: var(--salt-container-tertiary-background);
|
|
1317
|
+
}
|
|
1318
|
+
|
|
1282
1319
|
/* css/salt-ag-grid-theme.css */
|
|
1283
1320
|
|
|
1284
1321
|
/* css/salt-icons.css */
|