@rolster/styles-foundations 2.7.0 → 2.7.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.
Files changed (15) hide show
  1. package/LICENSE +21 -21
  2. package/dist/styles.css +1931 -842
  3. package/dist/styles.css.map +1 -1
  4. package/dist/styles.min.css +1 -1
  5. package/dist/styles.rtl.css +1931 -842
  6. package/dist/styles.rtl.min.css +1 -1
  7. package/package.json +2 -2
  8. package/scss/components/app.scss +3 -3
  9. package/scss/foundations/borders.scss +14 -14
  10. package/scss/foundations/elevations.scss +4 -2
  11. package/scss/foundations/flex-boxs.scss +96 -96
  12. package/scss/foundations/helpers.scss +123 -115
  13. package/scss/utilities/helpers.scss +124 -124
  14. package/scss/utilities/layout.scss +67 -288
  15. package/scss/utilities/typographics.scss +4 -3
package/scss/utilities/helpers.scss CHANGED
@@ -1,124 +1,124 @@
1
- // Rolster Technology Helpers Utilities
2
- // v2.0.0
3
- // @license MIT
4
- // Author: Rolster Developers
5
- // Created: 23/Sep/2023
6
- // Updated: 26/May/2024
7
-
8
- @mixin padding($size) {
9
- .rls-pdg-top-#{$size} {
10
- padding-top: var(--rls-sizing-#{$size});
11
- }
12
-
13
- .rls-pdg-rgt-#{$size} {
14
- padding-right: var(--rls-sizing-#{$size});
15
- }
16
-
17
- .rls-pdg-bot-#{$size} {
18
- padding-bottom: var(--rls-sizing-#{$size});
19
- }
20
-
21
- .rls-pdg-lft-#{$size} {
22
- padding-left: var(--rls-sizing-#{$size});
23
- }
24
-
25
- .rls-pdg-hrz-#{$size} {
26
- padding: 0rem var(--rls-sizing-#{$size});
27
- }
28
-
29
- .rls-pdg-vrt-#{$size} {
30
- padding: var(--rls-sizing-#{$size}) 0rem;
31
- }
32
-
33
- .rls-pdg-#{$size} {
34
- padding: var(--rls-sizing-#{$size});
35
- }
36
- }
37
-
38
- @mixin padding-box-sizing($size) {
39
- .rls-pdx-top-#{$size} {
40
- padding-top: var(--rls-sizing-#{$size});
41
- box-sizing: border-box;
42
- }
43
-
44
- .rls-pdx-rgt-#{$size} {
45
- padding-right: var(--rls-sizing-#{$size});
46
- box-sizing: border-box;
47
- }
48
-
49
- .rls-pdx-bot-#{$size} {
50
- padding-bottom: var(--rls-sizing-#{$size});
51
- box-sizing: border-box;
52
- }
53
-
54
- .rls-pdx-lft-#{$size} {
55
- padding-left: var(--rls-sizing-#{$size});
56
- box-sizing: border-box;
57
- }
58
-
59
- .rls-pdx-hrz-#{$size} {
60
- padding: 0rem var(--rls-sizing-#{$size});
61
- box-sizing: border-box;
62
- }
63
-
64
- .rls-pdx-vrt-#{$size} {
65
- padding: var(--rls-sizing-#{$size}) 0rem;
66
- box-sizing: border-box;
67
- }
68
-
69
- .rls-pdx-#{$size} {
70
- padding: var(--rls-sizing-#{$size});
71
- box-sizing: border-box;
72
- }
73
- }
74
-
75
- @mixin margin($size) {
76
- .rls-mrg-top-#{$size} {
77
- margin-top: var(--rls-sizing-#{$size});
78
- }
79
-
80
- .rls-mrg-rgt-#{$size} {
81
- margin-right: var(--rls-sizing-#{$size});
82
- }
83
-
84
- .rls-mrg-bot-#{$size} {
85
- margin-bottom: var(--rls-sizing-#{$size});
86
- }
87
-
88
- .rls-mrg-lft-#{$size} {
89
- margin-left: var(--rls-sizing-#{$size});
90
- }
91
-
92
- .rls-mrg-hrz-#{$size} {
93
- margin: 0rem var(--rls-sizing-#{$size});
94
- }
95
-
96
- .rls-mrg-vrt-#{$size} {
97
- margin: var(--rls-sizing-#{$size}) 0rem;
98
- }
99
-
100
- .rls-mrg-#{$size} {
101
- margin: var(--rls-sizing-#{$size});
102
- }
103
- }
104
-
105
- @include padding('x4');
106
- @include padding('x8');
107
- @include padding('x12');
108
- @include padding('x16');
109
- @include padding('x24');
110
- @include padding('x36');
111
-
112
- @include padding-box-sizing('x4');
113
- @include padding-box-sizing('x8');
114
- @include padding-box-sizing('x12');
115
- @include padding-box-sizing('x16');
116
- @include padding-box-sizing('x24');
117
- @include padding-box-sizing('x36');
118
-
119
- @include margin('x4');
120
- @include margin('x8');
121
- @include margin('x12');
122
- @include margin('x16');
123
- @include margin('x24');
124
- @include margin('x36');
1
+ // Rolster Technology Helpers Utilities
2
+ // v2.0.0
3
+ // @license MIT
4
+ // Author: Rolster Developers
5
+ // Created: 23/Sep/2023
6
+ // Updated: 26/May/2024
7
+
8
+ @mixin padding($size) {
9
+ .rls-pdg-top-#{$size} {
10
+ padding-top: var(--rls-sizing-#{$size});
11
+ }
12
+
13
+ .rls-pdg-rgt-#{$size} {
14
+ padding-right: var(--rls-sizing-#{$size});
15
+ }
16
+
17
+ .rls-pdg-bot-#{$size} {
18
+ padding-bottom: var(--rls-sizing-#{$size});
19
+ }
20
+
21
+ .rls-pdg-lft-#{$size} {
22
+ padding-left: var(--rls-sizing-#{$size});
23
+ }
24
+
25
+ .rls-pdg-hrz-#{$size} {
26
+ padding: 0rem var(--rls-sizing-#{$size});
27
+ }
28
+
29
+ .rls-pdg-vrt-#{$size} {
30
+ padding: var(--rls-sizing-#{$size}) 0rem;
31
+ }
32
+
33
+ .rls-pdg-#{$size} {
34
+ padding: var(--rls-sizing-#{$size});
35
+ }
36
+ }
37
+
38
+ @mixin padding-box-sizing($size) {
39
+ .rls-pdx-top-#{$size} {
40
+ padding-top: var(--rls-sizing-#{$size});
41
+ box-sizing: border-box;
42
+ }
43
+
44
+ .rls-pdx-rgt-#{$size} {
45
+ padding-right: var(--rls-sizing-#{$size});
46
+ box-sizing: border-box;
47
+ }
48
+
49
+ .rls-pdx-bot-#{$size} {
50
+ padding-bottom: var(--rls-sizing-#{$size});
51
+ box-sizing: border-box;
52
+ }
53
+
54
+ .rls-pdx-lft-#{$size} {
55
+ padding-left: var(--rls-sizing-#{$size});
56
+ box-sizing: border-box;
57
+ }
58
+
59
+ .rls-pdx-hrz-#{$size} {
60
+ padding: 0rem var(--rls-sizing-#{$size});
61
+ box-sizing: border-box;
62
+ }
63
+
64
+ .rls-pdx-vrt-#{$size} {
65
+ padding: var(--rls-sizing-#{$size}) 0rem;
66
+ box-sizing: border-box;
67
+ }
68
+
69
+ .rls-pdx-#{$size} {
70
+ padding: var(--rls-sizing-#{$size});
71
+ box-sizing: border-box;
72
+ }
73
+ }
74
+
75
+ @mixin margin($size) {
76
+ .rls-mrg-top-#{$size} {
77
+ margin-top: var(--rls-sizing-#{$size});
78
+ }
79
+
80
+ .rls-mrg-rgt-#{$size} {
81
+ margin-right: var(--rls-sizing-#{$size});
82
+ }
83
+
84
+ .rls-mrg-bot-#{$size} {
85
+ margin-bottom: var(--rls-sizing-#{$size});
86
+ }
87
+
88
+ .rls-mrg-lft-#{$size} {
89
+ margin-left: var(--rls-sizing-#{$size});
90
+ }
91
+
92
+ .rls-mrg-hrz-#{$size} {
93
+ margin: 0rem var(--rls-sizing-#{$size});
94
+ }
95
+
96
+ .rls-mrg-vrt-#{$size} {
97
+ margin: var(--rls-sizing-#{$size}) 0rem;
98
+ }
99
+
100
+ .rls-mrg-#{$size} {
101
+ margin: var(--rls-sizing-#{$size});
102
+ }
103
+ }
104
+
105
+ @include padding('x4');
106
+ @include padding('x8');
107
+ @include padding('x12');
108
+ @include padding('x16');
109
+ @include padding('x24');
110
+ @include padding('x36');
111
+
112
+ @include padding-box-sizing('x4');
113
+ @include padding-box-sizing('x8');
114
+ @include padding-box-sizing('x12');
115
+ @include padding-box-sizing('x16');
116
+ @include padding-box-sizing('x24');
117
+ @include padding-box-sizing('x36');
118
+
119
+ @include margin('x4');
120
+ @include margin('x8');
121
+ @include margin('x12');
122
+ @include margin('x16');
123
+ @include margin('x24');
124
+ @include margin('x36');
package/scss/utilities/layout.scss CHANGED
@@ -1,336 +1,115 @@
1
1
  // Rolster Technology Layout Utilities
