├── .gitignore
├── LICENSE
├── README.md
├── bower.json
├── dist
├── spaces.bootstrap.css
├── spaces.bootstrap.min.css
├── spaces.css
└── spaces.min.css
├── gulpfile.js
├── package.json
└── source
├── _margins.scss
├── _paddings.scss
├── _settings.bootstrap.scss
├── _settings.scss
├── _widths.scss
├── spaces.bootstrap.scss
└── spaces.scss
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | bower_components
3 | .idea
4 | .sass-cache
5 | *.css.map
6 | source/**/*.css
7 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Jeremias Erbs (Dombrowsky)
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # CSS Spaces
2 | A simple CSS spacing library for margins, paddings (and more later ...) written in Sass (SCSS)
3 |
4 | ## Why another css library?
5 | Many libraries try to do everything: sizes, typography, buttons, grid, helpers. CSS Spaces concentrates on one thing only: **some classes to add spaces between elements**. Use it with whatever framework or library you like.
6 |
7 | ## Install with bower
8 | ```shell
9 | $ bower install css-spaces
10 | ```
11 |
12 | ## Install with npm
13 | ```shell
14 | $ npm install css-spaces
15 | ```
16 |
17 | ## Usage
18 | Include the spaces.css to your website:
19 |
20 | ```html
21 |
22 |
23 | m argin-t op with the size of **xl**:
30 | ```html
31 |
32 |
33 |
34 | ```
35 |
36 | These elements have no padding:
37 | ```html
38 |
39 | Lorem ipsum
40 | Dolor sit
41 |
42 | ```
43 |
44 | This navigation is centered:
45 | ```html
46 |
47 |
48 |
49 | Home
50 |
51 |
52 | ```
53 |
54 | All properties have `!important` as you should only add those classes, if you definitely want a specific behavior.
55 |
56 | Sizes are defined in `px`.
57 |
58 | ## How it works
59 | All classes are composed of some simple parts.
60 |
61 | ### 1. Property shortcut
62 | ```
63 | m margin
64 | -OR-
65 | p padding
66 | ```
67 |
68 |
69 | ### 2. Direction
70 | ```
71 | t top
72 | b bottom
73 | r right
74 | l left
75 |
76 | v vertical
77 | h horizontal
78 |
79 | (none) No direction specified means *all* directions (like in `margin: 8px;`)
80 |
81 | ```
82 |
83 | ### 3. Delimiter
84 | ```
85 | - positive value
86 | -- negative value
87 | ```
88 | Example:
89 | ```css
90 | .mt-xs { margin-top: 16px }
91 | .mt--xs { margin-top: -16px }
92 | ```
93 |
94 | ### 4. Size
95 | ```
96 | a auto
97 | 0 0
98 | xxxs 4px
99 | xxs 8px
100 | xs 16px
101 | s 24px
102 | m 36px
103 | l 48px
104 | xl 72px
105 | xxl 96px
106 | xxxl 144px
107 | ```
108 |
109 | ### Possible classes (normal syntax)
110 |
111 | The following example just uses one size: s (24px). There is also `xxxs - xxxl` and `0` and `a` (which is auto).
112 |
113 | Margin classes (they start with **m**) can have positive and negative values, padding classes (replace the leading **m** with a **p**) just have positive values.
114 |
115 | ```
116 | mt-s margin-top: 24px
117 | mr-s margin-right: 24px
118 | mb-s margin-bottom: 24px
119 | ml-s margin-left: 24px
120 |
121 | mh-s margin-left: 24px; margin-right: 24px
122 | mv-s margin-top: 24px; margin-bottom: 24px
123 |
124 | m-s margin: 24px
125 |
126 | mt--s margin-top: -24px
127 | mr--s margin-right: -24px
128 | mb--s margin-bottom: -24px
129 | ml--s margin-left: -24px
130 |
131 | mh--s margin-left: -24px; margin-right: -24px
132 | mv--s margin-top: -24px; margin-bottom: -24px
133 |
134 | m--s margin: -24px
135 |
136 | // there is also 'auto'
137 | mt-a margin-top: auto
138 | mr-a margin-right: auto
139 | mb-a margin-bottom: auto
140 | ml-a margin-left: auto
141 |
142 | mh-a margin-left: auto; margin-right: auto
143 | mv-a margin-top: auto; margin-bottom: auto
144 |
145 | m-a margin: auto
146 |
147 | // padding classes would be like this:
148 | pt-s padding-top: 24px;
149 | pr-s padding-right: 24px;
150 | // etc.
151 | ```
152 |
153 | ### We also support the (not so cool) Bootstrap 4 syntax
154 | ```
155 | m-t-0 margin-top: 0
156 | m-t margin-top: 1rem // no-name means "sm (small)"
157 | m-t-md margin-top: 1.5rem
158 | m-t-lg margin-top: 3rem
159 |
160 | m-a-lg margin: 3rem // a means "all"
161 | ```
162 | We added negative margins as well (they are missing in Bootstrap 4). Due to the weird syntax for small (no suffix instead of the logical `-sm`), the syntax for negative values is as follows.
163 |
164 | ```
165 | m-neg margin: -1rem
166 | m-t-xs-neg margin-top: -0.5rem
167 | m-t-neg margin-top: -1.0rem
168 | m-t-md-neg margin-top: -1.5rem
169 | m-t-lg-neg margin-top: -3rem
170 |
171 | ```
172 |
173 | ## Individualize
174 | 1. Install Sass (google it).
175 | 2. Run `npm install`
176 | 3. Change things in `source/` ()
177 | 4. Run `gulp` or `gulp deploy`
178 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "css-spaces",
3 | "description": "A simple CSS spacing library for margins, paddings and more",
4 | "main": "dist/spaces.css",
5 | "authors": [
6 | "Jeremias Erbs "
7 | ],
8 | "license": "MIT",
9 | "keywords": [
10 | "css",
11 | "sass",
12 | "margin",
13 | "padding",
14 | "width",
15 | "styles",
16 | "spacing",
17 | "height",
18 | "library",
19 | "lib"
20 | ],
21 | "homepage": "http://badabam.github.io/css-spaces/",
22 | "moduleType": [],
23 | "ignore": [
24 | "**/.*",
25 | "node_modules",
26 | "bower_components",
27 | "test",
28 | "tests"
29 | ]
30 | }
31 |
--------------------------------------------------------------------------------
/dist/spaces.bootstrap.css:
--------------------------------------------------------------------------------
1 | /*
2 | CSS Spaces now supports bootstrap 4 syntax with additional classes eg. for negative margins.
3 | */
4 | /*
5 | Bootstrap 4 alpha currently uses 1rem as the base size for sizes.
6 | @see https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
7 | If you want to start using this sizes today, use our version
8 | */
9 | /* margin-top */
10 | .m-t-auto { margin-top: auto !important; }
11 |
12 | /* margin-right */
13 | .m-r-auto { margin-right: auto !important; }
14 |
15 | /* margin-bottom */
16 | .m-b-auto { margin-bottom: auto !important; }
17 |
18 | /* margin-left */
19 | .m-l-auto { margin-left: auto !important; }
20 |
21 | /* horizontal margins */
22 | .m-x-auto { margin-left: auto !important; margin-right: auto !important; }
23 |
24 | /* vertical margins */
25 | .m-y-auto { margin-top: auto !important; margin-bottom: auto !important; }
26 |
27 | /* all margins */
28 | .m-a-auto { margin: auto !important; }
29 |
30 | /* margin-top */
31 | .m-t-0 { margin-top: 0 !important; }
32 |
33 | /* margin-right */
34 | .m-r-0 { margin-right: 0 !important; }
35 |
36 | /* margin-bottom */
37 | .m-b-0 { margin-bottom: 0 !important; }
38 |
39 | /* margin-left */
40 | .m-l-0 { margin-left: 0 !important; }
41 |
42 | /* horizontal margins */
43 | .m-x-0 { margin-left: 0 !important; margin-right: 0 !important; }
44 |
45 | /* vertical margins */
46 | .m-y-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
47 |
48 | /* all margins */
49 | .m-a-0 { margin: 0 !important; }
50 |
51 | /* margin-top */
52 | .m-t-xxxs { margin-top: 0.2rem !important; }
53 |
54 | /* margin-right */
55 | .m-r-xxxs { margin-right: 0.2rem !important; }
56 |
57 | /* margin-bottom */
58 | .m-b-xxxs { margin-bottom: 0.2rem !important; }
59 |
60 | /* margin-left */
61 | .m-l-xxxs { margin-left: 0.2rem !important; }
62 |
63 | /* horizontal margins */
64 | .m-x-xxxs { margin-left: 0.2rem !important; margin-right: 0.2rem !important; }
65 |
66 | /* vertical margins */
67 | .m-y-xxxs { margin-top: 0.2rem !important; margin-bottom: 0.2rem !important; }
68 |
69 | /* all margins */
70 | .m-a-xxxs { margin: 0.2rem !important; }
71 |
72 | /* margin-top */
73 | .m-t-xxs { margin-top: 0.25rem !important; }
74 |
75 | /* margin-right */
76 | .m-r-xxs { margin-right: 0.25rem !important; }
77 |
78 | /* margin-bottom */
79 | .m-b-xxs { margin-bottom: 0.25rem !important; }
80 |
81 | /* margin-left */
82 | .m-l-xxs { margin-left: 0.25rem !important; }
83 |
84 | /* horizontal margins */
85 | .m-x-xxs { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
86 |
87 | /* vertical margins */
88 | .m-y-xxs { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
89 |
90 | /* all margins */
91 | .m-a-xxs { margin: 0.25rem !important; }
92 |
93 | /* margin-top */
94 | .m-t-xs { margin-top: 0.5rem !important; }
95 |
96 | /* margin-right */
97 | .m-r-xs { margin-right: 0.5rem !important; }
98 |
99 | /* margin-bottom */
100 | .m-b-xs { margin-bottom: 0.5rem !important; }
101 |
102 | /* margin-left */
103 | .m-l-xs { margin-left: 0.5rem !important; }
104 |
105 | /* horizontal margins */
106 | .m-x-xs { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
107 |
108 | /* vertical margins */
109 | .m-y-xs { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
110 |
111 | /* all margins */
112 | .m-a-xs { margin: 0.5rem !important; }
113 |
114 | /* margin-top */
115 | .m-t { margin-top: 1rem !important; }
116 |
117 | /* margin-right */
118 | .m-r { margin-right: 1rem !important; }
119 |
120 | /* margin-bottom */
121 | .m-b { margin-bottom: 1rem !important; }
122 |
123 | /* margin-left */
124 | .m-l { margin-left: 1rem !important; }
125 |
126 | /* horizontal margins */
127 | .m-x { margin-left: 1rem !important; margin-right: 1rem !important; }
128 |
129 | /* vertical margins */
130 | .m-y { margin-top: 1rem !important; margin-bottom: 1rem !important; }
131 |
132 | /* all margins */
133 | .m-a { margin: 1rem !important; }
134 |
135 | /* margin-top */
136 | .m-t-md { margin-top: 1.5rem !important; }
137 |
138 | /* margin-right */
139 | .m-r-md { margin-right: 1.5rem !important; }
140 |
141 | /* margin-bottom */
142 | .m-b-md { margin-bottom: 1.5rem !important; }
143 |
144 | /* margin-left */
145 | .m-l-md { margin-left: 1.5rem !important; }
146 |
147 | /* horizontal margins */
148 | .m-x-md { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
149 |
150 | /* vertical margins */
151 | .m-y-md { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
152 |
153 | /* all margins */
154 | .m-a-md { margin: 1.5rem !important; }
155 |
156 | /* margin-top */
157 | .m-t-lg { margin-top: 3rem !important; }
158 |
159 | /* margin-right */
160 | .m-r-lg { margin-right: 3rem !important; }
161 |
162 | /* margin-bottom */
163 | .m-b-lg { margin-bottom: 3rem !important; }
164 |
165 | /* margin-left */
166 | .m-l-lg { margin-left: 3rem !important; }
167 |
168 | /* horizontal margins */
169 | .m-x-lg { margin-left: 3rem !important; margin-right: 3rem !important; }
170 |
171 | /* vertical margins */
172 | .m-y-lg { margin-top: 3rem !important; margin-bottom: 3rem !important; }
173 |
174 | /* all margins */
175 | .m-a-lg { margin: 3rem !important; }
176 |
177 | /* margin-top */
178 | .m-t-xl { margin-top: 4.5rem !important; }
179 |
180 | /* margin-right */
181 | .m-r-xl { margin-right: 4.5rem !important; }
182 |
183 | /* margin-bottom */
184 | .m-b-xl { margin-bottom: 4.5rem !important; }
185 |
186 | /* margin-left */
187 | .m-l-xl { margin-left: 4.5rem !important; }
188 |
189 | /* horizontal margins */
190 | .m-x-xl { margin-left: 4.5rem !important; margin-right: 4.5rem !important; }
191 |
192 | /* vertical margins */
193 | .m-y-xl { margin-top: 4.5rem !important; margin-bottom: 4.5rem !important; }
194 |
195 | /* all margins */
196 | .m-a-xl { margin: 4.5rem !important; }
197 |
198 | /* margin-top */
199 | .m-t-xxl { margin-top: 6rem !important; }
200 |
201 | /* margin-right */
202 | .m-r-xxl { margin-right: 6rem !important; }
203 |
204 | /* margin-bottom */
205 | .m-b-xxl { margin-bottom: 6rem !important; }
206 |
207 | /* margin-left */
208 | .m-l-xxl { margin-left: 6rem !important; }
209 |
210 | /* horizontal margins */
211 | .m-x-xxl { margin-left: 6rem !important; margin-right: 6rem !important; }
212 |
213 | /* vertical margins */
214 | .m-y-xxl { margin-top: 6rem !important; margin-bottom: 6rem !important; }
215 |
216 | /* all margins */
217 | .m-a-xxl { margin: 6rem !important; }
218 |
219 | /* margin-top */
220 | .m-t-xxxl { margin-top: 8rem !important; }
221 |
222 | /* margin-right */
223 | .m-r-xxxl { margin-right: 8rem !important; }
224 |
225 | /* margin-bottom */
226 | .m-b-xxxl { margin-bottom: 8rem !important; }
227 |
228 | /* margin-left */
229 | .m-l-xxxl { margin-left: 8rem !important; }
230 |
231 | /* horizontal margins */
232 | .m-x-xxxl { margin-left: 8rem !important; margin-right: 8rem !important; }
233 |
234 | /* vertical margins */
235 | .m-y-xxxl { margin-top: 8rem !important; margin-bottom: 8rem !important; }
236 |
237 | /* all margins */
238 | .m-a-xxxl { margin: 8rem !important; }
239 |
240 | /* NEGATIVE MARGINS */
241 | /* margin-top */
242 | .m-t-neg-xxxs { margin-top: -0.2rem !important; }
243 |
244 | /* margin-right */
245 | .m-r-neg-xxxs { margin-right: -0.2rem !important; }
246 |
247 | /* margin-bottom */
248 | .m-b-neg-xxxs { margin-bottom: -0.2rem !important; }
249 |
250 | /* margin-left */
251 | .m-l-neg-xxxs { margin-left: -0.2rem !important; }
252 |
253 | /* horizontal margins */
254 | .m-x-neg-xxxs { margin-left: -0.2rem !important; margin-right: -0.2rem !important; }
255 |
256 | /* vertical margins */
257 | .m-y-neg-xxxs { margin-top: -0.2rem !important; margin-bottom: -0.2rem !important; }
258 |
259 | /* all margins */
260 | .m-a-neg-xxxs { margin: -0.2rem !important; }
261 |
262 | /* margin-top */
263 | .m-t-neg-xxs { margin-top: -0.25rem !important; }
264 |
265 | /* margin-right */
266 | .m-r-neg-xxs { margin-right: -0.25rem !important; }
267 |
268 | /* margin-bottom */
269 | .m-b-neg-xxs { margin-bottom: -0.25rem !important; }
270 |
271 | /* margin-left */
272 | .m-l-neg-xxs { margin-left: -0.25rem !important; }
273 |
274 | /* horizontal margins */
275 | .m-x-neg-xxs { margin-left: -0.25rem !important; margin-right: -0.25rem !important; }
276 |
277 | /* vertical margins */
278 | .m-y-neg-xxs { margin-top: -0.25rem !important; margin-bottom: -0.25rem !important; }
279 |
280 | /* all margins */
281 | .m-a-neg-xxs { margin: -0.25rem !important; }
282 |
283 | /* margin-top */
284 | .m-t-neg-xs { margin-top: -0.5rem !important; }
285 |
286 | /* margin-right */
287 | .m-r-neg-xs { margin-right: -0.5rem !important; }
288 |
289 | /* margin-bottom */
290 | .m-b-neg-xs { margin-bottom: -0.5rem !important; }
291 |
292 | /* margin-left */
293 | .m-l-neg-xs { margin-left: -0.5rem !important; }
294 |
295 | /* horizontal margins */
296 | .m-x-neg-xs { margin-left: -0.5rem !important; margin-right: -0.5rem !important; }
297 |
298 | /* vertical margins */
299 | .m-y-neg-xs { margin-top: -0.5rem !important; margin-bottom: -0.5rem !important; }
300 |
301 | /* all margins */
302 | .m-a-neg-xs { margin: -0.5rem !important; }
303 |
304 | /* margin-top */
305 | .m-t-neg { margin-top: -1rem !important; }
306 |
307 | /* margin-right */
308 | .m-r-neg { margin-right: -1rem !important; }
309 |
310 | /* margin-bottom */
311 | .m-b-neg { margin-bottom: -1rem !important; }
312 |
313 | /* margin-left */
314 | .m-l-neg { margin-left: -1rem !important; }
315 |
316 | /* horizontal margins */
317 | .m-x-neg { margin-left: -1rem !important; margin-right: -1rem !important; }
318 |
319 | /* vertical margins */
320 | .m-y-neg { margin-top: -1rem !important; margin-bottom: -1rem !important; }
321 |
322 | /* all margins */
323 | .m-a-neg { margin: -1rem !important; }
324 |
325 | /* margin-top */
326 | .m-t-neg-md { margin-top: -1.5rem !important; }
327 |
328 | /* margin-right */
329 | .m-r-neg-md { margin-right: -1.5rem !important; }
330 |
331 | /* margin-bottom */
332 | .m-b-neg-md { margin-bottom: -1.5rem !important; }
333 |
334 | /* margin-left */
335 | .m-l-neg-md { margin-left: -1.5rem !important; }
336 |
337 | /* horizontal margins */
338 | .m-x-neg-md { margin-left: -1.5rem !important; margin-right: -1.5rem !important; }
339 |
340 | /* vertical margins */
341 | .m-y-neg-md { margin-top: -1.5rem !important; margin-bottom: -1.5rem !important; }
342 |
343 | /* all margins */
344 | .m-a-neg-md { margin: -1.5rem !important; }
345 |
346 | /* margin-top */
347 | .m-t-neg-lg { margin-top: -3rem !important; }
348 |
349 | /* margin-right */
350 | .m-r-neg-lg { margin-right: -3rem !important; }
351 |
352 | /* margin-bottom */
353 | .m-b-neg-lg { margin-bottom: -3rem !important; }
354 |
355 | /* margin-left */
356 | .m-l-neg-lg { margin-left: -3rem !important; }
357 |
358 | /* horizontal margins */
359 | .m-x-neg-lg { margin-left: -3rem !important; margin-right: -3rem !important; }
360 |
361 | /* vertical margins */
362 | .m-y-neg-lg { margin-top: -3rem !important; margin-bottom: -3rem !important; }
363 |
364 | /* all margins */
365 | .m-a-neg-lg { margin: -3rem !important; }
366 |
367 | /* margin-top */
368 | .m-t-neg-xl { margin-top: -4.5rem !important; }
369 |
370 | /* margin-right */
371 | .m-r-neg-xl { margin-right: -4.5rem !important; }
372 |
373 | /* margin-bottom */
374 | .m-b-neg-xl { margin-bottom: -4.5rem !important; }
375 |
376 | /* margin-left */
377 | .m-l-neg-xl { margin-left: -4.5rem !important; }
378 |
379 | /* horizontal margins */
380 | .m-x-neg-xl { margin-left: -4.5rem !important; margin-right: -4.5rem !important; }
381 |
382 | /* vertical margins */
383 | .m-y-neg-xl { margin-top: -4.5rem !important; margin-bottom: -4.5rem !important; }
384 |
385 | /* all margins */
386 | .m-a-neg-xl { margin: -4.5rem !important; }
387 |
388 | /* margin-top */
389 | .m-t-neg-xxl { margin-top: -6rem !important; }
390 |
391 | /* margin-right */
392 | .m-r-neg-xxl { margin-right: -6rem !important; }
393 |
394 | /* margin-bottom */
395 | .m-b-neg-xxl { margin-bottom: -6rem !important; }
396 |
397 | /* margin-left */
398 | .m-l-neg-xxl { margin-left: -6rem !important; }
399 |
400 | /* horizontal margins */
401 | .m-x-neg-xxl { margin-left: -6rem !important; margin-right: -6rem !important; }
402 |
403 | /* vertical margins */
404 | .m-y-neg-xxl { margin-top: -6rem !important; margin-bottom: -6rem !important; }
405 |
406 | /* all margins */
407 | .m-a-neg-xxl { margin: -6rem !important; }
408 |
409 | /* margin-top */
410 | .m-t-neg-xxxl { margin-top: -8rem !important; }
411 |
412 | /* margin-right */
413 | .m-r-neg-xxxl { margin-right: -8rem !important; }
414 |
415 | /* margin-bottom */
416 | .m-b-neg-xxxl { margin-bottom: -8rem !important; }
417 |
418 | /* margin-left */
419 | .m-l-neg-xxxl { margin-left: -8rem !important; }
420 |
421 | /* horizontal margins */
422 | .m-x-neg-xxxl { margin-left: -8rem !important; margin-right: -8rem !important; }
423 |
424 | /* vertical margins */
425 | .m-y-neg-xxxl { margin-top: -8rem !important; margin-bottom: -8rem !important; }
426 |
427 | /* all margins */
428 | .m-a-neg-xxxl { margin: -8rem !important; }
429 |
430 | /* padding-top */
431 | .p-t-auto { padding-top: auto !important; }
432 |
433 | /* padding-right */
434 | .p-r-auto { padding-right: auto !important; }
435 |
436 | /* padding-bottom */
437 | .p-b-auto { padding-bottom: auto !important; }
438 |
439 | /* padding-left */
440 | .p-l-auto { padding-left: auto !important; }
441 |
442 | /* horizontal paddings */
443 | .p-x-auto { padding-left: auto !important; padding-right: auto !important; }
444 |
445 | /* vertical paddings */
446 | .p-y-auto { padding-top: auto !important; padding-bottom: auto !important; }
447 |
448 | /* all paddings */
449 | .p-a-auto { padding: auto !important; }
450 |
451 | /* padding-top */
452 | .p-t-0 { padding-top: 0 !important; }
453 |
454 | /* padding-right */
455 | .p-r-0 { padding-right: 0 !important; }
456 |
457 | /* padding-bottom */
458 | .p-b-0 { padding-bottom: 0 !important; }
459 |
460 | /* padding-left */
461 | .p-l-0 { padding-left: 0 !important; }
462 |
463 | /* horizontal paddings */
464 | .p-x-0 { padding-left: 0 !important; padding-right: 0 !important; }
465 |
466 | /* vertical paddings */
467 | .p-y-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
468 |
469 | /* all paddings */
470 | .p-a-0 { padding: 0 !important; }
471 |
472 | /* padding-top */
473 | .p-t-xxxs { padding-top: 0.2rem !important; }
474 |
475 | /* padding-right */
476 | .p-r-xxxs { padding-right: 0.2rem !important; }
477 |
478 | /* padding-bottom */
479 | .p-b-xxxs { padding-bottom: 0.2rem !important; }
480 |
481 | /* padding-left */
482 | .p-l-xxxs { padding-left: 0.2rem !important; }
483 |
484 | /* horizontal paddings */
485 | .p-x-xxxs { padding-left: 0.2rem !important; padding-right: 0.2rem !important; }
486 |
487 | /* vertical paddings */
488 | .p-y-xxxs { padding-top: 0.2rem !important; padding-bottom: 0.2rem !important; }
489 |
490 | /* all paddings */
491 | .p-a-xxxs { padding: 0.2rem !important; }
492 |
493 | /* padding-top */
494 | .p-t-xxs { padding-top: 0.25rem !important; }
495 |
496 | /* padding-right */
497 | .p-r-xxs { padding-right: 0.25rem !important; }
498 |
499 | /* padding-bottom */
500 | .p-b-xxs { padding-bottom: 0.25rem !important; }
501 |
502 | /* padding-left */
503 | .p-l-xxs { padding-left: 0.25rem !important; }
504 |
505 | /* horizontal paddings */
506 | .p-x-xxs { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
507 |
508 | /* vertical paddings */
509 | .p-y-xxs { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
510 |
511 | /* all paddings */
512 | .p-a-xxs { padding: 0.25rem !important; }
513 |
514 | /* padding-top */
515 | .p-t-xs { padding-top: 0.5rem !important; }
516 |
517 | /* padding-right */
518 | .p-r-xs { padding-right: 0.5rem !important; }
519 |
520 | /* padding-bottom */
521 | .p-b-xs { padding-bottom: 0.5rem !important; }
522 |
523 | /* padding-left */
524 | .p-l-xs { padding-left: 0.5rem !important; }
525 |
526 | /* horizontal paddings */
527 | .p-x-xs { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
528 |
529 | /* vertical paddings */
530 | .p-y-xs { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
531 |
532 | /* all paddings */
533 | .p-a-xs { padding: 0.5rem !important; }
534 |
535 | /* padding-top */
536 | .p-t { padding-top: 1rem !important; }
537 |
538 | /* padding-right */
539 | .p-r { padding-right: 1rem !important; }
540 |
541 | /* padding-bottom */
542 | .p-b { padding-bottom: 1rem !important; }
543 |
544 | /* padding-left */
545 | .p-l { padding-left: 1rem !important; }
546 |
547 | /* horizontal paddings */
548 | .p-x { padding-left: 1rem !important; padding-right: 1rem !important; }
549 |
550 | /* vertical paddings */
551 | .p-y { padding-top: 1rem !important; padding-bottom: 1rem !important; }
552 |
553 | /* all paddings */
554 | .p-a { padding: 1rem !important; }
555 |
556 | /* padding-top */
557 | .p-t-md { padding-top: 1.5rem !important; }
558 |
559 | /* padding-right */
560 | .p-r-md { padding-right: 1.5rem !important; }
561 |
562 | /* padding-bottom */
563 | .p-b-md { padding-bottom: 1.5rem !important; }
564 |
565 | /* padding-left */
566 | .p-l-md { padding-left: 1.5rem !important; }
567 |
568 | /* horizontal paddings */
569 | .p-x-md { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
570 |
571 | /* vertical paddings */
572 | .p-y-md { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
573 |
574 | /* all paddings */
575 | .p-a-md { padding: 1.5rem !important; }
576 |
577 | /* padding-top */
578 | .p-t-lg { padding-top: 3rem !important; }
579 |
580 | /* padding-right */
581 | .p-r-lg { padding-right: 3rem !important; }
582 |
583 | /* padding-bottom */
584 | .p-b-lg { padding-bottom: 3rem !important; }
585 |
586 | /* padding-left */
587 | .p-l-lg { padding-left: 3rem !important; }
588 |
589 | /* horizontal paddings */
590 | .p-x-lg { padding-left: 3rem !important; padding-right: 3rem !important; }
591 |
592 | /* vertical paddings */
593 | .p-y-lg { padding-top: 3rem !important; padding-bottom: 3rem !important; }
594 |
595 | /* all paddings */
596 | .p-a-lg { padding: 3rem !important; }
597 |
598 | /* padding-top */
599 | .p-t-xl { padding-top: 4.5rem !important; }
600 |
601 | /* padding-right */
602 | .p-r-xl { padding-right: 4.5rem !important; }
603 |
604 | /* padding-bottom */
605 | .p-b-xl { padding-bottom: 4.5rem !important; }
606 |
607 | /* padding-left */
608 | .p-l-xl { padding-left: 4.5rem !important; }
609 |
610 | /* horizontal paddings */
611 | .p-x-xl { padding-left: 4.5rem !important; padding-right: 4.5rem !important; }
612 |
613 | /* vertical paddings */
614 | .p-y-xl { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
615 |
616 | /* all paddings */
617 | .p-a-xl { padding: 4.5rem !important; }
618 |
619 | /* padding-top */
620 | .p-t-xxl { padding-top: 6rem !important; }
621 |
622 | /* padding-right */
623 | .p-r-xxl { padding-right: 6rem !important; }
624 |
625 | /* padding-bottom */
626 | .p-b-xxl { padding-bottom: 6rem !important; }
627 |
628 | /* padding-left */
629 | .p-l-xxl { padding-left: 6rem !important; }
630 |
631 | /* horizontal paddings */
632 | .p-x-xxl { padding-left: 6rem !important; padding-right: 6rem !important; }
633 |
634 | /* vertical paddings */
635 | .p-y-xxl { padding-top: 6rem !important; padding-bottom: 6rem !important; }
636 |
637 | /* all paddings */
638 | .p-a-xxl { padding: 6rem !important; }
639 |
640 | /* padding-top */
641 | .p-t-xxxl { padding-top: 8rem !important; }
642 |
643 | /* padding-right */
644 | .p-r-xxxl { padding-right: 8rem !important; }
645 |
646 | /* padding-bottom */
647 | .p-b-xxxl { padding-bottom: 8rem !important; }
648 |
649 | /* padding-left */
650 | .p-l-xxxl { padding-left: 8rem !important; }
651 |
652 | /* horizontal paddings */
653 | .p-x-xxxl { padding-left: 8rem !important; padding-right: 8rem !important; }
654 |
655 | /* vertical paddings */
656 | .p-y-xxxl { padding-top: 8rem !important; padding-bottom: 8rem !important; }
657 |
658 | /* all paddings */
659 | .p-a-xxxl { padding: 8rem !important; }
660 |
661 | /* widths */
662 | .wa { width: auto !important; }
663 |
664 | .w0 { width: 0 !important; }
665 |
666 | .w5 { width: 5% !important; }
667 |
668 | .w10 { width: 10% !important; }
669 |
670 | .w25 { width: 25% !important; }
671 |
672 | .w33 { width: 33.33333% !important; }
673 |
674 | .w50 { width: 50% !important; }
675 |
676 | .w66 { width: 66.66667% !important; }
677 |
678 | .w100 { width: 100% !important; }
679 |
--------------------------------------------------------------------------------
/dist/spaces.bootstrap.min.css:
--------------------------------------------------------------------------------
1 | .m-t-auto{margin-top:auto !important}.m-r-auto{margin-right:auto !important}.m-b-auto{margin-bottom:auto !important}.m-l-auto{margin-left:auto !important}.m-x-auto{margin-left:auto !important;margin-right:auto !important}.m-y-auto{margin-top:auto !important;margin-bottom:auto !important}.m-a-auto{margin:auto !important}.m-t-0{margin-top:0 !important}.m-r-0{margin-right:0 !important}.m-b-0{margin-bottom:0 !important}.m-l-0{margin-left:0 !important}.m-x-0{margin-left:0 !important;margin-right:0 !important}.m-y-0{margin-top:0 !important;margin-bottom:0 !important}.m-a-0{margin:0 !important}.m-t-xxxs{margin-top:0.2rem !important}.m-r-xxxs{margin-right:0.2rem !important}.m-b-xxxs{margin-bottom:0.2rem !important}.m-l-xxxs{margin-left:0.2rem !important}.m-x-xxxs{margin-left:0.2rem !important;margin-right:0.2rem !important}.m-y-xxxs{margin-top:0.2rem !important;margin-bottom:0.2rem !important}.m-a-xxxs{margin:0.2rem !important}.m-t-xxs{margin-top:0.25rem !important}.m-r-xxs{margin-right:0.25rem !important}.m-b-xxs{margin-bottom:0.25rem !important}.m-l-xxs{margin-left:0.25rem !important}.m-x-xxs{margin-left:0.25rem !important;margin-right:0.25rem !important}.m-y-xxs{margin-top:0.25rem !important;margin-bottom:0.25rem !important}.m-a-xxs{margin:0.25rem !important}.m-t-xs{margin-top:0.5rem !important}.m-r-xs{margin-right:0.5rem !important}.m-b-xs{margin-bottom:0.5rem !important}.m-l-xs{margin-left:0.5rem !important}.m-x-xs{margin-left:0.5rem !important;margin-right:0.5rem !important}.m-y-xs{margin-top:0.5rem !important;margin-bottom:0.5rem !important}.m-a-xs{margin:0.5rem !important}.m-t{margin-top:1rem !important}.m-r{margin-right:1rem !important}.m-b{margin-bottom:1rem !important}.m-l{margin-left:1rem !important}.m-x{margin-left:1rem !important;margin-right:1rem !important}.m-y{margin-top:1rem !important;margin-bottom:1rem !important}.m-a{margin:1rem !important}.m-t-md{margin-top:1.5rem !important}.m-r-md{margin-right:1.5rem !important}.m-b-md{margin-bottom:1.5rem !important}.m-l-md{margin-left:1.5rem !important}.m-x-md{margin-left:1.5rem !important;margin-right:1.5rem !important}.m-y-md{margin-top:1.5rem !important;margin-bottom:1.5rem !important}.m-a-md{margin:1.5rem !important}.m-t-lg{margin-top:3rem !important}.m-r-lg{margin-right:3rem !important}.m-b-lg{margin-bottom:3rem !important}.m-l-lg{margin-left:3rem !important}.m-x-lg{margin-left:3rem !important;margin-right:3rem !important}.m-y-lg{margin-top:3rem !important;margin-bottom:3rem !important}.m-a-lg{margin:3rem !important}.m-t-xl{margin-top:4.5rem !important}.m-r-xl{margin-right:4.5rem !important}.m-b-xl{margin-bottom:4.5rem !important}.m-l-xl{margin-left:4.5rem !important}.m-x-xl{margin-left:4.5rem !important;margin-right:4.5rem !important}.m-y-xl{margin-top:4.5rem !important;margin-bottom:4.5rem !important}.m-a-xl{margin:4.5rem !important}.m-t-xxl{margin-top:6rem !important}.m-r-xxl{margin-right:6rem !important}.m-b-xxl{margin-bottom:6rem !important}.m-l-xxl{margin-left:6rem !important}.m-x-xxl{margin-left:6rem !important;margin-right:6rem !important}.m-y-xxl{margin-top:6rem !important;margin-bottom:6rem !important}.m-a-xxl{margin:6rem !important}.m-t-xxxl{margin-top:8rem !important}.m-r-xxxl{margin-right:8rem !important}.m-b-xxxl{margin-bottom:8rem !important}.m-l-xxxl{margin-left:8rem !important}.m-x-xxxl{margin-left:8rem !important;margin-right:8rem !important}.m-y-xxxl{margin-top:8rem !important;margin-bottom:8rem !important}.m-a-xxxl{margin:8rem !important}.m-t-neg-xxxs{margin-top:-0.2rem !important}.m-r-neg-xxxs{margin-right:-0.2rem !important}.m-b-neg-xxxs{margin-bottom:-0.2rem !important}.m-l-neg-xxxs{margin-left:-0.2rem !important}.m-x-neg-xxxs{margin-left:-0.2rem !important;margin-right:-0.2rem !important}.m-y-neg-xxxs{margin-top:-0.2rem !important;margin-bottom:-0.2rem !important}.m-a-neg-xxxs{margin:-0.2rem !important}.m-t-neg-xxs{margin-top:-0.25rem !important}.m-r-neg-xxs{margin-right:-0.25rem !important}.m-b-neg-xxs{margin-bottom:-0.25rem !important}.m-l-neg-xxs{margin-left:-0.25rem !important}.m-x-neg-xxs{margin-left:-0.25rem !important;margin-right:-0.25rem !important}.m-y-neg-xxs{margin-top:-0.25rem !important;margin-bottom:-0.25rem !important}.m-a-neg-xxs{margin:-0.25rem !important}.m-t-neg-xs{margin-top:-0.5rem !important}.m-r-neg-xs{margin-right:-0.5rem !important}.m-b-neg-xs{margin-bottom:-0.5rem !important}.m-l-neg-xs{margin-left:-0.5rem !important}.m-x-neg-xs{margin-left:-0.5rem !important;margin-right:-0.5rem !important}.m-y-neg-xs{margin-top:-0.5rem !important;margin-bottom:-0.5rem !important}.m-a-neg-xs{margin:-0.5rem !important}.m-t-neg{margin-top:-1rem !important}.m-r-neg{margin-right:-1rem !important}.m-b-neg{margin-bottom:-1rem !important}.m-l-neg{margin-left:-1rem !important}.m-x-neg{margin-left:-1rem !important;margin-right:-1rem !important}.m-y-neg{margin-top:-1rem !important;margin-bottom:-1rem !important}.m-a-neg{margin:-1rem !important}.m-t-neg-md{margin-top:-1.5rem !important}.m-r-neg-md{margin-right:-1.5rem !important}.m-b-neg-md{margin-bottom:-1.5rem !important}.m-l-neg-md{margin-left:-1.5rem !important}.m-x-neg-md{margin-left:-1.5rem !important;margin-right:-1.5rem !important}.m-y-neg-md{margin-top:-1.5rem !important;margin-bottom:-1.5rem !important}.m-a-neg-md{margin:-1.5rem !important}.m-t-neg-lg{margin-top:-3rem !important}.m-r-neg-lg{margin-right:-3rem !important}.m-b-neg-lg{margin-bottom:-3rem !important}.m-l-neg-lg{margin-left:-3rem !important}.m-x-neg-lg{margin-left:-3rem !important;margin-right:-3rem !important}.m-y-neg-lg{margin-top:-3rem !important;margin-bottom:-3rem !important}.m-a-neg-lg{margin:-3rem !important}.m-t-neg-xl{margin-top:-4.5rem !important}.m-r-neg-xl{margin-right:-4.5rem !important}.m-b-neg-xl{margin-bottom:-4.5rem !important}.m-l-neg-xl{margin-left:-4.5rem !important}.m-x-neg-xl{margin-left:-4.5rem !important;margin-right:-4.5rem !important}.m-y-neg-xl{margin-top:-4.5rem !important;margin-bottom:-4.5rem !important}.m-a-neg-xl{margin:-4.5rem !important}.m-t-neg-xxl{margin-top:-6rem !important}.m-r-neg-xxl{margin-right:-6rem !important}.m-b-neg-xxl{margin-bottom:-6rem !important}.m-l-neg-xxl{margin-left:-6rem !important}.m-x-neg-xxl{margin-left:-6rem !important;margin-right:-6rem !important}.m-y-neg-xxl{margin-top:-6rem !important;margin-bottom:-6rem !important}.m-a-neg-xxl{margin:-6rem !important}.m-t-neg-xxxl{margin-top:-8rem !important}.m-r-neg-xxxl{margin-right:-8rem !important}.m-b-neg-xxxl{margin-bottom:-8rem !important}.m-l-neg-xxxl{margin-left:-8rem !important}.m-x-neg-xxxl{margin-left:-8rem !important;margin-right:-8rem !important}.m-y-neg-xxxl{margin-top:-8rem !important;margin-bottom:-8rem !important}.m-a-neg-xxxl{margin:-8rem !important}.p-t-auto{padding-top:auto !important}.p-r-auto{padding-right:auto !important}.p-b-auto{padding-bottom:auto !important}.p-l-auto{padding-left:auto !important}.p-x-auto{padding-left:auto !important;padding-right:auto !important}.p-y-auto{padding-top:auto !important;padding-bottom:auto !important}.p-a-auto{padding:auto !important}.p-t-0{padding-top:0 !important}.p-r-0{padding-right:0 !important}.p-b-0{padding-bottom:0 !important}.p-l-0{padding-left:0 !important}.p-x-0{padding-left:0 !important;padding-right:0 !important}.p-y-0{padding-top:0 !important;padding-bottom:0 !important}.p-a-0{padding:0 !important}.p-t-xxxs{padding-top:0.2rem !important}.p-r-xxxs{padding-right:0.2rem !important}.p-b-xxxs{padding-bottom:0.2rem !important}.p-l-xxxs{padding-left:0.2rem !important}.p-x-xxxs{padding-left:0.2rem !important;padding-right:0.2rem !important}.p-y-xxxs{padding-top:0.2rem !important;padding-bottom:0.2rem !important}.p-a-xxxs{padding:0.2rem !important}.p-t-xxs{padding-top:0.25rem !important}.p-r-xxs{padding-right:0.25rem !important}.p-b-xxs{padding-bottom:0.25rem !important}.p-l-xxs{padding-left:0.25rem !important}.p-x-xxs{padding-left:0.25rem !important;padding-right:0.25rem !important}.p-y-xxs{padding-top:0.25rem !important;padding-bottom:0.25rem !important}.p-a-xxs{padding:0.25rem !important}.p-t-xs{padding-top:0.5rem !important}.p-r-xs{padding-right:0.5rem !important}.p-b-xs{padding-bottom:0.5rem !important}.p-l-xs{padding-left:0.5rem !important}.p-x-xs{padding-left:0.5rem !important;padding-right:0.5rem !important}.p-y-xs{padding-top:0.5rem !important;padding-bottom:0.5rem !important}.p-a-xs{padding:0.5rem !important}.p-t{padding-top:1rem !important}.p-r{padding-right:1rem !important}.p-b{padding-bottom:1rem !important}.p-l{padding-left:1rem !important}.p-x{padding-left:1rem !important;padding-right:1rem !important}.p-y{padding-top:1rem !important;padding-bottom:1rem !important}.p-a{padding:1rem !important}.p-t-md{padding-top:1.5rem !important}.p-r-md{padding-right:1.5rem !important}.p-b-md{padding-bottom:1.5rem !important}.p-l-md{padding-left:1.5rem !important}.p-x-md{padding-left:1.5rem !important;padding-right:1.5rem !important}.p-y-md{padding-top:1.5rem !important;padding-bottom:1.5rem !important}.p-a-md{padding:1.5rem !important}.p-t-lg{padding-top:3rem !important}.p-r-lg{padding-right:3rem !important}.p-b-lg{padding-bottom:3rem !important}.p-l-lg{padding-left:3rem !important}.p-x-lg{padding-left:3rem !important;padding-right:3rem !important}.p-y-lg{padding-top:3rem !important;padding-bottom:3rem !important}.p-a-lg{padding:3rem !important}.p-t-xl{padding-top:4.5rem !important}.p-r-xl{padding-right:4.5rem !important}.p-b-xl{padding-bottom:4.5rem !important}.p-l-xl{padding-left:4.5rem !important}.p-x-xl{padding-left:4.5rem !important;padding-right:4.5rem !important}.p-y-xl{padding-top:4.5rem !important;padding-bottom:4.5rem !important}.p-a-xl{padding:4.5rem !important}.p-t-xxl{padding-top:6rem !important}.p-r-xxl{padding-right:6rem !important}.p-b-xxl{padding-bottom:6rem !important}.p-l-xxl{padding-left:6rem !important}.p-x-xxl{padding-left:6rem !important;padding-right:6rem !important}.p-y-xxl{padding-top:6rem !important;padding-bottom:6rem !important}.p-a-xxl{padding:6rem !important}.p-t-xxxl{padding-top:8rem !important}.p-r-xxxl{padding-right:8rem !important}.p-b-xxxl{padding-bottom:8rem !important}.p-l-xxxl{padding-left:8rem !important}.p-x-xxxl{padding-left:8rem !important;padding-right:8rem !important}.p-y-xxxl{padding-top:8rem !important;padding-bottom:8rem !important}.p-a-xxxl{padding:8rem !important}.wa{width:auto !important}.w0{width:0 !important}.w5{width:5% !important}.w10{width:10% !important}.w25{width:25% !important}.w33{width:33.33333% !important}.w50{width:50% !important}.w66{width:66.66667% !important}.w100{width:100% !important}
2 |
--------------------------------------------------------------------------------
/dist/spaces.css:
--------------------------------------------------------------------------------
1 | /* margin-top */
2 | .mt-a { margin-top: auto !important; }
3 |
4 | /* margin-right */
5 | .mr-a { margin-right: auto !important; }
6 |
7 | /* margin-bottom */
8 | .mb-a { margin-bottom: auto !important; }
9 |
10 | /* margin-left */
11 | .ml-a { margin-left: auto !important; }
12 |
13 | /* horizontal margins */
14 | .mh-a { margin-left: auto !important; margin-right: auto !important; }
15 |
16 | /* vertical margins */
17 | .mv-a { margin-top: auto !important; margin-bottom: auto !important; }
18 |
19 | /* all margins */
20 | .m-a { margin: auto !important; }
21 |
22 | /* margin-top */
23 | .mt-0 { margin-top: 0 !important; }
24 |
25 | /* margin-right */
26 | .mr-0 { margin-right: 0 !important; }
27 |
28 | /* margin-bottom */
29 | .mb-0 { margin-bottom: 0 !important; }
30 |
31 | /* margin-left */
32 | .ml-0 { margin-left: 0 !important; }
33 |
34 | /* horizontal margins */
35 | .mh-0 { margin-left: 0 !important; margin-right: 0 !important; }
36 |
37 | /* vertical margins */
38 | .mv-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
39 |
40 | /* all margins */
41 | .m-0 { margin: 0 !important; }
42 |
43 | /* margin-top */
44 | .mt-xxxs { margin-top: 4px !important; }
45 |
46 | /* margin-right */
47 | .mr-xxxs { margin-right: 4px !important; }
48 |
49 | /* margin-bottom */
50 | .mb-xxxs { margin-bottom: 4px !important; }
51 |
52 | /* margin-left */
53 | .ml-xxxs { margin-left: 4px !important; }
54 |
55 | /* horizontal margins */
56 | .mh-xxxs { margin-left: 4px !important; margin-right: 4px !important; }
57 |
58 | /* vertical margins */
59 | .mv-xxxs { margin-top: 4px !important; margin-bottom: 4px !important; }
60 |
61 | /* all margins */
62 | .m-xxxs { margin: 4px !important; }
63 |
64 | /* margin-top */
65 | .mt-xxs { margin-top: 8px !important; }
66 |
67 | /* margin-right */
68 | .mr-xxs { margin-right: 8px !important; }
69 |
70 | /* margin-bottom */
71 | .mb-xxs { margin-bottom: 8px !important; }
72 |
73 | /* margin-left */
74 | .ml-xxs { margin-left: 8px !important; }
75 |
76 | /* horizontal margins */
77 | .mh-xxs { margin-left: 8px !important; margin-right: 8px !important; }
78 |
79 | /* vertical margins */
80 | .mv-xxs { margin-top: 8px !important; margin-bottom: 8px !important; }
81 |
82 | /* all margins */
83 | .m-xxs { margin: 8px !important; }
84 |
85 | /* margin-top */
86 | .mt-xs { margin-top: 16px !important; }
87 |
88 | /* margin-right */
89 | .mr-xs { margin-right: 16px !important; }
90 |
91 | /* margin-bottom */
92 | .mb-xs { margin-bottom: 16px !important; }
93 |
94 | /* margin-left */
95 | .ml-xs { margin-left: 16px !important; }
96 |
97 | /* horizontal margins */
98 | .mh-xs { margin-left: 16px !important; margin-right: 16px !important; }
99 |
100 | /* vertical margins */
101 | .mv-xs { margin-top: 16px !important; margin-bottom: 16px !important; }
102 |
103 | /* all margins */
104 | .m-xs { margin: 16px !important; }
105 |
106 | /* margin-top */
107 | .mt-s { margin-top: 24px !important; }
108 |
109 | /* margin-right */
110 | .mr-s { margin-right: 24px !important; }
111 |
112 | /* margin-bottom */
113 | .mb-s { margin-bottom: 24px !important; }
114 |
115 | /* margin-left */
116 | .ml-s { margin-left: 24px !important; }
117 |
118 | /* horizontal margins */
119 | .mh-s { margin-left: 24px !important; margin-right: 24px !important; }
120 |
121 | /* vertical margins */
122 | .mv-s { margin-top: 24px !important; margin-bottom: 24px !important; }
123 |
124 | /* all margins */
125 | .m-s { margin: 24px !important; }
126 |
127 | /* margin-top */
128 | .mt-m { margin-top: 36px !important; }
129 |
130 | /* margin-right */
131 | .mr-m { margin-right: 36px !important; }
132 |
133 | /* margin-bottom */
134 | .mb-m { margin-bottom: 36px !important; }
135 |
136 | /* margin-left */
137 | .ml-m { margin-left: 36px !important; }
138 |
139 | /* horizontal margins */
140 | .mh-m { margin-left: 36px !important; margin-right: 36px !important; }
141 |
142 | /* vertical margins */
143 | .mv-m { margin-top: 36px !important; margin-bottom: 36px !important; }
144 |
145 | /* all margins */
146 | .m-m { margin: 36px !important; }
147 |
148 | /* margin-top */
149 | .mt-l { margin-top: 48px !important; }
150 |
151 | /* margin-right */
152 | .mr-l { margin-right: 48px !important; }
153 |
154 | /* margin-bottom */
155 | .mb-l { margin-bottom: 48px !important; }
156 |
157 | /* margin-left */
158 | .ml-l { margin-left: 48px !important; }
159 |
160 | /* horizontal margins */
161 | .mh-l { margin-left: 48px !important; margin-right: 48px !important; }
162 |
163 | /* vertical margins */
164 | .mv-l { margin-top: 48px !important; margin-bottom: 48px !important; }
165 |
166 | /* all margins */
167 | .m-l { margin: 48px !important; }
168 |
169 | /* margin-top */
170 | .mt-xl { margin-top: 60px !important; }
171 |
172 | /* margin-right */
173 | .mr-xl { margin-right: 60px !important; }
174 |
175 | /* margin-bottom */
176 | .mb-xl { margin-bottom: 60px !important; }
177 |
178 | /* margin-left */
179 | .ml-xl { margin-left: 60px !important; }
180 |
181 | /* horizontal margins */
182 | .mh-xl { margin-left: 60px !important; margin-right: 60px !important; }
183 |
184 | /* vertical margins */
185 | .mv-xl { margin-top: 60px !important; margin-bottom: 60px !important; }
186 |
187 | /* all margins */
188 | .m-xl { margin: 60px !important; }
189 |
190 | /* margin-top */
191 | .mt-xxl { margin-top: 96px !important; }
192 |
193 | /* margin-right */
194 | .mr-xxl { margin-right: 96px !important; }
195 |
196 | /* margin-bottom */
197 | .mb-xxl { margin-bottom: 96px !important; }
198 |
199 | /* margin-left */
200 | .ml-xxl { margin-left: 96px !important; }
201 |
202 | /* horizontal margins */
203 | .mh-xxl { margin-left: 96px !important; margin-right: 96px !important; }
204 |
205 | /* vertical margins */
206 | .mv-xxl { margin-top: 96px !important; margin-bottom: 96px !important; }
207 |
208 | /* all margins */
209 | .m-xxl { margin: 96px !important; }
210 |
211 | /* margin-top */
212 | .mt-xxxl { margin-top: 144px !important; }
213 |
214 | /* margin-right */
215 | .mr-xxxl { margin-right: 144px !important; }
216 |
217 | /* margin-bottom */
218 | .mb-xxxl { margin-bottom: 144px !important; }
219 |
220 | /* margin-left */
221 | .ml-xxxl { margin-left: 144px !important; }
222 |
223 | /* horizontal margins */
224 | .mh-xxxl { margin-left: 144px !important; margin-right: 144px !important; }
225 |
226 | /* vertical margins */
227 | .mv-xxxl { margin-top: 144px !important; margin-bottom: 144px !important; }
228 |
229 | /* all margins */
230 | .m-xxxl { margin: 144px !important; }
231 |
232 | /* NEGATIVE MARGINS */
233 | /* margin-top */
234 | .mt--xxxs { margin-top: -4px !important; }
235 |
236 | /* margin-right */
237 | .mr--xxxs { margin-right: -4px !important; }
238 |
239 | /* margin-bottom */
240 | .mb--xxxs { margin-bottom: -4px !important; }
241 |
242 | /* margin-left */
243 | .ml--xxxs { margin-left: -4px !important; }
244 |
245 | /* horizontal margins */
246 | .mh--xxxs { margin-left: -4px !important; margin-right: -4px !important; }
247 |
248 | /* vertical margins */
249 | .mv--xxxs { margin-top: -4px !important; margin-bottom: -4px !important; }
250 |
251 | /* all margins */
252 | .m--xxxs { margin: -4px !important; }
253 |
254 | /* margin-top */
255 | .mt--xxs { margin-top: -8px !important; }
256 |
257 | /* margin-right */
258 | .mr--xxs { margin-right: -8px !important; }
259 |
260 | /* margin-bottom */
261 | .mb--xxs { margin-bottom: -8px !important; }
262 |
263 | /* margin-left */
264 | .ml--xxs { margin-left: -8px !important; }
265 |
266 | /* horizontal margins */
267 | .mh--xxs { margin-left: -8px !important; margin-right: -8px !important; }
268 |
269 | /* vertical margins */
270 | .mv--xxs { margin-top: -8px !important; margin-bottom: -8px !important; }
271 |
272 | /* all margins */
273 | .m--xxs { margin: -8px !important; }
274 |
275 | /* margin-top */
276 | .mt--xs { margin-top: -16px !important; }
277 |
278 | /* margin-right */
279 | .mr--xs { margin-right: -16px !important; }
280 |
281 | /* margin-bottom */
282 | .mb--xs { margin-bottom: -16px !important; }
283 |
284 | /* margin-left */
285 | .ml--xs { margin-left: -16px !important; }
286 |
287 | /* horizontal margins */
288 | .mh--xs { margin-left: -16px !important; margin-right: -16px !important; }
289 |
290 | /* vertical margins */
291 | .mv--xs { margin-top: -16px !important; margin-bottom: -16px !important; }
292 |
293 | /* all margins */
294 | .m--xs { margin: -16px !important; }
295 |
296 | /* margin-top */
297 | .mt--s { margin-top: -24px !important; }
298 |
299 | /* margin-right */
300 | .mr--s { margin-right: -24px !important; }
301 |
302 | /* margin-bottom */
303 | .mb--s { margin-bottom: -24px !important; }
304 |
305 | /* margin-left */
306 | .ml--s { margin-left: -24px !important; }
307 |
308 | /* horizontal margins */
309 | .mh--s { margin-left: -24px !important; margin-right: -24px !important; }
310 |
311 | /* vertical margins */
312 | .mv--s { margin-top: -24px !important; margin-bottom: -24px !important; }
313 |
314 | /* all margins */
315 | .m--s { margin: -24px !important; }
316 |
317 | /* margin-top */
318 | .mt--m { margin-top: -36px !important; }
319 |
320 | /* margin-right */
321 | .mr--m { margin-right: -36px !important; }
322 |
323 | /* margin-bottom */
324 | .mb--m { margin-bottom: -36px !important; }
325 |
326 | /* margin-left */
327 | .ml--m { margin-left: -36px !important; }
328 |
329 | /* horizontal margins */
330 | .mh--m { margin-left: -36px !important; margin-right: -36px !important; }
331 |
332 | /* vertical margins */
333 | .mv--m { margin-top: -36px !important; margin-bottom: -36px !important; }
334 |
335 | /* all margins */
336 | .m--m { margin: -36px !important; }
337 |
338 | /* margin-top */
339 | .mt--l { margin-top: -48px !important; }
340 |
341 | /* margin-right */
342 | .mr--l { margin-right: -48px !important; }
343 |
344 | /* margin-bottom */
345 | .mb--l { margin-bottom: -48px !important; }
346 |
347 | /* margin-left */
348 | .ml--l { margin-left: -48px !important; }
349 |
350 | /* horizontal margins */
351 | .mh--l { margin-left: -48px !important; margin-right: -48px !important; }
352 |
353 | /* vertical margins */
354 | .mv--l { margin-top: -48px !important; margin-bottom: -48px !important; }
355 |
356 | /* all margins */
357 | .m--l { margin: -48px !important; }
358 |
359 | /* margin-top */
360 | .mt--xl { margin-top: -60px !important; }
361 |
362 | /* margin-right */
363 | .mr--xl { margin-right: -60px !important; }
364 |
365 | /* margin-bottom */
366 | .mb--xl { margin-bottom: -60px !important; }
367 |
368 | /* margin-left */
369 | .ml--xl { margin-left: -60px !important; }
370 |
371 | /* horizontal margins */
372 | .mh--xl { margin-left: -60px !important; margin-right: -60px !important; }
373 |
374 | /* vertical margins */
375 | .mv--xl { margin-top: -60px !important; margin-bottom: -60px !important; }
376 |
377 | /* all margins */
378 | .m--xl { margin: -60px !important; }
379 |
380 | /* margin-top */
381 | .mt--xxl { margin-top: -96px !important; }
382 |
383 | /* margin-right */
384 | .mr--xxl { margin-right: -96px !important; }
385 |
386 | /* margin-bottom */
387 | .mb--xxl { margin-bottom: -96px !important; }
388 |
389 | /* margin-left */
390 | .ml--xxl { margin-left: -96px !important; }
391 |
392 | /* horizontal margins */
393 | .mh--xxl { margin-left: -96px !important; margin-right: -96px !important; }
394 |
395 | /* vertical margins */
396 | .mv--xxl { margin-top: -96px !important; margin-bottom: -96px !important; }
397 |
398 | /* all margins */
399 | .m--xxl { margin: -96px !important; }
400 |
401 | /* margin-top */
402 | .mt--xxxl { margin-top: -144px !important; }
403 |
404 | /* margin-right */
405 | .mr--xxxl { margin-right: -144px !important; }
406 |
407 | /* margin-bottom */
408 | .mb--xxxl { margin-bottom: -144px !important; }
409 |
410 | /* margin-left */
411 | .ml--xxxl { margin-left: -144px !important; }
412 |
413 | /* horizontal margins */
414 | .mh--xxxl { margin-left: -144px !important; margin-right: -144px !important; }
415 |
416 | /* vertical margins */
417 | .mv--xxxl { margin-top: -144px !important; margin-bottom: -144px !important; }
418 |
419 | /* all margins */
420 | .m--xxxl { margin: -144px !important; }
421 |
422 | /* padding-top */
423 | .pt-a { padding-top: auto !important; }
424 |
425 | /* padding-right */
426 | .pr-a { padding-right: auto !important; }
427 |
428 | /* padding-bottom */
429 | .pb-a { padding-bottom: auto !important; }
430 |
431 | /* padding-left */
432 | .pl-a { padding-left: auto !important; }
433 |
434 | /* horizontal paddings */
435 | .ph-a { padding-left: auto !important; padding-right: auto !important; }
436 |
437 | /* vertical paddings */
438 | .pv-a { padding-top: auto !important; padding-bottom: auto !important; }
439 |
440 | /* all paddings */
441 | .p-a { padding: auto !important; }
442 |
443 | /* padding-top */
444 | .pt-0 { padding-top: 0 !important; }
445 |
446 | /* padding-right */
447 | .pr-0 { padding-right: 0 !important; }
448 |
449 | /* padding-bottom */
450 | .pb-0 { padding-bottom: 0 !important; }
451 |
452 | /* padding-left */
453 | .pl-0 { padding-left: 0 !important; }
454 |
455 | /* horizontal paddings */
456 | .ph-0 { padding-left: 0 !important; padding-right: 0 !important; }
457 |
458 | /* vertical paddings */
459 | .pv-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
460 |
461 | /* all paddings */
462 | .p-0 { padding: 0 !important; }
463 |
464 | /* padding-top */
465 | .pt-xxxs { padding-top: 4px !important; }
466 |
467 | /* padding-right */
468 | .pr-xxxs { padding-right: 4px !important; }
469 |
470 | /* padding-bottom */
471 | .pb-xxxs { padding-bottom: 4px !important; }
472 |
473 | /* padding-left */
474 | .pl-xxxs { padding-left: 4px !important; }
475 |
476 | /* horizontal paddings */
477 | .ph-xxxs { padding-left: 4px !important; padding-right: 4px !important; }
478 |
479 | /* vertical paddings */
480 | .pv-xxxs { padding-top: 4px !important; padding-bottom: 4px !important; }
481 |
482 | /* all paddings */
483 | .p-xxxs { padding: 4px !important; }
484 |
485 | /* padding-top */
486 | .pt-xxs { padding-top: 8px !important; }
487 |
488 | /* padding-right */
489 | .pr-xxs { padding-right: 8px !important; }
490 |
491 | /* padding-bottom */
492 | .pb-xxs { padding-bottom: 8px !important; }
493 |
494 | /* padding-left */
495 | .pl-xxs { padding-left: 8px !important; }
496 |
497 | /* horizontal paddings */
498 | .ph-xxs { padding-left: 8px !important; padding-right: 8px !important; }
499 |
500 | /* vertical paddings */
501 | .pv-xxs { padding-top: 8px !important; padding-bottom: 8px !important; }
502 |
503 | /* all paddings */
504 | .p-xxs { padding: 8px !important; }
505 |
506 | /* padding-top */
507 | .pt-xs { padding-top: 16px !important; }
508 |
509 | /* padding-right */
510 | .pr-xs { padding-right: 16px !important; }
511 |
512 | /* padding-bottom */
513 | .pb-xs { padding-bottom: 16px !important; }
514 |
515 | /* padding-left */
516 | .pl-xs { padding-left: 16px !important; }
517 |
518 | /* horizontal paddings */
519 | .ph-xs { padding-left: 16px !important; padding-right: 16px !important; }
520 |
521 | /* vertical paddings */
522 | .pv-xs { padding-top: 16px !important; padding-bottom: 16px !important; }
523 |
524 | /* all paddings */
525 | .p-xs { padding: 16px !important; }
526 |
527 | /* padding-top */
528 | .pt-s { padding-top: 24px !important; }
529 |
530 | /* padding-right */
531 | .pr-s { padding-right: 24px !important; }
532 |
533 | /* padding-bottom */
534 | .pb-s { padding-bottom: 24px !important; }
535 |
536 | /* padding-left */
537 | .pl-s { padding-left: 24px !important; }
538 |
539 | /* horizontal paddings */
540 | .ph-s { padding-left: 24px !important; padding-right: 24px !important; }
541 |
542 | /* vertical paddings */
543 | .pv-s { padding-top: 24px !important; padding-bottom: 24px !important; }
544 |
545 | /* all paddings */
546 | .p-s { padding: 24px !important; }
547 |
548 | /* padding-top */
549 | .pt-m { padding-top: 36px !important; }
550 |
551 | /* padding-right */
552 | .pr-m { padding-right: 36px !important; }
553 |
554 | /* padding-bottom */
555 | .pb-m { padding-bottom: 36px !important; }
556 |
557 | /* padding-left */
558 | .pl-m { padding-left: 36px !important; }
559 |
560 | /* horizontal paddings */
561 | .ph-m { padding-left: 36px !important; padding-right: 36px !important; }
562 |
563 | /* vertical paddings */
564 | .pv-m { padding-top: 36px !important; padding-bottom: 36px !important; }
565 |
566 | /* all paddings */
567 | .p-m { padding: 36px !important; }
568 |
569 | /* padding-top */
570 | .pt-l { padding-top: 48px !important; }
571 |
572 | /* padding-right */
573 | .pr-l { padding-right: 48px !important; }
574 |
575 | /* padding-bottom */
576 | .pb-l { padding-bottom: 48px !important; }
577 |
578 | /* padding-left */
579 | .pl-l { padding-left: 48px !important; }
580 |
581 | /* horizontal paddings */
582 | .ph-l { padding-left: 48px !important; padding-right: 48px !important; }
583 |
584 | /* vertical paddings */
585 | .pv-l { padding-top: 48px !important; padding-bottom: 48px !important; }
586 |
587 | /* all paddings */
588 | .p-l { padding: 48px !important; }
589 |
590 | /* padding-top */
591 | .pt-xl { padding-top: 60px !important; }
592 |
593 | /* padding-right */
594 | .pr-xl { padding-right: 60px !important; }
595 |
596 | /* padding-bottom */
597 | .pb-xl { padding-bottom: 60px !important; }
598 |
599 | /* padding-left */
600 | .pl-xl { padding-left: 60px !important; }
601 |
602 | /* horizontal paddings */
603 | .ph-xl { padding-left: 60px !important; padding-right: 60px !important; }
604 |
605 | /* vertical paddings */
606 | .pv-xl { padding-top: 60px !important; padding-bottom: 60px !important; }
607 |
608 | /* all paddings */
609 | .p-xl { padding: 60px !important; }
610 |
611 | /* padding-top */
612 | .pt-xxl { padding-top: 96px !important; }
613 |
614 | /* padding-right */
615 | .pr-xxl { padding-right: 96px !important; }
616 |
617 | /* padding-bottom */
618 | .pb-xxl { padding-bottom: 96px !important; }
619 |
620 | /* padding-left */
621 | .pl-xxl { padding-left: 96px !important; }
622 |
623 | /* horizontal paddings */
624 | .ph-xxl { padding-left: 96px !important; padding-right: 96px !important; }
625 |
626 | /* vertical paddings */
627 | .pv-xxl { padding-top: 96px !important; padding-bottom: 96px !important; }
628 |
629 | /* all paddings */
630 | .p-xxl { padding: 96px !important; }
631 |
632 | /* padding-top */
633 | .pt-xxxl { padding-top: 144px !important; }
634 |
635 | /* padding-right */
636 | .pr-xxxl { padding-right: 144px !important; }
637 |
638 | /* padding-bottom */
639 | .pb-xxxl { padding-bottom: 144px !important; }
640 |
641 | /* padding-left */
642 | .pl-xxxl { padding-left: 144px !important; }
643 |
644 | /* horizontal paddings */
645 | .ph-xxxl { padding-left: 144px !important; padding-right: 144px !important; }
646 |
647 | /* vertical paddings */
648 | .pv-xxxl { padding-top: 144px !important; padding-bottom: 144px !important; }
649 |
650 | /* all paddings */
651 | .p-xxxl { padding: 144px !important; }
652 |
653 | /* widths */
654 | .wa { width: auto !important; }
655 |
656 | .w0 { width: 0 !important; }
657 |
658 | .w5 { width: 5% !important; }
659 |
660 | .w10 { width: 10% !important; }
661 |
662 | .w25 { width: 25% !important; }
663 |
664 | .w33 { width: 33.33333% !important; }
665 |
666 | .w50 { width: 50% !important; }
667 |
668 | .w66 { width: 66.66667% !important; }
669 |
670 | .w100 { width: 100% !important; }
671 |
--------------------------------------------------------------------------------
/dist/spaces.min.css:
--------------------------------------------------------------------------------
1 | .mt-a{margin-top:auto !important}.mr-a{margin-right:auto !important}.mb-a{margin-bottom:auto !important}.ml-a{margin-left:auto !important}.mh-a{margin-left:auto !important;margin-right:auto !important}.mv-a{margin-top:auto !important;margin-bottom:auto !important}.m-a{margin:auto !important}.mt-0{margin-top:0 !important}.mr-0{margin-right:0 !important}.mb-0{margin-bottom:0 !important}.ml-0{margin-left:0 !important}.mh-0{margin-left:0 !important;margin-right:0 !important}.mv-0{margin-top:0 !important;margin-bottom:0 !important}.m-0{margin:0 !important}.mt-xxxs{margin-top:4px !important}.mr-xxxs{margin-right:4px !important}.mb-xxxs{margin-bottom:4px !important}.ml-xxxs{margin-left:4px !important}.mh-xxxs{margin-left:4px !important;margin-right:4px !important}.mv-xxxs{margin-top:4px !important;margin-bottom:4px !important}.m-xxxs{margin:4px !important}.mt-xxs{margin-top:8px !important}.mr-xxs{margin-right:8px !important}.mb-xxs{margin-bottom:8px !important}.ml-xxs{margin-left:8px !important}.mh-xxs{margin-left:8px !important;margin-right:8px !important}.mv-xxs{margin-top:8px !important;margin-bottom:8px !important}.m-xxs{margin:8px !important}.mt-xs{margin-top:16px !important}.mr-xs{margin-right:16px !important}.mb-xs{margin-bottom:16px !important}.ml-xs{margin-left:16px !important}.mh-xs{margin-left:16px !important;margin-right:16px !important}.mv-xs{margin-top:16px !important;margin-bottom:16px !important}.m-xs{margin:16px !important}.mt-s{margin-top:24px !important}.mr-s{margin-right:24px !important}.mb-s{margin-bottom:24px !important}.ml-s{margin-left:24px !important}.mh-s{margin-left:24px !important;margin-right:24px !important}.mv-s{margin-top:24px !important;margin-bottom:24px !important}.m-s{margin:24px !important}.mt-m{margin-top:36px !important}.mr-m{margin-right:36px !important}.mb-m{margin-bottom:36px !important}.ml-m{margin-left:36px !important}.mh-m{margin-left:36px !important;margin-right:36px !important}.mv-m{margin-top:36px !important;margin-bottom:36px !important}.m-m{margin:36px !important}.mt-l{margin-top:48px !important}.mr-l{margin-right:48px !important}.mb-l{margin-bottom:48px !important}.ml-l{margin-left:48px !important}.mh-l{margin-left:48px !important;margin-right:48px !important}.mv-l{margin-top:48px !important;margin-bottom:48px !important}.m-l{margin:48px !important}.mt-xl{margin-top:60px !important}.mr-xl{margin-right:60px !important}.mb-xl{margin-bottom:60px !important}.ml-xl{margin-left:60px !important}.mh-xl{margin-left:60px !important;margin-right:60px !important}.mv-xl{margin-top:60px !important;margin-bottom:60px !important}.m-xl{margin:60px !important}.mt-xxl{margin-top:96px !important}.mr-xxl{margin-right:96px !important}.mb-xxl{margin-bottom:96px !important}.ml-xxl{margin-left:96px !important}.mh-xxl{margin-left:96px !important;margin-right:96px !important}.mv-xxl{margin-top:96px !important;margin-bottom:96px !important}.m-xxl{margin:96px !important}.mt-xxxl{margin-top:144px !important}.mr-xxxl{margin-right:144px !important}.mb-xxxl{margin-bottom:144px !important}.ml-xxxl{margin-left:144px !important}.mh-xxxl{margin-left:144px !important;margin-right:144px !important}.mv-xxxl{margin-top:144px !important;margin-bottom:144px !important}.m-xxxl{margin:144px !important}.mt--xxxs{margin-top:-4px !important}.mr--xxxs{margin-right:-4px !important}.mb--xxxs{margin-bottom:-4px !important}.ml--xxxs{margin-left:-4px !important}.mh--xxxs{margin-left:-4px !important;margin-right:-4px !important}.mv--xxxs{margin-top:-4px !important;margin-bottom:-4px !important}.m--xxxs{margin:-4px !important}.mt--xxs{margin-top:-8px !important}.mr--xxs{margin-right:-8px !important}.mb--xxs{margin-bottom:-8px !important}.ml--xxs{margin-left:-8px !important}.mh--xxs{margin-left:-8px !important;margin-right:-8px !important}.mv--xxs{margin-top:-8px !important;margin-bottom:-8px !important}.m--xxs{margin:-8px !important}.mt--xs{margin-top:-16px !important}.mr--xs{margin-right:-16px !important}.mb--xs{margin-bottom:-16px !important}.ml--xs{margin-left:-16px !important}.mh--xs{margin-left:-16px !important;margin-right:-16px !important}.mv--xs{margin-top:-16px !important;margin-bottom:-16px !important}.m--xs{margin:-16px !important}.mt--s{margin-top:-24px !important}.mr--s{margin-right:-24px !important}.mb--s{margin-bottom:-24px !important}.ml--s{margin-left:-24px !important}.mh--s{margin-left:-24px !important;margin-right:-24px !important}.mv--s{margin-top:-24px !important;margin-bottom:-24px !important}.m--s{margin:-24px !important}.mt--m{margin-top:-36px !important}.mr--m{margin-right:-36px !important}.mb--m{margin-bottom:-36px !important}.ml--m{margin-left:-36px !important}.mh--m{margin-left:-36px !important;margin-right:-36px !important}.mv--m{margin-top:-36px !important;margin-bottom:-36px !important}.m--m{margin:-36px !important}.mt--l{margin-top:-48px !important}.mr--l{margin-right:-48px !important}.mb--l{margin-bottom:-48px !important}.ml--l{margin-left:-48px !important}.mh--l{margin-left:-48px !important;margin-right:-48px !important}.mv--l{margin-top:-48px !important;margin-bottom:-48px !important}.m--l{margin:-48px !important}.mt--xl{margin-top:-60px !important}.mr--xl{margin-right:-60px !important}.mb--xl{margin-bottom:-60px !important}.ml--xl{margin-left:-60px !important}.mh--xl{margin-left:-60px !important;margin-right:-60px !important}.mv--xl{margin-top:-60px !important;margin-bottom:-60px !important}.m--xl{margin:-60px !important}.mt--xxl{margin-top:-96px !important}.mr--xxl{margin-right:-96px !important}.mb--xxl{margin-bottom:-96px !important}.ml--xxl{margin-left:-96px !important}.mh--xxl{margin-left:-96px !important;margin-right:-96px !important}.mv--xxl{margin-top:-96px !important;margin-bottom:-96px !important}.m--xxl{margin:-96px !important}.mt--xxxl{margin-top:-144px !important}.mr--xxxl{margin-right:-144px !important}.mb--xxxl{margin-bottom:-144px !important}.ml--xxxl{margin-left:-144px !important}.mh--xxxl{margin-left:-144px !important;margin-right:-144px !important}.mv--xxxl{margin-top:-144px !important;margin-bottom:-144px !important}.m--xxxl{margin:-144px !important}.pt-a{padding-top:auto !important}.pr-a{padding-right:auto !important}.pb-a{padding-bottom:auto !important}.pl-a{padding-left:auto !important}.ph-a{padding-left:auto !important;padding-right:auto !important}.pv-a{padding-top:auto !important;padding-bottom:auto !important}.p-a{padding:auto !important}.pt-0{padding-top:0 !important}.pr-0{padding-right:0 !important}.pb-0{padding-bottom:0 !important}.pl-0{padding-left:0 !important}.ph-0{padding-left:0 !important;padding-right:0 !important}.pv-0{padding-top:0 !important;padding-bottom:0 !important}.p-0{padding:0 !important}.pt-xxxs{padding-top:4px !important}.pr-xxxs{padding-right:4px !important}.pb-xxxs{padding-bottom:4px !important}.pl-xxxs{padding-left:4px !important}.ph-xxxs{padding-left:4px !important;padding-right:4px !important}.pv-xxxs{padding-top:4px !important;padding-bottom:4px !important}.p-xxxs{padding:4px !important}.pt-xxs{padding-top:8px !important}.pr-xxs{padding-right:8px !important}.pb-xxs{padding-bottom:8px !important}.pl-xxs{padding-left:8px !important}.ph-xxs{padding-left:8px !important;padding-right:8px !important}.pv-xxs{padding-top:8px !important;padding-bottom:8px !important}.p-xxs{padding:8px !important}.pt-xs{padding-top:16px !important}.pr-xs{padding-right:16px !important}.pb-xs{padding-bottom:16px !important}.pl-xs{padding-left:16px !important}.ph-xs{padding-left:16px !important;padding-right:16px !important}.pv-xs{padding-top:16px !important;padding-bottom:16px !important}.p-xs{padding:16px !important}.pt-s{padding-top:24px !important}.pr-s{padding-right:24px !important}.pb-s{padding-bottom:24px !important}.pl-s{padding-left:24px !important}.ph-s{padding-left:24px !important;padding-right:24px !important}.pv-s{padding-top:24px !important;padding-bottom:24px !important}.p-s{padding:24px !important}.pt-m{padding-top:36px !important}.pr-m{padding-right:36px !important}.pb-m{padding-bottom:36px !important}.pl-m{padding-left:36px !important}.ph-m{padding-left:36px !important;padding-right:36px !important}.pv-m{padding-top:36px !important;padding-bottom:36px !important}.p-m{padding:36px !important}.pt-l{padding-top:48px !important}.pr-l{padding-right:48px !important}.pb-l{padding-bottom:48px !important}.pl-l{padding-left:48px !important}.ph-l{padding-left:48px !important;padding-right:48px !important}.pv-l{padding-top:48px !important;padding-bottom:48px !important}.p-l{padding:48px !important}.pt-xl{padding-top:60px !important}.pr-xl{padding-right:60px !important}.pb-xl{padding-bottom:60px !important}.pl-xl{padding-left:60px !important}.ph-xl{padding-left:60px !important;padding-right:60px !important}.pv-xl{padding-top:60px !important;padding-bottom:60px !important}.p-xl{padding:60px !important}.pt-xxl{padding-top:96px !important}.pr-xxl{padding-right:96px !important}.pb-xxl{padding-bottom:96px !important}.pl-xxl{padding-left:96px !important}.ph-xxl{padding-left:96px !important;padding-right:96px !important}.pv-xxl{padding-top:96px !important;padding-bottom:96px !important}.p-xxl{padding:96px !important}.pt-xxxl{padding-top:144px !important}.pr-xxxl{padding-right:144px !important}.pb-xxxl{padding-bottom:144px !important}.pl-xxxl{padding-left:144px !important}.ph-xxxl{padding-left:144px !important;padding-right:144px !important}.pv-xxxl{padding-top:144px !important;padding-bottom:144px !important}.p-xxxl{padding:144px !important}.wa{width:auto !important}.w0{width:0 !important}.w5{width:5% !important}.w10{width:10% !important}.w25{width:25% !important}.w33{width:33.33333% !important}.w50{width:50% !important}.w66{width:66.66667% !important}.w100{width:100% !important}
2 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var sass = require('gulp-sass');
3 | var del = require('del');
4 | var rename = require('gulp-rename');
5 |
6 | // start development
7 | gulp.task('default', ['dev']);
8 |
9 | // start scss watch mode
10 | gulp.task('dev', ['sass'], function () {
11 | gulp.watch('source/**/*.scss', ['sass']);
12 | });
13 |
14 | // create normal and minified versions
15 | gulp.task('build', ['clean', 'sass', 'sass-min']);
16 |
17 | // create readable css from scss files
18 | gulp.task('sass', function () {
19 | return gulp.src('source/*.scss')
20 | .pipe(sass({outputStyle: 'compact'}).on('error', sass.logError))
21 | .pipe(gulp.dest('dist/'))
22 | });
23 |
24 | // create minified scss files
25 | gulp.task('sass-min', function () {
26 | return gulp.src('source/*.scss')
27 | .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
28 | .pipe(rename(function (path) {
29 | path.basename += ".min";
30 | return path;
31 | }))
32 | .pipe(gulp.dest('dist/'))
33 | });
34 |
35 | // delete dist folder
36 | gulp.task('clean', function () {
37 | return del(['dist']);
38 | });
39 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "css-spaces",
3 | "version": "0.3.5",
4 | "description": "A simple CSS spacing library for margins, paddings and more",
5 | "main": "gulpfile.js",
6 | "scripts": {
7 | "gulp": "gulp",
8 | "bower": "bower",
9 | "prestart": "npm install",
10 | "build": "npm install && gulp",
11 | "start": "gulp dev",
12 | "test": "echo \"Error: no test specified\" && exit 1"
13 | },
14 | "repository": {
15 | "type": "git",
16 | "url": "git+https://github.com/badabam/css-spaces.git"
17 | },
18 | "keywords": [
19 | "css",
20 | "sass",
21 | "margin",
22 | "padding",
23 | "width",
24 | "styles",
25 | "spacing",
26 | "height",
27 | "library",
28 | "lib"
29 | ],
30 | "author": "Jeremias Erbs ",
31 | "license": "MIT",
32 | "bugs": {
33 | "url": "https://github.com/badabam/css-spaces/issues"
34 | },
35 | "homepage": "https://github.com/badabam/css-spaces#readme",
36 | "devDependencies": {
37 | "browser-sync": "^2.9.12",
38 | "del": "^2.0.2",
39 | "gulp": "^3.9.0",
40 | "gulp-rename": "^1.2.2",
41 | "gulp-sass": "^2.1.0"
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/source/_margins.scss:
--------------------------------------------------------------------------------
1 | @each $name, $size in $sizes {
2 |
3 | /* margin-top */
4 | .#{$prefix}m#{$delimiter1}t#{if($name != '', $delimiter2 + $name, '')} {
5 | margin-top: #{$size} !important;
6 | }
7 | /* margin-right */
8 | .#{$prefix}m#{$delimiter1}r#{if($name != '', $delimiter2 + $name, '')} {
9 | margin-right: #{$size} !important;
10 | }
11 | /* margin-bottom */
12 | .#{$prefix}m#{$delimiter1}b#{if($name != '', $delimiter2 + $name, '')} {
13 | margin-bottom: #{$size} !important;
14 | }
15 | /* margin-left */
16 | .#{$prefix}m#{$delimiter1}l#{if($name != '', $delimiter2 + $name, '')} {
17 | margin-left: #{$size} !important;
18 | }
19 |
20 | /* horizontal margins */
21 | .#{$prefix}m#{$delimiter1}#{$h}#{if($name != '', $delimiter2 + $name, '')} {
22 | margin-left: #{$size} !important;
23 | margin-right: #{$size} !important;
24 | }
25 | /* vertical margins */
26 | .#{$prefix}m#{$delimiter1}#{$v}#{if($name != '', $delimiter2 + $name, '')} {
27 | margin-top: #{$size} !important;
28 | margin-bottom: #{$size} !important;
29 | }
30 | /* all margins */
31 | .#{$prefix}m#{$delimiter1}#{$a}#{if($name != '', $delimiter2 + $name, '')} {
32 | margin: #{$size} !important;
33 | }
34 | }
35 |
36 | /* NEGATIVE MARGINS */
37 | @each $name, $size in $sizes {
38 |
39 | $negName: $neg + $name;
40 |
41 | // DON'T run, if it is 'auto'
42 | // (because '-auto;' is not a valid value)
43 |
44 | @if $size != auto {
45 | @if $size != 0 {
46 |
47 | /* margin-top */
48 | .#{$prefix}m#{$delimiter1}t#{if($name != '', $neg + $delimiter2 + $name, $neg)} {
49 | margin-top: -#{$size} !important;
50 | }
51 | /* margin-right */
52 | .#{$prefix}m#{$delimiter1}r#{if($name != '', $neg + $delimiter2 + $name, $neg)} {
53 | margin-right: -#{$size} !important;
54 | }
55 | /* margin-bottom */
56 | .#{$prefix}m#{$delimiter1}b#{if($name != '', $neg + $delimiter2 + $name, $neg)} {
57 | margin-bottom: -#{$size} !important;
58 | }
59 | /* margin-left */
60 | .#{$prefix}m#{$delimiter1}l#{if($name != '', $neg + $delimiter2 + $name, $neg)} {
61 | margin-left: -#{$size} !important;
62 | }
63 |
64 | /* horizontal margins */
65 | .#{$prefix}m#{$delimiter1}#{$h}#{if($name != '', $neg + $delimiter2 + $name, $neg)} {
66 | margin-left: -#{$size} !important;
67 | margin-right: -#{$size} !important;
68 | }
69 | /* vertical margins */
70 | .#{$prefix}m#{$delimiter1}#{$v}#{if($name != '', $neg + $delimiter2 + $name, $neg)} {
71 | margin-top: -#{$size} !important;
72 | margin-bottom: -#{$size} !important;
73 | }
74 | /* all margins */
75 | .#{$prefix}m#{$delimiter1}#{$a}#{if($name != '', $neg + $delimiter2 + $name, $neg)} {
76 | margin: -#{$size} !important;
77 | }
78 |
79 | } // end @if
80 | } // end 2nd @if
81 | }
82 |
--------------------------------------------------------------------------------
/source/_paddings.scss:
--------------------------------------------------------------------------------
1 | @each $name, $size in $sizes {
2 |
3 | /* padding-top */
4 | .#{$prefix}p#{$delimiter1}t#{if($name != '', $delimiter2 + $name, '')} {
5 | padding-top: #{$size} !important;
6 | }
7 | /* padding-right */
8 | .#{$prefix}p#{$delimiter1}r#{if($name != '', $delimiter2 + $name, '')} {
9 | padding-right: #{$size} !important;
10 | }
11 | /* padding-bottom */
12 | .#{$prefix}p#{$delimiter1}b#{if($name != '', $delimiter2 + $name, '')} {
13 | padding-bottom: #{$size} !important;
14 | }
15 | /* padding-left */
16 | .#{$prefix}p#{$delimiter1}l#{if($name != '', $delimiter2 + $name, '')} {
17 | padding-left: #{$size} !important;
18 | }
19 |
20 | /* horizontal paddings */
21 | .#{$prefix}p#{$delimiter1}#{$h}#{if($name != '', $delimiter2 + $name, '')} {
22 | padding-left: #{$size} !important;
23 | padding-right: #{$size} !important;
24 | }
25 | /* vertical paddings */
26 | .#{$prefix}p#{$delimiter1}#{$v}#{if($name != '', $delimiter2 + $name, '')} {
27 | padding-top: #{$size} !important;
28 | padding-bottom: #{$size} !important;
29 | }
30 | /* all paddings */
31 | .#{$prefix}p#{$delimiter1}#{$a}#{if($name != '', $delimiter2 + $name, '')} {
32 | padding: #{$size} !important;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/source/_settings.bootstrap.scss:
--------------------------------------------------------------------------------
1 | // optional prefix to prevent naming collisions
2 | $prefix: '';
3 |
4 | /*
5 | Bootstrap 4 alpha currently uses 1rem as the base size for sizes.
6 | @see https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
7 | If you want to start using this sizes today, use our version
8 | */
9 | $spacer: 1rem !default;
10 |
11 | // sizes
12 | $xxxs: $spacer * 0.2; // no official bootstrap size
13 | $xxs: $spacer * 0.25; // no official bootstrap size
14 | $xs: $spacer * 0.5;
15 | $s: $spacer * 1.0;
16 | $m: $spacer * 1.5;
17 | $l: $spacer * 3.0;
18 | $xl: $spacer * 4.5;
19 | $xxl: $spacer * 6.0; // no official bootstrap size
20 | $xxxl: $spacer * 8.0; // no official bootstrap size
21 |
22 | // naming delimiters
23 | $delimiter1: '-';
24 | $delimiter2: '-';
25 |
26 | // other naming
27 | $a: 'a'; // all values (top, right, bottom, left);
28 | $h: 'x'; // horizontal values (left, right)
29 | $v: 'y'; // vertical values (top, bottom)
30 | $auto: 'auto';
31 | $null: '0';
32 | $neg: '-neg';
33 |
34 | $sizes: (
35 | auto: auto, // no official bootstrap size
36 | "0" : 0,
37 | xxxs: $xxxs,
38 | xxs : $xxs, // no official bootstrap size
39 | xs : $xs,
40 | '' : $s,
41 | md : $m,
42 | lg : $l,
43 | xl : $xl,
44 | xxl : $xxl, // no official bootstrap size
45 | xxxl: $xxxl // no official bootstrap size
46 | );
47 |
--------------------------------------------------------------------------------
/source/_settings.scss:
--------------------------------------------------------------------------------
1 | // optional prefix to prevent naming collisions
2 | $prefix: '';
3 |
4 | // sizes
5 | $xxxs: 4px;
6 | $xxs: 8px;
7 | $xs: 16px;
8 | $s: 24px;
9 | $m: 36px;
10 | $l: $s * 2;
11 | $xl: $s * 2.5;
12 | $xxl: $s * 4;
13 | $xxxl: $s * 6;
14 |
15 | // naming delimiters
16 | $delimiter1: '';
17 | $delimiter2: '-';
18 |
19 | // other naming
20 | $a: ''; // all values (top, right, bottom, left);
21 | $h: 'h'; // horizontal values (left, right)
22 | $v: 'v'; // vertical values (top, bottom)
23 | $auto: 'a';
24 | $null: '0';
25 | $neg: '-';
26 |
27 | $sizes: (
28 | $auto: auto,
29 | $null: 0,
30 | xxxs : $xxxs,
31 | xxs : $xxs,
32 | xs : $xs,
33 | s : $s,
34 | m : $m,
35 | l : $l,
36 | xl : $xl,
37 | xxl : $xxl,
38 | xxxl : $xxxl
39 | );
40 |
41 | $widths: (
42 | a : auto,
43 | 0 : 0,
44 | 5 : 5%,
45 | 10 : 10%,
46 | 25 : 25%,
47 | 33 : (100% / 3),
48 | 50 : 50%,
49 | 66 : (100% / 3 * 2),
50 | 100: 100%
51 | );
52 |
--------------------------------------------------------------------------------
/source/_widths.scss:
--------------------------------------------------------------------------------
1 | /* widths */
2 | @each $name, $size in $widths {
3 | .w#{$name} {
4 | width: $size !important;
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/source/spaces.bootstrap.scss:
--------------------------------------------------------------------------------
1 | /*
2 | CSS Spaces now supports bootstrap 4 syntax with additional classes eg. for negative margins.
3 | */
4 | @import "settings";
5 | @import "settings.bootstrap"; // override vars
6 | @import "margins";
7 | @import "paddings";
8 | @import "widths";
9 |
--------------------------------------------------------------------------------
/source/spaces.scss:
--------------------------------------------------------------------------------
1 | @import "settings";
2 | @import "margins";
3 | @import "paddings";
4 | @import "widths";
5 |
--------------------------------------------------------------------------------