@rolster/styles-foundations 2.3.30 → 2.3.31
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/package.json +1 -1
- package/scss/components/data-table.scss +49 -10
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
// Rolster Technology Datatable Component
|
|
2
|
-
// v2.
|
|
2
|
+
// v2.2.0
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 20/Mar/2018
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 02/Mar/2025
|
|
7
7
|
|
|
8
8
|
@mixin datatable_cell_control() {
|
|
9
9
|
--rlc-avatar-border-radius: var(--rls-sizing-x3);
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
|
|
33
33
|
.rls-datatable {
|
|
34
34
|
--pvt-datatable-record-background: var(--rlc-datatable-record-background);
|
|
35
|
+
--pvt-datatable-padding-component: 0rem;
|
|
35
36
|
--pvt-header-padding-right: var(--rlc-datatable-padding-scroll);
|
|
36
37
|
|
|
37
38
|
--rlc-amount-font-size: var(--rlc-datatable-font-size);
|
|
@@ -71,6 +72,10 @@
|
|
|
71
72
|
--pvt-header-padding-right: calc(
|
|
72
73
|
var(--rlc-datatable-padding-scroll) + var(--rlc-datatable-width-scroll)
|
|
73
74
|
);
|
|
75
|
+
|
|
76
|
+
--pvt-datatable-padding-component: 0rem
|
|
77
|
+
calc(var(--rlc-datatable-padding-scroll) + 6rem) 0rem
|
|
78
|
+
var(--rlc-datatable-padding-scroll);
|
|
74
79
|
}
|
|
75
80
|
|
|
76
81
|
& > table {
|
|
@@ -81,7 +86,17 @@
|
|
|
81
86
|
border-collapse: collapse;
|
|
82
87
|
}
|
|
83
88
|
|
|
84
|
-
&
|
|
89
|
+
&__toolbar {
|
|
90
|
+
display: flex;
|
|
91
|
+
column-gap: var(--rls-sizing-x6);
|
|
92
|
+
padding: var(--pvt-datatable-padding-component);
|
|
93
|
+
box-sizing: border-box;
|
|
94
|
+
background: var(--rlc-datatable-header-background);
|
|
95
|
+
border: var(--rls-app-border-1-100);
|
|
96
|
+
border-radius: var(--rls-sizing-x4);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
&__head {
|
|
85
100
|
width: 100%;
|
|
86
101
|
padding-left: var(--rlc-datatable-padding-scroll);
|
|
87
102
|
padding-right: var(--pvt-header-padding-right);
|
|
@@ -96,6 +111,14 @@
|
|
|
96
111
|
background: var(--rlc-datatable-header-background);
|
|
97
112
|
border: var(--rls-app-border-1-100);
|
|
98
113
|
border-radius: var(--rls-sizing-x4);
|
|
114
|
+
|
|
115
|
+
.rls-poster {
|
|
116
|
+
width: calc(100% - var(--rls-sizing-x2));
|
|
117
|
+
overflow: hidden;
|
|
118
|
+
text-overflow: ellipsis;
|
|
119
|
+
white-space: nowrap;
|
|
120
|
+
margin: auto 0rem;
|
|
121
|
+
}
|
|
99
122
|
}
|
|
100
123
|
|
|
101
124
|
&__title {
|
|
@@ -127,7 +150,7 @@
|
|
|
127
150
|
}
|
|
128
151
|
}
|
|
129
152
|
|
|
130
|
-
&
|
|
153
|
+
&__body {
|
|
131
154
|
display: flex;
|
|
132
155
|
flex-direction: column;
|
|
133
156
|
row-gap: var(--rls-sizing-x6);
|
|
@@ -137,6 +160,7 @@
|
|
|
137
160
|
max-height: var(--rlc-datatable-body-max-height);
|
|
138
161
|
}
|
|
139
162
|
|
|
163
|
+
&__subheader,
|
|
140
164
|
&__record,
|
|
141
165
|
&__totals {
|
|
142
166
|
position: relative;
|
|
@@ -169,6 +193,14 @@
|
|
|
169
193
|
}
|
|
170
194
|
}
|
|
171
195
|
|
|
196
|
+
&__subheader {
|
|
197
|
+
position: sticky;
|
|
198
|
+
top: 0px;
|
|
199
|
+
z-index: var(--rls-z-index-4);
|
|
200
|
+
background: rgba(255, 255, 255, 0.8);
|
|
201
|
+
backdrop-filter: blur(2px);
|
|
202
|
+
}
|
|
203
|
+
|
|
172
204
|
&__cell,
|
|
173
205
|
&__data {
|
|
174
206
|
position: relative;
|
|
@@ -190,6 +222,14 @@
|
|
|
190
222
|
@include datatable_cell_control();
|
|
191
223
|
}
|
|
192
224
|
|
|
225
|
+
&.rls-align-center {
|
|
226
|
+
& > .rls-checkbox,
|
|
227
|
+
& > .rls-radiobutton,
|
|
228
|
+
& > .rls-switch {
|
|
229
|
+
margin: auto;
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
|
|
193
233
|
& > span {
|
|
194
234
|
display: block;
|
|
195
235
|
width: 100%;
|
|
@@ -216,8 +256,7 @@
|
|
|
216
256
|
--rlc-fieldlist-suggestions-top: var(--rls-sizing-x24);
|
|
217
257
|
}
|
|
218
258
|
|
|
219
|
-
.rls-poster
|
|
220
|
-
rls-poster {
|
|
259
|
+
.rls-poster {
|
|
221
260
|
width: calc(100% - var(--rls-sizing-x2));
|
|
222
261
|
overflow: hidden;
|
|
223
262
|
text-overflow: ellipsis;
|
|
@@ -232,7 +271,7 @@
|
|
|
232
271
|
}
|
|
233
272
|
}
|
|
234
273
|
|
|
235
|
-
&
|
|
274
|
+
&__summary {
|
|
236
275
|
--pvt-datatable-record-background: var(--rls-theme-color-050);
|
|
237
276
|
|
|
238
277
|
padding-left: var(--rlc-datatable-padding-scroll);
|
|
@@ -240,13 +279,13 @@
|
|
|
240
279
|
box-sizing: border-box;
|
|
241
280
|
}
|
|
242
281
|
|
|
243
|
-
&
|
|
282
|
+
&__footer {
|
|
244
283
|
--pvt-datatable-record-background: var(--rls-theme-color-050);
|
|
245
284
|
|
|
246
285
|
position: relative;
|
|
247
286
|
width: 100%;
|
|
248
|
-
|
|
249
|
-
border-radius: 0rem 0rem var(--rls-sizing-x4) var(--rls-sizing-x4);
|
|
287
|
+
padding: var(--pvt-datatable-padding-component);
|
|
250
288
|
box-sizing: border-box;
|
|
289
|
+
overflow: hidden;
|
|
251
290
|
}
|
|
252
291
|
}
|