@rolster/styles-foundations 1.1.14 → 2.0.1
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 +1695 -1473
- package/dist/rolster-styles.min.css +1 -1
- package/dist/rolster-styles.rtl.css +1695 -1473
- package/dist/rolster-styles.rtl.min.css +1 -1
- package/package.json +1 -1
- package/readme.md +1 -1
- package/scss/_rolster-components.scss +63 -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 +32 -31
- 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 +268 -0
- package/scss/foundations/_elevations.foundation.scss +157 -0
- package/scss/foundations/_sizings.foundation.scss +74 -0
- package/scss/foundations/_themes.foundation.scss +160 -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} +8 -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
|
-
}
|