@sbb-esta/lyne-elements-dev 4.9.0-dev.1774354777 → 4.9.0-dev.1774376412
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 +40 -29
- package/core/styles/table.scss +30 -0
- package/custom-elements.json +24 -24
- package/off-brand-theme.css +60 -38
- package/package.json +2 -2
- package/safety-theme.css +60 -38
- package/standard-theme.css +60 -38
- package/table.css +60 -38
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
// Notes:
|
|
5
5
|
// We cannot use `border-collapse` because in sticky variants it gets visually broken.
|
|
6
6
|
// Therefore, we have to build the grid avoiding double borders.
|
|
7
|
+
// TODO: remove with next major release
|
|
7
8
|
@mixin table {
|
|
8
9
|
@include table--m;
|
|
9
10
|
@include table--striped;
|
|
@@ -23,49 +24,46 @@
|
|
|
23
24
|
caption-side: bottom;
|
|
24
25
|
color: var(--sbb-table-color);
|
|
25
26
|
table-layout: auto;
|
|
27
|
+
text-align: left;
|
|
26
28
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
29
|
+
th {
|
|
30
|
+
@include table-header-cell;
|
|
31
|
+
}
|
|
30
32
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
33
|
+
td {
|
|
34
|
+
@include table-data-cell;
|
|
35
|
+
}
|
|
34
36
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
+
:is(th, td) {
|
|
38
|
+
&.sbb-table-group-with-next {
|
|
39
|
+
border-inline-end: none;
|
|
40
|
+
}
|
|
37
41
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
+
&:first-child {
|
|
43
|
+
border-inline-start: var(--sbb-table-border);
|
|
42
44
|
}
|
|
43
45
|
}
|
|
44
46
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
border-inline-start: var(--sbb-table-border);
|
|
52
|
-
}
|
|
53
|
-
}
|
|
47
|
+
// In Angular the CDK table always adds a thead even if there are no headers.
|
|
48
|
+
// Due to this fact we have to also insert `tr` in the `:has()` selector.
|
|
49
|
+
&:has(thead tr) thead,
|
|
50
|
+
&:not(:has(thead tr)) tbody {
|
|
51
|
+
tr:first-of-type > :is(th, td) {
|
|
52
|
+
border-block-start: var(--sbb-table-border);
|
|
54
53
|
}
|
|
55
54
|
}
|
|
56
55
|
|
|
57
|
-
|
|
58
|
-
|
|
56
|
+
// Avoid borders between header rows (design specification).
|
|
57
|
+
thead > tr:has(+ tr) > :is(th, td) {
|
|
58
|
+
border-block-end: none;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
// Due to this fact we have to also insert `tr` in the `:has()` selector.
|
|
64
|
-
&:not(:has(thead tr)) tbody > tr:first-of-type > td {
|
|
65
|
-
border-block-start: var(--sbb-table-border);
|
|
61
|
+
caption {
|
|
62
|
+
@include table-caption;
|
|
66
63
|
}
|
|
67
64
|
}
|
|
68
65
|
|
|
66
|
+
// TODO: remove with next major release
|
|
69
67
|
@mixin table-header-row {
|
|
70
68
|
// If there is more than one header row, only the last one has the bottom border
|
|
71
69
|
&:last-of-type > th {
|
|
@@ -73,17 +71,19 @@
|
|
|
73
71
|
}
|
|
74
72
|
}
|
|
75
73
|
|
|
74
|
+
// TODO: remove with next major release
|
|
76
75
|
@mixin table-header-cell {
|
|
77
76
|
font-size: var(--sbb-table-header-cell-font-size);
|
|
78
77
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
79
78
|
font-weight: bold;
|
|
80
79
|
background-color: var(--sbb-table-background-color);
|
|
80
|
+
border-block-end: var(--sbb-table-border);
|
|
81
81
|
border-inline-end: var(--sbb-table-border);
|
|
82
82
|
padding-block: var(--sbb-table-header-padding-block);
|
|
83
83
|
padding-inline: var(--sbb-table-header-padding-inline);
|
|
84
|
-
text-align: left;
|
|
85
84
|
}
|
|
86
85
|
|
|
86
|
+
// TODO: remove with next major release
|
|
87
87
|
@mixin table-data-cell {
|
|
88
88
|
font-size: var(--sbb-table-data-cell-font-size);
|
|
89
89
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
@@ -94,6 +94,7 @@
|
|
|
94
94
|
padding-inline: var(--sbb-table-cell-padding-inline);
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
+
// TODO: remove with next major release
|
|
97
98
|
@mixin table-caption {
|
|
98
99
|
// Workaround for storybook. It crashes if 'light-dark' is used as a 'var' fallback
|
|
99
100
|
--sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
|
|
@@ -107,26 +108,31 @@
|
|
|
107
108
|
text-align: left;
|
|
108
109
|
}
|
|
109
110
|
|
|
111
|
+
// TODO: remove and inline with next major release
|
|
110
112
|
@mixin table-filter {
|
|
111
113
|
padding-block-start: 0 !important;
|
|
112
114
|
}
|
|
113
115
|
|
|
116
|
+
// TODO: remove with next major release
|
|
114
117
|
@mixin table--striped {
|
|
115
118
|
tbody tr:nth-child(odd) :is(th, td) {
|
|
116
119
|
@include table-row--striped;
|
|
117
120
|
}
|
|
118
121
|
}
|
|
119
122
|
|
|
123
|
+
// TODO: remove with next major release
|
|
120
124
|
@mixin table--unstriped {
|
|
121
125
|
tbody tr:nth-child(odd) :is(th, td) {
|
|
122
126
|
background-color: var(--sbb-table-background-color);
|
|
123
127
|
}
|
|
124
128
|
}
|
|
125
129
|
|
|
130
|
+
// TODO: remove with next major release
|
|
126
131
|
@mixin table-row--striped {
|
|
127
132
|
background-color: var(--sbb-table-row-striped-color);
|
|
128
133
|
}
|
|
129
134
|
|
|
135
|
+
// TODO: remove with next major release
|
|
130
136
|
@mixin table--negative {
|
|
131
137
|
--sbb-table-border-color: var(--sbb-color-anthracite);
|
|
132
138
|
--sbb-table-background-color: var(--sbb-background-color-1-negative);
|
|
@@ -135,6 +141,7 @@
|
|
|
135
141
|
--sbb-table-caption-color: var(--sbb-color-cement);
|
|
136
142
|
}
|
|
137
143
|
|
|
144
|
+
// TODO: remove with next major release
|
|
138
145
|
@mixin table--m {
|
|
139
146
|
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
140
147
|
--sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
|
|
@@ -144,6 +151,7 @@
|
|
|
144
151
|
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
|
|
145
152
|
}
|
|
146
153
|
|
|
154
|
+
// TODO: remove with next major release
|
|
147
155
|
@mixin table--s {
|
|
148
156
|
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
149
157
|
--sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
|
|
@@ -153,6 +161,7 @@
|
|
|
153
161
|
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
154
162
|
}
|
|
155
163
|
|
|
164
|
+
// TODO: remove with next major release
|
|
156
165
|
@mixin table--xs {
|
|
157
166
|
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
158
167
|
--sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
|
|
@@ -162,6 +171,7 @@
|
|
|
162
171
|
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-1x);
|
|
163
172
|
}
|
|
164
173
|
|
|
174
|
+
// TODO: remove with next major release
|
|
165
175
|
@mixin table--theme-iron {
|
|
166
176
|
--sbb-table-cell-color: var(--sbb-color-4);
|
|
167
177
|
|
|
@@ -170,6 +180,7 @@
|
|
|
170
180
|
}
|
|
171
181
|
}
|
|
172
182
|
|
|
183
|
+
// TODO: remove with next major release
|
|
173
184
|
@mixin table--theme-iron-negative {
|
|
174
185
|
--sbb-table-cell-color: var(--sbb-color-cloud);
|
|
175
186
|
}
|
package/core/styles/table.scss
CHANGED
|
@@ -40,10 +40,12 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
+
// @deprecated
|
|
43
44
|
.sbb-table-header-row {
|
|
44
45
|
@include table.table-header-row;
|
|
45
46
|
}
|
|
46
47
|
|
|
48
|
+
// @deprecated
|
|
47
49
|
.sbb-table-header-cell {
|
|
48
50
|
@include table.table-header-cell;
|
|
49
51
|
}
|
|
@@ -52,10 +54,12 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
52
54
|
@include table.table-row--striped;
|
|
53
55
|
}
|
|
54
56
|
|
|
57
|
+
// @deprecated
|
|
55
58
|
.sbb-table-data-cell {
|
|
56
59
|
@include table.table-data-cell;
|
|
57
60
|
}
|
|
58
61
|
|
|
62
|
+
// @deprecated
|
|
59
63
|
.sbb-table-caption {
|
|
60
64
|
@include table.table-caption;
|
|
61
65
|
}
|
|
@@ -120,3 +124,29 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
120
124
|
html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
121
125
|
@include table.table--s;
|
|
122
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
|
+
}
|
package/custom-elements.json
CHANGED
|
@@ -80748,12 +80748,12 @@
|
|
|
80748
80748
|
},
|
|
80749
80749
|
{
|
|
80750
80750
|
"kind": "javascript-module",
|
|
80751
|
-
"path": "datepicker/datepicker-
|
|
80751
|
+
"path": "datepicker/datepicker-next-day/datepicker-next-day.component.js",
|
|
80752
80752
|
"declarations": [
|
|
80753
80753
|
{
|
|
80754
80754
|
"kind": "class",
|
|
80755
|
-
"description": "Combined with a `sbb-datepicker`, it can be used to move the date
|
|
80756
|
-
"name": "
|
|
80755
|
+
"description": "Combined with a `sbb-datepicker`, it can be used to move the date ahead.",
|
|
80756
|
+
"name": "SbbDatepickerNextDayElement",
|
|
80757
80757
|
"members": [
|
|
80758
80758
|
{
|
|
80759
80759
|
"kind": "field",
|
|
@@ -80768,7 +80768,7 @@
|
|
|
80768
80768
|
"name": "SbbElement",
|
|
80769
80769
|
"module": "core/base-elements/element.js"
|
|
80770
80770
|
},
|
|
80771
|
-
"default": "'sbb-datepicker-
|
|
80771
|
+
"default": "'sbb-datepicker-next-day'"
|
|
80772
80772
|
},
|
|
80773
80773
|
{
|
|
80774
80774
|
"kind": "field",
|
|
@@ -80781,7 +80781,7 @@
|
|
|
80781
80781
|
"name": "SbbDatepickerButtonBase",
|
|
80782
80782
|
"module": "datepicker/common/datepicker-button.js"
|
|
80783
80783
|
},
|
|
80784
|
-
"default": "'chevron-small-
|
|
80784
|
+
"default": "'chevron-small-right-small'"
|
|
80785
80785
|
},
|
|
80786
80786
|
{
|
|
80787
80787
|
"kind": "field",
|
|
@@ -80790,7 +80790,7 @@
|
|
|
80790
80790
|
"text": "Record<string, string>"
|
|
80791
80791
|
},
|
|
80792
80792
|
"privacy": "protected",
|
|
80793
|
-
"default": "
|
|
80793
|
+
"default": "i18nNextDay",
|
|
80794
80794
|
"inheritedFrom": {
|
|
80795
80795
|
"name": "SbbDatepickerButton",
|
|
80796
80796
|
"module": "datepicker/common/datepicker-button.js"
|
|
@@ -80803,7 +80803,7 @@
|
|
|
80803
80803
|
"text": "(_currentDate: string) => Record<string, string>"
|
|
80804
80804
|
},
|
|
80805
80805
|
"privacy": "protected",
|
|
80806
|
-
"default": "
|
|
80806
|
+
"default": "i18nSelectNextDay",
|
|
80807
80807
|
"inheritedFrom": {
|
|
80808
80808
|
"name": "SbbDatepickerButton",
|
|
80809
80809
|
"module": "datepicker/common/datepicker-button.js"
|
|
@@ -80833,7 +80833,7 @@
|
|
|
80833
80833
|
},
|
|
80834
80834
|
{
|
|
80835
80835
|
"kind": "method",
|
|
80836
|
-
"name": "
|
|
80836
|
+
"name": "_isAfterMaxDate",
|
|
80837
80837
|
"privacy": "private",
|
|
80838
80838
|
"return": {
|
|
80839
80839
|
"type": {
|
|
@@ -81693,7 +81693,7 @@
|
|
|
81693
81693
|
"name": "SbbDatepickerButton",
|
|
81694
81694
|
"module": "datepicker/common/datepicker-button.js"
|
|
81695
81695
|
},
|
|
81696
|
-
"tagName": "sbb-datepicker-
|
|
81696
|
+
"tagName": "sbb-datepicker-next-day",
|
|
81697
81697
|
"customElement": true,
|
|
81698
81698
|
"classGenerics": "T = Date",
|
|
81699
81699
|
"attributes": [
|
|
@@ -81779,22 +81779,22 @@
|
|
|
81779
81779
|
"exports": [
|
|
81780
81780
|
{
|
|
81781
81781
|
"kind": "js",
|
|
81782
|
-
"name": "
|
|
81782
|
+
"name": "SbbDatepickerNextDayElement",
|
|
81783
81783
|
"declaration": {
|
|
81784
|
-
"name": "
|
|
81785
|
-
"module": "datepicker/datepicker-
|
|
81784
|
+
"name": "SbbDatepickerNextDayElement",
|
|
81785
|
+
"module": "datepicker/datepicker-next-day/datepicker-next-day.component.js"
|
|
81786
81786
|
}
|
|
81787
81787
|
}
|
|
81788
81788
|
]
|
|
81789
81789
|
},
|
|
81790
81790
|
{
|
|
81791
81791
|
"kind": "javascript-module",
|
|
81792
|
-
"path": "datepicker/datepicker-
|
|
81792
|
+
"path": "datepicker/datepicker-previous-day/datepicker-previous-day.component.js",
|
|
81793
81793
|
"declarations": [
|
|
81794
81794
|
{
|
|
81795
81795
|
"kind": "class",
|
|
81796
|
-
"description": "Combined with a `sbb-datepicker`, it can be used to move the date
|
|
81797
|
-
"name": "
|
|
81796
|
+
"description": "Combined with a `sbb-datepicker`, it can be used to move the date back.",
|
|
81797
|
+
"name": "SbbDatepickerPreviousDayElement",
|
|
81798
81798
|
"members": [
|
|
81799
81799
|
{
|
|
81800
81800
|
"kind": "field",
|
|
@@ -81809,7 +81809,7 @@
|
|
|
81809
81809
|
"name": "SbbElement",
|
|
81810
81810
|
"module": "core/base-elements/element.js"
|
|
81811
81811
|
},
|
|
81812
|
-
"default": "'sbb-datepicker-
|
|
81812
|
+
"default": "'sbb-datepicker-previous-day'"
|
|
81813
81813
|
},
|
|
81814
81814
|
{
|
|
81815
81815
|
"kind": "field",
|
|
@@ -81822,7 +81822,7 @@
|
|
|
81822
81822
|
"name": "SbbDatepickerButtonBase",
|
|
81823
81823
|
"module": "datepicker/common/datepicker-button.js"
|
|
81824
81824
|
},
|
|
81825
|
-
"default": "'chevron-small-
|
|
81825
|
+
"default": "'chevron-small-left-small'"
|
|
81826
81826
|
},
|
|
81827
81827
|
{
|
|
81828
81828
|
"kind": "field",
|
|
@@ -81831,7 +81831,7 @@
|
|
|
81831
81831
|
"text": "Record<string, string>"
|
|
81832
81832
|
},
|
|
81833
81833
|
"privacy": "protected",
|
|
81834
|
-
"default": "
|
|
81834
|
+
"default": "i18nPreviousDay",
|
|
81835
81835
|
"inheritedFrom": {
|
|
81836
81836
|
"name": "SbbDatepickerButton",
|
|
81837
81837
|
"module": "datepicker/common/datepicker-button.js"
|
|
@@ -81844,7 +81844,7 @@
|
|
|
81844
81844
|
"text": "(_currentDate: string) => Record<string, string>"
|
|
81845
81845
|
},
|
|
81846
81846
|
"privacy": "protected",
|
|
81847
|
-
"default": "
|
|
81847
|
+
"default": "i18nSelectPreviousDay",
|
|
81848
81848
|
"inheritedFrom": {
|
|
81849
81849
|
"name": "SbbDatepickerButton",
|
|
81850
81850
|
"module": "datepicker/common/datepicker-button.js"
|
|
@@ -81874,7 +81874,7 @@
|
|
|
81874
81874
|
},
|
|
81875
81875
|
{
|
|
81876
81876
|
"kind": "method",
|
|
81877
|
-
"name": "
|
|
81877
|
+
"name": "_isBeforeMinDate",
|
|
81878
81878
|
"privacy": "private",
|
|
81879
81879
|
"return": {
|
|
81880
81880
|
"type": {
|
|
@@ -82734,7 +82734,7 @@
|
|
|
82734
82734
|
"name": "SbbDatepickerButton",
|
|
82735
82735
|
"module": "datepicker/common/datepicker-button.js"
|
|
82736
82736
|
},
|
|
82737
|
-
"tagName": "sbb-datepicker-
|
|
82737
|
+
"tagName": "sbb-datepicker-previous-day",
|
|
82738
82738
|
"customElement": true,
|
|
82739
82739
|
"classGenerics": "T = Date",
|
|
82740
82740
|
"attributes": [
|
|
@@ -82820,10 +82820,10 @@
|
|
|
82820
82820
|
"exports": [
|
|
82821
82821
|
{
|
|
82822
82822
|
"kind": "js",
|
|
82823
|
-
"name": "
|
|
82823
|
+
"name": "SbbDatepickerPreviousDayElement",
|
|
82824
82824
|
"declaration": {
|
|
82825
|
-
"name": "
|
|
82826
|
-
"module": "datepicker/datepicker-
|
|
82825
|
+
"name": "SbbDatepickerPreviousDayElement",
|
|
82826
|
+
"module": "datepicker/datepicker-previous-day/datepicker-previous-day.component.js"
|
|
82827
82827
|
}
|
|
82828
82828
|
}
|
|
82829
82829
|
]
|
package/off-brand-theme.css
CHANGED
|
@@ -3172,42 +3172,25 @@ sup {
|
|
|
3172
3172
|
caption-side: bottom;
|
|
3173
3173
|
color: var(--sbb-table-color);
|
|
3174
3174
|
table-layout: auto;
|
|
3175
|
+
text-align: left;
|
|
3175
3176
|
}
|
|
3176
|
-
.sbb-table
|
|
3177
|
-
.sbb-table-m
|
|
3178
|
-
.sbb-table-s
|
|
3179
|
-
.sbb-table-xs
|
|
3180
|
-
border-block-end: var(--sbb-table-border);
|
|
3181
|
-
}
|
|
3182
|
-
.sbb-table thead > tr:first-of-type > th,
|
|
3183
|
-
.sbb-table-m thead > tr:first-of-type > th,
|
|
3184
|
-
.sbb-table-s thead > tr:first-of-type > th,
|
|
3185
|
-
.sbb-table-xs thead > tr:first-of-type > th {
|
|
3186
|
-
border-block-start: var(--sbb-table-border);
|
|
3187
|
-
}
|
|
3188
|
-
.sbb-table thead > tr > th,
|
|
3189
|
-
.sbb-table-m thead > tr > th,
|
|
3190
|
-
.sbb-table-s thead > tr > th,
|
|
3191
|
-
.sbb-table-xs thead > tr > th {
|
|
3177
|
+
.sbb-table th,
|
|
3178
|
+
.sbb-table-m th,
|
|
3179
|
+
.sbb-table-s th,
|
|
3180
|
+
.sbb-table-xs th {
|
|
3192
3181
|
font-size: var(--sbb-table-header-cell-font-size);
|
|
3193
3182
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
3194
3183
|
font-weight: bold;
|
|
3195
3184
|
background-color: var(--sbb-table-background-color);
|
|
3185
|
+
border-block-end: var(--sbb-table-border);
|
|
3196
3186
|
border-inline-end: var(--sbb-table-border);
|
|
3197
3187
|
padding-block: var(--sbb-table-header-padding-block);
|
|
3198
3188
|
padding-inline: var(--sbb-table-header-padding-inline);
|
|
3199
|
-
text-align: left;
|
|
3200
3189
|
}
|
|
3201
|
-
.sbb-table
|
|
3202
|
-
.sbb-table-m
|
|
3203
|
-
.sbb-table-s
|
|
3204
|
-
.sbb-table-xs
|
|
3205
|
-
border-inline-start: var(--sbb-table-border);
|
|
3206
|
-
}
|
|
3207
|
-
.sbb-table tbody > tr > td,
|
|
3208
|
-
.sbb-table-m tbody > tr > td,
|
|
3209
|
-
.sbb-table-s tbody > tr > td,
|
|
3210
|
-
.sbb-table-xs tbody > tr > td {
|
|
3190
|
+
.sbb-table td,
|
|
3191
|
+
.sbb-table-m td,
|
|
3192
|
+
.sbb-table-s td,
|
|
3193
|
+
.sbb-table-xs td {
|
|
3211
3194
|
font-size: var(--sbb-table-data-cell-font-size);
|
|
3212
3195
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
3213
3196
|
background-color: var(--sbb-table-background-color);
|
|
@@ -3216,12 +3199,33 @@ sup {
|
|
|
3216
3199
|
padding-block: var(--sbb-table-cell-padding-block);
|
|
3217
3200
|
padding-inline: var(--sbb-table-cell-padding-inline);
|
|
3218
3201
|
}
|
|
3219
|
-
.sbb-table
|
|
3220
|
-
.sbb-table-m
|
|
3221
|
-
.sbb-table-s
|
|
3222
|
-
.sbb-table-xs
|
|
3202
|
+
.sbb-table :is(th, td).sbb-table-group-with-next,
|
|
3203
|
+
.sbb-table-m :is(th, td).sbb-table-group-with-next,
|
|
3204
|
+
.sbb-table-s :is(th, td).sbb-table-group-with-next,
|
|
3205
|
+
.sbb-table-xs :is(th, td).sbb-table-group-with-next {
|
|
3206
|
+
border-inline-end: none;
|
|
3207
|
+
}
|
|
3208
|
+
.sbb-table :is(th, td):first-child,
|
|
3209
|
+
.sbb-table-m :is(th, td):first-child,
|
|
3210
|
+
.sbb-table-s :is(th, td):first-child,
|
|
3211
|
+
.sbb-table-xs :is(th, td):first-child {
|
|
3223
3212
|
border-inline-start: var(--sbb-table-border);
|
|
3224
3213
|
}
|
|
3214
|
+
.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),
|
|
3215
|
+
.sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
|
|
3216
|
+
.sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
|
|
3217
|
+
.sbb-table-s:has(thead tr) thead tr:first-of-type > :is(th, td),
|
|
3218
|
+
.sbb-table-s:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
|
|
3219
|
+
.sbb-table-xs:has(thead tr) thead tr:first-of-type > :is(th, td),
|
|
3220
|
+
.sbb-table-xs:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td) {
|
|
3221
|
+
border-block-start: var(--sbb-table-border);
|
|
3222
|
+
}
|
|
3223
|
+
.sbb-table thead > tr:has(+ tr) > :is(th, td),
|
|
3224
|
+
.sbb-table-m thead > tr:has(+ tr) > :is(th, td),
|
|
3225
|
+
.sbb-table-s thead > tr:has(+ tr) > :is(th, td),
|
|
3226
|
+
.sbb-table-xs thead > tr:has(+ tr) > :is(th, td) {
|
|
3227
|
+
border-block-end: none;
|
|
3228
|
+
}
|
|
3225
3229
|
.sbb-table caption,
|
|
3226
3230
|
.sbb-table-m caption,
|
|
3227
3231
|
.sbb-table-s caption,
|
|
@@ -3234,12 +3238,6 @@ sup {
|
|
|
3234
3238
|
margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
|
|
3235
3239
|
text-align: left;
|
|
3236
3240
|
}
|
|
3237
|
-
.sbb-table:not(:has(thead tr)) tbody > tr:first-of-type > td,
|
|
3238
|
-
.sbb-table-m:not(:has(thead tr)) tbody > tr:first-of-type > td,
|
|
3239
|
-
.sbb-table-s:not(:has(thead tr)) tbody > tr:first-of-type > td,
|
|
3240
|
-
.sbb-table-xs:not(:has(thead tr)) tbody > tr:first-of-type > td {
|
|
3241
|
-
border-block-start: var(--sbb-table-border);
|
|
3242
|
-
}
|
|
3243
3241
|
|
|
3244
3242
|
.sbb-table-m {
|
|
3245
3243
|
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
@@ -3304,10 +3302,10 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
3304
3302
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
3305
3303
|
font-weight: bold;
|
|
3306
3304
|
background-color: var(--sbb-table-background-color);
|
|
3305
|
+
border-block-end: var(--sbb-table-border);
|
|
3307
3306
|
border-inline-end: var(--sbb-table-border);
|
|
3308
3307
|
padding-block: var(--sbb-table-header-padding-block);
|
|
3309
3308
|
padding-inline: var(--sbb-table-header-padding-inline);
|
|
3310
|
-
text-align: left;
|
|
3311
3309
|
}
|
|
3312
3310
|
|
|
3313
3311
|
.sbb-table-row--striped {
|
|
@@ -3385,6 +3383,30 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
|
3385
3383
|
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
3386
3384
|
}
|
|
3387
3385
|
|
|
3386
|
+
.sbb-table-align-start {
|
|
3387
|
+
text-align: start;
|
|
3388
|
+
}
|
|
3389
|
+
|
|
3390
|
+
.sbb-table-align-center {
|
|
3391
|
+
text-align: center;
|
|
3392
|
+
}
|
|
3393
|
+
|
|
3394
|
+
.sbb-table-align-end {
|
|
3395
|
+
text-align: end;
|
|
3396
|
+
}
|
|
3397
|
+
|
|
3398
|
+
.sbb-table-align-justify {
|
|
3399
|
+
text-align: justify;
|
|
3400
|
+
}
|
|
3401
|
+
|
|
3402
|
+
.sbb-table-align-left {
|
|
3403
|
+
text-align: left;
|
|
3404
|
+
}
|
|
3405
|
+
|
|
3406
|
+
.sbb-table-align-right {
|
|
3407
|
+
text-align: right;
|
|
3408
|
+
}
|
|
3409
|
+
|
|
3388
3410
|
.sbb-timetable-form {
|
|
3389
3411
|
--sbb-timetable-form-content-max-width: 46.25rem;
|
|
3390
3412
|
position: relative;
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "4.9.0-dev.
|
|
3
|
+
"version": "4.9.0-dev.1774376412",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
9
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/d53576000a02b377e56bb0c6dd711d7d1c93dcec"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
package/safety-theme.css
CHANGED
|
@@ -3172,42 +3172,25 @@ sup {
|
|
|
3172
3172
|
caption-side: bottom;
|
|
3173
3173
|
color: var(--sbb-table-color);
|
|
3174
3174
|
table-layout: auto;
|
|
3175
|
+
text-align: left;
|
|
3175
3176
|
}
|
|
3176
|
-
.sbb-table
|
|
3177
|
-
.sbb-table-m
|
|
3178
|
-
.sbb-table-s
|
|
3179
|
-
.sbb-table-xs
|
|
3180
|
-
border-block-end: var(--sbb-table-border);
|
|
3181
|
-
}
|
|
3182
|
-
.sbb-table thead > tr:first-of-type > th,
|
|
3183
|
-
.sbb-table-m thead > tr:first-of-type > th,
|
|
3184
|
-
.sbb-table-s thead > tr:first-of-type > th,
|
|
3185
|
-
.sbb-table-xs thead > tr:first-of-type > th {
|
|
3186
|
-
border-block-start: var(--sbb-table-border);
|
|
3187
|
-
}
|
|
3188
|
-
.sbb-table thead > tr > th,
|
|
3189
|
-
.sbb-table-m thead > tr > th,
|
|
3190
|
-
.sbb-table-s thead > tr > th,
|
|
3191
|
-
.sbb-table-xs thead > tr > th {
|
|
3177
|
+
.sbb-table th,
|
|
3178
|
+
.sbb-table-m th,
|
|
3179
|
+
.sbb-table-s th,
|
|
3180
|
+
.sbb-table-xs th {
|
|
3192
3181
|
font-size: var(--sbb-table-header-cell-font-size);
|
|
3193
3182
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
3194
3183
|
font-weight: bold;
|
|
3195
3184
|
background-color: var(--sbb-table-background-color);
|
|
3185
|
+
border-block-end: var(--sbb-table-border);
|
|
3196
3186
|
border-inline-end: var(--sbb-table-border);
|
|
3197
3187
|
padding-block: var(--sbb-table-header-padding-block);
|
|
3198
3188
|
padding-inline: var(--sbb-table-header-padding-inline);
|
|
3199
|
-
text-align: left;
|
|
3200
3189
|
}
|
|
3201
|
-
.sbb-table
|
|
3202
|
-
.sbb-table-m
|
|
3203
|
-
.sbb-table-s
|
|
3204
|
-
.sbb-table-xs
|
|
3205
|
-
border-inline-start: var(--sbb-table-border);
|
|
3206
|
-
}
|
|
3207
|
-
.sbb-table tbody > tr > td,
|
|
3208
|
-
.sbb-table-m tbody > tr > td,
|
|
3209
|
-
.sbb-table-s tbody > tr > td,
|
|
3210
|
-
.sbb-table-xs tbody > tr > td {
|
|
3190
|
+
.sbb-table td,
|
|
3191
|
+
.sbb-table-m td,
|
|
3192
|
+
.sbb-table-s td,
|
|
3193
|
+
.sbb-table-xs td {
|
|
3211
3194
|
font-size: var(--sbb-table-data-cell-font-size);
|
|
3212
3195
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
3213
3196
|
background-color: var(--sbb-table-background-color);
|
|
@@ -3216,12 +3199,33 @@ sup {
|
|
|
3216
3199
|
padding-block: var(--sbb-table-cell-padding-block);
|
|
3217
3200
|
padding-inline: var(--sbb-table-cell-padding-inline);
|
|
3218
3201
|
}
|
|
3219
|
-
.sbb-table
|
|
3220
|
-
.sbb-table-m
|
|
3221
|
-
.sbb-table-s
|
|
3222
|
-
.sbb-table-xs
|
|
3202
|
+
.sbb-table :is(th, td).sbb-table-group-with-next,
|
|
3203
|
+
.sbb-table-m :is(th, td).sbb-table-group-with-next,
|
|
3204
|
+
.sbb-table-s :is(th, td).sbb-table-group-with-next,
|
|
3205
|
+
.sbb-table-xs :is(th, td).sbb-table-group-with-next {
|
|
3206
|
+
border-inline-end: none;
|
|
3207
|
+
}
|
|
3208
|
+
.sbb-table :is(th, td):first-child,
|
|
3209
|
+
.sbb-table-m :is(th, td):first-child,
|
|
3210
|
+
.sbb-table-s :is(th, td):first-child,
|
|
3211
|
+
.sbb-table-xs :is(th, td):first-child {
|
|
3223
3212
|
border-inline-start: var(--sbb-table-border);
|
|
3224
3213
|
}
|
|
3214
|
+
.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),
|
|
3215
|
+
.sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
|
|
3216
|
+
.sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
|
|
3217
|
+
.sbb-table-s:has(thead tr) thead tr:first-of-type > :is(th, td),
|
|
3218
|
+
.sbb-table-s:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
|
|
3219
|
+
.sbb-table-xs:has(thead tr) thead tr:first-of-type > :is(th, td),
|
|
3220
|
+
.sbb-table-xs:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td) {
|
|
3221
|
+
border-block-start: var(--sbb-table-border);
|
|
3222
|
+
}
|
|
3223
|
+
.sbb-table thead > tr:has(+ tr) > :is(th, td),
|
|
3224
|
+
.sbb-table-m thead > tr:has(+ tr) > :is(th, td),
|
|
3225
|
+
.sbb-table-s thead > tr:has(+ tr) > :is(th, td),
|
|
3226
|
+
.sbb-table-xs thead > tr:has(+ tr) > :is(th, td) {
|
|
3227
|
+
border-block-end: none;
|
|
3228
|
+
}
|
|
3225
3229
|
.sbb-table caption,
|
|
3226
3230
|
.sbb-table-m caption,
|
|
3227
3231
|
.sbb-table-s caption,
|
|
@@ -3234,12 +3238,6 @@ sup {
|
|
|
3234
3238
|
margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
|
|
3235
3239
|
text-align: left;
|
|
3236
3240
|
}
|
|
3237
|
-
.sbb-table:not(:has(thead tr)) tbody > tr:first-of-type > td,
|
|
3238
|
-
.sbb-table-m:not(:has(thead tr)) tbody > tr:first-of-type > td,
|
|
3239
|
-
.sbb-table-s:not(:has(thead tr)) tbody > tr:first-of-type > td,
|
|
3240
|
-
.sbb-table-xs:not(:has(thead tr)) tbody > tr:first-of-type > td {
|
|
3241
|
-
border-block-start: var(--sbb-table-border);
|
|
3242
|
-
}
|
|
3243
3241
|
|
|
3244
3242
|
.sbb-table-m {
|
|
3245
3243
|
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
@@ -3304,10 +3302,10 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
3304
3302
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
3305
3303
|
font-weight: bold;
|
|
3306
3304
|
background-color: var(--sbb-table-background-color);
|
|
3305
|
+
border-block-end: var(--sbb-table-border);
|
|
3307
3306
|
border-inline-end: var(--sbb-table-border);
|
|
3308
3307
|
padding-block: var(--sbb-table-header-padding-block);
|
|
3309
3308
|
padding-inline: var(--sbb-table-header-padding-inline);
|
|
3310
|
-
text-align: left;
|
|
3311
3309
|
}
|
|
3312
3310
|
|
|
3313
3311
|
.sbb-table-row--striped {
|
|
@@ -3385,6 +3383,30 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
|
3385
3383
|
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
3386
3384
|
}
|
|
3387
3385
|
|
|
3386
|
+
.sbb-table-align-start {
|
|
3387
|
+
text-align: start;
|
|
3388
|
+
}
|
|
3389
|
+
|
|
3390
|
+
.sbb-table-align-center {
|
|
3391
|
+
text-align: center;
|
|
3392
|
+
}
|
|
3393
|
+
|
|
3394
|
+
.sbb-table-align-end {
|
|
3395
|
+
text-align: end;
|
|
3396
|
+
}
|
|
3397
|
+
|
|
3398
|
+
.sbb-table-align-justify {
|
|
3399
|
+
text-align: justify;
|
|
3400
|
+
}
|
|
3401
|
+
|
|
3402
|
+
.sbb-table-align-left {
|
|
3403
|
+
text-align: left;
|
|
3404
|
+
}
|
|
3405
|
+
|
|
3406
|
+
.sbb-table-align-right {
|
|
3407
|
+
text-align: right;
|
|
3408
|
+
}
|
|
3409
|
+
|
|
3388
3410
|
.sbb-timetable-form {
|
|
3389
3411
|
--sbb-timetable-form-content-max-width: 46.25rem;
|
|
3390
3412
|
position: relative;
|
package/standard-theme.css
CHANGED
|
@@ -3172,42 +3172,25 @@ sup {
|
|
|
3172
3172
|
caption-side: bottom;
|
|
3173
3173
|
color: var(--sbb-table-color);
|
|
3174
3174
|
table-layout: auto;
|
|
3175
|
+
text-align: left;
|
|
3175
3176
|
}
|
|
3176
|
-
.sbb-table
|
|
3177
|
-
.sbb-table-m
|
|
3178
|
-
.sbb-table-s
|
|
3179
|
-
.sbb-table-xs
|
|
3180
|
-
border-block-end: var(--sbb-table-border);
|
|
3181
|
-
}
|
|
3182
|
-
.sbb-table thead > tr:first-of-type > th,
|
|
3183
|
-
.sbb-table-m thead > tr:first-of-type > th,
|
|
3184
|
-
.sbb-table-s thead > tr:first-of-type > th,
|
|
3185
|
-
.sbb-table-xs thead > tr:first-of-type > th {
|
|
3186
|
-
border-block-start: var(--sbb-table-border);
|
|
3187
|
-
}
|
|
3188
|
-
.sbb-table thead > tr > th,
|
|
3189
|
-
.sbb-table-m thead > tr > th,
|
|
3190
|
-
.sbb-table-s thead > tr > th,
|
|
3191
|
-
.sbb-table-xs thead > tr > th {
|
|
3177
|
+
.sbb-table th,
|
|
3178
|
+
.sbb-table-m th,
|
|
3179
|
+
.sbb-table-s th,
|
|
3180
|
+
.sbb-table-xs th {
|
|
3192
3181
|
font-size: var(--sbb-table-header-cell-font-size);
|
|
3193
3182
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
3194
3183
|
font-weight: bold;
|
|
3195
3184
|
background-color: var(--sbb-table-background-color);
|
|
3185
|
+
border-block-end: var(--sbb-table-border);
|
|
3196
3186
|
border-inline-end: var(--sbb-table-border);
|
|
3197
3187
|
padding-block: var(--sbb-table-header-padding-block);
|
|
3198
3188
|
padding-inline: var(--sbb-table-header-padding-inline);
|
|
3199
|
-
text-align: left;
|
|
3200
3189
|
}
|
|
3201
|
-
.sbb-table
|
|
3202
|
-
.sbb-table-m
|
|
3203
|
-
.sbb-table-s
|
|
3204
|
-
.sbb-table-xs
|
|
3205
|
-
border-inline-start: var(--sbb-table-border);
|
|
3206
|
-
}
|
|
3207
|
-
.sbb-table tbody > tr > td,
|
|
3208
|
-
.sbb-table-m tbody > tr > td,
|
|
3209
|
-
.sbb-table-s tbody > tr > td,
|
|
3210
|
-
.sbb-table-xs tbody > tr > td {
|
|
3190
|
+
.sbb-table td,
|
|
3191
|
+
.sbb-table-m td,
|
|
3192
|
+
.sbb-table-s td,
|
|
3193
|
+
.sbb-table-xs td {
|
|
3211
3194
|
font-size: var(--sbb-table-data-cell-font-size);
|
|
3212
3195
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
3213
3196
|
background-color: var(--sbb-table-background-color);
|
|
@@ -3216,12 +3199,33 @@ sup {
|
|
|
3216
3199
|
padding-block: var(--sbb-table-cell-padding-block);
|
|
3217
3200
|
padding-inline: var(--sbb-table-cell-padding-inline);
|
|
3218
3201
|
}
|
|
3219
|
-
.sbb-table
|
|
3220
|
-
.sbb-table-m
|
|
3221
|
-
.sbb-table-s
|
|
3222
|
-
.sbb-table-xs
|
|
3202
|
+
.sbb-table :is(th, td).sbb-table-group-with-next,
|
|
3203
|
+
.sbb-table-m :is(th, td).sbb-table-group-with-next,
|
|
3204
|
+
.sbb-table-s :is(th, td).sbb-table-group-with-next,
|
|
3205
|
+
.sbb-table-xs :is(th, td).sbb-table-group-with-next {
|
|
3206
|
+
border-inline-end: none;
|
|
3207
|
+
}
|
|
3208
|
+
.sbb-table :is(th, td):first-child,
|
|
3209
|
+
.sbb-table-m :is(th, td):first-child,
|
|
3210
|
+
.sbb-table-s :is(th, td):first-child,
|
|
3211
|
+
.sbb-table-xs :is(th, td):first-child {
|
|
3223
3212
|
border-inline-start: var(--sbb-table-border);
|
|
3224
3213
|
}
|
|
3214
|
+
.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),
|
|
3215
|
+
.sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
|
|
3216
|
+
.sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
|
|
3217
|
+
.sbb-table-s:has(thead tr) thead tr:first-of-type > :is(th, td),
|
|
3218
|
+
.sbb-table-s:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
|
|
3219
|
+
.sbb-table-xs:has(thead tr) thead tr:first-of-type > :is(th, td),
|
|
3220
|
+
.sbb-table-xs:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td) {
|
|
3221
|
+
border-block-start: var(--sbb-table-border);
|
|
3222
|
+
}
|
|
3223
|
+
.sbb-table thead > tr:has(+ tr) > :is(th, td),
|
|
3224
|
+
.sbb-table-m thead > tr:has(+ tr) > :is(th, td),
|
|
3225
|
+
.sbb-table-s thead > tr:has(+ tr) > :is(th, td),
|
|
3226
|
+
.sbb-table-xs thead > tr:has(+ tr) > :is(th, td) {
|
|
3227
|
+
border-block-end: none;
|
|
3228
|
+
}
|
|
3225
3229
|
.sbb-table caption,
|
|
3226
3230
|
.sbb-table-m caption,
|
|
3227
3231
|
.sbb-table-s caption,
|
|
@@ -3234,12 +3238,6 @@ sup {
|
|
|
3234
3238
|
margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
|
|
3235
3239
|
text-align: left;
|
|
3236
3240
|
}
|
|
3237
|
-
.sbb-table:not(:has(thead tr)) tbody > tr:first-of-type > td,
|
|
3238
|
-
.sbb-table-m:not(:has(thead tr)) tbody > tr:first-of-type > td,
|
|
3239
|
-
.sbb-table-s:not(:has(thead tr)) tbody > tr:first-of-type > td,
|
|
3240
|
-
.sbb-table-xs:not(:has(thead tr)) tbody > tr:first-of-type > td {
|
|
3241
|
-
border-block-start: var(--sbb-table-border);
|
|
3242
|
-
}
|
|
3243
3241
|
|
|
3244
3242
|
.sbb-table-m {
|
|
3245
3243
|
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
@@ -3304,10 +3302,10 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
3304
3302
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
3305
3303
|
font-weight: bold;
|
|
3306
3304
|
background-color: var(--sbb-table-background-color);
|
|
3305
|
+
border-block-end: var(--sbb-table-border);
|
|
3307
3306
|
border-inline-end: var(--sbb-table-border);
|
|
3308
3307
|
padding-block: var(--sbb-table-header-padding-block);
|
|
3309
3308
|
padding-inline: var(--sbb-table-header-padding-inline);
|
|
3310
|
-
text-align: left;
|
|
3311
3309
|
}
|
|
3312
3310
|
|
|
3313
3311
|
.sbb-table-row--striped {
|
|
@@ -3385,6 +3383,30 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
|
3385
3383
|
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
3386
3384
|
}
|
|
3387
3385
|
|
|
3386
|
+
.sbb-table-align-start {
|
|
3387
|
+
text-align: start;
|
|
3388
|
+
}
|
|
3389
|
+
|
|
3390
|
+
.sbb-table-align-center {
|
|
3391
|
+
text-align: center;
|
|
3392
|
+
}
|
|
3393
|
+
|
|
3394
|
+
.sbb-table-align-end {
|
|
3395
|
+
text-align: end;
|
|
3396
|
+
}
|
|
3397
|
+
|
|
3398
|
+
.sbb-table-align-justify {
|
|
3399
|
+
text-align: justify;
|
|
3400
|
+
}
|
|
3401
|
+
|
|
3402
|
+
.sbb-table-align-left {
|
|
3403
|
+
text-align: left;
|
|
3404
|
+
}
|
|
3405
|
+
|
|
3406
|
+
.sbb-table-align-right {
|
|
3407
|
+
text-align: right;
|
|
3408
|
+
}
|
|
3409
|
+
|
|
3388
3410
|
.sbb-timetable-form {
|
|
3389
3411
|
--sbb-timetable-form-content-max-width: 46.25rem;
|
|
3390
3412
|
position: relative;
|
package/table.css
CHANGED
|
@@ -35,42 +35,25 @@
|
|
|
35
35
|
caption-side: bottom;
|
|
36
36
|
color: var(--sbb-table-color);
|
|
37
37
|
table-layout: auto;
|
|
38
|
+
text-align: left;
|
|
38
39
|
}
|
|
39
|
-
.sbb-table
|
|
40
|
-
.sbb-table-m
|
|
41
|
-
.sbb-table-s
|
|
42
|
-
.sbb-table-xs
|
|
43
|
-
border-block-end: var(--sbb-table-border);
|
|
44
|
-
}
|
|
45
|
-
.sbb-table thead > tr:first-of-type > th,
|
|
46
|
-
.sbb-table-m thead > tr:first-of-type > th,
|
|
47
|
-
.sbb-table-s thead > tr:first-of-type > th,
|
|
48
|
-
.sbb-table-xs thead > tr:first-of-type > th {
|
|
49
|
-
border-block-start: var(--sbb-table-border);
|
|
50
|
-
}
|
|
51
|
-
.sbb-table thead > tr > th,
|
|
52
|
-
.sbb-table-m thead > tr > th,
|
|
53
|
-
.sbb-table-s thead > tr > th,
|
|
54
|
-
.sbb-table-xs thead > tr > th {
|
|
40
|
+
.sbb-table th,
|
|
41
|
+
.sbb-table-m th,
|
|
42
|
+
.sbb-table-s th,
|
|
43
|
+
.sbb-table-xs th {
|
|
55
44
|
font-size: var(--sbb-table-header-cell-font-size);
|
|
56
45
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
57
46
|
font-weight: bold;
|
|
58
47
|
background-color: var(--sbb-table-background-color);
|
|
48
|
+
border-block-end: var(--sbb-table-border);
|
|
59
49
|
border-inline-end: var(--sbb-table-border);
|
|
60
50
|
padding-block: var(--sbb-table-header-padding-block);
|
|
61
51
|
padding-inline: var(--sbb-table-header-padding-inline);
|
|
62
|
-
text-align: left;
|
|
63
52
|
}
|
|
64
|
-
.sbb-table
|
|
65
|
-
.sbb-table-m
|
|
66
|
-
.sbb-table-s
|
|
67
|
-
.sbb-table-xs
|
|
68
|
-
border-inline-start: var(--sbb-table-border);
|
|
69
|
-
}
|
|
70
|
-
.sbb-table tbody > tr > td,
|
|
71
|
-
.sbb-table-m tbody > tr > td,
|
|
72
|
-
.sbb-table-s tbody > tr > td,
|
|
73
|
-
.sbb-table-xs tbody > tr > td {
|
|
53
|
+
.sbb-table td,
|
|
54
|
+
.sbb-table-m td,
|
|
55
|
+
.sbb-table-s td,
|
|
56
|
+
.sbb-table-xs td {
|
|
74
57
|
font-size: var(--sbb-table-data-cell-font-size);
|
|
75
58
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
76
59
|
background-color: var(--sbb-table-background-color);
|
|
@@ -79,12 +62,33 @@
|
|
|
79
62
|
padding-block: var(--sbb-table-cell-padding-block);
|
|
80
63
|
padding-inline: var(--sbb-table-cell-padding-inline);
|
|
81
64
|
}
|
|
82
|
-
.sbb-table
|
|
83
|
-
.sbb-table-m
|
|
84
|
-
.sbb-table-s
|
|
85
|
-
.sbb-table-xs
|
|
65
|
+
.sbb-table :is(th, td).sbb-table-group-with-next,
|
|
66
|
+
.sbb-table-m :is(th, td).sbb-table-group-with-next,
|
|
67
|
+
.sbb-table-s :is(th, td).sbb-table-group-with-next,
|
|
68
|
+
.sbb-table-xs :is(th, td).sbb-table-group-with-next {
|
|
69
|
+
border-inline-end: none;
|
|
70
|
+
}
|
|
71
|
+
.sbb-table :is(th, td):first-child,
|
|
72
|
+
.sbb-table-m :is(th, td):first-child,
|
|
73
|
+
.sbb-table-s :is(th, td):first-child,
|
|
74
|
+
.sbb-table-xs :is(th, td):first-child {
|
|
86
75
|
border-inline-start: var(--sbb-table-border);
|
|
87
76
|
}
|
|
77
|
+
.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
|
+
.sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
|
|
79
|
+
.sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
|
|
80
|
+
.sbb-table-s:has(thead tr) thead tr:first-of-type > :is(th, td),
|
|
81
|
+
.sbb-table-s:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
|
|
82
|
+
.sbb-table-xs:has(thead tr) thead tr:first-of-type > :is(th, td),
|
|
83
|
+
.sbb-table-xs:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td) {
|
|
84
|
+
border-block-start: var(--sbb-table-border);
|
|
85
|
+
}
|
|
86
|
+
.sbb-table thead > tr:has(+ tr) > :is(th, td),
|
|
87
|
+
.sbb-table-m thead > tr:has(+ tr) > :is(th, td),
|
|
88
|
+
.sbb-table-s thead > tr:has(+ tr) > :is(th, td),
|
|
89
|
+
.sbb-table-xs thead > tr:has(+ tr) > :is(th, td) {
|
|
90
|
+
border-block-end: none;
|
|
91
|
+
}
|
|
88
92
|
.sbb-table caption,
|
|
89
93
|
.sbb-table-m caption,
|
|
90
94
|
.sbb-table-s caption,
|
|
@@ -97,12 +101,6 @@
|
|
|
97
101
|
margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
|
|
98
102
|
text-align: left;
|
|
99
103
|
}
|
|
100
|
-
.sbb-table:not(:has(thead tr)) tbody > tr:first-of-type > td,
|
|
101
|
-
.sbb-table-m:not(:has(thead tr)) tbody > tr:first-of-type > td,
|
|
102
|
-
.sbb-table-s:not(:has(thead tr)) tbody > tr:first-of-type > td,
|
|
103
|
-
.sbb-table-xs:not(:has(thead tr)) tbody > tr:first-of-type > td {
|
|
104
|
-
border-block-start: var(--sbb-table-border);
|
|
105
|
-
}
|
|
106
104
|
|
|
107
105
|
.sbb-table-m {
|
|
108
106
|
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
@@ -167,10 +165,10 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
167
165
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
168
166
|
font-weight: bold;
|
|
169
167
|
background-color: var(--sbb-table-background-color);
|
|
168
|
+
border-block-end: var(--sbb-table-border);
|
|
170
169
|
border-inline-end: var(--sbb-table-border);
|
|
171
170
|
padding-block: var(--sbb-table-header-padding-block);
|
|
172
171
|
padding-inline: var(--sbb-table-header-padding-inline);
|
|
173
|
-
text-align: left;
|
|
174
172
|
}
|
|
175
173
|
|
|
176
174
|
.sbb-table-row--striped {
|
|
@@ -246,4 +244,28 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
|
246
244
|
--sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
247
245
|
--sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
|
|
248
246
|
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.sbb-table-align-start {
|
|
250
|
+
text-align: start;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.sbb-table-align-center {
|
|
254
|
+
text-align: center;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.sbb-table-align-end {
|
|
258
|
+
text-align: end;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.sbb-table-align-justify {
|
|
262
|
+
text-align: justify;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
.sbb-table-align-left {
|
|
266
|
+
text-align: left;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.sbb-table-align-right {
|
|
270
|
+
text-align: right;
|
|
249
271
|
}
|