@sbb-esta/lyne-elements-dev 4.10.0-dev.1776065785 → 4.10.0-dev.1776087145
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/core/styles/mixins/table.scss +18 -19
- package/core/styles/theme.scss +3 -1
- package/custom-elements.json +1862 -1840
- package/development/form-field/form-field/form-field.component.d.ts +6 -0
- package/development/form-field/form-field/form-field.component.d.ts.map +1 -1
- package/development/form-field/form-field/form-field.component.js +1 -1
- package/development/form-field/form-field.js +1 -1
- package/development/form-field.component-DfMO_ihX.js +706 -0
- package/development/form-field.js +1 -1
- package/development/form-field.pure.js +1 -1
- package/form-field/form-field/form-field.component.js +1 -1
- package/form-field/form-field.js +1 -1
- package/{form-field.component-D50q1wC0.js → form-field.component-Cx5Keg_p.js} +15 -15
- package/form-field.js +1 -1
- package/form-field.pure.js +1 -1
- package/off-brand-theme.css +32 -37
- package/package.json +2 -2
- package/safety-theme.css +32 -37
- package/standard-theme.css +32 -37
- package/table.css +32 -37
- package/core/styles/table.scss +0 -156
- package/development/form-field.component-BEXX0OcL.js +0 -702
package/table.css
CHANGED
|
@@ -1,7 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
:root {
|
|
2
|
+
--sbb-table-border-color: var(--sbb-color-cloud);
|
|
3
|
+
--sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
|
|
4
|
+
--sbb-table-background-color: var(--sbb-background-color-1);
|
|
5
|
+
--sbb-table-row-striped-color: var(--sbb-background-color-3);
|
|
6
|
+
--sbb-table-color: var(--sbb-color-1);
|
|
7
|
+
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
8
|
+
--sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
|
|
9
|
+
--sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
|
|
10
|
+
--sbb-table-sticky-shadow-width: 3rem;
|
|
11
|
+
--sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
|
|
5
12
|
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
6
13
|
--sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
|
|
7
14
|
--sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
|
|
@@ -9,28 +16,16 @@
|
|
|
9
16
|
--sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
|
|
10
17
|
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
|
|
11
18
|
}
|
|
12
|
-
|
|
13
|
-
.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
|
|
14
|
-
.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
|
|
15
|
-
.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
|
|
16
|
-
background-color: var(--sbb-table-row-striped-color);
|
|
17
|
-
}
|
|
19
|
+
|
|
18
20
|
.sbb-table,
|
|
19
21
|
.sbb-table-m,
|
|
20
22
|
.sbb-table-s,
|
|
21
23
|
.sbb-table-xs {
|
|
22
24
|
--sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
|
|
23
|
-
--sbb-table-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
--sbb-table-color: var(--sbb-color-1);
|
|
28
|
-
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
29
|
-
--sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
|
|
30
|
-
--sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
|
|
31
|
-
--sbb-table-sticky-shadow-width: 3rem;
|
|
32
|
-
--sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
|
|
33
|
-
--sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
|
|
25
|
+
--sbb-table-sticky-shadow-transition-duration: var(
|
|
26
|
+
--sbb-disable-animation-duration,
|
|
27
|
+
var(--sbb-animation-duration-6x)
|
|
28
|
+
);
|
|
34
29
|
border-spacing: 0;
|
|
35
30
|
caption-side: bottom;
|
|
36
31
|
color: var(--sbb-table-color);
|
|
@@ -74,6 +69,12 @@
|
|
|
74
69
|
.sbb-table-xs :is(th, td):first-child {
|
|
75
70
|
border-inline-start: var(--sbb-table-border);
|
|
76
71
|
}
|
|
72
|
+
.sbb-table tbody tr:nth-child(odd) :is(th, td),
|
|
73
|
+
.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
|
|
74
|
+
.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
|
|
75
|
+
.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
|
|
76
|
+
background-color: var(--sbb-table-row-striped-color);
|
|
77
|
+
}
|
|
77
78
|
.sbb-table:has(thead tr) thead tr:first-of-type > :is(th, td), .sbb-table:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
|
|
78
79
|
.sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
|
|
79
80
|
.sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
|
|
@@ -94,7 +95,10 @@
|
|
|
94
95
|
.sbb-table-s caption,
|
|
95
96
|
.sbb-table-xs caption {
|
|
96
97
|
--sbb-table-caption-color-fallback: var(--sbb-color-granite);
|
|
97
|
-
--sbb-table-caption-color-fallback: light-dark(
|
|
98
|
+
--sbb-table-caption-color-fallback: light-dark(
|
|
99
|
+
var(--sbb-color-granite),
|
|
100
|
+
var(--sbb-color-cement)
|
|
101
|
+
);
|
|
98
102
|
font-size: var(--sbb-text-font-size-xs);
|
|
99
103
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
100
104
|
color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
|
|
@@ -149,11 +153,15 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
149
153
|
.sbb-table--theme-iron {
|
|
150
154
|
--sbb-table-cell-color: var(--sbb-color-4);
|
|
151
155
|
}
|
|
156
|
+
sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-table--negative {
|
|
157
|
+
--sbb-table-cell-color: var(--sbb-color-cloud);
|
|
158
|
+
}
|
|
152
159
|
.sbb-table--theme-iron tbody > tr > td {
|
|
153
160
|
color: var(--sbb-table-cell-color);
|
|
154
161
|
}
|
|
155
|
-
|
|
156
|
-
|
|
162
|
+
|
|
163
|
+
.sbb-table-header-subtitle {
|
|
164
|
+
font-weight: normal;
|
|
157
165
|
}
|
|
158
166
|
|
|
159
167
|
.sbb-table-header-row:last-of-type > th {
|
|
@@ -237,15 +245,6 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
237
245
|
inset-inline-end: unset;
|
|
238
246
|
}
|
|
239
247
|
|
|
240
|
-
html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
241
|
-
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
242
|
-
--sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
|
|
243
|
-
--sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
|
|
244
|
-
--sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
245
|
-
--sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
|
|
246
|
-
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
247
|
-
}
|
|
248
|
-
|
|
249
248
|
.sbb-table-align-start {
|
|
250
249
|
text-align: start;
|
|
251
250
|
}
|
|
@@ -268,8 +267,4 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
|
268
267
|
|
|
269
268
|
.sbb-table-align-right {
|
|
270
269
|
text-align: right;
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
.sbb-table-header-subtitle {
|
|
274
|
-
font-weight: normal;
|
|
275
270
|
}
|
package/core/styles/table.scss
DELETED
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
@use './mixins/table';
|
|
2
|
-
|
|
3
|
-
.sbb-table,
|
|
4
|
-
.sbb-table-m,
|
|
5
|
-
.sbb-table-s,
|
|
6
|
-
.sbb-table-xs {
|
|
7
|
-
@include table.table;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.sbb-table-m {
|
|
11
|
-
@include table.table--m;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.sbb-table-s {
|
|
15
|
-
@include table.table--s;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.sbb-table-xs {
|
|
19
|
-
@include table.table--xs;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
sbb-table-wrapper[negative] .sbb-table,
|
|
23
|
-
.sbb-table--negative {
|
|
24
|
-
@include table.table--negative;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.sbb-table--striped {
|
|
28
|
-
@include table.table--striped;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.sbb-table--unstriped {
|
|
32
|
-
@include table.table--unstriped;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.sbb-table--theme-iron {
|
|
36
|
-
@include table.table--theme-iron;
|
|
37
|
-
|
|
38
|
-
&.sbb-table--negative {
|
|
39
|
-
@include table.table--theme-iron-negative;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
// @deprecated
|
|
44
|
-
.sbb-table-header-row {
|
|
45
|
-
@include table.table-header-row;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
// @deprecated
|
|
49
|
-
.sbb-table-header-cell {
|
|
50
|
-
@include table.table-header-cell;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.sbb-table-row--striped {
|
|
54
|
-
@include table.table-row--striped;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
// @deprecated
|
|
58
|
-
.sbb-table-data-cell {
|
|
59
|
-
@include table.table-data-cell;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
// @deprecated
|
|
63
|
-
.sbb-table-caption {
|
|
64
|
-
@include table.table-caption;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.sbb-table-filter {
|
|
68
|
-
@include table.table-filter;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.sbb-table-sticky {
|
|
72
|
-
// Note that the table can either set this class or an inline style to make something sticky.
|
|
73
|
-
// We set the style as `!important` so that we get an identical specificity in both cases
|
|
74
|
-
// and to avoid cases where user styles have a higher specificity.
|
|
75
|
-
position: sticky !important;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
// The `sbb-table-sticky-*` css classes are used by the Angular wrapper and CDK.
|
|
79
|
-
// Do not rename them, pls.
|
|
80
|
-
:is(.sbb-table-sticky-border-elem-left, .sbb-table-sticky-border-elem-right)::after {
|
|
81
|
-
content: '';
|
|
82
|
-
transition: {
|
|
83
|
-
timing-function: var(--sbb-table-sticky-shadow-transition-easing);
|
|
84
|
-
duration: var(--sbb-table-sticky-shadow-transition-duration);
|
|
85
|
-
property: visibility, opacity;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
visibility: hidden;
|
|
89
|
-
opacity: 0;
|
|
90
|
-
position: absolute;
|
|
91
|
-
width: var(--sbb-table-sticky-shadow-width);
|
|
92
|
-
inset: 0;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.sbb-table-sticky-border-elem-left {
|
|
96
|
-
:is(.sbb-table-wrapper-offset-left, .sbb-table-wrapper-offset-both) & {
|
|
97
|
-
border-inline-end: var(--sbb-table-border);
|
|
98
|
-
|
|
99
|
-
&::after {
|
|
100
|
-
visibility: visible;
|
|
101
|
-
opacity: 1;
|
|
102
|
-
background-image: linear-gradient(-270deg, rgb(0 0 0 / 10%) 0%, transparent 100%);
|
|
103
|
-
inset-inline-start: unset;
|
|
104
|
-
inset-inline-end: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.sbb-table-sticky-border-elem-right {
|
|
110
|
-
:is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) & {
|
|
111
|
-
border-inline-start: var(--sbb-table-border);
|
|
112
|
-
|
|
113
|
-
&::after {
|
|
114
|
-
visibility: visible;
|
|
115
|
-
opacity: 1;
|
|
116
|
-
background-image: linear-gradient(270deg, rgb(0 0 0 / 10%) 0%, transparent 100%);
|
|
117
|
-
inset-inline-start: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
|
|
118
|
-
inset-inline-end: unset;
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
// TODO: In future, move to the 'sbb-lean' theme
|
|
124
|
-
html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
125
|
-
@include table.table--s;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.sbb-table-align-start {
|
|
129
|
-
text-align: start;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.sbb-table-align-center {
|
|
133
|
-
text-align: center;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.sbb-table-align-end {
|
|
137
|
-
text-align: end;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
.sbb-table-align-justify {
|
|
141
|
-
text-align: justify;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
// Backwards compatibility for sbb-angular
|
|
145
|
-
.sbb-table-align-left {
|
|
146
|
-
text-align: left;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
// Backwards compatibility for sbb-angular
|
|
150
|
-
.sbb-table-align-right {
|
|
151
|
-
text-align: right;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
.sbb-table-header-subtitle {
|
|
155
|
-
font-weight: normal;
|
|
156
|
-
}
|