2
- // v2.1.3
2
+ // v3.0.0
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 11/Abr/2023
6
- // Updated: 04/Dic/2025
6
+ // Updated: 06/Abr/2026
7
7
 
8
- @mixin grid-responsive($size) {
9
- .#{$size}-grid-8 {
10
- display: grid;
11
- gap: var(--rls-sizing-x4);
12
- }
8
+ $rls-grid-col-sizes: 12, 8, 6, 4, 2, 1;
13
9
 
14
- .#{$size}-grid-12 {
15
- display: grid;
16
- gap: var(--rls-sizing-x6);
17
- }
10
+ @mixin grid-base($size) {
11
+ --rls-grid-columns: 12;
18
12
 
19
- .#{$size}-grid-16 {
20
- display: grid;
21
- gap: var(--rls-sizing-x8);
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
- }
13
+ display: grid;
14
+ grid-template-columns: repeat(var(--rls-grid-columns), minmax(0, 1fr));
15
+ width: 100%;
16
+ box-sizing: border-box;
39
17
 
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);
18
+ & > * {
19
+ min-width: 0;
20
+ max-width: 100%;
21
+ box-sizing: border-box;
46
22
  }
47
23
  }
48
24
 
49
- @mixin flex-grid-responsive($size) {
50
- .#{$size}-flex-grid-8 {
51
- --flex-grid-12-gap: 3.6672rem;
52
- --flex-grid-8-gap: 28rem;
53
- --flex-grid-6-gap: 3.336rem;
54
- --flex-grid-4-gap: 3rem;
55
-
56
- --flex-grid-12-col-2: 3.4rem;
57
- --flex-grid-12-col-3: 3.1rem;
58
- --flex-grid-12-col-4: 2.8rem;
59
- --flex-grid-12-col-5: 2.8rem;
60
- --flex-grid-12-col-6: 2.18rem;
61
- --flex-grid-12-col-8: 3rem;
62
-
63
- --flex-grid-8-col-2: 3.1rem;
64
- --flex-grid-8-col-3: 2.6rem;
65
- --flex-grid-8-col-4: 2.2rem;
66
- --flex-grid-8-col-5: 2.2rem;
67
- --flex-grid-8-col-6: 1.8rem;
68
-
69
- --flex-grid-6-col-2: 2.82rem;
70
- --flex-grid-6-col-3: 2.2rem;
71
- --flex-grid-6-col-4: 1.7rem;
72
- --flex-grid-6-col-5: 1.7rem;
73
-
74
- --flex-grid-4-col-2: 2rem;
75
- --flex-grid-4-col-3: 1rem;
76
-
77
- display: inline-flex;
78
- flex-wrap: wrap;
79
- gap: var(--rls-sizing-x4);
25
+ @mixin grid-responsive($size) {
26
+ // CSS Grid — gap variants
27
+ .#{$size}-grid-8,
28
+ .#{$size}-grid-12,
29
+ .#{$size}-grid-16 {
30
+ @include grid-base($size);
80
31
  }
81
32
 
82
- .#{$size}-flex-grid-12 {
83
- --flex-grid-12-gap: 7.3125rem;
84
- --flex-grid-8-gap: 7rem;
85
- --flex-grid-6-gap: 6.6475rem;
86
- --flex-grid-4-gap: 6rem;
87
-
88
- --flex-grid-12-col-2: 6.624rem;
89
- --flex-grid-12-col-3: 6rem;
90
- --flex-grid-12-col-4: 5.38rem;
91
- --flex-grid-12-col-5: 5.38rem;
92
- --flex-grid-12-col-6: 4.1rem;
93
- --flex-grid-12-col-8: 3rem;
94
-
95
- --flex-grid-8-col-2: 6.182rem;
96
- --flex-grid-8-col-3: 5.2rem;
97
- --flex-grid-8-col-4: 4rem;
98
- --flex-grid-8-col-5: 4rem;
99
- --flex-grid-8-col-6: 2.2rem;
100
-
101
- --flex-grid-6-col-2: 5.4rem;
102
- --flex-grid-6-col-3: 4rem;
103
- --flex-grid-6-col-4: 2.84rem;
104
- --flex-grid-6-col-5: 2.84rem;
33
+ .#{$size}-grid-8 { gap: var(--rls-sizing-x4); }
34
+ .#{$size}-grid-12 { gap: var(--rls-sizing-x6); }
35
+ .#{$size}-grid-16 { gap: var(--rls-sizing-x8); }
105
36
 
106
- --flex-grid-4-col-2: 4rem;
107
- --flex-grid-4-col-3: 2.2rem;
108
-
109
- display: inline-flex;
110
- flex-wrap: wrap;
111
- gap: var(--rls-sizing-x6);
37
+ // CSS Grid — column count modifiers
38
+ @each $cols in $rls-grid-col-sizes {
39
+ .#{$size}-grid-col-#{$cols} {
40
+ --rls-grid-columns: #{$cols};
41
+ }
112
42
  }
