@genexus/mercury 0.1.3 → 0.1.4
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/dist/css/mercury.css +745 -1400
- package/dist/css/mercury.css.map +1 -1
- package/dist/mercury.scss +1302 -302
- package/package.json +2 -2
package/dist/mercury.scss
CHANGED
|
@@ -39,21 +39,6 @@
|
|
|
39
39
|
background-color: currentColor;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
/// @group Icon
|
|
43
|
-
/// @param {String} $selector [".icon-mask"] -
|
|
44
|
-
/// @param {type} $icon-path [null] -
|
|
45
|
-
@mixin icon-mask($selector: ".icon-mask", $icon-path: null) {
|
|
46
|
-
#{$selector} {
|
|
47
|
-
@if $icon-path != null {
|
|
48
|
-
--icon-path: #{$icon-path};
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
&::before {
|
|
52
|
-
@extend %icon-mask--before;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
42
|
// Icon background styles
|
|
58
43
|
@mixin icon-background-common-styles(
|
|
59
44
|
$inline-size: var(--icon-size),
|
|
@@ -67,141 +52,6 @@
|
|
|
67
52
|
background: no-repeat center / $background-size var(--icon-path);
|
|
68
53
|
}
|
|
69
54
|
|
|
70
|
-
/// @group Icon
|
|
71
|
-
/// @param {String} $selector [".icon-background"] -
|
|
72
|
-
/// @param {type} $icon-path [null] -
|
|
73
|
-
@mixin icon-background($selector: ".icon-background", $icon-path: null) {
|
|
74
|
-
#{$selector} {
|
|
75
|
-
@if $icon-path != null {
|
|
76
|
-
--icon-path: #{$icon-path};
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
&::before {
|
|
80
|
-
@extend %icon-background--before;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
// Icon Input background styles
|
|
86
|
-
@mixin icon-input-background-common-styles(
|
|
87
|
-
$background-size: "0",
|
|
88
|
-
$background-position-x: "0"
|
|
89
|
-
) {
|
|
90
|
-
background: var(--icon-path) $background-position-x center / $background-size
|
|
91
|
-
no-repeat;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
// - - - - - - - - - - - - - - - - - - - -
|
|
95
|
-
// Icons | Multicolor Selectors
|
|
96
|
-
// - - - - - - - - - - - - - - - - - - - -
|
|
97
|
-
|
|
98
|
-
// Single selector generator
|
|
99
|
-
@mixin multicolor-icon-selector(
|
|
100
|
-
$input-selector,
|
|
101
|
-
$output-selector,
|
|
102
|
-
$light: true,
|
|
103
|
-
$dark: true,
|
|
104
|
-
$light-theme-selector: ".light",
|
|
105
|
-
$dark-theme-selector: ".dark",
|
|
106
|
-
$primary: true,
|
|
107
|
-
$primary-hover: true,
|
|
108
|
-
$primary-active: true,
|
|
109
|
-
$primary-disabled: true,
|
|
110
|
-
$on-primary: true,
|
|
111
|
-
$on-primary-hover: true,
|
|
112
|
-
$on-primary-active: true,
|
|
113
|
-
$on-disabled: true,
|
|
114
|
-
$neutral: true
|
|
115
|
-
) {
|
|
116
|
-
// Light
|
|
117
|
-
@if $light {
|
|
118
|
-
#{$light-theme-selector} {
|
|
119
|
-
#{$output-selector} {
|
|
120
|
-
@if $enabled {
|
|
121
|
-
@extend #{$input-selector}--enabled-light;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
@if $hover {
|
|
125
|
-
&:hover {
|
|
126
|
-
@extend #{$input-selector}--hover-light;
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
@if $active {
|
|
131
|
-
&:active {
|
|
132
|
-
@extend #{$input-selector}--active-light;
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
@if $disabled {
|
|
137
|
-
&:disabled {
|
|
138
|
-
@extend #{$input-selector}--disabled-light;
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
// Dark
|
|
146
|
-
@if $dark {
|
|
147
|
-
#{$dark-theme-selector} {
|
|
148
|
-
#{$output-selector} {
|
|
149
|
-
@if $enabled {
|
|
150
|
-
@extend #{$input-selector}--enabled-dark;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
@if $hover {
|
|
154
|
-
&:hover {
|
|
155
|
-
@extend #{$input-selector}--hover-dark;
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
@if $active {
|
|
160
|
-
&:active {
|
|
161
|
-
@extend #{$input-selector}--active-dark;
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
@if $disabled {
|
|
166
|
-
&:disabled {
|
|
167
|
-
@extend #{$input-selector}--disabled-dark;
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
// Generate icons virtual selectors
|
|
176
|
-
|
|
177
|
-
/// It returns a list of virtual selectors. This function is designed to
|
|
178
|
-
/// process the icons selectors generated by "svg-sass-generator" package,
|
|
179
|
-
/// present in this monorepo. This function only generates one part of the
|
|
180
|
-
/// selector: %icon__{category-name}_{icon-name}. ie.: %icon__system_user.
|
|
181
|
-
/// Another mixin should then combine the selectors that this function provides
|
|
182
|
-
/// with the rest of the selector. Generally, the other part of the selector
|
|
183
|
-
/// includes the name of the icon state, and the name of the color scheme.
|
|
184
|
-
/// An example of a complete selector: %icon__system_user--primary-light.
|
|
185
|
-
/// @param {List} $icons-list - The list of icons
|
|
186
|
-
/// @param {String} $category - The category name of the list
|
|
187
|
-
/// @param {String} $prefix_category-separator - The prefix-category separator
|
|
188
|
-
/// @return {String} $category_icon-separator - The category-icon separator
|
|
189
|
-
@function generate-icons-virtual-selectors(
|
|
190
|
-
$icons-list,
|
|
191
|
-
$category,
|
|
192
|
-
$prefix_category-separator: "__",
|
|
193
|
-
$category_icon-separator: "_"
|
|
194
|
-
) {
|
|
195
|
-
$output-list: ();
|
|
196
|
-
@each $icon in $icons-list {
|
|
197
|
-
$output-list: append(
|
|
198
|
-
$output-list,
|
|
199
|
-
"%icon#{$prefix_category-separator}#{$category}#{$category_icon-separator}#{$icon}"
|
|
200
|
-
);
|
|
201
|
-
}
|
|
202
|
-
@return $output-list;
|
|
203
|
-
}
|
|
204
|
-
|
|
205
55
|
/// Replace `$search` with `$replace` in `$string`
|
|
206
56
|
/// @param {String} $string - Initial string
|
|
207
57
|
/// @param {String} $search - Substring to replace
|
|
@@ -227,10 +77,10 @@ Focus
|
|
|
227
77
|
----------------------*/
|
|
228
78
|
@mixin focus-style($outline: false) {
|
|
229
79
|
@if $outline == true {
|
|
230
|
-
outline
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
outline-offset: -
|
|
80
|
+
outline: var(--mer-focus__outline-width)
|
|
81
|
+
var(--mer-focus__outline-style)
|
|
82
|
+
var(--mer-focus__outline-color);
|
|
83
|
+
outline-offset: var(--mer-focus__outline-offset);
|
|
234
84
|
} @else {
|
|
235
85
|
border-color: var(--borders-un-border-color__focused);
|
|
236
86
|
}
|
|
@@ -265,33 +115,119 @@ Scrollbar
|
|
|
265
115
|
|
|
266
116
|
// corner
|
|
267
117
|
&::-webkit-scrollbar-corner {
|
|
268
|
-
background:
|
|
118
|
+
background: var(--mer-scrollbar-corner__bg);
|
|
269
119
|
}
|
|
270
120
|
}
|
|
271
121
|
|
|
272
122
|
/*----------------------------------------------------
|
|
273
123
|
Item (applies to every item (tree, grid, list, etc...)
|
|
274
124
|
----------------------------------------------------*/
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
125
|
+
|
|
126
|
+
// note: $style's that are not marked as ¨optional¨ should be
|
|
127
|
+
// applied to every item on the design system, in order to
|
|
128
|
+
// keep consistency. $style's that are not marked as "optional"
|
|
129
|
+
// are optional because items from different components could
|
|
130
|
+
// display different styles for that particular group/$style
|
|
131
|
+
|
|
132
|
+
@mixin item-styles($style: "enabled") {
|
|
133
|
+
@if $style == "border-list" {
|
|
134
|
+
border: var(--mer-item__border-width)
|
|
135
|
+
var(--mer-item__border-style)
|
|
136
|
+
transparent;
|
|
137
|
+
// border color depends on the state (enabled, hover, etc)
|
|
282
138
|
}
|
|
283
|
-
@if $
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
139
|
+
@if $style == "border-grid" {
|
|
140
|
+
border-block-end: var(--mer-item__border-width)
|
|
141
|
+
var(--mer-item__border-style)
|
|
142
|
+
var(--mer-item__border-color);
|
|
143
|
+
border-inline-end: var(--mer-item__border-width)
|
|
144
|
+
var(--mer-item__border-style)
|
|
145
|
+
var(--mer-item__border-color);
|
|
146
|
+
// border color depends on the state (enabled, hover, etc)
|
|
287
147
|
}
|
|
288
|
-
@if $
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
148
|
+
@if $style == "font" {
|
|
149
|
+
// optional
|
|
150
|
+
font-family: var(--mer-item__font-family);
|
|
151
|
+
font-size: var(--mer-item__font-size);
|
|
152
|
+
line-height: var(--mer-item__line-height);
|
|
153
|
+
}
|
|
154
|
+
@if $style == "structure" {
|
|
155
|
+
// optional
|
|
156
|
+
padding-inline: var(--mer-item__padding-inline);
|
|
157
|
+
padding-block: var(--mer-item__padding-block);
|
|
158
|
+
min-block-size: var(--mer-item__padding-min-block-size);
|
|
159
|
+
}
|
|
160
|
+
@if $style == "colors" {
|
|
161
|
+
background-color: var(--mer-item__bg-color);
|
|
162
|
+
color: var(--mer-item__color);
|
|
163
|
+
border-color: var(--mer-item__border-color);
|
|
164
|
+
}
|
|
165
|
+
@if $style == "hover" {
|
|
166
|
+
--mer-item__color: var(--mer-item__color--hover);
|
|
167
|
+
--mer-item__bg-color: var(--mer-item__bg-color--hover);
|
|
168
|
+
--mer-item__border-color: var(--mer-item__border-color--hover);
|
|
294
169
|
}
|
|
170
|
+
@if $style == "selected" {
|
|
171
|
+
--mer-item__color: var(--mer-item__color--selected);
|
|
172
|
+
--mer-item__bg-color: var(--mer-item__bg-color--selected);
|
|
173
|
+
--mer-item__border-color: var(--mer-item__border-color--selected);
|
|
174
|
+
}
|
|
175
|
+
@if $style == "selected-hover" {
|
|
176
|
+
--mer-item__color: var(--mer-item__color--selected-hover);
|
|
177
|
+
--mer-item__bg-color: var(--mer-item__bg-color--selected-hover);
|
|
178
|
+
--mer-item__border-color: var(--mer-item__border-color--selected-hover);
|
|
179
|
+
}
|
|
180
|
+
@if $style == "disabled" {
|
|
181
|
+
--mer-item__color: var(--mer-item__color--disabled);
|
|
182
|
+
--mer-item__bg-color: var(--mer-item__bg-color--disabled);
|
|
183
|
+
--mer-item__border-color: var(--mer-item__border-color--disabled);
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
%item-border-list {
|
|
188
|
+
@include item-styles("border-list");
|
|
189
|
+
}
|
|
190
|
+
%item-border-grid {
|
|
191
|
+
@include item-styles("border-grid");
|
|
192
|
+
}
|
|
193
|
+
%item-font {
|
|
194
|
+
@include item-styles("font");
|
|
195
|
+
}
|
|
196
|
+
%item-structure {
|
|
197
|
+
@include item-styles("structure");
|
|
198
|
+
}
|
|
199
|
+
%item-colors {
|
|
200
|
+
// enabled
|
|
201
|
+
@include item-styles("colors");
|
|
202
|
+
}
|
|
203
|
+
%item-hover {
|
|
204
|
+
@include item-styles("hover");
|
|
205
|
+
}
|
|
206
|
+
%item-selected {
|
|
207
|
+
@include item-styles("selected");
|
|
208
|
+
}
|
|
209
|
+
%item-selected-hover {
|
|
210
|
+
@include item-styles("selected-hover");
|
|
211
|
+
}
|
|
212
|
+
%item-disabled {
|
|
213
|
+
@include item-styles("disabled");
|
|
214
|
+
}
|
|
215
|
+
%item-common-states {
|
|
216
|
+
@include item-styles("enabled");
|
|
217
|
+
@include item-styles("hover");
|
|
218
|
+
@include item-styles("disabled");
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
/*----------------------
|
|
222
|
+
Window
|
|
223
|
+
----------------------*/
|
|
224
|
+
// TODO: This styles should better be applied on the ch-window ?
|
|
225
|
+
%window-styles {
|
|
226
|
+
border: var(--mer-window__border);
|
|
227
|
+
border-radius: var(--mer-window__border-radius);
|
|
228
|
+
padding: var(--mer-window__padding);
|
|
229
|
+
background-color: var(--mer-window__bg-color);
|
|
230
|
+
box-shadow: var(--mer-box-shadow--01);
|
|
295
231
|
}
|
|
296
232
|
|
|
297
233
|
|
|
@@ -385,6 +321,7 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
385
321
|
--mer-border__width--lg: 4px;
|
|
386
322
|
|
|
387
323
|
//border radius
|
|
324
|
+
--mer-border__radius--2xs: 1px;
|
|
388
325
|
--mer-border__radius--xs: 2px;
|
|
389
326
|
--mer-border__radius--sm: 4px;
|
|
390
327
|
--mer-border__radius--md: 8px;
|
|
@@ -514,10 +451,10 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
514
451
|
|
|
515
452
|
@mixin elevation--light() {
|
|
516
453
|
// background color
|
|
517
|
-
--mer-
|
|
518
|
-
--mer-
|
|
519
|
-
--mer-
|
|
520
|
-
--mer-
|
|
454
|
+
--mer-elevation__bg-color--01: var(--mer-color__neutral-gray--900);
|
|
455
|
+
--mer-elevation__bg-color--02: var(--mer-color__neutral-gray--900);
|
|
456
|
+
--mer-elevation__bg-color--03: var(--mer-color__neutral-gray--900);
|
|
457
|
+
--mer-elevation__bg-color--04: var(--mer-color__neutral-gray--900);
|
|
521
458
|
|
|
522
459
|
// border
|
|
523
460
|
--mer-elevation__border-01: transparent;
|
|
@@ -526,22 +463,15 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
526
463
|
--mer-elevation__border-04: transparent;
|
|
527
464
|
|
|
528
465
|
// box shadow
|
|
529
|
-
--mer-
|
|
530
|
-
0px 1px 4px 0px rgba(0, 0, 0, 0.06);
|
|
531
|
-
--mer-elevation__box-shadow--02: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
|
|
532
|
-
0px 2px 4px -1px rgba(0, 0, 0, 0.1);
|
|
533
|
-
--mer-elevation__box-shadow--03: 0px 3px 14px 2px rgba(0, 0, 0, 0.12),
|
|
534
|
-
0px 5px 5px -3px rgba(0, 0, 0, 0.1);
|
|
535
|
-
--mer-elevation__box-shadow--04: 0px 5px 22px 4px rgba(0, 0, 0, 0.12),
|
|
536
|
-
0px 7px 8px -4px rgba(0, 0, 0, 0.1);
|
|
466
|
+
--mer-box-shadow--01: 0px 4px 20px 0px #00000040;
|
|
537
467
|
}
|
|
538
468
|
|
|
539
469
|
@mixin elevation--dark() {
|
|
540
470
|
// background color
|
|
541
|
-
--mer-
|
|
542
|
-
--mer-
|
|
543
|
-
--mer-
|
|
544
|
-
--mer-
|
|
471
|
+
--mer-elevation__bg-color--01: var(--mer-color__elevation--01);
|
|
472
|
+
--mer-elevation__bg-color--02: var(--mer-color__elevation--02);
|
|
473
|
+
--mer-elevation__bg-color--03: var(--mer-color__elevation--03);
|
|
474
|
+
--mer-elevation__bg-color--04: var(--mer-color__elevation--04);
|
|
545
475
|
|
|
546
476
|
// border
|
|
547
477
|
--mer-elevation__border-01: 1px solid var(--mer-color__elevation--03);
|
|
@@ -553,6 +483,9 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
553
483
|
--mer-elevation__box-shadow--02: none;
|
|
554
484
|
--mer-elevation__box-shadow--03: none;
|
|
555
485
|
--mer-elevation__box-shadow--04: none;
|
|
486
|
+
|
|
487
|
+
// box shadow
|
|
488
|
+
--mer-box-shadow--01: 0px 4px 20px 0px #00000040;
|
|
556
489
|
}
|
|
557
490
|
|
|
558
491
|
@mixin font() {
|
|
@@ -615,7 +548,9 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
615
548
|
--mer-accent__primary: var(--mer-color__primary-blue--200);
|
|
616
549
|
--mer-accent__primary--hover: var(--mer-color__primary-blue--400);
|
|
617
550
|
--mer-accent__primary--active: var(--mer-color__primary-blue--600);
|
|
618
|
-
--mer-accent__primary--disabled:
|
|
551
|
+
--mer-accent__primary--disabled: var(
|
|
552
|
+
--mer-color__neutral-gray--600
|
|
553
|
+
); // should be a variable ⚠️
|
|
619
554
|
--mer-accent__primary--destructive: var(--mer-color__message-red--100);
|
|
620
555
|
}
|
|
621
556
|
|
|
@@ -656,27 +591,56 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
656
591
|
}
|
|
657
592
|
|
|
658
593
|
@mixin semantic-item() {
|
|
594
|
+
// note 1: all this tokens are applied on "@mixin item-styles", and the
|
|
595
|
+
// styling of any component item should be applied through the mixin.
|
|
596
|
+
|
|
597
|
+
// note 2: tokens thar are commented as "optional, are optional because items
|
|
598
|
+
// from different components could have differences in those tokens.
|
|
599
|
+
// Tokens that are not commented as optional should in theory be applied to
|
|
600
|
+
// all component items.
|
|
601
|
+
|
|
602
|
+
// generic (are independent of the item state)
|
|
603
|
+
--mer-item__border-width: var(--mer-border__width--sm);
|
|
604
|
+
--mer-item__border-style: solid;
|
|
605
|
+
--mer-item__line-height: var(--mer-line-height--tight);
|
|
606
|
+
--mer-item__padding-inline: var(--mer-spacing--xs); // optional
|
|
607
|
+
--mer-item__padding-block: var(--mer-spacing--xs); // optional
|
|
608
|
+
--mer-item__min-block-size: var(--mer-spacing--lg); // optional
|
|
609
|
+
--mer-item__font-family: var(--mer-font-family--inter-regular); // optional
|
|
610
|
+
--mer-item__font-size: var(--mer-body__font-size); // optional
|
|
611
|
+
|
|
612
|
+
--mer-item__color: var(--mer-item__color--enabled);
|
|
613
|
+
--mer-item__bg-color: var(--mer-item__bg-color--enabled);
|
|
614
|
+
--mer-item__border-color: var(--mer-item__border-color--enabled);
|
|
615
|
+
|
|
659
616
|
// enabled
|
|
660
|
-
--mer-item__color: ;
|
|
661
|
-
--mer-item__bg-color: ;
|
|
662
|
-
--mer-item__border-color: ;
|
|
617
|
+
--mer-item__color--enabled: var(--mer-text__on-elevation);
|
|
618
|
+
--mer-item__bg-color--enabled: var(--mer-color__elevation--01);
|
|
619
|
+
--mer-item__border-color--enabled: var(--mer-color__elevation--04);
|
|
663
620
|
|
|
664
621
|
// hover
|
|
665
|
-
--mer-item__color--hover: var(--mer-color__neutral-gray--100); //
|
|
666
|
-
--mer-item__bg-color--hover: var(--mer-color__tinted-blue--5);
|
|
667
|
-
--mer-item__border-color--hover: var(--mer-color__tinted-blue--20);
|
|
622
|
+
--mer-item__color--hover: var(--mer-color__neutral-gray--100); // ? (validate)
|
|
623
|
+
--mer-item__bg-color--hover: var(--mer-color__tinted-blue--5);
|
|
624
|
+
--mer-item__border-color--hover: var(--mer-color__tinted-blue--20);
|
|
668
625
|
|
|
669
626
|
// selected
|
|
670
|
-
--mer-item__color--selected: var(
|
|
671
|
-
|
|
627
|
+
--mer-item__color--selected: var(
|
|
628
|
+
--mer-color__neutral-gray--100
|
|
629
|
+
); // ? (validate)
|
|
630
|
+
--mer-item__bg-color--selected: var(--mer-color__tinted-blue--10);
|
|
672
631
|
--mer-item__border-color--selected: var(--mer-color__tinted-blue--20);
|
|
673
632
|
|
|
674
633
|
// selected + hover
|
|
675
|
-
--mer-item__color--selected-hover: var(
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
);
|
|
634
|
+
--mer-item__color--selected-hover: var(
|
|
635
|
+
--mer-color__neutral-gray--100
|
|
636
|
+
); // ? (validate)
|
|
637
|
+
--mer-item__bg-color--selected-hover: var(--mer-color__tinted-blue--10);
|
|
638
|
+
--mer-item__border-color--selected-hover: var(--mer-color__tinted-blue--20);
|
|
639
|
+
|
|
640
|
+
// disabled
|
|
641
|
+
--mer-item__color--disabled: var(); // ? (validate)
|
|
642
|
+
--mer-item__bg-color--disabled: var();
|
|
643
|
+
--mer-item__border-color--disabled: var();
|
|
680
644
|
}
|
|
681
645
|
|
|
682
646
|
@mixin semantic-other() {
|
|
@@ -685,9 +649,18 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
685
649
|
----------------------*/
|
|
686
650
|
--mer-body__bg-color: var(--mer-color__surface);
|
|
687
651
|
--mer-body__color: var(--mer-text__on-surface);
|
|
688
|
-
--mer-body__font-size: var(--mer-font__size--
|
|
652
|
+
--mer-body__font-size: var(--mer-font__size--2xs);
|
|
653
|
+
--mer-body__font-family: var(--mer-font-family--inter-regular);
|
|
689
654
|
--mer-body__line-height: var(--mer-line-height--regular);
|
|
690
655
|
|
|
656
|
+
/*----------------------
|
|
657
|
+
System
|
|
658
|
+
----------------------*/
|
|
659
|
+
// System tokens are the most basic kind, used when there is not a more specific categorization.
|
|
660
|
+
--mer-system__border-width: var(--mer-border__width--sm);
|
|
661
|
+
--mer-system__border-style: solid;
|
|
662
|
+
--mer-system__border-color: var(--mer-color__neutral-gray--500);
|
|
663
|
+
|
|
691
664
|
/*----------------------
|
|
692
665
|
Heading
|
|
693
666
|
----------------------*/
|
|
@@ -703,10 +676,10 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
703
676
|
--mer-scrollbar-track__border-radius: var(--mer-spacing--xs);
|
|
704
677
|
// scrollbar-thumb
|
|
705
678
|
--mer-scrollbar-thumb__bg-color: var(--mer-color__elevation--04);
|
|
706
|
-
--mer-scrollbar-thumb__bg-color--hover:
|
|
679
|
+
--mer-scrollbar-thumb__bg-color--hover: #42474c;
|
|
707
680
|
--mer-scrollbar-thumb__border-radius: var(--mer-spacing--xs);
|
|
708
681
|
// scrollbar-thumb
|
|
709
|
-
--mer-scrollbar-corner__bg:
|
|
682
|
+
--mer-scrollbar-corner__bg: transparent;
|
|
710
683
|
|
|
711
684
|
/*----------------------
|
|
712
685
|
Icon Size
|
|
@@ -721,21 +694,61 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
721
694
|
--mer-form-input__padding-inline: var(--mer-spacing--xs);
|
|
722
695
|
--mer-form-input__bg-position--x-value: var(--mer-form-input__padding-inline);
|
|
723
696
|
--mer-form-input__bg-position--x: var(--mer-form-input__bg-position--x-value);
|
|
697
|
+
// The following css variables are at the time of writing, global, because some components, besides
|
|
698
|
+
// the ch-checkbox, implement their own checkboxes. For example, the tabular-grid cell parts "selector-label"
|
|
699
|
+
// and "selector".
|
|
700
|
+
--mer-form-input__border-color: var(--mer-color__neutral-gray--500);
|
|
701
|
+
--mer-form-input__border-style: solid;
|
|
702
|
+
--mer-form-input__border-width: var(--mer-border__width--sm);
|
|
703
|
+
--mer-form-input__border: var(--mer-form-input__border-width)
|
|
704
|
+
var(--mer-form-input__border-style) var(--mer-form-input__border-color);
|
|
705
|
+
--mer-form-input__border-radius: var(--mer-border__radius--sm);
|
|
706
|
+
// the input checkbox checked styles, or radio button inner circle
|
|
707
|
+
--mer-form-input-check__border-width: var(--mer-border__radius--xs);
|
|
708
|
+
--mer-form-input-check__border-color: var(
|
|
709
|
+
--mer-border-color__neutral--active
|
|
710
|
+
);
|
|
711
|
+
--mer-form-input-check__border-color--disabled: var(
|
|
712
|
+
--mer-accent__primary--disabled
|
|
713
|
+
);
|
|
714
|
+
--mer-checkbox__option-checked-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='currentColor' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");
|
|
724
715
|
|
|
725
716
|
/*-------------------------------------------------------------
|
|
726
717
|
Inline Control (Should have the same height to look good inline)
|
|
727
718
|
-------------------------------------------------------------*/
|
|
728
719
|
--mer-control__block-size: var(--mer-spacing--lg);
|
|
720
|
+
--mer-control__block-size--tiny: var(--mer-spacing--md);
|
|
721
|
+
--mer-control-tiny__border-radius: var(--mer-border__radius--2xs);
|
|
729
722
|
|
|
730
723
|
/*----------------------
|
|
731
724
|
Label
|
|
732
725
|
----------------------*/
|
|
733
|
-
// size
|
|
734
726
|
// space between label and control
|
|
735
727
|
--mer-label__space: var(--mer-spacing--xs);
|
|
736
728
|
--mer-label__font-size: inherit;
|
|
737
729
|
--mer-label__font-weight: var(--mer-font__weight--semi-bold);
|
|
738
730
|
--mer-label__color: inherit;
|
|
731
|
+
|
|
732
|
+
/*----------------------
|
|
733
|
+
Window
|
|
734
|
+
----------------------*/
|
|
735
|
+
// TODO: This styles should better be applied on the ch-window.
|
|
736
|
+
--mer-window__border: var(--mer-border__width--sm) solid
|
|
737
|
+
var(--mer-color__elevation--04);
|
|
738
|
+
--mer-window__border-radius: var(--mer-border__radius--sm);
|
|
739
|
+
--mer-window__padding: var(--mer-spacing--xs);
|
|
740
|
+
--mer-window__bg-color: var(--mer-color__elevation--01);
|
|
741
|
+
--mer-window__gap: var(--mer-spacing--xs);
|
|
742
|
+
--mer-window__box-shadow: var(--mer-spacing--xs);
|
|
743
|
+
|
|
744
|
+
/*----------------------
|
|
745
|
+
Focus
|
|
746
|
+
----------------------*/
|
|
747
|
+
--mer-focus__outline-width: var(--mer-border__width--sm);
|
|
748
|
+
--mer-focus__outline-style: solid;
|
|
749
|
+
--mer-focus__outline-color: var(--mer-color__primary-blue--200);
|
|
750
|
+
--mer-focus__outline-offset: calc(var(--mer-system__border-width) * -1);
|
|
751
|
+
--borders-un-border-color__focused: var(--mer-focus__outline-color);
|
|
739
752
|
}
|
|
740
753
|
|
|
741
754
|
@mixin semantic-text() {
|
|
@@ -760,7 +773,9 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
760
773
|
--mer-accent__primary: var(--mer-color__primary-blue--200);
|
|
761
774
|
--mer-accent__primary--hover: var(--mer-color__primary-blue--400);
|
|
762
775
|
--mer-accent__primary--active: var(--mer-color__primary-blue--600);
|
|
763
|
-
--mer-accent__primary--disabled:
|
|
776
|
+
--mer-accent__primary--disabled: var(
|
|
777
|
+
--mer-color__neutral-gray--600
|
|
778
|
+
); // should be a variable ⚠️
|
|
764
779
|
--mer-accent__primary--destructive: var(--mer-color__message-red--100);
|
|
765
780
|
}
|
|
766
781
|
|
|
@@ -1083,22 +1098,112 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
1083
1098
|
}
|
|
1084
1099
|
}
|
|
1085
1100
|
|
|
1101
|
+
@mixin form-input-bg-x-rtl-support() {
|
|
1102
|
+
// has to be included in the root
|
|
1103
|
+
:root[dir="rtl"] {
|
|
1104
|
+
--mer-form-input__bg-position--x: calc(
|
|
1105
|
+
100% - var(--mer-form-input__bg-position--x-value)
|
|
1106
|
+
);
|
|
1107
|
+
}
|
|
1108
|
+
}
|
|
1109
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
1110
|
+
// Icons | Mask & Background
|
|
1111
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
1112
|
+
|
|
1113
|
+
// Icon mask styles
|
|
1114
|
+
@mixin mer-icon-mask-common-styles(
|
|
1115
|
+
$size: "sm",
|
|
1116
|
+
$mask-size: var(--icon-mask-size)
|
|
1117
|
+
) {
|
|
1118
|
+
$iconSize: var(--mer-icon__box--sm);
|
|
1119
|
+
@if $size == "lg" {
|
|
1120
|
+
$iconSize: var(--mer-icon__box--lg);
|
|
1121
|
+
}
|
|
1122
|
+
@include icon-mask-common-styles($iconSize, $iconSize, $mask-size);
|
|
1123
|
+
}
|
|
1124
|
+
|
|
1125
|
+
/// @group Icon
|
|
1126
|
+
/// @param {String} $selector [".icon-mask"] -
|
|
1127
|
+
/// @param {type} $icon-path [null] -
|
|
1128
|
+
/// @param {type} $icon-class [null] -
|
|
1129
|
+
/// @output
|
|
1130
|
+
@mixin icon-mask($selector: ".icon-mask", $icon-path: null, $icon-class: null) {
|
|
1131
|
+
#{$selector} {
|
|
1132
|
+
@if $icon-path != null {
|
|
1133
|
+
--icon-path: #{$icon-path};
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
@if $icon-class != null {
|
|
1137
|
+
@extend #{$icon-class} !optional;
|
|
1138
|
+
}
|
|
1139
|
+
|
|
1140
|
+
&::before {
|
|
1141
|
+
@extend %icon-mask--before;
|
|
1142
|
+
}
|
|
1143
|
+
}
|
|
1144
|
+
}
|
|
1145
|
+
|
|
1086
1146
|
%icon-mask--before {
|
|
1087
|
-
@include icon-mask-common-styles(
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1147
|
+
@include mer-icon-mask-common-styles($size: "sm", $mask-size: 100%);
|
|
1148
|
+
}
|
|
1149
|
+
|
|
1150
|
+
// Icon background styles
|
|
1151
|
+
@mixin mer-icon-background-common-styles(
|
|
1152
|
+
$size: "sm",
|
|
1153
|
+
$background-size: var(--icon-mask-size)
|
|
1154
|
+
) {
|
|
1155
|
+
$iconSize: var(--mer-icon__box--sm);
|
|
1156
|
+
@if $size == "lg" {
|
|
1157
|
+
$iconSize: var(--mer-icon__box--lg);
|
|
1158
|
+
}
|
|
1159
|
+
@include icon-background-common-styles(
|
|
1160
|
+
$iconSize,
|
|
1161
|
+
$iconSize,
|
|
1162
|
+
$background-size
|
|
1091
1163
|
);
|
|
1092
1164
|
}
|
|
1093
1165
|
|
|
1166
|
+
/// @group Icon
|
|
1167
|
+
/// @param {String} $selector [".icon-background"] -
|
|
1168
|
+
/// @param {type} $icon-path [null] -
|
|
1169
|
+
/// @param {type} $icon-class [null] -
|
|
1170
|
+
/// @output
|
|
1171
|
+
@mixin icon-background(
|
|
1172
|
+
$selector: ".icon-background",
|
|
1173
|
+
$icon-path: null,
|
|
1174
|
+
$icon-class: null
|
|
1175
|
+
) {
|
|
1176
|
+
#{$selector} {
|
|
1177
|
+
@if $icon-path != null {
|
|
1178
|
+
--icon-path: #{$icon-path};
|
|
1179
|
+
}
|
|
1180
|
+
|
|
1181
|
+
@if $icon-class != null {
|
|
1182
|
+
@extend #{$icon-class} !optional;
|
|
1183
|
+
}
|
|
1184
|
+
|
|
1185
|
+
&::before {
|
|
1186
|
+
@extend %icon-background--before;
|
|
1187
|
+
}
|
|
1188
|
+
}
|
|
1189
|
+
}
|
|
1190
|
+
|
|
1094
1191
|
%icon-background--before {
|
|
1095
|
-
@include icon-background-common-styles(
|
|
1096
|
-
$
|
|
1097
|
-
$block-size: var(--mer-icon__box--sm),
|
|
1192
|
+
@include mer-icon-background-common-styles(
|
|
1193
|
+
$size: "sm",
|
|
1098
1194
|
$background-size: 100%
|
|
1099
1195
|
);
|
|
1100
1196
|
}
|
|
1101
1197
|
|
|
1198
|
+
// Icon Input background styles
|
|
1199
|
+
@mixin icon-input-background-common-styles(
|
|
1200
|
+
$background-size: "0",
|
|
1201
|
+
$background-position-x: "0"
|
|
1202
|
+
) {
|
|
1203
|
+
background: var(--icon-path) $background-position-x center / $background-size
|
|
1204
|
+
no-repeat;
|
|
1205
|
+
}
|
|
1206
|
+
|
|
1102
1207
|
%icon-input-background {
|
|
1103
1208
|
@include icon-input-background-common-styles(
|
|
1104
1209
|
$background-size: var(--mer-form-input__icon-size),
|
|
@@ -1106,20 +1211,86 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
1106
1211
|
);
|
|
1107
1212
|
}
|
|
1108
1213
|
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1214
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
1215
|
+
// Multicolor Selectors Generator
|
|
1216
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
1217
|
+
|
|
1218
|
+
// Single selector generator
|
|
1219
|
+
@mixin generate-monochrome-icon-selector(
|
|
1220
|
+
$input-selector,
|
|
1221
|
+
$output-selector,
|
|
1222
|
+
$light: true,
|
|
1223
|
+
$dark: true,
|
|
1224
|
+
$light-theme-selector: ".light",
|
|
1225
|
+
$dark-theme-selector: ".dark",
|
|
1226
|
+
$enabled: true,
|
|
1227
|
+
$hover: true,
|
|
1228
|
+
$active: true,
|
|
1229
|
+
$disabled: true
|
|
1230
|
+
) {
|
|
1231
|
+
// Light
|
|
1232
|
+
@if $light {
|
|
1233
|
+
#{$light-theme-selector} {
|
|
1234
|
+
#{$output-selector} {
|
|
1235
|
+
@if $enabled {
|
|
1236
|
+
@extend #{$input-selector}--enabled-light;
|
|
1237
|
+
}
|
|
1238
|
+
|
|
1239
|
+
@if $hover {
|
|
1240
|
+
&:hover {
|
|
1241
|
+
@extend #{$input-selector}--hover-light;
|
|
1242
|
+
}
|
|
1243
|
+
}
|
|
1244
|
+
|
|
1245
|
+
@if $active {
|
|
1246
|
+
&:active {
|
|
1247
|
+
@extend #{$input-selector}--active-light;
|
|
1248
|
+
}
|
|
1249
|
+
}
|
|
1250
|
+
|
|
1251
|
+
@if $disabled {
|
|
1252
|
+
&:disabled {
|
|
1253
|
+
@extend #{$input-selector}--disabled-light;
|
|
1254
|
+
}
|
|
1255
|
+
}
|
|
1256
|
+
}
|
|
1257
|
+
}
|
|
1258
|
+
}
|
|
1259
|
+
|
|
1260
|
+
// Dark
|
|
1261
|
+
@if $dark {
|
|
1262
|
+
#{$dark-theme-selector} {
|
|
1263
|
+
#{$output-selector} {
|
|
1264
|
+
@if $enabled {
|
|
1265
|
+
@extend #{$input-selector}--enabled-dark;
|
|
1266
|
+
}
|
|
1267
|
+
|
|
1268
|
+
@if $hover {
|
|
1269
|
+
&:hover {
|
|
1270
|
+
@extend #{$input-selector}--hover-dark;
|
|
1271
|
+
}
|
|
1272
|
+
}
|
|
1273
|
+
|
|
1274
|
+
@if $active {
|
|
1275
|
+
&:active {
|
|
1276
|
+
@extend #{$input-selector}--active-dark;
|
|
1277
|
+
}
|
|
1278
|
+
}
|
|
1279
|
+
|
|
1280
|
+
@if $disabled {
|
|
1281
|
+
&:disabled {
|
|
1282
|
+
@extend #{$input-selector}--disabled-dark;
|
|
1283
|
+
}
|
|
1284
|
+
}
|
|
1285
|
+
}
|
|
1286
|
+
}
|
|
1115
1287
|
}
|
|
1116
1288
|
}
|
|
1117
1289
|
|
|
1118
1290
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1119
|
-
//
|
|
1291
|
+
// Monochrome Selectors Generator
|
|
1120
1292
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1121
1293
|
|
|
1122
|
-
// Single selector generator
|
|
1123
1294
|
@mixin generate-monochrome-icon-selector(
|
|
1124
1295
|
$input-selector,
|
|
1125
1296
|
$output-selector,
|
|
@@ -1127,72 +1298,138 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
1127
1298
|
$dark-theme-selector: ".dark",
|
|
1128
1299
|
$light: true,
|
|
1129
1300
|
$dark: true,
|
|
1130
|
-
$
|
|
1131
|
-
$primary-hover: true,
|
|
1132
|
-
$primary-active: true,
|
|
1133
|
-
$primary-disabled: true,
|
|
1301
|
+
$on-surface: true,
|
|
1134
1302
|
$on-primary: true,
|
|
1135
|
-
$on-primary-hover: true,
|
|
1136
|
-
$on-primary-active: true,
|
|
1137
1303
|
$on-disabled: true,
|
|
1138
|
-
$
|
|
1304
|
+
$on-message: true,
|
|
1305
|
+
$on-elevation: true,
|
|
1306
|
+
$primary: true,
|
|
1307
|
+
$error: true,
|
|
1308
|
+
$warning: true,
|
|
1309
|
+
$success: true,
|
|
1310
|
+
$neutral: true,
|
|
1311
|
+
$highlighted: true,
|
|
1312
|
+
$bright: true
|
|
1139
1313
|
) {
|
|
1140
1314
|
// Light
|
|
1141
1315
|
@if $light {
|
|
1142
1316
|
#{$light-theme-selector} {
|
|
1143
1317
|
#{$output-selector} {
|
|
1318
|
+
// on-surface
|
|
1319
|
+
@if $on-surface {
|
|
1320
|
+
&--on-surface {
|
|
1321
|
+
@extend #{$input-selector}--on-surface-enabled-light !optional;
|
|
1322
|
+
}
|
|
1323
|
+
}
|
|
1324
|
+
|
|
1325
|
+
// on-primary
|
|
1326
|
+
@if $on-primary {
|
|
1327
|
+
&--on-primary:enabled {
|
|
1328
|
+
@extend #{$input-selector}--on-primary-enabled-light !optional;
|
|
1329
|
+
}
|
|
1330
|
+
&--on-primary:hover {
|
|
1331
|
+
@extend #{$input-selector}--on-primary-hover-light !optional;
|
|
1332
|
+
}
|
|
1333
|
+
&--on-primary:active {
|
|
1334
|
+
@extend #{$input-selector}--on-primary-active-light !optional;
|
|
1335
|
+
}
|
|
1336
|
+
&--on-primary:disabled {
|
|
1337
|
+
@extend #{$input-selector}--on-primary-disabled-light !optional;
|
|
1338
|
+
}
|
|
1339
|
+
}
|
|
1340
|
+
|
|
1341
|
+
// on-disabled
|
|
1342
|
+
@if $on-disabled {
|
|
1343
|
+
&--on-disabled:enabled {
|
|
1344
|
+
@extend #{$input-selector}--on-disabled-enabled-light !optional;
|
|
1345
|
+
}
|
|
1346
|
+
}
|
|
1347
|
+
|
|
1348
|
+
// on-message
|
|
1349
|
+
@if $on-message {
|
|
1350
|
+
&--on-message:enabled {
|
|
1351
|
+
@extend #{$input-selector}--on-message-enabled-light !optional;
|
|
1352
|
+
}
|
|
1353
|
+
}
|
|
1354
|
+
|
|
1355
|
+
// on-elevation
|
|
1356
|
+
@if $on-elevation {
|
|
1357
|
+
&--on-elevation:enabled {
|
|
1358
|
+
@extend #{$input-selector}--on-elevation-enabled-light !optional;
|
|
1359
|
+
}
|
|
1360
|
+
}
|
|
1361
|
+
|
|
1144
1362
|
// primary
|
|
1145
1363
|
@if $primary {
|
|
1146
|
-
&--primary {
|
|
1147
|
-
@extend #{$input-selector}--primary-light !optional;
|
|
1364
|
+
&--primary:enabled {
|
|
1365
|
+
@extend #{$input-selector}--primary-enabled-light !optional;
|
|
1148
1366
|
}
|
|
1149
|
-
}
|
|
1150
|
-
@if $primary-hover {
|
|
1151
|
-
&--primary-hover,
|
|
1152
1367
|
&--primary:hover {
|
|
1153
1368
|
@extend #{$input-selector}--primary-hover-light !optional;
|
|
1154
1369
|
}
|
|
1155
|
-
}
|
|
1156
|
-
@if $primary-active {
|
|
1157
|
-
&--primary-active,
|
|
1158
1370
|
&--primary:active {
|
|
1159
1371
|
@extend #{$input-selector}--primary-active-light !optional;
|
|
1160
1372
|
}
|
|
1161
|
-
}
|
|
1162
|
-
@if $primary-disabled {
|
|
1163
|
-
&--primary-disabled,
|
|
1164
1373
|
&--primary:disabled {
|
|
1165
1374
|
@extend #{$input-selector}--primary-disabled-light !optional;
|
|
1166
1375
|
}
|
|
1167
1376
|
}
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1377
|
+
|
|
1378
|
+
// error
|
|
1379
|
+
@if $error {
|
|
1380
|
+
&--error:enabled {
|
|
1381
|
+
@extend #{$input-selector}--error-enabled-light !optional;
|
|
1172
1382
|
}
|
|
1173
1383
|
}
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1384
|
+
|
|
1385
|
+
// warning
|
|
1386
|
+
@if $warning {
|
|
1387
|
+
&--warning:enabled {
|
|
1388
|
+
@extend #{$input-selector}--warning-enabled-light !optional;
|
|
1178
1389
|
}
|
|
1179
1390
|
}
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1391
|
+
|
|
1392
|
+
// warning
|
|
1393
|
+
@if $warning {
|
|
1394
|
+
&--warning:enabled {
|
|
1395
|
+
@extend #{$input-selector}--warning-enabled-light !optional;
|
|
1184
1396
|
}
|
|
1185
1397
|
}
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1398
|
+
|
|
1399
|
+
// success
|
|
1400
|
+
@if $success {
|
|
1401
|
+
&--success:enabled {
|
|
1402
|
+
@extend #{$input-selector}--success-enabled-light !optional;
|
|
1190
1403
|
}
|
|
1191
1404
|
}
|
|
1405
|
+
|
|
1192
1406
|
// neutral
|
|
1193
1407
|
@if $neutral {
|
|
1194
|
-
&--neutral {
|
|
1195
|
-
@extend #{$input-selector}--neutral-light !optional;
|
|
1408
|
+
&--neutral:enabled {
|
|
1409
|
+
@extend #{$input-selector}--neutral-enabled-light !optional;
|
|
1410
|
+
}
|
|
1411
|
+
&--neutral:hover {
|
|
1412
|
+
@extend #{$input-selector}--neutral-hover-light !optional;
|
|
1413
|
+
}
|
|
1414
|
+
&--neutral:active {
|
|
1415
|
+
@extend #{$input-selector}--neutral-active-light !optional;
|
|
1416
|
+
}
|
|
1417
|
+
&--neutral:disabled {
|
|
1418
|
+
@extend #{$input-selector}--neutral-disabled-light !optional;
|
|
1419
|
+
}
|
|
1420
|
+
}
|
|
1421
|
+
|
|
1422
|
+
// highlighted
|
|
1423
|
+
@if $highlighted {
|
|
1424
|
+
&--highlighted:enabled {
|
|
1425
|
+
@extend #{$input-selector}--highlighted-enabled-light !optional;
|
|
1426
|
+
}
|
|
1427
|
+
}
|
|
1428
|
+
|
|
1429
|
+
// bright
|
|
1430
|
+
@if $bright {
|
|
1431
|
+
&--bright:enabled {
|
|
1432
|
+
@extend #{$input-selector}--bright-enabled-light !optional;
|
|
1196
1433
|
}
|
|
1197
1434
|
}
|
|
1198
1435
|
}
|
|
@@ -1203,58 +1440,121 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
1203
1440
|
@if $dark {
|
|
1204
1441
|
#{$dark-theme-selector} {
|
|
1205
1442
|
#{$output-selector} {
|
|
1443
|
+
// on-surface
|
|
1444
|
+
@if $on-surface {
|
|
1445
|
+
&--on-surface {
|
|
1446
|
+
@extend #{$input-selector}--on-surface-enabled-dark !optional;
|
|
1447
|
+
}
|
|
1448
|
+
}
|
|
1449
|
+
|
|
1450
|
+
// on-primary
|
|
1451
|
+
@if $on-primary {
|
|
1452
|
+
&--on-primary:enabled {
|
|
1453
|
+
@extend #{$input-selector}--on-primary-enabled-dark !optional;
|
|
1454
|
+
}
|
|
1455
|
+
&--on-primary:hover {
|
|
1456
|
+
@extend #{$input-selector}--on-primary-hover-dark !optional;
|
|
1457
|
+
}
|
|
1458
|
+
&--on-primary:active {
|
|
1459
|
+
@extend #{$input-selector}--on-primary-active-dark !optional;
|
|
1460
|
+
}
|
|
1461
|
+
&--on-primary:disabled {
|
|
1462
|
+
@extend #{$input-selector}--on-primary-disabled-dark !optional;
|
|
1463
|
+
}
|
|
1464
|
+
}
|
|
1465
|
+
|
|
1466
|
+
// on-disabled
|
|
1467
|
+
@if $on-disabled {
|
|
1468
|
+
&--on-disabled:enabled {
|
|
1469
|
+
@extend #{$input-selector}--on-disabled-enabled-dark !optional;
|
|
1470
|
+
}
|
|
1471
|
+
}
|
|
1472
|
+
|
|
1473
|
+
// on-message
|
|
1474
|
+
@if $on-message {
|
|
1475
|
+
&--on-message:enabled {
|
|
1476
|
+
@extend #{$input-selector}--on-message-enabled-dark !optional;
|
|
1477
|
+
}
|
|
1478
|
+
}
|
|
1479
|
+
|
|
1480
|
+
// on-elevation
|
|
1481
|
+
@if $on-elevation {
|
|
1482
|
+
&--on-elevation:enabled {
|
|
1483
|
+
@extend #{$input-selector}--on-elevation-enabled-dark !optional;
|
|
1484
|
+
}
|
|
1485
|
+
}
|
|
1486
|
+
|
|
1206
1487
|
// primary
|
|
1207
1488
|
@if $primary {
|
|
1208
|
-
&--primary {
|
|
1209
|
-
@extend #{$input-selector}--primary-dark !optional;
|
|
1489
|
+
&--primary:enabled {
|
|
1490
|
+
@extend #{$input-selector}--primary-enabled-dark !optional;
|
|
1210
1491
|
}
|
|
1211
|
-
}
|
|
1212
|
-
@if $primary-hover {
|
|
1213
|
-
&--primary-hover,
|
|
1214
1492
|
&--primary:hover {
|
|
1215
1493
|
@extend #{$input-selector}--primary-hover-dark !optional;
|
|
1216
1494
|
}
|
|
1217
|
-
}
|
|
1218
|
-
@if $primary-active {
|
|
1219
|
-
&--primary-active,
|
|
1220
1495
|
&--primary:active {
|
|
1221
1496
|
@extend #{$input-selector}--primary-active-dark !optional;
|
|
1222
1497
|
}
|
|
1223
|
-
}
|
|
1224
|
-
@if $primary-disabled {
|
|
1225
|
-
&--primary-disabled,
|
|
1226
1498
|
&--primary:disabled {
|
|
1227
1499
|
@extend #{$input-selector}--primary-disabled-dark !optional;
|
|
1228
1500
|
}
|
|
1229
1501
|
}
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1502
|
+
|
|
1503
|
+
// error
|
|
1504
|
+
@if $error {
|
|
1505
|
+
&--error:enabled {
|
|
1506
|
+
@extend #{$input-selector}--error-enabled-dark !optional;
|
|
1234
1507
|
}
|
|
1235
1508
|
}
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1509
|
+
|
|
1510
|
+
// warning
|
|
1511
|
+
@if $warning {
|
|
1512
|
+
&--warning:enabled {
|
|
1513
|
+
@extend #{$input-selector}--warning-enabled-dark !optional;
|
|
1240
1514
|
}
|
|
1241
1515
|
}
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1516
|
+
|
|
1517
|
+
// warning
|
|
1518
|
+
@if $warning {
|
|
1519
|
+
&--warning:enabled {
|
|
1520
|
+
@extend #{$input-selector}--warning-enabled-dark !optional;
|
|
1246
1521
|
}
|
|
1247
1522
|
}
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1523
|
+
|
|
1524
|
+
// success
|
|
1525
|
+
@if $success {
|
|
1526
|
+
&--success:enabled {
|
|
1527
|
+
@extend #{$input-selector}--success-enabled-dark !optional;
|
|
1252
1528
|
}
|
|
1253
1529
|
}
|
|
1530
|
+
|
|
1254
1531
|
// neutral
|
|
1255
1532
|
@if $neutral {
|
|
1256
|
-
&--neutral {
|
|
1257
|
-
@extend #{$input-selector}--neutral-dark !optional;
|
|
1533
|
+
&--neutral:enabled {
|
|
1534
|
+
@extend #{$input-selector}--neutral-enabled-dark !optional;
|
|
1535
|
+
}
|
|
1536
|
+
&--neutral:hover {
|
|
1537
|
+
@extend #{$input-selector}--neutral-hover-dark !optional;
|
|
1538
|
+
}
|
|
1539
|
+
&--neutral:active {
|
|
1540
|
+
@extend #{$input-selector}--neutral-active-dark !optional;
|
|
1541
|
+
}
|
|
1542
|
+
&--neutral:disabled {
|
|
1543
|
+
@extend #{$input-selector}--neutral-disabled-dark !optional;
|
|
1544
|
+
}
|
|
1545
|
+
}
|
|
1546
|
+
|
|
1547
|
+
// highlighted
|
|
1548
|
+
@if $highlighted {
|
|
1549
|
+
&--highlighted:enabled {
|
|
1550
|
+
@extend #{$input-selector}--highlighted-enabled-dark !optional;
|
|
1551
|
+
}
|
|
1552
|
+
}
|
|
1553
|
+
|
|
1554
|
+
// bright
|
|
1555
|
+
@if $bright {
|
|
1556
|
+
&--bright:enabled {
|
|
1557
|
+
@extend #{$input-selector}--bright-enabled-dark !optional;
|
|
1258
1558
|
}
|
|
1259
1559
|
}
|
|
1260
1560
|
}
|
|
@@ -1262,22 +1562,24 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
1262
1562
|
}
|
|
1263
1563
|
}
|
|
1264
1564
|
|
|
1265
|
-
// Monochrome
|
|
1266
1565
|
@mixin process-monochrome-icons-list(
|
|
1267
1566
|
$monochrome-icon-selectors,
|
|
1268
1567
|
$light: true,
|
|
1269
1568
|
$dark: true,
|
|
1270
1569
|
$light-theme-selector: ".light",
|
|
1271
1570
|
$dark-theme-selector: ".dark",
|
|
1272
|
-
$
|
|
1273
|
-
$primary-hover: true,
|
|
1274
|
-
$primary-active: true,
|
|
1275
|
-
$primary-disabled: true,
|
|
1571
|
+
$on-surface: true,
|
|
1276
1572
|
$on-primary: true,
|
|
1277
|
-
$on-primary-hover: true,
|
|
1278
|
-
$on-primary-active: true,
|
|
1279
1573
|
$on-disabled: true,
|
|
1280
|
-
$
|
|
1574
|
+
$on-message: true,
|
|
1575
|
+
$on-elevation: true,
|
|
1576
|
+
$primary: true,
|
|
1577
|
+
$error: true,
|
|
1578
|
+
$warning: true,
|
|
1579
|
+
$success: true,
|
|
1580
|
+
$neutral: true,
|
|
1581
|
+
$highlighted: true,
|
|
1582
|
+
$bright: true
|
|
1281
1583
|
) {
|
|
1282
1584
|
@each $monochrome-icon-selector in $monochrome-icon-selectors {
|
|
1283
1585
|
@include generate-monochrome-icon-selector(
|
|
@@ -1287,17 +1589,50 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
1287
1589
|
$dark: $dark,
|
|
1288
1590
|
$light-theme-selector: $light-theme-selector,
|
|
1289
1591
|
$dark-theme-selector: $dark-theme-selector,
|
|
1290
|
-
$
|
|
1291
|
-
$primary-hover: $primary-hover,
|
|
1292
|
-
$primary-active: $primary-active,
|
|
1293
|
-
$primary-disabled: $primary-disabled,
|
|
1592
|
+
$on-surface: $on-surface,
|
|
1294
1593
|
$on-primary: $on-primary,
|
|
1295
|
-
$on-primary-hover: $on-primary-hover,
|
|
1296
|
-
$on-primary-active: $on-primary-active,
|
|
1297
1594
|
$on-disabled: $on-disabled,
|
|
1298
|
-
$
|
|
1595
|
+
$on-message: $on-message,
|
|
1596
|
+
$on-elevation: $on-elevation,
|
|
1597
|
+
$primary: $primary,
|
|
1598
|
+
$error: $error,
|
|
1599
|
+
$warning: $warning,
|
|
1600
|
+
$success: $success,
|
|
1601
|
+
$neutral: $neutral,
|
|
1602
|
+
$highlighted: $highlighted,
|
|
1603
|
+
$bright: $bright
|
|
1604
|
+
);
|
|
1605
|
+
}
|
|
1606
|
+
}
|
|
1607
|
+
|
|
1608
|
+
// Generate icons virtual selectors
|
|
1609
|
+
|
|
1610
|
+
/// It returns a list of virtual selectors. This function is designed to
|
|
1611
|
+
/// process the icons selectors generated by "svg-sass-generator" package,
|
|
1612
|
+
/// present in this monorepo. This function only generates one part of the
|
|
1613
|
+
/// selector: %icon__{category-name}_{icon-name}. ie.: %icon__system_user.
|
|
1614
|
+
/// Another mixin should then combine the selectors that this function provides
|
|
1615
|
+
/// with the rest of the selector. Generally, the other part of the selector
|
|
1616
|
+
/// includes the name of the icon state, and the name of the color scheme.
|
|
1617
|
+
/// An example of a complete selector: %icon__system_user--primary-light.
|
|
1618
|
+
/// @param {List} $icons-list - The list of icons
|
|
1619
|
+
/// @param {String} $category - The category name of the list
|
|
1620
|
+
/// @param {String} $prefix_category-separator - The prefix-category separator
|
|
1621
|
+
/// @return {String} $category_icon-separator - The category-icon separator
|
|
1622
|
+
@function generate-icons-virtual-selectors(
|
|
1623
|
+
$icons-list,
|
|
1624
|
+
$category,
|
|
1625
|
+
$prefix_category-separator: "__",
|
|
1626
|
+
$category_icon-separator: "_"
|
|
1627
|
+
) {
|
|
1628
|
+
$output-list: ();
|
|
1629
|
+
@each $icon in $icons-list {
|
|
1630
|
+
$output-list: append(
|
|
1631
|
+
$output-list,
|
|
1632
|
+
"%icon#{$prefix_category-separator}#{$category}#{$category_icon-separator}#{$icon}"
|
|
1299
1633
|
);
|
|
1300
1634
|
}
|
|
1635
|
+
@return $output-list;
|
|
1301
1636
|
}
|
|
1302
1637
|
|
|
1303
1638
|
|
|
@@ -1997,6 +2332,654 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
1997
2332
|
// background-image: url("../src/showcase/assets/icons/module-open.svg");
|
|
1998
2333
|
// }
|
|
1999
2334
|
|
|
2335
|
+
@mixin tabular-grid-tokens() {
|
|
2336
|
+
// Generic tokens for texts
|
|
2337
|
+
--grid-base__font-size: var(--mer-body__font-size);
|
|
2338
|
+
--grid-base__bg-color: var(--mer-color__elevation--01);
|
|
2339
|
+
--grid-base__icon-gap: var(--mer-spacing--xs);
|
|
2340
|
+
|
|
2341
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2342
|
+
// Part "Header"
|
|
2343
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2344
|
+
|
|
2345
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2346
|
+
// Part "Main"
|
|
2347
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2348
|
+
|
|
2349
|
+
// This color simulates the grid cells border at the time of writing.
|
|
2350
|
+
--grid-main__bg-color: var(--mer-item__border-color);
|
|
2351
|
+
}
|
|
2352
|
+
|
|
2353
|
+
@mixin tabular-grid-row-tokens() {
|
|
2354
|
+
/* This style-sheet applies for:
|
|
2355
|
+
- ch-grid-row
|
|
2356
|
+
- ch-grid-rowset
|
|
2357
|
+
- ch-grid-rowset-legend
|
|
2358
|
+
*/
|
|
2359
|
+
|
|
2360
|
+
--grid-rowset-legend__font-family: var(--mer-font-family--inter-semi-bold);
|
|
2361
|
+
--grid-rowset-legend__font-size: var(--grid-base__font-size);
|
|
2362
|
+
--grid-rowset-legend__color: var(--grid-base__color);
|
|
2363
|
+
--grid-rowset-legend__color--hover: var(--mer-item__color--hover);
|
|
2364
|
+
--grid-rowset-legend__padding-inline: var(--mer-item__padding-inline);
|
|
2365
|
+
--grid-rowset-legend__padding-block: var(--mer-spacing--3xs);
|
|
2366
|
+
--grid-rowset-legend__indent: var(--mer-spacing--md);
|
|
2367
|
+
|
|
2368
|
+
// =======================================
|
|
2369
|
+
// ch-grid-rowset-legend
|
|
2370
|
+
// =======================================
|
|
2371
|
+
|
|
2372
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2373
|
+
// Part "caret"
|
|
2374
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2375
|
+
|
|
2376
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2377
|
+
// Part "selector-label"
|
|
2378
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2379
|
+
|
|
2380
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2381
|
+
// Part "selector"
|
|
2382
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2383
|
+
|
|
2384
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2385
|
+
// Part "icon"
|
|
2386
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2387
|
+
|
|
2388
|
+
// =======================================
|
|
2389
|
+
// ch-grid-row-actions
|
|
2390
|
+
// =======================================
|
|
2391
|
+
|
|
2392
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2393
|
+
// Part "mask"
|
|
2394
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2395
|
+
|
|
2396
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2397
|
+
// Part "window"
|
|
2398
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2399
|
+
|
|
2400
|
+
--grid-row-actions-show-on-row-hover__margin-inline-end: var(
|
|
2401
|
+
--mer-spacing--xs
|
|
2402
|
+
);
|
|
2403
|
+
|
|
2404
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2405
|
+
// Part "main"
|
|
2406
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2407
|
+
}
|
|
2408
|
+
|
|
2409
|
+
@mixin tabular-grid-column-tokens() {
|
|
2410
|
+
// =======================================
|
|
2411
|
+
// Part "bar"
|
|
2412
|
+
// =======================================
|
|
2413
|
+
|
|
2414
|
+
--grid-column-bar__gap: var(--mer-spacing--xs);
|
|
2415
|
+
--grid-column-bar__bg-color: var(--grid-base__bg-color);
|
|
2416
|
+
--grid-column-bar__color: var(--mer-text__bright);
|
|
2417
|
+
--grid-column-bar__padding-inline: var(--mer-spacing--xs);
|
|
2418
|
+
--grid-column-bar__padding-block: var(--mer-spacing--xs);
|
|
2419
|
+
--grid-column-bar__font-size: var(--grid-base__font-size);
|
|
2420
|
+
--grid-column-bar__font-family: var(--mer-font-family--inter-semi-bold);
|
|
2421
|
+
|
|
2422
|
+
// =======================================
|
|
2423
|
+
// Part "bar-selector"
|
|
2424
|
+
// =======================================
|
|
2425
|
+
|
|
2426
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2427
|
+
// Part "selector-label"
|
|
2428
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2429
|
+
|
|
2430
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2431
|
+
// Part "selector"
|
|
2432
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2433
|
+
|
|
2434
|
+
// =======================================
|
|
2435
|
+
// Part "bar-name"
|
|
2436
|
+
// =======================================
|
|
2437
|
+
|
|
2438
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2439
|
+
// Part "bar-name-icon"
|
|
2440
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2441
|
+
|
|
2442
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2443
|
+
// Part "bar-name-text"
|
|
2444
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2445
|
+
|
|
2446
|
+
// =======================================
|
|
2447
|
+
// Part "bar-sort"
|
|
2448
|
+
// =======================================
|
|
2449
|
+
|
|
2450
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2451
|
+
// Part "bar-sort-ascending"
|
|
2452
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2453
|
+
|
|
2454
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2455
|
+
// Part "bar-sort-descending"
|
|
2456
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2457
|
+
|
|
2458
|
+
// =======================================
|
|
2459
|
+
// Part "bar-settings"
|
|
2460
|
+
// =======================================
|
|
2461
|
+
|
|
2462
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2463
|
+
// Part "bar-settings-button"
|
|
2464
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2465
|
+
|
|
2466
|
+
// =======================================
|
|
2467
|
+
// Part "bar-resize"
|
|
2468
|
+
// =======================================
|
|
2469
|
+
|
|
2470
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2471
|
+
// Part "bar-resize-split"
|
|
2472
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2473
|
+
|
|
2474
|
+
--grid-bar-resize-split__inline-size: var(--mer-spacing--2xs);
|
|
2475
|
+
--grid-bar-resize-split__bg-color: transparent;
|
|
2476
|
+
--grid-bar-resize-split__border-inline-end: var(--mer-border__width--sm) solid
|
|
2477
|
+
transparent;
|
|
2478
|
+
--grid-bar-resize-split__border-inline-end-color--hover: var(
|
|
2479
|
+
--grid-column-bar__color
|
|
2480
|
+
);
|
|
2481
|
+
}
|
|
2482
|
+
|
|
2483
|
+
@mixin tabular-grid-cell-tokens() {
|
|
2484
|
+
// note: grid-cell is considered an "item", and because of this, the styles are
|
|
2485
|
+
// applied through "item" @mixins. This ensures consistency across all system
|
|
2486
|
+
// list items.
|
|
2487
|
+
|
|
2488
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2489
|
+
// Part "drag-icon"
|
|
2490
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2491
|
+
|
|
2492
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2493
|
+
// Part "selector-label"
|
|
2494
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2495
|
+
|
|
2496
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2497
|
+
// Part "selector"
|
|
2498
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2499
|
+
}
|
|
2500
|
+
|
|
2501
|
+
// --checkbox-check__color: var(--mer-border-color__neutral--active);
|
|
2502
|
+
|
|
2503
|
+
|
|
2504
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2505
|
+
// ch-grid
|
|
2506
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2507
|
+
%tabular-grid {
|
|
2508
|
+
@include tabular-grid-tokens();
|
|
2509
|
+
@include tabular-grid-row-tokens();
|
|
2510
|
+
@include tabular-grid-column-tokens();
|
|
2511
|
+
@include tabular-grid-cell-tokens();
|
|
2512
|
+
}
|
|
2513
|
+
|
|
2514
|
+
%tabular-grid__main {
|
|
2515
|
+
background-color: var(--grid-main__bg-color);
|
|
2516
|
+
}
|
|
2517
|
+
|
|
2518
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2519
|
+
// ch-grid-column
|
|
2520
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2521
|
+
|
|
2522
|
+
%tabular-grid-column__bar {
|
|
2523
|
+
position: relative;
|
|
2524
|
+
width: 100%;
|
|
2525
|
+
gap: var(--grid-column-bar__gap);
|
|
2526
|
+
background-color: var(--grid-column-bar__bg-color);
|
|
2527
|
+
color: var(--grid-column-bar__color);
|
|
2528
|
+
padding-inline: var(--grid-column-bar__padding-inline);
|
|
2529
|
+
padding-block: var(--grid-column-bar__padding-block);
|
|
2530
|
+
font-size: var(--grid-column-bar__font-size);
|
|
2531
|
+
font-family: var(--grid-column-bar__font-family);
|
|
2532
|
+
line-height: var(--mer-item__line-height);
|
|
2533
|
+
}
|
|
2534
|
+
|
|
2535
|
+
%tabular-grid-column__bar-resize-split {
|
|
2536
|
+
position: absolute;
|
|
2537
|
+
height: 100%;
|
|
2538
|
+
top: 0;
|
|
2539
|
+
right: 0;
|
|
2540
|
+
inline-size: var(--grid-bar-resize-split__inline-size);
|
|
2541
|
+
border-inline-end: var(--grid-bar-resize-split__border-inline-end);
|
|
2542
|
+
background-color: var(--grid-bar-resize-split__bg-color);
|
|
2543
|
+
&--hover {
|
|
2544
|
+
border-inline-end-color: var(
|
|
2545
|
+
--grid-bar-resize-split__border-inline-end-color--hover
|
|
2546
|
+
);
|
|
2547
|
+
}
|
|
2548
|
+
}
|
|
2549
|
+
|
|
2550
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2551
|
+
// ch-grid-row
|
|
2552
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2553
|
+
|
|
2554
|
+
// no styles on ch-grid-row, since it has "display:contents"
|
|
2555
|
+
%tabular-grid-row {
|
|
2556
|
+
border: 1px solid transparent;
|
|
2557
|
+
background-color: var(--grid-base__bg-color);
|
|
2558
|
+
}
|
|
2559
|
+
|
|
2560
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2561
|
+
// ch-grid-rowset
|
|
2562
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2563
|
+
%tabular-grid-rowset {
|
|
2564
|
+
}
|
|
2565
|
+
|
|
2566
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2567
|
+
// ch-grid-rowset-legend
|
|
2568
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2569
|
+
%tabular-grid-rowset-legend {
|
|
2570
|
+
cursor: pointer;
|
|
2571
|
+
font-family: var(--grid-rowset-legend__font-family);
|
|
2572
|
+
font-size: var(--grid-rowset-legend__font-size);
|
|
2573
|
+
color: var(--grid-rowset-legend__color);
|
|
2574
|
+
padding-inline: var(--grid-rowset-legend__padding-inline);
|
|
2575
|
+
padding-block: var(--grid-rowset-legend__padding-block);
|
|
2576
|
+
background-color: var(--mer-color__elevation--02);
|
|
2577
|
+
|
|
2578
|
+
&:hover {
|
|
2579
|
+
color: var(--grid-rowset-legend__color--hover);
|
|
2580
|
+
}
|
|
2581
|
+
|
|
2582
|
+
// reset margin-inline-start
|
|
2583
|
+
margin-inline-start: 0;
|
|
2584
|
+
padding-inline-start: calc(
|
|
2585
|
+
var(--indent) * (var(--level) - 1) + var(--grid-column-bar__padding-inline)
|
|
2586
|
+
);
|
|
2587
|
+
--indent: var(--grid-rowset-legend__indent);
|
|
2588
|
+
}
|
|
2589
|
+
|
|
2590
|
+
// Parts
|
|
2591
|
+
// TODO
|
|
2592
|
+
%tabular-grid-rowset-legend__caret {
|
|
2593
|
+
}
|
|
2594
|
+
%tabular-grid-rowset-legend__selector-label {
|
|
2595
|
+
}
|
|
2596
|
+
%tabular-grid-rowset-legend__selector {
|
|
2597
|
+
}
|
|
2598
|
+
%tabular-grid-rowset-legend__icon {
|
|
2599
|
+
}
|
|
2600
|
+
|
|
2601
|
+
// no styles on ch-grid-row, since it has "display:contents"
|
|
2602
|
+
%tabular-grid-row {
|
|
2603
|
+
}
|
|
2604
|
+
|
|
2605
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2606
|
+
// ch-grid-cell
|
|
2607
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2608
|
+
|
|
2609
|
+
%tabular-grid-cell {
|
|
2610
|
+
@extend %item-structure;
|
|
2611
|
+
@extend %item-font;
|
|
2612
|
+
color: var(--mer-item__color);
|
|
2613
|
+
|
|
2614
|
+
&[focused] {
|
|
2615
|
+
@include focus-style(true);
|
|
2616
|
+
}
|
|
2617
|
+
|
|
2618
|
+
position: relative;
|
|
2619
|
+
&:after {
|
|
2620
|
+
// WA since cell hover background color (when row highlighted attribute is present), is a tinted blue
|
|
2621
|
+
// (has opacity), and it blends with the gray bg-color of the ch grid "main" part, causing
|
|
2622
|
+
// the resulting combination of colors a different blue tone than what is expected. The reason
|
|
2623
|
+
// the grid "main" part has a light gray, instead of a dark gray, is because the grid border is
|
|
2624
|
+
// not a real border, but an illusion caused by the main 1px gap.
|
|
2625
|
+
content: "";
|
|
2626
|
+
display: block;
|
|
2627
|
+
position: absolute;
|
|
2628
|
+
width: 100%;
|
|
2629
|
+
height: 100%;
|
|
2630
|
+
left: 0;
|
|
2631
|
+
top: 0;
|
|
2632
|
+
background-color: var(--mer-item__bg-color);
|
|
2633
|
+
z-index: -1;
|
|
2634
|
+
}
|
|
2635
|
+
}
|
|
2636
|
+
%tabular-grid-cell__selector-label {
|
|
2637
|
+
line-height: 0;
|
|
2638
|
+
font-size: 0;
|
|
2639
|
+
background-color: transparent;
|
|
2640
|
+
margin-inline-end: var(--mer-label__space);
|
|
2641
|
+
block-size: var(--mer-control__block-size--tiny);
|
|
2642
|
+
inline-size: var(--mer-control__block-size--tiny);
|
|
2643
|
+
}
|
|
2644
|
+
%tabular-grid-cell__selector {
|
|
2645
|
+
position: relative;
|
|
2646
|
+
margin: 0;
|
|
2647
|
+
width: 0;
|
|
2648
|
+
height: 0;
|
|
2649
|
+
}
|
|
2650
|
+
%tabular-grid-cell__selector--before {
|
|
2651
|
+
content: "";
|
|
2652
|
+
display: inline-block;
|
|
2653
|
+
width: var(--mer-control__block-size--tiny);
|
|
2654
|
+
height: var(--mer-control__block-size--tiny);
|
|
2655
|
+
border: var(--mer-form-input__border);
|
|
2656
|
+
border-radius: var(--mer-control-tiny__border-radius);
|
|
2657
|
+
box-sizing: border-box;
|
|
2658
|
+
}
|
|
2659
|
+
%tabular-grid-cell__selector--after {
|
|
2660
|
+
position: absolute;
|
|
2661
|
+
content: "";
|
|
2662
|
+
display: inline-block;
|
|
2663
|
+
border-color: var(--mer-form-input-check__border-color);
|
|
2664
|
+
top: calc(var(--mer-control__block-size--tiny) / 4);
|
|
2665
|
+
left: calc(var(--mer-control__block-size--tiny) / 4);
|
|
2666
|
+
}
|
|
2667
|
+
%tabular-grid-cell__selector--after-checked {
|
|
2668
|
+
inline-size: calc(var(--mer-control__block-size--tiny) / 2);
|
|
2669
|
+
block-size: calc(var(--mer-control__block-size--tiny) / 2);
|
|
2670
|
+
background-color: currentColor;
|
|
2671
|
+
pointer-events: none;
|
|
2672
|
+
-webkit-mask: no-repeat center / 100%
|
|
2673
|
+
var(--mer-checkbox__option-checked-image);
|
|
2674
|
+
color: var(--mer-form-input-check__border-color);
|
|
2675
|
+
}
|
|
2676
|
+
%tabular-grid-cell__selector--after-indeterminate {
|
|
2677
|
+
inline-size: 8px;
|
|
2678
|
+
block-size: var(--mer-form-input-check__border-width);
|
|
2679
|
+
border-radius: 2px;
|
|
2680
|
+
background-color: var(--mer-form-input-check__border-color);
|
|
2681
|
+
top: calc(
|
|
2682
|
+
var(--mer-control__block-size--tiny) / 2 -
|
|
2683
|
+
var(--mer-form-input-check__border-width) / 2
|
|
2684
|
+
);
|
|
2685
|
+
}
|
|
2686
|
+
|
|
2687
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2688
|
+
// ch-grid-row-actions
|
|
2689
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2690
|
+
%tabular-grid-row-actions {
|
|
2691
|
+
}
|
|
2692
|
+
%tabular-grid-row-actions__window {
|
|
2693
|
+
@extend %window-styles;
|
|
2694
|
+
}
|
|
2695
|
+
%tabular-grid-row-actions__main {
|
|
2696
|
+
display: flex;
|
|
2697
|
+
flex-direction: column;
|
|
2698
|
+
gap: var(--mer-window__gap);
|
|
2699
|
+
}
|
|
2700
|
+
|
|
2701
|
+
/// @group ch-grid
|
|
2702
|
+
/// @param {String} $tabular-grid-selector [".tabular-grid"] -
|
|
2703
|
+
/// @param {String} $tabular-grid__main [".tabular-grid::part(main)"] -
|
|
2704
|
+
|
|
2705
|
+
/// @group ch-grid-column
|
|
2706
|
+
/// @param {String} $tabular-grid__bar [".tabular-grid-column::part(bar)"] -
|
|
2707
|
+
/// @param {String} $tabular-grid__bar-resize-split [".tabular-grid-column::part(bar-resize-split)"] -
|
|
2708
|
+
/// @param {String} $tabular-grid-column__selector-label [".tabular-grid-column::part(selector-label)"] -
|
|
2709
|
+
/// @param {String} $tabular-grid-column__selector [".tabular-grid-column::part(selector)"] -
|
|
2710
|
+
/// @param {String} $tabular-grid-column__selector--checked [".tabular-grid-column::part(selector checked)"] -
|
|
2711
|
+
/// @param {String} $tabular-grid-column__selector--indeterminate [".tabular-grid-column::part(selector indeterminate)"] -
|
|
2712
|
+
|
|
2713
|
+
/// @group ch-grid-row
|
|
2714
|
+
/// @param {String} $tabular-grid-row [".tabular-grid-row"] -
|
|
2715
|
+
|
|
2716
|
+
/// @group ch-grid-rowset
|
|
2717
|
+
/// @param {String} $tabular-grid-rowset [".tabular-grid-rowset"] -
|
|
2718
|
+
|
|
2719
|
+
/// @group ch-grid-rowset-legend
|
|
2720
|
+
/// @param {String} $tabular-grid-rowset-legend [".tabular-grid-rowset-legend"] -
|
|
2721
|
+
/// @param {String} $tabular-grid-rowset-legend__caret [".tabular-grid-rowset-legend::part(caret)"] -
|
|
2722
|
+
/// @param {String} $tabular-grid-rowset-legend__selector-label [".tabular-grid-rowset-legend::part(selector-label)"] -
|
|
2723
|
+
/// @param {String} $tabular-grid-rowset-legend__selector [".tabular-grid-rowset-legend::part(selector)"] -
|
|
2724
|
+
/// @param {String} $tabular-grid-rowset-legend__icon [".tabular-grid-rowset-legend::part(icon)"] -
|
|
2725
|
+
|
|
2726
|
+
/// @group ch-grid-cell
|
|
2727
|
+
/// @param {String} $tabular-grid-cell [".tabular-grid-cell"] -
|
|
2728
|
+
/// @param {String} $tabular-grid-cell__drag-icon [".tabular-grid-cell::part(drag-icon)"] -
|
|
2729
|
+
/// @param {String} $tabular-grid-cell__selector-label [".tabular-grid-cell::part(selector-label)"] -
|
|
2730
|
+
/// @param {String} $tabular-grid-cell__selector [".tabular-grid-cell::part(selector)"] -
|
|
2731
|
+
/// @param {String} $tabular-grid-cell__selector--checked [".tabular-grid-cell::part(selector checked)"] -
|
|
2732
|
+
/// @param {String} $tabular-grid-cell__actions-icon [".tabular-grid-cell::part(actions-icon)"] -
|
|
2733
|
+
|
|
2734
|
+
/// @group ch-grid-row-actions
|
|
2735
|
+
@mixin tabular-grid(
|
|
2736
|
+
// ch-grid
|
|
2737
|
+
$tabular-grid-selector: ".tabular-grid",
|
|
2738
|
+
$tabular-grid__main: ".tabular-grid::part(main)",
|
|
2739
|
+
|
|
2740
|
+
// ch-grid-column
|
|
2741
|
+
$tabular-grid-column__bar: ".tabular-grid-column::part(bar)",
|
|
2742
|
+
$tabular-grid-column__bar-resize-split:
|
|
2743
|
+
".tabular-grid-column::part(bar-resize-split)",
|
|
2744
|
+
$tabular-grid-column__selector-label:
|
|
2745
|
+
".tabular-grid-column::part(selector-label)",
|
|
2746
|
+
$tabular-grid-column__selector: ".tabular-grid-column::part(selector)",
|
|
2747
|
+
$tabular-grid-column__selector--checked:
|
|
2748
|
+
".tabular-grid-column::part(selector checked)",
|
|
2749
|
+
$tabular-grid-column__selector--indeterminate:
|
|
2750
|
+
".tabular-grid-column::part(selector indeterminate)",
|
|
2751
|
+
|
|
2752
|
+
// ch-grid-row
|
|
2753
|
+
$tabular-grid-row: ".tabular-grid-row",
|
|
2754
|
+
|
|
2755
|
+
// ch-grid-rowset
|
|
2756
|
+
$tabular-grid-rowset: ".tabular-grid-rowset",
|
|
2757
|
+
|
|
2758
|
+
// ch-grid-rowset-legend
|
|
2759
|
+
$tabular-grid-rowset-legend: ".tabular-grid-rowset-legend",
|
|
2760
|
+
$tabular-grid-rowset-legend__caret: ".tabular-grid-rowset-legend::part(caret)",
|
|
2761
|
+
$tabular-grid-rowset-legend__selector-label:
|
|
2762
|
+
".tabular-grid-rowset-legend::part(selector-label)",
|
|
2763
|
+
$tabular-grid-rowset-legend__selector:
|
|
2764
|
+
".tabular-grid-rowset-legend::part(selector)",
|
|
2765
|
+
$tabular-grid-rowset-legend__icon: ".tabular-grid-rowset-legend::part(icon)",
|
|
2766
|
+
|
|
2767
|
+
// ch-grid-cell
|
|
2768
|
+
$tabular-grid-cell: ".tabular-grid-cell",
|
|
2769
|
+
$tabular-grid-cell__drag-icon: ".tabular-grid-cell::part(drag-icon)",
|
|
2770
|
+
$tabular-grid-cell__selector-label: ".tabular-grid-cell::part(selector-label)",
|
|
2771
|
+
$tabular-grid-cell__selector: ".tabular-grid-cell::part(selector)",
|
|
2772
|
+
$tabular-grid-cell__selector--checked:
|
|
2773
|
+
".tabular-grid-cell::part(selector checked)",
|
|
2774
|
+
$tabular-grid-cell__actions-icon: ".tabular-grid-cell::part(actions-icon)",
|
|
2775
|
+
|
|
2776
|
+
// ch-grid-row-actions
|
|
2777
|
+
$tabular-grid-row-actions: ".tabular-grid-row-actions",
|
|
2778
|
+
$tabular-grid-row-actions__window: ".tabular-grid-row-actions::part(window)",
|
|
2779
|
+
$tabular-grid-row-actions__main: ".tabular-grid-row-actions::part(main)"
|
|
2780
|
+
) {
|
|
2781
|
+
// Base style
|
|
2782
|
+
#{$tabular-grid-selector} {
|
|
2783
|
+
@extend %tabular-grid;
|
|
2784
|
+
&:focus {
|
|
2785
|
+
outline: none;
|
|
2786
|
+
}
|
|
2787
|
+
}
|
|
2788
|
+
|
|
2789
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2790
|
+
// ch-grid
|
|
2791
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2792
|
+
|
|
2793
|
+
#{$tabular-grid__main} {
|
|
2794
|
+
@extend %tabular-grid__main;
|
|
2795
|
+
background-color: var(--grid-main__bg-color);
|
|
2796
|
+
gap: 1px;
|
|
2797
|
+
}
|
|
2798
|
+
|
|
2799
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2800
|
+
// ch-grid-column
|
|
2801
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2802
|
+
|
|
2803
|
+
#{$tabular-grid-column__bar} {
|
|
2804
|
+
@extend %tabular-grid-column__bar;
|
|
2805
|
+
}
|
|
2806
|
+
#{$tabular-grid-column__bar-resize-split} {
|
|
2807
|
+
@extend %tabular-grid-column__bar-resize-split;
|
|
2808
|
+
&:hover {
|
|
2809
|
+
@extend %tabular-grid-column__bar-resize-split--hover;
|
|
2810
|
+
}
|
|
2811
|
+
}
|
|
2812
|
+
// checkbox (same styles add cell checkbox)
|
|
2813
|
+
#{$tabular-grid-column__selector-label} {
|
|
2814
|
+
@extend %tabular-grid-cell__selector-label;
|
|
2815
|
+
}
|
|
2816
|
+
#{$tabular-grid-column__selector} {
|
|
2817
|
+
@extend %tabular-grid-cell__selector;
|
|
2818
|
+
&::before {
|
|
2819
|
+
@extend %tabular-grid-cell__selector--before;
|
|
2820
|
+
}
|
|
2821
|
+
&::after {
|
|
2822
|
+
@extend %tabular-grid-cell__selector--after;
|
|
2823
|
+
}
|
|
2824
|
+
&:focus {
|
|
2825
|
+
outline: none;
|
|
2826
|
+
&:before {
|
|
2827
|
+
@include focus-style();
|
|
2828
|
+
}
|
|
2829
|
+
}
|
|
2830
|
+
}
|
|
2831
|
+
#{$tabular-grid-column__selector--checked} {
|
|
2832
|
+
&::after {
|
|
2833
|
+
@extend %tabular-grid-cell__selector--after-checked;
|
|
2834
|
+
}
|
|
2835
|
+
}
|
|
2836
|
+
#{$tabular-grid-column__selector--indeterminate} {
|
|
2837
|
+
&::after {
|
|
2838
|
+
@extend %tabular-grid-cell__selector--after-indeterminate;
|
|
2839
|
+
}
|
|
2840
|
+
}
|
|
2841
|
+
|
|
2842
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2843
|
+
// ch-grid-row
|
|
2844
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2845
|
+
|
|
2846
|
+
#{$tabular-grid-row} {
|
|
2847
|
+
@extend %tabular-grid-row;
|
|
2848
|
+
// the following styles have to be applied here, because they depend on the
|
|
2849
|
+
// $tabular-grid-cell selector, which is not known in the '%tabular-grid-row' placeholder.
|
|
2850
|
+
&[highlighted] {
|
|
2851
|
+
#{$tabular-grid-cell} {
|
|
2852
|
+
&:after {
|
|
2853
|
+
@extend %item-hover;
|
|
2854
|
+
}
|
|
2855
|
+
}
|
|
2856
|
+
}
|
|
2857
|
+
&[selected] {
|
|
2858
|
+
#{$tabular-grid-cell} {
|
|
2859
|
+
&:after {
|
|
2860
|
+
@extend %item-selected;
|
|
2861
|
+
}
|
|
2862
|
+
}
|
|
2863
|
+
}
|
|
2864
|
+
&[focused] {
|
|
2865
|
+
border-style: dotted;
|
|
2866
|
+
@include focus-style();
|
|
2867
|
+
}
|
|
2868
|
+
&[dragging] {
|
|
2869
|
+
box-shadow: var(--mer-box-shadow--01);
|
|
2870
|
+
}
|
|
2871
|
+
}
|
|
2872
|
+
|
|
2873
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2874
|
+
// ch-grid-rowset
|
|
2875
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2876
|
+
|
|
2877
|
+
#{$tabular-grid-rowset} {
|
|
2878
|
+
@extend %tabular-grid-rowset;
|
|
2879
|
+
|
|
2880
|
+
// part::(caret)
|
|
2881
|
+
#{$tabular-grid-rowset-legend__caret} {
|
|
2882
|
+
// @extend %icon__gemini-tools_minus--on-surface-enabled-dark;
|
|
2883
|
+
}
|
|
2884
|
+
&[collapsed] {
|
|
2885
|
+
#{$tabular-grid-rowset-legend__caret} {
|
|
2886
|
+
// @extend %icon__gemini-tools_add--on-surface-enabled-dark;
|
|
2887
|
+
}
|
|
2888
|
+
}
|
|
2889
|
+
|
|
2890
|
+
&[collapsed]:not(:last-child) {
|
|
2891
|
+
#{$tabular-grid-rowset-legend} {
|
|
2892
|
+
margin-block-end: 1px;
|
|
2893
|
+
}
|
|
2894
|
+
}
|
|
2895
|
+
}
|
|
2896
|
+
|
|
2897
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2898
|
+
// ch-grid-rowset-legend
|
|
2899
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2900
|
+
|
|
2901
|
+
#{$tabular-grid-rowset-legend} {
|
|
2902
|
+
@extend %tabular-grid-rowset-legend;
|
|
2903
|
+
display: flex;
|
|
2904
|
+
align-items: center;
|
|
2905
|
+
gap: var(--grid-base__icon-gap);
|
|
2906
|
+
}
|
|
2907
|
+
#{$tabular-grid-rowset-legend__caret} {
|
|
2908
|
+
@extend %icon-background--before;
|
|
2909
|
+
}
|
|
2910
|
+
#{$tabular-grid-rowset-legend__selector-label} {
|
|
2911
|
+
@extend %tabular-grid-rowset-legend__selector-label;
|
|
2912
|
+
}
|
|
2913
|
+
#{$tabular-grid-rowset-legend__selector} {
|
|
2914
|
+
@extend %tabular-grid-rowset-legend__selector;
|
|
2915
|
+
}
|
|
2916
|
+
#{$tabular-grid-rowset-legend__icon} {
|
|
2917
|
+
@extend %tabular-grid-rowset-legend__icon;
|
|
2918
|
+
@extend %icon-background--before;
|
|
2919
|
+
// @extend %icon__gemini-tools_category-group--on-surface-enabled-dark;
|
|
2920
|
+
}
|
|
2921
|
+
|
|
2922
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2923
|
+
// ch-grid-cell
|
|
2924
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2925
|
+
|
|
2926
|
+
#{$tabular-grid-cell} {
|
|
2927
|
+
@extend %tabular-grid-cell;
|
|
2928
|
+
}
|
|
2929
|
+
// drag icon
|
|
2930
|
+
#{$tabular-grid-cell__drag-icon} {
|
|
2931
|
+
@extend %icon-background--before;
|
|
2932
|
+
// @extend %icon__navigation_drag--on-surface-enabled-dark;
|
|
2933
|
+
margin-inline-end: var(--grid-base__icon-gap);
|
|
2934
|
+
}
|
|
2935
|
+
// checkbox
|
|
2936
|
+
#{$tabular-grid-cell__selector-label} {
|
|
2937
|
+
@extend %tabular-grid-cell__selector-label;
|
|
2938
|
+
}
|
|
2939
|
+
#{$tabular-grid-cell__selector} {
|
|
2940
|
+
@extend %tabular-grid-cell__selector;
|
|
2941
|
+
&::before {
|
|
2942
|
+
@extend %tabular-grid-cell__selector--before;
|
|
2943
|
+
}
|
|
2944
|
+
&::after {
|
|
2945
|
+
@extend %tabular-grid-cell__selector--after;
|
|
2946
|
+
}
|
|
2947
|
+
&:focus {
|
|
2948
|
+
outline: none;
|
|
2949
|
+
&:before {
|
|
2950
|
+
@include focus-style();
|
|
2951
|
+
}
|
|
2952
|
+
}
|
|
2953
|
+
}
|
|
2954
|
+
#{$tabular-grid-cell__selector--checked} {
|
|
2955
|
+
&::after {
|
|
2956
|
+
@extend %tabular-grid-cell__selector--after-checked;
|
|
2957
|
+
}
|
|
2958
|
+
}
|
|
2959
|
+
// actions icon
|
|
2960
|
+
#{$tabular-grid-cell__actions-icon} {
|
|
2961
|
+
width: 100%;
|
|
2962
|
+
@extend %icon-background--before;
|
|
2963
|
+
// @extend %icon__gemini-tools_show-more-vertical--on-surface-enabled-dark;
|
|
2964
|
+
border: none;
|
|
2965
|
+
}
|
|
2966
|
+
|
|
2967
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2968
|
+
// ch-grid-row-actions
|
|
2969
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2970
|
+
#{$tabular-grid-row-actions} {
|
|
2971
|
+
&[show-on-row-hover]::part(window) {
|
|
2972
|
+
margin-inline-end: var(--mer-spacing--xs);
|
|
2973
|
+
}
|
|
2974
|
+
}
|
|
2975
|
+
#{$tabular-grid-row-actions__window} {
|
|
2976
|
+
@extend %tabular-grid-row-actions__window;
|
|
2977
|
+
}
|
|
2978
|
+
#{$tabular-grid-row-actions__main} {
|
|
2979
|
+
@extend %tabular-grid-row-actions__main;
|
|
2980
|
+
}
|
|
2981
|
+
}
|
|
2982
|
+
|
|
2000
2983
|
@mixin code-tokens() {
|
|
2001
2984
|
// TODO: variable names should be updated to something more descriptive
|
|
2002
2985
|
--ch-code__color-base: var(--mer-text__on-surface);
|
|
@@ -2191,6 +3174,7 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
2191
3174
|
$components: true,
|
|
2192
3175
|
$checkbox: true,
|
|
2193
3176
|
$tree-view-primary: true,
|
|
3177
|
+
$tabular-grid: true,
|
|
2194
3178
|
$code: true
|
|
2195
3179
|
) {
|
|
2196
3180
|
// - - - - - - - - - - - - - - - - - - - -
|
|
@@ -5479,12 +6463,18 @@ system: $system,
|
|
|
5479
6463
|
// Light
|
|
5480
6464
|
@if $colors and $light-theme and $tokens {
|
|
5481
6465
|
:root.light {
|
|
6466
|
+
// Fixes issues in elements that force its color based on this property.
|
|
6467
|
+
// For example, the font color of the input with autocomplete (:-webkit-autofill)
|
|
6468
|
+
color-scheme: light;
|
|
5482
6469
|
@include foundation-colors--light();
|
|
5483
6470
|
}
|
|
5484
6471
|
}
|
|
5485
6472
|
@if $colors and $tokens and $prefers-color-scheme-light {
|
|
5486
6473
|
@media (prefers-color-scheme: light) {
|
|
5487
6474
|
:root {
|
|
6475
|
+
// Fixes issues in elements that force its color based on this property.
|
|
6476
|
+
// For example, the font color of the input with autocomplete (:-webkit-autofill)
|
|
6477
|
+
color-scheme: light;
|
|
5488
6478
|
@include foundation-colors--light();
|
|
5489
6479
|
}
|
|
5490
6480
|
}
|
|
@@ -5493,12 +6483,18 @@ system: $system,
|
|
|
5493
6483
|
// Dark
|
|
5494
6484
|
@if $colors and $dark-theme and $tokens {
|
|
5495
6485
|
:root.dark {
|
|
6486
|
+
// Fixes issues in elements that force its color based on this property.
|
|
6487
|
+
// For example, the font color of the input with autocomplete (:-webkit-autofill)
|
|
6488
|
+
color-scheme: dark;
|
|
5496
6489
|
@include foundation-colors--dark();
|
|
5497
6490
|
}
|
|
5498
6491
|
}
|
|
5499
6492
|
@if $colors and $tokens and $prefers-color-scheme-dark {
|
|
5500
6493
|
@media (prefers-color-scheme: dark) {
|
|
5501
6494
|
:root {
|
|
6495
|
+
// Fixes issues in elements that force its color based on this property.
|
|
6496
|
+
// For example, the font color of the input with autocomplete (:-webkit-autofill)
|
|
6497
|
+
color-scheme: dark;
|
|
5502
6498
|
@include foundation-colors--dark();
|
|
5503
6499
|
}
|
|
5504
6500
|
}
|
|
@@ -5686,6 +6682,10 @@ system: $system,
|
|
|
5686
6682
|
@if $tree-view-primary {
|
|
5687
6683
|
@include tree-view-primary();
|
|
5688
6684
|
}
|
|
6685
|
+
// tabular grid
|
|
6686
|
+
@if $tabular-grid {
|
|
6687
|
+
@include tabular-grid();
|
|
6688
|
+
}
|
|
5689
6689
|
// code
|
|
5690
6690
|
@if $code {
|
|
5691
6691
|
@include code();
|