@rolster/styles-foundations 1.0.1 → 1.0.5

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.
Files changed (60) hide show
  1. package/dist/rolster-styles.css +2257 -814
  2. package/dist/rolster-styles.min.css +1 -1
  3. package/dist/rolster-styles.rtl.css +2257 -814
  4. package/dist/rolster-styles.rtl.min.css +1 -1
  5. package/package.json +33 -33
  6. package/readme.md +13 -13
  7. package/scss/_rolster-components.scss +63 -9
  8. package/scss/_rolster-foundations.scss +13 -13
  9. package/scss/_rolster-styles.scss +10 -10
  10. package/scss/_rolster-utilities.scss +14 -13
  11. package/scss/components/_app.scss +11 -10
  12. package/scss/components/_box-field.scss +30 -35
  13. package/scss/components/_data-table.scss +263 -0
  14. package/scss/components/_form.scss +30 -0
  15. package/scss/components/_list-field.scss +253 -0
  16. package/scss/foundations/_themes-foundations.scss +122 -103
  17. package/scss/utilities/_colors-utilities.scss +54 -54
  18. package/scss/utilities/_helpers-utilities.scss +124 -0
  19. package/scss/utilities/_layout-utilities.scss +314 -314
  20. package/scss/utilities/_normalize-utilities.scss +2 -2
  21. package/scss/utilities/_themes-utilities.scss +42 -42
  22. package/scss/utilities/_typographics-utilities.scss +88 -359
  23. package/fonts/fabric/_fabric.-settings.scss +0 -66
  24. package/fonts/fabric/_fabric.scss +0 -69
  25. package/fonts/fabric/fabric-bold.otf +0 -0
  26. package/fonts/fabric/fabric-light.otf +0 -0
  27. package/fonts/fabric/fabric-regular.otf +0 -0
  28. package/fonts/fabric/fabric-semibold.otf +0 -0
  29. package/fonts/fabric/fabric.css +0 -122
  30. package/fonts/mona-sans/_mona-sans-settings.scss +0 -62
  31. package/fonts/mona-sans/_mona-sans.scss +0 -69
  32. package/fonts/mona-sans/mona-sans-bold.woff +0 -0
  33. package/fonts/mona-sans/mona-sans-light.woff +0 -0
  34. package/fonts/mona-sans/mona-sans-medium.woff +0 -0
  35. package/fonts/mona-sans/mona-sans-regular.woff +0 -0
  36. package/fonts/mona-sans/mona-sans-semibold.woff +0 -0
  37. package/fonts/mona-sans/mona-sans.css +0 -118
  38. package/fonts/poppins/_poppins-settings.scss +0 -62
  39. package/fonts/poppins/_poppins.scss +0 -69
  40. package/fonts/poppins/poppins-bold.woff2 +0 -0
  41. package/fonts/poppins/poppins-light.woff2 +0 -0
  42. package/fonts/poppins/poppins-medium.woff2 +0 -0
  43. package/fonts/poppins/poppins-regular.woff2 +0 -0
  44. package/fonts/poppins/poppins-semibold.woff2 +0 -0
  45. package/fonts/poppins/poppins.css +0 -118
  46. package/fonts/space-grotesk/_space-grotesk-settings.scss +0 -62
  47. package/fonts/space-grotesk/_space-grotesk.scss +0 -69
  48. package/fonts/space-grotesk/space-grotesk-bold.woff +0 -0
  49. package/fonts/space-grotesk/space-grotesk-light.woff +0 -0
  50. package/fonts/space-grotesk/space-grotesk-medium.woff +0 -0
  51. package/fonts/space-grotesk/space-grotesk-regular.woff +0 -0
  52. package/fonts/space-grotesk/space-grotesk-semibold.woff +0 -0
  53. package/fonts/space-grotesk/space-grotesk.css +0 -118
  54. package/icons/_rolster-settings.scss +0 -763
  55. package/icons/_rolster.scss +0 -18
  56. package/icons/rolster-icons.eot +0 -0
  57. package/icons/rolster-icons.svg +0 -258
  58. package/icons/rolster-icons.ttf +0 -0
  59. package/icons/rolster-icons.woff +0 -0
  60. package/icons/rolster.css +0 -768
