@rolster/styles-foundations 1.1.14 → 2.2.0
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/rolster-styles.css +1819 -1488
- package/dist/rolster-styles.min.css +1 -1
- package/dist/rolster-styles.rtl.css +1819 -1488
- package/dist/rolster-styles.rtl.min.css +1 -1
- package/package.json +1 -1
- package/readme.md +1 -1
- package/scss/_rolster-components.scss +64 -63
- package/scss/_rolster-foundations.scss +9 -9
- package/scss/_rolster-styles.scss +15 -2
- package/scss/_rolster-utilities.scss +9 -9
- package/scss/components/_app.scss +16 -16
- package/scss/components/_box-field.scss +34 -35
- package/scss/components/_data-table.scss +75 -74
- package/scss/components/_form.scss +7 -7
- package/scss/components/_list-field.scss +69 -70
- package/scss/foundations/_animations.foundation.scss +16 -0
- package/scss/foundations/_colors.foundation.scss +290 -0
- package/scss/foundations/_elevations.foundation.scss +157 -0
- package/scss/foundations/_sizings.foundation.scss +74 -0
- package/scss/foundations/_themes.foundation.scss +172 -0
- package/scss/foundations/_typographics.foundation.scss +26 -0
- package/scss/utilities/_colors.utility.scss +54 -0
- package/scss/utilities/_helpers.utility.scss +124 -0
- package/scss/utilities/{_layout-utilities.scss → _layout.utility.scss} +6 -6
- package/scss/utilities/{_normalize-utilities.scss → _normalize.utility.scss} +14 -8
- package/scss/utilities/{_texts-utilities.scss → _texts.utility.scss} +14 -14
- package/scss/utilities/_themes.utility.scss +42 -0
- package/scss/utilities/_typographics.utility.scss +107 -0
- package/scss/foundations/_animations-foundations.scss +0 -16
- package/scss/foundations/_colors-foundations.scss +0 -270
- package/scss/foundations/_elevations-foundations.scss +0 -157
- package/scss/foundations/_sizings-foundations.scss +0 -74
- package/scss/foundations/_themes-foundations.scss +0 -160
- package/scss/foundations/_typographics-foundations.scss +0 -26
- package/scss/utilities/_colors-utilities.scss +0 -54
- package/scss/utilities/_helpers-utilities.scss +0 -124
- package/scss/utilities/_themes-utilities.scss +0 -42
- package/scss/utilities/_typographics-utilities.scss +0 -107
- /package/scss/foundations/{_responsives-foundations.scss → _responsives.foundation.scss} +0 -0
|
@@ -1,270 +0,0 @@
|
|
|
1
|
-
// Rolster Technology Colors Foundations
|
|
2
|
-
// v2.2.0
|
|
3
|
-
// @license MIT
|
|
4
|
-
// Author: Rolster Developers
|
|
5
|
-
// Created: 03/Mar/2022
|
|
6
|
-
// Updated: 13/Abr/2024
|
|
7
|
-
|
|
8
|
-
:root {
|
|
9
|
-
--background-dark-500: rgba(37, 38, 65, 1);
|
|
10
|
-
|
|
11
|
-
--background-dark-300: rgba(52, 57, 87, 1);
|
|
12
|
-
|
|
13
|
-
--background-dark-100: rgba(72, 77, 107, 1);
|
|
14
|
-
|
|
15
|
-
--background-light-500: rgba(255, 255, 255, 1);
|
|
16
|
-
|
|
17
|
-
--background-light-300: rgba(239, 242, 252, 1);
|
|
18
|
-
|
|
19
|
-
--background-light-100: rgba(221, 223, 237, 1);
|
|
20
|
-
|
|
21
|
-
--color-dark-500: rgba(40, 50, 61, 1);
|
|
22
|
-
|
|
23
|
-
--color-dark-300: rgba(98, 111, 155, 1);
|
|
24
|
-
|
|
25
|
-
--color-dark-100: rgba(173, 186, 212, 1);
|
|
26
|
-
|
|
27
|
-
--color-light-500: rgba(255, 255, 255, 1);
|
|
28
|
-
|
|
29
|
-
--color-light-300: rgba(185, 195, 231, 1);
|
|
30
|
-
|
|
31
|
-
--color-light-100: rgba(128, 141, 190, 1);
|
|
32
|
-
|
|
33
|
-
--border-dark-500: rgba(85, 95, 131, 1);
|
|
34
|
-
|
|
35
|
-
--border-dark-300: rgba(173, 186, 230, 1);
|
|
36
|
-
|
|
37
|
-
--border-dark-100: rgba(209, 214, 239, 1);
|
|
38
|
-
|
|
39
|
-
--border-light-500: rgba(255, 255, 255, 1);
|
|
40
|
-
|
|
41
|
-
--border-light-300: rgba(185, 195, 231, 1);
|
|
42
|
-
|
|
43
|
-
--border-light-100: rgba(128, 141, 190, 1);
|
|
44
|
-
|
|
45
|
-
// COLORS PRIMARY
|
|
46
|
-
|
|
47
|
-
--color-primary-900: rgba(21, 56, 101, 1);
|
|
48
|
-
|
|
49
|
-
--color-primary-700: rgba(17, 75, 147, 1);
|
|
50
|
-
|
|
51
|
-
--color-primary-500: rgba(33, 122, 214, 1);
|
|
52
|
-
|
|
53
|
-
--color-primary-300: rgba(136, 186, 241, 1);
|
|
54
|
-
|
|
55
|
-
--color-primary-100: rgba(227, 236, 251, 1);
|
|
56
|
-
|
|
57
|
-
--skeleton-primary-500: rgba(17, 75, 147, 0.5);
|
|
58
|
-
|
|
59
|
-
--skeleton-primary-300: rgba(17, 75, 147, 0.25);
|
|
60
|
-
|
|
61
|
-
--skeleton-primary-100: rgba(17, 75, 147, 0.1);
|
|
62
|
-
|
|
63
|
-
--box-shadow-primary-500: rgba(33, 122, 214, 0.24);
|
|
64
|
-
|
|
65
|
-
--backdrop-primary-500: rgba(21, 56, 101, 0.8);
|
|
66
|
-
|
|
67
|
-
--gradient-primary-500: linear-gradient(
|
|
68
|
-
180deg,
|
|
69
|
-
rgb(33, 122, 214) 0%,
|
|
70
|
-
rgb(17, 75, 147) 100%
|
|
71
|
-
);
|
|
72
|
-
|
|
73
|
-
// COLORS SUCCESS
|
|
74
|
-
|
|
75
|
-
--color-success-900: rgba(4, 80, 56, 1);
|
|
76
|
-
|
|
77
|
-
--color-success-700: rgba(0, 124, 82, 1);
|
|
78
|
-
|
|
79
|
-
--color-success-500: rgba(10, 191, 121, 1);
|
|
80
|
-
|
|
81
|
-
--color-success-300: rgba(106, 235, 177, 1);
|
|
82
|
-
|
|
83
|
-
--color-success-100: rgba(208, 251, 227, 1);
|
|
84
|
-
|
|
85
|
-
--skeleton-success-500: rgba(0, 124, 82, 0.5);
|
|
86
|
-
|
|
87
|
-
--skeleton-success-300: rgba(0, 124, 82, 0.25);
|
|
88
|
-
|
|
89
|
-
--skeleton-success-100: rgba(0, 124, 82, 0.1);
|
|
90
|
-
|
|
91
|
-
--box-shadow-success-500: rgba(10, 191, 121, 0.24);
|
|
92
|
-
|
|
93
|
-
--backdrop-success-500: rgba(4, 80, 56, 0.8);
|
|
94
|
-
|
|
95
|
-
--gradient-success-500: linear-gradient(
|
|
96
|
-
180deg,
|
|
97
|
-
rgb(10, 191, 121) 0%,
|
|
98
|
-
rgb(0, 124, 82) 100%
|
|
99
|
-
);
|
|
100
|
-
|
|
101
|
-
// COLORS INFO
|
|
102
|
-
|
|
103
|
-
--color-info-900: rgba(7, 70, 115, 1);
|
|
104
|
-
|
|
105
|
-
--color-info-700: rgba(0, 100, 170, 1);
|
|
106
|
-
|
|
107
|
-
--color-info-500: rgba(2, 159, 245, 1);
|
|
108
|
-
|
|
109
|
-
--color-info-300: rgba(118, 207, 255, 1);
|
|
110
|
-
|
|
111
|
-
--color-info-100: rgba(222, 241, 255, 1);
|
|
112
|
-
|
|
113
|
-
--skeleton-info-500: rgba(0, 100, 170, 0.5);
|
|
114
|
-
|
|
115
|
-
--skeleton-info-300: rgba(0, 100, 170, 0.25);
|
|
116
|
-
|
|
117
|
-
--skeleton-info-100: rgba(0, 100, 170, 0.1);
|
|
118
|
-
|
|
119
|
-
--box-shadow-info-500: rgba(2, 159, 245, 0.24);
|
|
120
|
-
|
|
121
|
-
--backdrop-info-500: rgba(7, 70, 115, 0.8);
|
|
122
|
-
|
|
123
|
-
--gradient-info-500: linear-gradient(
|
|
124
|
-
180deg,
|
|
125
|
-
rgb(2, 159, 245) 0%,
|
|
126
|
-
rgb(0, 100, 170) 100%
|
|
127
|
-
);
|
|
128
|
-
|
|
129
|
-
// COLORS HAPPY
|
|
130
|
-
|
|
131
|
-
--color-happy-900: rgb(63, 19, 63, 1);
|
|
132
|
-
|
|
133
|
-
--color-happy-700: rgb(142, 58, 145, 1);
|
|
134
|
-
|
|
135
|
-
--color-happy-500: rgba(170, 73, 176, 1);
|
|
136
|
-
|
|
137
|
-
--color-happy-300: rgba(217, 147, 223, 1);
|
|
138
|
-
|
|
139
|
-
--color-happy-100: rgba(240, 217, 245, 1);
|
|
140
|
-
|
|
141
|
-
--skeleton-happy-500: rgba(142, 58, 145, 0.5);
|
|
142
|
-
|
|
143
|
-
--skeleton-happy-300: rgba(142, 58, 145, 0.25);
|
|
144
|
-
|
|
145
|
-
--skeleton-happy-100: rgba(142, 58, 145, 0.1);
|
|
146
|
-
|
|
147
|
-
--box-shadow-happy-500: rgba(170, 73, 176, 0.24);
|
|
148
|
-
|
|
149
|
-
--backdrop-happy-500: rgba(63, 19, 63, 0.8);
|
|
150
|
-
|
|
151
|
-
--gradient-happy-500: linear-gradient(
|
|
152
|
-
180deg,
|
|
153
|
-
rgb(170, 73, 176) 0%,
|
|
154
|
-
rgb(142, 58, 145) 100%
|
|
155
|
-
);
|
|
156
|
-
|
|
157
|
-
// COLORS WARNING
|
|
158
|
-
|
|
159
|
-
--color-warning-900: rgb(116, 68, 15, 1);
|
|
160
|
-
|
|
161
|
-
--color-warning-700: rgba(166, 107, 2, 1);
|
|
162
|
-
|
|
163
|
-
--color-warning-500: rgb(255, 206, 0, 1);
|
|
164
|
-
|
|
165
|
-
--color-warning-300: rgba(255, 238, 65, 1);
|
|
166
|
-
|
|
167
|
-
--color-warning-100: rgba(255, 254, 193, 1);
|
|
168
|
-
|
|
169
|
-
--skeleton-warning-500: rgba(166, 107, 2, 0.5);
|
|
170
|
-
|
|
171
|
-
--skeleton-warning-300: rgba(166, 107, 2, 0.25);
|
|
172
|
-
|
|
173
|
-
--skeleton-warning-100: rgba(166, 107, 2, 0.1);
|
|
174
|
-
|
|
175
|
-
--box-shadow-warning-500: rgba(255, 206, 0, 0.24);
|
|
176
|
-
|
|
177
|
-
--backdrop-warning-500: rgba(116, 68, 15, 0.8);
|
|
178
|
-
|
|
179
|
-
--gradient-warning-500: linear-gradient(
|
|
180
|
-
180deg,
|
|
181
|
-
rgb(255, 206, 0) 0%,
|
|
182
|
-
rgb(166, 107, 2) 100%
|
|
183
|
-
);
|
|
184
|
-
|
|
185
|
-
// COLORS DANGER
|
|
186
|
-
|
|
187
|
-
color: rgb(136, 20, 20);
|
|
188
|
-
|
|
189
|
-
--color-danger-900: rgba(136, 20, 20, 1);
|
|
190
|
-
|
|
191
|
-
--color-danger-700: rgba(200, 13, 13, 1);
|
|
192
|
-
|
|
193
|
-
--color-danger-500: rgba(255, 44, 44, 1);
|
|
194
|
-
|
|
195
|
-
--color-danger-300: rgba(255, 157, 157, 1);
|
|
196
|
-
|
|
197
|
-
--color-danger-100: rgba(255, 223, 223, 1);
|
|
198
|
-
|
|
199
|
-
--skeleton-danger-500: rgba(200, 13, 13, 0.5);
|
|
200
|
-
|
|
201
|
-
--skeleton-danger-300: rgba(200, 13, 13, 0.25);
|
|
202
|
-
|
|
203
|
-
--skeleton-danger-100: rgba(200, 13, 13, 0.1);
|
|
204
|
-
|
|
205
|
-
--box-shadow-danger-500: rgba(255, 44, 44, 0.24);
|
|
206
|
-
|
|
207
|
-
--backdrop-danger-500: rgba(136, 20, 20, 0.8);
|
|
208
|
-
|
|
209
|
-
--gradient-danger-500: linear-gradient(
|
|
210
|
-
180deg,
|
|
211
|
-
rgb(255, 44, 44) 0%,
|
|
212
|
-
rgb(200, 13, 13) 100%
|
|
213
|
-
);
|
|
214
|
-
|
|
215
|
-
// COLORS COFFEE
|
|
216
|
-
|
|
217
|
-
--color-coffee-900: rgba(93, 57, 49, 1);
|
|
218
|
-
|
|
219
|
-
--color-coffee-700: rgba(140, 83, 66, 1);
|
|
220
|
-
|
|
221
|
-
--color-coffee-500: rgba(182, 121, 89, 1);
|
|
222
|
-
|
|
223
|
-
--color-coffee-300: rgba(219, 193, 172, 1);
|
|
224
|
-
|
|
225
|
-
--color-coffee-100: rgb(243, 234, 225, 1);
|
|
226
|
-
|
|
227
|
-
--skeleton-coffee-500: rgba(140, 83, 66, 0.5);
|
|
228
|
-
|
|
229
|
-
--skeleton-coffee-300: rgba(140, 83, 66, 0.25);
|
|
230
|
-
|
|
231
|
-
--skeleton-coffee-100: rgba(140, 83, 66, 0.1);
|
|
232
|
-
|
|
233
|
-
--box-shadow-coffee-500: rgba(182, 121, 89, 0.24);
|
|
234
|
-
|
|
235
|
-
--backdrop-coffee-500: rgba(93, 57, 49, 0.8);
|
|
236
|
-
|
|
237
|
-
--gradient-coffee-500: linear-gradient(
|
|
238
|
-
180deg,
|
|
239
|
-
rgb(182, 121, 89) 0%,
|
|
240
|
-
rgb(140, 83, 66) 100%
|
|
241
|
-
);
|
|
242
|
-
|
|
243
|
-
// COLORS OBSIDIAN
|
|
244
|
-
|
|
245
|
-
--color-obsidian-900: rgba(58, 50, 45, 1);
|
|
246
|
-
|
|
247
|
-
--color-obsidian-700: rgba(97, 84, 71, 1);
|
|
248
|
-
|
|
249
|
-
--color-obsidian-500: rgba(141, 127, 101, 1);
|
|
250
|
-
|
|
251
|
-
--color-obsidian-300: rgb(178, 170, 146, 1);
|
|
252
|
-
|
|
253
|
-
--color-obsidian-100: rgb(230, 228, 219, 1);
|
|
254
|
-
|
|
255
|
-
--skeleton-obsidian-500: rgba(97, 84, 71, 0.5);
|
|
256
|
-
|
|
257
|
-
--skeleton-obsidian-300: rgba(97, 84, 71, 0.25);
|
|
258
|
-
|
|
259
|
-
--skeleton-obsidian-100: rgba(97, 84, 71, 0.1);
|
|
260
|
-
|
|
261
|
-
--box-shadow-obsidian-500: rgba(141, 127, 101, 0.24);
|
|
262
|
-
|
|
263
|
-
--backdrop-obsidian-500: rgba(58, 50, 45, 0.8);
|
|
264
|
-
|
|
265
|
-
--gradient-obsidian-500: linear-gradient(
|
|
266
|
-
180deg,
|
|
267
|
-
rgb(141, 127, 101) 0%,
|
|
268
|
-
rgb(97, 84, 71) 100%
|
|
269
|
-
);
|
|
270
|
-
}
|
|
@@ -1,157 +0,0 @@
|
|
|
1
|
-
// Rolster Technology Elevations Foundations
|
|
2
|
-
// v1.0.0
|
|
3
|
-
// @license MIT
|
|
4
|
-
// Author: Rolster Developers
|
|
5
|
-
// Created: 20/Mar/2018
|
|
6
|
-
// Updated: 11/Abr/2023
|
|
7
|
-
|
|
8
|
-
:root {
|
|
9
|
-
--z-index-2: 2;
|
|
10
|
-
|
|
11
|
-
--z-index-4: 4;
|
|
12
|
-
|
|
13
|
-
--z-index-6: 6;
|
|
14
|
-
|
|
15
|
-
--z-index-8: 8;
|
|
16
|
-
|
|
17
|
-
--z-index-12: 12;
|
|
18
|
-
|
|
19
|
-
--z-index-16: 16;
|
|
20
|
-
|
|
21
|
-
--z-index-24: 24;
|
|
22
|
-
|
|
23
|
-
--z-index-32: 32;
|
|
24
|
-
|
|
25
|
-
--shadow-1: 0px 4px 2px -2px rgba(50, 44, 47, 0.02);
|
|
26
|
-
|
|
27
|
-
--shadow-2: 0px 4px 8px -2px rgba(50, 44, 47, 0.04);
|
|
28
|
-
|
|
29
|
-
--shadow-3: 0px 2px 4px -2px rgba(50, 44, 47, 0.08);
|
|
30
|
-
|
|
31
|
-
--shadow-4: 0px 4px 8px -6px rgba(50, 44, 47, 0.03),
|
|
32
|
-
0px 16px 8px -4px rgba(50, 44, 47, 0.03);
|
|
33
|
-
|
|
34
|
-
--shadow-5: 0px 8px 24px -4px rgba(50, 44, 47, 0.08);
|
|
35
|
-
|
|
36
|
-
--shadow-6: 0px 8px 24px -4px rgba(50, 44, 47, 0.12);
|
|
37
|
-
|
|
38
|
-
--shadow-bottom-light-2: 0px 2px 2px rgba(173, 186, 230, 0.4);
|
|
39
|
-
|
|
40
|
-
--shadow-bottom-light-4: 0px 4px 4px rgba(173, 186, 230, 0.4);
|
|
41
|
-
|
|
42
|
-
--shadow-bottom-light-8: 0px 8px 8px rgba(173, 186, 230, 0.4);
|
|
43
|
-
|
|
44
|
-
--shadow-bottom-light-16: 0px 16px 16px rgba(173, 186, 230, 0.4);
|
|
45
|
-
|
|
46
|
-
--shadow-bottom-light-24: 0px 24px 24px rgba(173, 186, 230, 0.4);
|
|
47
|
-
|
|
48
|
-
--shadow-bottom-light-32: 0px 32px 32px rgba(173, 186, 230, 0.4);
|
|
49
|
-
|
|
50
|
-
--shadow-top-light-2: 0px -2px 2px rgba(173, 186, 230, 0.4);
|
|
51
|
-
|
|
52
|
-
--shadow-top-light-4: 0px -4px 4px rgba(173, 186, 230, 0.4);
|
|
53
|
-
|
|
54
|
-
--shadow-top-light-8: 0px -8px 8px rgba(173, 186, 230, 0.4);
|
|
55
|
-
|
|
56
|
-
--shadow-top-light-16: 0px -16px 16px rgba(173, 186, 230, 0.4);
|
|
57
|
-
|
|
58
|
-
--shadow-top-light-24: 0px -24px 24px rgba(173, 186, 230, 0.4);
|
|
59
|
-
|
|
60
|
-
--shadow-top-light-32: 0px -32px 32px rgba(173, 186, 230, 0.4);
|
|
61
|
-
|
|
62
|
-
--shadow-right-light-2: 2px 0px 2px rgba(173, 186, 230, 0.4);
|
|
63
|
-
|
|
64
|
-
--shadow-right-light-4: 4px 0px 4px rgba(173, 186, 230, 0.4);
|
|
65
|
-
|
|
66
|
-
--shadow-right-light-8: 8px 0px 8px rgba(173, 186, 230, 0.4);
|
|
67
|
-
|
|
68
|
-
--shadow-right-light-16: 16px 0px 16px rgba(173, 186, 230, 0.4);
|
|
69
|
-
|
|
70
|
-
--shadow-right-light-24: 24px 0px 24px rgba(173, 186, 230, 0.4);
|
|
71
|
-
|
|
72
|
-
--shadow-right-light-32: 32px 0px 32px rgba(173, 186, 230, 0.4);
|
|
73
|
-
|
|
74
|
-
--shadow-left-light-2: -2px 0px 2px rgba(173, 186, 230, 0.4);
|
|
75
|
-
|
|
76
|
-
--shadow-left-light-4: -4px 0px 4px rgba(173, 186, 230, 0.4);
|
|
77
|
-
|
|
78
|
-
--shadow-left-light-8: -8px 0px 8px rgba(173, 186, 230, 0.4);
|
|
79
|
-
|
|
80
|
-
--shadow-left-light-16: -16px 0px 16px rgba(173, 186, 230, 0.4);
|
|
81
|
-
|
|
82
|
-
--shadow-left-light-24: -24px 0px 24px rgba(173, 186, 230, 0.4);
|
|
83
|
-
|
|
84
|
-
--shadow-left-light-32: -32px 0px 32px rgba(173, 186, 230, 0.4);
|
|
85
|
-
|
|
86
|
-
--shadow-center-light-2: 0px 0px 2px 0px rgba(173, 186, 230, 0.4);
|
|
87
|
-
|
|
88
|
-
--shadow-center-light-4: 0px 0px 4px 0px rgba(173, 186, 230, 0.4);
|
|
89
|
-
|
|
90
|
-
--shadow-center-light-8: 0px 0px 8px 0px rgba(173, 186, 230, 0.4);
|
|
91
|
-
|
|
92
|
-
--shadow-center-light-16: 0px 0px 16px 0px rgba(173, 186, 230, 0.4);
|
|
93
|
-
|
|
94
|
-
--shadow-center-light-24: 0px 0px 24px 0px rgba(173, 186, 230, 0.4);
|
|
95
|
-
|
|
96
|
-
--shadow-center-light-32: 0px 0px 32px 0px rgba(173, 186, 230, 0.4);
|
|
97
|
-
|
|
98
|
-
--shadow-bottom-dark-2: 0px 2px 2px rgba(50, 44, 47, 0.4);
|
|
99
|
-
|
|
100
|
-
--shadow-bottom-dark-4: 0px 4px 4px rgba(50, 44, 47, 0.4);
|
|
101
|
-
|
|
102
|
-
--shadow-bottom-dark-8: 0px 8px 8px rgba(50, 44, 47, 0.4);
|
|
103
|
-
|
|
104
|
-
--shadow-bottom-dark-16: 0px 16px 16px rgba(50, 44, 47, 0.4);
|
|
105
|
-
|
|
106
|
-
--shadow-bottom-dark-24: 0px 24px 24px rgba(50, 44, 47, 0.4);
|
|
107
|
-
|
|
108
|
-
--shadow-bottom-dark-32: 0px 32px 32px rgba(50, 44, 47, 0.4);
|
|
109
|
-
|
|
110
|
-
--shadow-top-dark-2: 0px -2px 2px rgba(50, 44, 47, 0.4);
|
|
111
|
-
|
|
112
|
-
--shadow-top-dark-4: 0px -4px 4px rgba(50, 44, 47, 0.4);
|
|
113
|
-
|
|
114
|
-
--shadow-top-dark-8: 0px -8px 8px rgba(50, 44, 47, 0.4);
|
|
115
|
-
|
|
116
|
-
--shadow-top-dark-16: 0px -16px 16px rgba(50, 44, 47, 0.4);
|
|
117
|
-
|
|
118
|
-
--shadow-top-dark-24: 0px -24px 24px rgba(50, 44, 47, 0.4);
|
|
119
|
-
|
|
120
|
-
--shadow-top-dark-32: 0px -32px 32px rgba(50, 44, 47, 0.4);
|
|
121
|
-
|
|
122
|
-
--shadow-right-dark-2: 2px 0px 2px rgba(50, 44, 47, 0.4);
|
|
123
|
-
|
|
124
|
-
--shadow-right-dark-4: 4px 0px 4px rgba(50, 44, 47, 0.4);
|
|
125
|
-
|
|
126
|
-
--shadow-right-dark-8: 8px 0px 8px rgba(50, 44, 47, 0.4);
|
|
127
|
-
|
|
128
|
-
--shadow-right-dark-16: 16px 0px 16px rgba(50, 44, 47, 0.4);
|
|
129
|
-
|
|
130
|
-
--shadow-right-dark-24: 24px 0px 24px rgba(50, 44, 47, 0.4);
|
|
131
|
-
|
|
132
|
-
--shadow-right-dark-32: 32px 0px 32px rgba(50, 44, 47, 0.4);
|
|
133
|
-
|
|
134
|
-
--shadow-left-dark-2: -2px 0px 2px rgba(50, 44, 47, 0.4);
|
|
135
|
-
|
|
136
|
-
--shadow-left-dark-4: -4px 0px 4px rgba(50, 44, 47, 0.4);
|
|
137
|
-
|
|
138
|
-
--shadow-left-dark-8: -8px 0px 8px rgba(50, 44, 47, 0.4);
|
|
139
|
-
|
|
140
|
-
--shadow-left-dark-16: -16px 0px 16px rgba(50, 44, 47, 0.4);
|
|
141
|
-
|
|
142
|
-
--shadow-left-dark-24: -24px 0px 24px rgba(50, 44, 47, 0.4);
|
|
143
|
-
|
|
144
|
-
--shadow-left-dark-32: -32px 0px 32px rgba(50, 44, 47, 0.4);
|
|
145
|
-
|
|
146
|
-
--shadow-center-dark-2: 0px 0px 2px 0px rgba(50, 44, 47, 0.4);
|
|
147
|
-
|
|
148
|
-
--shadow-center-dark-4: 0px 0px 4px 0px rgba(50, 44, 47, 0.4);
|
|
149
|
-
|
|
150
|
-
--shadow-center-dark-8: 0px 0px 8px 0px rgba(50, 44, 47, 0.4);
|
|
151
|
-
|
|
152
|
-
--shadow-center-dark-16: 0px 0px 16px 0px rgba(50, 44, 47, 0.4);
|
|
153
|
-
|
|
154
|
-
--shadow-center-dark-24: 0px 0px 24px 0px rgba(50, 44, 47, 0.4);
|
|
155
|
-
|
|
156
|
-
--shadow-center-dark-32: 0px 0px 32px 0px rgba(50, 44, 47, 0.4);
|
|
157
|
-
}
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
// Rolster Technology Sizings Foundations
|
|
2
|
-
// v2.0.0
|
|
3
|
-
// @license MIT
|
|
4
|
-
// Author: Rolster Developers
|
|
5
|
-
// Created: 20/Mar/2018
|
|
6
|
-
// Updated: 27/Ene/2024
|
|
7
|
-
|
|
8
|
-
:root {
|
|
9
|
-
--sizing-x1: 1rem;
|
|
10
|
-
|
|
11
|
-
--sizing-x2: 2rem;
|
|
12
|
-
|
|
13
|
-
--sizing-x3: 3rem;
|
|
14
|
-
|
|
15
|
-
--sizing-x4: 4rem;
|
|
16
|
-
|
|
17
|
-
--sizing-x6: 6rem;
|
|
18
|
-
|
|
19
|
-
--sizing-x8: 8rem;
|
|
20
|
-
|
|
21
|
-
--sizing-x10: 10rem;
|
|
22
|
-
|
|
23
|
-
--sizing-x12: 12rem;
|
|
24
|
-
|
|
25
|
-
--sizing-x14: 14rem;
|
|
26
|
-
|
|
27
|
-
--sizing-x16: 16rem;
|
|
28
|
-
|
|
29
|
-
--sizing-x18: 18rem;
|
|
30
|
-
|
|
31
|
-
--sizing-x20: 20rem;
|
|
32
|
-
|
|
33
|
-
--sizing-x22: 22rem;
|
|
34
|
-
|
|
35
|
-
--sizing-x24: 24rem;
|
|
36
|
-
|
|
37
|
-
--sizing-x26: 26rem;
|
|
38
|
-
|
|
39
|
-
--sizing-x28: 28rem;
|
|
40
|
-
|
|
41
|
-
--sizing-x30: 30rem;
|
|
42
|
-
|
|
43
|
-
--sizing-x32: 32rem;
|
|
44
|
-
|
|
45
|
-
--border-1: 1px;
|
|
46
|
-
|
|
47
|
-
--border-2: 2px;
|
|
48
|
-
|
|
49
|
-
--border-4: 4px;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
@supports (padding-top: constant(safe-area-inset-top)) {
|
|
53
|
-
:root {
|
|
54
|
-
--sizing-safe-top: constant(safe-area-inset-top);
|
|
55
|
-
|
|
56
|
-
--sizing-safe-right: constant(safe-area-inset-right);
|
|
57
|
-
|
|
58
|
-
--sizing-safe-bottom: constant(safe-area-inset-bottom);
|
|
59
|
-
|
|
60
|
-
--sizing-safe-left: constant(safe-area-inset-left);
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
@supports (padding-top: env(safe-area-inset-top)) {
|
|
65
|
-
:root {
|
|
66
|
-
--sizing-safe-top: env(safe-area-inset-top);
|
|
67
|
-
|
|
68
|
-
--sizing-safe-right: env(safe-area-inset-right);
|
|
69
|
-
|
|
70
|
-
--sizing-safe-bottom: env(safe-area-inset-bottom);
|
|
71
|
-
|
|
72
|
-
--sizing-safe-left: env(safe-area-inset-left);
|
|
73
|
-
}
|
|
74
|
-
}
|
|
@@ -1,160 +0,0 @@
|
|
|
1
|
-
// Rolster Technology Themes Foundations
|
|
2
|
-
// v2.2.0
|
|
3
|
-
// @license MIT
|
|
4
|
-
// Author: Rolster Developers
|
|
5
|
-
// Created: 03/Mar/2022
|
|
6
|
-
// Updated: 06/Abr/2024
|
|
7
|
-
|
|
8
|
-
@mixin border-theme-color($name, $token) {
|
|
9
|
-
--border-1-theme-#{$token}: var(--border-1) solid
|
|
10
|
-
var(--border-#{$name}-#{$token});
|
|
11
|
-
|
|
12
|
-
--border-2-theme-#{$token}: var(--border-2) solid
|
|
13
|
-
var(--border-#{$name}-#{$token});
|
|
14
|
-
|
|
15
|
-
--border-4-theme-#{$token}: var(--border-4) solid
|
|
16
|
-
var(--border-#{$name}-#{$token});
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
@mixin shadow-position-theme($position, $theme) {
|
|
20
|
-
--shadow-#{$position}-theme-2: var(--shadow-#{$position}-#{$theme}-2);
|
|
21
|
-
|
|
22
|
-
--shadow-#{$position}-theme-4: var(--shadow-#{$position}-#{$theme}-4);
|
|
23
|
-
|
|
24
|
-
--shadow-#{$position}-theme-8: var(--shadow-#{$position}-#{$theme}-8);
|
|
25
|
-
|
|
26
|
-
--shadow-#{$position}-theme-16: var(--shadow-#{$position}-#{$theme}-16);
|
|
27
|
-
|
|
28
|
-
--shadow-#{$position}-theme-24: var(--shadow-#{$position}-#{$theme}-24);
|
|
29
|
-
|
|
30
|
-
--shadow-#{$position}-theme-32: var(--shadow-#{$position}-#{$theme}-32);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
@mixin border-color($name, $token) {
|
|
34
|
-
--border-1-#{$name}-#{$token}: var(--border-1) solid
|
|
35
|
-
var(--color-#{$name}-#{$token});
|
|
36
|
-
|
|
37
|
-
--border-2-#{$name}-#{$token}: var(--border-2) solid
|
|
38
|
-
var(--color-#{$name}-#{$token});
|
|
39
|
-
|
|
40
|
-
--border-4-#{$name}-#{$token}: var(--border-4) solid
|
|
41
|
-
var(--color-#{$name}-#{$token});
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
@mixin border-rolster-color($name) {
|
|
45
|
-
@include border-color($name, 100);
|
|
46
|
-
@include border-color($name, 300);
|
|
47
|
-
@include border-color($name, 500);
|
|
48
|
-
@include border-color($name, 700);
|
|
49
|
-
@include border-color($name, 900);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
@mixin border-rolster-theme($name, $token) {
|
|
53
|
-
--border-1-rolster-#{$token}: var(--border-1) solid
|
|
54
|
-
var(--color-#{$name}-#{$token});
|
|
55
|
-
|
|
56
|
-
--border-2-rolster-#{$token}: var(--border-2) solid
|
|
57
|
-
var(--color-#{$name}-#{$token});
|
|
58
|
-
|
|
59
|
-
--border-4-rolster-#{$token}: var(--border-4) solid
|
|
60
|
-
var(--color-#{$name}-#{$token});
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
@mixin rolster-theme($name) {
|
|
64
|
-
--color-rolster-900: var(--color-#{$name}-900);
|
|
65
|
-
|
|
66
|
-
--color-rolster-700: var(--color-#{$name}-700);
|
|
67
|
-
|
|
68
|
-
--color-rolster-500: var(--color-#{$name}-500);
|
|
69
|
-
|
|
70
|
-
--color-rolster-300: var(--color-#{$name}-300);
|
|
71
|
-
|
|
72
|
-
--color-rolster-100: var(--color-#{$name}-100);
|
|
73
|
-
|
|
74
|
-
--skeleton-rolster-500: var(--skeleton-#{$name}-500);
|
|
75
|
-
|
|
76
|
-
--skeleton-rolster-300: var(--skeleton-#{$name}-300);
|
|
77
|
-
|
|
78
|
-
--skeleton-rolster-100: var(--skeleton-#{$name}-100);
|
|
79
|
-
|
|
80
|
-
--box-shadow-rolster-500: var(--box-shadow-#{$name}-500);
|
|
81
|
-
|
|
82
|
-
--backdrop-rolster-500: var(--backdrop-#{$name}-500);
|
|
83
|
-
|
|
84
|
-
--gradient-rolster-500: var(--gradient-#{$name}-500);
|
|
85
|
-
|
|
86
|
-
@include border-rolster-theme($name, 900);
|
|
87
|
-
@include border-rolster-theme($name, 700);
|
|
88
|
-
@include border-rolster-theme($name, 500);
|
|
89
|
-
@include border-rolster-theme($name, 300);
|
|
90
|
-
@include border-rolster-theme($name, 100);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
:root {
|
|
94
|
-
--background-theme-500: var(--background-light-500);
|
|
95
|
-
|
|
96
|
-
--background-theme-300: var(--background-light-300);
|
|
97
|
-
|
|
98
|
-
--background-theme-100: var(--background-light-100);
|
|
99
|
-
|
|
100
|
-
--color-theme-500: var(--color-dark-500);
|
|
101
|
-
|
|
102
|
-
--color-theme-300: var(--color-dark-300);
|
|
103
|
-
|
|
104
|
-
--color-theme-100: var(--color-dark-100);
|
|
105
|
-
|
|
106
|
-
--border-theme-500: var(--border-dark-500);
|
|
107
|
-
|
|
108
|
-
--border-theme-300: var(--border-dark-300);
|
|
109
|
-
|
|
110
|
-
--border-theme-100: var(--border-dark-100);
|
|
111
|
-
|
|
112
|
-
@include border-theme-color('dark', 500);
|
|
113
|
-
@include border-theme-color('dark', 300);
|
|
114
|
-
@include border-theme-color('dark', 100);
|
|
115
|
-
|
|
116
|
-
@include shadow-position-theme('bottom', 'light');
|
|
117
|
-
@include shadow-position-theme('top', 'light');
|
|
118
|
-
@include shadow-position-theme('right', 'light');
|
|
119
|
-
@include shadow-position-theme('left', 'light');
|
|
120
|
-
@include shadow-position-theme('center', 'light');
|
|
121
|
-
|
|
122
|
-
@include border-rolster-color('primary');
|
|
123
|
-
@include border-rolster-color('success');
|
|
124
|
-
@include border-rolster-color('info');
|
|
125
|
-
@include border-rolster-color('warning');
|
|
126
|
-
@include border-rolster-color('happy');
|
|
127
|
-
@include border-rolster-color('danger');
|
|
128
|
-
@include border-rolster-color('coffee');
|
|
129
|
-
@include border-rolster-color('obsidian');
|
|
130
|
-
|
|
131
|
-
@include rolster-theme('primary');
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
*[rls-theme='success'] {
|
|
135
|
-
@include rolster-theme('success');
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
*[rls-theme='info'] {
|
|
139
|
-
@include rolster-theme('info');
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
*[rls-theme='happy'] {
|
|
143
|
-
@include rolster-theme('happy');
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
*[rls-theme='warning'] {
|
|
147
|
-
@include rolster-theme('warning');
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
*[rls-theme='danger'] {
|
|
151
|
-
@include rolster-theme('danger');
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
*[rls-theme='coffee'] {
|
|
155
|
-
@include rolster-theme('coffee');
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
*[rls-theme='obsidian'] {
|
|
159
|
-
@include rolster-theme('obsidian');
|
|
160
|
-
}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
// Rolster Technology Typographics Foundations
|
|
2
|
-
// v1.0.0
|
|
3
|
-
// @license MIT
|
|
4
|
-
// Author: Rolster Developers
|
|
5
|
-
// Created: 20/Mar/2018
|
|
6
|
-
// Updated: 13/Abr/2023
|
|
7
|
-
|
|
8
|
-
:root {
|
|
9
|
-
--font-weight-thin: 100;
|
|
10
|
-
|
|
11
|
-
--font-weight-extra-light: 200;
|
|
12
|
-
|
|
13
|
-
--font-weight-light: 300;
|
|
14
|
-
|
|
15
|
-
--font-weight-regular: 400;
|
|
16
|
-
|
|
17
|
-
--font-weight-medium: 500;
|
|
18
|
-
|
|
19
|
-
--font-weight-semibold: 600;
|
|
20
|
-
|
|
21
|
-
--font-weight-bold: 700;
|
|
22
|
-
|
|
23
|
-
--font-weight-extrabold: 800;
|
|
24
|
-
|
|
25
|
-
--font-weight-black: 900;
|
|
26
|
-
}
|