@rolster/styles-foundations 2.6.6 → 2.6.8
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/styles.css +94 -79
- package/dist/styles.css.map +1 -1
- package/dist/styles.min.css +4 -4
- package/dist/styles.rtl.css +94 -79
- package/dist/styles.rtl.min.css +4 -4
- package/package.json +1 -1
- package/scss/components/field-box.scss +4 -4
- package/scss/components/field-list.scss +3 -3
- package/scss/foundations/elevations.scss +46 -92
- package/scss/foundations/helpers.scss +5 -3
- package/scss/foundations/themes.scss +4 -2
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
// Rolster Technology FieldBox Component
|
|
2
|
-
// v2.3.
|
|
2
|
+
// v2.3.2
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 08/Sep/2022
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 29/Nov/2025
|
|
7
7
|
|
|
8
8
|
.rls-field-box {
|
|
9
9
|
--pvt-body-background: var(--rlc-field-box-body-background, transparent);
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
&--focused {
|
|
56
56
|
--pvt-body-shadow: var(
|
|
57
57
|
--rlc-field-box-body-shadow,
|
|
58
|
-
|
|
58
|
+
var(--rls-theme-shadow-500)
|
|
59
59
|
);
|
|
60
60
|
|
|
61
61
|
--pvt-label-font-color: var(--rls-theme-color-500);
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
&--error {
|
|
66
66
|
--pvt-body-shadow: var(
|
|
67
67
|
--rlc-field-box-body-shadow-error,
|
|
68
|
-
0px 0px 0px 3px var(--rls-danger-shadow-500)
|
|
68
|
+
0px 0px 0px 3px var(--rls-danger-shadow-color-500)
|
|
69
69
|
);
|
|
70
70
|
|
|
71
71
|
--pvt-label-font-color: var(--rls-danger-color-500);
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
// Rolster Technology FieldList Component
|
|
2
|
-
// v1.5.
|
|
2
|
+
// v1.5.1
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 20/Mar/2018
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 29/Nov/2025
|
|
7
7
|
|
|
8
8
|
.rls-field-list {
|
|
9
9
|
--pvt-action-font-color: var(--rls-app-color-600);
|
|
@@ -151,7 +151,7 @@
|
|
|
151
151
|
z-index: var(--rls-z-index-2);
|
|
152
152
|
border: var(--pvt-list-body-border);
|
|
153
153
|
background: var(--rls-app-color-050);
|
|
154
|
-
box-shadow:
|
|
154
|
+
box-shadow: var(--rls-theme-shadow-500);
|
|
155
155
|
transform: var(--pvt-list-transform);
|
|
156
156
|
|
|
157
157
|
&::before {
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
// Rolster Technology Elevations Foundations
|
|
2
|
-
// v2.1.
|
|
2
|
+
// v2.1.2
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 20/Mar/2018
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 24/Nov/2025
|
|
7
7
|
|
|
8
8
|
body {
|
|
9
|
+
--rls-app-shadow-color: rgba(173, 186, 230, 0.6);
|
|
10
|
+
|
|
9
11
|
--rls-z-index-2: 2;
|
|
10
12
|
|
|
11
13
|
--rls-z-index-4: 4;
|
|
@@ -35,68 +37,80 @@ body {
|
|
|
35
37
|
|
|
36
38
|
--rls-app-shadow-6: 0px 8px 24px -4px rgba(173, 186, 230, 0.12);
|
|
37
39
|
|
|
38
|
-
--rls-app-shadow-bottom-2: 0px 2px 2px
|
|
40
|
+
--rls-app-shadow-bottom-2: 0px 2px 2px var(--rls-app-shadow-color);
|
|
41
|
+
|
|
42
|
+
--rls-app-shadow-bottom-4: 0px 4px 4px var(--rls-app-shadow-color);
|
|
43
|
+
|
|
44
|
+
--rls-app-shadow-bottom-6: 0px 6px 6px var(--rls-app-shadow-color);
|
|
45
|
+
|
|
46
|
+
--rls-app-shadow-bottom-8: 0px 8px 8px var(--rls-app-shadow-color);
|
|
47
|
+
|
|
48
|
+
--rls-app-shadow-bottom-16: 0px 16px 16px var(--rls-app-shadow-color);
|
|
39
49
|
|
|
40
|
-
--rls-app-shadow-bottom-
|
|
50
|
+
--rls-app-shadow-bottom-24: 0px 24px 24px var(--rls-app-shadow-color);
|
|
41
51
|
|
|
42
|
-
--rls-app-shadow-bottom-
|
|
52
|
+
--rls-app-shadow-bottom-32: 0px 32px 32px var(--rls-app-shadow-color);
|
|
43
53
|
|
|
44
|
-
--rls-app-shadow-
|
|
54
|
+
--rls-app-shadow-top-2: 0px -2px 2px var(--rls-app-shadow-color);
|
|
45
55
|
|
|
46
|
-
--rls-app-shadow-
|
|
56
|
+
--rls-app-shadow-top-4: 0px -4px 4px var(--rls-app-shadow-color);
|
|
47
57
|
|
|
48
|
-
--rls-app-shadow-
|
|
58
|
+
--rls-app-shadow-top-6: 0px -6px 6px var(--rls-app-shadow-color);
|
|
49
59
|
|
|
50
|
-
--rls-app-shadow-top-
|
|
60
|
+
--rls-app-shadow-top-8: 0px -8px 8px var(--rls-app-shadow-color);
|
|
51
61
|
|
|
52
|
-
--rls-app-shadow-top-
|
|
62
|
+
--rls-app-shadow-top-16: 0px -16px 16px var(--rls-app-shadow-color);
|
|
53
63
|
|
|
54
|
-
--rls-app-shadow-top-
|
|
64
|
+
--rls-app-shadow-top-24: 0px -24px 24px var(--rls-app-shadow-color);
|
|
55
65
|
|
|
56
|
-
--rls-app-shadow-top-
|
|
66
|
+
--rls-app-shadow-top-32: 0px -32px 32px var(--rls-app-shadow-color);
|
|
57
67
|
|
|
58
|
-
--rls-app-shadow-
|
|
68
|
+
--rls-app-shadow-right-2: 2px 0px 2px var(--rls-app-shadow-color);
|
|
59
69
|
|
|
60
|
-
--rls-app-shadow-
|
|
70
|
+
--rls-app-shadow-right-4: 4px 0px 4px var(--rls-app-shadow-color);
|
|
61
71
|
|
|
62
|
-
--rls-app-shadow-right-
|
|
72
|
+
--rls-app-shadow-right-6: 6px 0px 6px var(--rls-app-shadow-color);
|
|
63
73
|
|
|
64
|
-
--rls-app-shadow-right-
|
|
74
|
+
--rls-app-shadow-right-8: 8px 0px 8px var(--rls-app-shadow-color);
|
|
65
75
|
|
|
66
|
-
--rls-app-shadow-right-
|
|
76
|
+
--rls-app-shadow-right-16: 16px 0px 16px var(--rls-app-shadow-color);
|
|
67
77
|
|
|
68
|
-
--rls-app-shadow-right-
|
|
78
|
+
--rls-app-shadow-right-24: 24px 0px 24px var(--rls-app-shadow-color);
|
|
69
79
|
|
|
70
|
-
--rls-app-shadow-right-
|
|
80
|
+
--rls-app-shadow-right-32: 32px 0px 32px var(--rls-app-shadow-color);
|
|
71
81
|
|
|
72
|
-
--rls-app-shadow-
|
|
82
|
+
--rls-app-shadow-left-2: -2px 0px 2px var(--rls-app-shadow-color);
|
|
73
83
|
|
|
74
|
-
--rls-app-shadow-left-
|
|
84
|
+
--rls-app-shadow-left-4: -4px 0px 4px var(--rls-app-shadow-color);
|
|
75
85
|
|
|
76
|
-
--rls-app-shadow-left-
|
|
86
|
+
--rls-app-shadow-left-6: -6px 0px 6px var(--rls-app-shadow-color);
|
|
77
87
|
|
|
78
|
-
--rls-app-shadow-left-8: -8px 0px 8px
|
|
88
|
+
--rls-app-shadow-left-8: -8px 0px 8px var(--rls-app-shadow-color);
|
|
79
89
|
|
|
80
|
-
--rls-app-shadow-left-16: -16px 0px 16px
|
|
90
|
+
--rls-app-shadow-left-16: -16px 0px 16px var(--rls-app-shadow-color);
|
|
81
91
|
|
|
82
|
-
--rls-app-shadow-left-24: -24px 0px 24px
|
|
92
|
+
--rls-app-shadow-left-24: -24px 0px 24px var(--rls-app-shadow-color);
|
|
83
93
|
|
|
84
|
-
--rls-app-shadow-left-32: -32px 0px 32px
|
|
94
|
+
--rls-app-shadow-left-32: -32px 0px 32px var(--rls-app-shadow-color);
|
|
85
95
|
|
|
86
|
-
--rls-app-shadow-center-2: 0px 0px 2px 0px
|
|
96
|
+
--rls-app-shadow-center-2: 0px 0px 2px 0px var(--rls-app-shadow-color);
|
|
87
97
|
|
|
88
|
-
--rls-app-shadow-center-4: 0px 0px 4px 0px
|
|
98
|
+
--rls-app-shadow-center-4: 0px 0px 4px 0px var(--rls-app-shadow-color);
|
|
89
99
|
|
|
90
|
-
--rls-app-shadow-center-
|
|
100
|
+
--rls-app-shadow-center-6: 0px 0px 6px 0px var(--rls-app-shadow-color);
|
|
91
101
|
|
|
92
|
-
--rls-app-shadow-center-
|
|
102
|
+
--rls-app-shadow-center-8: 0px 0px 8px 0px var(--rls-app-shadow-color);
|
|
93
103
|
|
|
94
|
-
--rls-app-shadow-center-
|
|
104
|
+
--rls-app-shadow-center-16: 0px 0px 16px 0px var(--rls-app-shadow-color);
|
|
95
105
|
|
|
96
|
-
--rls-app-shadow-center-
|
|
106
|
+
--rls-app-shadow-center-24: 0px 0px 24px 0px var(--rls-app-shadow-color);
|
|
107
|
+
|
|
108
|
+
--rls-app-shadow-center-32: 0px 0px 32px 0px var(--rls-app-shadow-color);
|
|
97
109
|
}
|
|
98
110
|
|
|
99
111
|
*[app-theme='dark'] {
|
|
112
|
+
--rls-app-shadow-color: rgb(98, 111, 155, 0.6);
|
|
113
|
+
|
|
100
114
|
--rls-app-shadow-1: 0px 4px 2px -2px rgba(50, 44, 47, 0.02);
|
|
101
115
|
|
|
102
116
|
--rls-app-shadow-2: 0px 4px 8px -2px rgba(50, 44, 47, 0.04);
|
|
@@ -109,64 +123,4 @@ body {
|
|
|
109
123
|
--rls-app-shadow-5: 0px 8px 24px -4px rgba(50, 44, 47, 0.08);
|
|
110
124
|
|
|
111
125
|
--rls-app-shadow-6: 0px 8px 24px -4px rgba(50, 44, 47, 0.12);
|
|
112
|
-
|
|
113
|
-
--rls-app-shadow-bottom-2: 0px 2px 2px rgba(50, 44, 47, 0.4);
|
|
114
|
-
|
|
115
|
-
--rls-app-shadow-bottom-4: 0px 4px 4px rgba(50, 44, 47, 0.4);
|
|
116
|
-
|
|
117
|
-
--rls-app-shadow-bottom-8: 0px 8px 8px rgba(50, 44, 47, 0.4);
|
|
118
|
-
|
|
119
|
-
--rls-app-shadow-bottom-16: 0px 16px 16px rgba(50, 44, 47, 0.4);
|
|
120
|
-
|
|
121
|
-
--rls-app-shadow-bottom-24: 0px 24px 24px rgba(50, 44, 47, 0.4);
|
|
122
|
-
|
|
123
|
-
--rls-app-shadow-bottom-32: 0px 32px 32px rgba(50, 44, 47, 0.4);
|
|
124
|
-
|
|
125
|
-
--rls-app-shadow-top-2: 0px -2px 2px rgba(50, 44, 47, 0.4);
|
|
126
|
-
|
|
127
|
-
--rls-app-shadow-top-4: 0px -4px 4px rgba(50, 44, 47, 0.4);
|
|
128
|
-
|
|
129
|
-
--rls-app-shadow-top-8: 0px -8px 8px rgba(50, 44, 47, 0.4);
|
|
130
|
-
|
|
131
|
-
--rls-app-shadow-top-16: 0px -16px 16px rgba(50, 44, 47, 0.4);
|
|
132
|
-
|
|
133
|
-
--rls-app-shadow-top-24: 0px -24px 24px rgba(50, 44, 47, 0.4);
|
|
134
|
-
|
|
135
|
-
--rls-app-shadow-top-32: 0px -32px 32px rgba(50, 44, 47, 0.4);
|
|
136
|
-
|
|
137
|
-
--rls-app-shadow-right-2: 2px 0px 2px rgba(50, 44, 47, 0.4);
|
|
138
|
-
|
|
139
|
-
--rls-app-shadow-right-4: 4px 0px 4px rgba(50, 44, 47, 0.4);
|
|
140
|
-
|
|
141
|
-
--rls-app-shadow-right-8: 8px 0px 8px rgba(50, 44, 47, 0.4);
|
|
142
|
-
|
|
143
|
-
--rls-app-shadow-right-16: 16px 0px 16px rgba(50, 44, 47, 0.4);
|
|
144
|
-
|
|
145
|
-
--rls-app-shadow-right-24: 24px 0px 24px rgba(50, 44, 47, 0.4);
|
|
146
|
-
|
|
147
|
-
--rls-app-shadow-right-32: 32px 0px 32px rgba(50, 44, 47, 0.4);
|
|
148
|
-
|
|
149
|
-
--rls-app-shadow-left-2: -2px 0px 2px rgba(50, 44, 47, 0.4);
|
|
150
|
-
|
|
151
|
-
--rls-app-shadow-left-4: -4px 0px 4px rgba(50, 44, 47, 0.4);
|
|
152
|
-
|
|
153
|
-
--rls-app-shadow-left-8: -8px 0px 8px rgba(50, 44, 47, 0.4);
|
|
154
|
-
|
|
155
|
-
--rls-app-shadow-left-16: -16px 0px 16px rgba(50, 44, 47, 0.4);
|
|
156
|
-
|
|
157
|
-
--rls-app-shadow-left-24: -24px 0px 24px rgba(50, 44, 47, 0.4);
|
|
158
|
-
|
|
159
|
-
--rls-app-shadow-left-32: -32px 0px 32px rgba(50, 44, 47, 0.4);
|
|
160
|
-
|
|
161
|
-
--rls-app-shadow-center-2: 0px 0px 2px 0px rgba(50, 44, 47, 0.4);
|
|
162
|
-
|
|
163
|
-
--rls-app-shadow-center-4: 0px 0px 4px 0px rgba(50, 44, 47, 0.4);
|
|
164
|
-
|
|
165
|
-
--rls-app-shadow-center-8: 0px 0px 8px 0px rgba(50, 44, 47, 0.4);
|
|
166
|
-
|
|
167
|
-
--rls-app-shadow-center-16: 0px 0px 16px 0px rgba(50, 44, 47, 0.4);
|
|
168
|
-
|
|
169
|
-
--rls-app-shadow-center-24: 0px 0px 24px 0px rgba(50, 44, 47, 0.4);
|
|
170
|
-
|
|
171
|
-
--rls-app-shadow-center-32: 0px 0px 32px 0px rgba(50, 44, 47, 0.4);
|
|
172
126
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
// Rolster Technology Helpers Foundations
|
|
2
|
-
// v1.0.
|
|
2
|
+
// v1.0.2
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 18/Abr/2025
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 29/Nov/2025
|
|
7
7
|
|
|
8
8
|
@use 'sass:color' as *;
|
|
9
9
|
|
|
@@ -42,7 +42,9 @@
|
|
|
42
42
|
|
|
43
43
|
--rls-#{$theme}-color-500: #{$color};
|
|
44
44
|
|
|
45
|
-
--rls-#{$theme}-shadow-500: rgba(#{$r}, #{$g}, #{$b}, 0.24);
|
|
45
|
+
--rls-#{$theme}-shadow-color-500: rgba(#{$r}, #{$g}, #{$b}, 0.24);
|
|
46
|
+
|
|
47
|
+
--rls-#{$theme}-shadow-500: 0px 0px 0px 3px var(--rls-#{$theme}-shadow-color-500);
|
|
46
48
|
}
|
|
47
49
|
|
|
48
50
|
@mixin rolster-theme(
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
// Rolster Technology Themes Foundations
|
|
2
|
-
// v2.5.
|
|
2
|
+
// v2.5.1
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 03/Mar/2022
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 29/Nov/2025
|
|
7
7
|
|
|
8
8
|
@mixin rolster-app-border($token) {
|
|
9
9
|
--rls-app-border-1-#{$token}: var(--rls-border-1) solid
|
|
@@ -89,6 +89,8 @@
|
|
|
89
89
|
|
|
90
90
|
--rls-theme-skeleton-100: var(--rls-#{$theme}-skeleton-100);
|
|
91
91
|
|
|
92
|
+
--rls-theme-shadow-color-500: var(--rls-#{$theme}-shadow-color-500);
|
|
93
|
+
|
|
92
94
|
--rls-theme-shadow-500: var(--rls-#{$theme}-shadow-500);
|
|
93
95
|
|
|
94
96
|
--rls-theme-backdrop-900: var(--rls-#{$theme}-backdrop-900);
|