225 lines
8.2 KiB
SCSS
225 lines
8.2 KiB
SCSS
|
/*!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 + ':'));
|
||
|
|
}
|
||
|
|
}
|