113
43
 
114
- .#{$size}-flex-grid-16 {
115
- --flex-grid-12-gap: 7.3125rem;
116
- --flex-grid-8-gap: 7rem;
117
- --flex-grid-6-gap: 6.6475rem;
118
- --flex-grid-4-gap: 6rem;
119
-
120
- --flex-grid-12-col-2: 6.66rem;
121
- --flex-grid-12-col-3: 6rem;
122
- --flex-grid-12-col-4: 5.38rem;
123
- --flex-grid-12-col-5: 5.38rem;
124
- --flex-grid-12-col-6: 4.1rem;
125
- --flex-grid-12-col-8: 3rem;
126
-
127
- --flex-grid-8-col-2: 6.182rem;
128
- --flex-grid-8-col-3: 5.2rem;
129
- --flex-grid-8-col-4: 4rem;
130
- --flex-grid-8-col-5: 4rem;
131
- --flex-grid-8-col-6: 2.2rem;
132
-
133
- --flex-grid-6-col-2: 5.4rem;
134
- --flex-grid-6-col-3: 4rem;
135
- --flex-grid-6-col-4: 2.84rem;
136
- --flex-grid-6-col-5: 2.84rem;
137
-
138
- --flex-grid-4-col-2: 4rem;
139
- --flex-grid-4-col-3: 2.2rem;
140
-
141
- display: inline-flex;
142
- flex-wrap: wrap;
143
- gap: var(--rls-sizing-x8);
44
+ // CSS Grid — span classes
45
+ @for $i from 1 through 12 {
46
+ .#{$size}-col-#{$i} {
47
+ grid-column: span #{$i} / span #{$i};
48
+ }
144
49
  }
