@new-ui/spacings 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/ci.yml +19 -0
- package/README.md +48 -0
- package/dist/index.css +2 -0
- package/dist/index.css.map +1 -0
- package/package.json +38 -0
- package/src/_components.scss +20 -0
- package/src/_utilities.scss +253 -0
- package/src/_variables.scss +20 -0
- package/src/index.scss +3 -0
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
name: Publish npm package
|
|
2
|
+
on:
|
|
3
|
+
push:
|
|
4
|
+
branches:
|
|
5
|
+
- main
|
|
6
|
+
|
|
7
|
+
jobs:
|
|
8
|
+
publish:
|
|
9
|
+
runs-on: ubuntu-latest
|
|
10
|
+
steps:
|
|
11
|
+
- uses: actions/checkout@v3
|
|
12
|
+
- uses: actions/setup-node@v3
|
|
13
|
+
with:
|
|
14
|
+
node-version: 18.11.0
|
|
15
|
+
- run: npm install
|
|
16
|
+
- uses: JS-DevTools/npm-publish@v1
|
|
17
|
+
with:
|
|
18
|
+
token: ${{ secrets.NPM_TOKEN }}
|
|
19
|
+
access: public
|
package/README.md
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
# New UI Spacing Blocks
|
|
2
|
+
|
|
3
|
+
## Install
|
|
4
|
+
Install New UI Spacings from your terminal via npm.
|
|
5
|
+
|
|
6
|
+
```
|
|
7
|
+
npm i @new-ui/spacings
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
To get started quickly, you can use the CDN files.
|
|
11
|
+
|
|
12
|
+
```html
|
|
13
|
+
<!-- Place this at the html head -->
|
|
14
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/spacings@<version>/dist/index.css">
|
|
15
|
+
...
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Usage
|
|
19
|
+
|
|
20
|
+
```scss
|
|
21
|
+
// Place this at the top of your SCSS/CSS file
|
|
22
|
+
@import '@new-ui/spacings';
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Build
|
|
26
|
+
|
|
27
|
+
To build css
|
|
28
|
+
|
|
29
|
+
```
|
|
30
|
+
npm install
|
|
31
|
+
npm run build
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Recommended Defaults
|
|
35
|
+
Refer to the Figma file for the spacings tokens cheatsheet.
|
|
36
|
+
|
|
37
|
+
[Get a Figma copy]()
|
|
38
|
+
|
|
39
|
+
## Usage Guide
|
|
40
|
+
|
|
41
|
+
- Tokens defined in the figma file matches variables declared in CSS
|
|
42
|
+
- All classes associated with the design system are prefixed with a global namespace followed by a hyphen: `nu-`
|
|
43
|
+
- In addition to a global namespace, we added prefixes to each class to make it more apparent what job that class is doing using BEM syntax
|
|
44
|
+
* `c-` for UI components, such as `.nu-c-h1` or `.nu-c-card`
|
|
45
|
+
* `l-` for layout-related styles, such as `.nu-l-grid__item` or `.nu-l--two-column`
|
|
46
|
+
* `u-` for utilities, such as `.nu-u-mb-<spacing-token>` or `.nu-u-margin-bottom-pt2`
|
|
47
|
+
* `is-` and has- for specific states, such as `.nu-is-active` or `.nu-is-disabled`. These state-based classes - would apply to
|
|
48
|
+
* `js-` for targeting JavaScript-specific functionality, such as `.js-modal-trigger`. No styles are bound to these classes; they’re reserved for behavior only. For most cases, these `js-` classes would toggle - state-based classes to an element.
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
:root{--spacing-01:2px;--spacing-02:4px;--spacing-03:6px;--spacing-04:8px;--spacing-05:12px;--spacing-06:16px;--spacing-07:20px;--spacing-08:24px;--spacing-09:32px;--spacing-10:40px;--spacing-11:48px;--spacing-12:56px;--spacing-13:64px;--spacing-14:72px;--spacing-15:80px;--spacing-16:96px;--spacing-17:120px;--spacing-18:160px}.nu-u-mx-auto{margin-inline:auto}.nu-u-me-auto{margin-right:auto}.nu-u-ms-auto{margin-left:auto}.nu-u-mt-1{margin-top:var(--spacing-01)}.nu-u-mt-2{margin-top:var(--spacing-02)}.nu-u-mt-3{margin-top:var(--spacing-03)}.nu-u-mt-4{margin-top:var(--spacing-04)}.nu-u-mt-5{margin-top:var(--spacing-05)}.nu-u-mt-6{margin-top:var(--spacing-06)}.nu-u-mt-7{margin-top:var(--spacing-07)}.nu-u-mt-8{margin-top:var(--spacing-08)}.nu-u-mt-9{margin-top:var(--spacing-09)}.nu-u-mt-10{margin-top:var(--spacing-10)}.nu-u-mt-11{margin-top:var(--spacing-11)}.nu-u-mt-12{margin-top:var(--spacing-12)}.nu-u-mt-13{margin-top:var(--spacing-13)}.nu-u-mt-14{margin-top:var(--spacing-14)}.nu-u-mt-15{margin-top:var(--spacing-15)}.nu-u-mt-16{margin-top:var(--spacing-16)}.nu-u-mt-17{margin-top:var(--spacing-17)}.nu-u-mt-18{margin-top:var(--spacing-18)}.nu-u-me-1{margin-right:var(--spacing-01)}.nu-u-me-2{margin-right:var(--spacing-02)}.nu-u-me-3{margin-right:var(--spacing-03)}.nu-u-me-4{margin-right:var(--spacing-04)}.nu-u-me-5{margin-right:var(--spacing-05)}.nu-u-me-6{margin-right:var(--spacing-06)}.nu-u-me-7{margin-right:var(--spacing-07)}.nu-u-me-8{margin-right:var(--spacing-08)}.nu-u-me-9{margin-right:var(--spacing-09)}.nu-u-me-10{margin-right:var(--spacing-10)}.nu-u-me-11{margin-right:var(--spacing-11)}.nu-u-me-12{margin-right:var(--spacing-12)}.nu-u-me-13{margin-right:var(--spacing-13)}.nu-u-me-14{margin-right:var(--spacing-14)}.nu-u-me-15{margin-right:var(--spacing-15)}.nu-u-me-16{margin-right:var(--spacing-16)}.nu-u-me-17{margin-right:var(--spacing-17)}.nu-u-me-18{margin-right:var(--spacing-18)}.nu-u-mb-1{margin-bottom:var(--spacing-01)}.nu-u-mb-2{margin-bottom:var(--spacing-02)}.nu-u-mb-3{margin-bottom:var(--spacing-03)}.nu-u-mb-4{margin-bottom:var(--spacing-04)}.nu-u-mb-5{margin-bottom:var(--spacing-05)}.nu-u-mb-6{margin-bottom:var(--spacing-06)}.nu-u-mb-7{margin-bottom:var(--spacing-07)}.nu-u-mb-8{margin-bottom:var(--spacing-08)}.nu-u-mb-9{margin-bottom:var(--spacing-09)}.nu-u-mb-10{margin-bottom:var(--spacing-10)}.nu-u-mb-11{margin-bottom:var(--spacing-11)}.nu-u-mb-12{margin-bottom:var(--spacing-12)}.nu-u-mb-13{margin-bottom:var(--spacing-13)}.nu-u-mb-14{margin-bottom:var(--spacing-14)}.nu-u-mb-15{margin-bottom:var(--spacing-15)}.nu-u-mb-16{margin-bottom:var(--spacing-16)}.nu-u-mb-17{margin-bottom:var(--spacing-17)}.nu-u-mb-18{margin-bottom:var(--spacing-18)}.nu-u-ms-1{margin-left:var(--spacing-01)}.nu-u-ms-2{margin-left:var(--spacing-02)}.nu-u-ms-3{margin-left:var(--spacing-03)}.nu-u-ms-4{margin-left:var(--spacing-04)}.nu-u-ms-5{margin-left:var(--spacing-05)}.nu-u-ms-6{margin-left:var(--spacing-06)}.nu-u-ms-7{margin-left:var(--spacing-07)}.nu-u-ms-8{margin-left:var(--spacing-08)}.nu-u-ms-9{margin-left:var(--spacing-09)}.nu-u-ms-10{margin-left:var(--spacing-10)}.nu-u-ms-11{margin-left:var(--spacing-11)}.nu-u-ms-12{margin-left:var(--spacing-12)}.nu-u-ms-13{margin-left:var(--spacing-13)}.nu-u-ms-14{margin-left:var(--spacing-14)}.nu-u-ms-15{margin-left:var(--spacing-15)}.nu-u-ms-16{margin-left:var(--spacing-16)}.nu-u-ms-17{margin-left:var(--spacing-17)}.nu-u-ms-18{margin-left:var(--spacing-18)}.nu-u-mx-1{margin-inline:var(--spacing-01)}.nu-u-mx-2{margin-inline:var(--spacing-02)}.nu-u-mx-3{margin-inline:var(--spacing-03)}.nu-u-mx-4{margin-inline:var(--spacing-04)}.nu-u-mx-5{margin-inline:var(--spacing-05)}.nu-u-mx-6{margin-inline:var(--spacing-06)}.nu-u-mx-7{margin-inline:var(--spacing-07)}.nu-u-mx-8{margin-inline:var(--spacing-08)}.nu-u-mx-9{margin-inline:var(--spacing-09)}.nu-u-mx-10{margin-inline:var(--spacing-10)}.nu-u-mx-11{margin-inline:var(--spacing-11)}.nu-u-mx-12{margin-inline:var(--spacing-12)}.nu-u-mx-13{margin-inline:var(--spacing-13)}.nu-u-mx-14{margin-inline:var(--spacing-14)}.nu-u-mx-15{margin-inline:var(--spacing-15)}.nu-u-mx-16{margin-inline:var(--spacing-16)}.nu-u-mx-17{margin-inline:var(--spacing-17)}.nu-u-mx-18{margin-inline:var(--spacing-18)}.nu-u-my-1{margin-block:var(--spacing-01)}.nu-u-my-2{margin-block:var(--spacing-02)}.nu-u-my-3{margin-block:var(--spacing-03)}.nu-u-my-4{margin-block:var(--spacing-04)}.nu-u-my-5{margin-block:var(--spacing-05)}.nu-u-my-6{margin-block:var(--spacing-06)}.nu-u-my-7{margin-block:var(--spacing-07)}.nu-u-my-8{margin-block:var(--spacing-08)}.nu-u-my-9{margin-block:var(--spacing-09)}.nu-u-my-10{margin-block:var(--spacing-10)}.nu-u-my-11{margin-block:var(--spacing-11)}.nu-u-my-12{margin-block:var(--spacing-12)}.nu-u-my-13{margin-block:var(--spacing-13)}.nu-u-my-14{margin-block:var(--spacing-14)}.nu-u-my-15{margin-block:var(--spacing-15)}.nu-u-my-16{margin-block:var(--spacing-16)}.nu-u-my-17{margin-block:var(--spacing-17)}.nu-u-my-18{margin-block:var(--spacing-18)}.nu-u-p-1{padding:var(--spacing-01)}.nu-u-p-2{padding:var(--spacing-02)}.nu-u-p-3{padding:var(--spacing-03)}.nu-u-p-4{padding:var(--spacing-04)}.nu-u-p-5{padding:var(--spacing-05)}.nu-u-p-6{padding:var(--spacing-06)}.nu-u-p-7{padding:var(--spacing-07)}.nu-u-p-8{padding:var(--spacing-08)}.nu-u-p-9{padding:var(--spacing-09)}.nu-u-p-10{padding:var(--spacing-10)}.nu-u-p-11{padding:var(--spacing-11)}.nu-u-p-12{padding:var(--spacing-12)}.nu-u-p-13{padding:var(--spacing-13)}.nu-u-p-14{padding:var(--spacing-14)}.nu-u-p-15{padding:var(--spacing-15)}.nu-u-p-16{padding:var(--spacing-16)}.nu-u-p-17{padding:var(--spacing-17)}.nu-u-p-18{padding:var(--spacing-18)}.nu-u-pt-1{padding-top:var(--spacing-01)}.nu-u-pt-2{padding-top:var(--spacing-02)}.nu-u-pt-3{padding-top:var(--spacing-03)}.nu-u-pt-4{padding-top:var(--spacing-04)}.nu-u-pt-5{padding-top:var(--spacing-05)}.nu-u-pt-6{padding-top:var(--spacing-06)}.nu-u-pt-7{padding-top:var(--spacing-07)}.nu-u-pt-8{padding-top:var(--spacing-08)}.nu-u-pt-9{padding-top:var(--spacing-09)}.nu-u-pt-10{padding-top:var(--spacing-10)}.nu-u-pt-11{padding-top:var(--spacing-11)}.nu-u-pt-12{padding-top:var(--spacing-12)}.nu-u-pt-13{padding-top:var(--spacing-13)}.nu-u-pt-14{padding-top:var(--spacing-14)}.nu-u-pt-15{padding-top:var(--spacing-15)}.nu-u-pt-16{padding-top:var(--spacing-16)}.nu-u-pt-17{padding-top:var(--spacing-17)}.nu-u-pt-18{padding-top:var(--spacing-18)}.nu-u-pe-1{padding-right:var(--spacing-01)}.nu-u-pe-2{padding-right:var(--spacing-02)}.nu-u-pe-3{padding-right:var(--spacing-03)}.nu-u-pe-4{padding-right:var(--spacing-04)}.nu-u-pe-5{padding-right:var(--spacing-05)}.nu-u-pe-6{padding-right:var(--spacing-06)}.nu-u-pe-7{padding-right:var(--spacing-07)}.nu-u-pe-8{padding-right:var(--spacing-08)}.nu-u-pe-9{padding-right:var(--spacing-09)}.nu-u-pe-10{padding-right:var(--spacing-10)}.nu-u-pe-11{padding-right:var(--spacing-11)}.nu-u-pe-12{padding-right:var(--spacing-12)}.nu-u-pe-13{padding-right:var(--spacing-13)}.nu-u-pe-14{padding-right:var(--spacing-14)}.nu-u-pe-15{padding-right:var(--spacing-15)}.nu-u-pe-16{padding-right:var(--spacing-16)}.nu-u-pe-17{padding-right:var(--spacing-17)}.nu-u-pe-18{padding-right:var(--spacing-18)}.nu-u-pb-1{padding-bottom:var(--spacing-01)}.nu-u-pb-2{padding-bottom:var(--spacing-02)}.nu-u-pb-3{padding-bottom:var(--spacing-03)}.nu-u-pb-4{padding-bottom:var(--spacing-04)}.nu-u-pb-5{padding-bottom:var(--spacing-05)}.nu-u-pb-6{padding-bottom:var(--spacing-06)}.nu-u-pb-7{padding-bottom:var(--spacing-07)}.nu-u-pb-8{padding-bottom:var(--spacing-08)}.nu-u-pb-9{padding-bottom:var(--spacing-09)}.nu-u-pb-10{padding-bottom:var(--spacing-10)}.nu-u-pb-11{padding-bottom:var(--spacing-11)}.nu-u-pb-12{padding-bottom:var(--spacing-12)}.nu-u-pb-13{padding-bottom:var(--spacing-13)}.nu-u-pb-14{padding-bottom:var(--spacing-14)}.nu-u-pb-15{padding-bottom:var(--spacing-15)}.nu-u-pb-16{padding-bottom:var(--spacing-16)}.nu-u-pb-17{padding-bottom:var(--spacing-17)}.nu-u-pb-18{padding-bottom:var(--spacing-18)}.nu-u-ps-1{padding-left:var(--spacing-01)}.nu-u-ps-2{padding-left:var(--spacing-02)}.nu-u-ps-3{padding-left:var(--spacing-03)}.nu-u-ps-4{padding-left:var(--spacing-04)}.nu-u-ps-5{padding-left:var(--spacing-05)}.nu-u-ps-6{padding-left:var(--spacing-06)}.nu-u-ps-7{padding-left:var(--spacing-07)}.nu-u-ps-8{padding-left:var(--spacing-08)}.nu-u-ps-9{padding-left:var(--spacing-09)}.nu-u-ps-10{padding-left:var(--spacing-10)}.nu-u-ps-11{padding-left:var(--spacing-11)}.nu-u-ps-12{padding-left:var(--spacing-12)}.nu-u-ps-13{padding-left:var(--spacing-13)}.nu-u-ps-14{padding-left:var(--spacing-14)}.nu-u-ps-15{padding-left:var(--spacing-15)}.nu-u-ps-16{padding-left:var(--spacing-16)}.nu-u-ps-17{padding-left:var(--spacing-17)}.nu-u-ps-18{padding-left:var(--spacing-18)}.nu-u-px-1{padding-inline:var(--spacing-01)}.nu-u-px-2{padding-inline:var(--spacing-02)}.nu-u-px-3{padding-inline:var(--spacing-03)}.nu-u-px-4{padding-inline:var(--spacing-04)}.nu-u-px-5{padding-inline:var(--spacing-05)}.nu-u-px-6{padding-inline:var(--spacing-06)}.nu-u-px-7{padding-inline:var(--spacing-07)}.nu-u-px-8{padding-inline:var(--spacing-08)}.nu-u-px-9{padding-inline:var(--spacing-09)}.nu-u-px-10{padding-inline:var(--spacing-10)}.nu-u-px-11{padding-inline:var(--spacing-11)}.nu-u-px-12{padding-inline:var(--spacing-12)}.nu-u-px-13{padding-inline:var(--spacing-13)}.nu-u-px-14{padding-inline:var(--spacing-14)}.nu-u-px-15{padding-inline:var(--spacing-15)}.nu-u-px-16{padding-inline:var(--spacing-16)}.nu-u-px-17{padding-inline:var(--spacing-17)}.nu-u-px-18{padding-inline:var(--spacing-18)}.nu-u-py-1{padding-block:var(--spacing-01)}.nu-u-py-2{padding-block:var(--spacing-02)}.nu-u-py-3{padding-block:var(--spacing-03)}.nu-u-py-4{padding-block:var(--spacing-04)}.nu-u-py-5{padding-block:var(--spacing-05)}.nu-u-py-6{padding-block:var(--spacing-06)}.nu-u-py-7{padding-block:var(--spacing-07)}.nu-u-py-8{padding-block:var(--spacing-08)}.nu-u-py-9{padding-block:var(--spacing-09)}.nu-u-py-10{padding-block:var(--spacing-10)}.nu-u-py-11{padding-block:var(--spacing-11)}.nu-u-py-12{padding-block:var(--spacing-12)}.nu-u-py-13{padding-block:var(--spacing-13)}.nu-u-py-14{padding-block:var(--spacing-14)}.nu-u-py-15{padding-block:var(--spacing-15)}.nu-u-py-16{padding-block:var(--spacing-16)}.nu-u-py-17{padding-block:var(--spacing-17)}.nu-u-py-18{padding-block:var(--spacing-18)}.nu-c-spacer-1{height:var(--spacing-01);display:block}.nu-c-spacer-2{height:var(--spacing-02);display:block}.nu-c-spacer-3{height:var(--spacing-03);display:block}.nu-c-spacer-4{height:var(--spacing-04);display:block}.nu-c-spacer-5{height:var(--spacing-05);display:block}.nu-c-spacer-6{height:var(--spacing-06);display:block}.nu-c-spacer-7{height:var(--spacing-07);display:block}.nu-c-spacer-8{height:var(--spacing-08);display:block}.nu-c-spacer-9{height:var(--spacing-09);display:block}.nu-c-spacer-10{height:var(--spacing-10);display:block}.nu-c-spacer-11{height:var(--spacing-11);display:block}.nu-c-spacer-12{height:var(--spacing-12);display:block}.nu-c-spacer-13{height:var(--spacing-13);display:block}.nu-c-spacer-14{height:var(--spacing-14);display:block}.nu-c-spacer-15{height:var(--spacing-15);display:block}.nu-c-spacer-16{height:var(--spacing-16);display:block}.nu-c-spacer-17{height:var(--spacing-17);display:block}.nu-c-spacer-18{height:var(--spacing-18);display:block}
|
|
2
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":"AEAA,wUCCA,iCACA,gCACA,+BAEA,wCACA,wCACA,wCACA,wCACA,wCACA,wCACA,wCACA,wCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCAEA,0CACA,0CACA,0CACA,0CACA,0CACA,0CACA,0CACA,0CACA,0CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CAEA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CAEA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,0CACA,0CACA,0CACA,0CACA,0CACA,0CACA,0CACA,0CACA,0CAEA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CAEA,0CACA,0CACA,0CACA,0CACA,0CACA,0CACA,0CACA,0CACA,0CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CAIA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCAEA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,0CACA,0CACA,0CACA,0CACA,0CACA,0CACA,0CACA,0CACA,0CAEA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CAEA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,6CACA,6CACA,6CACA,6CACA,6CACA,6CACA,6CACA,6CACA,6CAEA,0CACA,0CACA,0CACA,0CACA,0CACA,0CACA,0CACA,0CACA,0CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CAEA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,6CACA,6CACA,6CACA,6CACA,6CACA,6CACA,6CACA,6CACA,6CAEA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CACA,4CC1PA,sDACA,sDACA,sDACA,sDACA,sDACA,sDACA,sDACA,sDACA,sDACA,uDACA,uDACA,uDACA,uDACA,uDACA,uDACA,uDACA,uDACA","sources":["index.css","src/index.scss","src/_variables.scss","src/_utilities.scss","src/_components.scss"],"sourcesContent":[":root {\n --spacing-01: 2px;\n --spacing-02: 4px;\n --spacing-03: 6px;\n --spacing-04: 8px;\n --spacing-05: 12px;\n --spacing-06: 16px;\n --spacing-07: 20px;\n --spacing-08: 24px;\n --spacing-09: 32px;\n --spacing-10: 40px;\n --spacing-11: 48px;\n --spacing-12: 56px;\n --spacing-13: 64px;\n --spacing-14: 72px;\n --spacing-15: 80px;\n --spacing-16: 96px;\n --spacing-17: 120px;\n --spacing-18: 160px;\n}\n\n.nu-u-mx-auto {\n margin-inline: auto;\n}\n\n.nu-u-me-auto {\n margin-right: auto;\n}\n\n.nu-u-ms-auto {\n margin-left: auto;\n}\n\n.nu-u-mt-1 {\n margin-top: var(--spacing-01);\n}\n\n.nu-u-mt-2 {\n margin-top: var(--spacing-02);\n}\n\n.nu-u-mt-3 {\n margin-top: var(--spacing-03);\n}\n\n.nu-u-mt-4 {\n margin-top: var(--spacing-04);\n}\n\n.nu-u-mt-5 {\n margin-top: var(--spacing-05);\n}\n\n.nu-u-mt-6 {\n margin-top: var(--spacing-06);\n}\n\n.nu-u-mt-7 {\n margin-top: var(--spacing-07);\n}\n\n.nu-u-mt-8 {\n margin-top: var(--spacing-08);\n}\n\n.nu-u-mt-9 {\n margin-top: var(--spacing-09);\n}\n\n.nu-u-mt-10 {\n margin-top: var(--spacing-10);\n}\n\n.nu-u-mt-11 {\n margin-top: var(--spacing-11);\n}\n\n.nu-u-mt-12 {\n margin-top: var(--spacing-12);\n}\n\n.nu-u-mt-13 {\n margin-top: var(--spacing-13);\n}\n\n.nu-u-mt-14 {\n margin-top: var(--spacing-14);\n}\n\n.nu-u-mt-15 {\n margin-top: var(--spacing-15);\n}\n\n.nu-u-mt-16 {\n margin-top: var(--spacing-16);\n}\n\n.nu-u-mt-17 {\n margin-top: var(--spacing-17);\n}\n\n.nu-u-mt-18 {\n margin-top: var(--spacing-18);\n}\n\n.nu-u-me-1 {\n margin-right: var(--spacing-01);\n}\n\n.nu-u-me-2 {\n margin-right: var(--spacing-02);\n}\n\n.nu-u-me-3 {\n margin-right: var(--spacing-03);\n}\n\n.nu-u-me-4 {\n margin-right: var(--spacing-04);\n}\n\n.nu-u-me-5 {\n margin-right: var(--spacing-05);\n}\n\n.nu-u-me-6 {\n margin-right: var(--spacing-06);\n}\n\n.nu-u-me-7 {\n margin-right: var(--spacing-07);\n}\n\n.nu-u-me-8 {\n margin-right: var(--spacing-08);\n}\n\n.nu-u-me-9 {\n margin-right: var(--spacing-09);\n}\n\n.nu-u-me-10 {\n margin-right: var(--spacing-10);\n}\n\n.nu-u-me-11 {\n margin-right: var(--spacing-11);\n}\n\n.nu-u-me-12 {\n margin-right: var(--spacing-12);\n}\n\n.nu-u-me-13 {\n margin-right: var(--spacing-13);\n}\n\n.nu-u-me-14 {\n margin-right: var(--spacing-14);\n}\n\n.nu-u-me-15 {\n margin-right: var(--spacing-15);\n}\n\n.nu-u-me-16 {\n margin-right: var(--spacing-16);\n}\n\n.nu-u-me-17 {\n margin-right: var(--spacing-17);\n}\n\n.nu-u-me-18 {\n margin-right: var(--spacing-18);\n}\n\n.nu-u-mb-1 {\n margin-bottom: var(--spacing-01);\n}\n\n.nu-u-mb-2 {\n margin-bottom: var(--spacing-02);\n}\n\n.nu-u-mb-3 {\n margin-bottom: var(--spacing-03);\n}\n\n.nu-u-mb-4 {\n margin-bottom: var(--spacing-04);\n}\n\n.nu-u-mb-5 {\n margin-bottom: var(--spacing-05);\n}\n\n.nu-u-mb-6 {\n margin-bottom: var(--spacing-06);\n}\n\n.nu-u-mb-7 {\n margin-bottom: var(--spacing-07);\n}\n\n.nu-u-mb-8 {\n margin-bottom: var(--spacing-08);\n}\n\n.nu-u-mb-9 {\n margin-bottom: var(--spacing-09);\n}\n\n.nu-u-mb-10 {\n margin-bottom: var(--spacing-10);\n}\n\n.nu-u-mb-11 {\n margin-bottom: var(--spacing-11);\n}\n\n.nu-u-mb-12 {\n margin-bottom: var(--spacing-12);\n}\n\n.nu-u-mb-13 {\n margin-bottom: var(--spacing-13);\n}\n\n.nu-u-mb-14 {\n margin-bottom: var(--spacing-14);\n}\n\n.nu-u-mb-15 {\n margin-bottom: var(--spacing-15);\n}\n\n.nu-u-mb-16 {\n margin-bottom: var(--spacing-16);\n}\n\n.nu-u-mb-17 {\n margin-bottom: var(--spacing-17);\n}\n\n.nu-u-mb-18 {\n margin-bottom: var(--spacing-18);\n}\n\n.nu-u-ms-1 {\n margin-left: var(--spacing-01);\n}\n\n.nu-u-ms-2 {\n margin-left: var(--spacing-02);\n}\n\n.nu-u-ms-3 {\n margin-left: var(--spacing-03);\n}\n\n.nu-u-ms-4 {\n margin-left: var(--spacing-04);\n}\n\n.nu-u-ms-5 {\n margin-left: var(--spacing-05);\n}\n\n.nu-u-ms-6 {\n margin-left: var(--spacing-06);\n}\n\n.nu-u-ms-7 {\n margin-left: var(--spacing-07);\n}\n\n.nu-u-ms-8 {\n margin-left: var(--spacing-08);\n}\n\n.nu-u-ms-9 {\n margin-left: var(--spacing-09);\n}\n\n.nu-u-ms-10 {\n margin-left: var(--spacing-10);\n}\n\n.nu-u-ms-11 {\n margin-left: var(--spacing-11);\n}\n\n.nu-u-ms-12 {\n margin-left: var(--spacing-12);\n}\n\n.nu-u-ms-13 {\n margin-left: var(--spacing-13);\n}\n\n.nu-u-ms-14 {\n margin-left: var(--spacing-14);\n}\n\n.nu-u-ms-15 {\n margin-left: var(--spacing-15);\n}\n\n.nu-u-ms-16 {\n margin-left: var(--spacing-16);\n}\n\n.nu-u-ms-17 {\n margin-left: var(--spacing-17);\n}\n\n.nu-u-ms-18 {\n margin-left: var(--spacing-18);\n}\n\n.nu-u-mx-1 {\n margin-inline: var(--spacing-01);\n}\n\n.nu-u-mx-2 {\n margin-inline: var(--spacing-02);\n}\n\n.nu-u-mx-3 {\n margin-inline: var(--spacing-03);\n}\n\n.nu-u-mx-4 {\n margin-inline: var(--spacing-04);\n}\n\n.nu-u-mx-5 {\n margin-inline: var(--spacing-05);\n}\n\n.nu-u-mx-6 {\n margin-inline: var(--spacing-06);\n}\n\n.nu-u-mx-7 {\n margin-inline: var(--spacing-07);\n}\n\n.nu-u-mx-8 {\n margin-inline: var(--spacing-08);\n}\n\n.nu-u-mx-9 {\n margin-inline: var(--spacing-09);\n}\n\n.nu-u-mx-10 {\n margin-inline: var(--spacing-10);\n}\n\n.nu-u-mx-11 {\n margin-inline: var(--spacing-11);\n}\n\n.nu-u-mx-12 {\n margin-inline: var(--spacing-12);\n}\n\n.nu-u-mx-13 {\n margin-inline: var(--spacing-13);\n}\n\n.nu-u-mx-14 {\n margin-inline: var(--spacing-14);\n}\n\n.nu-u-mx-15 {\n margin-inline: var(--spacing-15);\n}\n\n.nu-u-mx-16 {\n margin-inline: var(--spacing-16);\n}\n\n.nu-u-mx-17 {\n margin-inline: var(--spacing-17);\n}\n\n.nu-u-mx-18 {\n margin-inline: var(--spacing-18);\n}\n\n.nu-u-my-1 {\n margin-block: var(--spacing-01);\n}\n\n.nu-u-my-2 {\n margin-block: var(--spacing-02);\n}\n\n.nu-u-my-3 {\n margin-block: var(--spacing-03);\n}\n\n.nu-u-my-4 {\n margin-block: var(--spacing-04);\n}\n\n.nu-u-my-5 {\n margin-block: var(--spacing-05);\n}\n\n.nu-u-my-6 {\n margin-block: var(--spacing-06);\n}\n\n.nu-u-my-7 {\n margin-block: var(--spacing-07);\n}\n\n.nu-u-my-8 {\n margin-block: var(--spacing-08);\n}\n\n.nu-u-my-9 {\n margin-block: var(--spacing-09);\n}\n\n.nu-u-my-10 {\n margin-block: var(--spacing-10);\n}\n\n.nu-u-my-11 {\n margin-block: var(--spacing-11);\n}\n\n.nu-u-my-12 {\n margin-block: var(--spacing-12);\n}\n\n.nu-u-my-13 {\n margin-block: var(--spacing-13);\n}\n\n.nu-u-my-14 {\n margin-block: var(--spacing-14);\n}\n\n.nu-u-my-15 {\n margin-block: var(--spacing-15);\n}\n\n.nu-u-my-16 {\n margin-block: var(--spacing-16);\n}\n\n.nu-u-my-17 {\n margin-block: var(--spacing-17);\n}\n\n.nu-u-my-18 {\n margin-block: var(--spacing-18);\n}\n\n.nu-u-p-1 {\n padding: var(--spacing-01);\n}\n\n.nu-u-p-2 {\n padding: var(--spacing-02);\n}\n\n.nu-u-p-3 {\n padding: var(--spacing-03);\n}\n\n.nu-u-p-4 {\n padding: var(--spacing-04);\n}\n\n.nu-u-p-5 {\n padding: var(--spacing-05);\n}\n\n.nu-u-p-6 {\n padding: var(--spacing-06);\n}\n\n.nu-u-p-7 {\n padding: var(--spacing-07);\n}\n\n.nu-u-p-8 {\n padding: var(--spacing-08);\n}\n\n.nu-u-p-9 {\n padding: var(--spacing-09);\n}\n\n.nu-u-p-10 {\n padding: var(--spacing-10);\n}\n\n.nu-u-p-11 {\n padding: var(--spacing-11);\n}\n\n.nu-u-p-12 {\n padding: var(--spacing-12);\n}\n\n.nu-u-p-13 {\n padding: var(--spacing-13);\n}\n\n.nu-u-p-14 {\n padding: var(--spacing-14);\n}\n\n.nu-u-p-15 {\n padding: var(--spacing-15);\n}\n\n.nu-u-p-16 {\n padding: var(--spacing-16);\n}\n\n.nu-u-p-17 {\n padding: var(--spacing-17);\n}\n\n.nu-u-p-18 {\n padding: var(--spacing-18);\n}\n\n.nu-u-pt-1 {\n padding-top: var(--spacing-01);\n}\n\n.nu-u-pt-2 {\n padding-top: var(--spacing-02);\n}\n\n.nu-u-pt-3 {\n padding-top: var(--spacing-03);\n}\n\n.nu-u-pt-4 {\n padding-top: var(--spacing-04);\n}\n\n.nu-u-pt-5 {\n padding-top: var(--spacing-05);\n}\n\n.nu-u-pt-6 {\n padding-top: var(--spacing-06);\n}\n\n.nu-u-pt-7 {\n padding-top: var(--spacing-07);\n}\n\n.nu-u-pt-8 {\n padding-top: var(--spacing-08);\n}\n\n.nu-u-pt-9 {\n padding-top: var(--spacing-09);\n}\n\n.nu-u-pt-10 {\n padding-top: var(--spacing-10);\n}\n\n.nu-u-pt-11 {\n padding-top: var(--spacing-11);\n}\n\n.nu-u-pt-12 {\n padding-top: var(--spacing-12);\n}\n\n.nu-u-pt-13 {\n padding-top: var(--spacing-13);\n}\n\n.nu-u-pt-14 {\n padding-top: var(--spacing-14);\n}\n\n.nu-u-pt-15 {\n padding-top: var(--spacing-15);\n}\n\n.nu-u-pt-16 {\n padding-top: var(--spacing-16);\n}\n\n.nu-u-pt-17 {\n padding-top: var(--spacing-17);\n}\n\n.nu-u-pt-18 {\n padding-top: var(--spacing-18);\n}\n\n.nu-u-pe-1 {\n padding-right: var(--spacing-01);\n}\n\n.nu-u-pe-2 {\n padding-right: var(--spacing-02);\n}\n\n.nu-u-pe-3 {\n padding-right: var(--spacing-03);\n}\n\n.nu-u-pe-4 {\n padding-right: var(--spacing-04);\n}\n\n.nu-u-pe-5 {\n padding-right: var(--spacing-05);\n}\n\n.nu-u-pe-6 {\n padding-right: var(--spacing-06);\n}\n\n.nu-u-pe-7 {\n padding-right: var(--spacing-07);\n}\n\n.nu-u-pe-8 {\n padding-right: var(--spacing-08);\n}\n\n.nu-u-pe-9 {\n padding-right: var(--spacing-09);\n}\n\n.nu-u-pe-10 {\n padding-right: var(--spacing-10);\n}\n\n.nu-u-pe-11 {\n padding-right: var(--spacing-11);\n}\n\n.nu-u-pe-12 {\n padding-right: var(--spacing-12);\n}\n\n.nu-u-pe-13 {\n padding-right: var(--spacing-13);\n}\n\n.nu-u-pe-14 {\n padding-right: var(--spacing-14);\n}\n\n.nu-u-pe-15 {\n padding-right: var(--spacing-15);\n}\n\n.nu-u-pe-16 {\n padding-right: var(--spacing-16);\n}\n\n.nu-u-pe-17 {\n padding-right: var(--spacing-17);\n}\n\n.nu-u-pe-18 {\n padding-right: var(--spacing-18);\n}\n\n.nu-u-pb-1 {\n padding-bottom: var(--spacing-01);\n}\n\n.nu-u-pb-2 {\n padding-bottom: var(--spacing-02);\n}\n\n.nu-u-pb-3 {\n padding-bottom: var(--spacing-03);\n}\n\n.nu-u-pb-4 {\n padding-bottom: var(--spacing-04);\n}\n\n.nu-u-pb-5 {\n padding-bottom: var(--spacing-05);\n}\n\n.nu-u-pb-6 {\n padding-bottom: var(--spacing-06);\n}\n\n.nu-u-pb-7 {\n padding-bottom: var(--spacing-07);\n}\n\n.nu-u-pb-8 {\n padding-bottom: var(--spacing-08);\n}\n\n.nu-u-pb-9 {\n padding-bottom: var(--spacing-09);\n}\n\n.nu-u-pb-10 {\n padding-bottom: var(--spacing-10);\n}\n\n.nu-u-pb-11 {\n padding-bottom: var(--spacing-11);\n}\n\n.nu-u-pb-12 {\n padding-bottom: var(--spacing-12);\n}\n\n.nu-u-pb-13 {\n padding-bottom: var(--spacing-13);\n}\n\n.nu-u-pb-14 {\n padding-bottom: var(--spacing-14);\n}\n\n.nu-u-pb-15 {\n padding-bottom: var(--spacing-15);\n}\n\n.nu-u-pb-16 {\n padding-bottom: var(--spacing-16);\n}\n\n.nu-u-pb-17 {\n padding-bottom: var(--spacing-17);\n}\n\n.nu-u-pb-18 {\n padding-bottom: var(--spacing-18);\n}\n\n.nu-u-ps-1 {\n padding-left: var(--spacing-01);\n}\n\n.nu-u-ps-2 {\n padding-left: var(--spacing-02);\n}\n\n.nu-u-ps-3 {\n padding-left: var(--spacing-03);\n}\n\n.nu-u-ps-4 {\n padding-left: var(--spacing-04);\n}\n\n.nu-u-ps-5 {\n padding-left: var(--spacing-05);\n}\n\n.nu-u-ps-6 {\n padding-left: var(--spacing-06);\n}\n\n.nu-u-ps-7 {\n padding-left: var(--spacing-07);\n}\n\n.nu-u-ps-8 {\n padding-left: var(--spacing-08);\n}\n\n.nu-u-ps-9 {\n padding-left: var(--spacing-09);\n}\n\n.nu-u-ps-10 {\n padding-left: var(--spacing-10);\n}\n\n.nu-u-ps-11 {\n padding-left: var(--spacing-11);\n}\n\n.nu-u-ps-12 {\n padding-left: var(--spacing-12);\n}\n\n.nu-u-ps-13 {\n padding-left: var(--spacing-13);\n}\n\n.nu-u-ps-14 {\n padding-left: var(--spacing-14);\n}\n\n.nu-u-ps-15 {\n padding-left: var(--spacing-15);\n}\n\n.nu-u-ps-16 {\n padding-left: var(--spacing-16);\n}\n\n.nu-u-ps-17 {\n padding-left: var(--spacing-17);\n}\n\n.nu-u-ps-18 {\n padding-left: var(--spacing-18);\n}\n\n.nu-u-px-1 {\n padding-inline: var(--spacing-01);\n}\n\n.nu-u-px-2 {\n padding-inline: var(--spacing-02);\n}\n\n.nu-u-px-3 {\n padding-inline: var(--spacing-03);\n}\n\n.nu-u-px-4 {\n padding-inline: var(--spacing-04);\n}\n\n.nu-u-px-5 {\n padding-inline: var(--spacing-05);\n}\n\n.nu-u-px-6 {\n padding-inline: var(--spacing-06);\n}\n\n.nu-u-px-7 {\n padding-inline: var(--spacing-07);\n}\n\n.nu-u-px-8 {\n padding-inline: var(--spacing-08);\n}\n\n.nu-u-px-9 {\n padding-inline: var(--spacing-09);\n}\n\n.nu-u-px-10 {\n padding-inline: var(--spacing-10);\n}\n\n.nu-u-px-11 {\n padding-inline: var(--spacing-11);\n}\n\n.nu-u-px-12 {\n padding-inline: var(--spacing-12);\n}\n\n.nu-u-px-13 {\n padding-inline: var(--spacing-13);\n}\n\n.nu-u-px-14 {\n padding-inline: var(--spacing-14);\n}\n\n.nu-u-px-15 {\n padding-inline: var(--spacing-15);\n}\n\n.nu-u-px-16 {\n padding-inline: var(--spacing-16);\n}\n\n.nu-u-px-17 {\n padding-inline: var(--spacing-17);\n}\n\n.nu-u-px-18 {\n padding-inline: var(--spacing-18);\n}\n\n.nu-u-py-1 {\n padding-block: var(--spacing-01);\n}\n\n.nu-u-py-2 {\n padding-block: var(--spacing-02);\n}\n\n.nu-u-py-3 {\n padding-block: var(--spacing-03);\n}\n\n.nu-u-py-4 {\n padding-block: var(--spacing-04);\n}\n\n.nu-u-py-5 {\n padding-block: var(--spacing-05);\n}\n\n.nu-u-py-6 {\n padding-block: var(--spacing-06);\n}\n\n.nu-u-py-7 {\n padding-block: var(--spacing-07);\n}\n\n.nu-u-py-8 {\n padding-block: var(--spacing-08);\n}\n\n.nu-u-py-9 {\n padding-block: var(--spacing-09);\n}\n\n.nu-u-py-10 {\n padding-block: var(--spacing-10);\n}\n\n.nu-u-py-11 {\n padding-block: var(--spacing-11);\n}\n\n.nu-u-py-12 {\n padding-block: var(--spacing-12);\n}\n\n.nu-u-py-13 {\n padding-block: var(--spacing-13);\n}\n\n.nu-u-py-14 {\n padding-block: var(--spacing-14);\n}\n\n.nu-u-py-15 {\n padding-block: var(--spacing-15);\n}\n\n.nu-u-py-16 {\n padding-block: var(--spacing-16);\n}\n\n.nu-u-py-17 {\n padding-block: var(--spacing-17);\n}\n\n.nu-u-py-18 {\n padding-block: var(--spacing-18);\n}\n\n.nu-c-spacer-1 {\n height: var(--spacing-01);\n display: block;\n}\n\n.nu-c-spacer-2 {\n height: var(--spacing-02);\n display: block;\n}\n\n.nu-c-spacer-3 {\n height: var(--spacing-03);\n display: block;\n}\n\n.nu-c-spacer-4 {\n height: var(--spacing-04);\n display: block;\n}\n\n.nu-c-spacer-5 {\n height: var(--spacing-05);\n display: block;\n}\n\n.nu-c-spacer-6 {\n height: var(--spacing-06);\n display: block;\n}\n\n.nu-c-spacer-7 {\n height: var(--spacing-07);\n display: block;\n}\n\n.nu-c-spacer-8 {\n height: var(--spacing-08);\n display: block;\n}\n\n.nu-c-spacer-9 {\n height: var(--spacing-09);\n display: block;\n}\n\n.nu-c-spacer-10 {\n height: var(--spacing-10);\n display: block;\n}\n\n.nu-c-spacer-11 {\n height: var(--spacing-11);\n display: block;\n}\n\n.nu-c-spacer-12 {\n height: var(--spacing-12);\n display: block;\n}\n\n.nu-c-spacer-13 {\n height: var(--spacing-13);\n display: block;\n}\n\n.nu-c-spacer-14 {\n height: var(--spacing-14);\n display: block;\n}\n\n.nu-c-spacer-15 {\n height: var(--spacing-15);\n display: block;\n}\n\n.nu-c-spacer-16 {\n height: var(--spacing-16);\n display: block;\n}\n\n.nu-c-spacer-17 {\n height: var(--spacing-17);\n display: block;\n}\n\n.nu-c-spacer-18 {\n height: var(--spacing-18);\n display: block;\n}\n\n/*# sourceMappingURL=index.css.map */\n","@import 'variables';\n@import 'utilities';\n@import 'components';\n",":root {\n --spacing-01: 2px;\n --spacing-02: 4px;\n --spacing-03: 6px;\n --spacing-04: 8px;\n --spacing-05: 12px;\n --spacing-06: 16px;\n --spacing-07: 20px;\n --spacing-08: 24px;\n --spacing-09: 32px;\n --spacing-10: 40px;\n --spacing-11: 48px;\n --spacing-12: 56px;\n --spacing-13: 64px;\n --spacing-14: 72px;\n --spacing-15: 80px;\n --spacing-16: 96px;\n --spacing-17: 120px;\n --spacing-18: 160px;\n}","// Margins\n.nu-u-mx-auto {margin-inline: auto;}\n.nu-u-me-auto {margin-right: auto;}\n.nu-u-ms-auto {margin-left: auto;}\n\n.nu-u-mt-1 { margin-top: var(--spacing-01);}\n.nu-u-mt-2 { margin-top: var(--spacing-02);}\n.nu-u-mt-3 { margin-top: var(--spacing-03);}\n.nu-u-mt-4 { margin-top: var(--spacing-04);}\n.nu-u-mt-5 { margin-top: var(--spacing-05);}\n.nu-u-mt-6 { margin-top: var(--spacing-06);}\n.nu-u-mt-7 { margin-top: var(--spacing-07);}\n.nu-u-mt-8 { margin-top: var(--spacing-08);}\n.nu-u-mt-9 { margin-top: var(--spacing-09);}\n.nu-u-mt-10 { margin-top: var(--spacing-10);}\n.nu-u-mt-11 { margin-top: var(--spacing-11);}\n.nu-u-mt-12 { margin-top: var(--spacing-12);}\n.nu-u-mt-13 { margin-top: var(--spacing-13);}\n.nu-u-mt-14 { margin-top: var(--spacing-14);}\n.nu-u-mt-15 { margin-top: var(--spacing-15);}\n.nu-u-mt-16 { margin-top: var(--spacing-16);}\n.nu-u-mt-17 { margin-top: var(--spacing-17);}\n.nu-u-mt-18 { margin-top: var(--spacing-18);}\n\n.nu-u-me-1 { margin-right: var(--spacing-01);}\n.nu-u-me-2 { margin-right: var(--spacing-02);}\n.nu-u-me-3 { margin-right: var(--spacing-03);}\n.nu-u-me-4 { margin-right: var(--spacing-04);}\n.nu-u-me-5 { margin-right: var(--spacing-05);}\n.nu-u-me-6 { margin-right: var(--spacing-06);}\n.nu-u-me-7 { margin-right: var(--spacing-07);}\n.nu-u-me-8 { margin-right: var(--spacing-08);}\n.nu-u-me-9 { margin-right: var(--spacing-09);}\n.nu-u-me-10 { margin-right: var(--spacing-10);}\n.nu-u-me-11 { margin-right: var(--spacing-11);}\n.nu-u-me-12 { margin-right: var(--spacing-12);}\n.nu-u-me-13 { margin-right: var(--spacing-13);}\n.nu-u-me-14 { margin-right: var(--spacing-14);}\n.nu-u-me-15 { margin-right: var(--spacing-15);}\n.nu-u-me-16 { margin-right: var(--spacing-16);}\n.nu-u-me-17 { margin-right: var(--spacing-17);}\n.nu-u-me-18 { margin-right: var(--spacing-18);}\n\n.nu-u-mb-1 { margin-bottom: var(--spacing-01);}\n.nu-u-mb-2 { margin-bottom: var(--spacing-02);}\n.nu-u-mb-3 { margin-bottom: var(--spacing-03);}\n.nu-u-mb-4 { margin-bottom: var(--spacing-04);}\n.nu-u-mb-5 { margin-bottom: var(--spacing-05);}\n.nu-u-mb-6 { margin-bottom: var(--spacing-06);}\n.nu-u-mb-7 { margin-bottom: var(--spacing-07);}\n.nu-u-mb-8 { margin-bottom: var(--spacing-08);}\n.nu-u-mb-9 { margin-bottom: var(--spacing-09);}\n.nu-u-mb-10 { margin-bottom: var(--spacing-10);}\n.nu-u-mb-11 { margin-bottom: var(--spacing-11);}\n.nu-u-mb-12 { margin-bottom: var(--spacing-12);}\n.nu-u-mb-13 { margin-bottom: var(--spacing-13);}\n.nu-u-mb-14 { margin-bottom: var(--spacing-14);}\n.nu-u-mb-15 { margin-bottom: var(--spacing-15);}\n.nu-u-mb-16 { margin-bottom: var(--spacing-16);}\n.nu-u-mb-17 { margin-bottom: var(--spacing-17);}\n.nu-u-mb-18 { margin-bottom: var(--spacing-18);}\n\n.nu-u-ms-1 { margin-left: var(--spacing-01);}\n.nu-u-ms-2 { margin-left: var(--spacing-02);}\n.nu-u-ms-3 { margin-left: var(--spacing-03);}\n.nu-u-ms-4 { margin-left: var(--spacing-04);}\n.nu-u-ms-5 { margin-left: var(--spacing-05);}\n.nu-u-ms-6 { margin-left: var(--spacing-06);}\n.nu-u-ms-7 { margin-left: var(--spacing-07);}\n.nu-u-ms-8 { margin-left: var(--spacing-08);}\n.nu-u-ms-9 { margin-left: var(--spacing-09);}\n.nu-u-ms-10 { margin-left: var(--spacing-10);}\n.nu-u-ms-11 { margin-left: var(--spacing-11);}\n.nu-u-ms-12 { margin-left: var(--spacing-12);}\n.nu-u-ms-13 { margin-left: var(--spacing-13);}\n.nu-u-ms-14 { margin-left: var(--spacing-14);}\n.nu-u-ms-15 { margin-left: var(--spacing-15);}\n.nu-u-ms-16 { margin-left: var(--spacing-16);}\n.nu-u-ms-17 { margin-left: var(--spacing-17);}\n.nu-u-ms-18 { margin-left: var(--spacing-18);}\n\n.nu-u-mx-1 { margin-inline: var(--spacing-01);}\n.nu-u-mx-2 { margin-inline: var(--spacing-02);}\n.nu-u-mx-3 { margin-inline: var(--spacing-03);}\n.nu-u-mx-4 { margin-inline: var(--spacing-04);}\n.nu-u-mx-5 { margin-inline: var(--spacing-05);}\n.nu-u-mx-6 { margin-inline: var(--spacing-06);}\n.nu-u-mx-7 { margin-inline: var(--spacing-07);}\n.nu-u-mx-8 { margin-inline: var(--spacing-08);}\n.nu-u-mx-9 { margin-inline: var(--spacing-09);}\n.nu-u-mx-10 { margin-inline: var(--spacing-10);}\n.nu-u-mx-11 { margin-inline: var(--spacing-11);}\n.nu-u-mx-12 { margin-inline: var(--spacing-12);}\n.nu-u-mx-13 { margin-inline: var(--spacing-13);}\n.nu-u-mx-14 { margin-inline: var(--spacing-14);}\n.nu-u-mx-15 { margin-inline: var(--spacing-15);}\n.nu-u-mx-16 { margin-inline: var(--spacing-16);}\n.nu-u-mx-17 { margin-inline: var(--spacing-17);}\n.nu-u-mx-18 { margin-inline: var(--spacing-18);}\n\n.nu-u-my-1 { margin-block: var(--spacing-01);}\n.nu-u-my-2 { margin-block: var(--spacing-02);}\n.nu-u-my-3 { margin-block: var(--spacing-03);}\n.nu-u-my-4 { margin-block: var(--spacing-04);}\n.nu-u-my-5 { margin-block: var(--spacing-05);}\n.nu-u-my-6 { margin-block: var(--spacing-06);}\n.nu-u-my-7 { margin-block: var(--spacing-07);}\n.nu-u-my-8 { margin-block: var(--spacing-08);}\n.nu-u-my-9 { margin-block: var(--spacing-09);}\n.nu-u-my-10 { margin-block: var(--spacing-10);}\n.nu-u-my-11 { margin-block: var(--spacing-11);}\n.nu-u-my-12 { margin-block: var(--spacing-12);}\n.nu-u-my-13 { margin-block: var(--spacing-13);}\n.nu-u-my-14 { margin-block: var(--spacing-14);}\n.nu-u-my-15 { margin-block: var(--spacing-15);}\n.nu-u-my-16 { margin-block: var(--spacing-16);}\n.nu-u-my-17 { margin-block: var(--spacing-17);}\n.nu-u-my-18 { margin-block: var(--spacing-18);}\n\n// Padding\n\n.nu-u-p-1 { padding: var(--spacing-01);}\n.nu-u-p-2 { padding: var(--spacing-02);}\n.nu-u-p-3 { padding: var(--spacing-03);}\n.nu-u-p-4 { padding: var(--spacing-04);}\n.nu-u-p-5 { padding: var(--spacing-05);}\n.nu-u-p-6 { padding: var(--spacing-06);}\n.nu-u-p-7 { padding: var(--spacing-07);}\n.nu-u-p-8 { padding: var(--spacing-08);}\n.nu-u-p-9 { padding: var(--spacing-09);}\n.nu-u-p-10 { padding: var(--spacing-10);}\n.nu-u-p-11 { padding: var(--spacing-11);}\n.nu-u-p-12 { padding: var(--spacing-12);}\n.nu-u-p-13 { padding: var(--spacing-13);}\n.nu-u-p-14 { padding: var(--spacing-14);}\n.nu-u-p-15 { padding: var(--spacing-15);}\n.nu-u-p-16 { padding: var(--spacing-16);}\n.nu-u-p-17 { padding: var(--spacing-17);}\n.nu-u-p-18 { padding: var(--spacing-18);}\n\n.nu-u-pt-1 { padding-top: var(--spacing-01);}\n.nu-u-pt-2 { padding-top: var(--spacing-02);}\n.nu-u-pt-3 { padding-top: var(--spacing-03);}\n.nu-u-pt-4 { padding-top: var(--spacing-04);}\n.nu-u-pt-5 { padding-top: var(--spacing-05);}\n.nu-u-pt-6 { padding-top: var(--spacing-06);}\n.nu-u-pt-7 { padding-top: var(--spacing-07);}\n.nu-u-pt-8 { padding-top: var(--spacing-08);}\n.nu-u-pt-9 { padding-top: var(--spacing-09);}\n.nu-u-pt-10 { padding-top: var(--spacing-10);}\n.nu-u-pt-11 { padding-top: var(--spacing-11);}\n.nu-u-pt-12 { padding-top: var(--spacing-12);}\n.nu-u-pt-13 { padding-top: var(--spacing-13);}\n.nu-u-pt-14 { padding-top: var(--spacing-14);}\n.nu-u-pt-15 { padding-top: var(--spacing-15);}\n.nu-u-pt-16 { padding-top: var(--spacing-16);}\n.nu-u-pt-17 { padding-top: var(--spacing-17);}\n.nu-u-pt-18 { padding-top: var(--spacing-18);}\n\n.nu-u-pe-1 { padding-right: var(--spacing-01);}\n.nu-u-pe-2 { padding-right: var(--spacing-02);}\n.nu-u-pe-3 { padding-right: var(--spacing-03);}\n.nu-u-pe-4 { padding-right: var(--spacing-04);}\n.nu-u-pe-5 { padding-right: var(--spacing-05);}\n.nu-u-pe-6 { padding-right: var(--spacing-06);}\n.nu-u-pe-7 { padding-right: var(--spacing-07);}\n.nu-u-pe-8 { padding-right: var(--spacing-08);}\n.nu-u-pe-9 { padding-right: var(--spacing-09);}\n.nu-u-pe-10 { padding-right: var(--spacing-10);}\n.nu-u-pe-11 { padding-right: var(--spacing-11);}\n.nu-u-pe-12 { padding-right: var(--spacing-12);}\n.nu-u-pe-13 { padding-right: var(--spacing-13);}\n.nu-u-pe-14 { padding-right: var(--spacing-14);}\n.nu-u-pe-15 { padding-right: var(--spacing-15);}\n.nu-u-pe-16 { padding-right: var(--spacing-16);}\n.nu-u-pe-17 { padding-right: var(--spacing-17);}\n.nu-u-pe-18 { padding-right: var(--spacing-18);}\n\n.nu-u-pb-1 { padding-bottom: var(--spacing-01);}\n.nu-u-pb-2 { padding-bottom: var(--spacing-02);}\n.nu-u-pb-3 { padding-bottom: var(--spacing-03);}\n.nu-u-pb-4 { padding-bottom: var(--spacing-04);}\n.nu-u-pb-5 { padding-bottom: var(--spacing-05);}\n.nu-u-pb-6 { padding-bottom: var(--spacing-06);}\n.nu-u-pb-7 { padding-bottom: var(--spacing-07);}\n.nu-u-pb-8 { padding-bottom: var(--spacing-08);}\n.nu-u-pb-9 { padding-bottom: var(--spacing-09);}\n.nu-u-pb-10 { padding-bottom: var(--spacing-10);}\n.nu-u-pb-11 { padding-bottom: var(--spacing-11);}\n.nu-u-pb-12 { padding-bottom: var(--spacing-12);}\n.nu-u-pb-13 { padding-bottom: var(--spacing-13);}\n.nu-u-pb-14 { padding-bottom: var(--spacing-14);}\n.nu-u-pb-15 { padding-bottom: var(--spacing-15);}\n.nu-u-pb-16 { padding-bottom: var(--spacing-16);}\n.nu-u-pb-17 { padding-bottom: var(--spacing-17);}\n.nu-u-pb-18 { padding-bottom: var(--spacing-18);}\n\n.nu-u-ps-1 { padding-left: var(--spacing-01);}\n.nu-u-ps-2 { padding-left: var(--spacing-02);}\n.nu-u-ps-3 { padding-left: var(--spacing-03);}\n.nu-u-ps-4 { padding-left: var(--spacing-04);}\n.nu-u-ps-5 { padding-left: var(--spacing-05);}\n.nu-u-ps-6 { padding-left: var(--spacing-06);}\n.nu-u-ps-7 { padding-left: var(--spacing-07);}\n.nu-u-ps-8 { padding-left: var(--spacing-08);}\n.nu-u-ps-9 { padding-left: var(--spacing-09);}\n.nu-u-ps-10 { padding-left: var(--spacing-10);}\n.nu-u-ps-11 { padding-left: var(--spacing-11);}\n.nu-u-ps-12 { padding-left: var(--spacing-12);}\n.nu-u-ps-13 { padding-left: var(--spacing-13);}\n.nu-u-ps-14 { padding-left: var(--spacing-14);}\n.nu-u-ps-15 { padding-left: var(--spacing-15);}\n.nu-u-ps-16 { padding-left: var(--spacing-16);}\n.nu-u-ps-17 { padding-left: var(--spacing-17);}\n.nu-u-ps-18 { padding-left: var(--spacing-18);}\n\n.nu-u-px-1 { padding-inline: var(--spacing-01);}\n.nu-u-px-2 { padding-inline: var(--spacing-02);}\n.nu-u-px-3 { padding-inline: var(--spacing-03);}\n.nu-u-px-4 { padding-inline: var(--spacing-04);}\n.nu-u-px-5 { padding-inline: var(--spacing-05);}\n.nu-u-px-6 { padding-inline: var(--spacing-06);}\n.nu-u-px-7 { padding-inline: var(--spacing-07);}\n.nu-u-px-8 { padding-inline: var(--spacing-08);}\n.nu-u-px-9 { padding-inline: var(--spacing-09);}\n.nu-u-px-10 { padding-inline: var(--spacing-10);}\n.nu-u-px-11 { padding-inline: var(--spacing-11);}\n.nu-u-px-12 { padding-inline: var(--spacing-12);}\n.nu-u-px-13 { padding-inline: var(--spacing-13);}\n.nu-u-px-14 { padding-inline: var(--spacing-14);}\n.nu-u-px-15 { padding-inline: var(--spacing-15);}\n.nu-u-px-16 { padding-inline: var(--spacing-16);}\n.nu-u-px-17 { padding-inline: var(--spacing-17);}\n.nu-u-px-18 { padding-inline: var(--spacing-18);}\n\n.nu-u-py-1 { padding-block: var(--spacing-01);}\n.nu-u-py-2 { padding-block: var(--spacing-02);}\n.nu-u-py-3 { padding-block: var(--spacing-03);}\n.nu-u-py-4 { padding-block: var(--spacing-04);}\n.nu-u-py-5 { padding-block: var(--spacing-05);}\n.nu-u-py-6 { padding-block: var(--spacing-06);}\n.nu-u-py-7 { padding-block: var(--spacing-07);}\n.nu-u-py-8 { padding-block: var(--spacing-08);}\n.nu-u-py-9 { padding-block: var(--spacing-09);}\n.nu-u-py-10 { padding-block: var(--spacing-10);}\n.nu-u-py-11 { padding-block: var(--spacing-11);}\n.nu-u-py-12 { padding-block: var(--spacing-12);}\n.nu-u-py-13 { padding-block: var(--spacing-13);}\n.nu-u-py-14 { padding-block: var(--spacing-14);}\n.nu-u-py-15 { padding-block: var(--spacing-15);}\n.nu-u-py-16 { padding-block: var(--spacing-16);}\n.nu-u-py-17 { padding-block: var(--spacing-17);}\n.nu-u-py-18 { padding-block: var(--spacing-18);}","// Spacer blocks \n\n.nu-c-spacer-1 { display: block; height: var(--spacing-01);}\n.nu-c-spacer-2 { display: block; height: var(--spacing-02);}\n.nu-c-spacer-3 { display: block; height: var(--spacing-03);}\n.nu-c-spacer-4 { display: block; height: var(--spacing-04);}\n.nu-c-spacer-5 { display: block; height: var(--spacing-05);}\n.nu-c-spacer-6 { display: block; height: var(--spacing-06);}\n.nu-c-spacer-7 { display: block; height: var(--spacing-07);}\n.nu-c-spacer-8 { display: block; height: var(--spacing-08);}\n.nu-c-spacer-9 { display: block; height: var(--spacing-09);}\n.nu-c-spacer-10 { display: block; height: var(--spacing-10);}\n.nu-c-spacer-11 { display: block; height: var(--spacing-11);}\n.nu-c-spacer-12 { display: block; height: var(--spacing-12);}\n.nu-c-spacer-13 { display: block; height: var(--spacing-13);}\n.nu-c-spacer-14 { display: block; height: var(--spacing-14);}\n.nu-c-spacer-15 { display: block; height: var(--spacing-15);}\n.nu-c-spacer-16 { display: block; height: var(--spacing-16);}\n.nu-c-spacer-17 { display: block; height: var(--spacing-17);}\n.nu-c-spacer-18 { display: block; height: var(--spacing-18);}"],"names":[],"version":3,"file":"index.css.map"}
|
package/package.json
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@new-ui/spacings",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Spacing Blocks",
|
|
5
|
+
"source": "src/index.scss",
|
|
6
|
+
"main": "dist/index.css",
|
|
7
|
+
"targets": {
|
|
8
|
+
"main": false
|
|
9
|
+
},
|
|
10
|
+
"scripts": {
|
|
11
|
+
"watch": "parcel watch",
|
|
12
|
+
"build": "parcel build"
|
|
13
|
+
},
|
|
14
|
+
"repository": {
|
|
15
|
+
"type": "git",
|
|
16
|
+
"url": "git+https://github.com/NewDesignFile/spacings.git"
|
|
17
|
+
},
|
|
18
|
+
"keywords": [
|
|
19
|
+
"spacings",
|
|
20
|
+
"spacing-blocks",
|
|
21
|
+
"themes",
|
|
22
|
+
"tokens",
|
|
23
|
+
"tokens-translation",
|
|
24
|
+
"design-tokens",
|
|
25
|
+
"design-system"
|
|
26
|
+
],
|
|
27
|
+
"author": "Abhimanyu Rana",
|
|
28
|
+
"license": "MIT",
|
|
29
|
+
"bugs": {
|
|
30
|
+
"url": "https://github.com/NewDesignFile/spacings/issues"
|
|
31
|
+
},
|
|
32
|
+
"homepage": "https://github.com/NewDesignFile/spacings#readme",
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"@parcel/transformer-sass": "^2.8.3",
|
|
35
|
+
"autoprefixer": "^10.4.13",
|
|
36
|
+
"parcel": "^2.8.3"
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
// Spacer blocks
|
|
2
|
+
|
|
3
|
+
.nu-c-spacer-1 { display: block; height: var(--spacing-01);}
|
|
4
|
+
.nu-c-spacer-2 { display: block; height: var(--spacing-02);}
|
|
5
|
+
.nu-c-spacer-3 { display: block; height: var(--spacing-03);}
|
|
6
|
+
.nu-c-spacer-4 { display: block; height: var(--spacing-04);}
|
|
7
|
+
.nu-c-spacer-5 { display: block; height: var(--spacing-05);}
|
|
8
|
+
.nu-c-spacer-6 { display: block; height: var(--spacing-06);}
|
|
9
|
+
.nu-c-spacer-7 { display: block; height: var(--spacing-07);}
|
|
10
|
+
.nu-c-spacer-8 { display: block; height: var(--spacing-08);}
|
|
11
|
+
.nu-c-spacer-9 { display: block; height: var(--spacing-09);}
|
|
12
|
+
.nu-c-spacer-10 { display: block; height: var(--spacing-10);}
|
|
13
|
+
.nu-c-spacer-11 { display: block; height: var(--spacing-11);}
|
|
14
|
+
.nu-c-spacer-12 { display: block; height: var(--spacing-12);}
|
|
15
|
+
.nu-c-spacer-13 { display: block; height: var(--spacing-13);}
|
|
16
|
+
.nu-c-spacer-14 { display: block; height: var(--spacing-14);}
|
|
17
|
+
.nu-c-spacer-15 { display: block; height: var(--spacing-15);}
|
|
18
|
+
.nu-c-spacer-16 { display: block; height: var(--spacing-16);}
|
|
19
|
+
.nu-c-spacer-17 { display: block; height: var(--spacing-17);}
|
|
20
|
+
.nu-c-spacer-18 { display: block; height: var(--spacing-18);}
|
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
// Margins
|
|
2
|
+
.nu-u-mx-auto {margin-inline: auto;}
|
|
3
|
+
.nu-u-me-auto {margin-right: auto;}
|
|
4
|
+
.nu-u-ms-auto {margin-left: auto;}
|
|
5
|
+
|
|
6
|
+
.nu-u-mt-1 { margin-top: var(--spacing-01);}
|
|
7
|
+
.nu-u-mt-2 { margin-top: var(--spacing-02);}
|
|
8
|
+
.nu-u-mt-3 { margin-top: var(--spacing-03);}
|
|
9
|
+
.nu-u-mt-4 { margin-top: var(--spacing-04);}
|
|
10
|
+
.nu-u-mt-5 { margin-top: var(--spacing-05);}
|
|
11
|
+
.nu-u-mt-6 { margin-top: var(--spacing-06);}
|
|
12
|
+
.nu-u-mt-7 { margin-top: var(--spacing-07);}
|
|
13
|
+
.nu-u-mt-8 { margin-top: var(--spacing-08);}
|
|
14
|
+
.nu-u-mt-9 { margin-top: var(--spacing-09);}
|
|
15
|
+
.nu-u-mt-10 { margin-top: var(--spacing-10);}
|
|
16
|
+
.nu-u-mt-11 { margin-top: var(--spacing-11);}
|
|
17
|
+
.nu-u-mt-12 { margin-top: var(--spacing-12);}
|
|
18
|
+
.nu-u-mt-13 { margin-top: var(--spacing-13);}
|
|
19
|
+
.nu-u-mt-14 { margin-top: var(--spacing-14);}
|
|
20
|
+
.nu-u-mt-15 { margin-top: var(--spacing-15);}
|
|
21
|
+
.nu-u-mt-16 { margin-top: var(--spacing-16);}
|
|
22
|
+
.nu-u-mt-17 { margin-top: var(--spacing-17);}
|
|
23
|
+
.nu-u-mt-18 { margin-top: var(--spacing-18);}
|
|
24
|
+
|
|
25
|
+
.nu-u-me-1 { margin-right: var(--spacing-01);}
|
|
26
|
+
.nu-u-me-2 { margin-right: var(--spacing-02);}
|
|
27
|
+
.nu-u-me-3 { margin-right: var(--spacing-03);}
|
|
28
|
+
.nu-u-me-4 { margin-right: var(--spacing-04);}
|
|
29
|
+
.nu-u-me-5 { margin-right: var(--spacing-05);}
|
|
30
|
+
.nu-u-me-6 { margin-right: var(--spacing-06);}
|
|
31
|
+
.nu-u-me-7 { margin-right: var(--spacing-07);}
|
|
32
|
+
.nu-u-me-8 { margin-right: var(--spacing-08);}
|
|
33
|
+
.nu-u-me-9 { margin-right: var(--spacing-09);}
|
|
34
|
+
.nu-u-me-10 { margin-right: var(--spacing-10);}
|
|
35
|
+
.nu-u-me-11 { margin-right: var(--spacing-11);}
|
|
36
|
+
.nu-u-me-12 { margin-right: var(--spacing-12);}
|
|
37
|
+
.nu-u-me-13 { margin-right: var(--spacing-13);}
|
|
38
|
+
.nu-u-me-14 { margin-right: var(--spacing-14);}
|
|
39
|
+
.nu-u-me-15 { margin-right: var(--spacing-15);}
|
|
40
|
+
.nu-u-me-16 { margin-right: var(--spacing-16);}
|
|
41
|
+
.nu-u-me-17 { margin-right: var(--spacing-17);}
|
|
42
|
+
.nu-u-me-18 { margin-right: var(--spacing-18);}
|
|
43
|
+
|
|
44
|
+
.nu-u-mb-1 { margin-bottom: var(--spacing-01);}
|
|
45
|
+
.nu-u-mb-2 { margin-bottom: var(--spacing-02);}
|
|
46
|
+
.nu-u-mb-3 { margin-bottom: var(--spacing-03);}
|
|
47
|
+
.nu-u-mb-4 { margin-bottom: var(--spacing-04);}
|
|
48
|
+
.nu-u-mb-5 { margin-bottom: var(--spacing-05);}
|
|
49
|
+
.nu-u-mb-6 { margin-bottom: var(--spacing-06);}
|
|
50
|
+
.nu-u-mb-7 { margin-bottom: var(--spacing-07);}
|
|
51
|
+
.nu-u-mb-8 { margin-bottom: var(--spacing-08);}
|
|
52
|
+
.nu-u-mb-9 { margin-bottom: var(--spacing-09);}
|
|
53
|
+
.nu-u-mb-10 { margin-bottom: var(--spacing-10);}
|
|
54
|
+
.nu-u-mb-11 { margin-bottom: var(--spacing-11);}
|
|
55
|
+
.nu-u-mb-12 { margin-bottom: var(--spacing-12);}
|
|
56
|
+
.nu-u-mb-13 { margin-bottom: var(--spacing-13);}
|
|
57
|
+
.nu-u-mb-14 { margin-bottom: var(--spacing-14);}
|
|
58
|
+
.nu-u-mb-15 { margin-bottom: var(--spacing-15);}
|
|
59
|
+
.nu-u-mb-16 { margin-bottom: var(--spacing-16);}
|
|
60
|
+
.nu-u-mb-17 { margin-bottom: var(--spacing-17);}
|
|
61
|
+
.nu-u-mb-18 { margin-bottom: var(--spacing-18);}
|
|
62
|
+
|
|
63
|
+
.nu-u-ms-1 { margin-left: var(--spacing-01);}
|
|
64
|
+
.nu-u-ms-2 { margin-left: var(--spacing-02);}
|
|
65
|
+
.nu-u-ms-3 { margin-left: var(--spacing-03);}
|
|
66
|
+
.nu-u-ms-4 { margin-left: var(--spacing-04);}
|
|
67
|
+
.nu-u-ms-5 { margin-left: var(--spacing-05);}
|
|
68
|
+
.nu-u-ms-6 { margin-left: var(--spacing-06);}
|
|
69
|
+
.nu-u-ms-7 { margin-left: var(--spacing-07);}
|
|
70
|
+
.nu-u-ms-8 { margin-left: var(--spacing-08);}
|
|
71
|
+
.nu-u-ms-9 { margin-left: var(--spacing-09);}
|
|
72
|
+
.nu-u-ms-10 { margin-left: var(--spacing-10);}
|
|
73
|
+
.nu-u-ms-11 { margin-left: var(--spacing-11);}
|
|
74
|
+
.nu-u-ms-12 { margin-left: var(--spacing-12);}
|
|
75
|
+
.nu-u-ms-13 { margin-left: var(--spacing-13);}
|
|
76
|
+
.nu-u-ms-14 { margin-left: var(--spacing-14);}
|
|
77
|
+
.nu-u-ms-15 { margin-left: var(--spacing-15);}
|
|
78
|
+
.nu-u-ms-16 { margin-left: var(--spacing-16);}
|
|
79
|
+
.nu-u-ms-17 { margin-left: var(--spacing-17);}
|
|
80
|
+
.nu-u-ms-18 { margin-left: var(--spacing-18);}
|
|
81
|
+
|
|
82
|
+
.nu-u-mx-1 { margin-inline: var(--spacing-01);}
|
|
83
|
+
.nu-u-mx-2 { margin-inline: var(--spacing-02);}
|
|
84
|
+
.nu-u-mx-3 { margin-inline: var(--spacing-03);}
|
|
85
|
+
.nu-u-mx-4 { margin-inline: var(--spacing-04);}
|
|
86
|
+
.nu-u-mx-5 { margin-inline: var(--spacing-05);}
|
|
87
|
+
.nu-u-mx-6 { margin-inline: var(--spacing-06);}
|
|
88
|
+
.nu-u-mx-7 { margin-inline: var(--spacing-07);}
|
|
89
|
+
.nu-u-mx-8 { margin-inline: var(--spacing-08);}
|
|
90
|
+
.nu-u-mx-9 { margin-inline: var(--spacing-09);}
|
|
91
|
+
.nu-u-mx-10 { margin-inline: var(--spacing-10);}
|
|
92
|
+
.nu-u-mx-11 { margin-inline: var(--spacing-11);}
|
|
93
|
+
.nu-u-mx-12 { margin-inline: var(--spacing-12);}
|
|
94
|
+
.nu-u-mx-13 { margin-inline: var(--spacing-13);}
|
|
95
|
+
.nu-u-mx-14 { margin-inline: var(--spacing-14);}
|
|
96
|
+
.nu-u-mx-15 { margin-inline: var(--spacing-15);}
|
|
97
|
+
.nu-u-mx-16 { margin-inline: var(--spacing-16);}
|
|
98
|
+
.nu-u-mx-17 { margin-inline: var(--spacing-17);}
|
|
99
|
+
.nu-u-mx-18 { margin-inline: var(--spacing-18);}
|
|
100
|
+
|
|
101
|
+
.nu-u-my-1 { margin-block: var(--spacing-01);}
|
|
102
|
+
.nu-u-my-2 { margin-block: var(--spacing-02);}
|
|
103
|
+
.nu-u-my-3 { margin-block: var(--spacing-03);}
|
|
104
|
+
.nu-u-my-4 { margin-block: var(--spacing-04);}
|
|
105
|
+
.nu-u-my-5 { margin-block: var(--spacing-05);}
|
|
106
|
+
.nu-u-my-6 { margin-block: var(--spacing-06);}
|
|
107
|
+
.nu-u-my-7 { margin-block: var(--spacing-07);}
|
|
108
|
+
.nu-u-my-8 { margin-block: var(--spacing-08);}
|
|
109
|
+
.nu-u-my-9 { margin-block: var(--spacing-09);}
|
|
110
|
+
.nu-u-my-10 { margin-block: var(--spacing-10);}
|
|
111
|
+
.nu-u-my-11 { margin-block: var(--spacing-11);}
|
|
112
|
+
.nu-u-my-12 { margin-block: var(--spacing-12);}
|
|
113
|
+
.nu-u-my-13 { margin-block: var(--spacing-13);}
|
|
114
|
+
.nu-u-my-14 { margin-block: var(--spacing-14);}
|
|
115
|
+
.nu-u-my-15 { margin-block: var(--spacing-15);}
|
|
116
|
+
.nu-u-my-16 { margin-block: var(--spacing-16);}
|
|
117
|
+
.nu-u-my-17 { margin-block: var(--spacing-17);}
|
|
118
|
+
.nu-u-my-18 { margin-block: var(--spacing-18);}
|
|
119
|
+
|
|
120
|
+
// Padding
|
|
121
|
+
|
|
122
|
+
.nu-u-p-1 { padding: var(--spacing-01);}
|
|
123
|
+
.nu-u-p-2 { padding: var(--spacing-02);}
|
|
124
|
+
.nu-u-p-3 { padding: var(--spacing-03);}
|
|
125
|
+
.nu-u-p-4 { padding: var(--spacing-04);}
|
|
126
|
+
.nu-u-p-5 { padding: var(--spacing-05);}
|
|
127
|
+
.nu-u-p-6 { padding: var(--spacing-06);}
|
|
128
|
+
.nu-u-p-7 { padding: var(--spacing-07);}
|
|
129
|
+
.nu-u-p-8 { padding: var(--spacing-08);}
|
|
130
|
+
.nu-u-p-9 { padding: var(--spacing-09);}
|
|
131
|
+
.nu-u-p-10 { padding: var(--spacing-10);}
|
|
132
|
+
.nu-u-p-11 { padding: var(--spacing-11);}
|
|
133
|
+
.nu-u-p-12 { padding: var(--spacing-12);}
|
|
134
|
+
.nu-u-p-13 { padding: var(--spacing-13);}
|
|
135
|
+
.nu-u-p-14 { padding: var(--spacing-14);}
|
|
136
|
+
.nu-u-p-15 { padding: var(--spacing-15);}
|
|
137
|
+
.nu-u-p-16 { padding: var(--spacing-16);}
|
|
138
|
+
.nu-u-p-17 { padding: var(--spacing-17);}
|
|
139
|
+
.nu-u-p-18 { padding: var(--spacing-18);}
|
|
140
|
+
|
|
141
|
+
.nu-u-pt-1 { padding-top: var(--spacing-01);}
|
|
142
|
+
.nu-u-pt-2 { padding-top: var(--spacing-02);}
|
|
143
|
+
.nu-u-pt-3 { padding-top: var(--spacing-03);}
|
|
144
|
+
.nu-u-pt-4 { padding-top: var(--spacing-04);}
|
|
145
|
+
.nu-u-pt-5 { padding-top: var(--spacing-05);}
|
|
146
|
+
.nu-u-pt-6 { padding-top: var(--spacing-06);}
|
|
147
|
+
.nu-u-pt-7 { padding-top: var(--spacing-07);}
|
|
148
|
+
.nu-u-pt-8 { padding-top: var(--spacing-08);}
|
|
149
|
+
.nu-u-pt-9 { padding-top: var(--spacing-09);}
|
|
150
|
+
.nu-u-pt-10 { padding-top: var(--spacing-10);}
|
|
151
|
+
.nu-u-pt-11 { padding-top: var(--spacing-11);}
|
|
152
|
+
.nu-u-pt-12 { padding-top: var(--spacing-12);}
|
|
153
|
+
.nu-u-pt-13 { padding-top: var(--spacing-13);}
|
|
154
|
+
.nu-u-pt-14 { padding-top: var(--spacing-14);}
|
|
155
|
+
.nu-u-pt-15 { padding-top: var(--spacing-15);}
|
|
156
|
+
.nu-u-pt-16 { padding-top: var(--spacing-16);}
|
|
157
|
+
.nu-u-pt-17 { padding-top: var(--spacing-17);}
|
|
158
|
+
.nu-u-pt-18 { padding-top: var(--spacing-18);}
|
|
159
|
+
|
|
160
|
+
.nu-u-pe-1 { padding-right: var(--spacing-01);}
|
|
161
|
+
.nu-u-pe-2 { padding-right: var(--spacing-02);}
|
|
162
|
+
.nu-u-pe-3 { padding-right: var(--spacing-03);}
|
|
163
|
+
.nu-u-pe-4 { padding-right: var(--spacing-04);}
|
|
164
|
+
.nu-u-pe-5 { padding-right: var(--spacing-05);}
|
|
165
|
+
.nu-u-pe-6 { padding-right: var(--spacing-06);}
|
|
166
|
+
.nu-u-pe-7 { padding-right: var(--spacing-07);}
|
|
167
|
+
.nu-u-pe-8 { padding-right: var(--spacing-08);}
|
|
168
|
+
.nu-u-pe-9 { padding-right: var(--spacing-09);}
|
|
169
|
+
.nu-u-pe-10 { padding-right: var(--spacing-10);}
|
|
170
|
+
.nu-u-pe-11 { padding-right: var(--spacing-11);}
|
|
171
|
+
.nu-u-pe-12 { padding-right: var(--spacing-12);}
|
|
172
|
+
.nu-u-pe-13 { padding-right: var(--spacing-13);}
|
|
173
|
+
.nu-u-pe-14 { padding-right: var(--spacing-14);}
|
|
174
|
+
.nu-u-pe-15 { padding-right: var(--spacing-15);}
|
|
175
|
+
.nu-u-pe-16 { padding-right: var(--spacing-16);}
|
|
176
|
+
.nu-u-pe-17 { padding-right: var(--spacing-17);}
|
|
177
|
+
.nu-u-pe-18 { padding-right: var(--spacing-18);}
|
|
178
|
+
|
|
179
|
+
.nu-u-pb-1 { padding-bottom: var(--spacing-01);}
|
|
180
|
+
.nu-u-pb-2 { padding-bottom: var(--spacing-02);}
|
|
181
|
+
.nu-u-pb-3 { padding-bottom: var(--spacing-03);}
|
|
182
|
+
.nu-u-pb-4 { padding-bottom: var(--spacing-04);}
|
|
183
|
+
.nu-u-pb-5 { padding-bottom: var(--spacing-05);}
|
|
184
|
+
.nu-u-pb-6 { padding-bottom: var(--spacing-06);}
|
|
185
|
+
.nu-u-pb-7 { padding-bottom: var(--spacing-07);}
|
|
186
|
+
.nu-u-pb-8 { padding-bottom: var(--spacing-08);}
|
|
187
|
+
.nu-u-pb-9 { padding-bottom: var(--spacing-09);}
|
|
188
|
+
.nu-u-pb-10 { padding-bottom: var(--spacing-10);}
|
|
189
|
+
.nu-u-pb-11 { padding-bottom: var(--spacing-11);}
|
|
190
|
+
.nu-u-pb-12 { padding-bottom: var(--spacing-12);}
|
|
191
|
+
.nu-u-pb-13 { padding-bottom: var(--spacing-13);}
|
|
192
|
+
.nu-u-pb-14 { padding-bottom: var(--spacing-14);}
|
|
193
|
+
.nu-u-pb-15 { padding-bottom: var(--spacing-15);}
|
|
194
|
+
.nu-u-pb-16 { padding-bottom: var(--spacing-16);}
|
|
195
|
+
.nu-u-pb-17 { padding-bottom: var(--spacing-17);}
|
|
196
|
+
.nu-u-pb-18 { padding-bottom: var(--spacing-18);}
|
|
197
|
+
|
|
198
|
+
.nu-u-ps-1 { padding-left: var(--spacing-01);}
|
|
199
|
+
.nu-u-ps-2 { padding-left: var(--spacing-02);}
|
|
200
|
+
.nu-u-ps-3 { padding-left: var(--spacing-03);}
|
|
201
|
+
.nu-u-ps-4 { padding-left: var(--spacing-04);}
|
|
202
|
+
.nu-u-ps-5 { padding-left: var(--spacing-05);}
|
|
203
|
+
.nu-u-ps-6 { padding-left: var(--spacing-06);}
|
|
204
|
+
.nu-u-ps-7 { padding-left: var(--spacing-07);}
|
|
205
|
+
.nu-u-ps-8 { padding-left: var(--spacing-08);}
|
|
206
|
+
.nu-u-ps-9 { padding-left: var(--spacing-09);}
|
|
207
|
+
.nu-u-ps-10 { padding-left: var(--spacing-10);}
|
|
208
|
+
.nu-u-ps-11 { padding-left: var(--spacing-11);}
|
|
209
|
+
.nu-u-ps-12 { padding-left: var(--spacing-12);}
|
|
210
|
+
.nu-u-ps-13 { padding-left: var(--spacing-13);}
|
|
211
|
+
.nu-u-ps-14 { padding-left: var(--spacing-14);}
|
|
212
|
+
.nu-u-ps-15 { padding-left: var(--spacing-15);}
|
|
213
|
+
.nu-u-ps-16 { padding-left: var(--spacing-16);}
|
|
214
|
+
.nu-u-ps-17 { padding-left: var(--spacing-17);}
|
|
215
|
+
.nu-u-ps-18 { padding-left: var(--spacing-18);}
|
|
216
|
+
|
|
217
|
+
.nu-u-px-1 { padding-inline: var(--spacing-01);}
|
|
218
|
+
.nu-u-px-2 { padding-inline: var(--spacing-02);}
|
|
219
|
+
.nu-u-px-3 { padding-inline: var(--spacing-03);}
|
|
220
|
+
.nu-u-px-4 { padding-inline: var(--spacing-04);}
|
|
221
|
+
.nu-u-px-5 { padding-inline: var(--spacing-05);}
|
|
222
|
+
.nu-u-px-6 { padding-inline: var(--spacing-06);}
|
|
223
|
+
.nu-u-px-7 { padding-inline: var(--spacing-07);}
|
|
224
|
+
.nu-u-px-8 { padding-inline: var(--spacing-08);}
|
|
225
|
+
.nu-u-px-9 { padding-inline: var(--spacing-09);}
|
|
226
|
+
.nu-u-px-10 { padding-inline: var(--spacing-10);}
|
|
227
|
+
.nu-u-px-11 { padding-inline: var(--spacing-11);}
|
|
228
|
+
.nu-u-px-12 { padding-inline: var(--spacing-12);}
|
|
229
|
+
.nu-u-px-13 { padding-inline: var(--spacing-13);}
|
|
230
|
+
.nu-u-px-14 { padding-inline: var(--spacing-14);}
|
|
231
|
+
.nu-u-px-15 { padding-inline: var(--spacing-15);}
|
|
232
|
+
.nu-u-px-16 { padding-inline: var(--spacing-16);}
|
|
233
|
+
.nu-u-px-17 { padding-inline: var(--spacing-17);}
|
|
234
|
+
.nu-u-px-18 { padding-inline: var(--spacing-18);}
|
|
235
|
+
|
|
236
|
+
.nu-u-py-1 { padding-block: var(--spacing-01);}
|
|
237
|
+
.nu-u-py-2 { padding-block: var(--spacing-02);}
|
|
238
|
+
.nu-u-py-3 { padding-block: var(--spacing-03);}
|
|
239
|
+
.nu-u-py-4 { padding-block: var(--spacing-04);}
|
|
240
|
+
.nu-u-py-5 { padding-block: var(--spacing-05);}
|
|
241
|
+
.nu-u-py-6 { padding-block: var(--spacing-06);}
|
|
242
|
+
.nu-u-py-7 { padding-block: var(--spacing-07);}
|
|
243
|
+
.nu-u-py-8 { padding-block: var(--spacing-08);}
|
|
244
|
+
.nu-u-py-9 { padding-block: var(--spacing-09);}
|
|
245
|
+
.nu-u-py-10 { padding-block: var(--spacing-10);}
|
|
246
|
+
.nu-u-py-11 { padding-block: var(--spacing-11);}
|
|
247
|
+
.nu-u-py-12 { padding-block: var(--spacing-12);}
|
|
248
|
+
.nu-u-py-13 { padding-block: var(--spacing-13);}
|
|
249
|
+
.nu-u-py-14 { padding-block: var(--spacing-14);}
|
|
250
|
+
.nu-u-py-15 { padding-block: var(--spacing-15);}
|
|
251
|
+
.nu-u-py-16 { padding-block: var(--spacing-16);}
|
|
252
|
+
.nu-u-py-17 { padding-block: var(--spacing-17);}
|
|
253
|
+
.nu-u-py-18 { padding-block: var(--spacing-18);}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--spacing-01: 2px;
|
|
3
|
+
--spacing-02: 4px;
|
|
4
|
+
--spacing-03: 6px;
|
|
5
|
+
--spacing-04: 8px;
|
|
6
|
+
--spacing-05: 12px;
|
|
7
|
+
--spacing-06: 16px;
|
|
8
|
+
--spacing-07: 20px;
|
|
9
|
+
--spacing-08: 24px;
|
|
10
|
+
--spacing-09: 32px;
|
|
11
|
+
--spacing-10: 40px;
|
|
12
|
+
--spacing-11: 48px;
|
|
13
|
+
--spacing-12: 56px;
|
|
14
|
+
--spacing-13: 64px;
|
|
15
|
+
--spacing-14: 72px;
|
|
16
|
+
--spacing-15: 80px;
|
|
17
|
+
--spacing-16: 96px;
|
|
18
|
+
--spacing-17: 120px;
|
|
19
|
+
--spacing-18: 160px;
|
|
20
|
+
}
|
package/src/index.scss
ADDED