@rolster/styles-foundations 1.0.14 → 1.1.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.
Files changed (14) hide show
  1. package/dist/rolster-styles.css +427 -430
  2. package/dist/rolster-styles.min.css +1 -1
  3. package/dist/rolster-styles.rtl.css +427 -430
  4. package/dist/rolster-styles.rtl.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_rolster-components.scss +19 -19
  7. package/scss/components/_app.scss +5 -5
  8. package/scss/components/_box-field.scss +4 -4
  9. package/scss/components/_data-table.scss +37 -37
  10. package/scss/components/_form.scss +4 -4
  11. package/scss/components/_list-field.scss +29 -32
  12. package/scss/foundations/_sizings-foundations.scss +20 -20
  13. package/scss/utilities/_layout-utilities.scss +77 -76
  14. package/scss/utilities/_normalize-utilities.scss +4 -4
package/scss/components/_data-table.scss CHANGED
@@ -6,20 +6,20 @@
6
6
  // Updated: 24/Nov/2023
7
7
 
8
8
  @mixin datatable_cell_control() {
9
- --rls-avatar-border-radius: var(--sizing-6);
10
- --rls-avatar-width: var(--sizing-32);
11
- --rls-avatar-height: var(--sizing-32);
9
+ --rls-avatar-border-radius: var(--sizing-x3);
10
+ --rls-avatar-width: var(--sizing-x16);
11
+ --rls-avatar-height: var(--sizing-x16);
12
12
  --rls-avatar-font-size: var(--rls-datatable-font-size);
13
13
 
14
- --rls-action-ripple-dimension: var(--sizing-32);
15
- --rls-action-ripple-position: -1rem;
14
+ --rls-action-ripple-dimension: var(--sizing-x16);
15
+ --rls-action-ripple-position: -8rem;
16
16
 
17
- --rls-switch-element-size: var(--sizing-20);
18
- --rls-switch-bar-radius: var(--sizing-4);
19
- --rls-switch-bar-height: var(--sizing-8);
17
+ --rls-switch-element-size: var(--sizing-x10);
18
+ --rls-switch-bar-radius: var(--sizing-x2);
19
+ --rls-switch-bar-height: var(--sizing-x4);
20
20
 
21
21
  display: flex;
22
- width: var(--sizing-48);
22
+ width: var(--sizing-x24);
23
23
  padding: 0rem;
24
24
 
25
25
  & > * {
@@ -33,13 +33,13 @@
33
33
 
34
34
  position: relative;
35
35
  width: 100%;
36
- border-radius: var(--sizing-8);
36
+ border-radius: var(--sizing-x4);
37
37
  box-sizing: border-box;
38
38
 
39
39
  & > table {
40
40
  display: flex;
41
41
  flex-direction: column;
42
- row-gap: var(--sizing-8);
42
+ row-gap: var(--sizing-x4);
43
43
  border-spacing: 0;
44
44
  border-collapse: collapse;
45
45
  }
@@ -50,8 +50,8 @@
50
50
 
51
51
  &__header {
52
52
  display: flex;
53
- column-gap: var(--sizing-8);
54
- padding: 0rem var(--sizing-12);
53
+ column-gap: var(--sizing-x4);
54
+ padding: 0rem var(--sizing-x6);
55
55
  box-sizing: border-box;
56
56
  }
57
57
 
@@ -61,8 +61,8 @@
61
61
  text-align: left;
62
62
  overflow: hidden;
63
63
  white-space: nowrap;
64
- height: var(--sizing-40);
65
- line-height: var(--sizing-40);
64
+ height: var(--sizing-x20);
65
+ line-height: var(--sizing-x20);
66
66
  color: var(--color-theme-500);
67
67
  font-size: var(--rls-datatable-font-size);
68
68
  letter-spacing: var(--rls-datatable-letter-spacing);
@@ -86,17 +86,17 @@
86
86
  &__tbody {
87
87
  display: flex;
88
88
  flex-direction: column;
89
- row-gap: var(--sizing-12);
89
+ row-gap: var(--sizing-x6);
90
90
  }
91
91
 
92
92
  &__data {
93
93
  position: relative;
94
94
  display: flex;
95
- column-gap: var(--sizing-8);
96
- padding: 0rem var(--sizing-12);
95
+ column-gap: var(--sizing-x4);
96
+ padding: 0rem var(--sizing-x6);
97
97
  box-sizing: border-box;
98
98
  border: var(--border-1-theme-100);
99
- border-radius: var(--sizing-8);
99
+ border-radius: var(--sizing-x4);
100
100
  background: rgba(252, 252, 252, 1);
101
101
 
102
102
  &--error {
@@ -107,8 +107,8 @@
107
107
  &__cell {
108
108
  position: relative;
109
109
  display: flex;
110
- height: var(--sizing-40);
111
- line-height: var(--sizing-40);
110
+ height: var(--sizing-x20);
111
+ line-height: var(--sizing-x20);
112
112
  text-align: left;
113
113
  cursor: default;
114
114
  overflow: hidden;
@@ -147,7 +147,7 @@
147
147
  box-shadow: none;
148
148
 
149
149
  .rls-input-field {
150
- padding: var(--sizing-8) 0rem !important;
150
+ padding: var(--sizing-x4) 0rem !important;
151
151
  }
152
152
  }
153
153
 
@@ -162,7 +162,7 @@
162
162
 
163
163
  .rls-list-field {
164
164
  .rls-box-field__body {
165
- padding: var(--sizing-8) 0rem;
165
+ padding: var(--sizing-x4) 0rem;
166
166
  border: none;
167
167
  box-shadow: none;
168
168
  }
@@ -174,23 +174,23 @@
174
174
  }
175
175
 
176
176
  &__suggestions {
177
- top: var(--sizing-48);
177
+ top: var(--sizing-x24);
178
178
 
179
179
  &--higher {
180
180
  top: initial;
181
- bottom: var(--sizing-48);
181
+ bottom: var(--sizing-x24);
182
182
  }
183
183
  }
184
184
 
185
185
  &__action {
186
186
  .rls-icon {
187
- font-size: var(--sizing-20);
187
+ font-size: var(--sizing-x10);
188
188
  }
189
189
  }
190
190
  }
191
191
 
192
192
  .rls-input {
193
- margin: var(--sizing-8) 0rem;
193
+ margin: var(--sizing-x4) 0rem;
194
194
  }
195
195
 
196
196
  .rls-amount {
@@ -199,14 +199,14 @@
199
199
 
200
200
  .rls-poster {
201
201
  display: flex;
202
- width: calc(100% - var(--sizing-4));
202
+ width: calc(100% - var(--sizing-x2));
203
203
  height: 100%;
204
- margin: var(--sizing-6) 0rem;
204
+ margin: var(--sizing-x3) 0rem;
205
205
  justify-content: center;
206
206
  align-items: center;
207
207
  overflow: hidden;
208
- height: var(--sizing-28);
209
- line-height: var(--sizing-28);
208
+ height: var(--sizing-x14);
209
+ line-height: var(--sizing-x14);
210
210
  overflow: hidden;
211
211
  text-overflow: ellipsis;
212
212
  white-space: nowrap;
@@ -216,22 +216,22 @@
216
216
 
217
217
  & > .rls-ballot {
218
218
  padding: 0rem;
219
- height: var(--sizing-40);
219
+ height: var(--sizing-x20);
220
220
 
221
221
  .rls-ballot__title {
222
222
  font-weight: var(--font-weight-semibold);
223
223
  font-size: var(--smalltext-font-size);
224
224
  letter-spacing: var(--smalltext-letter-spacing);
225
- min-height: 1rem;
226
- line-height: 1rem;
225
+ min-height: 8rem;
226
+ line-height: 8rem;
227
227
  }
228
228
 
229
229
  .rls-ballot__subtitle {
230
230
  margin-top: 0rem;
231
231
  font-size: var(--overline-font-size);
232
232
  letter-spacing: var(--overline-letter-spacing);
233
- min-height: 1rem;
234
- line-height: 1rem;
233
+ min-height: 8rem;
234
+ line-height: 8rem;
235
235
  }
236
236
  }
237
237
 
@@ -248,6 +248,6 @@
248
248
  width: 100%;
249
249
  overflow: hidden;
250
250
  background: var(--color-theme-100);
251
- border-radius: 0rem 0rem var(--sizing-8) var(--sizing-8);
251
+ border-radius: 0rem 0rem var(--sizing-x4) var(--sizing-x4);
252
252
  }
253
253
  }
package/scss/components/_form.scss CHANGED
@@ -8,11 +8,11 @@
8
8
  .rls-form {
9
9
  display: flex;
10
10
  flex-direction: column;
11
- row-gap: var(--sizing-16);
11
+ row-gap: var(--sizing-x8);
12
12
 
13
13
  &__content {
14
14
  position: relative;
15
- padding: 0rem var(--sizing-16);
15
+ padding: 0rem var(--sizing-x8);
16
16
  box-sizing: border-box;
17
17
  }
18
18
 
@@ -20,8 +20,8 @@
20
20
  position: relative;
21
21
  display: flex;
22
22
  justify-content: var(--rls-form-footer-justify-content);
23
- column-gap: var(--sizing-16);
24
- padding: 0rem var(--sizing-16);
23
+ column-gap: var(--sizing-x8);
24
+ padding: 0rem var(--sizing-x8);
25
25
  box-sizing: border-box;
26
26
  }
27
27
  }
package/scss/components/_list-field.scss CHANGED
@@ -1,12 +1,12 @@
1
1
  // Rolster Technology ListField Component
2
- // v1.0.5
2
+ // v1.0.7
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 20/Mar/2018
6
- // Updated: 15/Nov/2023
6
+ // Updated: 07/Dic/2023
7
7
 
8
8
  .rls-list-field {
9
- --rls-boxfield-body-padding: var(--sizing-6) var(--sizing-8);
9
+ --rls-boxfield-body-padding: var(--sizing-x3) var(--sizing-x4);
10
10
 
11
11
  --pvt-action-font-color: var(--color-theme-300);
12
12
  --pvt-list-height: 0rem;
@@ -18,8 +18,6 @@
18
18
  --pvt-backdrop-bottom: initial;
19
19
 
20
20
  position: relative;
21
- float: left;
22
- width: 100%;
23
21
  box-sizing: border-box;
24
22
 
25
23
  &.rls-box-field--active {
@@ -34,16 +32,15 @@
34
32
 
35
33
  &__control {
36
34
  position: relative;
37
- float: left;
38
- width: calc(100% - var(--sizing-28));
39
- height: var(--sizing-24);
40
- line-height: var(--sizing-24);
35
+ width: calc(100% - var(--sizing-x14));
36
+ height: var(--sizing-x12);
37
+ line-height: var(--sizing-x12);
41
38
  padding: 0rem;
42
39
  cursor: text;
43
40
  border: none;
44
41
  outline: none;
45
- color: var(--rls-input-font-color);
46
42
  background: transparent;
43
+ color: var(--rls-input-font-color);
47
44
  font-size: var(--rls-input-size);
48
45
  font-weight: var(--font-weight-medium);
49
46
  letter-spacing: var(--rls-input-letter-spacing);
@@ -70,24 +67,24 @@
70
67
 
71
68
  &__action {
72
69
  color: var(--pvt-action-font-color);
73
- width: var(--sizing-24);
74
- height: var(--sizing-24);
70
+ width: var(--sizing-x12);
71
+ height: var(--sizing-x12);
75
72
  padding: 0rem;
76
- margin-left: var(--sizing-4);
73
+ margin-left: var(--sizing-x2);
77
74
  outline: none;
78
75
  background: transparent;
79
76
  }
80
77
 
81
78
  &__suggestions {
82
79
  position: absolute;
83
- top: 4.25rem;
80
+ top: calc(100% + var(--sizing-x4));
84
81
  left: 0rem;
85
82
  width: 100%;
86
83
  height: 0rem;
87
84
  max-height: var(--pvt-list-max-height);
88
85
  overflow: hidden;
89
- z-index: var(--z-index-1);
90
- padding-bottom: var(--sizing-12);
86
+ z-index: var(--z-index-2);
87
+ padding-bottom: var(--sizing-x6);
91
88
 
92
89
  &--visible {
93
90
  --pvt-list-height: auto;
@@ -104,7 +101,7 @@
104
101
  --pvt-list-transform-origin: 0% 100%;
105
102
 
106
103
  top: initial;
107
- bottom: var(--sizing-48);
104
+ bottom: 100%;
108
105
  }
109
106
 
110
107
  &__body {
@@ -113,9 +110,9 @@
113
110
  width: 100%;
114
111
  height: var(--pvt-list-height);
115
112
  max-height: var(--pvt-list-max-height);
116
- padding: var(--sizing-8) var(--sizing-4);
113
+ padding: var(--sizing-x4) var(--sizing-x2);
117
114
  box-sizing: border-box;
118
- border-radius: 0.5rem;
115
+ border-radius: 4rem;
119
116
  overflow: hidden;
120
117
  z-index: var(--z-index-2);
121
118
  background: var(--background-theme-500);
@@ -137,7 +134,7 @@
137
134
  width: 100%;
138
135
  overflow-y: auto;
139
136
  overflow-x: hidden;
140
- padding: 0rem var(--sizing-8);
137
+ padding: 0rem var(--sizing-x4);
141
138
  box-sizing: border-box;
142
139
  }
143
140
 
@@ -148,8 +145,8 @@
148
145
 
149
146
  box-sizing: border-box;
150
147
  outline: none;
151
- border-radius: var(--sizing-8);
152
- padding: var(--sizing-4);
148
+ border-radius: var(--sizing-x4);
149
+ padding: var(--sizing-x2);
153
150
  box-sizing: border-box;
154
151
 
155
152
  &:hover {
@@ -163,12 +160,12 @@
163
160
 
164
161
  &__empty {
165
162
  display: flex;
166
- padding: 0rem var(--sizing-8);
163
+ padding: 0rem var(--sizing-x4);
167
164
  box-sizing: border-box;
168
165
 
169
166
  &__avatar {
170
- width: var(--sizing-40);
171
- height: var(--sizing-40);
167
+ width: var(--sizing-x20);
168
+ height: var(--sizing-x20);
172
169
 
173
170
  img {
174
171
  width: 100%;
@@ -178,7 +175,7 @@
178
175
  &__description {
179
176
  display: flex;
180
177
  flex-direction: column;
181
- row-gap: var(--sizing-4);
178
+ row-gap: var(--sizing-x2);
182
179
  overflow: hidden;
183
180
 
184
181
  label {
@@ -202,7 +199,7 @@
202
199
  right: 0rem;
203
200
  bottom: var(--pvt-backdrop-bottom);
204
201
  opacity: var(--pvt-backdrop-opacity);
205
- z-index: var(--z-index-1);
202
+ z-index: var(--z-index-2);
206
203
  will-change: opacity;
207
204
  background: var(--backdrop-rolster-500);
208
205
  backdrop-filter: blur(2px);
@@ -241,8 +238,8 @@
241
238
  width: 100%;
242
239
  max-width: 25rem;
243
240
  max-height: 75%;
244
- padding: var(--sizing-16) var(--sizing-4);
245
- border-radius: var(--sizing-8) var(--sizing-8) 0rem 0rem;
241
+ padding: var(--sizing-x8) var(--sizing-x2);
242
+ border-radius: var(--sizing-x4) var(--sizing-x4) 0rem 0rem;
246
243
  border: none;
247
244
  box-shadow: none;
248
245
  }
@@ -250,14 +247,14 @@
250
247
  &__empty {
251
248
  flex-direction: column;
252
249
  margin: auto;
253
- padding: var(--sizing-24) 0rem;
250
+ padding: var(--sizing-x12) 0rem;
254
251
 
255
252
  &__avatar {
256
253
  width: 100%;
257
254
  height: auto;
258
255
  max-width: 8rem;
259
256
  margin: auto;
260
- padding-bottom: var(--sizing-12);
257
+ padding-bottom: var(--sizing-x6);
261
258
  }
262
259
 
263
260
  &__description {
@@ -266,7 +263,7 @@
266
263
 
267
264
  label {
268
265
  text-align: center;
269
- margin-top: var(--sizing-4);
266
+ margin-top: var(--sizing-x2);
270
267
  }
271
268
  }
272
269
  }
package/scss/foundations/_sizings-foundations.scss CHANGED
@@ -1,46 +1,46 @@
1
1
  // Rolster Technology Sizings Foundations
2
- // v1.0.0
2
+ // v2.0.0
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 20/Mar/2018
6
- // Updated: 11/Abr/2023
6
+ // Updated: 27/Ene/2024
7
7
 
8
8
  :root {
9
- --sizing-2: 0.125rem;
9
+ --sizing-x1: 1rem;
10
10
 
11
- --sizing-4: 0.25rem;
11
+ --sizing-x2: 2rem;
12
12
 
13
- --sizing-6: 0.375rem;
13
+ --sizing-x3: 3rem;
14
14
 
15
- --sizing-8: 0.5rem;
15
+ --sizing-x4: 4rem;
16
16
 
17
- --sizing-12: 0.75rem;
17
+ --sizing-x6: 6rem;
18
18
 
19
- --sizing-16: 1rem;
19
+ --sizing-x8: 8rem;
20
20
 
21
- --sizing-20: 1.25rem;
21
+ --sizing-x10: 10rem;
22
22
 
23
- --sizing-24: 1.5rem;
23
+ --sizing-x12: 12rem;
24
24
 
25
- --sizing-28: 1.75rem;
25
+ --sizing-x14: 14rem;
26
26
 
27
- --sizing-32: 2rem;
27
+ --sizing-x16: 16rem;
28
28
 
29
- --sizing-36: 2.25rem;
29
+ --sizing-x18: 18rem;
30
30
 
31
- --sizing-40: 2.5rem;
31
+ --sizing-x20: 20rem;
32
32
 
33
- --sizing-44: 2.75rem;
33
+ --sizing-x22: 22rem;
34
34
 
35
- --sizing-48: 3rem;
35
+ --sizing-x24: 24rem;
36
36
 
37
- --sizing-52: 3.25rem;
37
+ --sizing-x26: 26rem;
38
38
 
39
- --sizing-56: 3.5rem;
39
+ --sizing-x28: 28rem;
40
40
 
41
- --sizing-60: 3.75rem;
41
+ --sizing-x30: 30rem;
42
42
 
43
- --sizing-64: 4rem;
43
+ --sizing-x32: 32rem;
44
44
 
45
45
  --border-1: 1px;
46
46
 
package/scss/utilities/_layout-utilities.scss CHANGED
@@ -1,24 +1,24 @@
1
1
  // Rolster Technology Layout Utilities
2
- // v1.0.1
2
+ // v2.0.1
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 11/Abr/2023
6
- // Updated: 23/Sep/2023
6
+ // Updated: 27/Ene/2024
7
7
 
8
8
  @mixin grid-responsive($size) {
9
9
  .#{$size}-grid-8 {
10
10
  display: grid;
11
- gap: var(--sizing-8);
11
+ gap: var(--sizing-x4);
12
12
  }
13
13
 
14
14
  .#{$size}-grid-12 {
15
15
  display: grid;
16
- gap: var(--sizing-12);
16
+ gap: var(--sizing-x6);
17
17
  }
18
18
 
19
19
  .#{$size}-grid-16 {
20
20
  display: grid;
21
- gap: var(--sizing-16);
21
+ gap: var(--sizing-x8);
22
22
  }
23
23
 
24
24
  .#{$size}-grid-col-12 {
@@ -48,89 +48,90 @@
48
48
 
49
49
  @mixin flex-grid-responsive($size) {
50
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-6: 2.18rem;
60
+ --flex-grid-12-col-8: 3rem;
61
+
62
+ --flex-grid-8-col-2: 3.1rem;
63
+ --flex-grid-8-col-3: 2.6rem;
64
+ --flex-grid-8-col-4: 2.2rem;
65
+ --flex-grid-8-col-6: 1.8rem;
66
+
67
+ --flex-grid-6-col-2: 2.82rem;
68
+ --flex-grid-6-col-3: 2.2rem;
69
+ --flex-grid-6-col-4: 1.7rem;
70
+
71
+ --flex-grid-4-col-2: 2rem;
72
+ --flex-grid-4-col-3: 1rem;
73
+
51
74
  display: inline-flex;
52
75
  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
+ gap: var(--sizing-x4);
76
77
  }
77
78
 
78
79
  .#{$size}-flex-grid-12 {
80
+ --flex-grid-12-gap: 7.3125rem;
81
+ --flex-grid-8-gap: 7rem;
82
+ --flex-grid-6-gap: 6,6475rem;
83
+ --flex-grid-4-gap: 6rem;
84
+
85
+ --flex-grid-12-col-2: 6,624rem;
86
+ --flex-grid-12-col-3: 6rem;
87
+ --flex-grid-12-col-4: 5,38rem;
88
+ --flex-grid-12-col-6: 4,1rem;
89
+ --flex-grid-12-col-8: 3rem;
90
+
91
+ --flex-grid-8-col-2: 6,182rem;
92
+ --flex-grid-8-col-3: 5,2rem;
93
+ --flex-grid-8-col-4: 4rem;
94
+ --flex-grid-8-col-6: 2,2rem;
95
+
96
+ --flex-grid-6-col-2: 5,4rem;
97
+ --flex-grid-6-col-3: 4rem;
98
+ --flex-grid-6-col-4: 2,84rem;
99
+
100
+ --flex-grid-4-col-2: 4rem;
101
+ --flex-grid-4-col-3: 2,2rem;
102
+
79
103
  display: inline-flex;
80
104
  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
+ gap: var(--sizing-x6);
105
106
  }
106
107
 
107
108
  .#{$size}-flex-grid-16 {
109
+ --flex-grid-12-gap: 7.3125rem;
110
+ --flex-grid-8-gap: 7rem;
111
+ --flex-grid-6-gap: 6,6475rem;
112
+ --flex-grid-4-gap: 6rem;
113
+
114
+ --flex-grid-12-col-2: 6.66rem;
115
+ --flex-grid-12-col-3: 6rem;
116
+ --flex-grid-12-col-4: 5,38rem;
117
+ --flex-grid-12-col-6: 4,1rem;
118
+ --flex-grid-12-col-8: 3rem;
119
+
120
+ --flex-grid-8-col-2: 6,182rem;
121
+ --flex-grid-8-col-3: 5,2rem;
122
+ --flex-grid-8-col-4: 4rem;
123
+ --flex-grid-8-col-6: 2,2rem;
124
+
125
+ --flex-grid-6-col-2: 5,4rem;
126
+ --flex-grid-6-col-3: 4rem;
127
+ --flex-grid-6-col-4: 2,84rem;
128
+
129
+ --flex-grid-4-col-2: 4rem;
130
+ --flex-grid-4-col-3: 2,2rem;
131
+
108
132
  display: inline-flex;
109
133
  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
+ gap: var(--sizing-x8);
134
135
  }
135
136
 
136
137
  .#{$size}-flex-grid-col-4 {
package/scss/utilities/_normalize-utilities.scss CHANGED
@@ -11,7 +11,7 @@
11
11
  }
12
12
 
13
13
  html {
14
- font-size: var(--rolster-font-size, 16px);
14
+ font-size: var(--rolster-font-size, 2px);
15
15
  font-family: var(--rolster-font-family);
16
16
  }
17
17
 
@@ -58,7 +58,7 @@ svg:not(:root) {
58
58
  }
59
59
 
60
60
  figure {
61
- margin: 1rem 40rem;
61
+ margin: 8rem 40rem;
62
62
  }
63
63
 
64
64
  hr {
@@ -76,7 +76,7 @@ kbd,
76
76
  pre,
77
77
  samp {
78
78
  font-family: inherit;
79
- font-size: 1rem;
79
+ font-size: 8rem;
80
80
  }
81
81
 
82
82
  label,
@@ -95,7 +95,7 @@ textarea {
95
95
  }
96
96
 
97
97
  textarea::placeholder {
98
- padding-left: 0.125rem;
98
+ padding-left: 1rem;
99
99
  }
100
100
 
101
101
  form,