@medyll/cssfabric 0.1.0 → 0.1.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 (44) hide show
  1. package/lib/styles/core/box/box.css +756 -1842
  2. package/lib/styles/core/box/box.min.css +1 -1
  3. package/lib/styles/core/box/box.responsive.css +3757 -10552
  4. package/lib/styles/core/box/box.responsive.min.css +1 -1
  5. package/lib/styles/core/color/color.css +908 -266
  6. package/lib/styles/core/color/color.min.css +1 -1
  7. package/lib/styles/core/color/color.responsive.css +4011 -2368
  8. package/lib/styles/core/color/color.responsive.min.css +1 -1
  9. package/lib/styles/core/flex/flex.responsive.css +0 -126
  10. package/lib/styles/core/flex/flex.responsive.min.css +1 -1
  11. package/lib/styles/core/grid/grid.responsive.css +0 -121
  12. package/lib/styles/core/grid/grid.responsive.min.css +1 -1
  13. package/lib/styles/core/menu/menu.responsive.css +0 -81
  14. package/lib/styles/core/menu/menu.responsive.min.css +1 -1
  15. package/lib/styles/core/overflow/overflow.responsive.css +0 -61
  16. package/lib/styles/core/overflow/overflow.responsive.min.css +1 -1
  17. package/lib/styles/core/scale/scale.css +286 -206
  18. package/lib/styles/core/scale/scale.min.css +1 -1
  19. package/lib/styles/core/scale/scale.responsive.css +1157 -1478
  20. package/lib/styles/core/scale/scale.responsive.min.css +1 -1
  21. package/lib/styles/core/table/table.responsive.css +0 -74
  22. package/lib/styles/core/table/table.responsive.min.css +1 -1
  23. package/lib/styles/core/text/text.css +4 -0
  24. package/lib/styles/core/text/text.responsive.css +0 -549
  25. package/lib/styles/core/text/text.responsive.min.css +1 -1
  26. package/lib/styles/core/vars.css +261 -125
  27. package/lib/styles/core/vars.min.css +1 -1
  28. package/lib/styles/cssfabric.css +2626 -2850
  29. package/lib/styles/cssfabric.min.css +4 -4
  30. package/lib/styles/cssfabric.responsive.css +10959 -17444
  31. package/lib/styles/cssfabric.responsive.min.css +9 -9
  32. package/package.json +1 -1
  33. package/src/_generated/export.variables.json +77 -78
  34. package/src/cssfabric/_utils.scss +22 -12
  35. package/src/cssfabric/modules/_cssfabric-config.scss +87 -17
  36. package/src/cssfabric/modules/box/_box-build.scss +103 -84
  37. package/src/cssfabric/modules/box/_box-vars.scss +48 -46
  38. package/src/cssfabric/modules/color/_color-build.scss +108 -24
  39. package/src/cssfabric/modules/scale/_scale-build.scss +26 -13
  40. package/src/cssfabric/modules/scale/_scale-vars.scss +50 -51
  41. package/src/cssfabric/modules/text/_text-build.scss +60 -3
  42. package/src/cssfabric/modules/text/text-responsive.scss +1 -0
  43. package/src/cssfabric/modules/theme/_theme-build.scss +27 -10
  44. package/src/cssfabric/modules/vars.scss +19 -86
