/*!markdown --- title: Space Between --- | Class | Properties | | ----------- | ------------------------ | | space-x-px | margin-left: 0.0625rem | | space-x-px.space-x-reverse | margin-right: 0.0625rem | | space-x-0 | margin-left: 0 | | space-x-0.space-x-reverse | margin-right: 0 | | space-x-none | margin-left: 0 | | space-x-none.space-x-reverse | margin-right: 0 | | space-x-0\.5 | margin-left: 0.125rem | | space-x-0\.5.space-x-reverse | margin-right: 0.125rem | | space-x-1 | margin-left: 0.25rem | | space-x-1.space-x-reverse | margin-right: 0.25rem | | space-x-1\.5 | margin-left: 0.375rem | | space-x-1\.5.space-x-reverse | margin-right: 0.375rem | | space-x-2 | margin-left: 0.5rem | | space-x-2.space-x-reverse | margin-right: 0.5rem | | space-x-2\.5 | margin-left: 0.625rem | | space-x-2\.5.space-x-reverse | margin-right: 0.625rem | | space-x-3 | margin-left: 0.75rem | | space-x-3.space-x-reverse | margin-right: 0.75rem | | space-x-3\.5 | margin-left: 0.875rem | | space-x-3\.5.space-x-reverse | margin-right: 0.875rem | | space-x-4 | margin-left: 1rem | | space-x-4.space-x-reverse | margin-right: 1rem | | space-x-5 | margin-left: 1.25rem | | space-x-5.space-x-reverse | margin-right: 1.25rem | | space-x-6 | margin-left: 1.5rem | | space-x-6.space-x-reverse | margin-right: 1.5rem | | space-x-7 | margin-left: 1.75rem | | space-x-7.space-x-reverse | margin-right: 1.75rem | | space-x-8 | margin-left: 2rem | | space-x-8.space-x-reverse | margin-right: 2rem | | space-x-9 | margin-left: 2.25rem | | space-x-9.space-x-reverse | margin-right: 2.25rem | | space-x-10 | margin-left: 2.5rem | | space-x-10.space-x-reverse | margin-right: 2.5rem | | space-x-11 | margin-left: 2.75rem | | space-x-11.space-x-reverse | margin-right: 2.75rem | | space-x-12 | margin-left: 3rem | | space-x-12.space-x-reverse | margin-right: 3rem | | space-x-14 | margin-left: 3.5rem | | space-x-14.space-x-reverse | margin-right: 3.5rem | | space-x-16 | margin-left: 4rem | | space-x-16.space-x-reverse | margin-right: 4rem | | space-x-18 | margin-left: 4.5rem | | space-x-18.space-x-reverse | margin-right: 4.5rem | | space-x-20 | margin-left: 5rem | | space-x-20.space-x-reverse | margin-right: 5rem | | space-x-24 | margin-left: 6rem | | space-x-24.space-x-reverse | margin-right: 6rem | | space-x-28 | margin-left: 7rem | | space-x-28.space-x-reverse | margin-right: 7rem | | space-x-32 | margin-left: 8rem | | space-x-32.space-x-reverse | margin-right: 8rem | | space-x-36 | margin-left: 9rem | | space-x-36.space-x-reverse | margin-right: 9rem | | space-x-40 | margin-left: 10rem | | space-x-40.space-x-reverse | margin-right: 10rem | | space-x-44 | margin-left: 11rem | | space-x-44.space-x-reverse | margin-right: 11rem | | space-x-48 | margin-left: 12rem | | space-x-48.space-x-reverse | margin-right: 12rem | | space-x-52 | margin-left: 13rem | | space-x-52.space-x-reverse | margin-right: 13rem | | space-x-56 | margin-left: 14rem | | space-x-56.space-x-reverse | margin-right: 14rem | | space-x-60 | margin-left: 15rem | | space-x-60.space-x-reverse | margin-right: 15rem | | space-x-64 | margin-left: 16rem | | space-x-64.space-x-reverse | margin-right: 16rem | | space-x-72 | margin-left: 18rem | | space-x-72.space-x-reverse | margin-right: 18rem | | space-x-80 | margin-left: 20rem | | space-x-80.space-x-reverse | margin-right: 20rem | | space-x-96 | margin-left: 24rem | | space-x-96.space-x-reverse | margin-right: 24rem | | space-y-px | margin-top: 0.0625rem | | space-y-px.space-y-reverse | margin-bottom: 0.0625rem | | space-y-0 | margin-top: 0 | | space-y-0.space-y-reverse | margin-bottom: 0 | | space-y-none | margin-top: 0 | | space-y-none.space-y-reverse | margin-bottom: 0 | | space-y-0\.5 | margin-top: 0.125rem | | space-y-0\.5.space-y-reverse | margin-bottom: 0.125rem | | space-y-1 | margin-top: 0.25rem | | space-y-1.space-y-reverse | margin-bottom: 0.25rem | | space-y-1\.5 | margin-top: 0.375rem | | space-y-1\.5.space-y-reverse | margin-bottom: 0.375rem | | space-y-2 | margin-top: 0.5rem | | space-y-2.space-y-reverse | margin-bottom: 0.5rem | | space-y-2\.5 | margin-top: 0.625rem | | space-y-2\.5.space-y-reverse | margin-bottom: 0.625rem | | space-y-3 | margin-top: 0.75rem | | space-y-3.space-y-reverse | margin-bottom: 0.75rem | | space-y-3\.5 | margin-top: 0.875rem | | space-y-3\.5.space-y-reverse | margin-bottom: 0.875rem | | space-y-4 | margin-top: 1rem | | space-y-4.space-y-reverse | margin-bottom: 1rem | | space-y-5 | margin-top: 1.25rem | | space-y-5.space-y-reverse | margin-bottom: 1.25rem | | space-y-6 | margin-top: 1.5rem | | space-y-6.space-y-reverse | margin-bottom: 1.5rem | | space-y-7 | margin-top: 1.75rem | | space-y-7.space-y-reverse | margin-bottom: 1.75rem | | space-y-8 | margin-top: 2rem | | space-y-8.space-y-reverse | margin-bottom: 2rem | | space-y-9 | margin-top: 2.25rem | | space-y-9.space-y-reverse | margin-bottom: 2.25rem | | space-y-10 | margin-top: 2.5rem | | space-y-10.space-y-reverse | margin-bottom: 2.5rem | | space-y-11 | margin-top: 2.75rem | | space-y-11.space-y-reverse | margin-bottom: 2.75rem | | space-y-12 | margin-top: 3rem | | space-y-12.space-y-reverse | margin-bottom: 3rem | | space-y-14 | margin-top: 3.5rem | | space-y-14.space-y-reverse | margin-bottom: 3.5rem | | space-y-16 | margin-top: 4rem | | space-y-16.space-y-reverse | margin-bottom: 4rem | | space-y-18 | margin-top: 4.5rem | | space-y-18.space-y-reverse | margin-bottom: 4.5rem | | space-y-20 | margin-top: 5rem | | space-y-20.space-y-reverse | margin-bottom: 5rem | | space-y-24 | margin-top: 6rem | | space-y-24.space-y-reverse | margin-bottom: 6rem | | space-y-28 | margin-top: 7rem | | space-y-28.space-y-reverse | margin-bottom: 7rem | | space-y-32 | margin-top: 8rem | | space-y-32.space-y-reverse | margin-bottom: 8rem | | space-y-36 | margin-top: 9rem | | space-y-36.space-y-reverse | margin-bottom: 9rem | | space-y-40 | margin-top: 10rem | | space-y-40.space-y-reverse | margin-bottom: 10rem | | space-y-44 | margin-top: 11rem | | space-y-44.space-y-reverse | margin-bottom: 11rem | | space-y-48 | margin-top: 12rem | | space-y-48.space-y-reverse | margin-bottom: 12rem | | space-y-52 | margin-top: 13rem | | space-y-52.space-y-reverse | margin-bottom: 13rem | | space-y-56 | margin-top: 14rem | | space-y-56.space-y-reverse | margin-bottom: 14rem | | space-y-60 | margin-top: 15rem | | space-y-60.space-y-reverse | margin-bottom: 15rem | | space-y-64 | margin-top: 16rem | | space-y-64.space-y-reverse | margin-bottom: 16rem | | space-y-72 | margin-top: 18rem | | space-y-72.space-y-reverse | margin-bottom: 18rem | | space-y-80 | margin-top: 20rem | | space-y-80.space-y-reverse | margin-bottom: 20rem | | space-y-96 | margin-top: 24rem | | space-y-96.space-y-reverse | margin-bottom: 24rem | */ @mixin space-x-spacing($spacing: $spacing, $prefix: '.', $suffix: '') { @each $name, $value in $spacing { @if $name == default { #{$prefix}space-x#{$suffix} { & > :not([hidden]) ~ :not([hidden]) { margin-left: $value; } &.space-x-reverse > :not([hidden]) ~ :not([hidden]) { margin-right: $value; } } } @else { #{$prefix}space-x-#{'' + selector-escape($name)}#{$suffix} { & > :not([hidden]) ~ :not([hidden]) { margin-left: $value; } &.space-x-reverse > :not([hidden]) ~ :not([hidden]) { margin-right: $value; } } } } } @mixin space-y-spacing($spacing: $spacing, $prefix: '.', $suffix: '') { @each $name, $value in $spacing { @if $name == default { #{$prefix}space-y#{$suffix} { & > :not([hidden]) ~ :not([hidden]) { margin-top: $value; } &.space-y-reverse > :not([hidden]) ~ :not([hidden]) { margin-bottom: $value; } } } @else { #{$prefix}space-y-#{'' + selector-escape($name)}#{$suffix} { & > :not([hidden]) ~ :not([hidden]) { margin-top: $value; } &.space-y-reverse > :not([hidden]) ~ :not([hidden]) { margin-bottom: $value; } } } } } @mixin make-spaces($prefix: '.', $suffix: '') { @include space-x-spacing($spacing, $prefix, $suffix); @include space-y-spacing($spacing, $prefix, $suffix); } @include make-spaces(); @each $deivce in map-keys($devices) { @include media-device($deivce) { @include make-spaces('.' + selector-escape($deivce + ':')); } }