@new-ui/spacings 0.1.6 → 0.1.7
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/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +5 -5
- package/src/_components.scss +9 -19
- package/src/_utilities.scss +48 -254
- package/src/_variables.scss +27 -9
package/dist/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
:root{--spacing:.125rem;--spacing-00:0px;--spacing-01:var(--spacing);--spacing-02:calc(var(--spacing)*2);--spacing-03:calc(var(--spacing)*3);--spacing-04:calc(var(--spacing)*4);--spacing-05:calc(var(--spacing)*6);--spacing-06:calc(var(--spacing)*8);--spacing-07:calc(var(--spacing)*10);--spacing-08:calc(var(--spacing)*12);--spacing-09:calc(var(--spacing)*16);--spacing-10:calc(var(--spacing)*20);--spacing-11:calc(var(--spacing)*24);--spacing-12:calc(var(--spacing)*28);--spacing-13:calc(var(--spacing)*32);--spacing-14:calc(var(--spacing)*36);--spacing-15:calc(var(--spacing)*40);--spacing-16:calc(var(--spacing)*48);--spacing-17:calc(var(--spacing)*60);--spacing-18:calc(var(--spacing)*80)}.nu-u-mx-auto{margin-inline:auto}.nu-u-me-auto{margin-right:auto}.nu-u-ms-auto{margin-left:auto}.nu-u-mx-0{margin-inline:var(--spacing-00)}.nu-u-my-0{margin-block:var(--spacing-00)}.nu-u-ms-0{margin-left:var(--spacing-00)}.nu-u-me-0{margin-right:var(--spacing-00)}.nu-u-mt-0{margin-top:var(--spacing-00)}.nu-u-mb-0{margin-bottom:var(--spacing-00)}.nu-u-m-0{margin:var(--spacing-00)}.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-px-0{padding-inline:var(--spacing-00)}.nu-u-py-0{padding-block:var(--spacing-00)}.nu-u-ps-0{padding-left:var(--spacing-00)}.nu-u-pe-0{padding-right:var(--spacing-00)}.nu-u-pt-0{padding-top:var(--spacing-00)}.nu-u-pb-0{padding-bottom:var(--spacing-00)}.nu-u-p-0{padding:var(--spacing-00)}.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}
|
|
1
|
+
:root{--spacing:.125rem;--spacing-00:0px;--spacing-01:var(--spacing);--spacing-02:calc(var(--spacing)*2);--spacing-03:calc(var(--spacing)*3);--spacing-04:calc(var(--spacing)*4);--spacing-05:calc(var(--spacing)*6);--spacing-06:calc(var(--spacing)*8);--spacing-07:calc(var(--spacing)*10);--spacing-08:calc(var(--spacing)*12);--spacing-09:calc(var(--spacing)*16);--spacing-10:calc(var(--spacing)*20);--spacing-11:calc(var(--spacing)*24);--spacing-12:calc(var(--spacing)*28);--spacing-13:calc(var(--spacing)*32);--spacing-14:calc(var(--spacing)*36);--spacing-15:calc(var(--spacing)*40);--spacing-16:calc(var(--spacing)*48);--spacing-17:calc(var(--spacing)*60);--spacing-18:calc(var(--spacing)*80);--spacing-zero:var(--spacing-00);--spacing-xs:var(--spacing-02);--spacing-s:var(--spacing-04);--spacing-m:var(--spacing-05);--spacing-l:var(--spacing-06);--spacing-xl:var(--spacing-08);--spacing-xxl:var(--spacing-09);--spacing-xxxl:var(--spacing-11);--size-xs:var(--spacing-06);--size-s:var(--spacing-08);--size-m:var(--spacing-09);--controls-size-default:var(--spacing-09);--controls-size-small:var(--spacing-08)}.nu-u-mx-auto{margin-inline:auto}.nu-u-me-auto{margin-right:auto}.nu-u-ms-auto{margin-left:auto}.nu-u-m-zero{margin:var(--spacing-zero)}.nu-u-m-xs{margin:var(--spacing-xs)}.nu-u-m-s{margin:var(--spacing-s)}.nu-u-m-m{margin:var(--spacing-m)}.nu-u-m-l{margin:var(--spacing-l)}.nu-u-m-xl{margin:var(--spacing-xl)}.nu-u-m-xxl{margin:var(--spacing-xxl)}.nu-u-m-xxxl{margin:var(--spacing-xxxl)}.nu-u-mt-zero{margin-top:var(--spacing-zero)}.nu-u-mt-xs{margin-top:var(--spacing-xs)}.nu-u-mt-s{margin-top:var(--spacing-s)}.nu-u-mt-m{margin-top:var(--spacing-m)}.nu-u-mt-l{margin-top:var(--spacing-l)}.nu-u-mt-xl{margin-top:var(--spacing-xl)}.nu-u-mt-xxl{margin-top:var(--spacing-xxl)}.nu-u-mt-xxxl{margin-top:var(--spacing-xxxl)}.nu-u-mb-zero{margin-bottom:var(--spacing-zero)}.nu-u-mb-xs{margin-bottom:var(--spacing-xs)}.nu-u-mb-s{margin-bottom:var(--spacing-s)}.nu-u-mb-m{margin-bottom:var(--spacing-m)}.nu-u-mb-l{margin-bottom:var(--spacing-l)}.nu-u-mb-xl{margin-bottom:var(--spacing-xl)}.nu-u-mb-xxl{margin-bottom:var(--spacing-xxl)}.nu-u-mb-xxxl{margin-bottom:var(--spacing-xxxl)}.nu-u-ms-zero{margin-left:var(--spacing-zero)}.nu-u-ms-xs{margin-left:var(--spacing-xs)}.nu-u-ms-s{margin-left:var(--spacing-s)}.nu-u-ms-m{margin-left:var(--spacing-m)}.nu-u-ms-l{margin-left:var(--spacing-l)}.nu-u-ms-xl{margin-left:var(--spacing-xl)}.nu-u-ms-xxl{margin-left:var(--spacing-xxl)}.nu-u-ms-xxxl{margin-left:var(--spacing-xxxl)}.nu-u-me-zero{margin-right:var(--spacing-zero)}.nu-u-me-xs{margin-right:var(--spacing-xs)}.nu-u-me-s{margin-right:var(--spacing-s)}.nu-u-me-m{margin-right:var(--spacing-m)}.nu-u-me-l{margin-right:var(--spacing-l)}.nu-u-me-xl{margin-right:var(--spacing-xl)}.nu-u-me-xxl{margin-right:var(--spacing-xxl)}.nu-u-me-xxxl{margin-right:var(--spacing-xxxl)}.nu-u-mx-zero{margin-inline:var(--spacing-zero)}.nu-u-mx-xs{margin-inline:var(--spacing-xs)}.nu-u-mx-s{margin-inline:var(--spacing-s)}.nu-u-mx-m{margin-inline:var(--spacing-m)}.nu-u-mx-l{margin-inline:var(--spacing-l)}.nu-u-mx-xl{margin-inline:var(--spacing-xl)}.nu-u-mx-xxl{margin-inline:var(--spacing-xxl)}.nu-u-mx-xxxl{margin-inline:var(--spacing-xxxl)}.nu-u-my-zero{margin-block:var(--spacing-zero)}.nu-u-my-xs{margin-block:var(--spacing-xs)}.nu-u-my-s{margin-block:var(--spacing-s)}.nu-u-my-m{margin-block:var(--spacing-m)}.nu-u-my-l{margin-block:var(--spacing-l)}.nu-u-my-xl{margin-block:var(--spacing-xl)}.nu-u-my-xxl{margin-block:var(--spacing-xxl)}.nu-u-my-xxxl{margin-block:var(--spacing-xxxl)}.nu-u-p-zero{padding:var(--spacing-zero)}.nu-u-p-xs{padding:var(--spacing-xs)}.nu-u-p-s{padding:var(--spacing-s)}.nu-u-p-m{padding:var(--spacing-m)}.nu-u-p-l{padding:var(--spacing-l)}.nu-u-p-xl{padding:var(--spacing-xl)}.nu-u-p-xxl{padding:var(--spacing-xxl)}.nu-u-p-xxxl{padding:var(--spacing-xxxl)}.nu-u-pt-zero{padding-top:var(--spacing-zero)}.nu-u-pt-xs{padding-top:var(--spacing-xs)}.nu-u-pt-s{padding-top:var(--spacing-s)}.nu-u-pt-m{padding-top:var(--spacing-m)}.nu-u-pt-l{padding-top:var(--spacing-l)}.nu-u-pt-xl{padding-top:var(--spacing-xl)}.nu-u-pt-xxl{padding-top:var(--spacing-xxl)}.nu-u-pt-xxxl{padding-top:var(--spacing-xxxl)}.nu-u-pb-zero{padding-bottom:var(--spacing-zero)}.nu-u-pb-xs{padding-bottom:var(--spacing-xs)}.nu-u-pb-s{padding-bottom:var(--spacing-s)}.nu-u-pb-m{padding-bottom:var(--spacing-m)}.nu-u-pb-l{padding-bottom:var(--spacing-l)}.nu-u-pb-xl{padding-bottom:var(--spacing-xl)}.nu-u-pb-xxl{padding-bottom:var(--spacing-xxl)}.nu-u-pb-xxxl{padding-bottom:var(--spacing-xxxl)}.nu-u-ps-zero{padding-left:var(--spacing-zero)}.nu-u-ps-xs{padding-left:var(--spacing-xs)}.nu-u-ps-s{padding-left:var(--spacing-s)}.nu-u-ps-m{padding-left:var(--spacing-m)}.nu-u-ps-l{padding-left:var(--spacing-l)}.nu-u-ps-xl{padding-left:var(--spacing-xl)}.nu-u-ps-xxl{padding-left:var(--spacing-xxl)}.nu-u-ps-xxxl{padding-left:var(--spacing-xxxl)}.nu-u-pe-zero{padding-right:var(--spacing-zero)}.nu-u-pe-xs{padding-right:var(--spacing-xs)}.nu-u-pe-s{padding-right:var(--spacing-s)}.nu-u-pe-m{padding-right:var(--spacing-m)}.nu-u-pe-l{padding-right:var(--spacing-l)}.nu-u-pe-xl{padding-right:var(--spacing-xl)}.nu-u-pe-xxl{padding-right:var(--spacing-xxl)}.nu-u-pe-xxxl{padding-right:var(--spacing-xxxl)}.nu-u-px-zero{padding-inline:var(--spacing-zero)}.nu-u-px-xs{padding-inline:var(--spacing-xs)}.nu-u-px-s{padding-inline:var(--spacing-s)}.nu-u-px-m{padding-inline:var(--spacing-m)}.nu-u-px-l{padding-inline:var(--spacing-l)}.nu-u-px-xl{padding-inline:var(--spacing-xl)}.nu-u-px-xxl{padding-inline:var(--spacing-xxl)}.nu-u-px-xxxl{padding-inline:var(--spacing-xxxl)}.nu-u-py-zero{padding-block:var(--spacing-zero)}.nu-u-py-xs{padding-block:var(--spacing-xs)}.nu-u-py-s{padding-block:var(--spacing-s)}.nu-u-py-m{padding-block:var(--spacing-m)}.nu-u-py-l{padding-block:var(--spacing-l)}.nu-u-py-xl{padding-block:var(--spacing-xl)}.nu-u-py-xxl{padding-block:var(--spacing-xxl)}.nu-u-py-xxxl{padding-block:var(--spacing-xxxl)}.nu-c-spacer-zero{height:var(--spacing-zero);display:block}.nu-c-spacer-xs{height:var(--spacing-xs);display:block}.nu-c-spacer-s{height:var(--spacing-s);display:block}.nu-c-spacer-m{height:var(--spacing-m);display:block}.nu-c-spacer-l{height:var(--spacing-l);display:block}.nu-c-spacer-xl{height:var(--spacing-xl);display:block}.nu-c-spacer-xxl{height:var(--spacing-xxl);display:block}.nu-c-spacer-xxxl{height:var(--spacing-xxxl);display:block}
|
|
2
2
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"ACAA,qrBCCA,iCACA,gCACA,+BAEA,2CACA,0CACA,yCACA,0CACA,wCACA,2CACA,mCAEA,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,4CACA,2CACA,0CACA,2CACA,yCACA,4CACA,oCAEA,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,4CC1QA,sDACA,sDACA,sDACA,sDACA,sDACA,sDACA,sDACA,sDACA,sDACA,uDACA,uDACA,uDACA,uDACA,uDACA,uDACA,uDACA,uDACA","sources":["index.css","src/_variables.scss","src/_utilities.scss","src/_components.scss"],"sourcesContent":[":root {\n --spacing: .125rem;\n --spacing-00: 0px;\n --spacing-01: var(--spacing);\n --spacing-02: calc(var(--spacing) * 2);\n --spacing-03: calc(var(--spacing) * 3);\n --spacing-04: calc(var(--spacing) * 4);\n --spacing-05: calc(var(--spacing) * 6);\n --spacing-06: calc(var(--spacing) * 8);\n --spacing-07: calc(var(--spacing) * 10);\n --spacing-08: calc(var(--spacing) * 12);\n --spacing-09: calc(var(--spacing) * 16);\n --spacing-10: calc(var(--spacing) * 20);\n --spacing-11: calc(var(--spacing) * 24);\n --spacing-12: calc(var(--spacing) * 28);\n --spacing-13: calc(var(--spacing) * 32);\n --spacing-14: calc(var(--spacing) * 36);\n --spacing-15: calc(var(--spacing) * 40);\n --spacing-16: calc(var(--spacing) * 48);\n --spacing-17: calc(var(--spacing) * 60);\n --spacing-18: calc(var(--spacing) * 80);\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-mx-0 {\n margin-inline: var(--spacing-00);\n}\n\n.nu-u-my-0 {\n margin-block: var(--spacing-00);\n}\n\n.nu-u-ms-0 {\n margin-left: var(--spacing-00);\n}\n\n.nu-u-me-0 {\n margin-right: var(--spacing-00);\n}\n\n.nu-u-mt-0 {\n margin-top: var(--spacing-00);\n}\n\n.nu-u-mb-0 {\n margin-bottom: var(--spacing-00);\n}\n\n.nu-u-m-0 {\n margin: var(--spacing-00);\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-px-0 {\n padding-inline: var(--spacing-00);\n}\n\n.nu-u-py-0 {\n padding-block: var(--spacing-00);\n}\n\n.nu-u-ps-0 {\n padding-left: var(--spacing-00);\n}\n\n.nu-u-pe-0 {\n padding-right: var(--spacing-00);\n}\n\n.nu-u-pt-0 {\n padding-top: var(--spacing-00);\n}\n\n.nu-u-pb-0 {\n padding-bottom: var(--spacing-00);\n}\n\n.nu-u-p-0 {\n padding: var(--spacing-00);\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/*# sourceMappingURL=index.css.map */\n",":root {\n --spacing: 0.125rem;\n \n --spacing-00: 0px; /* 0rem */\n --spacing-01: var(--spacing); /* 0.125rem */\n --spacing-02: calc(var(--spacing) * 2); /* 0.25rem */\n --spacing-03: calc(var(--spacing) * 3); /* 0.375rem */\n --spacing-04: calc(var(--spacing) * 4); /* 0.5rem */\n --spacing-05: calc(var(--spacing) * 6); /* 0.75rem */\n --spacing-06: calc(var(--spacing) * 8); /* 1rem */\n --spacing-07: calc(var(--spacing) * 10); /* 1.25rem */\n --spacing-08: calc(var(--spacing) * 12); /* 1.5rem */\n --spacing-09: calc(var(--spacing) * 16); /* 2rem */\n --spacing-10: calc(var(--spacing) * 20); /* 2.5rem */\n --spacing-11: calc(var(--spacing) * 24); /* 3rem */\n --spacing-12: calc(var(--spacing) * 28); /* 3.5rem */\n --spacing-13: calc(var(--spacing) * 32); /* 4rem */\n --spacing-14: calc(var(--spacing) * 36); /* 4.5rem */\n --spacing-15: calc(var(--spacing) * 40); /* 5rem */\n --spacing-16: calc(var(--spacing) * 48); /* 6rem */\n --spacing-17: calc(var(--spacing) * 60); /* 7.5rem */\n --spacing-18: calc(var(--spacing) * 80); /* 10rem */\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-mx-0 {margin-inline: var(--spacing-00);}\n.nu-u-my-0 {margin-block: var(--spacing-00);}\n.nu-u-ms-0 {margin-left: var(--spacing-00);}\n.nu-u-me-0 {margin-right: var(--spacing-00);}\n.nu-u-mt-0 {margin-top: var(--spacing-00);}\n.nu-u-mb-0 {margin-bottom: var(--spacing-00);}\n.nu-u-m-0 {margin: var(--spacing-00);}\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-px-0 {padding-inline: var(--spacing-00);}\n.nu-u-py-0 {padding-block: var(--spacing-00);}\n.nu-u-ps-0 {padding-left: var(--spacing-00);}\n.nu-u-pe-0 {padding-right: var(--spacing-00);}\n.nu-u-pt-0 {padding-top: var(--spacing-00);}\n.nu-u-pb-0 {padding-bottom: var(--spacing-00);}\n.nu-u-p-0 {padding: var(--spacing-00);}\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"}
|
|
1
|
+
{"mappings":"ACAA,mlCCkBA,iCACA,gCACA,+BAfE,wCAGA,oCACA,kCACA,kCACA,kCACA,oCACA,sCACA,wCATA,6CAGA,yCACA,uCACA,uCACA,uCACA,yCACA,2CACA,6CATA,gDAGA,4CACA,0CACA,0CACA,0CACA,4CACA,8CACA,gDATA,8CAGA,0CACA,wCACA,wCACA,wCACA,0CACA,4CACA,8CATA,+CAGA,2CACA,yCACA,yCACA,yCACA,2CACA,6CACA,+CATA,gDAGA,4CACA,0CACA,0CACA,0CACA,4CACA,8CACA,gDATA,+CAGA,2CACA,yCACA,yCACA,yCACA,2CACA,6CACA,+CATA,yCAGA,qCACA,mCACA,mCACA,mCACA,qCACA,uCACA,yCATA,8CAGA,0CACA,wCACA,wCACA,wCACA,0CACA,4CACA,8CATA,iDAGA,6CACA,2CACA,2CACA,2CACA,6CACA,+CACA,iDATA,+CAGA,2CACA,yCACA,yCACA,yCACA,2CACA,6CACA,+CATA,gDAGA,4CACA,0CACA,0CACA,0CACA,4CACA,8CACA,gDATA,iDAGA,6CACA,2CACA,2CACA,2CACA,6CACA,+CACA,iDATA,gDAGA,4CACA,0CACA,0CACA,0CACA,4CACA,8CACA,gDCZF,2DACA,uDACA,qDACA,qDACA,qDACA,uDACA,yDACA","sources":["index.css","src/_variables.scss","src/_utilities.scss","src/_components.scss"],"sourcesContent":[":root {\n --spacing: .125rem;\n --spacing-00: 0px;\n --spacing-01: var(--spacing);\n --spacing-02: calc(var(--spacing) * 2);\n --spacing-03: calc(var(--spacing) * 3);\n --spacing-04: calc(var(--spacing) * 4);\n --spacing-05: calc(var(--spacing) * 6);\n --spacing-06: calc(var(--spacing) * 8);\n --spacing-07: calc(var(--spacing) * 10);\n --spacing-08: calc(var(--spacing) * 12);\n --spacing-09: calc(var(--spacing) * 16);\n --spacing-10: calc(var(--spacing) * 20);\n --spacing-11: calc(var(--spacing) * 24);\n --spacing-12: calc(var(--spacing) * 28);\n --spacing-13: calc(var(--spacing) * 32);\n --spacing-14: calc(var(--spacing) * 36);\n --spacing-15: calc(var(--spacing) * 40);\n --spacing-16: calc(var(--spacing) * 48);\n --spacing-17: calc(var(--spacing) * 60);\n --spacing-18: calc(var(--spacing) * 80);\n --spacing-zero: var(--spacing-00);\n --spacing-xs: var(--spacing-02);\n --spacing-s: var(--spacing-04);\n --spacing-m: var(--spacing-05);\n --spacing-l: var(--spacing-06);\n --spacing-xl: var(--spacing-08);\n --spacing-xxl: var(--spacing-09);\n --spacing-xxxl: var(--spacing-11);\n --size-xs: var(--spacing-06);\n --size-s: var(--spacing-08);\n --size-m: var(--spacing-09);\n --controls-size-default: var(--spacing-09);\n --controls-size-small: var(--spacing-08);\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-m-zero {\n margin: var(--spacing-zero);\n}\n\n.nu-u-m-xs {\n margin: var(--spacing-xs);\n}\n\n.nu-u-m-s {\n margin: var(--spacing-s);\n}\n\n.nu-u-m-m {\n margin: var(--spacing-m);\n}\n\n.nu-u-m-l {\n margin: var(--spacing-l);\n}\n\n.nu-u-m-xl {\n margin: var(--spacing-xl);\n}\n\n.nu-u-m-xxl {\n margin: var(--spacing-xxl);\n}\n\n.nu-u-m-xxxl {\n margin: var(--spacing-xxxl);\n}\n\n.nu-u-mt-zero {\n margin-top: var(--spacing-zero);\n}\n\n.nu-u-mt-xs {\n margin-top: var(--spacing-xs);\n}\n\n.nu-u-mt-s {\n margin-top: var(--spacing-s);\n}\n\n.nu-u-mt-m {\n margin-top: var(--spacing-m);\n}\n\n.nu-u-mt-l {\n margin-top: var(--spacing-l);\n}\n\n.nu-u-mt-xl {\n margin-top: var(--spacing-xl);\n}\n\n.nu-u-mt-xxl {\n margin-top: var(--spacing-xxl);\n}\n\n.nu-u-mt-xxxl {\n margin-top: var(--spacing-xxxl);\n}\n\n.nu-u-mb-zero {\n margin-bottom: var(--spacing-zero);\n}\n\n.nu-u-mb-xs {\n margin-bottom: var(--spacing-xs);\n}\n\n.nu-u-mb-s {\n margin-bottom: var(--spacing-s);\n}\n\n.nu-u-mb-m {\n margin-bottom: var(--spacing-m);\n}\n\n.nu-u-mb-l {\n margin-bottom: var(--spacing-l);\n}\n\n.nu-u-mb-xl {\n margin-bottom: var(--spacing-xl);\n}\n\n.nu-u-mb-xxl {\n margin-bottom: var(--spacing-xxl);\n}\n\n.nu-u-mb-xxxl {\n margin-bottom: var(--spacing-xxxl);\n}\n\n.nu-u-ms-zero {\n margin-left: var(--spacing-zero);\n}\n\n.nu-u-ms-xs {\n margin-left: var(--spacing-xs);\n}\n\n.nu-u-ms-s {\n margin-left: var(--spacing-s);\n}\n\n.nu-u-ms-m {\n margin-left: var(--spacing-m);\n}\n\n.nu-u-ms-l {\n margin-left: var(--spacing-l);\n}\n\n.nu-u-ms-xl {\n margin-left: var(--spacing-xl);\n}\n\n.nu-u-ms-xxl {\n margin-left: var(--spacing-xxl);\n}\n\n.nu-u-ms-xxxl {\n margin-left: var(--spacing-xxxl);\n}\n\n.nu-u-me-zero {\n margin-right: var(--spacing-zero);\n}\n\n.nu-u-me-xs {\n margin-right: var(--spacing-xs);\n}\n\n.nu-u-me-s {\n margin-right: var(--spacing-s);\n}\n\n.nu-u-me-m {\n margin-right: var(--spacing-m);\n}\n\n.nu-u-me-l {\n margin-right: var(--spacing-l);\n}\n\n.nu-u-me-xl {\n margin-right: var(--spacing-xl);\n}\n\n.nu-u-me-xxl {\n margin-right: var(--spacing-xxl);\n}\n\n.nu-u-me-xxxl {\n margin-right: var(--spacing-xxxl);\n}\n\n.nu-u-mx-zero {\n margin-inline: var(--spacing-zero);\n}\n\n.nu-u-mx-xs {\n margin-inline: var(--spacing-xs);\n}\n\n.nu-u-mx-s {\n margin-inline: var(--spacing-s);\n}\n\n.nu-u-mx-m {\n margin-inline: var(--spacing-m);\n}\n\n.nu-u-mx-l {\n margin-inline: var(--spacing-l);\n}\n\n.nu-u-mx-xl {\n margin-inline: var(--spacing-xl);\n}\n\n.nu-u-mx-xxl {\n margin-inline: var(--spacing-xxl);\n}\n\n.nu-u-mx-xxxl {\n margin-inline: var(--spacing-xxxl);\n}\n\n.nu-u-my-zero {\n margin-block: var(--spacing-zero);\n}\n\n.nu-u-my-xs {\n margin-block: var(--spacing-xs);\n}\n\n.nu-u-my-s {\n margin-block: var(--spacing-s);\n}\n\n.nu-u-my-m {\n margin-block: var(--spacing-m);\n}\n\n.nu-u-my-l {\n margin-block: var(--spacing-l);\n}\n\n.nu-u-my-xl {\n margin-block: var(--spacing-xl);\n}\n\n.nu-u-my-xxl {\n margin-block: var(--spacing-xxl);\n}\n\n.nu-u-my-xxxl {\n margin-block: var(--spacing-xxxl);\n}\n\n.nu-u-p-zero {\n padding: var(--spacing-zero);\n}\n\n.nu-u-p-xs {\n padding: var(--spacing-xs);\n}\n\n.nu-u-p-s {\n padding: var(--spacing-s);\n}\n\n.nu-u-p-m {\n padding: var(--spacing-m);\n}\n\n.nu-u-p-l {\n padding: var(--spacing-l);\n}\n\n.nu-u-p-xl {\n padding: var(--spacing-xl);\n}\n\n.nu-u-p-xxl {\n padding: var(--spacing-xxl);\n}\n\n.nu-u-p-xxxl {\n padding: var(--spacing-xxxl);\n}\n\n.nu-u-pt-zero {\n padding-top: var(--spacing-zero);\n}\n\n.nu-u-pt-xs {\n padding-top: var(--spacing-xs);\n}\n\n.nu-u-pt-s {\n padding-top: var(--spacing-s);\n}\n\n.nu-u-pt-m {\n padding-top: var(--spacing-m);\n}\n\n.nu-u-pt-l {\n padding-top: var(--spacing-l);\n}\n\n.nu-u-pt-xl {\n padding-top: var(--spacing-xl);\n}\n\n.nu-u-pt-xxl {\n padding-top: var(--spacing-xxl);\n}\n\n.nu-u-pt-xxxl {\n padding-top: var(--spacing-xxxl);\n}\n\n.nu-u-pb-zero {\n padding-bottom: var(--spacing-zero);\n}\n\n.nu-u-pb-xs {\n padding-bottom: var(--spacing-xs);\n}\n\n.nu-u-pb-s {\n padding-bottom: var(--spacing-s);\n}\n\n.nu-u-pb-m {\n padding-bottom: var(--spacing-m);\n}\n\n.nu-u-pb-l {\n padding-bottom: var(--spacing-l);\n}\n\n.nu-u-pb-xl {\n padding-bottom: var(--spacing-xl);\n}\n\n.nu-u-pb-xxl {\n padding-bottom: var(--spacing-xxl);\n}\n\n.nu-u-pb-xxxl {\n padding-bottom: var(--spacing-xxxl);\n}\n\n.nu-u-ps-zero {\n padding-left: var(--spacing-zero);\n}\n\n.nu-u-ps-xs {\n padding-left: var(--spacing-xs);\n}\n\n.nu-u-ps-s {\n padding-left: var(--spacing-s);\n}\n\n.nu-u-ps-m {\n padding-left: var(--spacing-m);\n}\n\n.nu-u-ps-l {\n padding-left: var(--spacing-l);\n}\n\n.nu-u-ps-xl {\n padding-left: var(--spacing-xl);\n}\n\n.nu-u-ps-xxl {\n padding-left: var(--spacing-xxl);\n}\n\n.nu-u-ps-xxxl {\n padding-left: var(--spacing-xxxl);\n}\n\n.nu-u-pe-zero {\n padding-right: var(--spacing-zero);\n}\n\n.nu-u-pe-xs {\n padding-right: var(--spacing-xs);\n}\n\n.nu-u-pe-s {\n padding-right: var(--spacing-s);\n}\n\n.nu-u-pe-m {\n padding-right: var(--spacing-m);\n}\n\n.nu-u-pe-l {\n padding-right: var(--spacing-l);\n}\n\n.nu-u-pe-xl {\n padding-right: var(--spacing-xl);\n}\n\n.nu-u-pe-xxl {\n padding-right: var(--spacing-xxl);\n}\n\n.nu-u-pe-xxxl {\n padding-right: var(--spacing-xxxl);\n}\n\n.nu-u-px-zero {\n padding-inline: var(--spacing-zero);\n}\n\n.nu-u-px-xs {\n padding-inline: var(--spacing-xs);\n}\n\n.nu-u-px-s {\n padding-inline: var(--spacing-s);\n}\n\n.nu-u-px-m {\n padding-inline: var(--spacing-m);\n}\n\n.nu-u-px-l {\n padding-inline: var(--spacing-l);\n}\n\n.nu-u-px-xl {\n padding-inline: var(--spacing-xl);\n}\n\n.nu-u-px-xxl {\n padding-inline: var(--spacing-xxl);\n}\n\n.nu-u-px-xxxl {\n padding-inline: var(--spacing-xxxl);\n}\n\n.nu-u-py-zero {\n padding-block: var(--spacing-zero);\n}\n\n.nu-u-py-xs {\n padding-block: var(--spacing-xs);\n}\n\n.nu-u-py-s {\n padding-block: var(--spacing-s);\n}\n\n.nu-u-py-m {\n padding-block: var(--spacing-m);\n}\n\n.nu-u-py-l {\n padding-block: var(--spacing-l);\n}\n\n.nu-u-py-xl {\n padding-block: var(--spacing-xl);\n}\n\n.nu-u-py-xxl {\n padding-block: var(--spacing-xxl);\n}\n\n.nu-u-py-xxxl {\n padding-block: var(--spacing-xxxl);\n}\n\n.nu-c-spacer-zero {\n height: var(--spacing-zero);\n display: block;\n}\n\n.nu-c-spacer-xs {\n height: var(--spacing-xs);\n display: block;\n}\n\n.nu-c-spacer-s {\n height: var(--spacing-s);\n display: block;\n}\n\n.nu-c-spacer-m {\n height: var(--spacing-m);\n display: block;\n}\n\n.nu-c-spacer-l {\n height: var(--spacing-l);\n display: block;\n}\n\n.nu-c-spacer-xl {\n height: var(--spacing-xl);\n display: block;\n}\n\n.nu-c-spacer-xxl {\n height: var(--spacing-xxl);\n display: block;\n}\n\n.nu-c-spacer-xxxl {\n height: var(--spacing-xxxl);\n display: block;\n}\n/*# sourceMappingURL=index.css.map */\n",":root {\n --spacing: 0.125rem;\n \n // Base spacing scale (original scale for internal use)\n --spacing-00: 0px; /* 0rem */\n --spacing-01: var(--spacing); /* 0.125rem */\n --spacing-02: calc(var(--spacing) * 2); /* 0.25rem / 4px */\n --spacing-03: calc(var(--spacing) * 3); /* 0.375rem */\n --spacing-04: calc(var(--spacing) * 4); /* 0.5rem / 8px */\n --spacing-05: calc(var(--spacing) * 6); /* 0.75rem / 12px */\n --spacing-06: calc(var(--spacing) * 8); /* 1rem / 16px */\n --spacing-07: calc(var(--spacing) * 10); /* 1.25rem */\n --spacing-08: calc(var(--spacing) * 12); /* 1.5rem / 24px */\n --spacing-09: calc(var(--spacing) * 16); /* 2rem / 32px */\n --spacing-10: calc(var(--spacing) * 20); /* 2.5rem */\n --spacing-11: calc(var(--spacing) * 24); /* 3rem / 48px */\n --spacing-12: calc(var(--spacing) * 28); /* 3.5rem / 56px */\n --spacing-13: calc(var(--spacing) * 32); /* 4rem */\n --spacing-14: calc(var(--spacing) * 36); /* 4.5rem */\n --spacing-15: calc(var(--spacing) * 40); /* 5rem */\n --spacing-16: calc(var(--spacing) * 48); /* 6rem */\n --spacing-17: calc(var(--spacing) * 60); /* 7.5rem */\n --spacing-18: calc(var(--spacing) * 80); /* 10rem */\n \n // Semantic spacing tokens\n --spacing-zero: var(--spacing-00);\n --spacing-xs: var(--spacing-02);\n --spacing-s: var(--spacing-04);\n --spacing-m: var(--spacing-05);\n --spacing-l: var(--spacing-06);\n --spacing-xl: var(--spacing-08);\n --spacing-xxl: var(--spacing-09);\n --spacing-xxxl: var(--spacing-11);\n \n // Semantic sizing tokens\n --size-xs: var(--spacing-06);\n --size-s: var(--spacing-08);\n --size-m: var(--spacing-09);\n --controls-size-default: var(--spacing-09);\n --controls-size-small: var(--spacing-08);\n}","@use 'variables' as *;\n\n// Semantic spacing utilities\n@mixin spacing-utilities($property, $prefix) {\n // Zero\n .nu-u-#{$prefix}-zero { #{$property}: var(--spacing-zero); }\n \n // Semantic spacing scale\n .nu-u-#{$prefix}-xs { #{$property}: var(--spacing-xs); }\n .nu-u-#{$prefix}-s { #{$property}: var(--spacing-s); }\n .nu-u-#{$prefix}-m { #{$property}: var(--spacing-m); }\n .nu-u-#{$prefix}-l { #{$property}: var(--spacing-l); }\n .nu-u-#{$prefix}-xl { #{$property}: var(--spacing-xl); }\n .nu-u-#{$prefix}-xxl { #{$property}: var(--spacing-xxl); }\n .nu-u-#{$prefix}-xxxl { #{$property}: var(--spacing-xxxl); }\n}\n\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// Margin - All sides\n@include spacing-utilities(margin, 'm');\n\n// Margin - Top\n@include spacing-utilities(margin-top, 'mt');\n\n// Margin - Bottom\n@include spacing-utilities(margin-bottom, 'mb');\n\n// Margin - Left\n@include spacing-utilities(margin-left, 'ms');\n\n// Margin - Right\n@include spacing-utilities(margin-right, 'me');\n\n// Margin - Inline (left & right)\n@include spacing-utilities(margin-inline, 'mx');\n\n// Margin - Block (top & bottom)\n@include spacing-utilities(margin-block, 'my');\n\n// Padding - All sides\n@include spacing-utilities(padding, 'p');\n\n// Padding - Top\n@include spacing-utilities(padding-top, 'pt');\n\n// Padding - Bottom\n@include spacing-utilities(padding-bottom, 'pb');\n\n// Padding - Left\n@include spacing-utilities(padding-left, 'ps');\n\n// Padding - Right\n@include spacing-utilities(padding-right, 'pe');\n\n// Padding - Inline (left & right)\n@include spacing-utilities(padding-inline, 'px');\n\n// Padding - Block (top & bottom)\n@include spacing-utilities(padding-block, 'py');","// Spacer blocks\n\n.nu-c-spacer-zero { display: block; height: var(--spacing-zero); }\n.nu-c-spacer-xs { display: block; height: var(--spacing-xs); }\n.nu-c-spacer-s { display: block; height: var(--spacing-s); }\n.nu-c-spacer-m { display: block; height: var(--spacing-m); }\n.nu-c-spacer-l { display: block; height: var(--spacing-l); }\n.nu-c-spacer-xl { display: block; height: var(--spacing-xl); }\n.nu-c-spacer-xxl { display: block; height: var(--spacing-xxl); }\n.nu-c-spacer-xxxl { display: block; height: var(--spacing-xxxl); }"],"names":[],"version":3,"file":"index.css.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@new-ui/spacings",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.7",
|
|
4
4
|
"description": "Spacing blocks",
|
|
5
5
|
"source": "src/index.scss",
|
|
6
6
|
"main": "dist/index.css",
|
|
@@ -37,9 +37,9 @@
|
|
|
37
37
|
},
|
|
38
38
|
"homepage": "https://github.com/NewDesignFile/foundations#readme",
|
|
39
39
|
"devDependencies": {
|
|
40
|
-
"@parcel/transformer-css": "^2.
|
|
41
|
-
"@parcel/transformer-sass": "^2.
|
|
42
|
-
"autoprefixer": "^10.4.
|
|
43
|
-
"parcel": "^2.
|
|
40
|
+
"@parcel/transformer-css": "^2.16.1",
|
|
41
|
+
"@parcel/transformer-sass": "^2.16.1",
|
|
42
|
+
"autoprefixer": "^10.4.22",
|
|
43
|
+
"parcel": "^2.16.1"
|
|
44
44
|
}
|
|
45
45
|
}
|
package/src/_components.scss
CHANGED
|
@@ -1,20 +1,10 @@
|
|
|
1
|
-
// Spacer blocks
|
|
1
|
+
// Spacer blocks
|
|
2
2
|
|
|
3
|
-
.nu-c-spacer-
|
|
4
|
-
.nu-c-spacer-
|
|
5
|
-
.nu-c-spacer-
|
|
6
|
-
.nu-c-spacer-
|
|
7
|
-
.nu-c-spacer-
|
|
8
|
-
.nu-c-spacer-
|
|
9
|
-
.nu-c-spacer-
|
|
10
|
-
.nu-c-spacer-
|
|
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);}
|
|
3
|
+
.nu-c-spacer-zero { display: block; height: var(--spacing-zero); }
|
|
4
|
+
.nu-c-spacer-xs { display: block; height: var(--spacing-xs); }
|
|
5
|
+
.nu-c-spacer-s { display: block; height: var(--spacing-s); }
|
|
6
|
+
.nu-c-spacer-m { display: block; height: var(--spacing-m); }
|
|
7
|
+
.nu-c-spacer-l { display: block; height: var(--spacing-l); }
|
|
8
|
+
.nu-c-spacer-xl { display: block; height: var(--spacing-xl); }
|
|
9
|
+
.nu-c-spacer-xxl { display: block; height: var(--spacing-xxl); }
|
|
10
|
+
.nu-c-spacer-xxxl { display: block; height: var(--spacing-xxxl); }
|
package/src/_utilities.scss
CHANGED
|
@@ -1,269 +1,63 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
.nu-u-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
.nu-u-
|
|
10
|
-
.nu-u-
|
|
11
|
-
.nu-u-
|
|
12
|
-
.nu-u-
|
|
1
|
+
@use 'variables' as *;
|
|
2
|
+
|
|
3
|
+
// Semantic spacing utilities
|
|
4
|
+
@mixin spacing-utilities($property, $prefix) {
|
|
5
|
+
// Zero
|
|
6
|
+
.nu-u-#{$prefix}-zero { #{$property}: var(--spacing-zero); }
|
|
7
|
+
|
|
8
|
+
// Semantic spacing scale
|
|
9
|
+
.nu-u-#{$prefix}-xs { #{$property}: var(--spacing-xs); }
|
|
10
|
+
.nu-u-#{$prefix}-s { #{$property}: var(--spacing-s); }
|
|
11
|
+
.nu-u-#{$prefix}-m { #{$property}: var(--spacing-m); }
|
|
12
|
+
.nu-u-#{$prefix}-l { #{$property}: var(--spacing-l); }
|
|
13
|
+
.nu-u-#{$prefix}-xl { #{$property}: var(--spacing-xl); }
|
|
14
|
+
.nu-u-#{$prefix}-xxl { #{$property}: var(--spacing-xxl); }
|
|
15
|
+
.nu-u-#{$prefix}-xxxl { #{$property}: var(--spacing-xxxl); }
|
|
16
|
+
}
|
|
13
17
|
|
|
14
|
-
|
|
15
|
-
.nu-u-
|
|
16
|
-
.nu-u-
|
|
17
|
-
.nu-u-
|
|
18
|
-
.nu-u-mt-5 { margin-top: var(--spacing-05);}
|
|
19
|
-
.nu-u-mt-6 { margin-top: var(--spacing-06);}
|
|
20
|
-
.nu-u-mt-7 { margin-top: var(--spacing-07);}
|
|
21
|
-
.nu-u-mt-8 { margin-top: var(--spacing-08);}
|
|
22
|
-
.nu-u-mt-9 { margin-top: var(--spacing-09);}
|
|
23
|
-
.nu-u-mt-10 { margin-top: var(--spacing-10);}
|
|
24
|
-
.nu-u-mt-11 { margin-top: var(--spacing-11);}
|
|
25
|
-
.nu-u-mt-12 { margin-top: var(--spacing-12);}
|
|
26
|
-
.nu-u-mt-13 { margin-top: var(--spacing-13);}
|
|
27
|
-
.nu-u-mt-14 { margin-top: var(--spacing-14);}
|
|
28
|
-
.nu-u-mt-15 { margin-top: var(--spacing-15);}
|
|
29
|
-
.nu-u-mt-16 { margin-top: var(--spacing-16);}
|
|
30
|
-
.nu-u-mt-17 { margin-top: var(--spacing-17);}
|
|
31
|
-
.nu-u-mt-18 { margin-top: var(--spacing-18);}
|
|
18
|
+
// Margins
|
|
19
|
+
.nu-u-mx-auto { margin-inline: auto; }
|
|
20
|
+
.nu-u-me-auto { margin-right: auto; }
|
|
21
|
+
.nu-u-ms-auto { margin-left: auto; }
|
|
32
22
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
.nu-u-me-3 { margin-right: var(--spacing-03);}
|
|
36
|
-
.nu-u-me-4 { margin-right: var(--spacing-04);}
|
|
37
|
-
.nu-u-me-5 { margin-right: var(--spacing-05);}
|
|
38
|
-
.nu-u-me-6 { margin-right: var(--spacing-06);}
|
|
39
|
-
.nu-u-me-7 { margin-right: var(--spacing-07);}
|
|
40
|
-
.nu-u-me-8 { margin-right: var(--spacing-08);}
|
|
41
|
-
.nu-u-me-9 { margin-right: var(--spacing-09);}
|
|
42
|
-
.nu-u-me-10 { margin-right: var(--spacing-10);}
|
|
43
|
-
.nu-u-me-11 { margin-right: var(--spacing-11);}
|
|
44
|
-
.nu-u-me-12 { margin-right: var(--spacing-12);}
|
|
45
|
-
.nu-u-me-13 { margin-right: var(--spacing-13);}
|
|
46
|
-
.nu-u-me-14 { margin-right: var(--spacing-14);}
|
|
47
|
-
.nu-u-me-15 { margin-right: var(--spacing-15);}
|
|
48
|
-
.nu-u-me-16 { margin-right: var(--spacing-16);}
|
|
49
|
-
.nu-u-me-17 { margin-right: var(--spacing-17);}
|
|
50
|
-
.nu-u-me-18 { margin-right: var(--spacing-18);}
|
|
23
|
+
// Margin - All sides
|
|
24
|
+
@include spacing-utilities(margin, 'm');
|
|
51
25
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
.nu-u-mb-3 { margin-bottom: var(--spacing-03);}
|
|
55
|
-
.nu-u-mb-4 { margin-bottom: var(--spacing-04);}
|
|
56
|
-
.nu-u-mb-5 { margin-bottom: var(--spacing-05);}
|
|
57
|
-
.nu-u-mb-6 { margin-bottom: var(--spacing-06);}
|
|
58
|
-
.nu-u-mb-7 { margin-bottom: var(--spacing-07);}
|
|
59
|
-
.nu-u-mb-8 { margin-bottom: var(--spacing-08);}
|
|
60
|
-
.nu-u-mb-9 { margin-bottom: var(--spacing-09);}
|
|
61
|
-
.nu-u-mb-10 { margin-bottom: var(--spacing-10);}
|
|
62
|
-
.nu-u-mb-11 { margin-bottom: var(--spacing-11);}
|
|
63
|
-
.nu-u-mb-12 { margin-bottom: var(--spacing-12);}
|
|
64
|
-
.nu-u-mb-13 { margin-bottom: var(--spacing-13);}
|
|
65
|
-
.nu-u-mb-14 { margin-bottom: var(--spacing-14);}
|
|
66
|
-
.nu-u-mb-15 { margin-bottom: var(--spacing-15);}
|
|
67
|
-
.nu-u-mb-16 { margin-bottom: var(--spacing-16);}
|
|
68
|
-
.nu-u-mb-17 { margin-bottom: var(--spacing-17);}
|
|
69
|
-
.nu-u-mb-18 { margin-bottom: var(--spacing-18);}
|
|
26
|
+
// Margin - Top
|
|
27
|
+
@include spacing-utilities(margin-top, 'mt');
|
|
70
28
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
.nu-u-ms-3 { margin-left: var(--spacing-03);}
|
|
74
|
-
.nu-u-ms-4 { margin-left: var(--spacing-04);}
|
|
75
|
-
.nu-u-ms-5 { margin-left: var(--spacing-05);}
|
|
76
|
-
.nu-u-ms-6 { margin-left: var(--spacing-06);}
|
|
77
|
-
.nu-u-ms-7 { margin-left: var(--spacing-07);}
|
|
78
|
-
.nu-u-ms-8 { margin-left: var(--spacing-08);}
|
|
79
|
-
.nu-u-ms-9 { margin-left: var(--spacing-09);}
|
|
80
|
-
.nu-u-ms-10 { margin-left: var(--spacing-10);}
|
|
81
|
-
.nu-u-ms-11 { margin-left: var(--spacing-11);}
|
|
82
|
-
.nu-u-ms-12 { margin-left: var(--spacing-12);}
|
|
83
|
-
.nu-u-ms-13 { margin-left: var(--spacing-13);}
|
|
84
|
-
.nu-u-ms-14 { margin-left: var(--spacing-14);}
|
|
85
|
-
.nu-u-ms-15 { margin-left: var(--spacing-15);}
|
|
86
|
-
.nu-u-ms-16 { margin-left: var(--spacing-16);}
|
|
87
|
-
.nu-u-ms-17 { margin-left: var(--spacing-17);}
|
|
88
|
-
.nu-u-ms-18 { margin-left: var(--spacing-18);}
|
|
29
|
+
// Margin - Bottom
|
|
30
|
+
@include spacing-utilities(margin-bottom, 'mb');
|
|
89
31
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
.nu-u-mx-3 { margin-inline: var(--spacing-03);}
|
|
93
|
-
.nu-u-mx-4 { margin-inline: var(--spacing-04);}
|
|
94
|
-
.nu-u-mx-5 { margin-inline: var(--spacing-05);}
|
|
95
|
-
.nu-u-mx-6 { margin-inline: var(--spacing-06);}
|
|
96
|
-
.nu-u-mx-7 { margin-inline: var(--spacing-07);}
|
|
97
|
-
.nu-u-mx-8 { margin-inline: var(--spacing-08);}
|
|
98
|
-
.nu-u-mx-9 { margin-inline: var(--spacing-09);}
|
|
99
|
-
.nu-u-mx-10 { margin-inline: var(--spacing-10);}
|
|
100
|
-
.nu-u-mx-11 { margin-inline: var(--spacing-11);}
|
|
101
|
-
.nu-u-mx-12 { margin-inline: var(--spacing-12);}
|
|
102
|
-
.nu-u-mx-13 { margin-inline: var(--spacing-13);}
|
|
103
|
-
.nu-u-mx-14 { margin-inline: var(--spacing-14);}
|
|
104
|
-
.nu-u-mx-15 { margin-inline: var(--spacing-15);}
|
|
105
|
-
.nu-u-mx-16 { margin-inline: var(--spacing-16);}
|
|
106
|
-
.nu-u-mx-17 { margin-inline: var(--spacing-17);}
|
|
107
|
-
.nu-u-mx-18 { margin-inline: var(--spacing-18);}
|
|
32
|
+
// Margin - Left
|
|
33
|
+
@include spacing-utilities(margin-left, 'ms');
|
|
108
34
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
.nu-u-my-3 { margin-block: var(--spacing-03);}
|
|
112
|
-
.nu-u-my-4 { margin-block: var(--spacing-04);}
|
|
113
|
-
.nu-u-my-5 { margin-block: var(--spacing-05);}
|
|
114
|
-
.nu-u-my-6 { margin-block: var(--spacing-06);}
|
|
115
|
-
.nu-u-my-7 { margin-block: var(--spacing-07);}
|
|
116
|
-
.nu-u-my-8 { margin-block: var(--spacing-08);}
|
|
117
|
-
.nu-u-my-9 { margin-block: var(--spacing-09);}
|
|
118
|
-
.nu-u-my-10 { margin-block: var(--spacing-10);}
|
|
119
|
-
.nu-u-my-11 { margin-block: var(--spacing-11);}
|
|
120
|
-
.nu-u-my-12 { margin-block: var(--spacing-12);}
|
|
121
|
-
.nu-u-my-13 { margin-block: var(--spacing-13);}
|
|
122
|
-
.nu-u-my-14 { margin-block: var(--spacing-14);}
|
|
123
|
-
.nu-u-my-15 { margin-block: var(--spacing-15);}
|
|
124
|
-
.nu-u-my-16 { margin-block: var(--spacing-16);}
|
|
125
|
-
.nu-u-my-17 { margin-block: var(--spacing-17);}
|
|
126
|
-
.nu-u-my-18 { margin-block: var(--spacing-18);}
|
|
35
|
+
// Margin - Right
|
|
36
|
+
@include spacing-utilities(margin-right, 'me');
|
|
127
37
|
|
|
128
|
-
//
|
|
38
|
+
// Margin - Inline (left & right)
|
|
39
|
+
@include spacing-utilities(margin-inline, 'mx');
|
|
129
40
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
.nu-u-ps-0 {padding-left: var(--spacing-00);}
|
|
133
|
-
.nu-u-pe-0 {padding-right: var(--spacing-00);}
|
|
134
|
-
.nu-u-pt-0 {padding-top: var(--spacing-00);}
|
|
135
|
-
.nu-u-pb-0 {padding-bottom: var(--spacing-00);}
|
|
136
|
-
.nu-u-p-0 {padding: var(--spacing-00);}
|
|
41
|
+
// Margin - Block (top & bottom)
|
|
42
|
+
@include spacing-utilities(margin-block, 'my');
|
|
137
43
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
.nu-u-p-3 { padding: var(--spacing-03);}
|
|
141
|
-
.nu-u-p-4 { padding: var(--spacing-04);}
|
|
142
|
-
.nu-u-p-5 { padding: var(--spacing-05);}
|
|
143
|
-
.nu-u-p-6 { padding: var(--spacing-06);}
|
|
144
|
-
.nu-u-p-7 { padding: var(--spacing-07);}
|
|
145
|
-
.nu-u-p-8 { padding: var(--spacing-08);}
|
|
146
|
-
.nu-u-p-9 { padding: var(--spacing-09);}
|
|
147
|
-
.nu-u-p-10 { padding: var(--spacing-10);}
|
|
148
|
-
.nu-u-p-11 { padding: var(--spacing-11);}
|
|
149
|
-
.nu-u-p-12 { padding: var(--spacing-12);}
|
|
150
|
-
.nu-u-p-13 { padding: var(--spacing-13);}
|
|
151
|
-
.nu-u-p-14 { padding: var(--spacing-14);}
|
|
152
|
-
.nu-u-p-15 { padding: var(--spacing-15);}
|
|
153
|
-
.nu-u-p-16 { padding: var(--spacing-16);}
|
|
154
|
-
.nu-u-p-17 { padding: var(--spacing-17);}
|
|
155
|
-
.nu-u-p-18 { padding: var(--spacing-18);}
|
|
44
|
+
// Padding - All sides
|
|
45
|
+
@include spacing-utilities(padding, 'p');
|
|
156
46
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
.nu-u-pt-3 { padding-top: var(--spacing-03);}
|
|
160
|
-
.nu-u-pt-4 { padding-top: var(--spacing-04);}
|
|
161
|
-
.nu-u-pt-5 { padding-top: var(--spacing-05);}
|
|
162
|
-
.nu-u-pt-6 { padding-top: var(--spacing-06);}
|
|
163
|
-
.nu-u-pt-7 { padding-top: var(--spacing-07);}
|
|
164
|
-
.nu-u-pt-8 { padding-top: var(--spacing-08);}
|
|
165
|
-
.nu-u-pt-9 { padding-top: var(--spacing-09);}
|
|
166
|
-
.nu-u-pt-10 { padding-top: var(--spacing-10);}
|
|
167
|
-
.nu-u-pt-11 { padding-top: var(--spacing-11);}
|
|
168
|
-
.nu-u-pt-12 { padding-top: var(--spacing-12);}
|
|
169
|
-
.nu-u-pt-13 { padding-top: var(--spacing-13);}
|
|
170
|
-
.nu-u-pt-14 { padding-top: var(--spacing-14);}
|
|
171
|
-
.nu-u-pt-15 { padding-top: var(--spacing-15);}
|
|
172
|
-
.nu-u-pt-16 { padding-top: var(--spacing-16);}
|
|
173
|
-
.nu-u-pt-17 { padding-top: var(--spacing-17);}
|
|
174
|
-
.nu-u-pt-18 { padding-top: var(--spacing-18);}
|
|
47
|
+
// Padding - Top
|
|
48
|
+
@include spacing-utilities(padding-top, 'pt');
|
|
175
49
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
.nu-u-pe-3 { padding-right: var(--spacing-03);}
|
|
179
|
-
.nu-u-pe-4 { padding-right: var(--spacing-04);}
|
|
180
|
-
.nu-u-pe-5 { padding-right: var(--spacing-05);}
|
|
181
|
-
.nu-u-pe-6 { padding-right: var(--spacing-06);}
|
|
182
|
-
.nu-u-pe-7 { padding-right: var(--spacing-07);}
|
|
183
|
-
.nu-u-pe-8 { padding-right: var(--spacing-08);}
|
|
184
|
-
.nu-u-pe-9 { padding-right: var(--spacing-09);}
|
|
185
|
-
.nu-u-pe-10 { padding-right: var(--spacing-10);}
|
|
186
|
-
.nu-u-pe-11 { padding-right: var(--spacing-11);}
|
|
187
|
-
.nu-u-pe-12 { padding-right: var(--spacing-12);}
|
|
188
|
-
.nu-u-pe-13 { padding-right: var(--spacing-13);}
|
|
189
|
-
.nu-u-pe-14 { padding-right: var(--spacing-14);}
|
|
190
|
-
.nu-u-pe-15 { padding-right: var(--spacing-15);}
|
|
191
|
-
.nu-u-pe-16 { padding-right: var(--spacing-16);}
|
|
192
|
-
.nu-u-pe-17 { padding-right: var(--spacing-17);}
|
|
193
|
-
.nu-u-pe-18 { padding-right: var(--spacing-18);}
|
|
50
|
+
// Padding - Bottom
|
|
51
|
+
@include spacing-utilities(padding-bottom, 'pb');
|
|
194
52
|
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
.nu-u-pb-3 { padding-bottom: var(--spacing-03);}
|
|
198
|
-
.nu-u-pb-4 { padding-bottom: var(--spacing-04);}
|
|
199
|
-
.nu-u-pb-5 { padding-bottom: var(--spacing-05);}
|
|
200
|
-
.nu-u-pb-6 { padding-bottom: var(--spacing-06);}
|
|
201
|
-
.nu-u-pb-7 { padding-bottom: var(--spacing-07);}
|
|
202
|
-
.nu-u-pb-8 { padding-bottom: var(--spacing-08);}
|
|
203
|
-
.nu-u-pb-9 { padding-bottom: var(--spacing-09);}
|
|
204
|
-
.nu-u-pb-10 { padding-bottom: var(--spacing-10);}
|
|
205
|
-
.nu-u-pb-11 { padding-bottom: var(--spacing-11);}
|
|
206
|
-
.nu-u-pb-12 { padding-bottom: var(--spacing-12);}
|
|
207
|
-
.nu-u-pb-13 { padding-bottom: var(--spacing-13);}
|
|
208
|
-
.nu-u-pb-14 { padding-bottom: var(--spacing-14);}
|
|
209
|
-
.nu-u-pb-15 { padding-bottom: var(--spacing-15);}
|
|
210
|
-
.nu-u-pb-16 { padding-bottom: var(--spacing-16);}
|
|
211
|
-
.nu-u-pb-17 { padding-bottom: var(--spacing-17);}
|
|
212
|
-
.nu-u-pb-18 { padding-bottom: var(--spacing-18);}
|
|
53
|
+
// Padding - Left
|
|
54
|
+
@include spacing-utilities(padding-left, 'ps');
|
|
213
55
|
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
.nu-u-ps-3 { padding-left: var(--spacing-03);}
|
|
217
|
-
.nu-u-ps-4 { padding-left: var(--spacing-04);}
|
|
218
|
-
.nu-u-ps-5 { padding-left: var(--spacing-05);}
|
|
219
|
-
.nu-u-ps-6 { padding-left: var(--spacing-06);}
|
|
220
|
-
.nu-u-ps-7 { padding-left: var(--spacing-07);}
|
|
221
|
-
.nu-u-ps-8 { padding-left: var(--spacing-08);}
|
|
222
|
-
.nu-u-ps-9 { padding-left: var(--spacing-09);}
|
|
223
|
-
.nu-u-ps-10 { padding-left: var(--spacing-10);}
|
|
224
|
-
.nu-u-ps-11 { padding-left: var(--spacing-11);}
|
|
225
|
-
.nu-u-ps-12 { padding-left: var(--spacing-12);}
|
|
226
|
-
.nu-u-ps-13 { padding-left: var(--spacing-13);}
|
|
227
|
-
.nu-u-ps-14 { padding-left: var(--spacing-14);}
|
|
228
|
-
.nu-u-ps-15 { padding-left: var(--spacing-15);}
|
|
229
|
-
.nu-u-ps-16 { padding-left: var(--spacing-16);}
|
|
230
|
-
.nu-u-ps-17 { padding-left: var(--spacing-17);}
|
|
231
|
-
.nu-u-ps-18 { padding-left: var(--spacing-18);}
|
|
56
|
+
// Padding - Right
|
|
57
|
+
@include spacing-utilities(padding-right, 'pe');
|
|
232
58
|
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
.nu-u-px-3 { padding-inline: var(--spacing-03);}
|
|
236
|
-
.nu-u-px-4 { padding-inline: var(--spacing-04);}
|
|
237
|
-
.nu-u-px-5 { padding-inline: var(--spacing-05);}
|
|
238
|
-
.nu-u-px-6 { padding-inline: var(--spacing-06);}
|
|
239
|
-
.nu-u-px-7 { padding-inline: var(--spacing-07);}
|
|
240
|
-
.nu-u-px-8 { padding-inline: var(--spacing-08);}
|
|
241
|
-
.nu-u-px-9 { padding-inline: var(--spacing-09);}
|
|
242
|
-
.nu-u-px-10 { padding-inline: var(--spacing-10);}
|
|
243
|
-
.nu-u-px-11 { padding-inline: var(--spacing-11);}
|
|
244
|
-
.nu-u-px-12 { padding-inline: var(--spacing-12);}
|
|
245
|
-
.nu-u-px-13 { padding-inline: var(--spacing-13);}
|
|
246
|
-
.nu-u-px-14 { padding-inline: var(--spacing-14);}
|
|
247
|
-
.nu-u-px-15 { padding-inline: var(--spacing-15);}
|
|
248
|
-
.nu-u-px-16 { padding-inline: var(--spacing-16);}
|
|
249
|
-
.nu-u-px-17 { padding-inline: var(--spacing-17);}
|
|
250
|
-
.nu-u-px-18 { padding-inline: var(--spacing-18);}
|
|
59
|
+
// Padding - Inline (left & right)
|
|
60
|
+
@include spacing-utilities(padding-inline, 'px');
|
|
251
61
|
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
.nu-u-py-3 { padding-block: var(--spacing-03);}
|
|
255
|
-
.nu-u-py-4 { padding-block: var(--spacing-04);}
|
|
256
|
-
.nu-u-py-5 { padding-block: var(--spacing-05);}
|
|
257
|
-
.nu-u-py-6 { padding-block: var(--spacing-06);}
|
|
258
|
-
.nu-u-py-7 { padding-block: var(--spacing-07);}
|
|
259
|
-
.nu-u-py-8 { padding-block: var(--spacing-08);}
|
|
260
|
-
.nu-u-py-9 { padding-block: var(--spacing-09);}
|
|
261
|
-
.nu-u-py-10 { padding-block: var(--spacing-10);}
|
|
262
|
-
.nu-u-py-11 { padding-block: var(--spacing-11);}
|
|
263
|
-
.nu-u-py-12 { padding-block: var(--spacing-12);}
|
|
264
|
-
.nu-u-py-13 { padding-block: var(--spacing-13);}
|
|
265
|
-
.nu-u-py-14 { padding-block: var(--spacing-14);}
|
|
266
|
-
.nu-u-py-15 { padding-block: var(--spacing-15);}
|
|
267
|
-
.nu-u-py-16 { padding-block: var(--spacing-16);}
|
|
268
|
-
.nu-u-py-17 { padding-block: var(--spacing-17);}
|
|
269
|
-
.nu-u-py-18 { padding-block: var(--spacing-18);}
|
|
62
|
+
// Padding - Block (top & bottom)
|
|
63
|
+
@include spacing-utilities(padding-block, 'py');
|
package/src/_variables.scss
CHANGED
|
@@ -1,23 +1,41 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--spacing: 0.125rem;
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
// Base spacing scale (original scale for internal use)
|
|
5
|
+
--spacing-00: 0px; /* 0rem */
|
|
5
6
|
--spacing-01: var(--spacing); /* 0.125rem */
|
|
6
|
-
--spacing-02: calc(var(--spacing) * 2); /* 0.25rem */
|
|
7
|
+
--spacing-02: calc(var(--spacing) * 2); /* 0.25rem / 4px */
|
|
7
8
|
--spacing-03: calc(var(--spacing) * 3); /* 0.375rem */
|
|
8
|
-
--spacing-04: calc(var(--spacing) * 4); /* 0.5rem */
|
|
9
|
-
--spacing-05: calc(var(--spacing) * 6); /* 0.75rem */
|
|
10
|
-
--spacing-06: calc(var(--spacing) * 8); /* 1rem */
|
|
9
|
+
--spacing-04: calc(var(--spacing) * 4); /* 0.5rem / 8px */
|
|
10
|
+
--spacing-05: calc(var(--spacing) * 6); /* 0.75rem / 12px */
|
|
11
|
+
--spacing-06: calc(var(--spacing) * 8); /* 1rem / 16px */
|
|
11
12
|
--spacing-07: calc(var(--spacing) * 10); /* 1.25rem */
|
|
12
|
-
--spacing-08: calc(var(--spacing) * 12); /* 1.5rem */
|
|
13
|
-
--spacing-09: calc(var(--spacing) * 16); /* 2rem */
|
|
13
|
+
--spacing-08: calc(var(--spacing) * 12); /* 1.5rem / 24px */
|
|
14
|
+
--spacing-09: calc(var(--spacing) * 16); /* 2rem / 32px */
|
|
14
15
|
--spacing-10: calc(var(--spacing) * 20); /* 2.5rem */
|
|
15
|
-
--spacing-11: calc(var(--spacing) * 24); /* 3rem */
|
|
16
|
-
--spacing-12: calc(var(--spacing) * 28); /* 3.5rem */
|
|
16
|
+
--spacing-11: calc(var(--spacing) * 24); /* 3rem / 48px */
|
|
17
|
+
--spacing-12: calc(var(--spacing) * 28); /* 3.5rem / 56px */
|
|
17
18
|
--spacing-13: calc(var(--spacing) * 32); /* 4rem */
|
|
18
19
|
--spacing-14: calc(var(--spacing) * 36); /* 4.5rem */
|
|
19
20
|
--spacing-15: calc(var(--spacing) * 40); /* 5rem */
|
|
20
21
|
--spacing-16: calc(var(--spacing) * 48); /* 6rem */
|
|
21
22
|
--spacing-17: calc(var(--spacing) * 60); /* 7.5rem */
|
|
22
23
|
--spacing-18: calc(var(--spacing) * 80); /* 10rem */
|
|
24
|
+
|
|
25
|
+
// Semantic spacing tokens
|
|
26
|
+
--spacing-zero: var(--spacing-00);
|
|
27
|
+
--spacing-xs: var(--spacing-02);
|
|
28
|
+
--spacing-s: var(--spacing-04);
|
|
29
|
+
--spacing-m: var(--spacing-05);
|
|
30
|
+
--spacing-l: var(--spacing-06);
|
|
31
|
+
--spacing-xl: var(--spacing-08);
|
|
32
|
+
--spacing-xxl: var(--spacing-09);
|
|
33
|
+
--spacing-xxxl: var(--spacing-11);
|
|
34
|
+
|
|
35
|
+
// Semantic sizing tokens
|
|
36
|
+
--size-xs: var(--spacing-06);
|
|
37
|
+
--size-s: var(--spacing-08);
|
|
38
|
+
--size-m: var(--spacing-09);
|
|
39
|
+
--controls-size-default: var(--spacing-09);
|
|
40
|
+
--controls-size-small: var(--spacing-08);
|
|
23
41
|
}
|