-
Notifications
You must be signed in to change notification settings - Fork 7
/
dwc.css
127 lines (105 loc) · 4.84 KB
/
dwc.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
html {
/* Colour of text and icons in primary UI elements like menus */
--ag-foreground-color: var(--bbj-color-black);
/* Colour of text and icons in UI elements that need to be slightly less emphasised to avoid distracting attention from data */
--ag-secondary-foreground-color: var(--ag-foreground-color);
/* background colour of the grid */
--ag-background-color: var(--bbj-surface-3);
/* background colour for all headers, including the grid header, panels etc */
--ag-header-background-color: var(--bbj-surface-3);
/* Color of elements that can't be interacted with because they are in a disabled state */
--ag-disabled-foreground-color: var(--bbj-color-gray-50);
/* Background colour for second level headings within UI components */
--ag-subheader-background-color: var(--bbj-surface-2);
/* Background for areas of the interface that contain UI controls, like tool panels and the chart settings menu */
--ag-control-panel-background-color: var(--bbj-surface-2);
/* Background color of selected rows in the grid and in dropdown menus */
--ag-selected-row-background-color: var(--bbj-color-primary-85);
/* Background colour applied to every other row or null to use background-color for all rows */
--ag-odd-row-background-color: var(--bbj-surface-2);
/* Background color when hovering over rows in the grid and in dropdown menus, or null for no rollover effect (note - if you want a rollover on one but not the other, set to null and use CSS to achieve the rollover) */
--ag-row-hover-color: var(--bbj-color-primary-alt);
/* Background color of the overlay shown over the grid when it is covered by an overlay, e.g. a data loading indicator. */
--ag-modal-overlay-background-color: var(--bbj-overlay-background);
/* Color to draw around selected cell ranges */
--ag-range-selection-border-color: var(--bbj-color-primary);
/* Background colour of selected cell ranges. */
--ag-range-selection-background-color: hsla(
var(--bbj-color-primary-h),
var(--bbj-color-primary-s),
50%,
0.2
);
--ag-range-selection-background-color-1: var(
--ag-range-selection-background-color
);
--ag-range-selection-background-color-2: hsla(
var(--bbj-color-primary-h),
var(--bbj-color-primary-s),
50%,
0.3
);
--ag-range-selection-background-color-3: hsla(
var(--bbj-color-primary-h),
var(--bbj-color-primary-s),
50%,
0.4
);
--ag-range-selection-background-color-4: hsla(
var(--bbj-color-primary-h),
var(--bbj-color-primary-s),
50%,
0.5
);
/* Colour for the "chip" that repersents a column that has been dragged onto a drop zone */
--ag-chip-background-color: var(--bbj-color-default);
/* Colour of the border drawn under selected tabs, including menus and tool panels */
--ag-selected-tab-underline-color: var(--bbj-color-primary);
/* Colour for border around major UI components like the grid itself, headers, footers and tool panels */
--ag-border-color: var(--bbj-color-default);
/* Colour for borders used to separate elements within a major UI component */
--ag-secondary-border-color: var(--bbj-color-default-dark);
/* Colour of the border between grid rows, or null to display no border */
--ag-row-border-color: var(--ag-secondary-border-color);
/* Inputs */
--ag-input-border-color: var(--bbj-color-default);
--ag-input-focus-border-color: var(--bbj-border-color-default);
--ag-input-disabled-background-color: var(--bbj-color-default-95);
/* Checkboxes */
--ag-checkbox-checked-color: var(--bbj-color-primary);
--ag-checkbox-indeterminate-color: var(--ag-checkbox-checked-color);
--ag-checkbox-unchecked-color: var(--ag-checkbox-checked-color);
/* Toggles */
--ag-toggle-button-off-border-color: var(--bbj-color-default);
--ag-toggle-button-off-background-color: var(--bbj-color-default-dark);
--ag-toggle-button-on-border-color: var(--bbj-color-primary);
--ag-toggle-button-on-background-color: var(--bbj-color-primary);
--ag-toggle-button-switch-border-color: var(--bbj-color-default-dark);
}
.ag-chart-menu-icon:hover,
.ag-chart-settings-next:hover,
.ag-chart-settings-prev:hover,
.ag-column-group-icons:hover,
.ag-column-select-header-icon:hover,
.ag-filter-toolpanel-expand:hover,
.ag-floating-filter-button-button:hover,
.ag-group-contracted .ag-icon:hover,
.ag-group-expanded .ag-icon:hover,
.ag-group-title-bar-icon:hover,
.ag-header-cell-menu-button:hover,
.ag-header-expand-icon:hover,
.ag-panel-title-bar-button:hover,
.ag-side-button-button:hover,
.ag-tab:hover,
.ag-tab-selected {
color: var(--bbj-color-primary-text) !important;
}
.ag-checkbox-input-wrapper:active,
.ag-checkbox-input-wrapper:focus-within,
.ag-toggle-button-input-wrapper:focus-within {
box-shadow: var(--bbj-focus-ring-primary) !important;
}
.ag-menu,
.ag-overlay-loading-center {
box-shadow: var(--bbj-shadow, 0 1px 4px 1px rgb(186 191 199 / 40%)) !important;
}