1 | .ag-theme-material {
|
2 | --ag-material-primary-color: #3f51b5;
|
3 | --ag-material-accent-color: #ff4081;
|
4 | --ag-foreground-color: rgba(0, 0, 0, 0.87);
|
5 | --ag-secondary-foreground-color: rgba(0, 0, 0, 0.54);
|
6 | --ag-disabled-foreground-color: rgba(0, 0, 0, 0.38);
|
7 | --ag-background-color: #fff;
|
8 | --ag-header-background-color: #fff;
|
9 | --ag-tooltip-background-color: #fff;
|
10 | --ag-subheader-background-color: #eee;
|
11 | --ag-subheader-toolbar-background-color: rgba(238, 238, 238, 0.5);
|
12 | --ag-header-cell-hover-background-color: #f2f2f2;
|
13 | --ag-chip-background-color: #e2e2e2;
|
14 | --ag-range-selection-background-color: rgba(122, 134, 203, 0.1);
|
15 | --ag-range-selection-background-color-2: rgba(122, 134, 203, 0.19);
|
16 | --ag-range-selection-background-color-3: rgba(122, 134, 203, 0.27);
|
17 | --ag-range-selection-background-color-4: rgba(122, 134, 203, 0.34);
|
18 | --ag-range-selection-highlight-color: #fce4ec;
|
19 | --ag-row-hover-color: #fafafa;
|
20 | --ag-column-hover-color: #fafafa;
|
21 | --ag-control-panel-background-color: #fafafa;
|
22 | --ag-selected-row-background-color: #eee;
|
23 | --ag-checkbox-unchecked-color: #333;
|
24 | --ag-value-change-value-highlight-background-color: #00acc1;
|
25 | --ag-side-button-selected-background-color: transparent;
|
26 | --ag-range-selection-border-color: var(--ag-material-primary-color);
|
27 | --ag-checkbox-checked-color: var(--ag-material-accent-color);
|
28 | --ag-borders: none;
|
29 | --ag-borders-critical: solid 1px;
|
30 | --ag-border-color: #e2e2e2;
|
31 | --ag-grid-size: 8px;
|
32 | --ag-icon-size: 18px;
|
33 | --ag-header-height: calc(var(--ag-grid-size) * 7);
|
34 | --ag-row-height: calc(var(--ag-grid-size) * 6);
|
35 | --ag-cell-horizontal-padding: calc(var(--ag-grid-size) * 3);
|
36 | --ag-list-item-height: calc(var(--ag-grid-size) * 4);
|
37 | --ag-row-group-indent-size: calc(var(--ag-grid-size) * 3 + var(--ag-icon-size));
|
38 | --ag-filter-tool-panel-sub-level-row-height: calc(var(--ag-grid-size) * 4);
|
39 | --ag-checkbox-border-radius: 2px;
|
40 | --ag-toggle-button-switch-border-width: 2px;
|
41 | --ag-toggle-button-height: var(--ag-icon-size);
|
42 | --ag-widget-container-horizontal-padding: calc(var(--ag-grid-size) * 1.5);
|
43 | --ag-widget-container-vertical-padding: calc(var(--ag-grid-size) * 2);
|
44 | --ag-widget-vertical-spacing: calc(var(--ag-grid-size) * 1.75);
|
45 | --ag-font-family: "Roboto", sans-serif;
|
46 | --ag-font-size: 13px;
|
47 | --ag-icon-font-family: agGridMaterial;
|
48 | --ag-selected-tab-underline-color: var(--ag-material-primary-color);
|
49 | --ag-selected-tab-underline-width: 2px;
|
50 | --ag-input-focus-border-color: var(--ag-material-primary-color);
|
51 | --ag-input-focus-box-shadow: 0 0 0 5px rgba(32, 33, 36, 0.122);
|
52 | --ag-card-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
53 | --ag-card-radius: 2px;
|
54 | --ag-invalid-color: #e02525;
|
55 | }
|
56 |
|
57 | .ag-theme-material .ag-filter-toolpanel-header,
|
58 | .ag-theme-material .ag-filter-toolpanel-search,
|
59 | .ag-theme-material .ag-status-bar,
|
60 | .ag-theme-material .ag-header-row,
|
61 | .ag-theme-material .ag-panel-title-bar-title,
|
62 | .ag-theme-material .ag-multi-filter-group-title-bar {
|
63 | font-size: calc(var(--ag-font-size) - 1px);
|
64 | font-weight: 600;
|
65 | color: var(--ag-header-foreground-color);
|
66 | }
|
67 | .ag-theme-material .ag-tab {
|
68 | height: calc(var(--ag-grid-size) * 4.5);
|
69 | flex: 1 1 auto;
|
70 | }
|
71 | .ag-theme-material .ag-tabs-header,
|
72 | .ag-theme-material .ag-column-drop-horizontal {
|
73 | background-color: var(--ag-subheader-background-color);
|
74 | }
|
75 | .ag-theme-material .ag-tabs-body {
|
76 | padding: calc(var(--ag-grid-size) * 0.5) 0;
|
77 | }
|
78 | .ag-theme-material .ag-tabs-body .ag-menu-list {
|
79 | padding-top: 0;
|
80 | padding-bottom: 0;
|
81 | }
|
82 | .ag-theme-material .ag-header-cell, .ag-theme-material .ag-header-group-cell {
|
83 | transition: background-color 0.5s;
|
84 | }
|
85 | .ag-theme-material .ag-row-last:not(.ag-row-first) .ag-cell-inline-editing {
|
86 | bottom: 0;
|
87 | }
|
88 | .ag-theme-material .ag-cell-inline-editing {
|
89 | padding: var(--ag-grid-size);
|
90 | height: calc(var(--ag-row-height) + var(--ag-grid-size) * 3);
|
91 | border-color: var(--ag-border-color) !important;
|
92 | }
|
93 | .ag-theme-material .ag-has-focus .ag-cell-inline-editing {
|
94 | border-color: var(--ag-input-focus-border-color) !important;
|
95 | }
|
96 | .ag-theme-material .ag-side-button-button {
|
97 | color: var(--ag-foreground-color);
|
98 | }
|
99 | .ag-theme-material .ag-column-drop-vertical {
|
100 | border-bottom: solid 1px;
|
101 | border-bottom-color: var(--ag-border-color);
|
102 | padding-top: var(--ag-grid-size);
|
103 | }
|
104 | .ag-theme-material .ag-column-drop-vertical.ag-last-column-drop {
|
105 | border-bottom: none;
|
106 | }
|
107 | .ag-theme-material .ag-column-drop-vertical-cell {
|
108 | margin-left: 0;
|
109 | }
|
110 | .ag-theme-material .ag-column-drop-vertical-empty-message {
|
111 | font-size: calc(var(--ag-font-size) - 1px);
|
112 | font-weight: 600;
|
113 | color: var(--ag-disabled-foreground-color);
|
114 | }
|
115 | .ag-theme-material .ag-ltr .ag-column-drop-vertical-empty-message {
|
116 | padding-left: calc(var(--ag-icon-size) + var(--ag-grid-size) * 2);
|
117 | padding-right: var(--ag-grid-size);
|
118 | }
|
119 |
|
120 | .ag-theme-material .ag-rtl .ag-column-drop-vertical-empty-message {
|
121 | padding-right: calc(var(--ag-icon-size) + var(--ag-grid-size) * 2);
|
122 | padding-left: var(--ag-grid-size);
|
123 | }
|
124 |
|
125 | .ag-theme-material .ag-status-bar {
|
126 | border: solid 1px;
|
127 | border-color: var(--ag-border-color);
|
128 | }
|
129 | .ag-theme-material .ag-column-panel-column-select {
|
130 | border-top: solid 1px;
|
131 | border-top-color: var(--ag-border-color);
|
132 | }
|
133 | .ag-theme-material .ag-column-select, .ag-theme-material .ag-column-select-header {
|
134 | border-bottom: solid 1px;
|
135 | border-bottom-color: var(--ag-border-color);
|
136 | }
|
137 | .ag-theme-material .ag-column-select-header {
|
138 | height: var(--ag-header-height);
|
139 | }
|
140 | .ag-theme-material .ag-group-title-bar {
|
141 | padding: calc(var(--ag-grid-size) * 0.75) var(--ag-grid-size);
|
142 | }
|
143 | .ag-theme-material .ag-charts-format-sub-level-group-title-bar {
|
144 | padding: calc(var(--ag-grid-size) * 0.5) var(--ag-grid-size);
|
145 | }
|
146 | .ag-theme-material .ag-chart-data-section,
|
147 | .ag-theme-material .ag-chart-format-section {
|
148 | padding-bottom: calc(var(--ag-grid-size) * 0.5);
|
149 | }
|
150 | .ag-theme-material .ag-chart-menu-close {
|
151 | background: var(--ag-background-color);
|
152 | }
|
153 | .ag-theme-material .ag-chart-menu-close .ag-icon {
|
154 | background: var(--ag-subheader-background-color);
|
155 | }
|
156 | .ag-theme-material input[class^=ag-]:not([type]),
|
157 | .ag-theme-material input[class^=ag-][type=text],
|
158 | .ag-theme-material input[class^=ag-][type=number],
|
159 | .ag-theme-material input[class^=ag-][type=tel],
|
160 | .ag-theme-material input[class^=ag-][type=date],
|
161 | .ag-theme-material input[class^=ag-][type=datetime-local],
|
162 | .ag-theme-material textarea[class^=ag-] {
|
163 | background: transparent;
|
164 | color: var(--ag-foreground-color);
|
165 | font-family: inherit;
|
166 | font-size: inherit;
|
167 | height: calc(var(--ag-grid-size) * 5);
|
168 | padding-bottom: var(--ag-grid-size);
|
169 | border-width: 0;
|
170 | border-bottom: 2px solid;
|
171 | border-bottom-color: var(--ag-border-color);
|
172 | }
|
173 | .ag-theme-material input[class^=ag-]:not([type]):focus,
|
174 | .ag-theme-material input[class^=ag-][type=text]:focus,
|
175 | .ag-theme-material input[class^=ag-][type=number]:focus,
|
176 | .ag-theme-material input[class^=ag-][type=tel]:focus,
|
177 | .ag-theme-material input[class^=ag-][type=date]:focus,
|
178 | .ag-theme-material input[class^=ag-][type=datetime-local]:focus,
|
179 | .ag-theme-material textarea[class^=ag-]:focus {
|
180 | border-bottom: 2px solid;
|
181 | border-bottom-color: var(--ag-material-primary-color);
|
182 | outline: none;
|
183 | box-shadow: none;
|
184 | }
|
185 | .ag-theme-material input[class^=ag-]:not([type])::placeholder,
|
186 | .ag-theme-material input[class^=ag-][type=text]::placeholder,
|
187 | .ag-theme-material input[class^=ag-][type=number]::placeholder,
|
188 | .ag-theme-material input[class^=ag-][type=tel]::placeholder,
|
189 | .ag-theme-material input[class^=ag-][type=date]::placeholder,
|
190 | .ag-theme-material input[class^=ag-][type=datetime-local]::placeholder,
|
191 | .ag-theme-material textarea[class^=ag-]::placeholder {
|
192 | color: var(--ag-disabled-foreground-color);
|
193 | }
|
194 | .ag-theme-material input[class^=ag-]:not([type]):disabled,
|
195 | .ag-theme-material input[class^=ag-][type=text]:disabled,
|
196 | .ag-theme-material input[class^=ag-][type=number]:disabled,
|
197 | .ag-theme-material input[class^=ag-][type=tel]:disabled,
|
198 | .ag-theme-material input[class^=ag-][type=date]:disabled,
|
199 | .ag-theme-material input[class^=ag-][type=datetime-local]:disabled,
|
200 | .ag-theme-material textarea[class^=ag-]:disabled {
|
201 | border-bottom: 1px solid;
|
202 | border-bottom-color: var(--ag-border-color);
|
203 | }
|
204 | .ag-theme-material input[class^=ag-]:not([type]):invalid,
|
205 | .ag-theme-material input[class^=ag-][type=text]:invalid,
|
206 | .ag-theme-material input[class^=ag-][type=number]:invalid,
|
207 | .ag-theme-material input[class^=ag-][type=tel]:invalid,
|
208 | .ag-theme-material input[class^=ag-][type=date]:invalid,
|
209 | .ag-theme-material input[class^=ag-][type=datetime-local]:invalid,
|
210 | .ag-theme-material textarea[class^=ag-]:invalid {
|
211 | border-width: 0;
|
212 | border-bottom: 1px solid;
|
213 | border-bottom-color: var(--ag-invalid-color);
|
214 | color: var(--ag-invalid-color);
|
215 | }
|
216 | .ag-theme-material .ag-standard-button {
|
217 | appearance: none;
|
218 | background-color: transparent;
|
219 | border: 0;
|
220 | color: var(--ag-material-primary-color);
|
221 | font-family: inherit;
|
222 | font-size: inherit;
|
223 | margin: 0;
|
224 | padding: 0;
|
225 | text-transform: uppercase;
|
226 | }
|
227 | .ag-theme-material .ag-standard-button:disabled {
|
228 | color: var(--ag-disabled-foreground-color);
|
229 | background-color: var(--ag-input-disabled-background-color);
|
230 | border-color: var(--ag-input-disabled-border-color);
|
231 | }
|
232 | .ag-theme-material.ag-dnd-ghost {
|
233 | font-size: calc(var(--ag-font-size) - 1px);
|
234 | font-weight: 600;
|
235 | }
|
236 | .ag-theme-material .ag-filter-toolpanel-header {
|
237 | height: calc(var(--ag-grid-size) * 4);
|
238 | }
|
239 | .ag-theme-material .ag-filter-toolpanel-group-level-0-header {
|
240 | height: calc(var(--ag-grid-size) * 7);
|
241 | }
|
242 | .ag-theme-material .ag-ltr .ag-filter-apply-panel-button {
|
243 | margin-left: var(--ag-grid-size);
|
244 | }
|
245 |
|
246 | .ag-theme-material .ag-rtl .ag-filter-apply-panel-button {
|
247 | margin-right: var(--ag-grid-size);
|
248 | }
|
249 |
|
250 | .ag-theme-material .ag-layout-auto-height .ag-center-cols-clipper, .ag-theme-material .ag-layout-auto-height .ag-center-cols-container, .ag-theme-material .ag-layout-print .ag-center-cols-clipper, .ag-theme-material .ag-layout-print .ag-center-cols-container {
|
251 | min-height: 150px;
|
252 | }
|
253 | .ag-theme-material .ag-overlay-no-rows-wrapper.ag-layout-auto-height {
|
254 | padding-top: 60px;
|
255 | }
|
256 | .ag-theme-material .ag-picker-field-wrapper:focus {
|
257 | box-shadow: 0 0 0 1px var(--ag-material-primary-color);
|
258 | }
|