145
50
 
146
- .#{$size}-flex-grid-col-4 {
147
- & > * {
148
- width: calc(25% - var(--flex-grid-4-gap));
149
-
150
- &.#{$size}-flex-col-1 {
151
- width: calc(25% - var(--flex-grid-4-gap));
152
- }
153
-
154
- &.#{$size}-flex-col-2 {
155
- width: calc(50% - var(--flex-grid-4-col-2));
156
- }
157
-
158
- &.#{$size}-flex-col-3 {
159
- width: calc(75% - var(--flex-grid-4-col-3));
160
- }
161
-
162
- &.#{$size}-flex-col-4,
163
- &.#{$size}-flex-col-6,
164
- &.#{$size}-flex-col-8,
165
- &.#{$size}-flex-col-12 {
166
- width: 100%;
51
+ // CSS Grid — clamp spans exceeding column count
52
+ @each $max in $rls-grid-col-sizes {
53
+ @if $max < 12 {
54
+ @for $col from ($max + 1) through 12 {
55
+ .#{$size}-grid-col-#{$max} > .#{$size}-col-#{$col} {
56
+ grid-column: span #{$max} / span #{$max};
57
+ }
167
58
  }
168
59
  }
169
60
  }
170
61
 
171
- .#{$size}-flex-grid-col-6 {
172
- & > * {
173
- width: calc(16.66% - var(--flex-grid-6-gap));
174
-
175
- &.#{$size}-flex-col-1 {
176
- width: calc(16.66% - var(--flex-grid-6-gap));
177
- }
178
-
179
- &.#{$size}-flex-col-2 {
180
- width: calc(33.34% - var(--flex-grid-6-col-2));
181
- }
182
-
183
- &.#{$size}-flex-col-3 {
184
- width: calc(50% - var(--flex-grid-6-col-3));
185
- }
186
-
187
- &.#{$size}-flex-col-4 {
188
- width: calc(66.67% - var(--flex-grid-6-col-4));
189
- }
62
+ // Flex Grid — gap variants (legacy names preserved)
63
+ .#{$size}-flex-grid-8,
64
+ .#{$size}-flex-grid-12,
65
+ .#{$size}-flex-grid-16 {
66
+ @include grid-base($size);
67
+ }
190
68
 