package/scss/utilities/_layout-utilities.scss CHANGED
@@ -1,314 +1,314 @@
1
- // Rolster Technology Layout Utilities
2
- // v1.0.0
3
- // @license MIT
4
- // Author: Rolster Developers
5
- // Created: 11/Abr/2023
6
- // Updated: 13/Abr/2023
7
-
8
- :root {
9
- --flex-grid-12-gap: 0rem;
10
- --flex-grid-8-gap: 0rem;
11
- --flex-grid-6-gap: 0rem;
12
- --flex-grid-4-gap: 0rem;
13
-
14
- --flex-grid-12-col-2: 0rem;
15
- --flex-grid-12-col-3: 0rem;
16
- --flex-grid-12-col-4: 0rem;
17
- --flex-grid-12-col-6: 0rem;
18
- --flex-grid-12-col-8: 0rem;
19
-
20
- --flex-grid-8-col-2: 0rem;
21
- --flex-grid-8-col-3: 0rem;
22
- --flex-grid-8-col-4: 0rem;
23
- --flex-grid-8-col-6: 0rem;
24
-
25
- --flex-grid-6-col-2: 0rem;
26
- --flex-grid-6-col-3: 0rem;
27
- --flex-grid-6-col-4: 0rem;
28
-
29
- --flex-grid-4-col-2: 0rem;
30
- --flex-grid-4-col-3: 0rem;
31
- }
32
-
33
- @mixin grid-responsive($size) {
34
- .#{$size}-grid-8 {
35
- display: grid;
36
- gap: var(--sizing-8);
37
- }
38
-
39
- .#{$size}-grid-12 {
40
- display: grid;
41
- gap: var(--sizing-12);
42
- }
43
-
44
- .#{$size}-grid-16 {
45
- display: grid;
46
- gap: var(--sizing-16);
47
- }
48
-
49
- .#{$size}-grid-col-12 {
50
- grid-template-columns: repeat(12, 1fr);
51
- }
52
-
53
- .#{$size}-grid-col-8 {
54
- grid-template-columns: repeat(8, 1fr);
55
- }
56
-
57
- .#{$size}-grid-col-6 {
58
- grid-template-columns: repeat(6, 1fr);
59
- }
60
-
61
- .#{$size}-grid-col-4 {
62
- grid-template-columns: repeat(4, 1fr);
63
- }
64
-
65
- .#{$size}-grid-col-2 {
66
- grid-template-columns: repeat(2, 1fr);
67
- }
68
-
69
- .#{$size}-grid-col-1 {
70
- grid-template-columns: repeat(1, 1fr);
71
- }
72
- }
73
-
74
- @include grid-responsive('xs');
75
-
76
- @media screen and (min-width: 360px) {
77
- @include grid-responsive('sm');
78
- }
79
-
80
- @media screen and (min-width: 640px) {
81
- @include grid-responsive('md');
82
- }
83
-
84
- @media screen and (min-width: 960px) {
85
- @include grid-responsive('lg');
86
- }
87
-
88
- @media screen and (min-width: 1280px) {
89
- @include grid-responsive('xl');
90
- }
91
-
92
- @mixin flex-grid-responsive($size) {
93
- .#{$size}-flex-grid-8 {
94
- display: inline-flex;
95
- flex-wrap: wrap;
96
- gap: var(--sizing-8);
97
- --flex-grid-12-gap: 0.4584rem;
98
- --flex-grid-8-gap: 0.4375rem;
99
- --flex-grid-6-gap: 0.417rem;
100
- --flex-grid-4-gap: 0.375rem;
101
-
102
- --flex-grid-12-col-2: 0.425rem;
103
- --flex-grid-12-col-3: 0.3875rem;
104
- --flex-grid-12-col-4: 0.35rem;
105
- --flex-grid-12-col-6: 0.2725rem;
106
- --flex-grid-12-col-8: 0.375rem;
107
-
108
- --flex-grid-8-col-2: 0.3875rem;
109
- --flex-grid-8-col-3: 0.325rem;
110
- --flex-grid-8-col-4: 0.275rem;
111
- --flex-grid-8-col-6: 0.225rem;
112
-
113
- --flex-grid-6-col-2: 0.3525rem;
114
- --flex-grid-6-col-3: 0.275rem;
115
- --flex-grid-6-col-4: 0.2125rem;
116
-
117
- --flex-grid-4-col-2: 0.25rem;
118
- --flex-grid-4-col-3: 0.125rem;
119
- }
120
-
121
- .#{$size}-flex-grid-12 {
122
- display: inline-flex;
123
- flex-wrap: wrap;
124
- gap: var(--sizing-12);
125
-
126
- --flex-grid-12-gap: 0.9140625rem;
127
- --flex-grid-8-gap: 0.875rem;
128
- --flex-grid-6-gap: 0.8309375rem;
129
- --flex-grid-4-gap: 0.75rem;
130
-
131
- --flex-grid-12-col-2: 0.828rem;
132
- --flex-grid-12-col-3: 0.75rem;
133
- --flex-grid-12-col-4: 0.6725rem;
134
- --flex-grid-12-col-6: 0.5125rem;
135
- --flex-grid-12-col-8: 0.375rem;
136
-
137
- --flex-grid-8-col-2: 0.77275rem;
138
- --flex-grid-8-col-3: 0.65rem;
139
- --flex-grid-8-col-4: 0.5rem;
140
- --flex-grid-8-col-6: 0.275rem;
141
-
142
- --flex-grid-6-col-2: 0.675rem;
143
- --flex-grid-6-col-3: 0.5rem;
144
- --flex-grid-6-col-4: 0.355rem;
145
-
146
- --flex-grid-4-col-2: 0.5rem;
147
- --flex-grid-4-col-3: 0.275rem;
148
- }
149
-
150
- .#{$size}-flex-grid-16 {
151
- display: inline-flex;
152
- flex-wrap: wrap;
153
- gap: var(--sizing-16);
154
-
155
- --flex-grid-12-gap: 0.9140625rem;
156
- --flex-grid-8-gap: 0.875rem;
157
- --flex-grid-6-gap: 0.8309375rem;
158
- --flex-grid-4-gap: 0.75rem;
159
-
160
- --flex-grid-12-col-2: 0.8325rem;
161
- --flex-grid-12-col-3: 0.75rem;
162
- --flex-grid-12-col-4: 0.6725rem;
163
- --flex-grid-12-col-6: 0.5125rem;
164
- --flex-grid-12-col-8: 0.375rem;
165
-
166
- --flex-grid-8-col-2: 0.77275rem;
167
- --flex-grid-8-col-3: 0.65rem;
168
- --flex-grid-8-col-4: 0.5rem;
169
- --flex-grid-8-col-6: 0.275rem;
170
-
171
- --flex-grid-6-col-2: 0.675rem;
172
- --flex-grid-6-col-3: 0.5rem;
173
- --flex-grid-6-col-4: 0.355rem;
174
-
175
- --flex-grid-4-col-2: 0.5rem;
176
- --flex-grid-4-col-3: 0.275rem;
177
- }
178
-
179
- .#{$size}-flex-grid-col-4 {
180
- & > * {
181
- width: calc(25% - var(--flex-grid-4-gap));
182
-
183
- &.#{$size}-flex-col-1 {
184
- width: calc(25% - var(--flex-grid-4-gap));
185
- }
186
-
187
- &.#{$size}-flex-col-2 {
188
- width: calc(50% - var(--flex-grid-4-col-2));
189
- }
190
-
191
- &.#{$size}-flex-col-3 {
192
- width: calc(75% - var(--flex-grid-4-col-3));
193
- }
194
-
195
- &.#{$size}-flex-col-4,
196
- &.#{$size}-flex-col-6,
197
- &.#{$size}-flex-col-8,
198
- &.#{$size}-flex-col-12 {
199
- width: 100%;
200
- }
201
- }
202
- }
203
-
204
- .#{$size}-flex-grid-col-6 {
205
- & > * {
206
- width: calc(16.66% - var(--flex-grid-6-gap));
207
-
208
- &.#{$size}-flex-col-1 {
209
- width: calc(16.66% - var(--flex-grid-6-gap));
210
- }
211
-
212
- &.#{$size}-flex-col-2 {
213
- width: calc(33.34% - var(--flex-grid-6-col-2));
214
- }
215
-
216
- &.#{$size}-flex-col-3 {
217
- width: calc(50% - var(--flex-grid-6-col-3));
218
- }
219
-
220
- &.#{$size}-flex-col-4 {
221
- width: calc(66.67% - var(--flex-grid-6-col-4));
222
- }
223
-
224
- &.#{$size}-flex-col-6,
225
- &.#{$size}-flex-col-8,
226
- &.#{$size}-flex-col-12 {
227
- width: 100%;
228
- }
229
- }
230
- }
231
-
232
- .#{$size}-flex-grid-col-8 {
233
- & > * {
234
- width: calc(12.5% - var(--flex-grid-8-gap));
235
-
236
- &.#{$size}-flex-col-1 {
237
- width: calc(12.5% - var(--flex-grid-8-gap));
238
- }
239
-
240
- &.#{$size}-flex-col-2 {
241
- width: calc(25% - var(--flex-grid-8-col-2));
242
- }
243
-
244
- &.#{$size}-flex-col-3 {
245
- width: calc(37.5% - var(--flex-grid-8-col-3));
246
- }
247
-
248
- &.#{$size}-flex-col-4 {
249
- width: calc(50% - var(--flex-grid-8-col-4));
250
- }
251
-
252
- &.#{$size}-flex-col-6 {
253
- width: calc(75% - var(--flex-grid-8-col-6));
254
- }
255
-
256
- &.#{$size}-flex-col-8,
257
- &.#{$size}-flex-col-12 {
258
- width: 100%;
259
- }
260
- }
261
- }
262
-
263
- .#{$size}-flex-grid-col-12 {
264
- & > * {
265
- width: calc(8.33% - var(--flex-grid-12-gap));
266
-
267
- &.#{$size}-flex-col-1 {
268
- width: calc(8.33% - var(--flex-grid-12-gap));
269
- }
270
-
271
- &.#{$size}-flex-col-2 {
272
- width: calc(16.66% - var(--flex-grid-12-col-2));
273
- }
274
-
275
- &.#{$size}-flex-col-3 {
276
- width: calc(25% - var(--flex-grid-12-col-3));
277
- }
278
-
279
- &.#{$size}-flex-col-4 {
280
- width: calc(33.33% - var(--flex-grid-12-col-4));
281
- }
282
-
283
- &.#{$size}-flex-col-6 {
284
- width: calc(50% - var(--flex-grid-12-col-6));
285
- }
286
-
287
- &.#{$size}-flex-col-8 {
288
- width: calc(66.66% - var(--flex-grid-12-col-8));
289
- }
290
-
291
- &.#{$size}-flex-col-12 {
292
- width: 100%;
293
- }
294
- }
295
- }
296
- }
297
-
298
- @include flex-grid-responsive('xs');
299
-
300
- @media screen and (min-width: 360px) {
301
- @include flex-grid-responsive('sm');
302
- }
303
-
304
- @media screen and (min-width: 640px) {
305
- @include flex-grid-responsive('md');
306
- }
307
-
308
- @media screen and (min-width: 960px) {
309
- @include flex-grid-responsive('lg');
310
- }
311
-
312
- @media screen and (min-width: 1280px) {
313
- @include flex-grid-responsive('xl');
314
- }
1
+ // Rolster Technology Layout Utilities
2
+ // v1.0.1
3
+ // @license MIT
4
+ // Author: Rolster Developers
5
+ // Created: 11/Abr/2023
6
+ // Updated: 23/Sep/2023
7
+
8
+ @mixin grid-responsive($size) {
9
+ .#{$size}-grid-8 {
10
+ display: grid;
11
+ gap: var(--sizing-8);
12
+ }
13
+
14
+ .#{$size}-grid-12 {
15
+ display: grid;
16
+ gap: var(--sizing-12);
17
+ }
18
+
19
+ .#{$size}-grid-16 {
20
+ display: grid;
21
+ gap: var(--sizing-16);
22
+ }
23
+
24
+ .#{$size}-grid-col-12 {
25
+ grid-template-columns: repeat(12, 1fr);
26
+ }
27
+
28
+ .#{$size}-grid-col-8 {
29
+ grid-template-columns: repeat(8, 1fr);
30
+ }
31
+
32
+ .#{$size}-grid-col-6 {
33
+ grid-template-columns: repeat(6, 1fr);
34
+ }
35
+
36
+ .#{$size}-grid-col-4 {
37
+ grid-template-columns: repeat(4, 1fr);
38
+ }
39
+
40
+ .#{$size}-grid-col-2 {
41
+ grid-template-columns: repeat(2, 1fr);
42
+ }
43
+
44
+ .#{$size}-grid-col-1 {
45
+ grid-template-columns: repeat(1, 1fr);
46
+ }
47
+ }
48
+
49
+ @mixin flex-grid-responsive($size) {
50
+ .#{$size}-flex-grid-8 {
51
+ display: inline-flex;
52
+ flex-wrap: wrap;
53
+ gap: var(--sizing-8);
54
+ --flex-grid-12-gap: 0.4584rem;
55
+ --flex-grid-8-gap: 0.4375rem;
56
+ --flex-grid-6-gap: 0.417rem;
57
+ --flex-grid-4-gap: 0.375rem;
58
+
59
+ --flex-grid-12-col-2: 0.425rem;
60
+ --flex-grid-12-col-3: 0.3875rem;
61
+ --flex-grid-12-col-4: 0.35rem;
62
+ --flex-grid-12-col-6: 0.2725rem;
63
+ --flex-grid-12-col-8: 0.375rem;
64
+
65
+ --flex-grid-8-col-2: 0.3875rem;
66
+ --flex-grid-8-col-3: 0.325rem;
67
+ --flex-grid-8-col-4: 0.275rem;
68
+ --flex-grid-8-col-6: 0.225rem;
69
+
70
+ --flex-grid-6-col-2: 0.3525rem;
71
+ --flex-grid-6-col-3: 0.275rem;
72
+ --flex-grid-6-col-4: 0.2125rem;
73
+
74
+ --flex-grid-4-col-2: 0.25rem;
75
+ --flex-grid-4-col-3: 0.125rem;
76
+ }
77
+
78
+ .#{$size}-flex-grid-12 {
79
+ display: inline-flex;
80
+ flex-wrap: wrap;
81
+ gap: var(--sizing-12);
82
+
83
+ --flex-grid-12-gap: 0.9140625rem;
84
+ --flex-grid-8-gap: 0.875rem;
85
+ --flex-grid-6-gap: 0.8309375rem;
86
+ --flex-grid-4-gap: 0.75rem;
87
+
88
+ --flex-grid-12-col-2: 0.828rem;
89
+ --flex-grid-12-col-3: 0.75rem;
90
+ --flex-grid-12-col-4: 0.6725rem;
91
+ --flex-grid-12-col-6: 0.5125rem;
92
+ --flex-grid-12-col-8: 0.375rem;
93
+
94
+ --flex-grid-8-col-2: 0.77275rem;
95
+ --flex-grid-8-col-3: 0.65rem;
96
+ --flex-grid-8-col-4: 0.5rem;
97
+ --flex-grid-8-col-6: 0.275rem;
98
+
99
+ --flex-grid-6-col-2: 0.675rem;
100
+ --flex-grid-6-col-3: 0.5rem;
101
+ --flex-grid-6-col-4: 0.355rem;
102
+
103
+ --flex-grid-4-col-2: 0.5rem;
104
+ --flex-grid-4-col-3: 0.275rem;
105
+ }
106
+
107
+ .#{$size}-flex-grid-16 {
108
+ display: inline-flex;
109
+ flex-wrap: wrap;
110
+ gap: var(--sizing-16);
111
+
112
+ --flex-grid-12-gap: 0.9140625rem;
113
+ --flex-grid-8-gap: 0.875rem;
114
+ --flex-grid-6-gap: 0.8309375rem;
115
+ --flex-grid-4-gap: 0.75rem;
116
+
117
+ --flex-grid-12-col-2: 0.8325rem;
118
+ --flex-grid-12-col-3: 0.75rem;
119
+ --flex-grid-12-col-4: 0.6725rem;
120
+ --flex-grid-12-col-6: 0.5125rem;
121
+ --flex-grid-12-col-8: 0.375rem;
122
+
123
+ --flex-grid-8-col-2: 0.77275rem;
124
+ --flex-grid-8-col-3: 0.65rem;
125
+ --flex-grid-8-col-4: 0.5rem;
126
+ --flex-grid-8-col-6: 0.275rem;
127
+
128
+ --flex-grid-6-col-2: 0.675rem;
129
+ --flex-grid-6-col-3: 0.5rem;
130
+ --flex-grid-6-col-4: 0.355rem;
131
+
132
+ --flex-grid-4-col-2: 0.5rem;
133
+ --flex-grid-4-col-3: 0.275rem;
134
+ }
135
+
136
+ .#{$size}-flex-grid-col-4 {
137
+ & > * {
138
+ width: calc(25% - var(--flex-grid-4-gap));
139
+
140
+ &.#{$size}-flex-col-1 {
141
+ width: calc(25% - var(--flex-grid-4-gap));
142
+ }
143
+
144
+ &.#{$size}-flex-col-2 {
145
+ width: calc(50% - var(--flex-grid-4-col-2));
146
+ }
147
+
148
+ &.#{$size}-flex-col-3 {
149
+ width: calc(75% - var(--flex-grid-4-col-3));
150
+ }
151
+
152
+ &.#{$size}-flex-col-4,
153
+ &.#{$size}-flex-col-6,
154
+ &.#{$size}-flex-col-8,
155
+ &.#{$size}-flex-col-12 {
156
+ width: 100%;
157
+ }
158
+ }
159
+ }
160
+
161
+ .#{$size}-flex-grid-col-6 {
162
+ & > * {
163
+ width: calc(16.66% - var(--flex-grid-6-gap));
164
+
165
+ &.#{$size}-flex-col-1 {
166
+ width: calc(16.66% - var(--flex-grid-6-gap));
167
+ }
168
+
169
+ &.#{$size}-flex-col-2 {
170
+ width: calc(33.34% - var(--flex-grid-6-col-2));
171
+ }
172
+
173
+ &.#{$size}-flex-col-3 {
174
+ width: calc(50% - var(--flex-grid-6-col-3));
175
+ }
176
+
177
+ &.#{$size}-flex-col-4 {
178
+ width: calc(66.67% - var(--flex-grid-6-col-4));
179
+ }
180
+
181
+ &.#{$size}-flex-col-6,
182
+ &.#{$size}-flex-col-8,
183
+ &.#{$size}-flex-col-12 {
184
+ width: 100%;
185
+ }
186
+ }
187
+ }
188
+
189
+ .#{$size}-flex-grid-col-8 {
190
+ & > * {
191
+ width: calc(12.5% - var(--flex-grid-8-gap));
192
+
193
+ &.#{$size}-flex-col-1 {
194
+ width: calc(12.5% - var(--flex-grid-8-gap));
195
+ }
196
+
197
+ &.#{$size}-flex-col-2 {
198
+ width: calc(25% - var(--flex-grid-8-col-2));
199
+ }
200
+
201
+ &.#{$size}-flex-col-3 {
202
+ width: calc(37.5% - var(--flex-grid-8-col-3));
203
+ }
204
+
205
+ &.#{$size}-flex-col-4 {
206
+ width: calc(50% - var(--flex-grid-8-col-4));
207
+ }
208
+
209
+ &.#{$size}-flex-col-6 {
210
+ width: calc(75% - var(--flex-grid-8-col-6));
211
+ }
212
+
213
+ &.#{$size}-flex-col-8,
214
+ &.#{$size}-flex-col-12 {
215
+ width: 100%;
216
+ }
217
+ }
218
+ }
219
+
220
+ .#{$size}-flex-grid-col-12 {
221
+ & > * {
222
+ width: calc(8.33% - var(--flex-grid-12-gap));
223
+
224
+ &.#{$size}-flex-col-1 {
225
+ width: calc(8.33% - var(--flex-grid-12-gap));
226
+ }
227
+
228
+ &.#{$size}-flex-col-2 {
229
+ width: calc(16.66% - var(--flex-grid-12-col-2));
230
+ }
231
+
232
+ &.#{$size}-flex-col-3 {
233
+ width: calc(25% - var(--flex-grid-12-col-3));
234
+ }
235
+
236
+ &.#{$size}-flex-col-4 {
237
+ width: calc(33.33% - var(--flex-grid-12-col-4));
238
+ }
239
+
240
+ &.#{$size}-flex-col-6 {
241
+ width: calc(50% - var(--flex-grid-12-col-6));
242
+ }
243
+
244
+ &.#{$size}-flex-col-8 {
245
+ width: calc(66.66% - var(--flex-grid-12-col-8));
246
+ }
247
+
248
+ &.#{$size}-flex-col-12 {
249
+ width: 100%;
250
+ }
251
+ }
252
+ }
253
+ }
254
+
255
+ :root {
256
+ --flex-grid-12-gap: 0rem;
257
+ --flex-grid-8-gap: 0rem;
258
+ --flex-grid-6-gap: 0rem;
259
+ --flex-grid-4-gap: 0rem;
260
+
261
+ --flex-grid-12-col-2: 0rem;
262
+ --flex-grid-12-col-3: 0rem;
263
+ --flex-grid-12-col-4: 0rem;
264
+ --flex-grid-12-col-6: 0rem;
265
+ --flex-grid-12-col-8: 0rem;
266
+
267
+ --flex-grid-8-col-2: 0rem;
268
+ --flex-grid-8-col-3: 0rem;
269
+ --flex-grid-8-col-4: 0rem;
270
+ --flex-grid-8-col-6: 0rem;
271
+
272
+ --flex-grid-6-col-2: 0rem;
273
+ --flex-grid-6-col-3: 0rem;
274
+ --flex-grid-6-col-4: 0rem;
275
+
276
+ --flex-grid-4-col-2: 0rem;
277
+ --flex-grid-4-col-3: 0rem;
278
+ }
279
+
280
+ @include grid-responsive('xs');
281
+
282
+ @media screen and (min-width: 360px) {
283
+ @include grid-responsive('sm');
284
+ }
285
+
286
+ @media screen and (min-width: 640px) {
287
+ @include grid-responsive('md');
288
+ }
289
+
290
+ @media screen and (min-width: 960px) {
291
+ @include grid-responsive('lg');
292
+ }
293
+
294
+ @media screen and (min-width: 1280px) {
295
+ @include grid-responsive('xl');
296
+ }
297
+
298
+ @include flex-grid-responsive('xs');
299
+
300
+ @media screen and (min-width: 360px) {
301
+ @include flex-grid-responsive('sm');
302
+ }
303
+
304
+ @media screen and (min-width: 640px) {
305
+ @include flex-grid-responsive('md');
306
+ }
307
+
308
+ @media screen and (min-width: 960px) {
309
+ @include flex-grid-responsive('lg');
310
+ }
311
+
312
+ @media screen and (min-width: 1280px) {
313
+ @include flex-grid-responsive('xl');
314
+ }
package/scss/utilities/_normalize-utilities.scss CHANGED
@@ -6,8 +6,8 @@
6
6
  // Updated: 11/Ago/2022
7
7
 
8
8
  :root {
9
- --rolster-font-family: -rolster-system-font, -apple-system,
10
- BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica;
9
+ --rolster-font-family: -rolster-system-font, -apple-system, BlinkMacSystemFont,
10
+ 'Segoe UI', Roboto, Helvetica;
11
11
  }
12
12
 
13
13
  html {