@ngx-stoui/core 21.0.6 → 21.0.7
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/fesm2022/ngx-stoui-core.mjs +62 -62
- package/fesm2022/ngx-stoui-core.mjs.map +1 -1
- package/ngx-stoui.css +178 -21
- package/package.json +3 -2
- package/styles/toolbox-grid/_toolbox-grid.scss +395 -576
- package/toolbox-grid.css +310 -510
package/toolbox-grid.css
CHANGED
|
@@ -2,93 +2,80 @@
|
|
|
2
2
|
/**
|
|
3
3
|
* EDS (Equinor Design System) Theme for @toolbox-web/grid
|
|
4
4
|
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* Supports both light and dark modes using the light-dark() CSS function.
|
|
9
|
-
* Uses EDS CSS variables (--eds_*) when available (Roma) with light-dark()
|
|
10
|
-
* fallbacks for apps that don't expose EDS tokens (Angular/cargo-tracker).
|
|
11
|
-
* Dark mode activates when body.sto-dark-theme is present.
|
|
5
|
+
* Styles the toolbox grid to match Equinor's design system.
|
|
6
|
+
* Supports light/dark modes via the light-dark() CSS function.
|
|
7
|
+
* Uses EDS CSS variables (--eds_*) when available, with light-dark() fallbacks.
|
|
12
8
|
*
|
|
13
9
|
* Reference: https://eds.equinor.com/
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
* Requires @toolbox-web/grid v1.3.1+ for full CSS variable support.
|
|
10
|
+
* Grid Theming: https://toolboxjs.com/?path=/docs/grid-theming--docs
|
|
11
|
+
* Requires @toolbox-web/grid v1.3.1+
|
|
17
12
|
*
|
|
18
|
-
* Usage:
|
|
19
|
-
* In angular.json / project.json styles array:
|
|
20
|
-
* "@ngx-stoui/core/toolbox-grid.css"
|
|
13
|
+
* Usage: "@ngx-stoui/core/toolbox-grid.css" in project.json styles array
|
|
21
14
|
*/
|
|
22
|
-
|
|
23
|
-
*
|
|
24
|
-
* Override the grid's CSS variables to match EDS design tokens
|
|
15
|
+
/* ================================================================
|
|
16
|
+
* 1. Theme Variables
|
|
25
17
|
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
|
|
18
|
+
* Shared by tbw-grid and body-level panels (.tbw-filter-panel).
|
|
19
|
+
* Internal aliases (--_*) reduce repetition of EDS token + fallback pairs.
|
|
20
|
+
*
|
|
21
|
+
* NOTE: As of v1.3.1, the grid copies theme classes to filter panels
|
|
22
|
+
* rendered in document.body, so these variables cascade properly.
|
|
23
|
+
* ================================================================ */
|
|
29
24
|
tbw-grid,
|
|
30
25
|
.tbw-filter-panel {
|
|
31
|
-
/*
|
|
32
|
-
--
|
|
33
|
-
--
|
|
34
|
-
--
|
|
35
|
-
--tbw-font-weight-header: 700;
|
|
36
|
-
/* ========== Core Colors ========== */
|
|
37
|
-
--tbw-color-bg: var(
|
|
38
|
-
--eds_ui_background__default,
|
|
39
|
-
light-dark(#ffffff, #132634)
|
|
40
|
-
);
|
|
41
|
-
--tbw-color-fg: var(
|
|
42
|
-
--eds_text_static_icons__default,
|
|
43
|
-
light-dark(#3d3d3d, #ffffff)
|
|
44
|
-
);
|
|
45
|
-
--tbw-color-fg-muted: var(
|
|
26
|
+
/* --- EDS Token Aliases (cascade to all children) --- */
|
|
27
|
+
--_bg: var(--eds_ui_background__default, light-dark(#ffffff, #132634));
|
|
28
|
+
--_fg: var(--eds_text_static_icons__default, light-dark(#3d3d3d, #ffffff));
|
|
29
|
+
--_fg-muted: var(
|
|
46
30
|
--eds_text_static_icons__tertiary,
|
|
47
31
|
light-dark(#6f6f6f, #9ca6ac)
|
|
48
32
|
);
|
|
49
|
-
--
|
|
50
|
-
|
|
51
|
-
|
|
33
|
+
--_border: var(--eds_ui_background__medium, light-dark(#dcdcdc, #3e4f5c));
|
|
34
|
+
--_surface: var(--eds_ui_background__light, light-dark(#f7f7f7, #2e3f4d));
|
|
35
|
+
--_accent: var(
|
|
36
|
+
--eds_interactive_primary__resting,
|
|
37
|
+
light-dark(#007079, #97cace)
|
|
52
38
|
);
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
light-dark(#dcdcdc, #3e4f5c)
|
|
39
|
+
--_accent-fg: var(
|
|
40
|
+
--eds_text_static_icons__primary_white,
|
|
41
|
+
light-dark(#ffffff, #000000)
|
|
57
42
|
);
|
|
58
|
-
--
|
|
59
|
-
--
|
|
60
|
-
light-dark(#
|
|
43
|
+
--_hover: var(
|
|
44
|
+
--eds_interactive_table__cell__fill_hover,
|
|
45
|
+
light-dark(#eaeaea, #324d62)
|
|
61
46
|
);
|
|
62
|
-
--
|
|
63
|
-
|
|
47
|
+
--_focus: var(--eds_interactive_focus, light-dark(#007079, #97cace));
|
|
48
|
+
--_radius: var(--eds_shape_button_border_radius, 4px);
|
|
49
|
+
/* --- Typography --- */
|
|
50
|
+
--tbw-font-family: Equinor, sans-serif;
|
|
51
|
+
--tbw-font-size: var(--sto-base-font-size, 13px);
|
|
52
|
+
--tbw-font-size-header: var(--sto-base-font-size, 13px);
|
|
53
|
+
--tbw-font-weight-header: 700;
|
|
54
|
+
/* --- Colors --- */
|
|
55
|
+
--tbw-color-bg: var(--_bg);
|
|
56
|
+
--tbw-color-fg: var(--_fg);
|
|
57
|
+
--tbw-color-fg-muted: var(--_fg-muted);
|
|
58
|
+
--tbw-color-panel-bg: var(--_surface);
|
|
59
|
+
/* --- Borders --- */
|
|
60
|
+
--tbw-color-border: var(--_border);
|
|
61
|
+
--tbw-color-border-strong: var(--_border);
|
|
62
|
+
--tbw-row-divider: 1px solid var(--_border);
|
|
64
63
|
--tbw-color-border-cell: transparent;
|
|
65
|
-
--tbw-color-border-header: var(
|
|
66
|
-
|
|
67
|
-
light-dark(#dcdcdc, #3e4f5c)
|
|
68
|
-
);
|
|
69
|
-
--tbw-border-radius: var(--eds_shape_button_border_radius, 4px);
|
|
64
|
+
--tbw-color-border-header: var(--_border);
|
|
65
|
+
--tbw-border-radius: var(--_radius);
|
|
70
66
|
--tbw-selection-border-style: dashed;
|
|
71
67
|
--tbw-selection-border-width: 1px;
|
|
72
|
-
/*
|
|
68
|
+
/* --- Header --- */
|
|
73
69
|
--tbw-color-header-bg: var(
|
|
74
70
|
--eds_interactive_table__header__fill_resting,
|
|
75
71
|
light-dark(#f7f7f7, #2e3f4d)
|
|
76
72
|
);
|
|
77
|
-
--tbw-color-header-fg: var(
|
|
78
|
-
--eds_text_static_icons__default,
|
|
79
|
-
light-dark(#3d3d3d, #ffffff)
|
|
80
|
-
);
|
|
73
|
+
--tbw-color-header-fg: var(--_fg);
|
|
81
74
|
--tbw-header-text-transform: none;
|
|
82
75
|
--tbw-header-letter-spacing: normal;
|
|
83
|
-
/*
|
|
84
|
-
--tbw-color-row-alt: var(
|
|
85
|
-
|
|
86
|
-
light-dark(#ffffff, #132634)
|
|
87
|
-
);
|
|
88
|
-
--tbw-color-row-hover: var(
|
|
89
|
-
--eds_interactive_table__cell__fill_hover,
|
|
90
|
-
light-dark(#eaeaea, #324d62)
|
|
91
|
-
);
|
|
76
|
+
/* --- Row & Cell States --- */
|
|
77
|
+
--tbw-color-row-alt: var(--_bg);
|
|
78
|
+
--tbw-color-row-hover: var(--_hover);
|
|
92
79
|
--tbw-color-selection: var(
|
|
93
80
|
--eds_interactive_primary__selected_highlight,
|
|
94
81
|
light-dark(#e6faec, #007079)
|
|
@@ -98,212 +85,139 @@ tbw-grid,
|
|
|
98
85
|
light-dark(#e6faec, #243746)
|
|
99
86
|
);
|
|
100
87
|
--tbw-editing-row-outline-width: 1px;
|
|
101
|
-
/*
|
|
102
|
-
--tbw-color-accent: var(
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
--
|
|
108
|
-
|
|
88
|
+
/* --- Accent --- */
|
|
89
|
+
--tbw-color-accent: var(--_accent);
|
|
90
|
+
--tbw-color-accent-fg: var(--_accent-fg);
|
|
91
|
+
/* --- Dimensions --- */
|
|
92
|
+
--tbw-row-height: var(
|
|
93
|
+
--eds_clickbound_default__base,
|
|
94
|
+
calc(var(--sto-base-font-size, 13px) * 2.923)
|
|
95
|
+
);
|
|
96
|
+
--tbw-header-height: var(
|
|
97
|
+
--eds_clickbound_default__base,
|
|
98
|
+
calc(var(--sto-base-font-size, 13px) * 2.923)
|
|
109
99
|
);
|
|
110
|
-
/* ========== Dimensions ========== */
|
|
111
|
-
--tbw-row-height: var(--eds_clickbound_default__base, 38px);
|
|
112
|
-
--tbw-header-height: var(--eds_clickbound_default__base, 38px);
|
|
113
100
|
--tbw-cell-padding: 0 var(--eds_spacing_medium, 8px);
|
|
114
101
|
--tbw-cell-padding-header: 0 var(--eds_spacing_medium, 8px);
|
|
115
102
|
--tbw-button-padding: 0.375rem 0.625rem;
|
|
116
|
-
/*
|
|
117
|
-
--tbw-focus-outline: 0.5px dotted
|
|
118
|
-
var(--eds_interactive_focus, light-dark(#007079, #97cace));
|
|
103
|
+
/* --- Focus --- */
|
|
104
|
+
--tbw-focus-outline: 0.5px dotted var(--_focus);
|
|
119
105
|
--tbw-focus-outline-offset: -1px;
|
|
120
|
-
/*
|
|
106
|
+
/* --- Resize Handle --- */
|
|
121
107
|
--tbw-resize-handle-color: transparent;
|
|
122
|
-
--tbw-resize-handle-color-hover: var(
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
);
|
|
126
|
-
/* ========== Sort Indicator ========== */
|
|
127
|
-
--tbw-sort-indicator-color: var(
|
|
128
|
-
--eds_text_static_icons__tertiary,
|
|
129
|
-
light-dark(#6f6f6f, #9ca6ac)
|
|
130
|
-
);
|
|
131
|
-
--tbw-sort-indicator-active-color: var(
|
|
132
|
-
--eds_interactive_primary__resting,
|
|
133
|
-
light-dark(#007079, #97cace)
|
|
134
|
-
);
|
|
135
|
-
/* ========== Display Control (v1.5.0+) ========== */
|
|
136
|
-
/* Hide filter button and sort indicator by default, show on hover/active */
|
|
108
|
+
--tbw-resize-handle-color-hover: var(--_accent);
|
|
109
|
+
/* --- Sort & Filter Display (v1.5.0+) --- */
|
|
110
|
+
--tbw-sort-indicator-color: var(--_fg-muted);
|
|
111
|
+
--tbw-sort-indicator-active-color: var(--_accent);
|
|
137
112
|
--tbw-filter-btn-display: none;
|
|
138
113
|
--tbw-sort-indicator-display: none;
|
|
139
|
-
/*
|
|
114
|
+
/* --- Shadows --- */
|
|
140
115
|
--tbw-color-shadow: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
|
|
141
|
-
/*
|
|
142
|
-
--tbw-filter-panel-bg: var(
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
);
|
|
146
|
-
--tbw-filter-panel-fg: var(
|
|
147
|
-
--eds_text_static_icons__default,
|
|
148
|
-
light-dark(#3d3d3d, #ffffff)
|
|
149
|
-
);
|
|
150
|
-
--tbw-filter-panel-border: var(
|
|
151
|
-
--eds_ui_background__medium,
|
|
152
|
-
light-dark(#dcdcdc, #3e4f5c)
|
|
153
|
-
);
|
|
154
|
-
--tbw-filter-panel-radius: var(--eds_shape_button_border_radius, 4px);
|
|
116
|
+
/* --- Filter Panel Variables --- */
|
|
117
|
+
--tbw-filter-panel-bg: var(--_bg);
|
|
118
|
+
--tbw-filter-panel-fg: var(--_fg);
|
|
119
|
+
--tbw-filter-panel-border: var(--_border);
|
|
120
|
+
--tbw-filter-panel-radius: var(--_radius);
|
|
155
121
|
--tbw-filter-panel-shadow: light-dark(
|
|
156
122
|
rgba(0, 0, 0, 0.15),
|
|
157
123
|
rgba(0, 0, 0, 0.4)
|
|
158
124
|
);
|
|
159
|
-
--tbw-filter-input-bg: var(
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
);
|
|
163
|
-
--tbw-filter-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
);
|
|
167
|
-
--tbw-filter-
|
|
168
|
-
--tbw-filter-
|
|
169
|
-
|
|
170
|
-
light-dark(#007079, #97cace)
|
|
171
|
-
);
|
|
172
|
-
--tbw-filter-accent: var(
|
|
173
|
-
--eds_interactive_primary__resting,
|
|
174
|
-
light-dark(#007079, #97cace)
|
|
175
|
-
);
|
|
176
|
-
--tbw-filter-accent-fg: var(
|
|
177
|
-
--eds_text_static_icons__primary_white,
|
|
178
|
-
light-dark(#ffffff, #000000)
|
|
179
|
-
);
|
|
180
|
-
--tbw-filter-hover: var(
|
|
181
|
-
--eds_ui_background__light,
|
|
182
|
-
light-dark(#f7f7f7, #2e3f4d)
|
|
183
|
-
);
|
|
184
|
-
--tbw-filter-muted: var(
|
|
185
|
-
--eds_text_static_icons__tertiary,
|
|
186
|
-
light-dark(#6f6f6f, #9ca6ac)
|
|
187
|
-
);
|
|
188
|
-
--tbw-filter-divider: var(
|
|
189
|
-
--eds_ui_background__medium,
|
|
190
|
-
light-dark(#dcdcdc, #3e4f5c)
|
|
191
|
-
);
|
|
192
|
-
--tbw-filter-active-color: var(
|
|
193
|
-
--eds_interactive_primary__resting,
|
|
194
|
-
light-dark(#007079, #97cace)
|
|
195
|
-
);
|
|
196
|
-
/* ========== Filter Button Styling (v1.3.1+) ========== */
|
|
125
|
+
--tbw-filter-input-bg: var(--_bg);
|
|
126
|
+
--tbw-filter-input-border: var(--_border);
|
|
127
|
+
--tbw-filter-input-radius: var(--_radius);
|
|
128
|
+
--tbw-filter-input-focus: var(--_focus);
|
|
129
|
+
--tbw-filter-accent: var(--_accent);
|
|
130
|
+
--tbw-filter-accent-fg: var(--_accent-fg);
|
|
131
|
+
--tbw-filter-hover: var(--_surface);
|
|
132
|
+
--tbw-filter-muted: var(--_fg-muted);
|
|
133
|
+
--tbw-filter-divider: var(--_border);
|
|
134
|
+
--tbw-filter-active-color: var(--_accent);
|
|
135
|
+
/* --- Filter Button (v1.3.1+) --- */
|
|
197
136
|
--tbw-filter-btn-padding: 8px 16px;
|
|
198
137
|
--tbw-filter-btn-font-weight: 500;
|
|
199
138
|
--tbw-filter-btn-min-height: var(--eds_clickbound_default__base, 48px);
|
|
200
139
|
--tbw-filter-search-padding: 6px 8px;
|
|
201
|
-
--tbw-filter-item-height: 36px;
|
|
202
|
-
/*
|
|
140
|
+
--tbw-filter-item-height: 36px;
|
|
141
|
+
/* --- Panel Layout --- */
|
|
203
142
|
--tbw-panel-padding: var(--eds_spacing_medium_small, 12px);
|
|
204
143
|
--tbw-panel-gap: var(--eds_spacing_small, 8px);
|
|
205
144
|
--tbw-animation-duration: 150ms;
|
|
206
145
|
}
|
|
207
146
|
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
light-dark(#3d3d3d, #ffffff)
|
|
217
|
-
);
|
|
218
|
-
--tbw-context-menu-border: var(
|
|
219
|
-
--eds_ui_background__medium,
|
|
220
|
-
light-dark(#dcdcdc, #3e4f5c)
|
|
221
|
-
);
|
|
222
|
-
--tbw-context-menu-hover: var(
|
|
223
|
-
--eds_interactive_table__cell__fill_hover,
|
|
224
|
-
light-dark(#eaeaea, #324d62)
|
|
225
|
-
);
|
|
226
|
-
--tbw-context-menu-danger: var(--eds_interactive_danger__resting, #eb0000);
|
|
227
|
-
--tbw-context-menu-muted: var(
|
|
228
|
-
--eds_text_static_icons__tertiary,
|
|
229
|
-
light-dark(#6f6f6f, #9ca6ac)
|
|
230
|
-
);
|
|
231
|
-
--tbw-context-menu-font-size: 0.873rem;
|
|
232
|
-
--tbw-context-menu-font-family: Equinor, sans-serif;
|
|
233
|
-
--tbw-context-menu-icon-size: 1.2rem;
|
|
234
|
-
--tbw-context-menu-item-padding: 8px 16px;
|
|
235
|
-
--tbw-context-menu-item-gap: 8px;
|
|
236
|
-
--tbw-context-menu-radius: var(--eds_shape_button_border_radius, 4px);
|
|
237
|
-
--tbw-context-menu-shadow: 0 2px 8px
|
|
238
|
-
light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.3));
|
|
147
|
+
/* ================================================================
|
|
148
|
+
* 2. Grid Styles
|
|
149
|
+
*
|
|
150
|
+
* All tbw-grid-scoped rules: compact mode, cell styling,
|
|
151
|
+
* editor hosts, and Angular Material overrides.
|
|
152
|
+
* ================================================================ */
|
|
153
|
+
tbw-grid {
|
|
154
|
+
/* --- Compact Mode --- */
|
|
239
155
|
}
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
border-radius: 4px;
|
|
244
|
-
padding: 2px 6px;
|
|
245
|
-
font-family: "Equinor Mono", "Consolas", "Courier New", monospace;
|
|
246
|
-
font-size: 0.75rem;
|
|
247
|
-
line-height: 1.4;
|
|
156
|
+
tbw-grid.eds-compact {
|
|
157
|
+
--tbw-row-height: calc(var(--sto-base-font-size, 13px) * 1.385);
|
|
158
|
+
--tbw-header-height: calc(var(--sto-base-font-size, 13px) * 1.769);
|
|
248
159
|
}
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
--
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
--
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
);
|
|
260
|
-
--tbw-overlay-shadow: 0 4px 12px
|
|
261
|
-
light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
|
|
262
|
-
color: var(--eds_text_static_icons__default, light-dark(#3d3d3d, #ffffff));
|
|
160
|
+
tbw-grid {
|
|
161
|
+
/* --- Angular Material overrides for in-grid editors --- */
|
|
162
|
+
--mat-checkbox-state-layer-size: 20px;
|
|
163
|
+
--mdc-filled-text-field-container-color: transparent;
|
|
164
|
+
--mdc-filled-text-field-active-indicator-color: transparent;
|
|
165
|
+
--mdc-filled-text-field-hover-active-indicator-color: transparent;
|
|
166
|
+
--mdc-filled-text-field-focus-active-indicator-color: transparent;
|
|
167
|
+
--mdc-outlined-text-field-outline-color: transparent;
|
|
168
|
+
--mdc-outlined-text-field-focus-outline-color: transparent;
|
|
169
|
+
--mdc-outlined-text-field-hover-outline-color: transparent;
|
|
263
170
|
}
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
.eds-compact tbw-grid {
|
|
271
|
-
--tbw-row-height: 18px;
|
|
272
|
-
--tbw-header-height: 23px;
|
|
171
|
+
tbw-grid .mat-mdc-icon-button.mat-mdc-button-base {
|
|
172
|
+
--mdc-icon-button-state-layer-size: 28px;
|
|
173
|
+
--mat-icon-button-state-layer-size: 28px;
|
|
174
|
+
}
|
|
175
|
+
tbw-grid {
|
|
176
|
+
/* --- Toolbar --- */
|
|
273
177
|
}
|
|
274
|
-
|
|
275
|
-
/**
|
|
276
|
-
* Additional styling that can't be done with variables alone
|
|
277
|
-
*/
|
|
278
|
-
/* Toolbar content slot alignment */
|
|
279
178
|
tbw-grid .tbw-toolbar-content-slot {
|
|
280
179
|
display: flex;
|
|
281
180
|
place-items: center;
|
|
282
181
|
}
|
|
283
|
-
|
|
284
|
-
|
|
182
|
+
tbw-grid {
|
|
183
|
+
/* --- Filter button icon --- */
|
|
184
|
+
}
|
|
185
|
+
tbw-grid .tbw-filter-btn .material-icons-outlined {
|
|
186
|
+
font-size: 1.2em;
|
|
187
|
+
width: 1.2em;
|
|
188
|
+
height: 1.2em;
|
|
189
|
+
}
|
|
190
|
+
tbw-grid {
|
|
191
|
+
/* --- Cell defaults --- */
|
|
192
|
+
}
|
|
193
|
+
tbw-grid .cell {
|
|
194
|
+
line-height: 1em;
|
|
195
|
+
}
|
|
196
|
+
tbw-grid {
|
|
197
|
+
/* --- Numeric alignment --- */
|
|
198
|
+
}
|
|
285
199
|
tbw-grid .cell[data-type=number] {
|
|
286
200
|
text-align: right;
|
|
287
201
|
}
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
}
|
|
295
|
-
tbw-grid [part=cell].editing,
|
|
296
|
-
tbw-grid .data-grid-row .cell.editing {
|
|
202
|
+
tbw-grid {
|
|
203
|
+
/* --- Data cell styling & editor host --- */
|
|
204
|
+
}
|
|
205
|
+
tbw-grid [part=cell], tbw-grid .data-grid-row .cell {
|
|
206
|
+
font-weight: 500;
|
|
207
|
+
height: var(--tbw-row-height);
|
|
208
|
+
}
|
|
209
|
+
tbw-grid [part=cell].editing, tbw-grid .data-grid-row .cell.editing {
|
|
297
210
|
padding: 2px 1px;
|
|
298
211
|
position: relative;
|
|
299
212
|
}
|
|
300
|
-
tbw-grid [part=cell],
|
|
301
|
-
tbw-
|
|
302
|
-
/* Editor host container - provides visual boundary for all editor types */
|
|
213
|
+
tbw-grid [part=cell].cell-focus, tbw-grid .data-grid-row .cell.cell-focus {
|
|
214
|
+
background: rgba(from var(--tbw-color-accent) r g b/8%);
|
|
303
215
|
}
|
|
304
|
-
tbw-grid [part=cell]
|
|
305
|
-
|
|
306
|
-
|
|
216
|
+
tbw-grid [part=cell], tbw-grid .data-grid-row .cell {
|
|
217
|
+
/* Editor host — visual boundary for all editor types */
|
|
218
|
+
}
|
|
219
|
+
tbw-grid [part=cell] .tbw-editor-host, tbw-grid .data-grid-row .cell .tbw-editor-host {
|
|
220
|
+
border: 1px solid var(--_border);
|
|
307
221
|
background: var(--eds_ui_background__default, light-dark(#ffffff, #243746));
|
|
308
222
|
display: flex;
|
|
309
223
|
align-items: center;
|
|
@@ -312,46 +226,31 @@ tbw-grid .data-grid-row .cell .tbw-editor-host {
|
|
|
312
226
|
box-sizing: border-box;
|
|
313
227
|
padding: var(--tbw-cell-padding, 0 6px);
|
|
314
228
|
}
|
|
315
|
-
tbw-grid [part=cell] .tbw-editor-host:has(.mat-form-field-invalid),
|
|
316
|
-
tbw-grid .data-grid-row .cell .tbw-editor-host:has(.mat-form-field-invalid) {
|
|
229
|
+
tbw-grid [part=cell] .tbw-editor-host:has(.mat-form-field-invalid), tbw-grid .data-grid-row .cell .tbw-editor-host:has(.mat-form-field-invalid) {
|
|
317
230
|
border-color: var(--tbw-invalid-border-color);
|
|
318
231
|
}
|
|
319
|
-
tbw-grid [part=cell] .tbw-editor-host:focus-within,
|
|
320
|
-
|
|
321
|
-
box-shadow: inset 0 -2px 0 0 var(--eds_interactive_primary__resting, light-dark(#007079, #97cace));
|
|
232
|
+
tbw-grid [part=cell] .tbw-editor-host:focus-within, tbw-grid .data-grid-row .cell .tbw-editor-host:focus-within {
|
|
233
|
+
box-shadow: inset 0 -2px 0 0 var(--_accent);
|
|
322
234
|
outline: none;
|
|
323
235
|
}
|
|
324
|
-
tbw-grid [part=cell] .tbw-editor-host,
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
(e.g. display: block on date-editor) can override.
|
|
329
|
-
Excludes native form elements — they MUST keep their box to render.
|
|
330
|
-
Also excludes custom editor components that need their own box model
|
|
331
|
-
(e.g. autocomplete editors that use CDK overlay positioning). */
|
|
332
|
-
}
|
|
333
|
-
tbw-grid [part=cell] .tbw-editor-host > :where(:not(input, select, textarea, [contenteditable], .tbw-editor-box)),
|
|
334
|
-
tbw-grid .data-grid-row .cell .tbw-editor-host > :where(:not(input, select, textarea, [contenteditable], .tbw-editor-box)) {
|
|
335
|
-
display: contents;
|
|
236
|
+
tbw-grid [part=cell] .tbw-editor-host, tbw-grid .data-grid-row .cell .tbw-editor-host {
|
|
237
|
+
/* Framework component hosts: transparent for flex layout.
|
|
238
|
+
:where() for zero specificity so component :host styles can override.
|
|
239
|
+
Excludes form elements and custom editor boxes. */
|
|
336
240
|
}
|
|
337
|
-
tbw-grid [part=cell] .tbw-editor-host,
|
|
338
|
-
|
|
339
|
-
/* Custom editor components — need a real box for CDK overlay positioning */
|
|
241
|
+
tbw-grid [part=cell] .tbw-editor-host > :where(:not(input, select, textarea, [contenteditable], .tbw-editor-box)), tbw-grid .data-grid-row .cell .tbw-editor-host > :where(:not(input, select, textarea, [contenteditable], .tbw-editor-box)) {
|
|
242
|
+
display: contents;
|
|
340
243
|
}
|
|
341
|
-
tbw-grid [part=cell] .tbw-editor-host > .tbw-editor-box,
|
|
342
|
-
tbw-grid .data-grid-row .cell .tbw-editor-host > .tbw-editor-box {
|
|
244
|
+
tbw-grid [part=cell] .tbw-editor-host > .tbw-editor-box, tbw-grid .data-grid-row .cell .tbw-editor-host > .tbw-editor-box {
|
|
343
245
|
display: flex;
|
|
344
246
|
align-items: center;
|
|
345
247
|
width: 100%;
|
|
346
248
|
height: 100%;
|
|
347
249
|
}
|
|
348
|
-
tbw-grid [part=cell] .tbw-editor-host,
|
|
349
|
-
|
|
350
|
-
/* Simple inputs (not wrapped in mat-form-field) */
|
|
250
|
+
tbw-grid [part=cell] .tbw-editor-host, tbw-grid .data-grid-row .cell .tbw-editor-host {
|
|
251
|
+
/* Simple text/number inputs */
|
|
351
252
|
}
|
|
352
|
-
tbw-grid [part=cell] .tbw-editor-host > input[type=text], tbw-grid [part=cell] .tbw-editor-host > input[type=number],
|
|
353
|
-
tbw-grid .data-grid-row .cell .tbw-editor-host > input[type=text],
|
|
354
|
-
tbw-grid .data-grid-row .cell .tbw-editor-host > input[type=number] {
|
|
253
|
+
tbw-grid [part=cell] .tbw-editor-host > input[type=text], tbw-grid [part=cell] .tbw-editor-host > input[type=number], tbw-grid .data-grid-row .cell .tbw-editor-host > input[type=text], tbw-grid .data-grid-row .cell .tbw-editor-host > input[type=number] {
|
|
355
254
|
border: none;
|
|
356
255
|
background: transparent;
|
|
357
256
|
font: inherit;
|
|
@@ -361,12 +260,10 @@ tbw-grid .data-grid-row .cell .tbw-editor-host > input[type=number] {
|
|
|
361
260
|
width: 100%;
|
|
362
261
|
height: 100%;
|
|
363
262
|
}
|
|
364
|
-
tbw-grid [part=cell] .tbw-editor-host,
|
|
365
|
-
|
|
366
|
-
/* Native select element (built-in select editor) */
|
|
263
|
+
tbw-grid [part=cell] .tbw-editor-host, tbw-grid .data-grid-row .cell .tbw-editor-host {
|
|
264
|
+
/* Native select */
|
|
367
265
|
}
|
|
368
|
-
tbw-grid [part=cell] .tbw-editor-host > select,
|
|
369
|
-
tbw-grid .data-grid-row .cell .tbw-editor-host > select {
|
|
266
|
+
tbw-grid [part=cell] .tbw-editor-host > select, tbw-grid .data-grid-row .cell .tbw-editor-host > select {
|
|
370
267
|
appearance: base-select;
|
|
371
268
|
border: none;
|
|
372
269
|
background: transparent;
|
|
@@ -379,8 +276,7 @@ tbw-grid .data-grid-row .cell .tbw-editor-host > select {
|
|
|
379
276
|
cursor: pointer;
|
|
380
277
|
place-items: center;
|
|
381
278
|
}
|
|
382
|
-
tbw-grid [part=cell] .tbw-editor-host > select::picker(select),
|
|
383
|
-
tbw-grid .data-grid-row .cell .tbw-editor-host > select::picker(select) {
|
|
279
|
+
tbw-grid [part=cell] .tbw-editor-host > select::picker(select), tbw-grid .data-grid-row .cell .tbw-editor-host > select::picker(select) {
|
|
384
280
|
appearance: base-select;
|
|
385
281
|
border: none;
|
|
386
282
|
border-radius: 4px;
|
|
@@ -388,8 +284,7 @@ tbw-grid .data-grid-row .cell .tbw-editor-host > select::picker(select) {
|
|
|
388
284
|
overscroll-behavior: contain;
|
|
389
285
|
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
|
|
390
286
|
}
|
|
391
|
-
tbw-grid [part=cell] .tbw-editor-host > select option,
|
|
392
|
-
tbw-grid .data-grid-row .cell .tbw-editor-host > select option {
|
|
287
|
+
tbw-grid [part=cell] .tbw-editor-host > select option, tbw-grid .data-grid-row .cell .tbw-editor-host > select option {
|
|
393
288
|
font: inherit;
|
|
394
289
|
padding: 8px 16px;
|
|
395
290
|
min-height: 36px;
|
|
@@ -397,53 +292,111 @@ tbw-grid .data-grid-row .cell .tbw-editor-host > select option {
|
|
|
397
292
|
align-items: center;
|
|
398
293
|
border-radius: 0;
|
|
399
294
|
}
|
|
400
|
-
tbw-grid [part=cell] .tbw-editor-host > select option:hover,
|
|
401
|
-
tbw-grid .data-grid-row .cell .tbw-editor-host > select option:hover {
|
|
295
|
+
tbw-grid [part=cell] .tbw-editor-host > select option:hover, tbw-grid .data-grid-row .cell .tbw-editor-host > select option:hover {
|
|
402
296
|
background-color: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.08));
|
|
403
297
|
}
|
|
404
|
-
tbw-grid [part=cell] .tbw-editor-host > select option:checked,
|
|
405
|
-
tbw-grid .data-grid-row .cell .tbw-editor-host > select option:checked {
|
|
298
|
+
tbw-grid [part=cell] .tbw-editor-host > select option:checked, tbw-grid .data-grid-row .cell .tbw-editor-host > select option:checked {
|
|
406
299
|
background-color: light-dark(rgba(0, 112, 121, 0.12), rgba(151, 202, 206, 0.2));
|
|
407
300
|
color: inherit;
|
|
408
301
|
}
|
|
409
|
-
tbw-grid
|
|
410
|
-
|
|
411
|
-
|
|
302
|
+
tbw-grid {
|
|
303
|
+
/* --- Material form field stripping inside editor hosts ---
|
|
304
|
+
Lower specificity than cell-scoped rules above; strips
|
|
305
|
+
Angular Material chrome so .tbw-editor-host provides visuals. */
|
|
306
|
+
}
|
|
307
|
+
tbw-grid .tbw-editor-host .mat-mdc-form-field {
|
|
308
|
+
width: 100%;
|
|
309
|
+
height: 100%;
|
|
310
|
+
}
|
|
311
|
+
tbw-grid .tbw-editor-host .mat-mdc-form-field .mat-mdc-text-field-wrapper {
|
|
312
|
+
padding: 0 4px;
|
|
313
|
+
background: transparent;
|
|
314
|
+
height: 100%;
|
|
315
|
+
display: flex;
|
|
316
|
+
align-items: center;
|
|
317
|
+
}
|
|
318
|
+
tbw-grid .tbw-editor-host .mat-mdc-form-field .mat-mdc-form-field-flex {
|
|
319
|
+
height: 100%;
|
|
320
|
+
display: flex;
|
|
321
|
+
align-items: center;
|
|
322
|
+
}
|
|
323
|
+
tbw-grid .tbw-editor-host .mat-mdc-form-field .mat-mdc-form-field-focus-overlay {
|
|
324
|
+
display: none;
|
|
325
|
+
}
|
|
326
|
+
tbw-grid .tbw-editor-host .mat-mdc-form-field .mdc-line-ripple {
|
|
327
|
+
display: none;
|
|
328
|
+
}
|
|
329
|
+
tbw-grid .tbw-editor-host .mat-mdc-form-field .mat-mdc-form-field-infix {
|
|
330
|
+
padding: 0;
|
|
331
|
+
min-height: unset;
|
|
332
|
+
width: 100%;
|
|
333
|
+
display: flex;
|
|
334
|
+
align-items: center;
|
|
335
|
+
border: 0;
|
|
336
|
+
}
|
|
337
|
+
tbw-grid .tbw-editor-host .mat-mdc-form-field input.mat-mdc-input-element {
|
|
338
|
+
height: auto;
|
|
339
|
+
line-height: normal;
|
|
340
|
+
}
|
|
341
|
+
tbw-grid .tbw-editor-host .mat-mdc-form-field .mat-mdc-select {
|
|
342
|
+
height: 100%;
|
|
343
|
+
display: flex;
|
|
344
|
+
align-items: center;
|
|
345
|
+
}
|
|
346
|
+
tbw-grid .tbw-editor-host .mat-mdc-form-field .mat-mdc-select-trigger {
|
|
347
|
+
height: 100%;
|
|
348
|
+
display: flex;
|
|
349
|
+
align-items: center;
|
|
350
|
+
}
|
|
351
|
+
tbw-grid .tbw-editor-host .mat-mdc-form-field .mat-mdc-select-value {
|
|
352
|
+
display: flex;
|
|
353
|
+
align-items: center;
|
|
354
|
+
}
|
|
355
|
+
tbw-grid .tbw-editor-host .mat-mdc-form-field-subscript-wrapper {
|
|
356
|
+
display: none;
|
|
357
|
+
}
|
|
358
|
+
tbw-grid .tbw-editor-host .editor-checkbox {
|
|
359
|
+
display: flex;
|
|
360
|
+
align-items: center;
|
|
361
|
+
justify-content: center;
|
|
362
|
+
height: 100%;
|
|
363
|
+
}
|
|
364
|
+
tbw-grid .tbw-editor-host .mat-mdc-option.mdc-list-item {
|
|
365
|
+
background: var(--mat-autocomplete-background-color, var(--mat-sys-surface-container));
|
|
412
366
|
}
|
|
413
367
|
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
height: 1.
|
|
368
|
+
/* Compact mode when applied from a parent element */
|
|
369
|
+
.eds-compact tbw-grid {
|
|
370
|
+
--tbw-row-height: calc(var(--sto-base-font-size, 13px) * 1.385);
|
|
371
|
+
--tbw-header-height: calc(var(--sto-base-font-size, 13px) * 1.769);
|
|
418
372
|
}
|
|
419
373
|
|
|
420
|
-
|
|
421
|
-
*
|
|
422
|
-
*
|
|
423
|
-
*/
|
|
374
|
+
/* ================================================================
|
|
375
|
+
* 3. Filter Panel Styles
|
|
376
|
+
* ================================================================ */
|
|
424
377
|
.tbw-filter-panel {
|
|
425
378
|
max-width: none;
|
|
426
379
|
max-height: none;
|
|
427
|
-
/* EDS underline
|
|
380
|
+
/* EDS underline inputs */
|
|
428
381
|
}
|
|
429
382
|
.tbw-filter-panel .tbw-filter-search-input, .tbw-filter-panel .tbw-filter-range-input, .tbw-filter-panel .tbw-filter-date-input {
|
|
430
383
|
height: var(--tbw-row-height);
|
|
431
384
|
border: none;
|
|
432
385
|
border-radius: 0;
|
|
433
|
-
box-shadow: inset 0px -1px 0px 0px var(--
|
|
434
|
-
background: var(--
|
|
386
|
+
box-shadow: inset 0px -1px 0px 0px var(--_fg-muted);
|
|
387
|
+
background: var(--_surface);
|
|
435
388
|
outline: 1px solid transparent;
|
|
436
389
|
outline-offset: 0px;
|
|
437
390
|
}
|
|
438
391
|
.tbw-filter-panel {
|
|
439
|
-
/* EDS-styled checkboxes
|
|
392
|
+
/* EDS-styled checkboxes */
|
|
440
393
|
}
|
|
441
394
|
.tbw-filter-panel .tbw-filter-checkbox {
|
|
442
395
|
appearance: none;
|
|
443
396
|
-webkit-appearance: none;
|
|
444
397
|
width: 18px;
|
|
445
398
|
height: 18px;
|
|
446
|
-
border: 2px solid var(--
|
|
399
|
+
border: 2px solid var(--_fg-muted);
|
|
447
400
|
border-radius: 2px;
|
|
448
401
|
background: transparent;
|
|
449
402
|
cursor: pointer;
|
|
@@ -452,8 +405,8 @@ tbw-grid .data-grid-row .cell.cell-focus {
|
|
|
452
405
|
transition: background-color 150ms, border-color 150ms;
|
|
453
406
|
}
|
|
454
407
|
.tbw-filter-panel .tbw-filter-checkbox:checked {
|
|
455
|
-
background-color: var(--
|
|
456
|
-
border-color: var(--
|
|
408
|
+
background-color: var(--_accent);
|
|
409
|
+
border-color: var(--_accent);
|
|
457
410
|
}
|
|
458
411
|
.tbw-filter-panel .tbw-filter-checkbox:checked::after {
|
|
459
412
|
content: "";
|
|
@@ -462,16 +415,13 @@ tbw-grid .data-grid-row .cell.cell-focus {
|
|
|
462
415
|
top: 1px;
|
|
463
416
|
width: 5px;
|
|
464
417
|
height: 9px;
|
|
465
|
-
border: solid var(--
|
|
418
|
+
border: solid var(--_accent-fg);
|
|
466
419
|
border-width: 0 2px 2px 0;
|
|
467
420
|
transform: rotate(45deg);
|
|
468
421
|
}
|
|
469
|
-
.tbw-filter-panel .tbw-filter-checkbox {
|
|
470
|
-
/* Indeterminate state (Select All partial) */
|
|
471
|
-
}
|
|
472
422
|
.tbw-filter-panel .tbw-filter-checkbox:indeterminate {
|
|
473
|
-
background-color: var(--
|
|
474
|
-
border-color: var(--
|
|
423
|
+
background-color: var(--_accent);
|
|
424
|
+
border-color: var(--_accent);
|
|
475
425
|
}
|
|
476
426
|
.tbw-filter-panel .tbw-filter-checkbox:indeterminate::after {
|
|
477
427
|
content: "";
|
|
@@ -480,31 +430,20 @@ tbw-grid .data-grid-row .cell.cell-focus {
|
|
|
480
430
|
top: 6px;
|
|
481
431
|
width: 10px;
|
|
482
432
|
height: 2px;
|
|
483
|
-
background: var(--
|
|
433
|
+
background: var(--_accent-fg);
|
|
484
434
|
}
|
|
485
435
|
.tbw-filter-panel .tbw-filter-checkbox:hover {
|
|
486
436
|
border-color: var(--eds_interactive_primary__hover, light-dark(#004f55, #ade2e6));
|
|
487
437
|
}
|
|
488
438
|
.tbw-filter-panel .tbw-filter-checkbox:focus-visible {
|
|
489
|
-
outline: 2px solid var(--
|
|
439
|
+
outline: 2px solid var(--_focus);
|
|
490
440
|
outline-offset: 2px;
|
|
491
441
|
}
|
|
492
442
|
.tbw-filter-panel .tbw-filter-value-item {
|
|
493
443
|
gap: 8px;
|
|
494
444
|
}
|
|
495
445
|
|
|
496
|
-
|
|
497
|
-
* Default Toolbox Filter Panel - EDS Overrides
|
|
498
|
-
*
|
|
499
|
-
* Most styling is now handled by CSS variables (v1.3.1+):
|
|
500
|
-
* - --tbw-filter-btn-padding: 8px 16px
|
|
501
|
-
* - --tbw-filter-btn-font-weight: 500
|
|
502
|
-
* - --tbw-filter-btn-min-height: 48px
|
|
503
|
-
* - --tbw-filter-search-padding: 6px 8px
|
|
504
|
-
* - --tbw-filter-item-height: 36px
|
|
505
|
-
*
|
|
506
|
-
* Below are additional EDS-specific input styling tweaks.
|
|
507
|
-
*/
|
|
446
|
+
/* Search input with specificity escalation for filter panel context */
|
|
508
447
|
.tbw-filter-search-input,
|
|
509
448
|
.tbw-filter-panel .tbw-filter-search-input {
|
|
510
449
|
font-size: 1rem;
|
|
@@ -519,222 +458,83 @@ tbw-grid .data-grid-row .cell.cell-focus {
|
|
|
519
458
|
background: var(--eds_ui_background__light, light-dark(#f7f7f7, #2e3f4d));
|
|
520
459
|
}
|
|
521
460
|
|
|
522
|
-
|
|
523
|
-
*
|
|
524
|
-
*
|
|
525
|
-
* Strip Material styling from editors inside the grid.
|
|
526
|
-
* The .tbw-editor-host provides the visual container (border + background),
|
|
527
|
-
* so Material components inside should be transparent/minimal.
|
|
528
|
-
*/
|
|
529
|
-
tbw-grid {
|
|
530
|
-
--mat-checkbox-state-layer-size: 20px;
|
|
531
|
-
/* Make form fields transparent - container provides styling */
|
|
532
|
-
--mdc-filled-text-field-container-color: transparent;
|
|
533
|
-
--mdc-filled-text-field-active-indicator-color: transparent;
|
|
534
|
-
--mdc-filled-text-field-hover-active-indicator-color: transparent;
|
|
535
|
-
--mdc-filled-text-field-focus-active-indicator-color: transparent;
|
|
536
|
-
/* Outlined variant - also transparent */
|
|
537
|
-
--mdc-outlined-text-field-outline-color: transparent;
|
|
538
|
-
--mdc-outlined-text-field-focus-outline-color: transparent;
|
|
539
|
-
--mdc-outlined-text-field-hover-outline-color: transparent;
|
|
540
|
-
}
|
|
541
|
-
tbw-grid .mat-mdc-icon-button.mat-mdc-button-base {
|
|
542
|
-
--mdc-icon-button-state-layer-size: 28px;
|
|
543
|
-
--mat-icon-button-state-layer-size: 28px;
|
|
544
|
-
}
|
|
545
|
-
tbw-grid {
|
|
546
|
-
/* Strip mat-form-field completely inside editors */
|
|
547
|
-
}
|
|
548
|
-
tbw-grid .tbw-editor-host {
|
|
549
|
-
/* Form field should fill the host */
|
|
550
|
-
}
|
|
551
|
-
tbw-grid .tbw-editor-host .mat-mdc-form-field {
|
|
552
|
-
width: 100%;
|
|
553
|
-
height: 100%;
|
|
554
|
-
/* Remove ALL visual chrome and ensure vertical centering */
|
|
555
|
-
}
|
|
556
|
-
tbw-grid .tbw-editor-host .mat-mdc-form-field .mat-mdc-text-field-wrapper {
|
|
557
|
-
padding: 0 4px;
|
|
558
|
-
background: transparent;
|
|
559
|
-
height: 100%;
|
|
560
|
-
display: flex;
|
|
561
|
-
align-items: center;
|
|
562
|
-
}
|
|
563
|
-
tbw-grid .tbw-editor-host .mat-mdc-form-field {
|
|
564
|
-
/* Flex container for input area */
|
|
565
|
-
}
|
|
566
|
-
tbw-grid .tbw-editor-host .mat-mdc-form-field .mat-mdc-form-field-flex {
|
|
567
|
-
height: 100%;
|
|
568
|
-
display: flex;
|
|
569
|
-
align-items: center;
|
|
570
|
-
}
|
|
571
|
-
tbw-grid .tbw-editor-host .mat-mdc-form-field {
|
|
572
|
-
/* Hide the focus overlay tint */
|
|
573
|
-
}
|
|
574
|
-
tbw-grid .tbw-editor-host .mat-mdc-form-field .mat-mdc-form-field-focus-overlay {
|
|
575
|
-
display: none;
|
|
576
|
-
}
|
|
577
|
-
tbw-grid .tbw-editor-host .mat-mdc-form-field {
|
|
578
|
-
/* Hide the underline ripple */
|
|
579
|
-
}
|
|
580
|
-
tbw-grid .tbw-editor-host .mat-mdc-form-field .mdc-line-ripple {
|
|
581
|
-
display: none;
|
|
582
|
-
}
|
|
583
|
-
tbw-grid .tbw-editor-host .mat-mdc-form-field {
|
|
584
|
-
/* Make infix fill available space and center content */
|
|
585
|
-
}
|
|
586
|
-
tbw-grid .tbw-editor-host .mat-mdc-form-field .mat-mdc-form-field-infix {
|
|
587
|
-
padding: 0;
|
|
588
|
-
min-height: unset;
|
|
589
|
-
width: 100%;
|
|
590
|
-
display: flex;
|
|
591
|
-
align-items: center;
|
|
592
|
-
border: 0; /* Remove top border used for label spacing */
|
|
593
|
-
}
|
|
594
|
-
tbw-grid .tbw-editor-host .mat-mdc-form-field {
|
|
595
|
-
/* Input styling - center text vertically */
|
|
596
|
-
}
|
|
597
|
-
tbw-grid .tbw-editor-host .mat-mdc-form-field input.mat-mdc-input-element {
|
|
598
|
-
height: auto;
|
|
599
|
-
line-height: normal;
|
|
600
|
-
}
|
|
601
|
-
tbw-grid .tbw-editor-host .mat-mdc-form-field {
|
|
602
|
-
/* Select trigger - center text vertically */
|
|
603
|
-
}
|
|
604
|
-
tbw-grid .tbw-editor-host .mat-mdc-form-field .mat-mdc-select {
|
|
605
|
-
height: 100%;
|
|
606
|
-
display: flex;
|
|
607
|
-
align-items: center;
|
|
608
|
-
}
|
|
609
|
-
tbw-grid .tbw-editor-host .mat-mdc-form-field .mat-mdc-select-trigger {
|
|
610
|
-
height: 100%;
|
|
611
|
-
display: flex;
|
|
612
|
-
align-items: center;
|
|
613
|
-
}
|
|
614
|
-
tbw-grid .tbw-editor-host .mat-mdc-form-field .mat-mdc-select-value {
|
|
615
|
-
display: flex;
|
|
616
|
-
align-items: center;
|
|
617
|
-
}
|
|
618
|
-
tbw-grid .tbw-editor-host {
|
|
619
|
-
/* Hide subscript wrapper completely */
|
|
620
|
-
}
|
|
621
|
-
tbw-grid .tbw-editor-host .mat-mdc-form-field-subscript-wrapper {
|
|
622
|
-
display: none;
|
|
623
|
-
}
|
|
624
|
-
tbw-grid .tbw-editor-host {
|
|
625
|
-
/* Checkbox centering */
|
|
626
|
-
}
|
|
627
|
-
tbw-grid .tbw-editor-host .editor-checkbox {
|
|
628
|
-
display: flex;
|
|
629
|
-
align-items: center;
|
|
630
|
-
justify-content: center;
|
|
631
|
-
height: 100%;
|
|
632
|
-
}
|
|
633
|
-
tbw-grid .tbw-editor-host .mat-mdc-option.mdc-list-item {
|
|
634
|
-
background: var(--mat-autocomplete-background-color, var(--mat-sys-surface-container));
|
|
635
|
-
}
|
|
636
|
-
|
|
637
|
-
/**
|
|
638
|
-
* Context Menu Icon Styling
|
|
461
|
+
/* ================================================================
|
|
462
|
+
* 4. Context Menu
|
|
639
463
|
*
|
|
640
|
-
*
|
|
464
|
+
* Appended to document.body (outside tbw-grid).
|
|
641
465
|
* CSS variables are copied from tbw-grid at render time.
|
|
642
|
-
*
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
font-size: var(--tbw-context-menu-icon-size, 20px);
|
|
646
|
-
line-height: 1;
|
|
647
|
-
vertical-align: middle;
|
|
648
|
-
}
|
|
649
|
-
|
|
650
|
-
.tbw-context-menu-item.danger .tbw-context-menu-icon .material-icons {
|
|
651
|
-
color: inherit;
|
|
652
|
-
}
|
|
653
|
-
|
|
654
|
-
/**
|
|
655
|
-
* CDK Overlay Panel Theming
|
|
656
|
-
*
|
|
657
|
-
* Autocomplete and select panels render in the CDK overlay container (document.body).
|
|
658
|
-
* We apply EDS theming at the overlay level for consistency.
|
|
659
|
-
*/
|
|
660
|
-
.cdk-overlay-container {
|
|
661
|
-
/* Option panel shared styling */
|
|
662
|
-
--mat-option-label-text-color: var(
|
|
663
|
-
--eds_text_static_icons__default,
|
|
664
|
-
light-dark(#3d3d3d, #ffffff)
|
|
665
|
-
);
|
|
666
|
-
--mat-option-hover-state-layer-color: var(
|
|
667
|
-
--eds_interactive_table__cell__fill_hover,
|
|
668
|
-
light-dark(#eaeaea, #324d62)
|
|
669
|
-
);
|
|
670
|
-
--mat-option-focus-state-layer-color: var(
|
|
671
|
-
--eds_interactive_table__cell__fill_hover,
|
|
672
|
-
light-dark(#eaeaea, #324d62)
|
|
673
|
-
);
|
|
674
|
-
--mat-option-selected-state-layer-color: var(
|
|
675
|
-
--eds_interactive_primary__selected_highlight,
|
|
676
|
-
light-dark(#e6faec, #007079)
|
|
677
|
-
);
|
|
678
|
-
--mat-option-selected-state-label-text-color: var(
|
|
679
|
-
--eds_text_static_icons__default,
|
|
680
|
-
light-dark(#3d3d3d, #ffffff)
|
|
681
|
-
);
|
|
682
|
-
--mat-option-label-text-font: Equinor, sans-serif;
|
|
683
|
-
--mat-option-label-text-size: 0.875rem;
|
|
684
|
-
/* Autocomplete panel */
|
|
685
|
-
--mat-autocomplete-background-color: var(
|
|
686
|
-
--eds_ui_background__default,
|
|
687
|
-
light-dark(#ffffff, #243746)
|
|
688
|
-
);
|
|
689
|
-
/* Select panel */
|
|
690
|
-
--mat-select-panel-background-color: var(
|
|
466
|
+
* ================================================================ */
|
|
467
|
+
.tbw-context-menu {
|
|
468
|
+
--tbw-context-menu-bg: var(
|
|
691
469
|
--eds_ui_background__default,
|
|
692
|
-
light-dark(#ffffff, #
|
|
470
|
+
light-dark(#ffffff, #132634)
|
|
693
471
|
);
|
|
694
|
-
|
|
695
|
-
--mat-datepicker-calendar-date-text-color: var(
|
|
472
|
+
--tbw-context-menu-fg: var(
|
|
696
473
|
--eds_text_static_icons__default,
|
|
697
474
|
light-dark(#3d3d3d, #ffffff)
|
|
698
475
|
);
|
|
699
|
-
--
|
|
700
|
-
--
|
|
701
|
-
light-dark(#
|
|
476
|
+
--tbw-context-menu-border: var(
|
|
477
|
+
--eds_ui_background__medium,
|
|
478
|
+
light-dark(#dcdcdc, #3e4f5c)
|
|
702
479
|
);
|
|
703
|
-
--
|
|
480
|
+
--tbw-context-menu-hover: var(
|
|
704
481
|
--eds_interactive_table__cell__fill_hover,
|
|
705
482
|
light-dark(#eaeaea, #324d62)
|
|
706
483
|
);
|
|
707
|
-
--
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
--mat-datepicker-calendar-date-selected-state-text-color: var(
|
|
712
|
-
--eds_text_static_icons__primary_white,
|
|
713
|
-
light-dark(#ffffff, #000000)
|
|
714
|
-
);
|
|
715
|
-
--mat-datepicker-calendar-date-today-outline-color: var(
|
|
716
|
-
--eds_interactive_primary__resting,
|
|
717
|
-
light-dark(#007079, #97cace)
|
|
484
|
+
--tbw-context-menu-danger: var(--eds_interactive_danger__resting, #eb0000);
|
|
485
|
+
--tbw-context-menu-muted: var(
|
|
486
|
+
--eds_text_static_icons__tertiary,
|
|
487
|
+
light-dark(#6f6f6f, #9ca6ac)
|
|
718
488
|
);
|
|
719
|
-
--
|
|
489
|
+
--tbw-context-menu-font-size: 0.873rem;
|
|
490
|
+
--tbw-context-menu-font-family: Equinor, sans-serif;
|
|
491
|
+
--tbw-context-menu-icon-size: 1.2rem;
|
|
492
|
+
--tbw-context-menu-item-padding: 8px 16px;
|
|
493
|
+
--tbw-context-menu-item-gap: 8px;
|
|
494
|
+
--tbw-context-menu-radius: var(--eds_shape_button_border_radius, 4px);
|
|
495
|
+
--tbw-context-menu-shadow: 0 2px 8px
|
|
496
|
+
light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.3));
|
|
497
|
+
}
|
|
498
|
+
.tbw-context-menu .tbw-context-menu-shortcut kbd {
|
|
499
|
+
background: var(--eds_ui_background__light, light-dark(#f7f7f7, #2e3f4d));
|
|
500
|
+
border: 1px solid var(--eds_ui_background__medium, light-dark(#dcdcdc, #3e4f5c));
|
|
501
|
+
border-radius: 4px;
|
|
502
|
+
padding: 2px 6px;
|
|
503
|
+
font-family: "Equinor Mono", "Consolas", "Courier New", monospace;
|
|
504
|
+
font-size: 0.75rem;
|
|
505
|
+
line-height: 1.4;
|
|
506
|
+
}
|
|
507
|
+
.tbw-context-menu .tbw-context-menu-icon .material-icons {
|
|
508
|
+
font-size: var(--tbw-context-menu-icon-size, 20px);
|
|
509
|
+
line-height: 1;
|
|
510
|
+
vertical-align: middle;
|
|
511
|
+
}
|
|
512
|
+
.tbw-context-menu .tbw-context-menu-item.danger .tbw-context-menu-icon .material-icons {
|
|
513
|
+
color: inherit;
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
/* ================================================================
|
|
517
|
+
* 5. Overlay Panel (BaseOverlayEditor)
|
|
518
|
+
* ================================================================ */
|
|
519
|
+
.tbw-overlay-panel {
|
|
520
|
+
--tbw-overlay-bg: var(
|
|
720
521
|
--eds_ui_background__default,
|
|
721
|
-
light-dark(#ffffff, #
|
|
722
|
-
);
|
|
723
|
-
--mat-datepicker-calendar-header-text-color: var(
|
|
724
|
-
--eds_text_static_icons__default,
|
|
725
|
-
light-dark(#3d3d3d, #ffffff)
|
|
522
|
+
light-dark(#ffffff, #132634)
|
|
726
523
|
);
|
|
727
|
-
--
|
|
728
|
-
--
|
|
729
|
-
light-dark(#
|
|
524
|
+
--tbw-overlay-border: var(
|
|
525
|
+
--eds_ui_background__medium,
|
|
526
|
+
light-dark(#dcdcdc, #3e4f5c)
|
|
730
527
|
);
|
|
731
|
-
--
|
|
528
|
+
--tbw-overlay-shadow: 0 4px 12px
|
|
529
|
+
light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
|
|
530
|
+
color: var(--eds_text_static_icons__default, light-dark(#3d3d3d, #ffffff));
|
|
732
531
|
}
|
|
733
532
|
|
|
734
|
-
/*
|
|
533
|
+
/* ================================================================
|
|
534
|
+
* 6. Dark Mode
|
|
535
|
+
* ================================================================ */
|
|
735
536
|
body.sto-dark-theme tbw-grid,
|
|
736
537
|
body.sto-dark-theme .tbw-filter-panel,
|
|
737
|
-
body.sto-dark-theme .cdk-overlay-container,
|
|
738
538
|
body.sto-dark-theme .tbw-context-menu,
|
|
739
539
|
body.sto-dark-theme .tbw-overlay-panel {
|
|
740
540
|
color-scheme: dark;
|