1 | @import "./ag-theme-common";
|
2 | @import "./material-legacy-var-names";
|
3 |
|
4 |
|
5 | $mat-grey-0: #fff;
|
6 | $mat-grey-50: #fafafa;
|
7 | $mat-grey-100: #f5f5f5;
|
8 | $mat-grey-200: #eee;
|
9 | $mat-grey-300: #e0e0e0;
|
10 |
|
11 |
|
12 | $mat-indigo-500: #3f51b5;
|
13 | $mat-pink-A200: #ff4081;
|
14 | $mat-pink-50: #fce4ec;
|
15 | $mat-indigo-50: #e8eaf6;
|
16 |
|
17 |
|
18 | $foreground-opacity: 0.87 !default;
|
19 | $secondary-foreground-color-opacity: 0.54 !default;
|
20 | $disabled-foreground-color-opacity: 0.38 !default;
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 | $grid-size: 8px !default;
|
28 | $icon-size: 18px !default;
|
29 | $header-height: $grid-size * 7 !default;
|
30 | $row-height: $grid-size * 6 !default;
|
31 | $toolpanel-indent-size: $grid-size + $icon-size !default;
|
32 | $row-group-indent-size: $grid-size * 3 + $icon-size !default;
|
33 | $cell-horizontal-padding: $grid-size * 3 !default;
|
34 | $virtual-item-height: $grid-size * 5;
|
35 | $header-icon-size: 14px !default;
|
36 |
|
37 |
|
38 | $icons-path: "./material-icons/" !default;
|
39 |
|
40 |
|
41 | $font-family: "Roboto", sans-serif !default;
|
42 | $font-size: 13px !default;
|
43 | $font-weight: 400 !default;
|
44 |
|
45 | $secondary-font-family: "Roboto", sans-serif !default;
|
46 | $secondary-font-size: 12px !default;
|
47 | $secondary-font-weight: 700 !default;
|
48 |
|
49 |
|
50 | $foreground-color: rgba(#000, $foreground-opacity) !default;
|
51 | $secondary-foreground-color: rgba(#000, $secondary-foreground-color-opacity) !default;
|
52 | $disabled-foreground-color: rgba(#000, $disabled-foreground-color-opacity) !default;
|
53 |
|
54 | $border-color: $mat-grey-300 !default;
|
55 |
|
56 | $primary-color: $mat-indigo-500 !default;
|
57 |
|
58 | $accent-color: $mat-pink-A200 !default;
|
59 | $icon-color: #333 !default;
|
60 |
|
61 | $background-color: $mat-grey-0 !default;
|
62 |
|
63 | $editor-background-color: $mat-grey-100 !default;
|
64 |
|
65 | $panel-background-color: $mat-grey-200 !default;
|
66 |
|
67 | $tool-panel-background-color: $mat-grey-50 !default;
|
68 |
|
69 | $chip-background-color: $mat-grey-300 !default;
|
70 |
|
71 | $range-selection-background-color: $mat-indigo-50 !default;
|
72 | $range-selection-highlight-color: $mat-pink-50 !default;
|
73 |
|
74 | $hover-color: $mat-grey-200 !default;
|
75 |
|
76 | $selected-color: $mat-grey-100 !default;
|
77 |
|
78 | $cell-data-changed-color: $mat-pink-50 !default;
|
79 |
|
80 |
|
81 | $transition-speed: 120ms !default;
|
82 | $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);
|
83 | $card-radius: 2px;
|
84 |
|
85 |
|
86 | $value-change-delta-up-color: #43a047 !default;
|
87 | $value-change-delta-down-color: #e53935 !default;
|
88 | $value-change-value-highlight-background-color: #00acc1 !default;
|
89 |
|
90 | $params: (
|
91 | grid-size: $grid-size,
|
92 | icon-size: $icon-size,
|
93 | header-icon-size: $header-icon-size,
|
94 | row-height: $row-height,
|
95 | header-height: $header-height,
|
96 | virtual-item-height: $virtual-item-height,
|
97 | rich-select-item-height: $row-height,
|
98 | cell-horizontal-padding: $cell-horizontal-padding,
|
99 | toolpanel-indent-size: $toolpanel-indent-size,
|
100 | row-group-indent-size: $row-group-indent-size,
|
101 | icons-path: $icons-path,
|
102 | font-family: $font-family,
|
103 | font-size: $font-size,
|
104 | font-weight: $font-weight,
|
105 | secondary-font-family: $secondary-font-family,
|
106 | secondary-font-size: $secondary-font-size,
|
107 | secondary-font-weight: $secondary-font-weight,
|
108 | foreground-color: $foreground-color,
|
109 | foreground-opacity: $foreground-opacity,
|
110 | secondary-foreground-color-opacity: $secondary-foreground-color-opacity,
|
111 | secondary-foreground-color: $secondary-foreground-color,
|
112 | disabled-foreground-color-opacity: $disabled-foreground-color-opacity,
|
113 | disabled-foreground-color: $disabled-foreground-color,
|
114 | background-color: $background-color,
|
115 | border-color: $border-color,
|
116 | button-background-color: transparent,
|
117 | icon-color: $icon-color,
|
118 | cell-data-changed-color: $cell-data-changed-color,
|
119 | chip-background-color: $chip-background-color,
|
120 | card-background-color: $background-color,
|
121 | editor-background-color-color: $editor-background-color,
|
122 | range-selection-background-color: $range-selection-background-color,
|
123 | range-selection-highlight-color: $range-selection-highlight-color,
|
124 | panel-background-color: $panel-background-color,
|
125 | tool-panel-background-color: $tool-panel-background-color,
|
126 | accent-color: $accent-color,
|
127 | primary-color: $primary-color,
|
128 | hover-color: $hover-color,
|
129 | selected-color: $selected-color,
|
130 | icon-opacity: $foreground-opacity,
|
131 | button-text-transform: uppercase,
|
132 | card-radius: $card-radius,
|
133 | card-shadow: $card-shadow,
|
134 | focused-textbox-border: 2px solid $primary-color,
|
135 | input-border-width: 0,
|
136 | input-bottom-border: 1px solid $border-color,
|
137 | input-height: $grid-size * 3,
|
138 | use-icons-for-pager-buttons: true,
|
139 | customize-inputs: true,
|
140 | customize-buttons: true,
|
141 | full-width-tabs: true,
|
142 | value-change-delta-up-color: $value-change-delta-up-color,
|
143 | value-change-delta-down-color: $value-change-delta-down-color,
|
144 | value-change-value-highlight-background-color: $value-change-value-highlight-background-color
|
145 | );
|
146 |
|
147 | .ag-theme-material {
|
148 | %selected-tab {
|
149 | border-bottom: 2px solid $primary-color;
|
150 | }
|
151 |
|
152 | @include ag-grid-theme($params);
|
153 |
|
154 | .ag-cell-highlight {
|
155 | background-color: $range-selection-highlight-color !important;
|
156 | }
|
157 |
|
158 | .ag-cell-highlight-animation {
|
159 | transition: background-color 1s;
|
160 | }
|
161 |
|
162 | .ag-row-drag {
|
163 | background-position-y: center;
|
164 | }
|
165 |
|
166 | .ag-column-drag {
|
167 | background-position-y: center;
|
168 | }
|
169 |
|
170 | .ag-header-cell-resize {
|
171 | right: -($grid-size) + 1px;
|
172 | }
|
173 |
|
174 |
|
175 | .ag-cell-range-selected-1:not(.ag-cell-focus) {
|
176 | background-color: $range-selection-background-color;
|
177 | }
|
178 |
|
179 | .ag-cell-range-selected-2:not(.ag-cell-focus) {
|
180 | background-color: darken($range-selection-background-color, 4);
|
181 | }
|
182 |
|
183 | .ag-cell-range-selected-3:not(.ag-cell-focus) {
|
184 | background-color: darken($range-selection-background-color, 8);
|
185 | }
|
186 |
|
187 | .ag-cell-range-selected-4:not(.ag-cell-focus) {
|
188 | background-color: darken($range-selection-background-color, 12);
|
189 | }
|
190 |
|
191 | .ag-tool-panel {
|
192 | border-bottom: 0;
|
193 | border-right: 0;
|
194 | border-top: 0;
|
195 |
|
196 | .ag-side-buttons button {
|
197 | border: 0;
|
198 | color: $secondary-foreground-color;
|
199 | font-family: $secondary-font-family;
|
200 | font-size: $secondary-font-size;
|
201 | font-weight: $secondary-font-weight;
|
202 | }
|
203 | }
|
204 | }
|