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