191
- &.#{$size}-flex-col-5 {
192
- width: calc(83.34% - var(--flex-grid-6-col-5));
193
- }
69
+ .#{$size}-flex-grid-8 { gap: var(--rls-sizing-x4); }
70
+ .#{$size}-flex-grid-12 { gap: var(--rls-sizing-x6); }
71
+ .#{$size}-flex-grid-16 { gap: var(--rls-sizing-x8); }
194
72
 
195
- &.#{$size}-flex-col-6,
196
- &.#{$size}-flex-col-8,
197
- &.#{$size}-flex-col-12 {
198
- width: 100%;
199
- }
73
+ // Flex Grid — column count modifiers
74
+ @each $cols in $rls-grid-col-sizes {
75
+ .#{$size}-flex-grid-col-#{$cols} {
76
+ --rls-grid-columns: #{$cols};
200
77
  }
201
78
  }
202
79
 
203
- .#{$size}-flex-grid-col-8 {
204
- & > * {
205
- width: calc(12.5% - var(--flex-grid-8-gap));
206
-
207
- &.#{$size}-flex-col-1 {
208
- width: calc(12.5% - var(--flex-grid-8-gap));
209
- }
210
-
211
- &.#{$size}-flex-col-2 {
212
- width: calc(25% - var(--flex-grid-8-col-2));
213
- }
214
-
215
- &.#{$size}-flex-col-3 {
216
- width: calc(37.5% - var(--flex-grid-8-col-3));
217
- }
218
-
219
- &.#{$size}-flex-col-4 {
220
- width: calc(50% - var(--flex-grid-8-col-4));
221
- }
222
-
223
- &.#{$size}-flex-col-5 {
224
- width: calc(62.75% - var(--flex-grid-8-col-5));
225
- }
226
-
227
- &.#{$size}-flex-col-6 {
228
- width: calc(75% - var(--flex-grid-8-col-6));
229
- }
230
-
231
- &.#{$size}-flex-col-8,
232
- &.#{$size}-flex-col-12 {
233
- width: 100%;
234
- }
80
+ // Flex Grid — span classes
81
+ @for $i from 1 through 12 {
82
+ .#{$size}-flex-col-#{$i} {
83
+ grid-column: span #{$i} / span #{$i};
235
84
  }
236
85
  }
237
86
 
