UNPKG

8.21 kBSCSSView Raw
1@import "./ag-theme-common";
2
3$foreground-opacity: 0.87 !default;
4$secondary-foreground-color-opacity: 0.54 !default;
5$disabled-foreground-color-opacity: 0.38 !default;
6
7@mixin ag-theme-balham($params) {
8 $border-color: map-get($params, "border-color");
9 $default-background: map-get($params, "default-background");
10 $foreground-color: map-get($params, "foreground-color");
11 $grid-size: map-get($params, "grid-size");
12 $header-background-color: map-get($params, "header-background-color");
13 $header-height: map-get($params, "header-height");
14 $icon-size: map-get($params, "icon-size");
15 $panel-background-color: map-get($params, "panel-background-color");
16 $primary-color: map-get($params, "primary-color");
17 $range-selection-highlight-color: map-get($params, "range-selection-highlight-color");
18 $row-height: map-get($params, "row-height");
19 $selected-color: map-get($params, "selected-color");
20
21 .ag-header,
22 .ag-row,
23 .ag-header-cell,
24 .ag-header-group-cell,
25 .ag-rich-select-value,
26 .ag-root {
27 box-sizing: border-box;
28 }
29
30 %card {
31 border: 1px solid $border-color;
32 }
33
34 %tab {
35 border: 1px solid transparent;
36 border-bottom-width: 0;
37 display: inline-block;
38 margin: $grid-size;
39 margin-bottom: 0;
40 padding: $grid-size $grid-size * 2;
41 }
42
43 %selected-tab {
44 background-color: $default-background;
45 border-bottom: 2px solid $primary-color;
46 border-bottom: 2px solid $default-background;
47 border-color: $border-color;
48 }
49
50 @include ag-grid-theme($params);
51
52 .ag-header {
53 background-color: $header-background-color;
54 border-bottom: 1px solid $border-color;
55 }
56
57 .ag-cell-highlight {
58 background-color: $range-selection-highlight-color !important;
59 }
60
61 .ag-header-cell-resize {
62 right: -($grid-size) + 1px;
63 }
64
65 .ag-rtl .ag-header .ag-header-cell-resize {
66 left: -($grid-size);
67 }
68
69 .ag-header-cell-resize::after {
70 height: $header-height - $grid-size * 4;
71 margin-top: $grid-size * 2;
72 }
73
74 .ag-header-cell::after,
75 .ag-header-group-cell::after {
76 border-right: 1px solid transparentize($border-color, 0.5);
77 content: " ";
78 height: $header-height - $grid-size * 4;
79 margin-top: $grid-size * 2;
80 position: absolute;
81 right: 0;
82 text-indent: -2000px;
83 top: 0;
84 }
85
86 .ag-column-drop-horizontal.ag-column-drop {
87 border: 1px solid $border-color;
88 border-bottom: 0;
89 }
90
91 .ag-column-drop-horizontal.ag-column-drop.ag-width-half:first-child {
92 border-right: 0;
93 }
94
95 .ag-row {
96 border-bottom-color: lighten($border-color, 10);
97 }
98
99 .ag-row-selected {
100 border-bottom-color: $selected-color;
101 }
102
103 .ag-row-drag {
104 background-position-y: center;
105 }
106
107 .ag-column-drag {
108 background-position-y: center;
109 }
110
111 .ag-column-drop-cell {
112 height: $grid-size * 6 !important;
113
114 .ag-column-drop-cell-button {
115 box-sizing: border-box;
116 height: calc(100% - #{$grid-size});
117 margin-bottom: $grid-size / 2;
118 margin-top: $grid-size / 2;
119 }
120
121 .ag-column-drop-cell-button:hover {
122 opacity: 1;
123 // border: 1px solid $border-color;
124 }
125 }
126
127 .ag-column-drop-vertical .ag-column-drop-cell {
128 margin-left: $grid-size * 2;
129 margin-right: $grid-size * 2;
130
131 .ag-column-drop-cell-text {
132 line-height: $grid-size * 6;
133 margin-left: $grid-size * 2;
134 }
135 }
136
137 .ag-column-drop-horizontal {
138 background-color: $panel-background-color;
139 height: $header-height;
140
141 .ag-column-drop-empty-message {
142 line-height: $header-height;
143 }
144
145 .ag-column-drop-cell-text {
146 line-height: $grid-size * 6;
147 margin-left: $grid-size * 2;
148 }
149 }
150
151 .ag-filter .ag-filter-header-container {
152 height: $grid-size * 6;
153 }
154
155 .ag-root {
156 border: 1px solid $border-color;
157 }
158
159 // bootstrap overrides
160 .ag-tab {
161 box-sizing: initial;
162 }
163
164 .ag-filter .ag-filter-value {
165 line-height: $icon-size + $grid-size;
166 }
167
168 // tool panel
169 .ag-column-panel {
170 border-right: 1px solid $border-color;
171 border-bottom: 1px solid $border-color;
172
173 .ag-column-select-panel {
174 padding-bottom: $grid-size * 2;
175
176 .ag-column-select-column-group,
177 .ag-column-select-column {
178 height: $grid-size * 5;
179 line-height: $grid-size * 5;
180 }
181 }
182
183 .ag-column-drop {
184 padding-bottom: $grid-size * 2;
185 padding-top: $grid-size * 2;
186
187 .ag-icon {
188 margin-bottom: $grid-size;
189 }
190
191 .ag-column-drop-title {
192 display: inline-block;
193 float: none;
194 margin-bottom: $grid-size;
195 }
196
197 .ag-column-drop-empty-message {
198 height: $grid-size * 4;
199 line-height: $grid-size * 4;
200 padding-left: $icon-size + $grid-size * 2;
201 }
202 }
203 }
204
205 .ag-rtl .ag-tool-panel,
206 .ag-rtl .ag-column-panel {
207 border-left: 1px solid $border-color;
208 border-right: 0;
209 }
210
211 // real crude adjustments, due to line of elements with display: inline-block in the group cell
212 .ag-icon-expanded,
213 .ag-icon-contracted {
214 transform: translateY(2px);
215 }
216
217 .ag-rtl .ag-icon-expanded {
218 transform: translateY(2px) rotate(180deg);
219 }
220
221 // context menu spacing
222 .ag-menu-option {
223 height: $grid-size * 7;
224 line-height: $grid-size * 7;
225 }
226
227 .ag-column-select-panel {
228 .ag-column-select-column-group,
229 .ag-column-select-column {
230 height: $grid-size * 5;
231 line-height: $grid-size * 5;
232 }
233 }
234
235 .ag-filter-filter {
236 margin-left: $grid-size;
237 margin-right: $grid-size;
238 width: calc(100% - #{$grid-size * 2});
239 }
240
241 .ag-tab-header {
242 border-bottom: 1px solid $border-color;
243
244 .ag-tab {
245 margin-bottom: -2px;
246 }
247
248 .ag-tab.ag-tab-selected {
249 background-color: $default-background;
250 border-bottom-color: transparent;
251 }
252 }
253
254 .ag-tab-body,
255 .ag-popup-editor,
256 .ag-menu {
257 background-color: $default-background;
258 color: $foreground-color;
259 }
260
261 .ag-cell-inline-editing {
262 height: $row-height;
263 padding: 0;
264
265 input {
266 box-sizing: border-box;
267 }
268 }
269
270 .ag-details-row {
271 background-color: $default-background;
272 }
273
274 .ag-overlay-loading-wrapper {
275 background-color: rgba(255, 255, 255, 0.5);
276 }
277
278 .ag-overlay-loading-center {
279 background-color: #fff;
280 border: 1px solid $border-color;
281 color: $foreground-color;
282 padding: $grid-size * 4;
283 }
284
285 $ag-range-selected-color-1: map-get($params, "ag-range-selected-color-1");
286 $ag-range-selected-color-2: map-get($params, "ag-range-selected-color-2");
287 $ag-range-selected-color-3: map-get($params, "ag-range-selected-color-3");
288 $ag-range-selected-color-4: map-get($params, "ag-range-selected-color-4");
289
290 // we do not want to color the range color when the cell is also focused
291 .ag-cell-range-selected-1:not(.ag-cell-focus) {
292 background-color: $ag-range-selected-color-1;
293 }
294
295 .ag-cell-range-selected-2:not(.ag-cell-focus) {
296 background-color: $ag-range-selected-color-2;
297 }
298
299 .ag-cell-range-selected-3:not(.ag-cell-focus) {
300 background-color: $ag-range-selected-color-3;
301 }
302
303 .ag-cell-range-selected-4:not(.ag-cell-focus) {
304 background-color: $ag-range-selected-color-4;
305 }
306
307 .ag-rich-select-value {
308 border-bottom: 1px solid $border-color;
309 }
310
311 .ag-filter-apply-panel {
312 border-top: 1px solid $border-color;
313 }
314
315 .ag-header-cell-moving {
316 background-color: $default-background;
317 }
318}