@rolster/styles-foundations 2.6.9 → 2.6.10

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.
@@ -1,11 +1,11 @@
1
1
  // Rolster Technology Datatable Component
2
- // v2.6.2
2
+ // v2.6.6
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 20/Mar/2018
6
- // Updated: 13/Nov/2025
6
+ // Updated: 16/Dic/2025
7
7
 
8
- @mixin datatable_cell() {
8
+ @mixin datatable_cell_vars() {
9
9
  --rlc-field-box-body-background: transparent;
10
10
  --rlc-field-box-body-background-focused: transparent;
11
11
  --rlc-field-box-body-background-disabled: transparent;
@@ -60,9 +60,61 @@
60
60
  }
61
61
  }
62
62
 
63
+ @mixin datatable_cell_styles() {
64
+ &--contained {
65
+ overflow: hidden;
66
+ }
67
+
68
+ &--control {
69
+ @include datatable_cell_control();
70
+ }
71
+
72
+ &.rls-align-center {
73
+ justify-content: center;
74
+ }
75
+
76
+ & > span {
77
+ display: block;
78
+ width: 100%;
79
+ white-space: nowrap;
80
+ text-overflow: ellipsis;
81
+ overflow: hidden;
82
+ }
83
+
84
+ & > p {
85
+ padding: var(--rls-sizing-x2) 0rem;
86
+ }
87
+
88
+ .rls-field-list {
89
+ --rlc-field-box-body-padding: var(--rls-sizing-x4) 0rem;
90
+ --rlc-field-box-action-dimension: var(--rls-sizing-x10);
91
+ }
92
+
93
+ .rls-poster {
94
+ overflow: hidden;
95
+ text-overflow: ellipsis;
96
+ white-space: nowrap;
97
+ }
98
+
99
+ & > a {
100
+ &:hover {
101
+ color: var(--rls-app-color-700);
102
+ text-decoration: underline;
103
+ }
104
+ }
105
+ }
106
+
63
107
  .rls-datatable {
64
- --pvt-datatable-letter-spacing: var(--rlc-datatable-letter-spacing, 0.0625em);
65
- --pvt-datatable-font-size: var(--rlc-datatable-font-size, 7rem);
108
+ --pvt-datatable-font-size: var(
109
+ --rlc-datatable-font-size,
110
+ var(--rls-label-font-size)
111
+ );
112
+
113
+ --pvt-datatable-letter-spacing: var(
114
+ --rlc-datatable-letter-spacing,
115
+ var(--rls-label-letter-spacing)
116
+ );
117
+
66
118
  --pvt-datatable-font-color: var(
67
119
  --rlc-datatable-font-color,
68
120
  var(--rls-app-color-900)
@@ -111,6 +163,7 @@
111
163
  position: relative;
112
164
  display: flex;
113
165
  width: 100%;
166
+ height: var(--rlc-datatable-height, auto);
114
167
  flex-direction: column;
115
168
  row-gap: var(--rls-sizing-x6);
116
169
  border-radius: var(--rls-sizing-x4);
@@ -128,16 +181,9 @@
128
181
  calc(var(--pvt-datatable-padding-scroll) + 5rem) 0rem 0rem;
129
182
  }
130
183
 
131
- & > table {
132
- display: flex;
133
- flex-direction: column;
134
- row-gap: var(--rls-sizing-x4);
135
- border-spacing: 0;
136
- border-collapse: collapse;
137
- }
138
-
139
184
  &__toolbar {
140
185
  display: flex;
186
+ flex: 0 0 auto;
141
187
  column-gap: var(--rls-sizing-x6);
142
188
  padding: var(--pvt-datatable-padding-component);
143
189
  box-sizing: border-box;
@@ -145,6 +191,19 @@
145
191
  border-radius: var(--rls-sizing-x4);
146
192
  }
147
193
 
194
+ &__table {
195
+ display: flex;
196
+ flex: 1 1 auto;
197
+
198
+ & > table {
199
+ display: flex;
200
+ flex-direction: column;
201
+ row-gap: var(--rls-sizing-x4);
202
+ border-spacing: 0;
203
+ border-collapse: collapse;
204
+ }
205
+ }
206
+
148
207
  &__head {
149
208
  width: 100%;
150
209
  padding-right: var(--pvt-datatable-header-padding-right);
@@ -262,7 +321,7 @@
262
321
 
263
322
  &__cell,
264
323
  &__data {
265
- @include datatable_cell();
324
+ @include datatable_cell_vars();
266
325
 
267
326
  position: relative;
268
327
  display: flex;
@@ -275,47 +334,7 @@
275
334
  font-size: var(--pvt-datatable-font-size);
276
335
  letter-spacing: var(--pvt-datatable-letter-spacing);
277
336
 
278
- &--contained {
279
- overflow: hidden;
280
- }
281
-
282
- &--control {
283
- @include datatable_cell_control();
284
- }
285
-
286
- &.rls-align-center {
287
- justify-content: center;
288
- }
289
-
290
- & > span {
291
- display: block;
292
- width: 100%;
293
- white-space: nowrap;
294
- text-overflow: ellipsis;
295
- overflow: hidden;
296
- }
297
-
298
- & > p {
299
- padding: var(--rls-sizing-x2) 0rem;
300
- }
301
-
302
- .rls-field-list {
303
- --rlc-field-box-body-padding: var(--rls-sizing-x4) 0rem;
304
- --rlc-field-box-action-dimension: var(--rls-sizing-x10);
305
- }
306
-
307
- .rls-poster {
308
- overflow: hidden;
309
- text-overflow: ellipsis;
310
- white-space: nowrap;
311
- }
312
-
313
- & > a {
314
- &:hover {
315
- color: var(--rls-app-color-700);
316
- text-decoration: underline;
317
- }
318
- }
337
+ @include datatable_cell_styles();
319
338
  }
320
339
 
321
340
  &__floating {
@@ -371,6 +390,7 @@
371
390
  &__summary {
372
391
  --pvt-datatable-record-background: var(--rls-app-color-100);
373
392
 
393
+ flex: 0 0 auto;
374
394
  padding-right: var(--pvt-datatable-header-padding-right);
375
395
  box-sizing: border-box;
376
396
  }
@@ -379,6 +399,7 @@
379
399
  --pvt-datatable-record-background: var(--rls-app-color-100);
380
400
 
381
401
  position: relative;
402
+ flex: 0 0 auto;
382
403
  width: 100%;
383
404
  padding: var(--pvt-datatable-padding-component);
384
405
  box-sizing: border-box;