@rolster/styles-foundations 2.4.17 → 2.5.20
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/app.scss +15 -12
- package/scss/components/data-table.scss +54 -32
- package/scss/components/field-box.scss +28 -16
- package/scss/components/field-list.scss +35 -21
- package/scss/components/form.scss +3 -3
- package/scss/components.scss +2 -129
- package/scss/foundations/animations.scss +3 -3
- package/scss/foundations/colors.scss +25 -25
- package/scss/foundations/elevations.scss +3 -3
- package/scss/foundations/sizings.scss +3 -3
- package/scss/foundations/themes.scss +4 -4
- package/scss/foundations/typographics.scss +3 -3
- package/scss/utilities/layout.scss +1 -1
- package/scss/utilities/normalize.scss +4 -3
package/package.json
CHANGED
package/scss/components/app.scss
CHANGED
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
// Rolster Technology App Component
|
|
2
|
-
// v2.
|
|
2
|
+
// v2.3.0
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 20/Mar/2018
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 14/May/2025
|
|
7
7
|
|
|
8
8
|
.rls-app {
|
|
9
|
+
--pvt-header-height: var(--rlc-app-header-height, var(--rls-sizing-x28));
|
|
10
|
+
--pvt-navbar-width: var(--rlc-app-navbar-width, 160rem);
|
|
11
|
+
|
|
9
12
|
&__body {
|
|
10
13
|
display: flex;
|
|
11
14
|
flex-direction: column;
|
|
@@ -17,11 +20,11 @@
|
|
|
17
20
|
z-index: var(--rls-z-index-8);
|
|
18
21
|
|
|
19
22
|
&--snackbar {
|
|
20
|
-
--rlc-snackbar-left: calc(50% + calc(var(--
|
|
23
|
+
--rlc-snackbar-left: calc(50% + calc(var(--pvt-navbar-width) / 2));
|
|
21
24
|
}
|
|
22
25
|
|
|
23
26
|
&--navbar-condense {
|
|
24
|
-
--
|
|
27
|
+
--pvt-navbar-width: 36rem;
|
|
25
28
|
}
|
|
26
29
|
}
|
|
27
30
|
|
|
@@ -30,14 +33,14 @@
|
|
|
30
33
|
|
|
31
34
|
position: relative;
|
|
32
35
|
width: 100%;
|
|
33
|
-
height: var(--
|
|
36
|
+
height: var(--pvt-header-height);
|
|
34
37
|
box-sizing: border-box;
|
|
35
38
|
z-index: var(--rls-z-index-8);
|
|
36
|
-
background: var(--rlc-app-header-background);
|
|
39
|
+
background: var(--rlc-app-header-background, var(--rls-app-color-100));
|
|
37
40
|
|
|
38
41
|
& + .rls-app__page,
|
|
39
42
|
& + .rls-app__content {
|
|
40
|
-
height: calc(100vh - var(--
|
|
43
|
+
height: calc(100vh - var(--pvt-header-height));
|
|
41
44
|
}
|
|
42
45
|
}
|
|
43
46
|
|
|
@@ -49,7 +52,7 @@
|
|
|
49
52
|
padding: 0rem;
|
|
50
53
|
overflow: auto;
|
|
51
54
|
box-sizing: border-box;
|
|
52
|
-
background: var(--rlc-app-content-background);
|
|
55
|
+
background: var(--rlc-app-content-background, var(--rls-app-color-050));
|
|
53
56
|
}
|
|
54
57
|
|
|
55
58
|
&__page {
|
|
@@ -64,7 +67,7 @@
|
|
|
64
67
|
|
|
65
68
|
&__nav {
|
|
66
69
|
position: relative;
|
|
67
|
-
width: var(--
|
|
70
|
+
width: var(--pvt-navbar-width);
|
|
68
71
|
height: 100%;
|
|
69
72
|
margin: 0rem;
|
|
70
73
|
padding: 0rem;
|
|
@@ -72,12 +75,12 @@
|
|
|
72
75
|
overflow-x: hidden;
|
|
73
76
|
overflow-y: auto;
|
|
74
77
|
border-radius: 0rem 0rem var(--rls-sizing-x16) 0rem;
|
|
75
|
-
background: var(--rlc-app-navbar-background);
|
|
78
|
+
background: var(--rlc-app-navbar-background, var(--rls-app-color-100));
|
|
76
79
|
|
|
77
80
|
& + .rls-app__page__content {
|
|
78
|
-
--rlc-snackbar-left: calc(50% + calc(var(--
|
|
81
|
+
--rlc-snackbar-left: calc(50% + calc(var(--pvt-navbar-width) / 2));
|
|
79
82
|
|
|
80
|
-
width: calc(100% - var(--
|
|
83
|
+
width: calc(100% - var(--pvt-navbar-width));
|
|
81
84
|
}
|
|
82
85
|
}
|
|
83
86
|
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
// Rolster Technology Datatable Component
|
|
2
|
-
// v2.
|
|
2
|
+
// v2.4.0
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 20/Mar/2018
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 14/May/2025
|
|
7
7
|
|
|
8
8
|
@mixin datatable_cell_control() {
|
|
9
|
-
--rlc-avatar-
|
|
9
|
+
--rlc-avatar-radius: var(--rls-sizing-x3);
|
|
10
10
|
--rlc-avatar-width: var(--rls-sizing-x16);
|
|
11
11
|
--rlc-avatar-height: var(--rls-sizing-x16);
|
|
12
|
-
--rlc-avatar-font-size: var(--
|
|
12
|
+
--rlc-avatar-font-size: var(--pvt-datatable-font-size);
|
|
13
13
|
|
|
14
14
|
--rlc-action-ripple-dimension: var(--rls-sizing-x16);
|
|
15
15
|
--rlc-action-ripple-position: -8rem;
|
|
@@ -32,11 +32,25 @@
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
.rls-datatable {
|
|
35
|
-
--pvt-datatable-
|
|
35
|
+
--pvt-datatable-letter-spacing: var(--rlc-datatable-letter-spacing, 0.0625em);
|
|
36
|
+
--pvt-datatable-font-size: var(--rlc-datatable-font-size, 7rem);
|
|
37
|
+
--pvt-datatable-font-color: var(--rlc-datatable-font-color, var(--rls-app-color-900));
|
|
38
|
+
|
|
39
|
+
--pvt-datatable-header-background: var(
|
|
40
|
+
--rlc-datatable-header-background,
|
|
41
|
+
var(--rls-theme-color-050)
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
--pvt-datatable-record-background: var(
|
|
45
|
+
--rlc-datatable-record-background,
|
|
46
|
+
var(--rls-app-color-100)
|
|
47
|
+
);
|
|
48
|
+
|
|
36
49
|
--pvt-datatable-padding-component: 0rem;
|
|
37
|
-
--pvt-
|
|
50
|
+
--pvt-datatable-padding-scroll: var(--rlc-datatable-padding-scroll, 0rem);
|
|
51
|
+
--pvt-datatable-header-padding-right: var(--pvt-datatable-padding-scroll);
|
|
38
52
|
|
|
39
|
-
--rlc-amount-font-size: var(--
|
|
53
|
+
--rlc-amount-font-size: var(--pvt-datatable-font-size);
|
|
40
54
|
--rlc-amount-width: 100%;
|
|
41
55
|
--rlc-badge-padding: 0.5rem 1.5rem;
|
|
42
56
|
--rlc-ballot-padding: 0rem;
|
|
@@ -52,9 +66,9 @@
|
|
|
52
66
|
--rlc-fieldbox-width: 100%;
|
|
53
67
|
--rlc-fieldbox-error-display: none;
|
|
54
68
|
--rlc-fieldbox-label-display: none;
|
|
55
|
-
--rlc-input-font-size: var(--
|
|
56
|
-
--rlc-input-letter-spacing: var(--
|
|
57
|
-
--rlc-poster-font-size: var(--
|
|
69
|
+
--rlc-input-font-size: var(--pvt-datatable-font-size);
|
|
70
|
+
--rlc-input-letter-spacing: var(--pvt-datatable-letter-spacing);
|
|
71
|
+
--rlc-poster-font-size: var(--pvt-datatable-font-size);
|
|
58
72
|
--rlc-poster-height: var(--rls-sizing-x8);
|
|
59
73
|
--rlc-poster-padding: var(--rls-sizing-x2);
|
|
60
74
|
--rlc-skeleton-text-column-gap: var(--rls-sizing-x2);
|
|
@@ -68,14 +82,15 @@
|
|
|
68
82
|
box-sizing: border-box;
|
|
69
83
|
|
|
70
84
|
&--scrolleable {
|
|
71
|
-
--
|
|
85
|
+
--pvt-datatable-padding-scroll: var(--rls-sizing-x4);
|
|
72
86
|
|
|
73
|
-
--pvt-header-padding-right: calc(
|
|
74
|
-
var(--
|
|
87
|
+
--pvt-datatable-header-padding-right: calc(
|
|
88
|
+
var(--pvt-datatable-padding-scroll) +
|
|
89
|
+
var(--rlc-datatable-width-scroll, var(--rls-sizing-x4))
|
|
75
90
|
);
|
|
76
91
|
|
|
77
92
|
--pvt-datatable-padding-component: 0rem
|
|
78
|
-
calc(var(--
|
|
93
|
+
calc(var(--pvt-datatable-padding-scroll) + 5rem) 0rem 0rem;
|
|
79
94
|
}
|
|
80
95
|
|
|
81
96
|
& > table {
|
|
@@ -91,13 +106,13 @@
|
|
|
91
106
|
column-gap: var(--rls-sizing-x6);
|
|
92
107
|
padding: var(--pvt-datatable-padding-component);
|
|
93
108
|
box-sizing: border-box;
|
|
94
|
-
background: var(--
|
|
109
|
+
background: var(--pvt-datatable-header-background);
|
|
95
110
|
border-radius: var(--rls-sizing-x4);
|
|
96
111
|
}
|
|
97
112
|
|
|
98
113
|
&__head {
|
|
99
114
|
width: 100%;
|
|
100
|
-
padding-right: var(--pvt-header-padding-right);
|
|
115
|
+
padding-right: var(--pvt-datatable-header-padding-right);
|
|
101
116
|
box-sizing: border-box;
|
|
102
117
|
}
|
|
103
118
|
|
|
@@ -106,7 +121,7 @@
|
|
|
106
121
|
column-gap: var(--rls-sizing-x6);
|
|
107
122
|
padding: 0rem var(--rls-sizing-x6);
|
|
108
123
|
box-sizing: border-box;
|
|
109
|
-
background: var(--
|
|
124
|
+
background: var(--pvt-datatable-header-background);
|
|
110
125
|
border-radius: var(--rls-sizing-x4);
|
|
111
126
|
|
|
112
127
|
.rls-poster {
|
|
@@ -124,9 +139,12 @@
|
|
|
124
139
|
height: var(--rls-sizing-x20);
|
|
125
140
|
line-height: var(--rls-sizing-x20);
|
|
126
141
|
color: var(--rls-app-color-900);
|
|
127
|
-
font-weight: var(
|
|
128
|
-
|
|
129
|
-
|
|
142
|
+
font-weight: var(
|
|
143
|
+
--rlc-datatable-header-font-weight,
|
|
144
|
+
var(--rls-font-weight-semibold)
|
|
145
|
+
);
|
|
146
|
+
font-size: var(--pvt-datatable-font-size);
|
|
147
|
+
letter-spacing: var(--pvt-datatable-letter-spacing);
|
|
130
148
|
text-align: left;
|
|
131
149
|
overflow: hidden;
|
|
132
150
|
white-space: nowrap;
|
|
@@ -151,10 +169,10 @@
|
|
|
151
169
|
display: flex;
|
|
152
170
|
flex-direction: column;
|
|
153
171
|
row-gap: var(--rls-sizing-x6);
|
|
154
|
-
padding-right: var(--
|
|
172
|
+
padding-right: var(--pvt-datatable-padding-scroll);
|
|
155
173
|
box-sizing: border-box;
|
|
156
|
-
overflow-y: var(--rlc-datatable-body-overflow);
|
|
157
|
-
max-height: var(--rlc-datatable-body-max-height);
|
|
174
|
+
overflow-y: var(--rlc-datatable-body-overflow, initial);
|
|
175
|
+
max-height: var(--rlc-datatable-body-max-height, initial);
|
|
158
176
|
}
|
|
159
177
|
|
|
160
178
|
&__subheader,
|
|
@@ -206,9 +224,9 @@
|
|
|
206
224
|
text-align: left;
|
|
207
225
|
min-height: var(--rls-sizing-x20);
|
|
208
226
|
font-weight: var(--rls-font-weight-regular);
|
|
209
|
-
color: var(--
|
|
210
|
-
font-size: var(--
|
|
211
|
-
letter-spacing: var(--
|
|
227
|
+
color: var(--pvt-datatable-font-color);
|
|
228
|
+
font-size: var(--pvt-datatable-font-size);
|
|
229
|
+
letter-spacing: var(--pvt-datatable-letter-spacing);
|
|
212
230
|
|
|
213
231
|
&--overflow {
|
|
214
232
|
overflow: initial;
|
|
@@ -240,7 +258,7 @@
|
|
|
240
258
|
--rlc-fieldbox-body-shadow: none;
|
|
241
259
|
--rlc-fieldbox-action-dimension: var(--rls-sizing-x10);
|
|
242
260
|
--rlc-fieldbox-action-background: transparent;
|
|
243
|
-
--rlc-fieldlist-control-font-size: var(--
|
|
261
|
+
--rlc-fieldlist-control-font-size: var(--pvt-datatable-font-size);
|
|
244
262
|
--rlc-fieldlist-control-font-weight: var(--rls-font-weight-medium);
|
|
245
263
|
--rlc-fieldlist-control-letter-spacing: var(--rls-body-letter-spacing);
|
|
246
264
|
--rlc-fieldlist-element-padding: var(--rls-sizing-x4);
|
|
@@ -264,6 +282,8 @@
|
|
|
264
282
|
}
|
|
265
283
|
|
|
266
284
|
&__floating {
|
|
285
|
+
--pvt-action-tooltip-left: 0;
|
|
286
|
+
--pvt-action-tooltip-right: initial;
|
|
267
287
|
--pvt-action-tooltip-transform: translate(
|
|
268
288
|
calc(-100% - var(--rls-sizing-x4))
|
|
269
289
|
);
|
|
@@ -287,28 +307,30 @@
|
|
|
287
307
|
}
|
|
288
308
|
|
|
289
309
|
&--invested {
|
|
310
|
+
--pvt-action-tooltip-left: initial;
|
|
311
|
+
--pvt-action-tooltip-right: 0;
|
|
290
312
|
--pvt-action-tooltip-transform: translate(
|
|
291
313
|
calc(100% + var(--rls-sizing-x4))
|
|
292
314
|
);
|
|
293
315
|
|
|
294
316
|
right: initial;
|
|
295
317
|
left: 0;
|
|
296
|
-
transform: translateX(calc(-100% + var(--rls-sizing-
|
|
297
|
-
border-left: none;
|
|
298
|
-
border-right: 2px dashed var(--rls-app-color-300);
|
|
318
|
+
transform: translateX(calc(-100% + var(--rls-sizing-x4)));
|
|
299
319
|
}
|
|
300
320
|
|
|
301
321
|
.rls-button-action__tooltip {
|
|
302
322
|
top: 0;
|
|
303
|
-
left:
|
|
323
|
+
left: var(--pvt-action-tooltip-left);
|
|
324
|
+
right: var(--pvt-action-tooltip-right);
|
|
304
325
|
transform: var(--pvt-action-tooltip-transform);
|
|
326
|
+
z-index: var(--rls-z-index-2);
|
|
305
327
|
}
|
|
306
328
|
}
|
|
307
329
|
|
|
308
330
|
&__summary {
|
|
309
331
|
--pvt-datatable-record-background: var(--rls-app-color-200);
|
|
310
332
|
|
|
311
|
-
padding-right: var(--pvt-header-padding-right);
|
|
333
|
+
padding-right: var(--pvt-datatable-header-padding-right);
|
|
312
334
|
box-sizing: border-box;
|
|
313
335
|
}
|
|
314
336
|
|
|
@@ -1,31 +1,43 @@
|
|
|
1
1
|
// Rolster Technology FieldBox Component
|
|
2
|
-
// v2.
|
|
2
|
+
// v2.2.0
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 08/Sep/2022
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 14/May/2025
|
|
7
7
|
|
|
8
8
|
.rls-field-box {
|
|
9
|
+
--pvt-body-background: var(
|
|
10
|
+
--rlc-fieldbox-body-background,
|
|
11
|
+
var(--rls-app-color-100)
|
|
12
|
+
);
|
|
13
|
+
|
|
14
|
+
--pvt-body-shadow: var(--rlc-fieldbox-body-shadow, none);
|
|
15
|
+
|
|
16
|
+
--pvt-label-font-color: var(
|
|
17
|
+
--rlc-fieldbox-label-font-color,
|
|
18
|
+
var(--rls-app-color-600)
|
|
19
|
+
);
|
|
20
|
+
|
|
9
21
|
--pvt-label-opacity: 1;
|
|
10
22
|
--pvt-body-opacity: 1;
|
|
11
23
|
|
|
12
24
|
position: relative;
|
|
13
25
|
display: flex;
|
|
14
|
-
width: var(--rlc-fieldbox-width);
|
|
26
|
+
width: var(--rlc-fieldbox-width, 100%);
|
|
15
27
|
flex-direction: column;
|
|
16
|
-
padding: var(--rlc-fieldbox-padding);
|
|
28
|
+
padding: var(--rlc-fieldbox-padding, 0rem);
|
|
17
29
|
box-sizing: border-box;
|
|
18
30
|
transition: height 160ms 0ms var(--rls-standard-curve);
|
|
19
31
|
|
|
20
32
|
&--focused {
|
|
21
|
-
--
|
|
22
|
-
--
|
|
23
|
-
--
|
|
33
|
+
--pvt-body-background: var(--rls-app-color-050);
|
|
34
|
+
--pvt-body-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
|
|
35
|
+
--pvt-label-font-color: var(--rls-theme-color-500);
|
|
24
36
|
}
|
|
25
37
|
|
|
26
38
|
&--error {
|
|
27
|
-
--
|
|
28
|
-
--
|
|
39
|
+
--pvt-body-shadow: 0px 0px 0px 3px var(--rls-danger-shadow-500);
|
|
40
|
+
--pvt-label-font-color: var(--rls-danger-color-500);
|
|
29
41
|
}
|
|
30
42
|
|
|
31
43
|
&--disabled {
|
|
@@ -35,12 +47,12 @@
|
|
|
35
47
|
|
|
36
48
|
&__label {
|
|
37
49
|
position: relative;
|
|
38
|
-
display: var(--rlc-fieldbox-label-display);
|
|
50
|
+
display: var(--rlc-fieldbox-label-display, block);
|
|
39
51
|
width: 100%;
|
|
40
52
|
padding: 0rem 5rem;
|
|
41
53
|
box-sizing: border-box;
|
|
42
54
|
margin-bottom: var(--rls-sizing-x2);
|
|
43
|
-
color: var(--
|
|
55
|
+
color: var(--pvt-label-font-color);
|
|
44
56
|
opacity: var(--pvt-label-opacity);
|
|
45
57
|
overflow: hidden;
|
|
46
58
|
white-space: nowrap;
|
|
@@ -63,10 +75,10 @@
|
|
|
63
75
|
box-sizing: border-box;
|
|
64
76
|
overflow: hidden;
|
|
65
77
|
opacity: var(--pvt-body-opacity);
|
|
66
|
-
border-radius: var(--rls-sizing-x2);
|
|
67
|
-
background: var(--
|
|
68
|
-
padding: var(--rlc-fieldbox-body-padding);
|
|
69
|
-
box-shadow: var(--
|
|
78
|
+
border-radius: var(--rlc-fieldbox-body-radius, var(--rls-sizing-x2));
|
|
79
|
+
background: var(--pvt-body-background);
|
|
80
|
+
padding: var(--rlc-fieldbox-body-padding, 0rem);
|
|
81
|
+
box-shadow: var(--pvt-body-shadow);
|
|
70
82
|
}
|
|
71
83
|
|
|
72
84
|
&__helper {
|
|
@@ -84,7 +96,7 @@
|
|
|
84
96
|
}
|
|
85
97
|
|
|
86
98
|
&__error {
|
|
87
|
-
display: var(--rlc-fieldbox-error-display);
|
|
99
|
+
display: var(--rlc-fieldbox-error-display, block);
|
|
88
100
|
padding: 0rem var(--rls-sizing-x4);
|
|
89
101
|
box-sizing: border-box;
|
|
90
102
|
margin-top: var(--rls-sizing-x2);
|
|
@@ -1,11 +1,16 @@
|
|
|
1
|
-
// Rolster Technology
|
|
2
|
-
// v1.
|
|
1
|
+
// Rolster Technology FieldList Component
|
|
2
|
+
// v1.4.0
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 20/Mar/2018
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 14/May/2025
|
|
7
7
|
|
|
8
8
|
.rls-field-list {
|
|
9
|
+
--pvt-action-dimension: var(
|
|
10
|
+
--rlc-fieldbox-action-dimension,
|
|
11
|
+
var(--rls-sizing-x12)
|
|
12
|
+
);
|
|
13
|
+
|
|
9
14
|
--pvt-action-font-color: var(--rls-app-color-600);
|
|
10
15
|
--pvt-list-height: 0rem;
|
|
11
16
|
--pvt-list-max-height: 160rem;
|
|
@@ -19,19 +24,13 @@
|
|
|
19
24
|
position: relative;
|
|
20
25
|
box-sizing: border-box;
|
|
21
26
|
|
|
22
|
-
&.rls-field-box--active {
|
|
23
|
-
--rlc-fieldbox-body-shadow: 0px 0px 0px 3px var(--box-shadow-theme-100);
|
|
24
|
-
--rlc-fieldbox-body-border: var(--rls-theme-border-1-300);
|
|
25
|
-
--rlc-fieldbox-label-font-color: var(--rls-app-color-600);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
27
|
&.rls-field-box--disabled {
|
|
29
28
|
--pvt-action-font-color: var(--rls-app-color-400);
|
|
30
29
|
}
|
|
31
30
|
|
|
32
31
|
&__control {
|
|
33
32
|
position: relative;
|
|
34
|
-
width: calc(100% - var(--
|
|
33
|
+
width: calc(100% - var(--pvt-action-dimension));
|
|
35
34
|
height: var(--rls-sizing-x12);
|
|
36
35
|
line-height: var(--rls-sizing-x12);
|
|
37
36
|
padding: 0rem;
|
|
@@ -39,9 +38,18 @@
|
|
|
39
38
|
border: none;
|
|
40
39
|
outline: none;
|
|
41
40
|
background: transparent;
|
|
42
|
-
font-weight: var(
|
|
43
|
-
|
|
44
|
-
|
|
41
|
+
font-weight: var(
|
|
42
|
+
--rlc-fieldlist-control-font-weight,
|
|
43
|
+
var(--rls-font-weight-medium)
|
|
44
|
+
);
|
|
45
|
+
font-size: var(
|
|
46
|
+
--rlc-fieldlist-control-font-size,
|
|
47
|
+
var(--rls-input-font-size)
|
|
48
|
+
);
|
|
49
|
+
letter-spacing: var(
|
|
50
|
+
--rlc-fieldlist-control-letter-spacing,
|
|
51
|
+
var(--rls-input-letter-spacing)
|
|
52
|
+
);
|
|
45
53
|
color: var(--rlc-input-font-color);
|
|
46
54
|
|
|
47
55
|
&::placeholder {
|
|
@@ -59,15 +67,15 @@
|
|
|
59
67
|
}
|
|
60
68
|
|
|
61
69
|
&__action {
|
|
62
|
-
--rlc-icon-dimesion: calc(var(--
|
|
70
|
+
--rlc-icon-dimesion: calc(var(--pvt-action-dimension) - 2rem);
|
|
63
71
|
|
|
64
|
-
width: var(--
|
|
65
|
-
height: var(--
|
|
72
|
+
width: var(--pvt-action-dimension);
|
|
73
|
+
height: var(--pvt-action-dimension);
|
|
66
74
|
color: var(--pvt-action-font-color);
|
|
67
75
|
padding: 0rem;
|
|
68
76
|
outline: none;
|
|
69
|
-
border-radius: var(--rlc-fieldbox-action-radius);
|
|
70
|
-
background: var(--rlc-fieldbox-action-background);
|
|
77
|
+
border-radius: var(--rlc-fieldbox-action-radius, var(--rls-sizing-x2));
|
|
78
|
+
background: var(--rlc-fieldbox-action-background, var(--rls-app-color-050));
|
|
71
79
|
|
|
72
80
|
.rls-icon {
|
|
73
81
|
margin: 1rem;
|
|
@@ -76,7 +84,10 @@
|
|
|
76
84
|
|
|
77
85
|
&__suggestions {
|
|
78
86
|
position: absolute;
|
|
79
|
-
top: var(
|
|
87
|
+
top: var(
|
|
88
|
+
--rlc-fieldlist-suggestions-top,
|
|
89
|
+
calc(100% + var(--rls-sizing-x6))
|
|
90
|
+
);
|
|
80
91
|
bottom: initial;
|
|
81
92
|
left: 0rem;
|
|
82
93
|
width: 100%;
|
|
@@ -99,7 +110,10 @@
|
|
|
99
110
|
|
|
100
111
|
&--higher {
|
|
101
112
|
top: initial;
|
|
102
|
-
bottom: var(
|
|
113
|
+
bottom: var(
|
|
114
|
+
--rlc-fieldlist-suggestions-bottom,
|
|
115
|
+
calc(100% - var(--rls-sizing-x4))
|
|
116
|
+
);
|
|
103
117
|
}
|
|
104
118
|
|
|
105
119
|
&__body {
|
|
@@ -138,7 +152,7 @@
|
|
|
138
152
|
box-sizing: border-box;
|
|
139
153
|
outline: none;
|
|
140
154
|
border-radius: var(--rls-sizing-x4);
|
|
141
|
-
padding: var(--rlc-fieldlist-element-padding);
|
|
155
|
+
padding: var(--rlc-fieldlist-element-padding, var(--rls-sizing-x2));
|
|
142
156
|
box-sizing: border-box;
|
|
143
157
|
|
|
144
158
|
&:hover {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
// Rolster Technology Form Component
|
|
2
|
-
// v2.
|
|
2
|
+
// v2.1.0
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 20/Mar/2018
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 14/May/2025
|
|
7
7
|
|
|
8
8
|
.rls-form {
|
|
9
9
|
display: flex;
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
&__footer {
|
|
20
20
|
position: relative;
|
|
21
21
|
display: flex;
|
|
22
|
-
justify-content: var(--rlc-form-footer-justify-content);
|
|
22
|
+
justify-content: var(--rlc-form-footer-justify-content, end);
|
|
23
23
|
column-gap: var(--rls-sizing-x8);
|
|
24
24
|
padding: 0rem var(--rls-sizing-x8);
|
|
25
25
|
box-sizing: border-box;
|
package/scss/components.scss
CHANGED
|
@@ -1,139 +1,12 @@
|
|
|
1
1
|
// Rolster Technology Components
|
|
2
|
-
// v2.
|
|
2
|
+
// v2.3.0
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 13/Abr/2023
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 14/May/2025
|
|
7
7
|
|
|
8
8
|
@use 'sass:meta';
|
|
9
9
|
|
|
10
|
-
:root {
|
|
11
|
-
--rlc-app-content-background: var(--rls-app-color-050);
|
|
12
|
-
--rlc-app-header-background: var(--rls-app-color-100);
|
|
13
|
-
--rlc-app-header-height: var(--rls-sizing-x28);
|
|
14
|
-
--rlc-app-navbar-background: var(--rls-app-color-100);
|
|
15
|
-
--rlc-app-navbar-width: 160rem;
|
|
16
|
-
|
|
17
|
-
--rlc-action-color: var(--rls-app-color-600);
|
|
18
|
-
--rlc-action-ripple-color: var(--rlc-action-color);
|
|
19
|
-
--rlc-action-ripple-dimension: var(--rls-sizing-x18);
|
|
20
|
-
--rlc-action-ripple-position: -9rem;
|
|
21
|
-
|
|
22
|
-
--rlc-avatar-border-radius: var(--rls-sizing-x4);
|
|
23
|
-
--rlc-avatar-font-size: var(--rls-title-font-size);
|
|
24
|
-
--rlc-avatar-height: var(--rls-sizing-x24);
|
|
25
|
-
--rlc-avatar-width: var(--rls-sizing-x24);
|
|
26
|
-
|
|
27
|
-
--rlc-amount-font-size: inherit;
|
|
28
|
-
--rlc-amount-text-align: start;
|
|
29
|
-
--rlc-amount-width: auto;
|
|
30
|
-
|
|
31
|
-
--rlc-badge-padding: var(--rls-sizing-x2);
|
|
32
|
-
|
|
33
|
-
--rlc-ballot-padding: var(--rls-sizing-x4);
|
|
34
|
-
--rlc-ballot-component-row-gap: var(--rls-sizing-x2);
|
|
35
|
-
--rlc-ballot-title-letter-spacing: var(--rls-label-letter-spacing);
|
|
36
|
-
--rlc-ballot-title-font-size: var(--rls-label-font-size);
|
|
37
|
-
--rlc-ballot-title-font-weight: var(--rls-font-weight-medium);
|
|
38
|
-
--rlc-ballot-title-height: var(--rls-label-line-height);
|
|
39
|
-
--rlc-ballot-subtitle-width: 100%;
|
|
40
|
-
--rlc-ballot-subtitle-letter-spacing: var(--rls-smalltext-letter-spacing);
|
|
41
|
-
--rlc-ballot-subtitle-font-size: var(--rls-smalltext-font-size);
|
|
42
|
-
--rlc-ballot-subtitle-font-weight: var(--rls-font-weight-semibold);
|
|
43
|
-
--rlc-ballot-subtitle-height: var(--rls-smalltext-line-height);
|
|
44
|
-
--rlc-ballot-subtitle-overflow: initial;
|
|
45
|
-
--rlc-ballot-subtitle-text-overflow: initial;
|
|
46
|
-
--rlc-ballot-subtitle-white-space: initial;
|
|
47
|
-
|
|
48
|
-
--rlc-breadcrumb-height: var(--rls-sizing-x18);
|
|
49
|
-
|
|
50
|
-
--rlc-button-label-text-transform: uppercase;
|
|
51
|
-
--rlc-button-content-padding: 0rem var(--rls-sizing-x4);
|
|
52
|
-
--rlc-button-content-radius: var(--rls-sizing-x2);
|
|
53
|
-
|
|
54
|
-
--rlc-card-content-padding: var(--rls-sizing-x8);
|
|
55
|
-
|
|
56
|
-
--rlc-checkbox-dimension: var(--rls-sizing-x12);
|
|
57
|
-
--rlc-checkbox-children-dimension: 7rem;
|
|
58
|
-
|
|
59
|
-
--rlc-datatable-body-max-height: initial;
|
|
60
|
-
--rlc-datatable-body-overflow: initial;
|
|
61
|
-
--rlc-datatable-letter-spacing: 0.0625em;
|
|
62
|
-
--rlc-datatable-font-size: 7rem;
|
|
63
|
-
--rlc-datatable-footer-background: var(--rls-theme-color-050);
|
|
64
|
-
--rlc-datatable-header-background: var(--rls-theme-color-050);
|
|
65
|
-
--rlc-datatable-header-font-weight: var(--rls-font-weight-semibold);
|
|
66
|
-
--rlc-datatable-padding-scroll: 0rem;
|
|
67
|
-
--rlc-datatable-record-background: var(--rls-app-color-100);
|
|
68
|
-
--rlc-datatable-width-scroll: var(--rls-sizing-x4);
|
|
69
|
-
|
|
70
|
-
--rlc-fieldbox-padding: 0rem;
|
|
71
|
-
--rlc-fieldbox-width: 100%;
|
|
72
|
-
--rlc-fieldbox-body-background: var(--rls-app-color-100);
|
|
73
|
-
--rlc-fieldbox-body-padding: 0rem;
|
|
74
|
-
--rlc-fieldbox-body-shadow: none;
|
|
75
|
-
--rlc-fieldbox-error-display: block;
|
|
76
|
-
--rlc-fieldbox-label-display: block;
|
|
77
|
-
--rlc-fieldbox-label-font-color: var(--rls-app-color-600);
|
|
78
|
-
--rlc-fieldbox-action-dimension: var(--rls-sizing-x12);
|
|
79
|
-
--rlc-fieldbox-action-background: var(--rls-app-color-050);
|
|
80
|
-
--rlc-fieldbox-action-radius: var(--rls-sizing-x2);
|
|
81
|
-
|
|
82
|
-
--rlc-fieldlist-control-font-size: var(--rlc-input-font-size);
|
|
83
|
-
--rlc-fieldlist-control-font-weight: var(--rls-font-weight-medium);
|
|
84
|
-
--rlc-fieldlist-control-letter-spacing: var(--rlc-input-letter-spacing);
|
|
85
|
-
--rlc-fieldlist-element-padding: var(--rls-sizing-x2);
|
|
86
|
-
--rlc-fieldlist-suggestions-bottom: calc(100% - var(--rls-sizing-x4));
|
|
87
|
-
--rlc-fieldlist-suggestions-top: calc(100% + var(--rls-sizing-x6));
|
|
88
|
-
|
|
89
|
-
--rlc-form-footer-justify-content: end;
|
|
90
|
-
|
|
91
|
-
--rlc-icon-color: inherit;
|
|
92
|
-
--rlc-icon-dimesion: var(--rls-sizing-x12);
|
|
93
|
-
|
|
94
|
-
--rlc-input-font-color: var(--rls-app-color-900);
|
|
95
|
-
--rlc-input-font-size: var(--rls-input-font-size);
|
|
96
|
-
--rlc-input-letter-spacing: var(--rls-input-letter-spacing);
|
|
97
|
-
--rlc-input-height: var(--rls-sizing-x12);
|
|
98
|
-
--rlc-input-text-align: left;
|
|
99
|
-
|
|
100
|
-
--rlc-label-font-size: var(--rls-smalltext-font-size);
|
|
101
|
-
--rlc-label-letter-spacing: var(--rls-smalltext-letter-spacing);
|
|
102
|
-
--rlc-label-height: var(--rls-smalltext-line-height);
|
|
103
|
-
|
|
104
|
-
--rlc-poster-font-size: var(--rls-body-font-size);
|
|
105
|
-
--rlc-poster-letter-spacing: var(--rls-body-letter-spacing);
|
|
106
|
-
--rlc-poster-height: var(--rls-body-line-height);
|
|
107
|
-
--rlc-poster-padding: var(--rls-sizing-x4);
|
|
108
|
-
--rlc-poster-text-align: center;
|
|
109
|
-
|
|
110
|
-
--rlc-progress-circular-dimension: var(--rls-sizing-x28);
|
|
111
|
-
|
|
112
|
-
--rlc-radiobutton-dimension: var(--rls-sizing-x12);
|
|
113
|
-
--rlc-radiobutton-children-dimension: 7rem;
|
|
114
|
-
|
|
115
|
-
--rlc-snackbar-left: 50%;
|
|
116
|
-
|
|
117
|
-
--rlc-skeleton-height: inherit;
|
|
118
|
-
|
|
119
|
-
--rlc-skeleton-text-column-gap: var(--rls-sizing-x4);
|
|
120
|
-
--rlc-skeleton-text-font-size: var(--rls-body-font-size);
|
|
121
|
-
--rlc-skeleton-text-height: var(--rls-body-line-height);
|
|
122
|
-
--rlc-skeleton-text-letter-spacing: var(--rls-body-letter-spacing);
|
|
123
|
-
|
|
124
|
-
--rlc-switch-max-width: var(--rls-sizing-x18);
|
|
125
|
-
--rlc-switch-bar-radius: var(--rls-sizing-x2);
|
|
126
|
-
--rlc-switch-bar-height: var(--rls-sizing-x4);
|
|
127
|
-
--rlc-switch-element-size: var(--rls-sizing-x10);
|
|
128
|
-
|
|
129
|
-
--rlc-tabulartext-char-width: 5.5rem;
|
|
130
|
-
--rlc-tabulartext-font-size: var(--rls-body-font-size);
|
|
131
|
-
--rlc-tabulartext-pointer-width: 2rem;
|
|
132
|
-
--rlc-tabulartext-text-align: flex-start;
|
|
133
|
-
|
|
134
|
-
--rlc-toolbar-height: var(--rls-sizing-x28);
|
|
135
|
-
}
|
|
136
|
-
|
|
137
10
|
* {
|
|
138
11
|
scrollbar-width: thin;
|
|
139
12
|
scrollbar-color: var(--rls-theme-color-300) var(--rls-app-color-200);
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
// Rolster Technology Animations Foundations
|
|
2
|
-
// v2.0.
|
|
2
|
+
// v2.0.1
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 20/Mar/2018
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 06/May/2025
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
body {
|
|
9
9
|
--rls-standard-curve: cubic-bezier(0.4, 0, 0.2, 1);
|
|
10
10
|
|
|
11
11
|
--rls-deceleration-curve: cubic-bezier(0, 0, 0.2, 1);
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
// Rolster Technology Colors Foundations
|
|
2
|
-
// v2.6.
|
|
2
|
+
// v2.6.3
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 03/Mar/2022
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 06/May/2025
|
|
7
7
|
|
|
8
8
|
@use 'helpers' as helpers;
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
body {
|
|
11
11
|
--rls-app-color-900: rgb(40, 50, 61);
|
|
12
12
|
|
|
13
13
|
--rls-app-color-800: rgb(52, 57, 87);
|
|
@@ -28,28 +28,6 @@
|
|
|
28
28
|
|
|
29
29
|
--rls-app-color-050: rgb(255, 255, 255);
|
|
30
30
|
|
|
31
|
-
*[app-theme='dark'] {
|
|
32
|
-
--rls-app-color-050: rgb(40, 50, 61);
|
|
33
|
-
|
|
34
|
-
--rls-app-color-100: rgb(52, 57, 87);
|
|
35
|
-
|
|
36
|
-
--rls-app-color-200: rgb(72, 77, 107);
|
|
37
|
-
|
|
38
|
-
--rls-app-color-300: rgb(98, 111, 155);
|
|
39
|
-
|
|
40
|
-
--rls-app-color-400: rgb(128, 141, 190);
|
|
41
|
-
|
|
42
|
-
--rls-app-color-500: rgb(189, 192, 220);
|
|
43
|
-
|
|
44
|
-
--rls-app-color-600: rgb(214, 217, 240);
|
|
45
|
-
|
|
46
|
-
--rls-app-color-700: rgb(229, 232, 245);
|
|
47
|
-
|
|
48
|
-
--rls-app-color-800: rgb(244, 247, 255);
|
|
49
|
-
|
|
50
|
-
--rls-app-color-900: rgb(255, 255, 255);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
31
|
@include helpers.rolster-theme(
|
|
54
32
|
'primary',
|
|
55
33
|
#0b2446,
|
|
@@ -244,4 +222,26 @@
|
|
|
244
222
|
#e6e4db,
|
|
245
223
|
#f5f5f1
|
|
246
224
|
);
|
|
225
|
+
|
|
226
|
+
&[app-theme='dark'] {
|
|
227
|
+
--rls-app-color-050: rgb(40, 50, 61);
|
|
228
|
+
|
|
229
|
+
--rls-app-color-100: rgb(52, 57, 87);
|
|
230
|
+
|
|
231
|
+
--rls-app-color-200: rgb(72, 77, 107);
|
|
232
|
+
|
|
233
|
+
--rls-app-color-300: rgb(98, 111, 155);
|
|
234
|
+
|
|
235
|
+
--rls-app-color-400: rgb(128, 141, 190);
|
|
236
|
+
|
|
237
|
+
--rls-app-color-500: rgb(189, 192, 220);
|
|
238
|
+
|
|
239
|
+
--rls-app-color-600: rgb(214, 217, 240);
|
|
240
|
+
|
|
241
|
+
--rls-app-color-700: rgb(229, 232, 245);
|
|
242
|
+
|
|
243
|
+
--rls-app-color-800: rgb(244, 247, 255);
|
|
244
|
+
|
|
245
|
+
--rls-app-color-900: rgb(255, 255, 255);
|
|
246
|
+
}
|
|
247
247
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
// Rolster Technology Elevations Foundations
|
|
2
|
-
// v2.1.
|
|
2
|
+
// v2.1.1
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 20/Mar/2018
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 06/May/2025
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
body {
|
|
9
9
|
--rls-z-index-2: 2;
|
|
10
10
|
|
|
11
11
|
--rls-z-index-4: 4;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
// Rolster Technology Sizings Foundations
|
|
2
|
-
// v2.1.
|
|
2
|
+
// v2.1.1
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 20/Mar/2018
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 06/May/2025
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
body {
|
|
9
9
|
--rls-sizing-x1: 1rem;
|
|
10
10
|
|
|
11
11
|
--rls-sizing-x2: 2rem;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
// Rolster Technology Themes Foundations
|
|
2
|
-
// v2.4.
|
|
2
|
+
// v2.4.2
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 03/Mar/2022
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 06/May/2025
|
|
7
7
|
|
|
8
8
|
@mixin rolster-border-color($theme, $token) {
|
|
9
9
|
--rls-#{$theme}-border-1-#{$token}: var(--rls-border-1) solid
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
|
|
61
61
|
--rls-theme-font-900: var(--rls-#{$theme}-color-050);
|
|
62
62
|
|
|
63
|
-
--rls-theme-
|
|
63
|
+
--rls-theme-color-050: var(--rls-#{$theme}-color-050);
|
|
64
64
|
|
|
65
65
|
--rls-theme-font-100: var(--rls-#{$theme}-color-900);
|
|
66
66
|
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
@include rolster-border-theme($theme, 100);
|
|
90
90
|
}
|
|
91
91
|
|
|
92
|
-
|
|
92
|
+
body {
|
|
93
93
|
--rls-app-border-1-100: var(--rls-border-1) solid var(--rls-app-color-200);
|
|
94
94
|
|
|
95
95
|
--rls-app-border-2-100: var(--rls-border-2) solid var(--rls-app-color-200);
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
// Rolster Technology Typographics Foundations
|
|
2
|
-
// v2.0.
|
|
2
|
+
// v2.0.1
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 20/Mar/2018
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 06/May/2025
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
body {
|
|
9
9
|
--rls-font-weight-thin: 100;
|
|
10
10
|
|
|
11
11
|
--rls-font-weight-extra-light: 200;
|
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
// Rolster Technology Normalize Utilities
|
|
2
|
-
// v2.0.
|
|
2
|
+
// v2.0.4
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 11/Ago/2022
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 06/May/2025
|
|
7
7
|
|
|
8
8
|
:root {
|
|
9
9
|
--rls-app-font-family: -apple-system, -rolster-system-font, BlinkMacSystemFont,
|
|
10
10
|
'Segoe UI', Roboto, Helvetica;
|
|
11
|
-
--rlc-app-body-background: var(--rls-app-color-050);
|
|
12
11
|
}
|
|
13
12
|
|
|
14
13
|
html {
|
|
@@ -17,6 +16,8 @@ html {
|
|
|
17
16
|
}
|
|
18
17
|
|
|
19
18
|
body {
|
|
19
|
+
--rlc-app-body-background: var(--rls-app-color-050);
|
|
20
|
+
|
|
20
21
|
position: absolute;
|
|
21
22
|
top: 0rem;
|
|
22
23
|
bottom: 0rem;
|