package/lib/styles/core/box/box.css CHANGED
@@ -1,2167 +1,1081 @@
1
- .border, .border-1 {
2
- border: 1px solid #ccc;
1
+ .marg .marg-tiny {
2
+ margin: --box-density-preset-tiny;
3
3
  }
4
- .border-2 {
5
- border: 2px solid #ccc;
4
+ .marg .marg-small {
5
+ margin: --box-density-preset-small;
6
6
  }
7
- .border-3 {
8
- border: 3px solid #ccc;
7
+ .marg .marg-medium {
8
+ margin: --box-density-preset-medium;
9
9
  }
10
- .border-4 {
11
- border: 4px solid #ccc;
10
+ .marg .marg-large {
11
+ margin: --box-density-preset-large;
12
12
  }
13
- .border-5 {
14
- border: 5px solid #ccc;
13
+ .marg, .marg-1 {
14
+ margin: var(--box-density-1);
15
15
  }
16
-
17
- .border-t, .border-t-1 {
18
- border-top: 1px solid #ccc;
16
+ .marg-2 {
17
+ margin: var(--box-density-2);
19
18
  }
20
- .border-t-2 {
21
- border-top: 2px solid #ccc;
19
+ .marg-3 {
20
+ margin: var(--box-density-3);
22
21
  }
23
- .border-t-3 {
24
- border-top: 3px solid #ccc;
22
+ .marg-4 {
23
+ margin: var(--box-density-4);
25
24
  }
26
- .border-t-4 {
27
- border-top: 4px solid #ccc;
25
+ .marg-5 {
26
+ margin: var(--box-density-5);
28
27
  }
29
- .border-t-5 {
30
- border-top: 5px solid #ccc;
28
+ .marg-6 {
29
+ margin: var(--box-density-6);
31
30
  }
32
-
33
- .border-b, .border-b-1 {
34
- border-bottom: 1px solid #ccc;
31
+ .marg-7 {
32
+ margin: var(--box-density-7);
35
33
  }
36
- .border-b-2 {
37
- border-bottom: 2px solid #ccc;
34
+ .marg-8 {
35
+ margin: var(--box-density-8);
38
36
  }
39
- .border-b-3 {
40
- border-bottom: 3px solid #ccc;
37
+ .marg-9 {
38
+ margin: var(--box-density-9);
41
39
  }
42
- .border-b-4 {
43
- border-bottom: 4px solid #ccc;
40
+ .marg-10 {
41
+ margin: var(--box-density-10);
42
+ }
43
+ .marg-11 {
44
+ margin: var(--box-density-11);
44
45
  }
45
- .border-b-5 {
46
- border-bottom: 5px solid #ccc;
46
+ .marg-12 {
47
+ margin: var(--box-density-12);
47
48
  }
48
49
 
49
- .border-l, .border-l-1 {
50
- border-left: 1px solid #ccc;
50
+ .marg-t .marg-t-tiny {
51
+ margin: --box-density-preset-tiny;
51
52
  }
52
- .border-l-2 {
53
- border-left: 2px solid #ccc;
53
+ .marg-t .marg-t-small {
54
+ margin: --box-density-preset-small;
54
55
  }
55
- .border-l-3 {
56
- border-left: 3px solid #ccc;
56
+ .marg-t .marg-t-medium {
57
+ margin: --box-density-preset-medium;
57
58
  }
58
- .border-l-4 {
59
- border-left: 4px solid #ccc;
59
+ .marg-t .marg-t-large {
60
+ margin: --box-density-preset-large;
60
61
  }
61
- .border-l-5 {
62
- border-left: 5px solid #ccc;
62
+ .marg-t, .marg-t-1 {
63
+ margin-top: var(--box-density-1);
63
64
  }
64
-
65
- .border-r, .border-r-1 {
66
- border-right: 1px solid #ccc;
65
+ .marg-t-2 {
66
+ margin-top: var(--box-density-2);
67
67
  }
68
- .border-r-2 {
69
- border-right: 2px solid #ccc;
68
+ .marg-t-3 {
69
+ margin-top: var(--box-density-3);
70
70
  }
71
- .border-r-3 {
72
- border-right: 3px solid #ccc;
71
+ .marg-t-4 {
72
+ margin-top: var(--box-density-4);
73
73
  }
74
- .border-r-4 {
75
- border-right: 4px solid #ccc;
74
+ .marg-t-5 {
75
+ margin-top: var(--box-density-5);
76
76
  }
77
- .border-r-5 {
78
- border-right: 5px solid #ccc;
77
+ .marg-t-6 {
78
+ margin-top: var(--box-density-6);
79
79
  }
80
-
81
- .border-all, .border-all-1 {
82
- border: 1px solid #ccc;
80
+ .marg-t-7 {
81
+ margin-top: var(--box-density-7);
83
82
  }
84
- .border-all-2 {
85
- border: 2px solid #ccc;
83
+ .marg-t-8 {
84
+ margin-top: var(--box-density-8);
86
85
  }
87
- .border-all-3 {
88
- border: 3px solid #ccc;
86
+ .marg-t-9 {
87
+ margin-top: var(--box-density-9);
89
88
  }
90
- .border-all-4 {
91
- border: 4px solid #ccc;
89
+ .marg-t-10 {
90
+ margin-top: var(--box-density-10);
91
+ }
92
+ .marg-t-11 {
93
+ margin-top: var(--box-density-11);
92
94
  }
93
- .border-all-5 {
94
- border: 5px solid #ccc;
95
+ .marg-t-12 {
96
+ margin-top: var(--box-density-12);
95
97
  }
96
98
 
97
- .border-u, .border-u-1 {
98
- border-bottom: 1px solid #ccc;
99
- border-left: 1px solid #ccc;
100
- border-right: 1px solid #ccc;
99
+ .marg-b .marg-b-tiny {
100
+ margin: --box-density-preset-tiny;
101
101
  }
102
- .border-u-2 {
103
- border-bottom: 2px solid #ccc;
104
- border-left: 2px solid #ccc;
105
- border-right: 2px solid #ccc;
102
+ .marg-b .marg-b-small {
103
+ margin: --box-density-preset-small;
106
104
  }
107
- .border-u-3 {
108
- border-bottom: 3px solid #ccc;
109
- border-left: 3px solid #ccc;
110
- border-right: 3px solid #ccc;
105
+ .marg-b .marg-b-medium {
106
+ margin: --box-density-preset-medium;
111
107
  }
112
- .border-u-4 {
113
- border-bottom: 4px solid #ccc;
114
- border-left: 4px solid #ccc;
115
- border-right: 4px solid #ccc;
108
+ .marg-b .marg-b-large {
109
+ margin: --box-density-preset-large;
116
110
  }
117
- .border-u-5 {
118
- border-bottom: 5px solid #ccc;
119
- border-left: 5px solid #ccc;
120
- border-right: 5px solid #ccc;
111
+ .marg-b, .marg-b-1 {
112
+ margin-bottom: var(--box-density-1);
121
113
  }
122
-
123
- .border-ii, .border-ii-1 {
124
- border-left: 1px solid #ccc;
125
- border-right: 1px solid #ccc;
114
+ .marg-b-2 {
115
+ margin-bottom: var(--box-density-2);
126
116
  }
127
- .border-ii-2 {
128
- border-left: 2px solid #ccc;
129
- border-right: 2px solid #ccc;
117
+ .marg-b-3 {
118
+ margin-bottom: var(--box-density-3);
130
119
  }
131
- .border-ii-3 {
132
- border-left: 3px solid #ccc;
133
- border-right: 3px solid #ccc;
120
+ .marg-b-4 {
121
+ margin-bottom: var(--box-density-4);
134
122
  }
135
- .border-ii-4 {
136
- border-left: 4px solid #ccc;
137
- border-right: 4px solid #ccc;
123
+ .marg-b-5 {
124
+ margin-bottom: var(--box-density-5);
138
125
  }
139
- .border-ii-5 {
140
- border-left: 5px solid #ccc;
141
- border-right: 5px solid #ccc;
126
+ .marg-b-6 {
127
+ margin-bottom: var(--box-density-6);
142
128
  }
143
-
144
- .border-tb, .border-tb-1 {
145
- border-top: 1px solid #ccc;
146
- border-bottom: 1px solid #ccc;
129
+ .marg-b-7 {
130
+ margin-bottom: var(--box-density-7);
147
131
  }
148
- .border-tb-2 {
149
- border-top: 2px solid #ccc;
150
- border-bottom: 2px solid #ccc;
132
+ .marg-b-8 {
133
+ margin-bottom: var(--box-density-8);
151
134
  }
152
- .border-tb-3 {
153
- border-top: 3px solid #ccc;
154
- border-bottom: 3px solid #ccc;
135
+ .marg-b-9 {
136
+ margin-bottom: var(--box-density-9);
155
137
  }
156
- .border-tb-4 {
157
- border-top: 4px solid #ccc;
158
- border-bottom: 4px solid #ccc;
138
+ .marg-b-10 {
139
+ margin-bottom: var(--box-density-10);
140
+ }
141
+ .marg-b-11 {
142
+ margin-bottom: var(--box-density-11);
159
143
  }
160
- .border-tb-5 {
161
- border-top: 5px solid #ccc;
162
- border-bottom: 5px solid #ccc;
144
+ .marg-b-12 {
145
+ margin-bottom: var(--box-density-12);
163
146
  }
164
147
 
165
- .pad, .pad-1 {
166
- padding: var(--box-unit-1);
148
+ .marg-l .marg-l-tiny {
149
+ margin: --box-density-preset-tiny;
167
150
  }
168
- .pad-2 {
169
- padding: var(--box-unit-2);
151
+ .marg-l .marg-l-small {
152
+ margin: --box-density-preset-small;
170
153
  }
171
- .pad-3 {
172
- padding: var(--box-unit-3);
154
+ .marg-l .marg-l-medium {
155
+ margin: --box-density-preset-medium;
173
156
  }
174
- .pad-4 {
175
- padding: var(--box-unit-4);
157
+ .marg-l .marg-l-large {
158
+ margin: --box-density-preset-large;
176
159
  }
177
- .pad-5 {
178
- padding: var(--box-unit-5);
160
+ .marg-l, .marg-l-1 {
161
+ margin-left: var(--box-density-1);
179
162
  }
180
- .pad-6 {
181
- padding: var(--box-unit-6);
163
+ .marg-l-2 {
164
+ margin-left: var(--box-density-2);
182
165
  }
183
- .pad-7 {
184
- padding: var(--box-unit-7);
166
+ .marg-l-3 {
167
+ margin-left: var(--box-density-3);
185
168
  }
186
- .pad-8 {
187
- padding: var(--box-unit-8);
169
+ .marg-l-4 {
170
+ margin-left: var(--box-density-4);
188
171
  }
189
- .pad-9 {
190
- padding: var(--box-unit-9);
172
+ .marg-l-5 {
173
+ margin-left: var(--box-density-5);
191
174
  }
192
- .pad-10 {
193
- padding: var(--box-unit-10);
175
+ .marg-l-6 {
176
+ margin-left: var(--box-density-6);
194
177
  }
195
- .pad-11 {
196
- padding: var(--box-unit-11);
178
+ .marg-l-7 {
179
+ margin-left: var(--box-density-7);
197
180
  }
198
- .pad-12 {
199
- padding: var(--box-unit-12);
181
+ .marg-l-8 {
182
+ margin-left: var(--box-density-8);
200
183
  }
201
- .pad-13 {
202
- padding: var(--box-unit-13);
184
+ .marg-l-9 {
185
+ margin-left: var(--box-density-9);
203
186
  }
204
- .pad-14 {
205
- padding: var(--box-unit-14);
187
+ .marg-l-10 {
188
+ margin-left: var(--box-density-10);
206
189
  }
207
- .pad-15 {
208
- padding: var(--box-unit-15);
190
+ .marg-l-11 {
191
+ margin-left: var(--box-density-11);
209
192
  }
210
- .pad-16 {
211
- padding: var(--box-unit-16);
193
+ .marg-l-12 {
194
+ margin-left: var(--box-density-12);
212
195
  }
213
- .pad-17 {
214
- padding: var(--box-unit-17);
196
+
197
+ .marg-r .marg-r-tiny {
198
+ margin: --box-density-preset-tiny;
215
199
  }
216
- .pad-18 {
217
- padding: var(--box-unit-18);
200
+ .marg-r .marg-r-small {
201
+ margin: --box-density-preset-small;
218
202
  }
219
- .pad-19 {
220
- padding: var(--box-unit-19);
203
+ .marg-r .marg-r-medium {
204
+ margin: --box-density-preset-medium;
221
205
  }
222
- .pad-20 {
223
- padding: var(--box-unit-20);
206
+ .marg-r .marg-r-large {
207
+ margin: --box-density-preset-large;
224
208
  }
225
- .pad-21 {
226
- padding: var(--box-unit-21);
209
+ .marg-r, .marg-r-1 {
210
+ margin-right: var(--box-density-1);
227
211
  }
228
- .pad-22 {
229
- padding: var(--box-unit-22);
212
+ .marg-r-2 {
213
+ margin-right: var(--box-density-2);
230
214
  }
231
- .pad-23 {
232
- padding: var(--box-unit-23);
215
+ .marg-r-3 {
216
+ margin-right: var(--box-density-3);
233
217
  }
234
- .pad-24 {
235
- padding: var(--box-unit-24);
218
+ .marg-r-4 {
219
+ margin-right: var(--box-density-4);
236
220
  }
237
- .pad-25 {
238
- padding: var(--box-unit-25);
221
+ .marg-r-5 {
222
+ margin-right: var(--box-density-5);
239
223
  }
240
- .pad-26 {
241
- padding: var(--box-unit-26);
224
+ .marg-r-6 {
225
+ margin-right: var(--box-density-6);
242
226
  }
243
- .pad-27 {
244
- padding: var(--box-unit-27);
227
+ .marg-r-7 {
228
+ margin-right: var(--box-density-7);
245
229
  }
246
- .pad-28 {
247
- padding: var(--box-unit-28);
230
+ .marg-r-8 {
231
+ margin-right: var(--box-density-8);
248
232
  }
249
- .pad-29 {
250
- padding: var(--box-unit-29);
233
+ .marg-r-9 {
234
+ margin-right: var(--box-density-9);
251
235
  }
252
- .pad-30 {
253
- padding: var(--box-unit-30);
236
+ .marg-r-10 {
237
+ margin-right: var(--box-density-10);
254
238
  }
255
- .pad-31 {
256
- padding: var(--box-unit-31);
239
+ .marg-r-11 {
240
+ margin-right: var(--box-density-11);
257
241
  }
258
- .pad-32 {
259
- padding: var(--box-unit-32);
242
+ .marg-r-12 {
243
+ margin-right: var(--box-density-12);
260
244
  }
261
245
 
262
- .pad-t, .pad-t-1 {
263
- padding-top: var(--box-unit-1);
246
+ .marg-all .marg-all-tiny {
247
+ margin: --box-density-preset-tiny;
264
248
  }
265
- .pad-t-2 {
266
- padding-top: var(--box-unit-2);
249
+ .marg-all .marg-all-small {
250
+ margin: --box-density-preset-small;
267
251
  }
268
- .pad-t-3 {
269
- padding-top: var(--box-unit-3);
252
+ .marg-all .marg-all-medium {
253
+ margin: --box-density-preset-medium;
270
254
  }
271
- .pad-t-4 {
272
- padding-top: var(--box-unit-4);
255
+ .marg-all .marg-all-large {
256
+ margin: --box-density-preset-large;
273
257
  }
274
- .pad-t-5 {
275
- padding-top: var(--box-unit-5);
258
+ .marg-all, .marg-all-1 {
259
+ margin: var(--box-density-1);
276
260
  }
277
- .pad-t-6 {
278
- padding-top: var(--box-unit-6);
261
+ .marg-all-2 {
262
+ margin: var(--box-density-2);
279
263
  }
280
- .pad-t-7 {
281
- padding-top: var(--box-unit-7);
264
+ .marg-all-3 {
265
+ margin: var(--box-density-3);
282
266
  }
283
- .pad-t-8 {
284
- padding-top: var(--box-unit-8);
267
+ .marg-all-4 {
268
+ margin: var(--box-density-4);
285
269
  }
286
- .pad-t-9 {
287
- padding-top: var(--box-unit-9);
270
+ .marg-all-5 {
271
+ margin: var(--box-density-5);
288
272
  }
289
- .pad-t-10 {
290
- padding-top: var(--box-unit-10);
273
+ .marg-all-6 {
274
+ margin: var(--box-density-6);
291
275
  }
292
- .pad-t-11 {
293
- padding-top: var(--box-unit-11);
276
+ .marg-all-7 {
277
+ margin: var(--box-density-7);
294
278
  }
295
- .pad-t-12 {
296
- padding-top: var(--box-unit-12);
279
+ .marg-all-8 {
280
+ margin: var(--box-density-8);
297
281
  }
298
- .pad-t-13 {
299
- padding-top: var(--box-unit-13);
282
+ .marg-all-9 {
283
+ margin: var(--box-density-9);
300
284
  }
301
- .pad-t-14 {
302
- padding-top: var(--box-unit-14);
285
+ .marg-all-10 {
286
+ margin: var(--box-density-10);
303
287
  }
304
- .pad-t-15 {
305
- padding-top: var(--box-unit-15);
288
+ .marg-all-11 {
289
+ margin: var(--box-density-11);
306
290
  }
307
- .pad-t-16 {
308
- padding-top: var(--box-unit-16);
291
+ .marg-all-12 {
292
+ margin: var(--box-density-12);
309
293
  }
310
- .pad-t-17 {
311
- padding-top: var(--box-unit-17);
294
+
295
+ .marg-u .marg-u-tiny {
296
+ margin: --box-density-preset-tiny;
312
297
  }
313
- .pad-t-18 {
314
- padding-top: var(--box-unit-18);
298
+ .marg-u .marg-u-small {
299
+ margin: --box-density-preset-small;
315
300
  }
316
- .pad-t-19 {
317
- padding-top: var(--box-unit-19);
301
+ .marg-u .marg-u-medium {
302
+ margin: --box-density-preset-medium;
318
303
  }
319
- .pad-t-20 {
320
- padding-top: var(--box-unit-20);
304
+ .marg-u .marg-u-large {
305
+ margin: --box-density-preset-large;
321
306
  }
322
- .pad-t-21 {
323
- padding-top: var(--box-unit-21);
307
+ .marg-u, .marg-u-1 {
308
+ margin-bottom: var(--box-density-1);
309
+ margin-left: var(--box-density-1);
310
+ margin-right: var(--box-density-1);
324
311
  }
325
- .pad-t-22 {
326
- padding-top: var(--box-unit-22);
312
+ .marg-u-2 {
313
+ margin-bottom: var(--box-density-2);
314
+ margin-left: var(--box-density-2);
315
+ margin-right: var(--box-density-2);
327
316
  }
328
- .pad-t-23 {
329
- padding-top: var(--box-unit-23);
317
+ .marg-u-3 {
318
+ margin-bottom: var(--box-density-3);
319
+ margin-left: var(--box-density-3);
320
+ margin-right: var(--box-density-3);
330
321
  }
331
- .pad-t-24 {
332
- padding-top: var(--box-unit-24);
322
+ .marg-u-4 {
323
+ margin-bottom: var(--box-density-4);
324
+ margin-left: var(--box-density-4);
325
+ margin-right: var(--box-density-4);
333
326
  }
334
- .pad-t-25 {
335
- padding-top: var(--box-unit-25);
327
+ .marg-u-5 {
328
+ margin-bottom: var(--box-density-5);
329
+ margin-left: var(--box-density-5);
330
+ margin-right: var(--box-density-5);
336
331
  }
337
- .pad-t-26 {
338
- padding-top: var(--box-unit-26);
332
+ .marg-u-6 {
333
+ margin-bottom: var(--box-density-6);
334
+ margin-left: var(--box-density-6);
335
+ margin-right: var(--box-density-6);
339
336
  }
340
- .pad-t-27 {
341
- padding-top: var(--box-unit-27);
337
+ .marg-u-7 {
338
+ margin-bottom: var(--box-density-7);
339
+ margin-left: var(--box-density-7);
340
+ margin-right: var(--box-density-7);
342
341
  }
343
- .pad-t-28 {
344
- padding-top: var(--box-unit-28);
342
+ .marg-u-8 {
343
+ margin-bottom: var(--box-density-8);
344
+ margin-left: var(--box-density-8);
345
+ margin-right: var(--box-density-8);
345
346
  }
346
- .pad-t-29 {
347
- padding-top: var(--box-unit-29);
347
+ .marg-u-9 {
348
+ margin-bottom: var(--box-density-9);
349
+ margin-left: var(--box-density-9);
350
+ margin-right: var(--box-density-9);
348
351
  }
349
- .pad-t-30 {
350
- padding-top: var(--box-unit-30);
352
+ .marg-u-10 {
353
+ margin-bottom: var(--box-density-10);
354
+ margin-left: var(--box-density-10);
355
+ margin-right: var(--box-density-10);
351
356
  }
352
- .pad-t-31 {
353
- padding-top: var(--box-unit-31);
357
+ .marg-u-11 {
358
+ margin-bottom: var(--box-density-11);
359
+ margin-left: var(--box-density-11);
360
+ margin-right: var(--box-density-11);
354
361
  }
355
- .pad-t-32 {
356
- padding-top: var(--box-unit-32);
362
+ .marg-u-12 {
363
+ margin-bottom: var(--box-density-12);
364
+ margin-left: var(--box-density-12);
365
+ margin-right: var(--box-density-12);
357
366
  }
358
367
 
359
- .pad-b, .pad-b-1 {
360
- padding-bottom: var(--box-unit-1);
368
+ .marg-ii .marg-ii-tiny {
369
+ margin: --box-density-preset-tiny;
361
370
  }
362
- .pad-b-2 {
363
- padding-bottom: var(--box-unit-2);
371
+ .marg-ii .marg-ii-small {
372
+ margin: --box-density-preset-small;
364
373
  }
365
- .pad-b-3 {
366
- padding-bottom: var(--box-unit-3);
374
+ .marg-ii .marg-ii-medium {
375
+ margin: --box-density-preset-medium;
367
376
  }
368
- .pad-b-4 {
369
- padding-bottom: var(--box-unit-4);
377
+ .marg-ii .marg-ii-large {
378
+ margin: --box-density-preset-large;
370
379
  }
371
- .pad-b-5 {
372
- padding-bottom: var(--box-unit-5);
380
+ .marg-ii, .marg-ii-1 {
381
+ margin-left: var(--box-density-1);
382
+ margin-right: var(--box-density-1);
373
383
  }
374
- .pad-b-6 {
375
- padding-bottom: var(--box-unit-6);
384
+ .marg-ii-2 {
385
+ margin-left: var(--box-density-2);
386
+ margin-right: var(--box-density-2);
376
387
  }
377
- .pad-b-7 {
378
- padding-bottom: var(--box-unit-7);
388
+ .marg-ii-3 {
389
+ margin-left: var(--box-density-3);
390
+ margin-right: var(--box-density-3);
379
391
  }
380
- .pad-b-8 {
381
- padding-bottom: var(--box-unit-8);
392
+ .marg-ii-4 {
393
+ margin-left: var(--box-density-4);
394
+ margin-right: var(--box-density-4);
382
395
  }
383
- .pad-b-9 {
384
- padding-bottom: var(--box-unit-9);
396
+ .marg-ii-5 {
397
+ margin-left: var(--box-density-5);
398
+ margin-right: var(--box-density-5);
385
399
  }
386
- .pad-b-10 {
387
- padding-bottom: var(--box-unit-10);
400
+ .marg-ii-6 {
401
+ margin-left: var(--box-density-6);
402
+ margin-right: var(--box-density-6);
388
403
  }
389
- .pad-b-11 {
390
- padding-bottom: var(--box-unit-11);
404
+ .marg-ii-7 {
405
+ margin-left: var(--box-density-7);
406
+ margin-right: var(--box-density-7);
391
407
  }
392
- .pad-b-12 {
393
- padding-bottom: var(--box-unit-12);
408
+ .marg-ii-8 {
409
+ margin-left: var(--box-density-8);
410
+ margin-right: var(--box-density-8);
394
411
  }
395
- .pad-b-13 {
396
- padding-bottom: var(--box-unit-13);
412
+ .marg-ii-9 {
413
+ margin-left: var(--box-density-9);
414
+ margin-right: var(--box-density-9);
397
415
  }
398
- .pad-b-14 {
399
- padding-bottom: var(--box-unit-14);
416
+ .marg-ii-10 {
417
+ margin-left: var(--box-density-10);
418
+ margin-right: var(--box-density-10);
400
419
  }
401
- .pad-b-15 {
402
- padding-bottom: var(--box-unit-15);
420
+ .marg-ii-11 {
421
+ margin-left: var(--box-density-11);
422
+ margin-right: var(--box-density-11);
403
423
  }
404
- .pad-b-16 {
405
- padding-bottom: var(--box-unit-16);
424
+ .marg-ii-12 {
425
+ margin-left: var(--box-density-12);
426
+ margin-right: var(--box-density-12);
406
427
  }
407
- .pad-b-17 {
408
- padding-bottom: var(--box-unit-17);
428
+
429
+ .marg-tb .marg-tb-tiny {
430
+ margin: --box-density-preset-tiny;
409
431
  }
410
- .pad-b-18 {
411
- padding-bottom: var(--box-unit-18);
432
+ .marg-tb .marg-tb-small {
433
+ margin: --box-density-preset-small;
412
434
  }
413
- .pad-b-19 {
414
- padding-bottom: var(--box-unit-19);
435
+ .marg-tb .marg-tb-medium {
436
+ margin: --box-density-preset-medium;
415
437
  }
416
- .pad-b-20 {
417
- padding-bottom: var(--box-unit-20);
438
+ .marg-tb .marg-tb-large {
439
+ margin: --box-density-preset-large;
418
440
  }
419
- .pad-b-21 {
420
- padding-bottom: var(--box-unit-21);
441
+ .marg-tb, .marg-tb-1 {
442
+ margin-top: var(--box-density-1);
443
+ margin-bottom: var(--box-density-1);
421
444
  }
422
- .pad-b-22 {
423
- padding-bottom: var(--box-unit-22);
445
+ .marg-tb-2 {
446
+ margin-top: var(--box-density-2);
447
+ margin-bottom: var(--box-density-2);
424
448
  }
425
- .pad-b-23 {
426
- padding-bottom: var(--box-unit-23);
449
+ .marg-tb-3 {
450
+ margin-top: var(--box-density-3);
451
+ margin-bottom: var(--box-density-3);
427
452
  }
428
- .pad-b-24 {
429
- padding-bottom: var(--box-unit-24);
453
+ .marg-tb-4 {
454
+ margin-top: var(--box-density-4);
455
+ margin-bottom: var(--box-density-4);
430
456
  }
431
- .pad-b-25 {
432
- padding-bottom: var(--box-unit-25);
457
+ .marg-tb-5 {
458
+ margin-top: var(--box-density-5);
459
+ margin-bottom: var(--box-density-5);
433
460
  }
434
- .pad-b-26 {
435
- padding-bottom: var(--box-unit-26);
461
+ .marg-tb-6 {
462
+ margin-top: var(--box-density-6);
463
+ margin-bottom: var(--box-density-6);
436
464
  }
437
- .pad-b-27 {
438
- padding-bottom: var(--box-unit-27);
465
+ .marg-tb-7 {
466
+ margin-top: var(--box-density-7);
467
+ margin-bottom: var(--box-density-7);
439
468
  }
440
- .pad-b-28 {
441
- padding-bottom: var(--box-unit-28);
469
+ .marg-tb-8 {
470
+ margin-top: var(--box-density-8);
471
+ margin-bottom: var(--box-density-8);
442
472
  }
443
- .pad-b-29 {
444
- padding-bottom: var(--box-unit-29);
473
+ .marg-tb-9 {
474
+ margin-top: var(--box-density-9);
475
+ margin-bottom: var(--box-density-9);
445
476
  }
446
- .pad-b-30 {
447
- padding-bottom: var(--box-unit-30);
477
+ .marg-tb-10 {
478
+ margin-top: var(--box-density-10);
479
+ margin-bottom: var(--box-density-10);
448
480
  }
449
- .pad-b-31 {
450
- padding-bottom: var(--box-unit-31);
481
+ .marg-tb-11 {
482
+ margin-top: var(--box-density-11);
483
+ margin-bottom: var(--box-density-11);
451
484
  }
452
- .pad-b-32 {
453
- padding-bottom: var(--box-unit-32);
485
+ .marg-tb-12 {
486
+ margin-top: var(--box-density-12);
487
+ margin-bottom: var(--box-density-12);
454
488
  }
455
489
 
456
- .pad-l, .pad-l-1 {
457
- padding-left: var(--box-unit-1);
490
+ .pad .pad-tiny {
491
+ padding: --box-density-preset-tiny;
458
492
  }
459
- .pad-l-2 {
460
- padding-left: var(--box-unit-2);
493
+ .pad .pad-small {
494
+ padding: --box-density-preset-small;
461
495
  }
462
- .pad-l-3 {
463
- padding-left: var(--box-unit-3);
496
+ .pad .pad-medium {
497
+ padding: --box-density-preset-medium;
464
498
  }
465
- .pad-l-4 {
466
- padding-left: var(--box-unit-4);
499
+ .pad .pad-large {
500
+ padding: --box-density-preset-large;
467
501
  }
468
- .pad-l-5 {
469
- padding-left: var(--box-unit-5);
502
+ .pad, .pad-1 {
503
+ padding: var(--box-density-1);
470
504
  }
471
- .pad-l-6 {
472
- padding-left: var(--box-unit-6);
505
+ .pad-2 {
506
+ padding: var(--box-density-2);
473
507
  }
474
- .pad-l-7 {
475
- padding-left: var(--box-unit-7);
508
+ .pad-3 {
509
+ padding: var(--box-density-3);
476
510
  }
477
- .pad-l-8 {
478
- padding-left: var(--box-unit-8);
511
+ .pad-4 {
512
+ padding: var(--box-density-4);
479
513
  }
480
- .pad-l-9 {
481
- padding-left: var(--box-unit-9);
514
+ .pad-5 {
515
+ padding: var(--box-density-5);
482
516
  }
483
- .pad-l-10 {
484
- padding-left: var(--box-unit-10);
517
+ .pad-6 {
518
+ padding: var(--box-density-6);
485
519
  }
486
- .pad-l-11 {
487
- padding-left: var(--box-unit-11);
520
+ .pad-7 {
521
+ padding: var(--box-density-7);
488
522
  }
489
- .pad-l-12 {
490
- padding-left: var(--box-unit-12);
523
+ .pad-8 {
524
+ padding: var(--box-density-8);
491
525
  }
492
- .pad-l-13 {
493
- padding-left: var(--box-unit-13);
526
+ .pad-9 {
527
+ padding: var(--box-density-9);
494
528
  }
495
- .pad-l-14 {
496
- padding-left: var(--box-unit-14);
529
+ .pad-10 {
530
+ padding: var(--box-density-10);
497
531
  }
498
- .pad-l-15 {
499
- padding-left: var(--box-unit-15);
532
+ .pad-11 {
533
+ padding: var(--box-density-11);
500
534
  }
501
- .pad-l-16 {
502
- padding-left: var(--box-unit-16);
535
+ .pad-12 {
536
+ padding: var(--box-density-12);
503
537
  }
504
- .pad-l-17 {
505
- padding-left: var(--box-unit-17);
538
+
539
+ .pad-t .pad-t-tiny {
540
+ padding: --box-density-preset-tiny;
506
541
  }
507
- .pad-l-18 {
508
- padding-left: var(--box-unit-18);
542
+ .pad-t .pad-t-small {
543
+ padding: --box-density-preset-small;
509
544
  }
510
- .pad-l-19 {
511
- padding-left: var(--box-unit-19);
545
+ .pad-t .pad-t-medium {
546
+ padding: --box-density-preset-medium;
512
547
  }
513
- .pad-l-20 {
514
- padding-left: var(--box-unit-20);
548
+ .pad-t .pad-t-large {
549
+ padding: --box-density-preset-large;
515
550
  }
516
- .pad-l-21 {
517
- padding-left: var(--box-unit-21);
551
+ .pad-t, .pad-t-1 {
552
+ padding-top: var(--box-density-1);
518
553
  }
519
- .pad-l-22 {
520
- padding-left: var(--box-unit-22);
554
+ .pad-t-2 {
555
+ padding-top: var(--box-density-2);
521
556
  }
522
- .pad-l-23 {
523
- padding-left: var(--box-unit-23);
557
+ .pad-t-3 {
558
+ padding-top: var(--box-density-3);
524
559
  }
525
- .pad-l-24 {
526
- padding-left: var(--box-unit-24);
560
+ .pad-t-4 {
561
+ padding-top: var(--box-density-4);
527
562
  }
528
- .pad-l-25 {
529
- padding-left: var(--box-unit-25);
563
+ .pad-t-5 {
564
+ padding-top: var(--box-density-5);
530
565
  }
531
- .pad-l-26 {
532
- padding-left: var(--box-unit-26);
566
+ .pad-t-6 {
567
+ padding-top: var(--box-density-6);
533
568
  }
534
- .pad-l-27 {
535
- padding-left: var(--box-unit-27);
569
+ .pad-t-7 {
570
+ padding-top: var(--box-density-7);
536
571
  }
537
- .pad-l-28 {
538
- padding-left: var(--box-unit-28);
572
+ .pad-t-8 {
573
+ padding-top: var(--box-density-8);
539
574
  }
540
- .pad-l-29 {
541
- padding-left: var(--box-unit-29);
575
+ .pad-t-9 {
576
+ padding-top: var(--box-density-9);
542
577
  }
543
- .pad-l-30 {
544
- padding-left: var(--box-unit-30);
578
+ .pad-t-10 {
579
+ padding-top: var(--box-density-10);
545
580
  }
546
- .pad-l-31 {
547
- padding-left: var(--box-unit-31);
581
+ .pad-t-11 {
582
+ padding-top: var(--box-density-11);
548
583
  }
549
- .pad-l-32 {
550
- padding-left: var(--box-unit-32);
584
+ .pad-t-12 {
585
+ padding-top: var(--box-density-12);
551
586
  }
552
587
 
553
- .pad-r, .pad-r-1 {
554
- padding-right: var(--box-unit-1);
588
+ .pad-b .pad-b-tiny {
589
+ padding: --box-density-preset-tiny;
555
590
  }
556
- .pad-r-2 {
557
- padding-right: var(--box-unit-2);
591
+ .pad-b .pad-b-small {
592
+ padding: --box-density-preset-small;
558
593
  }
559
- .pad-r-3 {
560
- padding-right: var(--box-unit-3);
594
+ .pad-b .pad-b-medium {
595
+ padding: --box-density-preset-medium;
561
596
  }
562
- .pad-r-4 {
563
- padding-right: var(--box-unit-4);
597
+ .pad-b .pad-b-large {
598
+ padding: --box-density-preset-large;
564
599
  }
565
- .pad-r-5 {
566
- padding-right: var(--box-unit-5);
600
+ .pad-b, .pad-b-1 {
601
+ padding-bottom: var(--box-density-1);
567
602
  }
568
- .pad-r-6 {
569
- padding-right: var(--box-unit-6);
603
+ .pad-b-2 {
604
+ padding-bottom: var(--box-density-2);
570
605
  }
571
- .pad-r-7 {
572
- padding-right: var(--box-unit-7);
606
+ .pad-b-3 {
607
+ padding-bottom: var(--box-density-3);
573
608
  }
574
- .pad-r-8 {
575
- padding-right: var(--box-unit-8);
609
+ .pad-b-4 {
610
+ padding-bottom: var(--box-density-4);
576
611
  }
577
- .pad-r-9 {
578
- padding-right: var(--box-unit-9);
612
+ .pad-b-5 {
613
+ padding-bottom: var(--box-density-5);
579
614
  }
580
- .pad-r-10 {
581
- padding-right: var(--box-unit-10);
615
+ .pad-b-6 {
616
+ padding-bottom: var(--box-density-6);
582
617
  }
583
- .pad-r-11 {
584
- padding-right: var(--box-unit-11);
618
+ .pad-b-7 {
619
+ padding-bottom: var(--box-density-7);
585
620
  }
586
- .pad-r-12 {
587
- padding-right: var(--box-unit-12);
621
+ .pad-b-8 {
622
+ padding-bottom: var(--box-density-8);
588
623
  }
589
- .pad-r-13 {
590
- padding-right: var(--box-unit-13);
624
+ .pad-b-9 {
625
+ padding-bottom: var(--box-density-9);
591
626
  }
592
- .pad-r-14 {
593
- padding-right: var(--box-unit-14);
627
+ .pad-b-10 {
628
+ padding-bottom: var(--box-density-10);
594
629
  }
595
- .pad-r-15 {
596
- padding-right: var(--box-unit-15);
630
+ .pad-b-11 {
631
+ padding-bottom: var(--box-density-11);
597
632
  }
598
- .pad-r-16 {
599
- padding-right: var(--box-unit-16);
633
+ .pad-b-12 {
634
+ padding-bottom: var(--box-density-12);
600
635
  }
601
- .pad-r-17 {
602
- padding-right: var(--box-unit-17);
636
+
637
+ .pad-l .pad-l-tiny {
638
+ padding: --box-density-preset-tiny;
603
639
  }
604
- .pad-r-18 {
605
- padding-right: var(--box-unit-18);
640
+ .pad-l .pad-l-small {
641
+ padding: --box-density-preset-small;
606
642
  }
607
- .pad-r-19 {
608
- padding-right: var(--box-unit-19);
643
+ .pad-l .pad-l-medium {
644
+ padding: --box-density-preset-medium;
609
645
  }
610
- .pad-r-20 {
611
- padding-right: var(--box-unit-20);
646
+ .pad-l .pad-l-large {
647
+ padding: --box-density-preset-large;
612
648
  }
613
- .pad-r-21 {
614
- padding-right: var(--box-unit-21);
649
+ .pad-l, .pad-l-1 {
650
+ padding-left: var(--box-density-1);
615
651
  }
616
- .pad-r-22 {
617
- padding-right: var(--box-unit-22);
652
+ .pad-l-2 {
653
+ padding-left: var(--box-density-2);
618
654
  }
619
- .pad-r-23 {
620
- padding-right: var(--box-unit-23);
655
+ .pad-l-3 {
656
+ padding-left: var(--box-density-3);
621
657
  }
622
- .pad-r-24 {
623
- padding-right: var(--box-unit-24);
658
+ .pad-l-4 {
659
+ padding-left: var(--box-density-4);
624
660
  }
625
- .pad-r-25 {
626
- padding-right: var(--box-unit-25);
661
+ .pad-l-5 {
662
+ padding-left: var(--box-density-5);
627
663
  }
628
- .pad-r-26 {
629
- padding-right: var(--box-unit-26);
664
+ .pad-l-6 {
665
+ padding-left: var(--box-density-6);
630
666
  }
631
- .pad-r-27 {
632
- padding-right: var(--box-unit-27);
667
+ .pad-l-7 {
668
+ padding-left: var(--box-density-7);
633
669
  }
634
- .pad-r-28 {
635
- padding-right: var(--box-unit-28);
670
+ .pad-l-8 {
671
+ padding-left: var(--box-density-8);
636
672
  }
637
- .pad-r-29 {
638
- padding-right: var(--box-unit-29);
673
+ .pad-l-9 {
674
+ padding-left: var(--box-density-9);
639
675
  }
640
- .pad-r-30 {
641
- padding-right: var(--box-unit-30);
676
+ .pad-l-10 {
677
+ padding-left: var(--box-density-10);
642
678
  }
643
- .pad-r-31 {
644
- padding-right: var(--box-unit-31);
679
+ .pad-l-11 {
680
+ padding-left: var(--box-density-11);
645
681
  }
646
- .pad-r-32 {
647
- padding-right: var(--box-unit-32);
682
+ .pad-l-12 {
683
+ padding-left: var(--box-density-12);
648
684
  }
649
685
 
650
- .pad-all, .pad-all-1 {
651
- padding: var(--box-unit-1);
686
+ .pad-r .pad-r-tiny {
687
+ padding: --box-density-preset-tiny;
652
688
  }
653
- .pad-all-2 {
654
- padding: var(--box-unit-2);
689
+ .pad-r .pad-r-small {
690
+ padding: --box-density-preset-small;
655
691
  }
656
- .pad-all-3 {
657
- padding: var(--box-unit-3);
692
+ .pad-r .pad-r-medium {
693
+ padding: --box-density-preset-medium;
658
694
  }
659
- .pad-all-4 {
660
- padding: var(--box-unit-4);
695
+ .pad-r .pad-r-large {
696
+ padding: --box-density-preset-large;
661
697
  }
662
- .pad-all-5 {
663
- padding: var(--box-unit-5);
698
+ .pad-r, .pad-r-1 {
699
+ padding-right: var(--box-density-1);
664
700
  }
665
- .pad-all-6 {
666
- padding: var(--box-unit-6);
701
+ .pad-r-2 {
702
+ padding-right: var(--box-density-2);
667
703
  }
668
- .pad-all-7 {
669
- padding: var(--box-unit-7);
704
+ .pad-r-3 {
705
+ padding-right: var(--box-density-3);
670
706
  }
671
- .pad-all-8 {
672
- padding: var(--box-unit-8);
707
+ .pad-r-4 {
708
+ padding-right: var(--box-density-4);
673
709
  }
674
- .pad-all-9 {
675
- padding: var(--box-unit-9);
710
+ .pad-r-5 {
711
+ padding-right: var(--box-density-5);
676
712
  }
677
- .pad-all-10 {
678
- padding: var(--box-unit-10);
713
+ .pad-r-6 {
714
+ padding-right: var(--box-density-6);
679
715
  }
680
- .pad-all-11 {
681
- padding: var(--box-unit-11);
716
+ .pad-r-7 {
717
+ padding-right: var(--box-density-7);
682
718
  }
683
- .pad-all-12 {
684
- padding: var(--box-unit-12);
719
+ .pad-r-8 {
720
+ padding-right: var(--box-density-8);
685
721
  }
686
- .pad-all-13 {
687
- padding: var(--box-unit-13);
722
+ .pad-r-9 {
723
+ padding-right: var(--box-density-9);
688
724
  }
689
- .pad-all-14 {
690
- padding: var(--box-unit-14);
725
+ .pad-r-10 {
726
+ padding-right: var(--box-density-10);
691
727
  }
692
- .pad-all-15 {
693
- padding: var(--box-unit-15);
728
+ .pad-r-11 {
729
+ padding-right: var(--box-density-11);
694
730
  }
695
- .pad-all-16 {
696
- padding: var(--box-unit-16);
731
+ .pad-r-12 {
732
+ padding-right: var(--box-density-12);
697
733
  }
698
- .pad-all-17 {
699
- padding: var(--box-unit-17);
734
+
735
+ .pad-all .pad-all-tiny {
736
+ padding: --box-density-preset-tiny;
700
737
  }
701
- .pad-all-18 {
702
- padding: var(--box-unit-18);
738
+ .pad-all .pad-all-small {
739
+ padding: --box-density-preset-small;
703
740
  }
704
- .pad-all-19 {
705
- padding: var(--box-unit-19);
741
+ .pad-all .pad-all-medium {
742
+ padding: --box-density-preset-medium;
706
743
  }
707
- .pad-all-20 {
708
- padding: var(--box-unit-20);
744
+ .pad-all .pad-all-large {
745
+ padding: --box-density-preset-large;
709
746
  }
710
- .pad-all-21 {
711
- padding: var(--box-unit-21);
747
+ .pad-all, .pad-all-1 {
748
+ padding: var(--box-density-1);
712
749
  }
713
- .pad-all-22 {
714
- padding: var(--box-unit-22);
750
+ .pad-all-2 {
751
+ padding: var(--box-density-2);
715
752
  }
716
- .pad-all-23 {
717
- padding: var(--box-unit-23);
753
+ .pad-all-3 {
754
+ padding: var(--box-density-3);
718
755
  }
719
- .pad-all-24 {
720
- padding: var(--box-unit-24);
756
+ .pad-all-4 {
757
+ padding: var(--box-density-4);
721
758
  }
722
- .pad-all-25 {
723
- padding: var(--box-unit-25);
759
+ .pad-all-5 {
760
+ padding: var(--box-density-5);
724
761
  }
725
- .pad-all-26 {
726
- padding: var(--box-unit-26);
762
+ .pad-all-6 {
763
+ padding: var(--box-density-6);
727
764
  }
728
- .pad-all-27 {
729
- padding: var(--box-unit-27);
765
+ .pad-all-7 {
766
+ padding: var(--box-density-7);
730
767
  }
731
- .pad-all-28 {
732
- padding: var(--box-unit-28);
768
+ .pad-all-8 {
769
+ padding: var(--box-density-8);
733
770
  }
734
- .pad-all-29 {
735
- padding: var(--box-unit-29);
771
+ .pad-all-9 {
772
+ padding: var(--box-density-9);
736
773
  }
737
- .pad-all-30 {
738
- padding: var(--box-unit-30);
774
+ .pad-all-10 {
775
+ padding: var(--box-density-10);
739
776
  }
740
- .pad-all-31 {
741
- padding: var(--box-unit-31);
777
+ .pad-all-11 {
778
+ padding: var(--box-density-11);
742
779
  }
743
- .pad-all-32 {
744
- padding: var(--box-unit-32);
780
+ .pad-all-12 {
781
+ padding: var(--box-density-12);
745
782
  }
746
783
 
784
+ .pad-u .pad-u-tiny {
785
+ padding: --box-density-preset-tiny;
786
+ }
787
+ .pad-u .pad-u-small {
788
+ padding: --box-density-preset-small;
789
+ }
790
+ .pad-u .pad-u-medium {
791
+ padding: --box-density-preset-medium;
792
+ }
793
+ .pad-u .pad-u-large {
794
+ padding: --box-density-preset-large;
795
+ }
747
796
  .pad-u, .pad-u-1 {
748
- padding-bottom: var(--box-unit-1);
749
- padding-left: var(--box-unit-1);
750
- padding-right: var(--box-unit-1);
797
+ padding-bottom: var(--box-density-1);
798
+ padding-left: var(--box-density-1);
799
+ padding-right: var(--box-density-1);
751
800
  }
752
801
  .pad-u-2 {
753
- padding-bottom: var(--box-unit-2);
754
- padding-left: var(--box-unit-2);
755
- padding-right: var(--box-unit-2);
802
+ padding-bottom: var(--box-density-2);
803
+ padding-left: var(--box-density-2);
804
+ padding-right: var(--box-density-2);
756
805
  }
757
806
  .pad-u-3 {
758
- padding-bottom: var(--box-unit-3);
759
- padding-left: var(--box-unit-3);
760
- padding-right: var(--box-unit-3);
807
+ padding-bottom: var(--box-density-3);
808
+ padding-left: var(--box-density-3);
809
+ padding-right: var(--box-density-3);
761
810
  }
762
811
  .pad-u-4 {
763
- padding-bottom: var(--box-unit-4);
764
- padding-left: var(--box-unit-4);
765
- padding-right: var(--box-unit-4);
812
+ padding-bottom: var(--box-density-4);
813
+ padding-left: var(--box-density-4);
814
+ padding-right: var(--box-density-4);
766
815
  }
767
816
  .pad-u-5 {
768
- padding-bottom: var(--box-unit-5);
769
- padding-left: var(--box-unit-5);
770
- padding-right: var(--box-unit-5);
817
+ padding-bottom: var(--box-density-5);
818
+ padding-left: var(--box-density-5);
819
+ padding-right: var(--box-density-5);
771
820
  }
772
821
  .pad-u-6 {
773
- padding-bottom: var(--box-unit-6);
774
- padding-left: var(--box-unit-6);
775
- padding-right: var(--box-unit-6);
822
+ padding-bottom: var(--box-density-6);
823
+ padding-left: var(--box-density-6);
824
+ padding-right: var(--box-density-6);
776
825
  }
777
826
  .pad-u-7 {
778
- padding-bottom: var(--box-unit-7);
779
- padding-left: var(--box-unit-7);
780
- padding-right: var(--box-unit-7);
827
+ padding-bottom: var(--box-density-7);
828
+ padding-left: var(--box-density-7);
829
+ padding-right: var(--box-density-7);
781
830
  }
782
831
  .pad-u-8 {
783
- padding-bottom: var(--box-unit-8);
784
- padding-left: var(--box-unit-8);
785
- padding-right: var(--box-unit-8);
832
+ padding-bottom: var(--box-density-8);
833
+ padding-left: var(--box-density-8);
834
+ padding-right: var(--box-density-8);
786
835
  }
787
836
  .pad-u-9 {
788
- padding-bottom: var(--box-unit-9);
789
- padding-left: var(--box-unit-9);
790
- padding-right: var(--box-unit-9);
837
+ padding-bottom: var(--box-density-9);
838
+ padding-left: var(--box-density-9);
839
+ padding-right: var(--box-density-9);
791
840
  }
792
841
  .pad-u-10 {
793
- padding-bottom: var(--box-unit-10);
794
- padding-left: var(--box-unit-10);
795
- padding-right: var(--box-unit-10);
842
+ padding-bottom: var(--box-density-10);
843
+ padding-left: var(--box-density-10);
844
+ padding-right: var(--box-density-10);
796
845
  }
797
846
  .pad-u-11 {
798
- padding-bottom: var(--box-unit-11);
799
- padding-left: var(--box-unit-11);
800
- padding-right: var(--box-unit-11);
847
+ padding-bottom: var(--box-density-11);
848
+ padding-left: var(--box-density-11);
849
+ padding-right: var(--box-density-11);
801
850
  }
802
851
  .pad-u-12 {
803
- padding-bottom: var(--box-unit-12);
804
- padding-left: var(--box-unit-12);
805
- padding-right: var(--box-unit-12);
806
- }
807
- .pad-u-13 {
808
- padding-bottom: var(--box-unit-13);
809
- padding-left: var(--box-unit-13);
810
- padding-right: var(--box-unit-13);
811
- }
812
- .pad-u-14 {
813
- padding-bottom: var(--box-unit-14);
814
- padding-left: var(--box-unit-14);
815
- padding-right: var(--box-unit-14);
816
- }
817
- .pad-u-15 {
818
- padding-bottom: var(--box-unit-15);
819
- padding-left: var(--box-unit-15);
820
- padding-right: var(--box-unit-15);
821
- }
822
- .pad-u-16 {
823
- padding-bottom: var(--box-unit-16);
824
- padding-left: var(--box-unit-16);
825
- padding-right: var(--box-unit-16);
826
- }
827
- .pad-u-17 {
828
- padding-bottom: var(--box-unit-17);
829
- padding-left: var(--box-unit-17);
830
- padding-right: var(--box-unit-17);
831
- }
832
- .pad-u-18 {
833
- padding-bottom: var(--box-unit-18);
834
- padding-left: var(--box-unit-18);
835
- padding-right: var(--box-unit-18);
836
- }
837
- .pad-u-19 {
838
- padding-bottom: var(--box-unit-19);
839
- padding-left: var(--box-unit-19);
840
- padding-right: var(--box-unit-19);
841
- }
842
- .pad-u-20 {
843
- padding-bottom: var(--box-unit-20);
844
- padding-left: var(--box-unit-20);
845
- padding-right: var(--box-unit-20);
846
- }
847
- .pad-u-21 {
848
- padding-bottom: var(--box-unit-21);
849
- padding-left: var(--box-unit-21);
850
- padding-right: var(--box-unit-21);
851
- }
852
- .pad-u-22 {
853
- padding-bottom: var(--box-unit-22);
854
- padding-left: var(--box-unit-22);
855
- padding-right: var(--box-unit-22);
856
- }
857
- .pad-u-23 {
858
- padding-bottom: var(--box-unit-23);
859
- padding-left: var(--box-unit-23);
860
- padding-right: var(--box-unit-23);
861
- }
862
- .pad-u-24 {
863
- padding-bottom: var(--box-unit-24);
864
- padding-left: var(--box-unit-24);
865
- padding-right: var(--box-unit-24);
866
- }
867
- .pad-u-25 {
868
- padding-bottom: var(--box-unit-25);
869
- padding-left: var(--box-unit-25);
870
- padding-right: var(--box-unit-25);
871
- }
872
- .pad-u-26 {
873
- padding-bottom: var(--box-unit-26);
874
- padding-left: var(--box-unit-26);
875
- padding-right: var(--box-unit-26);
876
- }
877
- .pad-u-27 {
878
- padding-bottom: var(--box-unit-27);
879
- padding-left: var(--box-unit-27);
880
- padding-right: var(--box-unit-27);
881
- }
882
- .pad-u-28 {
883
- padding-bottom: var(--box-unit-28);
884
- padding-left: var(--box-unit-28);
885
- padding-right: var(--box-unit-28);
886
- }
887
- .pad-u-29 {
888
- padding-bottom: var(--box-unit-29);
889
- padding-left: var(--box-unit-29);
890
- padding-right: var(--box-unit-29);
891
- }
892
- .pad-u-30 {
893
- padding-bottom: var(--box-unit-30);
894
- padding-left: var(--box-unit-30);
895
- padding-right: var(--box-unit-30);
896
- }
897
- .pad-u-31 {
898
- padding-bottom: var(--box-unit-31);
899
- padding-left: var(--box-unit-31);
900
- padding-right: var(--box-unit-31);
901
- }
902
- .pad-u-32 {
903
- padding-bottom: var(--box-unit-32);
904
- padding-left: var(--box-unit-32);
905
- padding-right: var(--box-unit-32);
852
+ padding-bottom: var(--box-density-12);
853
+ padding-left: var(--box-density-12);
854
+ padding-right: var(--box-density-12);
906
855
  }
907
856
 
857
+ .pad-ii .pad-ii-tiny {
858
+ padding: --box-density-preset-tiny;
859
+ }
860
+ .pad-ii .pad-ii-small {
861
+ padding: --box-density-preset-small;
862
+ }
863
+ .pad-ii .pad-ii-medium {
864
+ padding: --box-density-preset-medium;
865
+ }
866
+ .pad-ii .pad-ii-large {
867
+ padding: --box-density-preset-large;
868
+ }
908
869
  .pad-ii, .pad-ii-1 {
909
- padding-left: var(--box-unit-1);
910
- padding-right: var(--box-unit-1);
870
+ padding-left: var(--box-density-1);
871
+ padding-right: var(--box-density-1);
911
872
  }
912
873
  .pad-ii-2 {
913
- padding-left: var(--box-unit-2);
914
- padding-right: var(--box-unit-2);
874
+ padding-left: var(--box-density-2);
875
+ padding-right: var(--box-density-2);
915
876
  }
916
877
  .pad-ii-3 {
917
- padding-left: var(--box-unit-3);
918
- padding-right: var(--box-unit-3);
878
+ padding-left: var(--box-density-3);
879
+ padding-right: var(--box-density-3);
919
880
  }
920
881
  .pad-ii-4 {
921
- padding-left: var(--box-unit-4);
922
- padding-right: var(--box-unit-4);
882
+ padding-left: var(--box-density-4);
883
+ padding-right: var(--box-density-4);
923
884
  }
924
885
  .pad-ii-5 {
925
- padding-left: var(--box-unit-5);
926
- padding-right: var(--box-unit-5);
886
+ padding-left: var(--box-density-5);
887
+ padding-right: var(--box-density-5);
927
888
  }
928
889
  .pad-ii-6 {
929
- padding-left: var(--box-unit-6);
930
- padding-right: var(--box-unit-6);
890
+ padding-left: var(--box-density-6);
891
+ padding-right: var(--box-density-6);
931
892
  }
932
893
  .pad-ii-7 {
933
- padding-left: var(--box-unit-7);
934
- padding-right: var(--box-unit-7);
894
+ padding-left: var(--box-density-7);
895
+ padding-right: var(--box-density-7);
935
896
  }
936
897
  .pad-ii-8 {
937
- padding-left: var(--box-unit-8);
938
- padding-right: var(--box-unit-8);
898
+ padding-left: var(--box-density-8);
899
+ padding-right: var(--box-density-8);
939
900
  }
940
901
  .pad-ii-9 {
941
- padding-left: var(--box-unit-9);
942
- padding-right: var(--box-unit-9);
902
+ padding-left: var(--box-density-9);
903
+ padding-right: var(--box-density-9);
943
904
  }
944
905
  .pad-ii-10 {
945
- padding-left: var(--box-unit-10);
946
- padding-right: var(--box-unit-10);
906
+ padding-left: var(--box-density-10);
907
+ padding-right: var(--box-density-10);
947
908
  }
948
909
  .pad-ii-11 {
949
- padding-left: var(--box-unit-11);
950
- padding-right: var(--box-unit-11);
910
+ padding-left: var(--box-density-11);
911
+ padding-right: var(--box-density-11);
951
912
  }
952
913
  .pad-ii-12 {
953
- padding-left: var(--box-unit-12);
954
- padding-right: var(--box-unit-12);
955
- }
956
- .pad-ii-13 {
957
- padding-left: var(--box-unit-13);
958
- padding-right: var(--box-unit-13);
959
- }
960
- .pad-ii-14 {
961
- padding-left: var(--box-unit-14);
962
- padding-right: var(--box-unit-14);
963
- }
964
- .pad-ii-15 {
965
- padding-left: var(--box-unit-15);
966
- padding-right: var(--box-unit-15);
967
- }
968
- .pad-ii-16 {
969
- padding-left: var(--box-unit-16);
970
- padding-right: var(--box-unit-16);
971
- }
972
- .pad-ii-17 {
973
- padding-left: var(--box-unit-17);
974
- padding-right: var(--box-unit-17);
975
- }
976
- .pad-ii-18 {
977
- padding-left: var(--box-unit-18);
978
- padding-right: var(--box-unit-18);
979
- }
980
- .pad-ii-19 {
981
- padding-left: var(--box-unit-19);
982
- padding-right: var(--box-unit-19);
983
- }
984
- .pad-ii-20 {
985
- padding-left: var(--box-unit-20);
986
- padding-right: var(--box-unit-20);
987
- }
988
- .pad-ii-21 {
989
- padding-left: var(--box-unit-21);
990
- padding-right: var(--box-unit-21);
991
- }
992
- .pad-ii-22 {
993
- padding-left: var(--box-unit-22);
994
- padding-right: var(--box-unit-22);
995
- }
996
- .pad-ii-23 {
997
- padding-left: var(--box-unit-23);
998
- padding-right: var(--box-unit-23);
999
- }
1000
- .pad-ii-24 {
1001
- padding-left: var(--box-unit-24);
1002
- padding-right: var(--box-unit-24);
914
+ padding-left: var(--box-density-12);
915
+ padding-right: var(--box-density-12);
1003
916
  }
1004
- .pad-ii-25 {
1005
- padding-left: var(--box-unit-25);
1006
- padding-right: var(--box-unit-25);
1007
- }
1008
- .pad-ii-26 {
1009
- padding-left: var(--box-unit-26);
1010
- padding-right: var(--box-unit-26);
1011
- }
1012
- .pad-ii-27 {
1013
- padding-left: var(--box-unit-27);
1014
- padding-right: var(--box-unit-27);
1015
- }
1016
- .pad-ii-28 {
1017
- padding-left: var(--box-unit-28);
1018
- padding-right: var(--box-unit-28);
1019
- }
1020
- .pad-ii-29 {
1021
- padding-left: var(--box-unit-29);
1022
- padding-right: var(--box-unit-29);
917
+
918
+ .pad-tb .pad-tb-tiny {
919
+ padding: --box-density-preset-tiny;
1023
920
  }
1024
- .pad-ii-30 {
1025
- padding-left: var(--box-unit-30);
1026
- padding-right: var(--box-unit-30);
921
+ .pad-tb .pad-tb-small {
922
+ padding: --box-density-preset-small;
1027
923
  }
1028
- .pad-ii-31 {
1029
- padding-left: var(--box-unit-31);
1030
- padding-right: var(--box-unit-31);
924
+ .pad-tb .pad-tb-medium {
925
+ padding: --box-density-preset-medium;
1031
926
  }
1032
- .pad-ii-32 {
1033
- padding-left: var(--box-unit-32);
1034
- padding-right: var(--box-unit-32);
927
+ .pad-tb .pad-tb-large {
928
+ padding: --box-density-preset-large;
1035
929
  }
1036
-
1037
930
  .pad-tb, .pad-tb-1 {
1038
- padding-top: var(--box-unit-1);
1039
- padding-bottom: var(--box-unit-1);
931
+ padding-top: var(--box-density-1);
932
+ padding-bottom: var(--box-density-1);
1040
933
  }
1041
934
  .pad-tb-2 {
1042
- padding-top: var(--box-unit-2);
1043
- padding-bottom: var(--box-unit-2);
935
+ padding-top: var(--box-density-2);
936
+ padding-bottom: var(--box-density-2);
1044
937
  }
1045
938
  .pad-tb-3 {
1046
- padding-top: var(--box-unit-3);
1047
- padding-bottom: var(--box-unit-3);
939
+ padding-top: var(--box-density-3);
940
+ padding-bottom: var(--box-density-3);
1048
941
  }
1049
942
  .pad-tb-4 {
1050
- padding-top: var(--box-unit-4);
1051
- padding-bottom: var(--box-unit-4);
943
+ padding-top: var(--box-density-4);
944
+ padding-bottom: var(--box-density-4);
1052
945
  }
1053
946
  .pad-tb-5 {
1054
- padding-top: var(--box-unit-5);
1055
- padding-bottom: var(--box-unit-5);
947
+ padding-top: var(--box-density-5);
948
+ padding-bottom: var(--box-density-5);
1056
949
  }
1057
950
  .pad-tb-6 {
1058
- padding-top: var(--box-unit-6);
1059
- padding-bottom: var(--box-unit-6);
951
+ padding-top: var(--box-density-6);
952
+ padding-bottom: var(--box-density-6);
1060
953
  }
1061
954
  .pad-tb-7 {
1062
- padding-top: var(--box-unit-7);
1063
- padding-bottom: var(--box-unit-7);
955
+ padding-top: var(--box-density-7);
956
+ padding-bottom: var(--box-density-7);
1064
957
  }
1065
958
  .pad-tb-8 {
1066
- padding-top: var(--box-unit-8);
1067
- padding-bottom: var(--box-unit-8);
959
+ padding-top: var(--box-density-8);
960
+ padding-bottom: var(--box-density-8);
1068
961
  }
1069
962
  .pad-tb-9 {
1070
- padding-top: var(--box-unit-9);
1071
- padding-bottom: var(--box-unit-9);
963
+ padding-top: var(--box-density-9);
964
+ padding-bottom: var(--box-density-9);
1072
965
  }
1073
966
  .pad-tb-10 {
1074
- padding-top: var(--box-unit-10);
1075
- padding-bottom: var(--box-unit-10);
967
+ padding-top: var(--box-density-10);
968
+ padding-bottom: var(--box-density-10);
1076
969
  }
1077
970
  .pad-tb-11 {
1078
- padding-top: var(--box-unit-11);
1079
- padding-bottom: var(--box-unit-11);
971
+ padding-top: var(--box-density-11);
972
+ padding-bottom: var(--box-density-11);
1080
973
  }
1081
974
  .pad-tb-12 {
1082
- padding-top: var(--box-unit-12);
1083
- padding-bottom: var(--box-unit-12);
1084
- }
1085
- .pad-tb-13 {
1086
- padding-top: var(--box-unit-13);
1087
- padding-bottom: var(--box-unit-13);
1088
- }
1089
- .pad-tb-14 {
1090
- padding-top: var(--box-unit-14);
1091
- padding-bottom: var(--box-unit-14);
1092
- }
1093
- .pad-tb-15 {
1094
- padding-top: var(--box-unit-15);
1095
- padding-bottom: var(--box-unit-15);
1096
- }
1097
- .pad-tb-16 {
1098
- padding-top: var(--box-unit-16);
1099
- padding-bottom: var(--box-unit-16);
1100
- }
1101
- .pad-tb-17 {
1102
- padding-top: var(--box-unit-17);
1103
- padding-bottom: var(--box-unit-17);
1104
- }
1105
- .pad-tb-18 {
1106
- padding-top: var(--box-unit-18);
1107
- padding-bottom: var(--box-unit-18);
1108
- }
1109
- .pad-tb-19 {
1110
- padding-top: var(--box-unit-19);
1111
- padding-bottom: var(--box-unit-19);
1112
- }
1113
- .pad-tb-20 {
1114
- padding-top: var(--box-unit-20);
1115
- padding-bottom: var(--box-unit-20);
1116
- }
1117
- .pad-tb-21 {
1118
- padding-top: var(--box-unit-21);
1119
- padding-bottom: var(--box-unit-21);
1120
- }
1121
- .pad-tb-22 {
1122
- padding-top: var(--box-unit-22);
1123
- padding-bottom: var(--box-unit-22);
1124
- }
1125
- .pad-tb-23 {
1126
- padding-top: var(--box-unit-23);
1127
- padding-bottom: var(--box-unit-23);
1128
- }
1129
- .pad-tb-24 {
1130
- padding-top: var(--box-unit-24);
1131
- padding-bottom: var(--box-unit-24);
1132
- }
1133
- .pad-tb-25 {
1134
- padding-top: var(--box-unit-25);
1135
- padding-bottom: var(--box-unit-25);
1136
- }
1137
- .pad-tb-26 {
1138
- padding-top: var(--box-unit-26);
1139
- padding-bottom: var(--box-unit-26);
1140
- }
1141
- .pad-tb-27 {
1142
- padding-top: var(--box-unit-27);
1143
- padding-bottom: var(--box-unit-27);
1144
- }
1145
- .pad-tb-28 {
1146
- padding-top: var(--box-unit-28);
1147
- padding-bottom: var(--box-unit-28);
1148
- }
1149
- .pad-tb-29 {
1150
- padding-top: var(--box-unit-29);
1151
- padding-bottom: var(--box-unit-29);
1152
- }
1153
- .pad-tb-30 {
1154
- padding-top: var(--box-unit-30);
1155
- padding-bottom: var(--box-unit-30);
1156
- }
1157
- .pad-tb-31 {
1158
- padding-top: var(--box-unit-31);
1159
- padding-bottom: var(--box-unit-31);
1160
- }
1161
- .pad-tb-32 {
1162
- padding-top: var(--box-unit-32);
1163
- padding-bottom: var(--box-unit-32);
975
+ padding-top: var(--box-density-12);
976
+ padding-bottom: var(--box-density-12);
1164
977
  }
1165
978
 
1166
- .marg, .marg-1 {
1167
- margin: var(--box-unit-1);
1168
- }
1169
- .marg-2 {
1170
- margin: var(--box-unit-2);
1171
- }
1172
- .marg-3 {
1173
- margin: var(--box-unit-3);
1174
- }
1175
- .marg-4 {
1176
- margin: var(--box-unit-4);
1177
- }
1178
- .marg-5 {
1179
- margin: var(--box-unit-5);
1180
- }
1181
- .marg-6 {
1182
- margin: var(--box-unit-6);
1183
- }
1184
- .marg-7 {
1185
- margin: var(--box-unit-7);
1186
- }
1187
- .marg-8 {
1188
- margin: var(--box-unit-8);
1189
- }
1190
- .marg-9 {
1191
- margin: var(--box-unit-9);
1192
- }
1193
- .marg-10 {
1194
- margin: var(--box-unit-10);
1195
- }
1196
- .marg-11 {
1197
- margin: var(--box-unit-11);
1198
- }
1199
- .marg-12 {
1200
- margin: var(--box-unit-12);
1201
- }
1202
- .marg-13 {
1203
- margin: var(--box-unit-13);
1204
- }
1205
- .marg-14 {
1206
- margin: var(--box-unit-14);
1207
- }
1208
- .marg-15 {
1209
- margin: var(--box-unit-15);
1210
- }
1211
- .marg-16 {
1212
- margin: var(--box-unit-16);
1213
- }
1214
- .marg-17 {
1215
- margin: var(--box-unit-17);
1216
- }
1217
- .marg-18 {
1218
- margin: var(--box-unit-18);
1219
- }
1220
- .marg-19 {
1221
- margin: var(--box-unit-19);
1222
- }
1223
- .marg-20 {
1224
- margin: var(--box-unit-20);
1225
- }
1226
- .marg-21 {
1227
- margin: var(--box-unit-21);
1228
- }
1229
- .marg-22 {
1230
- margin: var(--box-unit-22);
1231
- }
1232
- .marg-23 {
1233
- margin: var(--box-unit-23);
1234
- }
1235
- .marg-24 {
1236
- margin: var(--box-unit-24);
1237
- }
1238
- .marg-25 {
1239
- margin: var(--box-unit-25);
1240
- }
1241
- .marg-26 {
1242
- margin: var(--box-unit-26);
1243
- }
1244
- .marg-27 {
1245
- margin: var(--box-unit-27);
1246
- }
1247
- .marg-28 {
1248
- margin: var(--box-unit-28);
1249
- }
1250
- .marg-29 {
1251
- margin: var(--box-unit-29);
1252
- }
1253
- .marg-30 {
1254
- margin: var(--box-unit-30);
979
+ .border, .border-1 {
980
+ border: 1px solid #ededed;
1255
981
  }
1256
- .marg-31 {
1257
- margin: var(--box-unit-31);
982
+ .border-2 {
983
+ border: 2px solid #ededed;
1258
984
  }
1259
- .marg-32 {
1260
- margin: var(--box-unit-32);
985
+ .border-3 {
986
+ border: 3px solid #ededed;
1261
987
  }
1262
988
 
1263
- .marg-t, .marg-t-1 {
1264
- margin-top: var(--box-unit-1);
1265
- }
1266
- .marg-t-2 {
1267
- margin-top: var(--box-unit-2);
1268
- }
1269
- .marg-t-3 {
1270
- margin-top: var(--box-unit-3);
1271
- }
1272
- .marg-t-4 {
1273
- margin-top: var(--box-unit-4);
1274
- }
1275
- .marg-t-5 {
1276
- margin-top: var(--box-unit-5);
1277
- }
1278
- .marg-t-6 {
1279
- margin-top: var(--box-unit-6);
1280
- }
1281
- .marg-t-7 {
1282
- margin-top: var(--box-unit-7);
1283
- }
1284
- .marg-t-8 {
1285
- margin-top: var(--box-unit-8);
1286
- }
1287
- .marg-t-9 {
1288
- margin-top: var(--box-unit-9);
1289
- }
1290
- .marg-t-10 {
1291
- margin-top: var(--box-unit-10);
1292
- }
1293
- .marg-t-11 {
1294
- margin-top: var(--box-unit-11);
1295
- }
1296
- .marg-t-12 {
1297
- margin-top: var(--box-unit-12);
1298
- }
1299
- .marg-t-13 {
1300
- margin-top: var(--box-unit-13);
1301
- }
1302
- .marg-t-14 {
1303
- margin-top: var(--box-unit-14);
1304
- }
1305
- .marg-t-15 {
1306
- margin-top: var(--box-unit-15);
1307
- }
1308
- .marg-t-16 {
1309
- margin-top: var(--box-unit-16);
1310
- }
1311
- .marg-t-17 {
1312
- margin-top: var(--box-unit-17);
1313
- }
1314
- .marg-t-18 {
1315
- margin-top: var(--box-unit-18);
1316
- }
1317
- .marg-t-19 {
1318
- margin-top: var(--box-unit-19);
1319
- }
1320
- .marg-t-20 {
1321
- margin-top: var(--box-unit-20);
1322
- }
1323
- .marg-t-21 {
1324
- margin-top: var(--box-unit-21);
1325
- }
1326
- .marg-t-22 {
1327
- margin-top: var(--box-unit-22);
1328
- }
1329
- .marg-t-23 {
1330
- margin-top: var(--box-unit-23);
1331
- }
1332
- .marg-t-24 {
1333
- margin-top: var(--box-unit-24);
1334
- }
1335
- .marg-t-25 {
1336
- margin-top: var(--box-unit-25);
1337
- }
1338
- .marg-t-26 {
1339
- margin-top: var(--box-unit-26);
1340
- }
1341
- .marg-t-27 {
1342
- margin-top: var(--box-unit-27);
1343
- }
1344
- .marg-t-28 {
1345
- margin-top: var(--box-unit-28);
1346
- }
1347
- .marg-t-29 {
1348
- margin-top: var(--box-unit-29);
1349
- }
1350
- .marg-t-30 {
1351
- margin-top: var(--box-unit-30);
989
+ .border-t, .border-t-1 {
990
+ border-top: 1px solid #ededed;
1352
991
  }
1353
- .marg-t-31 {
1354
- margin-top: var(--box-unit-31);
992
+ .border-t-2 {
993
+ border-top: 2px solid #ededed;
1355
994
  }
1356
- .marg-t-32 {
1357
- margin-top: var(--box-unit-32);
995
+ .border-t-3 {
996
+ border-top: 3px solid #ededed;
1358
997
  }
1359
998
 
1360
- .marg-b, .marg-b-1 {
1361
- margin-bottom: var(--box-unit-1);
1362
- }
1363
- .marg-b-2 {
1364
- margin-bottom: var(--box-unit-2);
1365
- }
1366
- .marg-b-3 {
1367
- margin-bottom: var(--box-unit-3);
1368
- }
1369
- .marg-b-4 {
1370
- margin-bottom: var(--box-unit-4);
1371
- }
1372
- .marg-b-5 {
1373
- margin-bottom: var(--box-unit-5);
1374
- }
1375
- .marg-b-6 {
1376
- margin-bottom: var(--box-unit-6);
1377
- }
1378
- .marg-b-7 {
1379
- margin-bottom: var(--box-unit-7);
1380
- }
1381
- .marg-b-8 {
1382
- margin-bottom: var(--box-unit-8);
1383
- }
1384
- .marg-b-9 {
1385
- margin-bottom: var(--box-unit-9);
1386
- }
1387
- .marg-b-10 {
1388
- margin-bottom: var(--box-unit-10);
1389
- }
1390
- .marg-b-11 {
1391
- margin-bottom: var(--box-unit-11);
1392
- }
1393
- .marg-b-12 {
1394
- margin-bottom: var(--box-unit-12);
1395
- }
1396
- .marg-b-13 {
1397
- margin-bottom: var(--box-unit-13);
1398
- }
1399
- .marg-b-14 {
1400
- margin-bottom: var(--box-unit-14);
1401
- }
1402
- .marg-b-15 {
1403
- margin-bottom: var(--box-unit-15);
1404
- }
1405
- .marg-b-16 {
1406
- margin-bottom: var(--box-unit-16);
1407
- }
1408
- .marg-b-17 {
1409
- margin-bottom: var(--box-unit-17);
1410
- }
1411
- .marg-b-18 {
1412
- margin-bottom: var(--box-unit-18);
1413
- }
1414
- .marg-b-19 {
1415
- margin-bottom: var(--box-unit-19);
1416
- }
1417
- .marg-b-20 {
1418
- margin-bottom: var(--box-unit-20);
1419
- }
1420
- .marg-b-21 {
1421
- margin-bottom: var(--box-unit-21);
1422
- }
1423
- .marg-b-22 {
1424
- margin-bottom: var(--box-unit-22);
1425
- }
1426
- .marg-b-23 {
1427
- margin-bottom: var(--box-unit-23);
1428
- }
1429
- .marg-b-24 {
1430
- margin-bottom: var(--box-unit-24);
1431
- }
1432
- .marg-b-25 {
1433
- margin-bottom: var(--box-unit-25);
1434
- }
1435
- .marg-b-26 {
1436
- margin-bottom: var(--box-unit-26);
1437
- }
1438
- .marg-b-27 {
1439
- margin-bottom: var(--box-unit-27);
1440
- }
1441
- .marg-b-28 {
1442
- margin-bottom: var(--box-unit-28);
1443
- }
1444
- .marg-b-29 {
1445
- margin-bottom: var(--box-unit-29);
1446
- }
1447
- .marg-b-30 {
1448
- margin-bottom: var(--box-unit-30);
999
+ .border-b, .border-b-1 {
1000
+ border-bottom: 1px solid #ededed;
1449
1001
  }
1450
- .marg-b-31 {
1451
- margin-bottom: var(--box-unit-31);
1002
+ .border-b-2 {
1003
+ border-bottom: 2px solid #ededed;
1452
1004
  }
1453
- .marg-b-32 {
1454
- margin-bottom: var(--box-unit-32);
1005
+ .border-b-3 {
1006
+ border-bottom: 3px solid #ededed;
1455
1007
  }
1456
1008
 
1457
- .marg-l, .marg-l-1 {
1458
- margin-left: var(--box-unit-1);
1459
- }
1460
- .marg-l-2 {
1461
- margin-left: var(--box-unit-2);
1462
- }
1463
- .marg-l-3 {
1464
- margin-left: var(--box-unit-3);
1465
- }
1466
- .marg-l-4 {
1467
- margin-left: var(--box-unit-4);
1468
- }
1469
- .marg-l-5 {
1470
- margin-left: var(--box-unit-5);
1471
- }
1472
- .marg-l-6 {
1473
- margin-left: var(--box-unit-6);
1474
- }
1475
- .marg-l-7 {
1476
- margin-left: var(--box-unit-7);
1477
- }
1478
- .marg-l-8 {
1479
- margin-left: var(--box-unit-8);
1480
- }
1481
- .marg-l-9 {
1482
- margin-left: var(--box-unit-9);
1483
- }
1484
- .marg-l-10 {
1485
- margin-left: var(--box-unit-10);
1486
- }
1487
- .marg-l-11 {
1488
- margin-left: var(--box-unit-11);
1489
- }
1490
- .marg-l-12 {
1491
- margin-left: var(--box-unit-12);
1492
- }
1493
- .marg-l-13 {
1494
- margin-left: var(--box-unit-13);
1495
- }
1496
- .marg-l-14 {
1497
- margin-left: var(--box-unit-14);
1498
- }
1499
- .marg-l-15 {
1500
- margin-left: var(--box-unit-15);
1501
- }
1502
- .marg-l-16 {
1503
- margin-left: var(--box-unit-16);
1504
- }
1505
- .marg-l-17 {
1506
- margin-left: var(--box-unit-17);
1507
- }
1508
- .marg-l-18 {
1509
- margin-left: var(--box-unit-18);
1510
- }
1511
- .marg-l-19 {
1512
- margin-left: var(--box-unit-19);
1513
- }
1514
- .marg-l-20 {
1515
- margin-left: var(--box-unit-20);
1516
- }
1517
- .marg-l-21 {
1518
- margin-left: var(--box-unit-21);
1519
- }
1520
- .marg-l-22 {
1521
- margin-left: var(--box-unit-22);
1522
- }
1523
- .marg-l-23 {
1524
- margin-left: var(--box-unit-23);
1525
- }
1526
- .marg-l-24 {
1527
- margin-left: var(--box-unit-24);
1528
- }
1529
- .marg-l-25 {
1530
- margin-left: var(--box-unit-25);
1531
- }
1532
- .marg-l-26 {
1533
- margin-left: var(--box-unit-26);
1534
- }
1535
- .marg-l-27 {
1536
- margin-left: var(--box-unit-27);
1537
- }
1538
- .marg-l-28 {
1539
- margin-left: var(--box-unit-28);
1540
- }
1541
- .marg-l-29 {
1542
- margin-left: var(--box-unit-29);
1543
- }
1544
- .marg-l-30 {
1545
- margin-left: var(--box-unit-30);
1009
+ .border-l, .border-l-1 {
1010
+ border-left: 1px solid #ededed;
1546
1011
  }
1547
- .marg-l-31 {
1548
- margin-left: var(--box-unit-31);
1012
+ .border-l-2 {
1013
+ border-left: 2px solid #ededed;
1549
1014
  }
1550
- .marg-l-32 {
1551
- margin-left: var(--box-unit-32);
1015
+ .border-l-3 {
1016
+ border-left: 3px solid #ededed;
1552
1017
  }
1553
1018
 
1554
- .marg-r, .marg-r-1 {
1555
- margin-right: var(--box-unit-1);
1556
- }
1557
- .marg-r-2 {
1558
- margin-right: var(--box-unit-2);
1559
- }
1560
- .marg-r-3 {
1561
- margin-right: var(--box-unit-3);
1562
- }
1563
- .marg-r-4 {
1564
- margin-right: var(--box-unit-4);
1565
- }
1566
- .marg-r-5 {
1567
- margin-right: var(--box-unit-5);
1568
- }
1569
- .marg-r-6 {
1570
- margin-right: var(--box-unit-6);
1571
- }
1572
- .marg-r-7 {
1573
- margin-right: var(--box-unit-7);
1574
- }
1575
- .marg-r-8 {
1576
- margin-right: var(--box-unit-8);
1577
- }
1578
- .marg-r-9 {
1579
- margin-right: var(--box-unit-9);
1580
- }
1581
- .marg-r-10 {
1582
- margin-right: var(--box-unit-10);
1583
- }
1584
- .marg-r-11 {
1585
- margin-right: var(--box-unit-11);
1586
- }
1587
- .marg-r-12 {
1588
- margin-right: var(--box-unit-12);
1589
- }
1590
- .marg-r-13 {
1591
- margin-right: var(--box-unit-13);
1592
- }
1593
- .marg-r-14 {
1594
- margin-right: var(--box-unit-14);
1595
- }
1596
- .marg-r-15 {
1597
- margin-right: var(--box-unit-15);
1598
- }
1599
- .marg-r-16 {
1600
- margin-right: var(--box-unit-16);
1601
- }
1602
- .marg-r-17 {
1603
- margin-right: var(--box-unit-17);
1604
- }
1605
- .marg-r-18 {
1606
- margin-right: var(--box-unit-18);
1607
- }
1608
- .marg-r-19 {
1609
- margin-right: var(--box-unit-19);
1610
- }
1611
- .marg-r-20 {
1612
- margin-right: var(--box-unit-20);
1613
- }
1614
- .marg-r-21 {
1615
- margin-right: var(--box-unit-21);
1616
- }
1617
- .marg-r-22 {
1618
- margin-right: var(--box-unit-22);
1619
- }
1620
- .marg-r-23 {
1621
- margin-right: var(--box-unit-23);
1622
- }
1623
- .marg-r-24 {
1624
- margin-right: var(--box-unit-24);
1625
- }
1626
- .marg-r-25 {
1627
- margin-right: var(--box-unit-25);
1628
- }
1629
- .marg-r-26 {
1630
- margin-right: var(--box-unit-26);
1631
- }
1632
- .marg-r-27 {
1633
- margin-right: var(--box-unit-27);
1634
- }
1635
- .marg-r-28 {
1636
- margin-right: var(--box-unit-28);
1637
- }
1638
- .marg-r-29 {
1639
- margin-right: var(--box-unit-29);
1640
- }
1641
- .marg-r-30 {
1642
- margin-right: var(--box-unit-30);
1019
+ .border-r, .border-r-1 {
1020
+ border-right: 1px solid #ededed;
1643
1021
  }
1644
- .marg-r-31 {
1645
- margin-right: var(--box-unit-31);
1022
+ .border-r-2 {
1023
+ border-right: 2px solid #ededed;
1646
1024
  }
1647
- .marg-r-32 {
1648
- margin-right: var(--box-unit-32);
1025
+ .border-r-3 {
1026
+ border-right: 3px solid #ededed;
1649
1027
  }
1650
1028
 
1651
- .marg-all, .marg-all-1 {
1652
- margin: var(--box-unit-1);
1653
- }
1654
- .marg-all-2 {
1655
- margin: var(--box-unit-2);
1656
- }
1657
- .marg-all-3 {
1658
- margin: var(--box-unit-3);
1659
- }
1660
- .marg-all-4 {
1661
- margin: var(--box-unit-4);
1662
- }
1663
- .marg-all-5 {
1664
- margin: var(--box-unit-5);
1665
- }
1666
- .marg-all-6 {
1667
- margin: var(--box-unit-6);
1668
- }
1669
- .marg-all-7 {
1670
- margin: var(--box-unit-7);
1671
- }
1672
- .marg-all-8 {
1673
- margin: var(--box-unit-8);
1674
- }
1675
- .marg-all-9 {
1676
- margin: var(--box-unit-9);
1677
- }
1678
- .marg-all-10 {
1679
- margin: var(--box-unit-10);
1680
- }
1681
- .marg-all-11 {
1682
- margin: var(--box-unit-11);
1683
- }
1684
- .marg-all-12 {
1685
- margin: var(--box-unit-12);
1686
- }
1687
- .marg-all-13 {
1688
- margin: var(--box-unit-13);
1689
- }
1690
- .marg-all-14 {
1691
- margin: var(--box-unit-14);
1692
- }
1693
- .marg-all-15 {
1694
- margin: var(--box-unit-15);
1695
- }
1696
- .marg-all-16 {
1697
- margin: var(--box-unit-16);
1698
- }
1699
- .marg-all-17 {
1700
- margin: var(--box-unit-17);
1701
- }
1702
- .marg-all-18 {
1703
- margin: var(--box-unit-18);
1704
- }
1705
- .marg-all-19 {
1706
- margin: var(--box-unit-19);
1707
- }
1708
- .marg-all-20 {
1709
- margin: var(--box-unit-20);
1710
- }
1711
- .marg-all-21 {
1712
- margin: var(--box-unit-21);
1713
- }
1714
- .marg-all-22 {
1715
- margin: var(--box-unit-22);
1716
- }
1717
- .marg-all-23 {
1718
- margin: var(--box-unit-23);
1719
- }
1720
- .marg-all-24 {
1721
- margin: var(--box-unit-24);
1722
- }
1723
- .marg-all-25 {
1724
- margin: var(--box-unit-25);
1725
- }
1726
- .marg-all-26 {
1727
- margin: var(--box-unit-26);
1728
- }
1729
- .marg-all-27 {
1730
- margin: var(--box-unit-27);
1731
- }
1732
- .marg-all-28 {
1733
- margin: var(--box-unit-28);
1734
- }
1735
- .marg-all-29 {
1736
- margin: var(--box-unit-29);
1737
- }
1738
- .marg-all-30 {
1739
- margin: var(--box-unit-30);
1029
+ .border-all, .border-all-1 {
1030
+ border: 1px solid #ededed;
1740
1031
  }
1741
- .marg-all-31 {
1742
- margin: var(--box-unit-31);
1032
+ .border-all-2 {
1033
+ border: 2px solid #ededed;
1743
1034
  }
1744
- .marg-all-32 {
1745
- margin: var(--box-unit-32);
1035
+ .border-all-3 {
1036
+ border: 3px solid #ededed;
1746
1037
  }
1747
1038
 
1748
- .marg-u, .marg-u-1 {
1749
- margin-bottom: var(--box-unit-1);
1750
- margin-left: var(--box-unit-1);
1751
- margin-right: var(--box-unit-1);
1752
- }
1753
- .marg-u-2 {
1754
- margin-bottom: var(--box-unit-2);
1755
- margin-left: var(--box-unit-2);
1756
- margin-right: var(--box-unit-2);
1757
- }
1758
- .marg-u-3 {
1759
- margin-bottom: var(--box-unit-3);
1760
- margin-left: var(--box-unit-3);
1761
- margin-right: var(--box-unit-3);
1762
- }
1763
- .marg-u-4 {
1764
- margin-bottom: var(--box-unit-4);
1765
- margin-left: var(--box-unit-4);
1766
- margin-right: var(--box-unit-4);
1767
- }
1768
- .marg-u-5 {
1769
- margin-bottom: var(--box-unit-5);
1770
- margin-left: var(--box-unit-5);
1771
- margin-right: var(--box-unit-5);
1772
- }
1773
- .marg-u-6 {
1774
- margin-bottom: var(--box-unit-6);
1775
- margin-left: var(--box-unit-6);
1776
- margin-right: var(--box-unit-6);
1777
- }
1778
- .marg-u-7 {
1779
- margin-bottom: var(--box-unit-7);
1780
- margin-left: var(--box-unit-7);
1781
- margin-right: var(--box-unit-7);
1782
- }
1783
- .marg-u-8 {
1784
- margin-bottom: var(--box-unit-8);
1785
- margin-left: var(--box-unit-8);
1786
- margin-right: var(--box-unit-8);
1787
- }
1788
- .marg-u-9 {
1789
- margin-bottom: var(--box-unit-9);
1790
- margin-left: var(--box-unit-9);
1791
- margin-right: var(--box-unit-9);
1792
- }
1793
- .marg-u-10 {
1794
- margin-bottom: var(--box-unit-10);
1795
- margin-left: var(--box-unit-10);
1796
- margin-right: var(--box-unit-10);
1039
+ .border-u, .border-u-1 {
1040
+ border-bottom: 1px solid #ededed;
1041
+ border-left: 1px solid #ededed;
1042
+ border-right: 1px solid #ededed;
1797
1043
  }
1798
- .marg-u-11 {
1799
- margin-bottom: var(--box-unit-11);
1800
- margin-left: var(--box-unit-11);
1801
- margin-right: var(--box-unit-11);
1044
+ .border-u-2 {
1045
+ border-bottom: 2px solid #ededed;
1046
+ border-left: 2px solid #ededed;
1047
+ border-right: 2px solid #ededed;
1802
1048
  }
1803
- .marg-u-12 {
1804
- margin-bottom: var(--box-unit-12);
1805
- margin-left: var(--box-unit-12);
1806
- margin-right: var(--box-unit-12);
1807
- }
1808
- .marg-u-13 {
1809
- margin-bottom: var(--box-unit-13);
1810
- margin-left: var(--box-unit-13);
1811
- margin-right: var(--box-unit-13);
1812
- }
1813
- .marg-u-14 {
1814
- margin-bottom: var(--box-unit-14);
1815
- margin-left: var(--box-unit-14);
1816
- margin-right: var(--box-unit-14);
1817
- }
1818
- .marg-u-15 {
1819
- margin-bottom: var(--box-unit-15);
1820
- margin-left: var(--box-unit-15);
1821
- margin-right: var(--box-unit-15);
1822
- }
1823
- .marg-u-16 {
1824
- margin-bottom: var(--box-unit-16);
1825
- margin-left: var(--box-unit-16);
1826
- margin-right: var(--box-unit-16);
1827
- }
1828
- .marg-u-17 {
1829
- margin-bottom: var(--box-unit-17);
1830
- margin-left: var(--box-unit-17);
1831
- margin-right: var(--box-unit-17);
1832
- }
1833
- .marg-u-18 {
1834
- margin-bottom: var(--box-unit-18);
1835
- margin-left: var(--box-unit-18);
1836
- margin-right: var(--box-unit-18);
1837
- }
1838
- .marg-u-19 {
1839
- margin-bottom: var(--box-unit-19);
1840
- margin-left: var(--box-unit-19);
1841
- margin-right: var(--box-unit-19);
1842
- }
1843
- .marg-u-20 {
1844
- margin-bottom: var(--box-unit-20);
1845
- margin-left: var(--box-unit-20);
1846
- margin-right: var(--box-unit-20);
1847
- }
1848
- .marg-u-21 {
1849
- margin-bottom: var(--box-unit-21);
1850
- margin-left: var(--box-unit-21);
1851
- margin-right: var(--box-unit-21);
1852
- }
1853
- .marg-u-22 {
1854
- margin-bottom: var(--box-unit-22);
1855
- margin-left: var(--box-unit-22);
1856
- margin-right: var(--box-unit-22);
1857
- }
1858
- .marg-u-23 {
1859
- margin-bottom: var(--box-unit-23);
1860
- margin-left: var(--box-unit-23);
1861
- margin-right: var(--box-unit-23);
1862
- }
1863
- .marg-u-24 {
1864
- margin-bottom: var(--box-unit-24);
1865
- margin-left: var(--box-unit-24);
1866
- margin-right: var(--box-unit-24);
1867
- }
1868
- .marg-u-25 {
1869
- margin-bottom: var(--box-unit-25);
1870
- margin-left: var(--box-unit-25);
1871
- margin-right: var(--box-unit-25);
1872
- }
1873
- .marg-u-26 {
1874
- margin-bottom: var(--box-unit-26);
1875
- margin-left: var(--box-unit-26);
1876
- margin-right: var(--box-unit-26);
1877
- }
1878
- .marg-u-27 {
1879
- margin-bottom: var(--box-unit-27);
1880
- margin-left: var(--box-unit-27);
1881
- margin-right: var(--box-unit-27);
1882
- }
1883
- .marg-u-28 {
1884
- margin-bottom: var(--box-unit-28);
1885
- margin-left: var(--box-unit-28);
1886
- margin-right: var(--box-unit-28);
1887
- }
1888
- .marg-u-29 {
1889
- margin-bottom: var(--box-unit-29);
1890
- margin-left: var(--box-unit-29);
1891
- margin-right: var(--box-unit-29);
1892
- }
1893
- .marg-u-30 {
1894
- margin-bottom: var(--box-unit-30);
1895
- margin-left: var(--box-unit-30);
1896
- margin-right: var(--box-unit-30);
1897
- }
1898
- .marg-u-31 {
1899
- margin-bottom: var(--box-unit-31);
1900
- margin-left: var(--box-unit-31);
1901
- margin-right: var(--box-unit-31);
1902
- }
1903
- .marg-u-32 {
1904
- margin-bottom: var(--box-unit-32);
1905
- margin-left: var(--box-unit-32);
1906
- margin-right: var(--box-unit-32);
1049
+ .border-u-3 {
1050
+ border-bottom: 3px solid #ededed;
1051
+ border-left: 3px solid #ededed;
1052
+ border-right: 3px solid #ededed;
1907
1053
  }
1908
1054
 
1909
- .marg-ii, .marg-ii-1 {
1910
- margin-left: var(--box-unit-1);
1911
- margin-right: var(--box-unit-1);
1912
- }
1913
- .marg-ii-2 {
1914
- margin-left: var(--box-unit-2);
1915
- margin-right: var(--box-unit-2);
1916
- }
1917
- .marg-ii-3 {
1918
- margin-left: var(--box-unit-3);
1919
- margin-right: var(--box-unit-3);
1920
- }
1921
- .marg-ii-4 {
1922
- margin-left: var(--box-unit-4);
1923
- margin-right: var(--box-unit-4);
1924
- }
1925
- .marg-ii-5 {
1926
- margin-left: var(--box-unit-5);
1927
- margin-right: var(--box-unit-5);
1928
- }
1929
- .marg-ii-6 {
1930
- margin-left: var(--box-unit-6);
1931
- margin-right: var(--box-unit-6);
1932
- }
1933
- .marg-ii-7 {
1934
- margin-left: var(--box-unit-7);
1935
- margin-right: var(--box-unit-7);
1936
- }
1937
- .marg-ii-8 {
1938
- margin-left: var(--box-unit-8);
1939
- margin-right: var(--box-unit-8);
1940
- }
1941
- .marg-ii-9 {
1942
- margin-left: var(--box-unit-9);
1943
- margin-right: var(--box-unit-9);
1944
- }
1945
- .marg-ii-10 {
1946
- margin-left: var(--box-unit-10);
1947
- margin-right: var(--box-unit-10);
1948
- }
1949
- .marg-ii-11 {
1950
- margin-left: var(--box-unit-11);
1951
- margin-right: var(--box-unit-11);
1952
- }
1953
- .marg-ii-12 {
1954
- margin-left: var(--box-unit-12);
1955
- margin-right: var(--box-unit-12);
1956
- }
1957
- .marg-ii-13 {
1958
- margin-left: var(--box-unit-13);
1959
- margin-right: var(--box-unit-13);
1960
- }
1961
- .marg-ii-14 {
1962
- margin-left: var(--box-unit-14);
1963
- margin-right: var(--box-unit-14);
1964
- }
1965
- .marg-ii-15 {
1966
- margin-left: var(--box-unit-15);
1967
- margin-right: var(--box-unit-15);
1968
- }
1969
- .marg-ii-16 {
1970
- margin-left: var(--box-unit-16);
1971
- margin-right: var(--box-unit-16);
1972
- }
1973
- .marg-ii-17 {
1974
- margin-left: var(--box-unit-17);
1975
- margin-right: var(--box-unit-17);
1976
- }
1977
- .marg-ii-18 {
1978
- margin-left: var(--box-unit-18);
1979
- margin-right: var(--box-unit-18);
1980
- }
1981
- .marg-ii-19 {
1982
- margin-left: var(--box-unit-19);
1983
- margin-right: var(--box-unit-19);
1984
- }
1985
- .marg-ii-20 {
1986
- margin-left: var(--box-unit-20);
1987
- margin-right: var(--box-unit-20);
1988
- }
1989
- .marg-ii-21 {
1990
- margin-left: var(--box-unit-21);
1991
- margin-right: var(--box-unit-21);
1992
- }
1993
- .marg-ii-22 {
1994
- margin-left: var(--box-unit-22);
1995
- margin-right: var(--box-unit-22);
1996
- }
1997
- .marg-ii-23 {
1998
- margin-left: var(--box-unit-23);
1999
- margin-right: var(--box-unit-23);
2000
- }
2001
- .marg-ii-24 {
2002
- margin-left: var(--box-unit-24);
2003
- margin-right: var(--box-unit-24);
2004
- }
2005
- .marg-ii-25 {
2006
- margin-left: var(--box-unit-25);
2007
- margin-right: var(--box-unit-25);
2008
- }
2009
- .marg-ii-26 {
2010
- margin-left: var(--box-unit-26);
2011
- margin-right: var(--box-unit-26);
2012
- }
2013
- .marg-ii-27 {
2014
- margin-left: var(--box-unit-27);
2015
- margin-right: var(--box-unit-27);
2016
- }
2017
- .marg-ii-28 {
2018
- margin-left: var(--box-unit-28);
2019
- margin-right: var(--box-unit-28);
2020
- }
2021
- .marg-ii-29 {
2022
- margin-left: var(--box-unit-29);
2023
- margin-right: var(--box-unit-29);
2024
- }
2025
- .marg-ii-30 {
2026
- margin-left: var(--box-unit-30);
2027
- margin-right: var(--box-unit-30);
1055
+ .border-ii, .border-ii-1 {
1056
+ border-left: 1px solid #ededed;
1057
+ border-right: 1px solid #ededed;
2028
1058
  }
2029
- .marg-ii-31 {
2030
- margin-left: var(--box-unit-31);
2031
- margin-right: var(--box-unit-31);
1059
+ .border-ii-2 {
1060
+ border-left: 2px solid #ededed;
1061
+ border-right: 2px solid #ededed;
2032
1062
  }
2033
- .marg-ii-32 {
2034
- margin-left: var(--box-unit-32);
2035
- margin-right: var(--box-unit-32);
1063
+ .border-ii-3 {
1064
+ border-left: 3px solid #ededed;
1065
+ border-right: 3px solid #ededed;
2036
1066
  }
2037
1067
 
2038
- .marg-tb, .marg-tb-1 {
2039
- margin-top: var(--box-unit-1);
2040
- margin-bottom: var(--box-unit-1);
2041
- }
2042
- .marg-tb-2 {
2043
- margin-top: var(--box-unit-2);
2044
- margin-bottom: var(--box-unit-2);
2045
- }
2046
- .marg-tb-3 {
2047
- margin-top: var(--box-unit-3);
2048
- margin-bottom: var(--box-unit-3);
2049
- }
2050
- .marg-tb-4 {
2051
- margin-top: var(--box-unit-4);
2052
- margin-bottom: var(--box-unit-4);
2053
- }
2054
- .marg-tb-5 {
2055
- margin-top: var(--box-unit-5);
2056
- margin-bottom: var(--box-unit-5);
2057
- }
2058
- .marg-tb-6 {
2059
- margin-top: var(--box-unit-6);
2060
- margin-bottom: var(--box-unit-6);
2061
- }
2062
- .marg-tb-7 {
2063
- margin-top: var(--box-unit-7);
2064
- margin-bottom: var(--box-unit-7);
2065
- }
2066
- .marg-tb-8 {
2067
- margin-top: var(--box-unit-8);
2068
- margin-bottom: var(--box-unit-8);
2069
- }
2070
- .marg-tb-9 {
2071
- margin-top: var(--box-unit-9);
2072
- margin-bottom: var(--box-unit-9);
2073
- }
2074
- .marg-tb-10 {
2075
- margin-top: var(--box-unit-10);
2076
- margin-bottom: var(--box-unit-10);
2077
- }
2078
- .marg-tb-11 {
2079
- margin-top: var(--box-unit-11);
2080
- margin-bottom: var(--box-unit-11);
2081
- }
2082
- .marg-tb-12 {
2083
- margin-top: var(--box-unit-12);
2084
- margin-bottom: var(--box-unit-12);
2085
- }
2086
- .marg-tb-13 {
2087
- margin-top: var(--box-unit-13);
2088
- margin-bottom: var(--box-unit-13);
2089
- }
2090
- .marg-tb-14 {
2091
- margin-top: var(--box-unit-14);
2092
- margin-bottom: var(--box-unit-14);
2093
- }
2094
- .marg-tb-15 {
2095
- margin-top: var(--box-unit-15);
2096
- margin-bottom: var(--box-unit-15);
2097
- }
2098
- .marg-tb-16 {
2099
- margin-top: var(--box-unit-16);
2100
- margin-bottom: var(--box-unit-16);
2101
- }
2102
- .marg-tb-17 {
2103
- margin-top: var(--box-unit-17);
2104
- margin-bottom: var(--box-unit-17);
2105
- }
2106
- .marg-tb-18 {
2107
- margin-top: var(--box-unit-18);
2108
- margin-bottom: var(--box-unit-18);
2109
- }
2110
- .marg-tb-19 {
2111
- margin-top: var(--box-unit-19);
2112
- margin-bottom: var(--box-unit-19);
2113
- }
2114
- .marg-tb-20 {
2115
- margin-top: var(--box-unit-20);
2116
- margin-bottom: var(--box-unit-20);
2117
- }
2118
- .marg-tb-21 {
2119
- margin-top: var(--box-unit-21);
2120
- margin-bottom: var(--box-unit-21);
2121
- }
2122
- .marg-tb-22 {
2123
- margin-top: var(--box-unit-22);
2124
- margin-bottom: var(--box-unit-22);
2125
- }
2126
- .marg-tb-23 {
2127
- margin-top: var(--box-unit-23);
2128
- margin-bottom: var(--box-unit-23);
2129
- }
2130
- .marg-tb-24 {
2131
- margin-top: var(--box-unit-24);
2132
- margin-bottom: var(--box-unit-24);
2133
- }
2134
- .marg-tb-25 {
2135
- margin-top: var(--box-unit-25);
2136
- margin-bottom: var(--box-unit-25);
2137
- }
2138
- .marg-tb-26 {
2139
- margin-top: var(--box-unit-26);
2140
- margin-bottom: var(--box-unit-26);
2141
- }
2142
- .marg-tb-27 {
2143
- margin-top: var(--box-unit-27);
2144
- margin-bottom: var(--box-unit-27);
2145
- }
2146
- .marg-tb-28 {
2147
- margin-top: var(--box-unit-28);
2148
- margin-bottom: var(--box-unit-28);
2149
- }
2150
- .marg-tb-29 {
2151
- margin-top: var(--box-unit-29);
2152
- margin-bottom: var(--box-unit-29);
2153
- }
2154
- .marg-tb-30 {
2155
- margin-top: var(--box-unit-30);
2156
- margin-bottom: var(--box-unit-30);
1068
+ .border-tb, .border-tb-1 {
1069
+ border-top: 1px solid #ededed;
1070
+ border-bottom: 1px solid #ededed;
2157
1071
  }
2158
- .marg-tb-31 {
2159
- margin-top: var(--box-unit-31);
2160
- margin-bottom: var(--box-unit-31);
1072
+ .border-tb-2 {
1073
+ border-top: 2px solid #ededed;
1074
+ border-bottom: 2px solid #ededed;
2161
1075
  }
2162
- .marg-tb-32 {
2163
- margin-top: var(--box-unit-32);
2164
- margin-bottom: var(--box-unit-32);
1076
+ .border-tb-3 {
1077
+ border-top: 3px solid #ededed;
1078
+ border-bottom: 3px solid #ededed;
2165
1079
  }
2166
1080
 
2167
1081
  .dsp-block {
@@ -2224,147 +1138,147 @@
2224
1138
 
2225
1139
  /*placement*/
2226
1140
  .top-0 {
2227
- top: var(--box-unit-0);
1141
+ top: var(--box-density-0);
2228
1142
  }
2229
1143
 
2230
1144
  .top-1 {
2231
- top: var(--box-unit-1);
1145
+ top: var(--box-density-1);
2232
1146
  }
2233
1147
 
2234
1148
  .top-2 {
2235
- top: var(--box-unit-2);
1149
+ top: var(--box-density-2);
2236
1150
  }
2237
1151
 
2238
1152
  .top-3 {
2239
- top: var(--box-unit-3);
1153
+ top: var(--box-density-3);
2240
1154
  }
2241
1155
 
2242
1156
  .top-4 {
2243
- top: var(--box-unit-4);
1157
+ top: var(--box-density-4);
2244
1158
  }
2245
1159
 
2246
1160
  .top-5 {
2247
- top: var(--box-unit-5);
1161
+ top: var(--box-density-5);
2248
1162
  }
2249
1163
 
2250
1164
  .top-6 {
2251
- top: var(--box-unit-6);
1165
+ top: var(--box-density-6);
2252
1166
  }
2253
1167
 
2254
1168
  .top-7 {
2255
- top: var(--box-unit-7);
1169
+ top: var(--box-density-7);
2256
1170
  }
2257
1171
 
2258
1172
  .top-8 {
2259
- top: var(--box-unit-8);
1173
+ top: var(--box-density-8);
2260
1174
  }
2261
1175
 
2262
1176
  .right-0 {
2263
- right: var(--box-unit-0);
1177
+ right: var(--box-density-0);
2264
1178
  }
2265
1179
 
2266
1180
  .right-1 {
2267
- right: var(--box-unit-1);
1181
+ right: var(--box-density-1);
2268
1182
  }
2269
1183
 
2270
1184
  .right-2 {
2271
- right: var(--box-unit-2);
1185
+ right: var(--box-density-2);
2272
1186
  }
2273
1187
 
2274
1188
  .right-3 {
2275
- right: var(--box-unit-3);
1189
+ right: var(--box-density-3);
2276
1190
  }
2277
1191
 
2278
1192
  .right-4 {
2279
- right: var(--box-unit-4);
1193
+ right: var(--box-density-4);
2280
1194
  }
2281
1195
 
2282
1196
  .right-5 {
2283
- right: var(--box-unit-5);
1197
+ right: var(--box-density-5);
2284
1198
  }
2285
1199
 
2286
1200
  .right-6 {
2287
- right: var(--box-unit-6);
1201
+ right: var(--box-density-6);
2288
1202
  }
2289
1203
 
2290
1204
  .right-7 {
2291
- right: var(--box-unit-7);
1205
+ right: var(--box-density-7);
2292
1206
  }
2293
1207
 
2294
1208
  .right-8 {
2295
- right: var(--box-unit-8);
1209
+ right: var(--box-density-8);
2296
1210
  }
2297
1211
 
2298
1212
  .bottom-0 {
2299
- bottom: var(--box-unit-0);
1213
+ bottom: var(--box-density-0);
2300
1214
  }
2301
1215
 
2302
1216
  .bottom-1 {
2303
- bottom: var(--box-unit-1);
1217
+ bottom: var(--box-density-1);
2304
1218
  }
2305
1219
 
2306
1220
  .bottom-2 {
2307
- bottom: var(--box-unit-2);
1221
+ bottom: var(--box-density-2);
2308
1222
  }
2309
1223
 
2310
1224
  .bottom-3 {
2311
- bottom: var(--box-unit-3);
1225
+ bottom: var(--box-density-3);
2312
1226
  }
2313
1227
 
2314
1228
  .bottom-4 {
2315
- bottom: var(--box-unit-4);
1229
+ bottom: var(--box-density-4);
2316
1230
  }
2317
1231
 
2318
1232
  .bottom-5 {
2319
- bottom: var(--box-unit-5);
1233
+ bottom: var(--box-density-5);
2320
1234
  }
2321
1235
 
2322
1236
  .bottom-6 {
2323
- bottom: var(--box-unit-6);
1237
+ bottom: var(--box-density-6);
2324
1238
  }
2325
1239
 
2326
1240
  .bottom-7 {
2327
- bottom: var(--box-unit-7);
1241
+ bottom: var(--box-density-7);
2328
1242
  }
2329
1243
 
2330
1244
  .bottom-8 {
2331
- bottom: var(--box-unit-8);
1245
+ bottom: var(--box-density-8);
2332
1246
  }
2333
1247
 
2334
1248
  .left-0 {
2335
- left: var(--box-unit-0);
1249
+ left: var(--box-density-0);
2336
1250
  }
2337
1251
 
2338
1252
  .left-1 {
2339
- left: var(--box-unit-1);
1253
+ left: var(--box-density-1);
2340
1254
  }
2341
1255
 
2342
1256
  .left-2 {
2343
- left: var(--box-unit-2);
1257
+ left: var(--box-density-2);
2344
1258
  }
2345
1259
 
2346
1260
  .left-3 {
2347
- left: var(--box-unit-3);
1261
+ left: var(--box-density-3);
2348
1262
  }
2349
1263
 
2350
1264
  .left-4 {
2351
- left: var(--box-unit-4);
1265
+ left: var(--box-density-4);
2352
1266
  }
2353
1267
 
2354
1268
  .left-5 {
2355
- left: var(--box-unit-5);
1269
+ left: var(--box-density-5);
2356
1270
  }
2357
1271
 
2358
1272
  .left-6 {
2359
- left: var(--box-unit-6);
1273
+ left: var(--box-density-6);
2360
1274
  }
2361
1275
 
2362
1276
  .left-7 {
2363
- left: var(--box-unit-7);
1277
+ left: var(--box-density-7);
2364
1278
  }
2365
1279
 
2366
1280
  .left-8 {
2367
- left: var(--box-unit-8);
1281
+ left: var(--box-density-8);
2368
1282
  }
2369
1283
 
2370
1284
  /*radius*/