spacing/data.css

CSS spacing classes

[data-spacing~=p0] { padding: 0 }
[data-spacing~=p1] { padding: var(--space-1) }
[data-spacing~=p2] { padding: var(--space-2) }
[data-spacing~=p3] { padding: var(--space-3) }
[data-spacing~=p4] { padding: var(--space-4) }

[data-spacing~=pt0] { padding-top: 0 }
[data-spacing~=pt1] { padding-top: var(--space-1) }
[data-spacing~=pt2] { padding-top: var(--space-2) }
[data-spacing~=pt3] { padding-top: var(--space-3) }
[data-spacing~=pt4] { padding-top: var(--space-4) }

[data-spacing~=pl0] { padding-left: 0 }
[data-spacing~=pl1] { padding-left: var(--space-1) }
[data-spacing~=pl2] { padding-left: var(--space-2) }
[data-spacing~=pl3] { padding-left: var(--space-3) }
[data-spacing~=pl4] { padding-left: var(--space-4) }

[data-spacing~=pr0] { padding-right: 0 }
[data-spacing~=pr1] { padding-right: var(--space-1) }
[data-spacing~=pr2] { padding-right: var(--space-2) }
[data-spacing~=pr3] { padding-right: var(--space-3) }
[data-spacing~=pr4] { padding-right: var(--space-4) }

[data-spacing~=pb0] { padding-bottom: 0 }
[data-spacing~=pb1] { padding-bottom: var(--space-1) }
[data-spacing~=pb2] { padding-bottom: var(--space-2) }
[data-spacing~=pb3] { padding-bottom: var(--space-3) }
[data-spacing~=pb4] { padding-bottom: var(--space-4) }

[data-spacing~=-m2] { margin: calc(var(--space-2) * -1) }
[data-spacing~=-m1] { margin: calc(var(--space-1) * -1) }
[data-spacing~=m0] { margin: 0 }
[data-spacing~=m1] { margin: var(--space-1) }
[data-spacing~=m2] { margin: var(--space-2) }
[data-spacing~=m3] { margin: var(--space-3) }
[data-spacing~=m4] { margin: var(--space-4) }
[data-spacing~=m-auto] { margin: auto }

[data-spacing~=mt0] { margin-top: 0 }
[data-spacing~=mt1] { margin-top: var(--space-1) }
[data-spacing~=mt2] { margin-top: var(--space-2) }
[data-spacing~=mt3] { margin-top: var(--space-3) }
[data-spacing~=mt4] { margin-top: var(--space-4) }

[data-spacing~=ml0] { margin-left: 0 }
[data-spacing~=ml1] { margin-left: var(--space-1) }
[data-spacing~=ml2] { margin-left: var(--space-2) }
[data-spacing~=ml3] { margin-left: var(--space-3) }
[data-spacing~=ml4] { margin-left: var(--space-4) }

[data-spacing~=mr0] { margin-right: 0 }
[data-spacing~=mr1] { margin-right: var(--space-1) }
[data-spacing~=mr2] { margin-right: var(--space-2) }
[data-spacing~=mr3] { margin-right: var(--space-3) }
[data-spacing~=mr4] { margin-right: var(--space-4) }

[data-spacing~=mb0] { margin-bottom: 0 }
[data-spacing~=mb1] { margin-bottom: var(--space-1) }
[data-spacing~=mb2] { margin-bottom: var(--space-2) }
[data-spacing~=mb3] { margin-bottom: var(--space-3) }
[data-spacing~=mb4] { margin-bottom: var(--space-4) }

[data-spacing~=mt-auto] { margin-top: auto }
[data-spacing~=ml-auto] { margin-left: auto }
[data-spacing~=mr-auto] { margin-right: auto }
[data-spacing~=mb-auto] { margin-bottom: auto }

[data-spacing~=mt0-first]:first-child { margin-top: 0 }
[data-spacing~=ml0-first]:first-child { margin-left: 0 }
[data-spacing~=mr0-first]:first-child { margin-right: 0 }
[data-spacing~=mb0-first]:first-child { margin-bottom: 0 }

[data-spacing~=mt0-last]:last-child { margin-top: 0 }
[data-spacing~=ml0-last]:last-child { margin-left: 0 }
[data-spacing~=mr0-last]:last-child { margin-right: 0 }
[data-spacing~=mb0-last]:last-child { margin-bottom: 0 }