238
- .#{$size}-flex-grid-col-12 {
239
- & > * {
240
- width: calc(8.33% - var(--flex-grid-12-gap));
241
-
242
- &.#{$size}-flex-col-1 {
243
- width: calc(8.33% - var(--flex-grid-12-gap));
244
- }
245
-
246
- &.#{$size}-flex-col-2 {
247
- width: calc(16.66% - var(--flex-grid-12-col-2));
248
- }
249
-
250
- &.#{$size}-flex-col-3 {
251
- width: calc(25% - var(--flex-grid-12-col-3));
252
- }
253
-
254
- &.#{$size}-flex-col-4 {
255
- width: calc(33.33% - var(--flex-grid-12-col-4));
256
- }
257
-
258
- &.#{$size}-flex-col-5 {
259
- width: calc(41.66% - var(--flex-grid-12-col-5));
260
- }
261
-
262
- &.#{$size}-flex-col-6 {
263
- width: calc(50% - var(--flex-grid-12-col-6));
264
- }
265
-
266
- &.#{$size}-flex-col-8 {
267
- width: calc(66.66% - var(--flex-grid-12-col-8));
268
- }
269
-
270
- &.#{$size}-flex-col-12 {
271
- width: 100%;
87
+ // Flex Grid — clamp spans exceeding column count
88
+ @each $max in $rls-grid-col-sizes {
89
+ @if $max < 12 {
90
+ @for $col from ($max + 1) through 12 {
91
+ .#{$size}-flex-grid-col-#{$max} > .#{$size}-flex-col-#{$col} {
92
+ grid-column: span #{$max} / span #{$max};
93
+ }
272
94
  }
273
95
  }
274
96
  }
275
97
  }
276
98
 
277
- body {
278
- --flex-grid-12-gap: 0rem;
279
- --flex-grid-8-gap: 0rem;
280
- --flex-grid-6-gap: 0rem;
281
- --flex-grid-4-gap: 0rem;
282
-
283
- --flex-grid-12-col-2: 0rem;
284
- --flex-grid-12-col-3: 0rem;
285
- --flex-grid-12-col-4: 0rem;
286
- --flex-grid-12-col-6: 0rem;
287
- --flex-grid-12-col-8: 0rem;
288
-
289
- --flex-grid-8-col-2: 0rem;
290
- --flex-grid-8-col-3: 0rem;
291
- --flex-grid-8-col-4: 0rem;
292
- --flex-grid-8-col-6: 0rem;
293
-
294
- --flex-grid-6-col-2: 0rem;
295
- --flex-grid-6-col-3: 0rem;
296
- --flex-grid-6-col-4: 0rem;
297
-
298
- --flex-grid-4-col-2: 0rem;
299
- --flex-grid-4-col-3: 0rem;
300
- }
301
-
302
99
  @include grid-responsive('xs');
303
100
 
304
- @media screen and (min-width: 360px) {
101
+ @media screen and (min-width: 420px) {
305
102
  @include grid-responsive('sm');
306
103
  }
307
104
 
308
- @media screen and (min-width: 640px) {
105
+ @media screen and (min-width: 720px) {
309
106
  @include grid-responsive('md');
310
107
  }
311
108
 
312
- @media screen and (min-width: 960px) {
109
+ @media screen and (min-width: 1024px) {
313
110
  @include grid-responsive('lg');
314
111
  }
315
112
 
316
- @media screen and (min-width: 1280px) {
113
+ @media screen and (min-width: 1440px) {
317
114
  @include grid-responsive('xl');
318
115
  }
319
-
320
- @include flex-grid-responsive('xs');
321
-
322
- @media screen and (min-width: 360px) {
323
- @include flex-grid-responsive('sm');
324
- }
325
-
326
- @media screen and (min-width: 640px) {
327
- @include flex-grid-responsive('md');
328
- }
329
-
330
- @media screen and (min-width: 960px) {
331
- @include flex-grid-responsive('lg');
332
- }
333
-
334
- @media screen and (min-width: 1280px) {
335
- @include flex-grid-responsive('xl');
336
- }
package/scss/utilities/typographics.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  // Rolster Technology Typographics Utilities
2
- // v2.1.4
2
+ // v2.1.5
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 20/Mar/2018
6
- // Updated: 03/Dic/2025
6
+ // Updated: 09/Abr/2026
7
7
 
8
8
  @mixin typographic($name, $key) {
9
9
  .rls-#{$name}-default {
@@ -176,9 +176,10 @@ button {
176
176
  @include typographic('subtitle', 'subtitle');
177
177
  @include typographic('body', 'body');
178
178
  @include typographic('input', 'input');
179
+ @include typographic('button', 'button');
179
180
  @include typographic('paragraph', 'paragraph');
180
181
  @include typographic('label', 'label');
181
- @include typographic('button', 'button');
182
+ @include typographic('span', 'span');
182
183
  @include typographic('smalltext', 'smalltext');
183
184
  @include typographic('caption', 'caption');
184
185
  @include typographic('overline', 'overline');