@genexus/mercury 0.1.2 → 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 +998 -1483
- package/dist/css/mercury.css.map +1 -1
- package/dist/mercury.scss +1855 -477
- package/package.json +6 -4
package/dist/mercury.scss
CHANGED
|
@@ -6,6 +6,26 @@
|
|
|
6
6
|
justify-content: center;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
@mixin label-common-styles() {
|
|
10
|
+
display: inline-grid;
|
|
11
|
+
grid-auto-flow: column;
|
|
12
|
+
grid-auto-columns: max-content;
|
|
13
|
+
grid-template-rows: auto; // Necessary to avoid creating additional rows and then adding additional gap at the bottom of the label
|
|
14
|
+
align-items: center;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@mixin document-common-styles() {
|
|
18
|
+
display: grid;
|
|
19
|
+
grid-template-rows: 1fr;
|
|
20
|
+
min-block-size: 100dvh;
|
|
21
|
+
margin: 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
25
|
+
// Icons | Mask & Background
|
|
26
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
27
|
+
|
|
28
|
+
// Icon mask styles
|
|
9
29
|
@mixin icon-mask-common-styles(
|
|
10
30
|
$inline-size: var(--icon-size),
|
|
11
31
|
$block-size: var(--icon-size),
|
|
@@ -19,6 +39,7 @@
|
|
|
19
39
|
background-color: currentColor;
|
|
20
40
|
}
|
|
21
41
|
|
|
42
|
+
// Icon background styles
|
|
22
43
|
@mixin icon-background-common-styles(
|
|
23
44
|
$inline-size: var(--icon-size),
|
|
24
45
|
$block-size: var(--icon-size),
|
|
@@ -31,21 +52,6 @@
|
|
|
31
52
|
background: no-repeat center / $background-size var(--icon-path);
|
|
32
53
|
}
|
|
33
54
|
|
|
34
|
-
@mixin label-common-styles() {
|
|
35
|
-
display: inline-grid;
|
|
36
|
-
grid-auto-flow: column;
|
|
37
|
-
grid-auto-columns: max-content;
|
|
38
|
-
grid-template-rows: auto; // Necessary to avoid creating additional rows and then adding additional gap at the bottom of the label
|
|
39
|
-
align-items: center;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
@mixin document-common-styles() {
|
|
43
|
-
display: grid;
|
|
44
|
-
grid-template-rows: 1fr;
|
|
45
|
-
min-block-size: 100dvh;
|
|
46
|
-
margin: 0;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
55
|
/// Replace `$search` with `$replace` in `$string`
|
|
50
56
|
/// @param {String} $string - Initial string
|
|
51
57
|
/// @param {String} $search - Substring to replace
|
|
@@ -65,44 +71,16 @@
|
|
|
65
71
|
@return $string;
|
|
66
72
|
}
|
|
67
73
|
|
|
68
|
-
/// It returns a list of virtual selectors. This function is designed to
|
|
69
|
-
/// process the icons selectors generated by "svg-sass-generator" package,
|
|
70
|
-
/// present in this monorepo. This function only generates one part of the
|
|
71
|
-
/// selector: %icon__{category-name}_{icon-name}. ie.: %icon__system_user.
|
|
72
|
-
/// Another mixin should then combine the selectors that this function provides
|
|
73
|
-
/// with the rest of the selector. Generally, the other part of the selector
|
|
74
|
-
/// includes the name of the icon state, and the name of the color scheme.
|
|
75
|
-
/// An example of a complete selector: %icon__system_user--primary-light.
|
|
76
|
-
/// @param {List} $icons-list - The list of icons
|
|
77
|
-
/// @param {String} $category - The category name of the list
|
|
78
|
-
/// @param {String} $prefix_category-separator - The prefix-category separator
|
|
79
|
-
/// @return {String} $category_icon-separator - The category-icon separator
|
|
80
|
-
@function generate-icons-virtual-selectors(
|
|
81
|
-
$icons-list,
|
|
82
|
-
$category,
|
|
83
|
-
$prefix_category-separator: "__",
|
|
84
|
-
$category_icon-separator: "_"
|
|
85
|
-
) {
|
|
86
|
-
$output-list: ();
|
|
87
|
-
@each $icon in $icons-list {
|
|
88
|
-
$output-list: append(
|
|
89
|
-
$output-list,
|
|
90
|
-
"%icon#{$prefix_category-separator}#{$category}#{$category_icon-separator}#{$icon}"
|
|
91
|
-
);
|
|
92
|
-
}
|
|
93
|
-
@return $output-list;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
74
|
|
|
97
75
|
/*----------------------
|
|
98
76
|
Focus
|
|
99
77
|
----------------------*/
|
|
100
78
|
@mixin focus-style($outline: false) {
|
|
101
79
|
@if $outline == true {
|
|
102
|
-
outline
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
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);
|
|
106
84
|
} @else {
|
|
107
85
|
border-color: var(--borders-un-border-color__focused);
|
|
108
86
|
}
|
|
@@ -137,35 +115,121 @@ Scrollbar
|
|
|
137
115
|
|
|
138
116
|
// corner
|
|
139
117
|
&::-webkit-scrollbar-corner {
|
|
140
|
-
background:
|
|
118
|
+
background: var(--mer-scrollbar-corner__bg);
|
|
141
119
|
}
|
|
142
120
|
}
|
|
143
121
|
|
|
144
122
|
/*----------------------------------------------------
|
|
145
123
|
Item (applies to every item (tree, grid, list, etc...)
|
|
146
124
|
----------------------------------------------------*/
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
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)
|
|
154
138
|
}
|
|
155
|
-
@if $
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
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)
|
|
159
147
|
}
|
|
160
|
-
@if $
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
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);
|
|
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);
|
|
166
184
|
}
|
|
167
185
|
}
|
|
168
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);
|
|
231
|
+
}
|
|
232
|
+
|
|
169
233
|
|
|
170
234
|
// Resets
|
|
171
235
|
@mixin typography-reset() {
|
|
@@ -257,6 +321,7 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
257
321
|
--mer-border__width--lg: 4px;
|
|
258
322
|
|
|
259
323
|
//border radius
|
|
324
|
+
--mer-border__radius--2xs: 1px;
|
|
260
325
|
--mer-border__radius--xs: 2px;
|
|
261
326
|
--mer-border__radius--sm: 4px;
|
|
262
327
|
--mer-border__radius--md: 8px;
|
|
@@ -386,10 +451,10 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
386
451
|
|
|
387
452
|
@mixin elevation--light() {
|
|
388
453
|
// background color
|
|
389
|
-
--mer-
|
|
390
|
-
--mer-
|
|
391
|
-
--mer-
|
|
392
|
-
--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);
|
|
393
458
|
|
|
394
459
|
// border
|
|
395
460
|
--mer-elevation__border-01: transparent;
|
|
@@ -398,22 +463,15 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
398
463
|
--mer-elevation__border-04: transparent;
|
|
399
464
|
|
|
400
465
|
// box shadow
|
|
401
|
-
--mer-
|
|
402
|
-
0px 1px 4px 0px rgba(0, 0, 0, 0.06);
|
|
403
|
-
--mer-elevation__box-shadow--02: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
|
|
404
|
-
0px 2px 4px -1px rgba(0, 0, 0, 0.1);
|
|
405
|
-
--mer-elevation__box-shadow--03: 0px 3px 14px 2px rgba(0, 0, 0, 0.12),
|
|
406
|
-
0px 5px 5px -3px rgba(0, 0, 0, 0.1);
|
|
407
|
-
--mer-elevation__box-shadow--04: 0px 5px 22px 4px rgba(0, 0, 0, 0.12),
|
|
408
|
-
0px 7px 8px -4px rgba(0, 0, 0, 0.1);
|
|
466
|
+
--mer-box-shadow--01: 0px 4px 20px 0px #00000040;
|
|
409
467
|
}
|
|
410
468
|
|
|
411
469
|
@mixin elevation--dark() {
|
|
412
470
|
// background color
|
|
413
|
-
--mer-
|
|
414
|
-
--mer-
|
|
415
|
-
--mer-
|
|
416
|
-
--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);
|
|
417
475
|
|
|
418
476
|
// border
|
|
419
477
|
--mer-elevation__border-01: 1px solid var(--mer-color__elevation--03);
|
|
@@ -425,15 +483,18 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
425
483
|
--mer-elevation__box-shadow--02: none;
|
|
426
484
|
--mer-elevation__box-shadow--03: none;
|
|
427
485
|
--mer-elevation__box-shadow--04: none;
|
|
486
|
+
|
|
487
|
+
// box shadow
|
|
488
|
+
--mer-box-shadow--01: 0px 4px 20px 0px #00000040;
|
|
428
489
|
}
|
|
429
490
|
|
|
430
491
|
@mixin font() {
|
|
431
492
|
// families
|
|
432
|
-
--mer-font-family--inter-light: "Inter_Light", arial, sans-serif;
|
|
433
|
-
--mer-font-family--inter-regular: "Inter_Regular", arial, sans-serif;
|
|
434
|
-
--mer-font-family--inter-semi-bold: "Inter_SemiBold", arial, sans-serif;
|
|
435
|
-
--mer-font-family--inter-bold: "Inter_Bold", arial, sans-serif;
|
|
436
|
-
--mer-font-family--inter-extra-bold: "Inter_ExtraBold", arial, sans-serif;
|
|
493
|
+
--mer-font-family--inter-light: "Inter_Light", arial, sans-serif; // 300
|
|
494
|
+
--mer-font-family--inter-regular: "Inter_Regular", arial, sans-serif; // 400
|
|
495
|
+
--mer-font-family--inter-semi-bold: "Inter_SemiBold", arial, sans-serif; // 600
|
|
496
|
+
--mer-font-family--inter-bold: "Inter_Bold", arial, sans-serif; // 700
|
|
497
|
+
--mer-font-family--inter-extra-bold: "Inter_ExtraBold", arial, sans-serif; // 800
|
|
437
498
|
|
|
438
499
|
// weights
|
|
439
500
|
--mer-font__weight--light: 300;
|
|
@@ -443,7 +504,7 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
443
504
|
--mer-font__weight--extra-bold: 800;
|
|
444
505
|
|
|
445
506
|
// sizes
|
|
446
|
-
--mer-font__size--
|
|
507
|
+
--mer-font__size--2xs: 12px;
|
|
447
508
|
--mer-font__size--xs: 14px;
|
|
448
509
|
--mer-font__size--sm: 16px;
|
|
449
510
|
--mer-font__size--md: 20px;
|
|
@@ -487,7 +548,9 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
487
548
|
--mer-accent__primary: var(--mer-color__primary-blue--200);
|
|
488
549
|
--mer-accent__primary--hover: var(--mer-color__primary-blue--400);
|
|
489
550
|
--mer-accent__primary--active: var(--mer-color__primary-blue--600);
|
|
490
|
-
--mer-accent__primary--disabled:
|
|
551
|
+
--mer-accent__primary--disabled: var(
|
|
552
|
+
--mer-color__neutral-gray--600
|
|
553
|
+
); // should be a variable ⚠️
|
|
491
554
|
--mer-accent__primary--destructive: var(--mer-color__message-red--100);
|
|
492
555
|
}
|
|
493
556
|
|
|
@@ -528,27 +591,56 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
528
591
|
}
|
|
529
592
|
|
|
530
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
|
+
|
|
531
616
|
// enabled
|
|
532
|
-
--mer-item__color: ;
|
|
533
|
-
--mer-item__bg-color: ;
|
|
534
|
-
--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);
|
|
535
620
|
|
|
536
621
|
// hover
|
|
537
|
-
--mer-item__color--hover: var(--mer-color__neutral-gray--100); //
|
|
538
|
-
--mer-item__bg-color--hover: var(--mer-color__tinted-blue--5);
|
|
539
|
-
--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);
|
|
540
625
|
|
|
541
626
|
// selected
|
|
542
|
-
--mer-item__color--selected: var(
|
|
543
|
-
|
|
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);
|
|
544
631
|
--mer-item__border-color--selected: var(--mer-color__tinted-blue--20);
|
|
545
632
|
|
|
546
633
|
// selected + hover
|
|
547
|
-
--mer-item__color--selected-hover: var(
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
);
|
|
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();
|
|
552
644
|
}
|
|
553
645
|
|
|
554
646
|
@mixin semantic-other() {
|
|
@@ -557,9 +649,18 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
557
649
|
----------------------*/
|
|
558
650
|
--mer-body__bg-color: var(--mer-color__surface);
|
|
559
651
|
--mer-body__color: var(--mer-text__on-surface);
|
|
560
|
-
--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);
|
|
561
654
|
--mer-body__line-height: var(--mer-line-height--regular);
|
|
562
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
|
+
|
|
563
664
|
/*----------------------
|
|
564
665
|
Heading
|
|
565
666
|
----------------------*/
|
|
@@ -575,10 +676,10 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
575
676
|
--mer-scrollbar-track__border-radius: var(--mer-spacing--xs);
|
|
576
677
|
// scrollbar-thumb
|
|
577
678
|
--mer-scrollbar-thumb__bg-color: var(--mer-color__elevation--04);
|
|
578
|
-
--mer-scrollbar-thumb__bg-color--hover:
|
|
679
|
+
--mer-scrollbar-thumb__bg-color--hover: #42474c;
|
|
579
680
|
--mer-scrollbar-thumb__border-radius: var(--mer-spacing--xs);
|
|
580
681
|
// scrollbar-thumb
|
|
581
|
-
--mer-scrollbar-corner__bg:
|
|
682
|
+
--mer-scrollbar-corner__bg: transparent;
|
|
582
683
|
|
|
583
684
|
/*----------------------
|
|
584
685
|
Icon Size
|
|
@@ -587,15 +688,67 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
587
688
|
--mer-icon__box--sm: var(--mer-spacing--md);
|
|
588
689
|
--mer-icon__box--lg: var(--mer-spacing--lg);
|
|
589
690
|
|
|
691
|
+
/*----------------------------------------------------------
|
|
692
|
+
Form Input (form-input-*** background-position-x RTL support)
|
|
693
|
+
-----------------------------------------------------------*/
|
|
694
|
+
--mer-form-input__padding-inline: var(--mer-spacing--xs);
|
|
695
|
+
--mer-form-input__bg-position--x-value: var(--mer-form-input__padding-inline);
|
|
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>");
|
|
715
|
+
|
|
716
|
+
/*-------------------------------------------------------------
|
|
717
|
+
Inline Control (Should have the same height to look good inline)
|
|
718
|
+
-------------------------------------------------------------*/
|
|
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);
|
|
722
|
+
|
|
590
723
|
/*----------------------
|
|
591
724
|
Label
|
|
592
725
|
----------------------*/
|
|
593
|
-
// size
|
|
594
726
|
// space between label and control
|
|
595
727
|
--mer-label__space: var(--mer-spacing--xs);
|
|
596
728
|
--mer-label__font-size: inherit;
|
|
597
729
|
--mer-label__font-weight: var(--mer-font__weight--semi-bold);
|
|
598
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);
|
|
599
752
|
}
|
|
600
753
|
|
|
601
754
|
@mixin semantic-text() {
|
|
@@ -620,19 +773,18 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
620
773
|
--mer-accent__primary: var(--mer-color__primary-blue--200);
|
|
621
774
|
--mer-accent__primary--hover: var(--mer-color__primary-blue--400);
|
|
622
775
|
--mer-accent__primary--active: var(--mer-color__primary-blue--600);
|
|
623
|
-
--mer-accent__primary--disabled:
|
|
776
|
+
--mer-accent__primary--disabled: var(
|
|
777
|
+
--mer-color__neutral-gray--600
|
|
778
|
+
); // should be a variable ⚠️
|
|
624
779
|
--mer-accent__primary--destructive: var(--mer-color__message-red--100);
|
|
625
780
|
}
|
|
626
781
|
|
|
627
782
|
|
|
628
783
|
// Base classes
|
|
629
|
-
@mixin button-tokens() {
|
|
630
|
-
/*----------------------
|
|
631
|
-
Base
|
|
632
|
-
----------------------*/
|
|
784
|
+
@mixin button-tokens-base() {
|
|
633
785
|
//font
|
|
634
786
|
--button-base__font-family: inherit;
|
|
635
|
-
--button-base__font-size: var(--mer-font__size--
|
|
787
|
+
--button-base__font-size: var(--mer-font__size--2xs);
|
|
636
788
|
//--button-base__font-weight: var(--mer-font__weight--semi-bold);
|
|
637
789
|
--button-base__line-height: var(--mer-line-height--tight);
|
|
638
790
|
//--button-base__color: var(--mer-text__on-primary);
|
|
@@ -643,13 +795,15 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
643
795
|
--button-base__border-color: transparent;
|
|
644
796
|
--button-base__border-radius: var(--mer-border__radius--sm);
|
|
645
797
|
//other
|
|
646
|
-
--button-base__block-size: var(--mer-
|
|
798
|
+
--button-base__block-size: var(--mer-control__block-size);
|
|
647
799
|
--button-base__gap: var(--mer-spacing--xs);
|
|
648
800
|
--button-base__padding-inline: var(--mer-spacing--sm);
|
|
801
|
+
//with icon
|
|
802
|
+
--button-icon-only__padding: 0;
|
|
803
|
+
--button-icon-only__inline-size: var(--mer-control__block-size);
|
|
804
|
+
}
|
|
649
805
|
|
|
650
|
-
|
|
651
|
-
Primary
|
|
652
|
-
----------------------*/
|
|
806
|
+
@mixin button-tokens-primary() {
|
|
653
807
|
--button-primary__background-color: var(--mer-accent__primary);
|
|
654
808
|
--button-primary__border-color: var(--button-primary__background-color);
|
|
655
809
|
--button-primary__color: var(--mer-text__on-primary);
|
|
@@ -678,10 +832,9 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
678
832
|
--mer-border-color__primary--disabled
|
|
679
833
|
);
|
|
680
834
|
--button-primary__color--disabled: var(--mer-text__on-disabled);
|
|
835
|
+
}
|
|
681
836
|
|
|
682
|
-
|
|
683
|
-
Secondary
|
|
684
|
-
----------------------*/
|
|
837
|
+
@mixin button-tokens-secondary() {
|
|
685
838
|
--button-secondary__background-color: transparent;
|
|
686
839
|
--button-secondary__border-color: var(--mer-border-color__neutral);
|
|
687
840
|
--button-secondary__color: var(--mer-text__neutral);
|
|
@@ -702,10 +855,9 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
702
855
|
--button-secondary__background-color--disabled: transparent;
|
|
703
856
|
--button-secondary__border-color--disabled: var(--mer-text__on-disabled);
|
|
704
857
|
--button-secondary__color--disabled: var(--mer-text__on-disabled);
|
|
858
|
+
}
|
|
705
859
|
|
|
706
|
-
|
|
707
|
-
Tertiary
|
|
708
|
-
----------------------*/
|
|
860
|
+
@mixin button-tokens-tertiary() {
|
|
709
861
|
--button-tertiary__background-color: transparent;
|
|
710
862
|
--button-tertiary__border-color: transparent;
|
|
711
863
|
--button-tertiary__color: var(--mer-text__primary);
|
|
@@ -720,17 +872,17 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
720
872
|
--button-tertiary__color--active: var(--mer-text__primary--active);
|
|
721
873
|
//disabled
|
|
722
874
|
--button-tertiary__background-color--disabled: transparent;
|
|
723
|
-
--button-tertiary__border-color--disabled:
|
|
724
|
-
--button-tertiary__color--disabled:
|
|
875
|
+
--button-tertiary__border-color--disabled: transparent;
|
|
876
|
+
--button-tertiary__color--disabled: var(--mer-text__on-disabled);
|
|
877
|
+
}
|
|
725
878
|
|
|
726
|
-
|
|
727
|
-
Icon Only
|
|
728
|
-
----------------------*/
|
|
879
|
+
@mixin button-tokens-icon-only() {
|
|
729
880
|
--button-icon-only__padding-inline: var(--mer-spacing--xs);
|
|
730
881
|
}
|
|
731
882
|
|
|
732
883
|
|
|
733
884
|
%button-base {
|
|
885
|
+
@include button-tokens-base();
|
|
734
886
|
@include button-common-styles();
|
|
735
887
|
border: var(--button-base__border-width);
|
|
736
888
|
border-radius: var(--button-base__border-radius);
|
|
@@ -739,7 +891,7 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
739
891
|
var(--button-base__border-color);
|
|
740
892
|
font-family: var(--button-base__font-family);
|
|
741
893
|
font-size: var(--button-base__font-size);
|
|
742
|
-
gap: var(--
|
|
894
|
+
gap: var(--button-base__gap); // Used when the button has icons
|
|
743
895
|
line-height: var(--button-base__line-height);
|
|
744
896
|
padding-inline: var(--button-base__padding-inline);
|
|
745
897
|
text-transform: var(--button-base__text-transform);
|
|
@@ -749,6 +901,7 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
749
901
|
}
|
|
750
902
|
|
|
751
903
|
%button-primary {
|
|
904
|
+
@include button-tokens-primary();
|
|
752
905
|
@extend %button-base;
|
|
753
906
|
background-color: var(--button-primary__background-color);
|
|
754
907
|
border-color: var(--button-primary__border-color);
|
|
@@ -775,6 +928,7 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
775
928
|
}
|
|
776
929
|
|
|
777
930
|
%button-secondary {
|
|
931
|
+
@include button-tokens-secondary();
|
|
778
932
|
@extend %button-base;
|
|
779
933
|
background-color: var(--button-secondary__background-color);
|
|
780
934
|
border-color: var(--button-secondary__border-color);
|
|
@@ -801,6 +955,7 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
801
955
|
}
|
|
802
956
|
|
|
803
957
|
%button-tertiary {
|
|
958
|
+
@include button-tokens-tertiary();
|
|
804
959
|
@extend %button-base;
|
|
805
960
|
background-color: var(--button-tertiary__background-color);
|
|
806
961
|
border-color: var(--button-tertiary__border-color);
|
|
@@ -839,8 +994,7 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
839
994
|
}
|
|
840
995
|
|
|
841
996
|
@if $add--disabled {
|
|
842
|
-
&:disabled
|
|
843
|
-
&--disabled {
|
|
997
|
+
&:disabled {
|
|
844
998
|
@extend %button-primary--disabled;
|
|
845
999
|
}
|
|
846
1000
|
}
|
|
@@ -890,11 +1044,6 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
890
1044
|
}
|
|
891
1045
|
|
|
892
1046
|
@mixin button-classes() {
|
|
893
|
-
// Button tokens
|
|
894
|
-
:root {
|
|
895
|
-
@include button-tokens();
|
|
896
|
-
}
|
|
897
|
-
|
|
898
1047
|
// Button primary
|
|
899
1048
|
@include button-primary();
|
|
900
1049
|
|
|
@@ -905,187 +1054,203 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
905
1054
|
@include button-tertiary();
|
|
906
1055
|
}
|
|
907
1056
|
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
)
|
|
1057
|
+
@mixin form-input-element-tokens() {
|
|
1058
|
+
// Common form input element tokens
|
|
1059
|
+
--mer-form-input__border-color: var(--mer-color__neutral-gray--500);
|
|
1060
|
+
--mer-form-input__border-style: solid;
|
|
1061
|
+
--mer-form-input__border-width: var(--mer-border__width--sm);
|
|
1062
|
+
--mer-form-input__border: var(--mer-form-input__border-width)
|
|
1063
|
+
var(--mer-form-input__border-style) var(--mer-form-input__border-color);
|
|
1064
|
+
--mer-form-input__border-radius: var(--mer-border__radius--sm);
|
|
1065
|
+
--mer-form-input__color: var(--mer-text__bright);
|
|
1066
|
+
--mer-form-input__font-size: var(--mer-body__font-size);
|
|
1067
|
+
--mer-form-input__font-weight: var(--mer-text__on-surface);
|
|
1068
|
+
--mer-form-input__icon-size: var(--mer-icon__box--sm);
|
|
1069
|
+
--mer-form-input__font-family: var(--mer-font-family--inter-regular);
|
|
1070
|
+
//--mer-form-input__padding-inline is defined globally in /tokens/semantic/_other/
|
|
1071
|
+
// (Form Input) because it the padding-inline value is required in the calculation
|
|
1072
|
+
// of background-x position for RTL support, and this calculation needs to be on the :root
|
|
914
1073
|
}
|
|
915
1074
|
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
);
|
|
1075
|
+
|
|
1076
|
+
// Base form-input-text sty
|
|
1077
|
+
%form-input-base {
|
|
1078
|
+
@include form-input-element-tokens();
|
|
1079
|
+
font-family: var(--mer-form-input__font-family);
|
|
1080
|
+
border: var(--mer-form-input__border);
|
|
1081
|
+
border-radius: var(--mer-form-input__border-radius);
|
|
1082
|
+
color: var(--mer-form-input__color);
|
|
1083
|
+
font-size: var(--mer-form-input__font-size);
|
|
1084
|
+
block-size: var(--mer-control__block-size);
|
|
922
1085
|
}
|
|
923
1086
|
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
--icon-path: #{$icon-path};
|
|
928
|
-
}
|
|
929
|
-
&::before {
|
|
930
|
-
@extend %icon-mask--before;
|
|
931
|
-
}
|
|
932
|
-
}
|
|
1087
|
+
%form-input-text-only {
|
|
1088
|
+
@extend %form-input-base;
|
|
1089
|
+
padding-inline: var(--mer-form-input__padding-inline);
|
|
933
1090
|
}
|
|
934
1091
|
|
|
935
|
-
@mixin
|
|
1092
|
+
@mixin form-input-text-only(
|
|
1093
|
+
$selector: ".form-input-text-only",
|
|
1094
|
+
$add--disabled: true
|
|
1095
|
+
) {
|
|
936
1096
|
#{$selector} {
|
|
937
|
-
@
|
|
938
|
-
--icon-path: #{$icon-path};
|
|
939
|
-
}
|
|
940
|
-
&::before {
|
|
941
|
-
@extend %icon-background--before;
|
|
942
|
-
}
|
|
1097
|
+
@extend %form-input-text-only;
|
|
943
1098
|
}
|
|
944
1099
|
}
|
|
945
1100
|
|
|
946
|
-
|
|
947
|
-
//
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
%button-icon-after-and-text {
|
|
954
|
-
// same as regular base button
|
|
955
|
-
padding-inline: var(--button-base__padding-inline);
|
|
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
|
+
}
|
|
956
1108
|
}
|
|
1109
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
1110
|
+
// Icons | Mask & Background
|
|
1111
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
957
1112
|
|
|
958
|
-
|
|
959
|
-
|
|
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);
|
|
960
1123
|
}
|
|
961
1124
|
|
|
962
|
-
@
|
|
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) {
|
|
963
1131
|
#{$selector} {
|
|
964
|
-
@extend %button-icon-only;
|
|
965
|
-
|
|
966
1132
|
@if $icon-path != null {
|
|
967
1133
|
--icon-path: #{$icon-path};
|
|
968
1134
|
}
|
|
969
1135
|
|
|
1136
|
+
@if $icon-class != null {
|
|
1137
|
+
@extend #{$icon-class} !optional;
|
|
1138
|
+
}
|
|
1139
|
+
|
|
970
1140
|
&::before {
|
|
971
1141
|
@extend %icon-mask--before;
|
|
972
1142
|
}
|
|
973
1143
|
}
|
|
974
1144
|
}
|
|
975
1145
|
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
) {
|
|
980
|
-
#{$selector} {
|
|
981
|
-
@extend %button-icon-and-text;
|
|
982
|
-
|
|
983
|
-
@if $icon-path != null {
|
|
984
|
-
--icon-path: #{$icon-path};
|
|
985
|
-
}
|
|
1146
|
+
%icon-mask--before {
|
|
1147
|
+
@include mer-icon-mask-common-styles($size: "sm", $mask-size: 100%);
|
|
1148
|
+
}
|
|
986
1149
|
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
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);
|
|
990
1158
|
}
|
|
1159
|
+
@include icon-background-common-styles(
|
|
1160
|
+
$iconSize,
|
|
1161
|
+
$iconSize,
|
|
1162
|
+
$background-size
|
|
1163
|
+
);
|
|
991
1164
|
}
|
|
992
1165
|
|
|
993
|
-
@
|
|
994
|
-
|
|
995
|
-
|
|
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
|
|
996
1175
|
) {
|
|
997
1176
|
#{$selector} {
|
|
998
|
-
@extend %button-icon-and-text;
|
|
999
|
-
|
|
1000
1177
|
@if $icon-path != null {
|
|
1001
1178
|
--icon-path: #{$icon-path};
|
|
1002
1179
|
}
|
|
1003
1180
|
|
|
1181
|
+
@if $icon-class != null {
|
|
1182
|
+
@extend #{$icon-class} !optional;
|
|
1183
|
+
}
|
|
1184
|
+
|
|
1004
1185
|
&::before {
|
|
1005
1186
|
@extend %icon-background--before;
|
|
1006
|
-
@extend %button-icon-after-and-text--before;
|
|
1007
1187
|
}
|
|
1008
1188
|
}
|
|
1009
1189
|
}
|
|
1010
1190
|
|
|
1191
|
+
%icon-background--before {
|
|
1192
|
+
@include mer-icon-background-common-styles(
|
|
1193
|
+
$size: "sm",
|
|
1194
|
+
$background-size: 100%
|
|
1195
|
+
);
|
|
1196
|
+
}
|
|
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
|
+
|
|
1207
|
+
%icon-input-background {
|
|
1208
|
+
@include icon-input-background-common-styles(
|
|
1209
|
+
$background-size: var(--mer-form-input__icon-size),
|
|
1210
|
+
$background-position-x: var(--mer-form-input__bg-position--x)
|
|
1211
|
+
);
|
|
1212
|
+
}
|
|
1213
|
+
|
|
1011
1214
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1012
|
-
//
|
|
1215
|
+
// Multicolor Selectors Generator
|
|
1013
1216
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1014
1217
|
|
|
1015
|
-
//
|
|
1016
|
-
@mixin
|
|
1218
|
+
// Single selector generator
|
|
1219
|
+
@mixin generate-monochrome-icon-selector(
|
|
1017
1220
|
$input-selector,
|
|
1018
1221
|
$output-selector,
|
|
1019
|
-
$light-theme-selector: ".light",
|
|
1020
|
-
$dark-theme-selector: ".dark",
|
|
1021
1222
|
$light: true,
|
|
1022
1223
|
$dark: true,
|
|
1023
|
-
$
|
|
1024
|
-
$
|
|
1025
|
-
$
|
|
1026
|
-
$
|
|
1027
|
-
$
|
|
1028
|
-
$
|
|
1029
|
-
$on-primary-active: true,
|
|
1030
|
-
$on-disabled: true,
|
|
1031
|
-
$neutral: true
|
|
1224
|
+
$light-theme-selector: ".light",
|
|
1225
|
+
$dark-theme-selector: ".dark",
|
|
1226
|
+
$enabled: true,
|
|
1227
|
+
$hover: true,
|
|
1228
|
+
$active: true,
|
|
1229
|
+
$disabled: true
|
|
1032
1230
|
) {
|
|
1033
1231
|
// Light
|
|
1034
1232
|
@if $light {
|
|
1035
1233
|
#{$light-theme-selector} {
|
|
1036
1234
|
#{$output-selector} {
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
&--primary {
|
|
1040
|
-
@extend #{$input-selector}--primary-light !optional;
|
|
1041
|
-
}
|
|
1042
|
-
}
|
|
1043
|
-
@if $primary-hover {
|
|
1044
|
-
&--primary-hover,
|
|
1045
|
-
&--primary:hover {
|
|
1046
|
-
@extend #{$input-selector}--primary-hover-light !optional;
|
|
1047
|
-
}
|
|
1048
|
-
}
|
|
1049
|
-
@if $primary-active {
|
|
1050
|
-
&--primary-active,
|
|
1051
|
-
&--primary:active {
|
|
1052
|
-
@extend #{$input-selector}--primary-active-light !optional;
|
|
1053
|
-
}
|
|
1054
|
-
}
|
|
1055
|
-
@if $primary-disabled {
|
|
1056
|
-
&--primary-disabled,
|
|
1057
|
-
&--primary:disabled {
|
|
1058
|
-
@extend #{$input-selector}--primary-disabled-light !optional;
|
|
1059
|
-
}
|
|
1060
|
-
}
|
|
1061
|
-
// on primary
|
|
1062
|
-
@if $on-primary {
|
|
1063
|
-
&--on-primary {
|
|
1064
|
-
@extend #{$input-selector}--on-primary-light !optional;
|
|
1065
|
-
}
|
|
1066
|
-
}
|
|
1067
|
-
@if $on-primary-hover {
|
|
1068
|
-
&--on-primary-hover,
|
|
1069
|
-
&--on-primary:hover {
|
|
1070
|
-
@extend #{$input-selector}--on-primary-hover-light !optional;
|
|
1071
|
-
}
|
|
1235
|
+
@if $enabled {
|
|
1236
|
+
@extend #{$input-selector}--enabled-light;
|
|
1072
1237
|
}
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
@extend #{$input-selector}--
|
|
1238
|
+
|
|
1239
|
+
@if $hover {
|
|
1240
|
+
&:hover {
|
|
1241
|
+
@extend #{$input-selector}--hover-light;
|
|
1077
1242
|
}
|
|
1078
1243
|
}
|
|
1079
|
-
|
|
1080
|
-
@if $
|
|
1081
|
-
|
|
1082
|
-
@extend #{$input-selector}--
|
|
1244
|
+
|
|
1245
|
+
@if $active {
|
|
1246
|
+
&:active {
|
|
1247
|
+
@extend #{$input-selector}--active-light;
|
|
1083
1248
|
}
|
|
1084
1249
|
}
|
|
1085
|
-
|
|
1086
|
-
@if $
|
|
1087
|
-
|
|
1088
|
-
@extend #{$input-selector}--
|
|
1250
|
+
|
|
1251
|
+
@if $disabled {
|
|
1252
|
+
&:disabled {
|
|
1253
|
+
@extend #{$input-selector}--disabled-light;
|
|
1089
1254
|
}
|
|
1090
1255
|
}
|
|
1091
1256
|
}
|
|
@@ -1096,58 +1261,25 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
1096
1261
|
@if $dark {
|
|
1097
1262
|
#{$dark-theme-selector} {
|
|
1098
1263
|
#{$output-selector} {
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
&--primary {
|
|
1102
|
-
@extend #{$input-selector}--primary-dark !optional;
|
|
1103
|
-
}
|
|
1264
|
+
@if $enabled {
|
|
1265
|
+
@extend #{$input-selector}--enabled-dark;
|
|
1104
1266
|
}
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
@extend #{$input-selector}--
|
|
1109
|
-
}
|
|
1110
|
-
}
|
|
1111
|
-
@if $primary-active {
|
|
1112
|
-
&--primary-active,
|
|
1113
|
-
&--primary:active {
|
|
1114
|
-
@extend #{$input-selector}--primary-active-dark !optional;
|
|
1115
|
-
}
|
|
1116
|
-
}
|
|
1117
|
-
@if $primary-disabled {
|
|
1118
|
-
&--primary-disabled,
|
|
1119
|
-
&--primary:disabled {
|
|
1120
|
-
@extend #{$input-selector}--primary-disabled-dark !optional;
|
|
1121
|
-
}
|
|
1122
|
-
}
|
|
1123
|
-
// on primary
|
|
1124
|
-
@if $on-primary {
|
|
1125
|
-
&--on-primary {
|
|
1126
|
-
@extend #{$input-selector}--on-primary-dark !optional;
|
|
1127
|
-
}
|
|
1128
|
-
}
|
|
1129
|
-
@if $on-primary-hover {
|
|
1130
|
-
&--on-primary-hover,
|
|
1131
|
-
&--on-primary:hover {
|
|
1132
|
-
@extend #{$input-selector}--on-primary-hover-dark !optional;
|
|
1133
|
-
}
|
|
1134
|
-
}
|
|
1135
|
-
@if $on-primary-active {
|
|
1136
|
-
&--on-primary-active,
|
|
1137
|
-
&--on-primary:active {
|
|
1138
|
-
@extend #{$input-selector}--on-primary-active-dark !optional;
|
|
1267
|
+
|
|
1268
|
+
@if $hover {
|
|
1269
|
+
&:hover {
|
|
1270
|
+
@extend #{$input-selector}--hover-dark;
|
|
1139
1271
|
}
|
|
1140
1272
|
}
|
|
1141
|
-
|
|
1142
|
-
@if $
|
|
1143
|
-
|
|
1144
|
-
@extend #{$input-selector}--
|
|
1273
|
+
|
|
1274
|
+
@if $active {
|
|
1275
|
+
&:active {
|
|
1276
|
+
@extend #{$input-selector}--active-dark;
|
|
1145
1277
|
}
|
|
1146
1278
|
}
|
|
1147
|
-
|
|
1148
|
-
@if $
|
|
1149
|
-
|
|
1150
|
-
@extend #{$input-selector}--
|
|
1279
|
+
|
|
1280
|
+
@if $disabled {
|
|
1281
|
+
&:disabled {
|
|
1282
|
+
@extend #{$input-selector}--disabled-dark;
|
|
1151
1283
|
}
|
|
1152
1284
|
}
|
|
1153
1285
|
}
|
|
@@ -1155,47 +1287,149 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
1155
1287
|
}
|
|
1156
1288
|
}
|
|
1157
1289
|
|
|
1158
|
-
//
|
|
1159
|
-
|
|
1290
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
1291
|
+
// Monochrome Selectors Generator
|
|
1292
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
1293
|
+
|
|
1294
|
+
@mixin generate-monochrome-icon-selector(
|
|
1160
1295
|
$input-selector,
|
|
1161
1296
|
$output-selector,
|
|
1162
|
-
$light: true,
|
|
1163
|
-
$dark: true,
|
|
1164
1297
|
$light-theme-selector: ".light",
|
|
1165
1298
|
$dark-theme-selector: ".dark",
|
|
1166
|
-
$
|
|
1167
|
-
$
|
|
1168
|
-
$
|
|
1169
|
-
$primary-disabled: true,
|
|
1299
|
+
$light: true,
|
|
1300
|
+
$dark: true,
|
|
1301
|
+
$on-surface: true,
|
|
1170
1302
|
$on-primary: true,
|
|
1171
|
-
$on-primary-hover: true,
|
|
1172
|
-
$on-primary-active: true,
|
|
1173
1303
|
$on-disabled: true,
|
|
1174
|
-
$
|
|
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
|
|
1175
1313
|
) {
|
|
1176
1314
|
// Light
|
|
1177
1315
|
@if $light {
|
|
1178
1316
|
#{$light-theme-selector} {
|
|
1179
1317
|
#{$output-selector} {
|
|
1180
|
-
|
|
1181
|
-
|
|
1318
|
+
// on-surface
|
|
1319
|
+
@if $on-surface {
|
|
1320
|
+
&--on-surface {
|
|
1321
|
+
@extend #{$input-selector}--on-surface-enabled-light !optional;
|
|
1322
|
+
}
|
|
1182
1323
|
}
|
|
1183
1324
|
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
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;
|
|
1187
1338
|
}
|
|
1188
1339
|
}
|
|
1189
1340
|
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1341
|
+
// on-disabled
|
|
1342
|
+
@if $on-disabled {
|
|
1343
|
+
&--on-disabled:enabled {
|
|
1344
|
+
@extend #{$input-selector}--on-disabled-enabled-light !optional;
|
|
1193
1345
|
}
|
|
1194
1346
|
}
|
|
1195
1347
|
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
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
|
+
|
|
1362
|
+
// primary
|
|
1363
|
+
@if $primary {
|
|
1364
|
+
&--primary:enabled {
|
|
1365
|
+
@extend #{$input-selector}--primary-enabled-light !optional;
|
|
1366
|
+
}
|
|
1367
|
+
&--primary:hover {
|
|
1368
|
+
@extend #{$input-selector}--primary-hover-light !optional;
|
|
1369
|
+
}
|
|
1370
|
+
&--primary:active {
|
|
1371
|
+
@extend #{$input-selector}--primary-active-light !optional;
|
|
1372
|
+
}
|
|
1373
|
+
&--primary:disabled {
|
|
1374
|
+
@extend #{$input-selector}--primary-disabled-light !optional;
|
|
1375
|
+
}
|
|
1376
|
+
}
|
|
1377
|
+
|
|
1378
|
+
// error
|
|
1379
|
+
@if $error {
|
|
1380
|
+
&--error:enabled {
|
|
1381
|
+
@extend #{$input-selector}--error-enabled-light !optional;
|
|
1382
|
+
}
|
|
1383
|
+
}
|
|
1384
|
+
|
|
1385
|
+
// warning
|
|
1386
|
+
@if $warning {
|
|
1387
|
+
&--warning:enabled {
|
|
1388
|
+
@extend #{$input-selector}--warning-enabled-light !optional;
|
|
1389
|
+
}
|
|
1390
|
+
}
|
|
1391
|
+
|
|
1392
|
+
// warning
|
|
1393
|
+
@if $warning {
|
|
1394
|
+
&--warning:enabled {
|
|
1395
|
+
@extend #{$input-selector}--warning-enabled-light !optional;
|
|
1396
|
+
}
|
|
1397
|
+
}
|
|
1398
|
+
|
|
1399
|
+
// success
|
|
1400
|
+
@if $success {
|
|
1401
|
+
&--success:enabled {
|
|
1402
|
+
@extend #{$input-selector}--success-enabled-light !optional;
|
|
1403
|
+
}
|
|
1404
|
+
}
|
|
1405
|
+
|
|
1406
|
+
// neutral
|
|
1407
|
+
@if $neutral {
|
|
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;
|
|
1199
1433
|
}
|
|
1200
1434
|
}
|
|
1201
1435
|
}
|
|
@@ -1206,25 +1440,121 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
1206
1440
|
@if $dark {
|
|
1207
1441
|
#{$dark-theme-selector} {
|
|
1208
1442
|
#{$output-selector} {
|
|
1209
|
-
|
|
1210
|
-
|
|
1443
|
+
// on-surface
|
|
1444
|
+
@if $on-surface {
|
|
1445
|
+
&--on-surface {
|
|
1446
|
+
@extend #{$input-selector}--on-surface-enabled-dark !optional;
|
|
1447
|
+
}
|
|
1211
1448
|
}
|
|
1212
1449
|
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
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;
|
|
1216
1463
|
}
|
|
1217
1464
|
}
|
|
1218
1465
|
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1466
|
+
// on-disabled
|
|
1467
|
+
@if $on-disabled {
|
|
1468
|
+
&--on-disabled:enabled {
|
|
1469
|
+
@extend #{$input-selector}--on-disabled-enabled-dark !optional;
|
|
1222
1470
|
}
|
|
1223
1471
|
}
|
|
1224
1472
|
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
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
|
+
|
|
1487
|
+
// primary
|
|
1488
|
+
@if $primary {
|
|
1489
|
+
&--primary:enabled {
|
|
1490
|
+
@extend #{$input-selector}--primary-enabled-dark !optional;
|
|
1491
|
+
}
|
|
1492
|
+
&--primary:hover {
|
|
1493
|
+
@extend #{$input-selector}--primary-hover-dark !optional;
|
|
1494
|
+
}
|
|
1495
|
+
&--primary:active {
|
|
1496
|
+
@extend #{$input-selector}--primary-active-dark !optional;
|
|
1497
|
+
}
|
|
1498
|
+
&--primary:disabled {
|
|
1499
|
+
@extend #{$input-selector}--primary-disabled-dark !optional;
|
|
1500
|
+
}
|
|
1501
|
+
}
|
|
1502
|
+
|
|
1503
|
+
// error
|
|
1504
|
+
@if $error {
|
|
1505
|
+
&--error:enabled {
|
|
1506
|
+
@extend #{$input-selector}--error-enabled-dark !optional;
|
|
1507
|
+
}
|
|
1508
|
+
}
|
|
1509
|
+
|
|
1510
|
+
// warning
|
|
1511
|
+
@if $warning {
|
|
1512
|
+
&--warning:enabled {
|
|
1513
|
+
@extend #{$input-selector}--warning-enabled-dark !optional;
|
|
1514
|
+
}
|
|
1515
|
+
}
|
|
1516
|
+
|
|
1517
|
+
// warning
|
|
1518
|
+
@if $warning {
|
|
1519
|
+
&--warning:enabled {
|
|
1520
|
+
@extend #{$input-selector}--warning-enabled-dark !optional;
|
|
1521
|
+
}
|
|
1522
|
+
}
|
|
1523
|
+
|
|
1524
|
+
// success
|
|
1525
|
+
@if $success {
|
|
1526
|
+
&--success:enabled {
|
|
1527
|
+
@extend #{$input-selector}--success-enabled-dark !optional;
|
|
1528
|
+
}
|
|
1529
|
+
}
|
|
1530
|
+
|
|
1531
|
+
// neutral
|
|
1532
|
+
@if $neutral {
|
|
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;
|
|
1228
1558
|
}
|
|
1229
1559
|
}
|
|
1230
1560
|
}
|
|
@@ -1232,44 +1562,263 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
1232
1562
|
}
|
|
1233
1563
|
}
|
|
1234
1564
|
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1565
|
+
@mixin process-monochrome-icons-list(
|
|
1566
|
+
$monochrome-icon-selectors,
|
|
1567
|
+
$light: true,
|
|
1568
|
+
$dark: true,
|
|
1569
|
+
$light-theme-selector: ".light",
|
|
1570
|
+
$dark-theme-selector: ".dark",
|
|
1571
|
+
$on-surface: true,
|
|
1572
|
+
$on-primary: true,
|
|
1573
|
+
$on-disabled: true,
|
|
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
|
|
1583
|
+
) {
|
|
1584
|
+
@each $monochrome-icon-selector in $monochrome-icon-selectors {
|
|
1585
|
+
@include generate-monochrome-icon-selector(
|
|
1586
|
+
$input-selector: #{$monochrome-icon-selector},
|
|
1587
|
+
$output-selector: str-replace($monochrome-icon-selector, "%", "."),
|
|
1588
|
+
$light: $light,
|
|
1589
|
+
$dark: $dark,
|
|
1590
|
+
$light-theme-selector: $light-theme-selector,
|
|
1591
|
+
$dark-theme-selector: $dark-theme-selector,
|
|
1592
|
+
$on-surface: $on-surface,
|
|
1593
|
+
$on-primary: $on-primary,
|
|
1594
|
+
$on-disabled: $on-disabled,
|
|
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}"
|
|
1633
|
+
);
|
|
1634
|
+
}
|
|
1635
|
+
@return $output-list;
|
|
1636
|
+
}
|
|
1637
|
+
|
|
1638
|
+
|
|
1639
|
+
// Icons
|
|
1640
|
+
@mixin button-tokens-base() {
|
|
1641
|
+
//font
|
|
1642
|
+
--button-base__font-family: inherit;
|
|
1643
|
+
--button-base__font-size: var(--mer-font__size--2xs);
|
|
1644
|
+
//--button-base__font-weight: var(--mer-font__weight--semi-bold);
|
|
1645
|
+
--button-base__line-height: var(--mer-line-height--tight);
|
|
1646
|
+
//--button-base__color: var(--mer-text__on-primary);
|
|
1647
|
+
--button-base__text-transform: capitalize;
|
|
1648
|
+
//border
|
|
1649
|
+
--button-base__border-width: var(--mer-border__width--sm);
|
|
1650
|
+
--button-base__border-style: solid;
|
|
1651
|
+
--button-base__border-color: transparent;
|
|
1652
|
+
--button-base__border-radius: var(--mer-border__radius--sm);
|
|
1653
|
+
//other
|
|
1654
|
+
--button-base__block-size: var(--mer-control__block-size);
|
|
1655
|
+
--button-base__gap: var(--mer-spacing--xs);
|
|
1656
|
+
--button-base__padding-inline: var(--mer-spacing--sm);
|
|
1657
|
+
//with icon
|
|
1658
|
+
--button-icon-only__padding: 0;
|
|
1659
|
+
--button-icon-only__inline-size: var(--mer-control__block-size);
|
|
1660
|
+
}
|
|
1661
|
+
|
|
1662
|
+
@mixin button-tokens-primary() {
|
|
1663
|
+
--button-primary__background-color: var(--mer-accent__primary);
|
|
1664
|
+
--button-primary__border-color: var(--button-primary__background-color);
|
|
1665
|
+
--button-primary__color: var(--mer-text__on-primary);
|
|
1666
|
+
--button-primary__font-weight: var(--mer-font__weight--semi-bold);
|
|
1667
|
+
//hover
|
|
1668
|
+
--button-primary__background-color--hover: var(--mer-accent__primary--hover);
|
|
1669
|
+
--button-primary__border-color--hover: var(
|
|
1670
|
+
--button-primary__background-color--hover
|
|
1671
|
+
);
|
|
1672
|
+
--button-primary__color--hover: var(--mer-text__on-primary);
|
|
1673
|
+
|
|
1674
|
+
//active
|
|
1675
|
+
--button-primary__background-color--active: var(
|
|
1676
|
+
--mer-accent__primary--active
|
|
1677
|
+
);
|
|
1678
|
+
--button-primary__border-color--active: var(
|
|
1679
|
+
--button-primary__background-color--active
|
|
1680
|
+
);
|
|
1681
|
+
--button-primary__color--active: var(--mer-text__on-primary--active);
|
|
1682
|
+
|
|
1683
|
+
//disabled
|
|
1684
|
+
--button-primary__background-color--disabled: var(
|
|
1685
|
+
--mer-accent__primary--disabled
|
|
1686
|
+
);
|
|
1687
|
+
--button-primary__border-color--disabled: var(
|
|
1688
|
+
--mer-border-color__primary--disabled
|
|
1689
|
+
);
|
|
1690
|
+
--button-primary__color--disabled: var(--mer-text__on-disabled);
|
|
1691
|
+
}
|
|
1692
|
+
|
|
1693
|
+
@mixin button-tokens-secondary() {
|
|
1694
|
+
--button-secondary__background-color: transparent;
|
|
1695
|
+
--button-secondary__border-color: var(--mer-border-color__neutral);
|
|
1696
|
+
--button-secondary__color: var(--mer-text__neutral);
|
|
1697
|
+
--button-secondary__font-weight: var(--mer-font__weight--semi-bold);
|
|
1698
|
+
//hover
|
|
1699
|
+
--button-secondary__background-color--hover: transparent;
|
|
1700
|
+
--button-secondary__border-color--hover: var(
|
|
1701
|
+
--mer-border-color__primary--hover
|
|
1702
|
+
);
|
|
1703
|
+
--button-secondary__color--hover: var(--mer-text__primary--hover);
|
|
1704
|
+
//active
|
|
1705
|
+
--button-secondary__background-color--active: transparent;
|
|
1706
|
+
--button-secondary__border-color--active: var(
|
|
1707
|
+
--mer-border-color__primary--active
|
|
1708
|
+
);
|
|
1709
|
+
--button-secondary__color--active: var(--mer-text__on-primary--active);
|
|
1710
|
+
//disabled
|
|
1711
|
+
--button-secondary__background-color--disabled: transparent;
|
|
1712
|
+
--button-secondary__border-color--disabled: var(--mer-text__on-disabled);
|
|
1713
|
+
--button-secondary__color--disabled: var(--mer-text__on-disabled);
|
|
1714
|
+
}
|
|
1715
|
+
|
|
1716
|
+
@mixin button-tokens-tertiary() {
|
|
1717
|
+
--button-tertiary__background-color: transparent;
|
|
1718
|
+
--button-tertiary__border-color: transparent;
|
|
1719
|
+
--button-tertiary__color: var(--mer-text__primary);
|
|
1720
|
+
--button-tertiary__font-weight: var(--mer-font__weight--semi-bold);
|
|
1721
|
+
//hover
|
|
1722
|
+
--button-tertiary__background-color--hover: transparent;
|
|
1723
|
+
--button-tertiary__border-color--hover: transparent;
|
|
1724
|
+
--button-tertiary__color--hover: var(--mer-text__primary--hover);
|
|
1725
|
+
//active
|
|
1726
|
+
--button-tertiary__background-color--active: transparent;
|
|
1727
|
+
--button-tertiary__border-color--active: transparent;
|
|
1728
|
+
--button-tertiary__color--active: var(--mer-text__primary--active);
|
|
1729
|
+
//disabled
|
|
1730
|
+
--button-tertiary__background-color--disabled: transparent;
|
|
1731
|
+
--button-tertiary__border-color--disabled: transparent;
|
|
1732
|
+
--button-tertiary__color--disabled: var(--mer-text__on-disabled);
|
|
1733
|
+
}
|
|
1734
|
+
|
|
1735
|
+
@mixin button-tokens-icon-only() {
|
|
1736
|
+
--button-icon-only__padding-inline: var(--mer-spacing--xs);
|
|
1737
|
+
}
|
|
1738
|
+
|
|
1739
|
+
|
|
1740
|
+
%button-icon-only {
|
|
1741
|
+
@include button-tokens-icon-only();
|
|
1742
|
+
inline-size: var(--button-icon-only__inline-size);
|
|
1743
|
+
padding: var(--button-icon-only__padding);
|
|
1744
|
+
}
|
|
1745
|
+
|
|
1746
|
+
%button-icon-and-text,
|
|
1747
|
+
%button-icon-after-and-text {
|
|
1748
|
+
// same as regular base button
|
|
1749
|
+
padding-inline: var(--button-base__padding-inline);
|
|
1750
|
+
}
|
|
1751
|
+
|
|
1752
|
+
%button-icon-after-and-text--before {
|
|
1753
|
+
order: 1;
|
|
1754
|
+
}
|
|
1755
|
+
|
|
1756
|
+
@mixin button-icon-only($selector: ".button-icon-only", $icon-path: null) {
|
|
1757
|
+
#{$selector} {
|
|
1758
|
+
@extend %button-icon-only;
|
|
1759
|
+
|
|
1760
|
+
@if $icon-path != null {
|
|
1761
|
+
--icon-path: #{$icon-path};
|
|
1762
|
+
}
|
|
1763
|
+
|
|
1764
|
+
&::before {
|
|
1765
|
+
@extend %icon-mask--before;
|
|
1766
|
+
}
|
|
1767
|
+
}
|
|
1768
|
+
}
|
|
1769
|
+
|
|
1770
|
+
@mixin button-icon-and-text(
|
|
1771
|
+
$selector: ".button-icon-and-text",
|
|
1772
|
+
$icon-path: null
|
|
1773
|
+
) {
|
|
1774
|
+
#{$selector} {
|
|
1775
|
+
@extend %button-icon-and-text;
|
|
1776
|
+
|
|
1777
|
+
@if $icon-path != null {
|
|
1778
|
+
--icon-path: #{$icon-path};
|
|
1779
|
+
}
|
|
1780
|
+
|
|
1781
|
+
&::before {
|
|
1782
|
+
@extend %icon-background--before;
|
|
1783
|
+
}
|
|
1784
|
+
}
|
|
1785
|
+
}
|
|
1786
|
+
|
|
1787
|
+
@mixin button-icon-after-and-text(
|
|
1788
|
+
$selector: ".button-icon-after-and-text",
|
|
1789
|
+
$icon-path: null
|
|
1790
|
+
) {
|
|
1791
|
+
#{$selector} {
|
|
1792
|
+
@extend %button-icon-and-text;
|
|
1793
|
+
|
|
1794
|
+
@if $icon-path != null {
|
|
1795
|
+
--icon-path: #{$icon-path};
|
|
1796
|
+
}
|
|
1797
|
+
|
|
1798
|
+
&::before {
|
|
1799
|
+
@extend %icon-background--before;
|
|
1800
|
+
@extend %button-icon-after-and-text--before;
|
|
1801
|
+
}
|
|
1802
|
+
}
|
|
1803
|
+
}
|
|
1804
|
+
|
|
1805
|
+
%form-input-element-icon {
|
|
1806
|
+
@extend %form-input-base;
|
|
1807
|
+
padding-inline-start: calc(
|
|
1808
|
+
var(--mer-form-input__padding-inline) * 2 + var(--mer-form-input__icon-size)
|
|
1809
|
+
);
|
|
1810
|
+
}
|
|
1238
1811
|
|
|
1239
|
-
@mixin
|
|
1240
|
-
$
|
|
1241
|
-
$
|
|
1242
|
-
$dark: true,
|
|
1243
|
-
$light-theme-selector: ".light",
|
|
1244
|
-
$dark-theme-selector: ".dark",
|
|
1245
|
-
$primary: true,
|
|
1246
|
-
$primary-hover: true,
|
|
1247
|
-
$primary-active: true,
|
|
1248
|
-
$primary-disabled: true,
|
|
1249
|
-
$on-primary: true,
|
|
1250
|
-
$on-primary-hover: true,
|
|
1251
|
-
$on-primary-active: true,
|
|
1252
|
-
$on-disabled: true,
|
|
1253
|
-
$neutral: true
|
|
1812
|
+
@mixin form-input-text-icon(
|
|
1813
|
+
$selector: ".form-input-text-icon",
|
|
1814
|
+
$icon-path: null
|
|
1254
1815
|
) {
|
|
1255
|
-
|
|
1256
|
-
@
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
$light-theme-selector: $light-theme-selector,
|
|
1262
|
-
$dark-theme-selector: $dark-theme-selector,
|
|
1263
|
-
$primary: $primary,
|
|
1264
|
-
$primary-hover: $primary-hover,
|
|
1265
|
-
$primary-active: $primary-active,
|
|
1266
|
-
$primary-disabled: $primary-disabled,
|
|
1267
|
-
$on-primary: $on-primary,
|
|
1268
|
-
$on-primary-hover: $on-primary-hover,
|
|
1269
|
-
$on-primary-active: $on-primary-active,
|
|
1270
|
-
$on-disabled: $on-disabled,
|
|
1271
|
-
$neutral: $neutral
|
|
1272
|
-
);
|
|
1816
|
+
#{$selector} {
|
|
1817
|
+
@if $icon-path != null {
|
|
1818
|
+
--icon-path: #{$icon-path};
|
|
1819
|
+
}
|
|
1820
|
+
@extend %form-input-element-icon;
|
|
1821
|
+
@extend %icon-input-background;
|
|
1273
1822
|
}
|
|
1274
1823
|
}
|
|
1275
1824
|
|
|
@@ -1635,153 +2184,950 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
1635
2184
|
@mixin tree-view-primary(
|
|
1636
2185
|
$tree-view-selector: ".tree-view-primary",
|
|
1637
2186
|
|
|
1638
|
-
// Drag preview
|
|
1639
|
-
$drag-preview-selector: ".tree-view-primary::part(drag-preview)",
|
|
2187
|
+
// Drag preview
|
|
2188
|
+
$drag-preview-selector: ".tree-view-primary::part(drag-preview)",
|
|
2189
|
+
|
|
2190
|
+
// Drag enter on item
|
|
2191
|
+
$item--drag-enter-selector: ".tree-view-primary::part(item drag-enter)",
|
|
2192
|
+
|
|
2193
|
+
// Drop
|
|
2194
|
+
$drop-selector: ".tree-view-primary::part(drop)",
|
|
2195
|
+
|
|
2196
|
+
// Item header
|
|
2197
|
+
$item__header-selector: ".tree-view-primary::part(item__header)",
|
|
2198
|
+
$item__header--not-selected-selector:
|
|
2199
|
+
".tree-view-primary::part(item__header not-selected)",
|
|
2200
|
+
$item__header--selected-selector:
|
|
2201
|
+
".tree-view-primary::part(item__header selected)",
|
|
2202
|
+
|
|
2203
|
+
// Item action
|
|
2204
|
+
$item__action-selector: ".tree-view-primary::part(item__action)",
|
|
2205
|
+
|
|
2206
|
+
// Item downloading
|
|
2207
|
+
$item__downloading-selector: ".tree-view-primary::part(item__downloading)",
|
|
2208
|
+
|
|
2209
|
+
// Item line
|
|
2210
|
+
$item__line-selector: ".tree-view-primary::part(item__line)",
|
|
2211
|
+
|
|
2212
|
+
// Checkbox
|
|
2213
|
+
$item__checkbox-selector: ".tree-view-primary::part(item__checkbox)",
|
|
2214
|
+
$item__checkbox-input-selector:
|
|
2215
|
+
".tree-view-primary::part(item__checkbox-input)",
|
|
2216
|
+
$item__checkbox-input--disabled-selector:
|
|
2217
|
+
".tree-view-primary::part(item__checkbox-input disabled)",
|
|
2218
|
+
$item__checkbox-option--disabled-selector:
|
|
2219
|
+
".tree-view-primary::part(item__checkbox-option disabled)",
|
|
2220
|
+
$item__checkbox-option--checked-selector:
|
|
2221
|
+
".tree-view-primary::part(item__checkbox-option checked)",
|
|
2222
|
+
$item__checkbox-option--indeterminate-selector:
|
|
2223
|
+
".tree-view-primary::part(item__checkbox-option indeterminate)",
|
|
2224
|
+
|
|
2225
|
+
$add--disabled: true
|
|
2226
|
+
) {
|
|
2227
|
+
// Base style
|
|
2228
|
+
#{$tree-view-selector} {
|
|
2229
|
+
@extend %tree-view;
|
|
2230
|
+
@include scrollbar-styles();
|
|
2231
|
+
}
|
|
2232
|
+
|
|
2233
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2234
|
+
// Drag preview
|
|
2235
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2236
|
+
#{$drag-preview-selector} {
|
|
2237
|
+
@extend %tree-view--drag-preview;
|
|
2238
|
+
}
|
|
2239
|
+
|
|
2240
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2241
|
+
// Drop
|
|
2242
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2243
|
+
// WA to improve the style of the drops before and after
|
|
2244
|
+
#{$drop-selector}::after {
|
|
2245
|
+
@extend %tree-view-drop--after;
|
|
2246
|
+
}
|
|
2247
|
+
|
|
2248
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2249
|
+
// Item
|
|
2250
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2251
|
+
// Drag enter
|
|
2252
|
+
#{$item--drag-enter-selector} {
|
|
2253
|
+
@extend %tree-view-item--drag-enter;
|
|
2254
|
+
}
|
|
2255
|
+
|
|
2256
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2257
|
+
// Header
|
|
2258
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2259
|
+
#{$item__header-selector} {
|
|
2260
|
+
@extend %tree-view-item__header;
|
|
2261
|
+
|
|
2262
|
+
&:focus-visible {
|
|
2263
|
+
@extend %tree-view-item__header--focus-visible;
|
|
2264
|
+
}
|
|
2265
|
+
}
|
|
2266
|
+
|
|
2267
|
+
// Item not selected with hover
|
|
2268
|
+
#{$item__header--not-selected-selector}:hover {
|
|
2269
|
+
@extend %tree-view-item__header--not-selected-hover;
|
|
2270
|
+
}
|
|
2271
|
+
|
|
2272
|
+
// Item selected and item with active
|
|
2273
|
+
#{$item__header--selected-selector} {
|
|
2274
|
+
@extend %tree-view-item__header--selected;
|
|
2275
|
+
}
|
|
2276
|
+
|
|
2277
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2278
|
+
// Action
|
|
2279
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2280
|
+
#{$item__action-selector} {
|
|
2281
|
+
@extend %tree-view-item__action;
|
|
2282
|
+
}
|
|
2283
|
+
|
|
2284
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2285
|
+
// Downloading
|
|
2286
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2287
|
+
#{$item__downloading-selector} {
|
|
2288
|
+
@extend %tree-view-item__downloading;
|
|
2289
|
+
}
|
|
2290
|
+
|
|
2291
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2292
|
+
// Line
|
|
2293
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2294
|
+
#{$item__line-selector} {
|
|
2295
|
+
@extend %tree-view-item__line;
|
|
2296
|
+
}
|
|
2297
|
+
|
|
2298
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2299
|
+
// Checkbox
|
|
2300
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2301
|
+
@include checkbox(
|
|
2302
|
+
$checkbox-selector: #{$item__checkbox-selector},
|
|
2303
|
+
|
|
2304
|
+
$checkbox__input-selector: #{$item__checkbox-input-selector},
|
|
2305
|
+
|
|
2306
|
+
$checkbox__input--disabled-selector: #{$item__checkbox-input--disabled-selector},
|
|
2307
|
+
|
|
2308
|
+
$checkbox__option--disabled-selector: #{$item__checkbox-option--disabled-selector},
|
|
2309
|
+
|
|
2310
|
+
$checkbox__option--checked-selector: #{$item__checkbox-option--checked-selector},
|
|
2311
|
+
|
|
2312
|
+
$checkbox__option--indeterminate-selector: #{$item__checkbox-option--indeterminate-selector},
|
|
2313
|
+
|
|
2314
|
+
$add--disabled: $add--disabled,
|
|
2315
|
+
$add--label: false
|
|
2316
|
+
);
|
|
2317
|
+
}
|
|
2318
|
+
|
|
2319
|
+
// // folder
|
|
2320
|
+
// &--folder::part(action)::before {
|
|
2321
|
+
// background-image: url("../src/showcase/assets/icons/folder.svg");
|
|
2322
|
+
// }
|
|
2323
|
+
// &--folder::part(action expanded)::before {
|
|
2324
|
+
// background-image: url("../src/showcase/assets/icons/folder-open.svg");
|
|
2325
|
+
// }
|
|
2326
|
+
|
|
2327
|
+
// // module
|
|
2328
|
+
// &--module::part(action)::before {
|
|
2329
|
+
// background-image: url("../src/showcase/assets/icons/module.svg");
|
|
2330
|
+
// }
|
|
2331
|
+
// &--module::part(action expanded)::before {
|
|
2332
|
+
// background-image: url("../src/showcase/assets/icons/module-open.svg");
|
|
2333
|
+
// }
|
|
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
|
+
}
|
|
1640
2500
|
|
|
1641
|
-
|
|
1642
|
-
$item--drag-enter-selector: ".tree-view-primary::part(item drag-enter)",
|
|
2501
|
+
// --checkbox-check__color: var(--mer-border-color__neutral--active);
|
|
1643
2502
|
|
|
1644
|
-
// Drop
|
|
1645
|
-
$drop-selector: ".tree-view-primary::part(drop)",
|
|
1646
2503
|
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
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
|
+
}
|
|
1653
2513
|
|
|
1654
|
-
|
|
1655
|
-
|
|
2514
|
+
%tabular-grid__main {
|
|
2515
|
+
background-color: var(--grid-main__bg-color);
|
|
2516
|
+
}
|
|
1656
2517
|
|
|
1657
|
-
|
|
1658
|
-
|
|
2518
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
2519
|
+
// ch-grid-column
|
|
2520
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
1659
2521
|
|
|
1660
|
-
|
|
1661
|
-
|
|
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
|
+
}
|
|
1662
2534
|
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
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
|
+
}
|
|
1675
2549
|
|
|
1676
|
-
|
|
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)"
|
|
1677
2780
|
) {
|
|
1678
2781
|
// Base style
|
|
1679
|
-
#{$
|
|
1680
|
-
@extend %
|
|
1681
|
-
|
|
2782
|
+
#{$tabular-grid-selector} {
|
|
2783
|
+
@extend %tabular-grid;
|
|
2784
|
+
&:focus {
|
|
2785
|
+
outline: none;
|
|
2786
|
+
}
|
|
1682
2787
|
}
|
|
1683
2788
|
|
|
1684
2789
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1685
|
-
//
|
|
2790
|
+
// ch-grid
|
|
1686
2791
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1687
|
-
|
|
1688
|
-
|
|
2792
|
+
|
|
2793
|
+
#{$tabular-grid__main} {
|
|
2794
|
+
@extend %tabular-grid__main;
|
|
2795
|
+
background-color: var(--grid-main__bg-color);
|
|
2796
|
+
gap: 1px;
|
|
1689
2797
|
}
|
|
1690
2798
|
|
|
1691
2799
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1692
|
-
//
|
|
2800
|
+
// ch-grid-column
|
|
1693
2801
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1694
|
-
|
|
1695
|
-
#{$
|
|
1696
|
-
@extend %
|
|
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
|
+
}
|
|
1697
2840
|
}
|
|
1698
2841
|
|
|
1699
2842
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1700
|
-
//
|
|
2843
|
+
// ch-grid-row
|
|
1701
2844
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1702
|
-
|
|
1703
|
-
#{$
|
|
1704
|
-
@extend %
|
|
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
|
+
}
|
|
1705
2871
|
}
|
|
1706
2872
|
|
|
1707
2873
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1708
|
-
//
|
|
2874
|
+
// ch-grid-rowset
|
|
1709
2875
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1710
|
-
#{$item__header-selector} {
|
|
1711
|
-
@extend %tree-view-item__header;
|
|
1712
2876
|
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
}
|
|
1716
|
-
}
|
|
2877
|
+
#{$tabular-grid-rowset} {
|
|
2878
|
+
@extend %tabular-grid-rowset;
|
|
1717
2879
|
|
|
1718
|
-
|
|
1719
|
-
|
|
1720
|
-
|
|
1721
|
-
|
|
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
|
+
}
|
|
1722
2889
|
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
2890
|
+
&[collapsed]:not(:last-child) {
|
|
2891
|
+
#{$tabular-grid-rowset-legend} {
|
|
2892
|
+
margin-block-end: 1px;
|
|
2893
|
+
}
|
|
2894
|
+
}
|
|
1726
2895
|
}
|
|
1727
2896
|
|
|
1728
2897
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1729
|
-
//
|
|
2898
|
+
// ch-grid-rowset-legend
|
|
1730
2899
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1731
|
-
|
|
1732
|
-
|
|
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;
|
|
1733
2920
|
}
|
|
1734
2921
|
|
|
1735
2922
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1736
|
-
//
|
|
2923
|
+
// ch-grid-cell
|
|
1737
2924
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1738
|
-
|
|
1739
|
-
|
|
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;
|
|
1740
2965
|
}
|
|
1741
2966
|
|
|
1742
2967
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1743
|
-
//
|
|
2968
|
+
// ch-grid-row-actions
|
|
1744
2969
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1745
|
-
#{$
|
|
1746
|
-
|
|
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;
|
|
1747
2977
|
}
|
|
2978
|
+
#{$tabular-grid-row-actions__main} {
|
|
2979
|
+
@extend %tabular-grid-row-actions__main;
|
|
2980
|
+
}
|
|
2981
|
+
}
|
|
1748
2982
|
|
|
1749
|
-
|
|
1750
|
-
//
|
|
1751
|
-
|
|
1752
|
-
|
|
1753
|
-
|
|
2983
|
+
@mixin code-tokens() {
|
|
2984
|
+
// TODO: variable names should be updated to something more descriptive
|
|
2985
|
+
--ch-code__color-base: var(--mer-text__on-surface);
|
|
2986
|
+
--ch-code__color-blue: var(--mer-color__primary-blue--400);
|
|
2987
|
+
--ch-code__color-light-blue: var(--mer-color__primary-blue--200);
|
|
2988
|
+
--ch-code__color-red: var(--mer-color__message-red--200);
|
|
2989
|
+
--ch-code__color-green: var(--mer-color__message-green--200);
|
|
2990
|
+
--ch-code__bg-color: var(--mer-color__neutral-gray--800);
|
|
2991
|
+
--ch-code__border: var(--mer-border__width--sm) solid
|
|
2992
|
+
var(--mer-color__elevation--01);
|
|
2993
|
+
--ch-code__border-radius: var(--mer-border__radius--sm);
|
|
2994
|
+
--ch-code__padding: var(--mer-spacing--xs) var(--mer-spacing--sm);
|
|
2995
|
+
}
|
|
1754
2996
|
|
|
1755
|
-
$checkbox__input-selector: #{$item__checkbox-input-selector},
|
|
1756
2997
|
|
|
1757
|
-
|
|
2998
|
+
@mixin code($selector: ".code") {
|
|
2999
|
+
#{$selector} {
|
|
3000
|
+
// reset
|
|
3001
|
+
pre {
|
|
3002
|
+
margin: 0;
|
|
3003
|
+
}
|
|
3004
|
+
/* begin of WA */
|
|
3005
|
+
// prevent text wrap
|
|
3006
|
+
.hljs-tag {
|
|
3007
|
+
white-space: nowrap;
|
|
3008
|
+
}
|
|
3009
|
+
overflow: auto;
|
|
3010
|
+
pre {
|
|
3011
|
+
overflow: auto;
|
|
3012
|
+
@include scrollbar-styles();
|
|
3013
|
+
}
|
|
3014
|
+
// prevent text wrap
|
|
3015
|
+
/* end of WA */
|
|
1758
3016
|
|
|
1759
|
-
|
|
3017
|
+
background-color: var(--ch-code__bg-color);
|
|
3018
|
+
border: var(--ch-code__border);
|
|
3019
|
+
border-radius: var(--ch-code__border-radius);
|
|
3020
|
+
padding: var(--ch-code__padding);
|
|
1760
3021
|
|
|
1761
|
-
|
|
3022
|
+
@include code-tokens();
|
|
3023
|
+
.hljs-doctag,
|
|
3024
|
+
.hljs-keyword,
|
|
3025
|
+
.hljs-meta .hljs-keyword,
|
|
3026
|
+
.hljs-template-tag,
|
|
3027
|
+
.hljs-template-variable,
|
|
3028
|
+
.hljs-type,
|
|
3029
|
+
.hljs-variable.language_ {
|
|
3030
|
+
/* prettylights-syntax-keyword */
|
|
3031
|
+
color: var(--ch-code__color-blue);
|
|
3032
|
+
}
|
|
1762
3033
|
|
|
1763
|
-
|
|
3034
|
+
.hljs-title,
|
|
3035
|
+
.hljs-title.class_,
|
|
3036
|
+
.hljs-title.class_.inherited__,
|
|
3037
|
+
.hljs-title.function_ {
|
|
3038
|
+
color: var(--ch-code__color-base);
|
|
3039
|
+
}
|
|
1764
3040
|
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
3041
|
+
.hljs-attr,
|
|
3042
|
+
.hljs-attribute,
|
|
3043
|
+
.hljs-literal,
|
|
3044
|
+
.hljs-meta,
|
|
3045
|
+
.hljs-number,
|
|
3046
|
+
.hljs-operator,
|
|
3047
|
+
.hljs-variable,
|
|
3048
|
+
.hljs-selector-attr,
|
|
3049
|
+
.hljs-selector-class,
|
|
3050
|
+
.hljs-selector-id {
|
|
3051
|
+
color: var(--ch-code__color-blue);
|
|
3052
|
+
}
|
|
1769
3053
|
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
|
|
3054
|
+
.hljs-regexp,
|
|
3055
|
+
.hljs-string,
|
|
3056
|
+
.hljs-meta .hljs-string {
|
|
3057
|
+
color: var(
|
|
3058
|
+
--ch-code__color-green
|
|
3059
|
+
); /* DARK: color-mix(in srgb, var(--colors-foundation-un-color__red--300) 60%, #000) */
|
|
3060
|
+
}
|
|
1777
3061
|
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
3062
|
+
.hljs-built_in,
|
|
3063
|
+
.hljs-symbol {
|
|
3064
|
+
/* prettylights-syntax-variable */
|
|
3065
|
+
color: #e36209;
|
|
3066
|
+
}
|
|
3067
|
+
|
|
3068
|
+
.hljs-comment,
|
|
3069
|
+
.hljs-code,
|
|
3070
|
+
.hljs-formula {
|
|
3071
|
+
color: var(--ch-code__color-green);
|
|
3072
|
+
}
|
|
3073
|
+
|
|
3074
|
+
.hljs-name,
|
|
3075
|
+
.hljs-quote,
|
|
3076
|
+
.hljs-selector-tag,
|
|
3077
|
+
.hljs-selector-pseudo {
|
|
3078
|
+
color: var(--ch-code__color-light-blue);
|
|
3079
|
+
}
|
|
3080
|
+
|
|
3081
|
+
.hljs-subst {
|
|
3082
|
+
/* prettylights-syntax-storage-modifier-import */
|
|
3083
|
+
color: #24292e;
|
|
3084
|
+
}
|
|
3085
|
+
|
|
3086
|
+
.hljs-section {
|
|
3087
|
+
/* prettylights-syntax-markup-heading */
|
|
3088
|
+
color: #005cc5;
|
|
3089
|
+
font-weight: bold;
|
|
3090
|
+
}
|
|
3091
|
+
|
|
3092
|
+
.hljs-bullet {
|
|
3093
|
+
/* prettylights-syntax-markup-list */
|
|
3094
|
+
color: #735c0f;
|
|
3095
|
+
}
|
|
3096
|
+
|
|
3097
|
+
.hljs-emphasis {
|
|
3098
|
+
/* prettylights-syntax-markup-italic */
|
|
3099
|
+
color: #24292e;
|
|
3100
|
+
font-style: italic;
|
|
3101
|
+
}
|
|
3102
|
+
|
|
3103
|
+
.hljs-strong {
|
|
3104
|
+
/* prettylights-syntax-markup-bold */
|
|
3105
|
+
color: #24292e;
|
|
3106
|
+
font-weight: bold;
|
|
3107
|
+
}
|
|
3108
|
+
|
|
3109
|
+
.hljs-addition {
|
|
3110
|
+
/* prettylights-syntax-markup-inserted */
|
|
3111
|
+
color: #22863a;
|
|
3112
|
+
background-color: #f0fff4;
|
|
3113
|
+
}
|
|
3114
|
+
|
|
3115
|
+
.hljs-deletion {
|
|
3116
|
+
/* prettylights-syntax-markup-deleted */
|
|
3117
|
+
color: #b31d28;
|
|
3118
|
+
background-color: #ffeef0;
|
|
3119
|
+
}
|
|
3120
|
+
|
|
3121
|
+
.hljs-char.escape_,
|
|
3122
|
+
.hljs-link,
|
|
3123
|
+
.hljs-params,
|
|
3124
|
+
.hljs-property,
|
|
3125
|
+
.hljs-punctuation,
|
|
3126
|
+
.hljs-tag {
|
|
3127
|
+
/* purposely ignored */
|
|
3128
|
+
}
|
|
3129
|
+
}
|
|
3130
|
+
}
|
|
1785
3131
|
|
|
1786
3132
|
|
|
1787
3133
|
@mixin mercury(
|
|
@@ -1818,15 +3164,18 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
1818
3164
|
// Base
|
|
1819
3165
|
$base-classes: true,
|
|
1820
3166
|
$button-classes: true,
|
|
3167
|
+
$form-input-text-classes: true,
|
|
1821
3168
|
$icon-classes: true,
|
|
1822
3169
|
|
|
1823
3170
|
// Icons
|
|
1824
|
-
$icons-
|
|
3171
|
+
$icons-elements: true,
|
|
1825
3172
|
|
|
1826
3173
|
// Components
|
|
1827
3174
|
$components: true,
|
|
1828
3175
|
$checkbox: true,
|
|
1829
|
-
$tree-view-primary: true
|
|
3176
|
+
$tree-view-primary: true,
|
|
3177
|
+
$tabular-grid: true,
|
|
3178
|
+
$code: true
|
|
1830
3179
|
) {
|
|
1831
3180
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1832
3181
|
// Icons
|
|
@@ -5114,12 +6463,18 @@ system: $system,
|
|
|
5114
6463
|
// Light
|
|
5115
6464
|
@if $colors and $light-theme and $tokens {
|
|
5116
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;
|
|
5117
6469
|
@include foundation-colors--light();
|
|
5118
6470
|
}
|
|
5119
6471
|
}
|
|
5120
6472
|
@if $colors and $tokens and $prefers-color-scheme-light {
|
|
5121
6473
|
@media (prefers-color-scheme: light) {
|
|
5122
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;
|
|
5123
6478
|
@include foundation-colors--light();
|
|
5124
6479
|
}
|
|
5125
6480
|
}
|
|
@@ -5128,12 +6483,18 @@ system: $system,
|
|
|
5128
6483
|
// Dark
|
|
5129
6484
|
@if $colors and $dark-theme and $tokens {
|
|
5130
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;
|
|
5131
6489
|
@include foundation-colors--dark();
|
|
5132
6490
|
}
|
|
5133
6491
|
}
|
|
5134
6492
|
@if $colors and $tokens and $prefers-color-scheme-dark {
|
|
5135
6493
|
@media (prefers-color-scheme: dark) {
|
|
5136
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;
|
|
5137
6498
|
@include foundation-colors--dark();
|
|
5138
6499
|
}
|
|
5139
6500
|
}
|
|
@@ -5267,9 +6628,6 @@ system: $system,
|
|
|
5267
6628
|
@if $button-classes {
|
|
5268
6629
|
// Button primary
|
|
5269
6630
|
@include button-primary();
|
|
5270
|
-
:root.dark {
|
|
5271
|
-
@include button-tokens();
|
|
5272
|
-
}
|
|
5273
6631
|
|
|
5274
6632
|
// Button secondary
|
|
5275
6633
|
@include button-secondary();
|
|
@@ -5278,18 +6636,27 @@ system: $system,
|
|
|
5278
6636
|
@include button-tertiary();
|
|
5279
6637
|
}
|
|
5280
6638
|
|
|
6639
|
+
// Form input text
|
|
6640
|
+
@if $form-input-text-classes {
|
|
6641
|
+
@include form-input-text-only();
|
|
6642
|
+
}
|
|
6643
|
+
|
|
5281
6644
|
// Icon classes
|
|
5282
6645
|
@if $icon-classes {
|
|
5283
6646
|
@include icon-mask();
|
|
5284
6647
|
@include icon-background();
|
|
6648
|
+
@include form-input-text-icon();
|
|
6649
|
+
@include form-input-bg-x-rtl-support();
|
|
5285
6650
|
}
|
|
5286
6651
|
}
|
|
5287
6652
|
|
|
5288
6653
|
// - - - - - - - - - - - - - - - - - - - -
|
|
5289
6654
|
// Icons on Elements / Components
|
|
5290
6655
|
// - - - - - - - - - - - - - - - - - - - -
|
|
5291
|
-
|
|
5292
|
-
|
|
6656
|
+
@if ($icons-elements) {
|
|
6657
|
+
// Process icons lists
|
|
6658
|
+
@include process-monochrome-icons-list($system-virtual-selectors);
|
|
6659
|
+
|
|
5293
6660
|
// Button icon only
|
|
5294
6661
|
@include button-icon-only();
|
|
5295
6662
|
|
|
@@ -5299,18 +6666,29 @@ system: $system,
|
|
|
5299
6666
|
// Button icon after and text
|
|
5300
6667
|
@include button-icon-after-and-text();
|
|
5301
6668
|
|
|
5302
|
-
|
|
6669
|
+
// Form input text
|
|
6670
|
+
@include form-input-text-icon();
|
|
5303
6671
|
}
|
|
5304
6672
|
|
|
5305
6673
|
// - - - - - - - - - - - - - - - - - - -
|
|
5306
6674
|
// Components
|
|
5307
6675
|
// - - - - - - - - - - - - - - - - - - -
|
|
5308
6676
|
@if $components {
|
|
6677
|
+
// checkbox
|
|
5309
6678
|
@if $checkbox {
|
|
5310
6679
|
@include checkbox();
|
|
5311
6680
|
}
|
|
6681
|
+
// tree view
|
|
5312
6682
|
@if $tree-view-primary {
|
|
5313
6683
|
@include tree-view-primary();
|
|
5314
6684
|
}
|
|
6685
|
+
// tabular grid
|
|
6686
|
+
@if $tabular-grid {
|
|
6687
|
+
@include tabular-grid();
|
|
6688
|
+
}
|
|
6689
|
+
// code
|
|
6690
|
+
@if $code {
|
|
6691
|
+
@include code();
|
|
6692
|
+
}
|
|
5315
6693
|
}
|
|
5316
6694
|
}
|