@salt-ds/ag-grid-theme 0.0.0-snapshot-20241008123012 → 0.0.0-snapshot-20241014140918
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/package.json +3 -2
- package/salt-ag-theme.css +85 -23
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/ag-grid-theme",
|
|
3
|
-
"version": "0.0.0-snapshot-
|
|
3
|
+
"version": "0.0.0-snapshot-20241014140918",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
"del": "^7.0.0"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"@salt-ds/theme": "
|
|
28
|
+
"@salt-ds/theme": "^1.23.0",
|
|
29
|
+
"ag-grid-community": ">=28.0.0"
|
|
29
30
|
}
|
|
30
31
|
}
|
package/salt-ag-theme.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* css/
|
|
1
|
+
/* css/parts/ag-root-var.css */
|
|
2
2
|
div[class*=ag-theme-salt] {
|
|
3
3
|
--ag-row-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
|
|
4
4
|
--ag-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
|
|
@@ -17,7 +17,7 @@ div[class*=ag-theme-salt] {
|
|
|
17
17
|
--ag-font-family: var(--salt-text-fontFamily);
|
|
18
18
|
--ag-font-size: var(--salt-text-fontSize);
|
|
19
19
|
--ag-foreground-color: var(--salt-content-primary-foreground);
|
|
20
|
-
--ag-grid-size: var(--salt-spacing-
|
|
20
|
+
--ag-grid-size: var(--salt-spacing-100);
|
|
21
21
|
--ag-header-background-color: var(--salt-container-primary-background);
|
|
22
22
|
--ag-header-cell-hover-background-color: var(--salt-container-primary-background);
|
|
23
23
|
--ag-header-column-separator-color: var(--salt-separable-tertiary-borderColor);
|
|
@@ -63,6 +63,8 @@ div[class*=ag-theme-salt-compact] {
|
|
|
63
63
|
div[class*=ag-theme-salt] .ag-root-wrapper {
|
|
64
64
|
border: none;
|
|
65
65
|
}
|
|
66
|
+
|
|
67
|
+
/* css/parts/ag-header.css */
|
|
66
68
|
div[class*=ag-theme-salt] .ag-header {
|
|
67
69
|
--ag-icon-font-color: var(--ag-header-foreground-color);
|
|
68
70
|
}
|
|
@@ -113,8 +115,65 @@ div[class*=ag-theme-salt] .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-he
|
|
|
113
115
|
div[class*=ag-theme-salt] .ag-header-cell.ag-floating-filter::before {
|
|
114
116
|
background-color: transparent;
|
|
115
117
|
}
|
|
116
|
-
div[class*=ag-theme-salt] .ag-floating-filter
|
|
117
|
-
|
|
118
|
+
div[class*=ag-theme-salt] .ag-floating-filter {
|
|
119
|
+
border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-separable-tertiary-borderColor);
|
|
120
|
+
}
|
|
121
|
+
div[class*=ag-theme-salt] .ag-header-cell.ag-floating-filter {
|
|
122
|
+
padding-left: 0;
|
|
123
|
+
}
|
|
124
|
+
div[class*=ag-theme-salt] .ag-floating-filter .ag-floating-filter-body:focus-within {
|
|
125
|
+
outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
|
|
126
|
+
outline-offset: -2px;
|
|
127
|
+
}
|
|
128
|
+
div[class*=ag-theme-salt] .ag-header-cell-menu-button:hover,
|
|
129
|
+
div[class*=ag-theme-salt] .ag-header-cell-filter-button:hover,
|
|
130
|
+
div[class*=ag-theme-salt] .ag-panel-title-bar-button:hover,
|
|
131
|
+
div[class*=ag-theme-salt] .ag-header-expand-icon:hover,
|
|
132
|
+
div[class*=ag-theme-salt] .ag-column-group-icons:hover,
|
|
133
|
+
div[class*=ag-theme-salt] .ag-set-filter-group-icons:hover,
|
|
134
|
+
div[class*=ag-theme-salt] .ag-group-expanded .ag-icon:hover,
|
|
135
|
+
div[class*=ag-theme-salt] .ag-group-contracted .ag-icon:hover,
|
|
136
|
+
div[class*=ag-theme-salt] .ag-chart-settings-prev:hover,
|
|
137
|
+
div[class*=ag-theme-salt] .ag-chart-settings-next:hover,
|
|
138
|
+
div[class*=ag-theme-salt] .ag-group-title-bar-icon:hover,
|
|
139
|
+
div[class*=ag-theme-salt] .ag-column-select-header-icon:hover,
|
|
140
|
+
div[class*=ag-theme-salt] .ag-floating-filter-button-button:hover,
|
|
141
|
+
div[class*=ag-theme-salt] .ag-filter-toolpanel-expand:hover,
|
|
142
|
+
div[class*=ag-theme-salt] .ag-panel-title-bar-button-icon:hover,
|
|
143
|
+
div[class*=ag-theme-salt] .ag-chart-menu-icon:hover {
|
|
144
|
+
box-shadow: 0 0 0 4px var(--salt-actionable-subtle-background-hover);
|
|
145
|
+
background-color: var(--salt-actionable-subtle-background-hover);
|
|
146
|
+
--ag-icon-font-color-filter: var(--salt-actionable-subtle-foreground-hover);
|
|
147
|
+
}
|
|
148
|
+
div[class*=ag-theme-salt] .ag-filter-active {
|
|
149
|
+
box-shadow: 0 0 0 4px var(--salt-actionable-subtle-background-active);
|
|
150
|
+
background-color: var(--salt-actionable-subtle-background-active);
|
|
151
|
+
--ag-icon-font-color-filter: var(--salt-actionable-subtle-foreground-active);
|
|
152
|
+
}
|
|
153
|
+
div[class*=ag-theme-salt] .ag-floating-filter:after {
|
|
154
|
+
width: 0;
|
|
155
|
+
}
|
|
156
|
+
div[class*=ag-theme-salt] .ag-ltr .ag-floating-filter-button {
|
|
157
|
+
margin-left: var(--salt-spacing-100);
|
|
158
|
+
}
|
|
159
|
+
div[class*=ag-theme-salt] .ag-ltr .ag-floating-filter-button .ag-button:focus {
|
|
160
|
+
border: none;
|
|
161
|
+
outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
|
|
162
|
+
outline-offset: 2px;
|
|
163
|
+
}
|
|
164
|
+
div[class*=ag-theme-salt] .ag-ltr .ag-floating-filter-button .ag-filter-active:focus {
|
|
165
|
+
box-shadow: 0 0 0 4px var(--salt-actionable-subtle-background-active);
|
|
166
|
+
outline-offset: 6px;
|
|
167
|
+
}
|
|
168
|
+
div[class*=ag-theme-salt] .ag-floating-filter input[class^=ag-][type=number],
|
|
169
|
+
div[class*=ag-theme-salt] .ag-floating-filter input[class^=ag-][type=text] {
|
|
170
|
+
height: calc(var(--salt-size-base) + var(--salt-spacing-100) - 6px);
|
|
171
|
+
margin-inline: var(--salt-spacing-50);
|
|
172
|
+
padding: 0 var(--salt-spacing-50);
|
|
173
|
+
}
|
|
174
|
+
div[class*=ag-theme-salt] .ag-floating-filter-input input[class^=ag-][type=text],
|
|
175
|
+
div[class*=ag-theme-salt] .ag-floating-filter-input input[class^=ag-][type=number] {
|
|
176
|
+
border: none;
|
|
118
177
|
}
|
|
119
178
|
div[class*=ag-theme-salt] .ag-header-cell:not(.ag-column-resizing) + .ag-header-cell.ag-column-menu-visible:not(.ag-column-hover):not(.ag-header-cell-moving):hover,
|
|
120
179
|
div[class*=ag-theme-salt] .ag-header-cell:not(.ag-column-hover):first-of-type:not(.ag-header-cell-moving).ag-column-menu-visible:hover,
|
|
@@ -138,6 +197,8 @@ div[class*=ag-theme-salt] .ag-label-align-right .ag-label {
|
|
|
138
197
|
margin-inline-start: var(--salt-spacing-100);
|
|
139
198
|
margin-inline-end: 0;
|
|
140
199
|
}
|
|
200
|
+
|
|
201
|
+
/* css/parts/ag-menus.css */
|
|
141
202
|
div[class*=ag-theme-salt] .ag-menu {
|
|
142
203
|
padding: 0;
|
|
143
204
|
border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected);
|
|
@@ -176,6 +237,8 @@ div[class*=ag-theme-salt] .ag-column-select-header {
|
|
|
176
237
|
height: calc(var(--salt-size-base) + var(--salt-spacing-100));
|
|
177
238
|
border: 0;
|
|
178
239
|
}
|
|
240
|
+
|
|
241
|
+
/* css/parts/ag-body.css */
|
|
179
242
|
div[class*=ag-theme-salt] .ag-row {
|
|
180
243
|
font-size: var(--salt-text-fontSize);
|
|
181
244
|
}
|
|
@@ -295,6 +358,8 @@ div[class*=ag-theme-salt] .ag-cell.ag-cell-range-selected:not(.ag-cell-range-sin
|
|
|
295
358
|
position: absolute;
|
|
296
359
|
border-left: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
|
|
297
360
|
}
|
|
361
|
+
|
|
362
|
+
/* css/parts/ag-input.css */
|
|
298
363
|
div[class*=ag-theme-salt] .ag-filter input[class^=ag-][type=text],
|
|
299
364
|
div[class*=ag-theme-salt] .ag-filter input[class^=ag-][type=number],
|
|
300
365
|
div[class*=ag-theme-salt] .ag-column-select input[class^=ag-][type=text],
|
|
@@ -318,16 +383,16 @@ div[class*=ag-theme-salt] .ag-column-select input[class^=ag-][type=number]:focus
|
|
|
318
383
|
outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
|
|
319
384
|
outline-offset: -2px;
|
|
320
385
|
}
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
border: none;
|
|
324
|
-
}
|
|
386
|
+
|
|
387
|
+
/* css/parts/ag-checkbox.css */
|
|
325
388
|
div[class*=ag-theme-salt] .ag-checkbox-input-wrapper {
|
|
326
389
|
height: var(--salt-size-selectable);
|
|
327
390
|
width: var(--salt-size-selectable);
|
|
328
391
|
font-size: var(--salt-size-selectable);
|
|
329
392
|
line-height: var(--salt-size-selectable);
|
|
330
393
|
}
|
|
394
|
+
|
|
395
|
+
/* css/parts/ag-buttons.css */
|
|
331
396
|
div[class*=ag-theme-salt] .ag-standard-button {
|
|
332
397
|
background: var(--salt-actionable-secondary-background);
|
|
333
398
|
border: 0;
|
|
@@ -345,30 +410,19 @@ div[class*=ag-theme-salt] .ag-standard-button:hover {
|
|
|
345
410
|
div[class*=ag-theme-salt] .ag-ltr .ag-filter-apply-panel-button {
|
|
346
411
|
margin-left: 8px;
|
|
347
412
|
}
|
|
348
|
-
div[class*=ag-theme-salt] .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton]
|
|
413
|
+
div[class*=ag-theme-salt] .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton],
|
|
414
|
+
div[class*=ag-theme-salt] .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton] {
|
|
349
415
|
background: var(--salt-actionable-cta-background);
|
|
350
416
|
color: var(--salt-actionable-cta-foreground);
|
|
351
417
|
}
|
|
352
|
-
div[class*=ag-theme-salt] .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton]:hover
|
|
418
|
+
div[class*=ag-theme-salt] .ag-standard-button.ag-filter-apply-panel-button[ref=applyFilterButton]:hover,
|
|
419
|
+
div[class*=ag-theme-salt] .ag-standard-button.ag-filter-apply-panel-button[data-ref=applyFilterButton]:hover {
|
|
353
420
|
background: var(--salt-actionable-cta-background-hover);
|
|
354
421
|
color: var(--salt-actionable-cta-foreground-hover);
|
|
355
422
|
}
|
|
356
|
-
div[class*=ag-theme-salt] .ag-floating-filter {
|
|
357
|
-
border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-separable-tertiary-borderColor);
|
|
358
|
-
}
|
|
359
|
-
div[class*=ag-theme-salt] .ag-floating-filter:focus-within {
|
|
360
|
-
outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
|
|
361
|
-
outline-offset: -2px;
|
|
362
|
-
}
|
|
363
|
-
div[class*=ag-theme-salt] .ag-floating-filter:after {
|
|
364
|
-
width: 0;
|
|
365
|
-
}
|
|
366
423
|
div[class*=ag-theme-salt] .ag-keyboard-focus .ag-header-cell:focus:after {
|
|
367
424
|
border: 0;
|
|
368
425
|
}
|
|
369
|
-
div[class*=ag-theme-salt] .ag-ltr .ag-floating-filter-button {
|
|
370
|
-
margin-left: var(--salt-spacing-100);
|
|
371
|
-
}
|
|
372
426
|
div[class*=ag-theme-salt] button[class^=ag-]:focus,
|
|
373
427
|
div[class*=ag-theme-salt] input[class^=ag-][type=button]:focus {
|
|
374
428
|
box-shadow: none;
|
|
@@ -448,6 +502,8 @@ div[class*=ag-theme-salt] .ag-column-drop-cell {
|
|
|
448
502
|
.ag-theme-salt-variant-zebra .ag-row {
|
|
449
503
|
border-color: var(--salt-separable-tertiary-borderColor);
|
|
450
504
|
}
|
|
505
|
+
|
|
506
|
+
/* css/parts/ag-tool-panel.css */
|
|
451
507
|
div[class*=ag-theme-salt] .ag-tool-panel-wrapper > .ag-react-container {
|
|
452
508
|
width: inherit;
|
|
453
509
|
}
|
|
@@ -463,6 +519,8 @@ div[class*=ag-theme-salt] .ag-column-drop-vertical-empty-message {
|
|
|
463
519
|
div[class*=ag-theme-salt] .ag-side-button-icon-wrapper {
|
|
464
520
|
margin-bottom: var(--salt-spacing-100);
|
|
465
521
|
}
|
|
522
|
+
|
|
523
|
+
/* css/parts/ag-toggle-button.css */
|
|
466
524
|
.ag-toggle-button-input-wrapper::before {
|
|
467
525
|
top: calc(1px - var(--ag-toggle-button-border-width));
|
|
468
526
|
left: calc(1px - var(--ag-toggle-button-border-width));
|
|
@@ -474,6 +532,8 @@ div[class*=ag-theme-salt] .ag-side-button-icon-wrapper {
|
|
|
474
532
|
border-color: var(--ag-toggle-button-switch-border-color);
|
|
475
533
|
left: calc(100% - var(--ag-toggle-button-height) + 2 * var(--ag-toggle-button-border-width));
|
|
476
534
|
}
|
|
535
|
+
|
|
536
|
+
/* css/parts/ag-column-drop-list.css */
|
|
477
537
|
.ag-column-drop-cell-drag-handle {
|
|
478
538
|
margin-left: 0;
|
|
479
539
|
}
|
|
@@ -485,6 +545,8 @@ div[class*=ag-theme-salt] .ag-side-button-icon-wrapper {
|
|
|
485
545
|
min-width: unset;
|
|
486
546
|
}
|
|
487
547
|
|
|
548
|
+
/* css/salt-ag-grid-theme.css */
|
|
549
|
+
|
|
488
550
|
/* css/salt-icons.css */
|
|
489
551
|
@font-face {
|
|
490
552
|
font-family: "salt-icons";
|