@lucca-front/scss 18.2.0-rc.1 → 18.2.0-rc.2
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/lucca-front.min.css +1 -1
- package/package.json +2 -2
- package/src/components/checkboxField/component.scss +3 -1
- package/src/components/file/component.scss +1 -1
- package/src/components/indexTable/component.scss +14 -4
- package/src/components/indexTable/mods.scss +303 -295
- package/src/components/tableSortable/component.scss +1 -0
- package/src/components/tableSortable/index.scss +1 -4
- package/src/components/tableSortable/mods.scss +8 -9
|
@@ -4,336 +4,344 @@
|
|
|
4
4
|
@use '@lucca-front/scss/src/components/button/exports' as button;
|
|
5
5
|
|
|
6
6
|
@mixin selectable {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
7
|
+
.indexTable-head-row {
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.indexTable-body-row {
|
|
12
|
+
&:is(:focus-within, :hover) {
|
|
13
|
+
outline: none;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.indexTable-head-row-transparentCell,
|
|
18
|
+
.indexTable-body-row-transparentCell {
|
|
19
|
+
width: var(--components-indexTable-row-cell-transparent-width);
|
|
20
|
+
|
|
21
|
+
&:first-child {
|
|
22
|
+
padding-left: 0;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
24
25
|
}
|
|
25
26
|
|
|
26
27
|
@mixin stackable {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
28
|
+
.indexTable-body-row {
|
|
29
|
+
&.mod-stack2,
|
|
30
|
+
&.mod-stack3 {
|
|
31
|
+
--components-indexTable-row-stack-border-bottom: var(--components-indexTable-stack2-row-spacing);
|
|
32
|
+
--components-indexTable-row-stack2-background-image: var(--components-indexTable-stack-svg);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&.mod-stack3 {
|
|
36
|
+
--components-indexTable-row-stack-border-bottom: var(--components-indexTable-stack3-row-spacing);
|
|
37
|
+
--components-indexTable-row-stack3-background-image: var(--components-indexTable-stack-svg);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.indexTable-body-row-cell {
|
|
42
|
+
// because we can't set an individual spacing for each row, transparent border are used for this
|
|
43
|
+
border-bottom: var(--components-indexTable-row-stack-border-bottom) solid transparent;
|
|
44
|
+
// stack apparence
|
|
45
|
+
background-image: var(--components-indexTable-row-stack2-background-image, none),
|
|
46
|
+
var(--components-indexTable-row-stack3-background-image, none);
|
|
47
|
+
background-position: var(--components-indexTable-row-stack2-background-position, 0 0),
|
|
48
|
+
var(--components-indexTable-row-stack3-background-position, 0 0);
|
|
49
|
+
background-repeat: no-repeat, no-repeat;
|
|
50
|
+
transition-property: background-image, background-position;
|
|
51
|
+
transition-duration: var(--commons-animations-durations-fast);
|
|
52
|
+
|
|
53
|
+
// apparence of the first cell with a card apparence.
|
|
54
|
+
// we do this because there migh be one or two cells before without background and containing a checkbox
|
|
55
|
+
--components-indexTable-row-stack2-background-position: left calc(-2px + var(--components-indexTable-cell-inset-x-left, 0px)) bottom -10px;
|
|
56
|
+
--components-indexTable-row-stack3-background-position: left calc(1px + var(--components-indexTable-cell-inset-x-left, 0px)) bottom -14px;
|
|
57
|
+
|
|
58
|
+
// apparence of the nexts cells
|
|
59
|
+
& ~ .indexTable-body-row-cell {
|
|
60
|
+
--components-indexTable-row-stack2-background-position: left -20px bottom -10px;
|
|
61
|
+
--components-indexTable-row-stack3-background-position: left -20px bottom -14px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// apparence of the last cell with a card apparence
|
|
65
|
+
&:last-child {
|
|
66
|
+
--components-indexTable-row-stack2-background-position: right calc(-2px + var(--components-indexTable-cell-inset-x-right, 0px)) bottom -10px;
|
|
67
|
+
--components-indexTable-row-stack3-background-position: right calc(1px + var(--components-indexTable-cell-inset-x-right, 0px)) bottom -14px;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
67
70
|
}
|
|
68
71
|
|
|
69
72
|
@mixin stickyHeader {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
73
|
+
.indexTable-head {
|
|
74
|
+
position: sticky;
|
|
75
|
+
top: var(--components-indexTable-row-spacing);
|
|
76
|
+
z-index: 3;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
//hide box-shadow from underneath rows that slighly appear on edges of the sticky header when scrolling
|
|
80
|
+
.indexTable-head-row-cell {
|
|
81
|
+
position: relative;
|
|
82
|
+
&::before,
|
|
83
|
+
&::after {
|
|
84
|
+
content: '';
|
|
85
|
+
position: absolute;
|
|
86
|
+
inset: calc(var(--components-indexTable-row-spacing) * -1) calc(var(--components-indexTable-padding) * -1) 0;
|
|
87
|
+
z-index: -1;
|
|
88
|
+
}
|
|
89
|
+
&::before {
|
|
90
|
+
background-color: var(--commons-background-base);
|
|
91
|
+
}
|
|
92
|
+
&::after {
|
|
93
|
+
background-color: var(--components-indexTable-background-color);
|
|
94
|
+
}
|
|
95
|
+
&:first-child::after {
|
|
96
|
+
border-top-left-radius: var(--components-indexTable-border-radius);
|
|
97
|
+
}
|
|
98
|
+
&:last-child::after {
|
|
99
|
+
border-top-right-radius: var(--components-indexTable-border-radius);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
99
102
|
}
|
|
100
103
|
|
|
101
104
|
@mixin responsiveCardList {
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
105
|
+
display: flex;
|
|
106
|
+
flex-direction: column;
|
|
107
|
+
gap: var(--components-indexTable-row-spacing);
|
|
108
|
+
padding: var(--components-indexTable-padding);
|
|
109
|
+
|
|
110
|
+
.indexTable-head {
|
|
111
|
+
display: none;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.indexTable-body {
|
|
115
|
+
display: flex;
|
|
116
|
+
flex-direction: column;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.indexTable-body-row,
|
|
120
|
+
.indexTable-foot-row {
|
|
121
|
+
position: relative;
|
|
122
|
+
display: grid;
|
|
123
|
+
// Grid layout by default is a basic one column template.
|
|
124
|
+
// The user can override this and build a specific layout by using --components-indexTable-row-responsive-grid-template-columns, --components-indexTable-row-responsive-grid-template-rows and --components-indexTable-row-responsive-grid-template-areas
|
|
125
|
+
grid-template-columns: var(--components-indexTable-row-responsive-grid-template-columns, 1fr);
|
|
126
|
+
grid-template-rows: var(--components-indexTable-row-responsive-grid-template-rows, none);
|
|
127
|
+
grid-auto-rows: auto;
|
|
128
|
+
grid-template-areas: var(--components-indexTable-row-responsive-grid-template-areas, none);
|
|
129
|
+
align-items: center;
|
|
130
|
+
padding: var(--components-indexTable-row-spacing-responsive) 0;
|
|
131
|
+
margin-bottom: var(--components-indexTable-row-spacing-responsive);
|
|
132
|
+
// "Title" lines that do not contain "card" cells are smaller
|
|
133
|
+
&:not(:has(.indexTable-body-row-cell)) {
|
|
134
|
+
padding: 0;
|
|
135
|
+
margin-bottom: 0;
|
|
136
|
+
}
|
|
137
|
+
&:last-child {
|
|
138
|
+
margin-bottom: 0;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
// checkbox, title and subtotal need to stay on the same row
|
|
143
|
+
.indexTable-body-row-transparentCell {
|
|
144
|
+
grid-row: 1;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
// We only need one ::before for the card apparence and one ::after for the possible outline
|
|
148
|
+
.indexTable-body-row-cell {
|
|
149
|
+
position: static;
|
|
150
|
+
grid-column-start: 1;
|
|
151
|
+
padding: 0 var(--components-indexTable-cell-padding);
|
|
152
|
+
|
|
153
|
+
&::before {
|
|
154
|
+
--components-indexTable-cell-border-radius-left: var(--components-indexTable-cell-border-radius);
|
|
155
|
+
--components-indexTable-cell-border-radius-right: var(--components-indexTable-cell-border-radius);
|
|
156
|
+
}
|
|
157
|
+
&::after {
|
|
158
|
+
--components-indexTable-outline-border-width-left: var(--components-indexTable-outline-border-width);
|
|
159
|
+
--components-indexTable-outline-border-width-right: var(--components-indexTable-outline-border-width);
|
|
160
|
+
--components-indexTable-outline-border-radius-left: var(--components-indexTable-outline-border-radius);
|
|
161
|
+
--components-indexTable-outline-border-radius-right: var(--components-indexTable-outline-border-radius);
|
|
162
|
+
}
|
|
163
|
+
~ .indexTable-body-row-cell {
|
|
164
|
+
&::before,
|
|
165
|
+
&::after {
|
|
166
|
+
display: none;
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.indexTable-body-row-cell-content[data-label] {
|
|
172
|
+
display: flex;
|
|
173
|
+
flex-direction: column;
|
|
174
|
+
margin-top: var(--pr-t-spacings-50);
|
|
175
|
+
&::before {
|
|
176
|
+
content: attr(data-label);
|
|
177
|
+
font-weight: 600;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.indexTable-head-row-cell-checkbox,
|
|
182
|
+
.indexTable-body-row-cell-checkbox {
|
|
183
|
+
margin-block: 0;
|
|
184
|
+
}
|
|
182
185
|
}
|
|
183
186
|
|
|
184
187
|
@mixin selectableResponsiveCardList {
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
188
|
+
.indexTable-body-row {
|
|
189
|
+
grid-template-columns: var(--components-indexTable-row-cell-transparent-width) var(
|
|
190
|
+
--components-indexTable-row-responsive-grid-template-columns,
|
|
191
|
+
1fr
|
|
192
|
+
);
|
|
193
|
+
}
|
|
194
|
+
.indexTable-body-row-transparentCell {
|
|
195
|
+
width: auto;
|
|
196
|
+
// we add a padding-left to keep a correct indent between lvl 1 and lvl 2 titles in nested tables. * .75 is just for cosmetic
|
|
197
|
+
&:first-child[colspan='2'] + .indexTable-body-row-transparentCell {
|
|
198
|
+
padding-left: calc(var(--components-indexTable-row-cell-transparent-width) * 0.75);
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
.indexTable-body-row-cell {
|
|
202
|
+
--components-indexTable-cell-inset-x-left: var(--components-indexTable-row-cell-transparent-width);
|
|
203
|
+
grid-column-start: 2;
|
|
204
|
+
}
|
|
199
205
|
}
|
|
200
206
|
|
|
201
207
|
@mixin selectableStackableResponsiveCardList {
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
208
|
+
.indexTable-body-row {
|
|
209
|
+
--components-indexTable-cell-inset-x-left: var(--components-indexTable-row-cell-transparent-width);
|
|
210
|
+
}
|
|
205
211
|
}
|
|
206
212
|
|
|
207
213
|
// The stack apparence is put on the row instead of the cells
|
|
208
214
|
@mixin stackableResponsiveCardList {
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
215
|
+
.indexTable-body-row[class*='mod-stack'] {
|
|
216
|
+
border: 0;
|
|
217
|
+
border-bottom-width: var(--components-indexTable-row-stack-border-bottom);
|
|
218
|
+
border-style: solid;
|
|
219
|
+
border-color: transparent;
|
|
220
|
+
&::before,
|
|
221
|
+
&::after {
|
|
222
|
+
content: '';
|
|
223
|
+
position: absolute;
|
|
224
|
+
top: 0;
|
|
225
|
+
bottom: calc((var(--components-indexTable-row-spacing-responsive) + var(--components-indexTable-stack3-row-spacing)) * -1);
|
|
226
|
+
background-image: var(--components-indexTable-row-stack2-background-image, none),
|
|
227
|
+
var(--components-indexTable-row-stack3-background-image, none);
|
|
228
|
+
background-position: var(--components-indexTable-row-stack2-background-position, 0 0),
|
|
229
|
+
var(--components-indexTable-row-stack3-background-position, 0 0);
|
|
230
|
+
background-repeat: no-repeat, no-repeat;
|
|
231
|
+
transition-property: background-image, background-position;
|
|
232
|
+
transition-duration: var(--commons-animations-durations-fast);
|
|
233
|
+
}
|
|
234
|
+
&::before {
|
|
235
|
+
left: var(--components-indexTable-cell-inset-x-left, 0);
|
|
236
|
+
right: 50%;
|
|
237
|
+
--components-indexTable-row-stack2-background-position: left -2px bottom 6px;
|
|
238
|
+
--components-indexTable-row-stack3-background-position: left 1px bottom 2px;
|
|
239
|
+
}
|
|
240
|
+
&::after {
|
|
241
|
+
left: 50%;
|
|
242
|
+
right: 0;
|
|
243
|
+
--components-indexTable-row-stack2-background-position: right -2px bottom 6px;
|
|
244
|
+
--components-indexTable-row-stack3-background-position: right 1px bottom 2px;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
.indexTable-body-row-cell {
|
|
248
|
+
border-bottom: 0;
|
|
249
|
+
background-image: none;
|
|
250
|
+
}
|
|
243
251
|
}
|
|
244
252
|
|
|
245
253
|
@mixin actions {
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
254
|
+
// ~ equivalent to width: min-content for a table-cell but prevent line-break;
|
|
255
|
+
width: 1%;
|
|
256
|
+
padding: var(--pr-t-spacings-50);
|
|
257
|
+
white-space: nowrap;
|
|
258
|
+
|
|
259
|
+
.button {
|
|
260
|
+
@include button.S;
|
|
261
|
+
@include button.text;
|
|
262
|
+
@include button.onlyIconS;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
// All devices expect touch ones : subActions are hidden and appears when their row is hover or selected
|
|
266
|
+
// see mixin visibleSubActions() in states.scss
|
|
267
|
+
@include media.isNotTouchDevice {
|
|
268
|
+
.indexTable-body-row-cell-subAction {
|
|
269
|
+
opacity: var(--components-indexTable-cell-subAction-opacity, 0);
|
|
270
|
+
transition: opacity ease var(--commons-animations-durations-fast);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
//If there are 4 actions or more, the buttons are hidden (not on touch device) and replaced should be replaced with a dropdown
|
|
274
|
+
&:has(.indexTable-body-row-cell-subActionDropdownTrigger) {
|
|
275
|
+
.indexTable-body-row-cell-subAction {
|
|
276
|
+
display: none;
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
// All touch devices : subActions are always visibles, subActionDropdownTrigger is hidden
|
|
282
|
+
@include media.isTouchDevice {
|
|
283
|
+
.indexTable-body-row-cell-subActionDropdownTrigger {
|
|
284
|
+
display: none;
|
|
285
|
+
}
|
|
286
|
+
}
|
|
279
287
|
}
|
|
280
288
|
|
|
281
289
|
@mixin layoutFixed {
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
290
|
+
table-layout: fixed;
|
|
291
|
+
|
|
292
|
+
[class*='row-cell'] {
|
|
293
|
+
--cell-width: calc(var(--components-indexTable-cell-fixed-width, var(--components-index-table-cell-fixed-width)) * 1rem);
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
&.mod-layoutFixed [class*='row-cell'] {
|
|
297
|
+
@include cellFixedWidth;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
//Layout fixed at breakpoint
|
|
301
|
+
@each $breakpoint, $value in config.$breakpoints {
|
|
302
|
+
@include media.min($breakpoint) {
|
|
303
|
+
&.mod-layoutFixedAtMediaMin#{$breakpoint} {
|
|
304
|
+
table-layout: fixed;
|
|
305
|
+
[class*='row-cell'] {
|
|
306
|
+
@include cellFixedWidth;
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
}
|
|
303
311
|
}
|
|
304
312
|
|
|
305
313
|
@mixin cellFixedWidth {
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
314
|
+
min-width: var(--cell-width, auto);
|
|
315
|
+
max-width: var(--cell-width, auto);
|
|
316
|
+
width: var(--cell-width, auto);
|
|
309
317
|
}
|
|
310
318
|
|
|
311
319
|
@mixin massSelection {
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
320
|
+
.indexTable-head-row-cell {
|
|
321
|
+
padding: 0;
|
|
322
|
+
}
|
|
323
|
+
.indexTable-head-row-cell-massSelection {
|
|
324
|
+
display: flex;
|
|
325
|
+
align-items: center;
|
|
326
|
+
justify-content: center;
|
|
327
|
+
gap: var(--pr-t-spacings-100);
|
|
328
|
+
padding: var(--pr-t-spacings-50);
|
|
329
|
+
border-radius: var(--commons-borderRadius-L);
|
|
330
|
+
font-size: var(--sizes-S-fontSize);
|
|
331
|
+
line-height: var(--sizes-S-line-height);
|
|
332
|
+
color: var(--palettes-neutral-800);
|
|
333
|
+
background-color: var(--pr-t-elevation-surface-default);
|
|
334
|
+
.button {
|
|
335
|
+
@include button.text;
|
|
336
|
+
@include button.S;
|
|
337
|
+
}
|
|
338
|
+
}
|
|
331
339
|
}
|
|
332
340
|
|
|
333
341
|
@mixin alignRight {
|
|
334
|
-
|
|
342
|
+
text-align: right;
|
|
335
343
|
}
|
|
336
344
|
|
|
337
345
|
@mixin alignCenter {
|
|
338
|
-
|
|
346
|
+
text-align: center;
|
|
339
347
|
}
|