54 lines
1.9 KiB
CSS
54 lines
1.9 KiB
CSS
|
:root {
|
||
|
|
--spacing-xxs: 0.236em;
|
||
|
|
--spacing-xs: 0.382em;
|
||
|
|
--spacing-s: 0.618em;
|
||
|
|
--spacing-m: 1.000em;
|
||
|
|
--spacing-l: 1.618em;
|
||
|
|
--spacing-xl: 2.618em;
|
||
|
|
--spacing-xxl: 4.236em;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* Spacing utility classes: xxs */
|
||
|
|
.sp-bls-xxs { margin-block-start: var(--spacing-xxs); }
|
||
|
|
.sp-ble-xxs { margin-block-end: var(--spacing-xxs); }
|
||
|
|
.sp-ins-xxs { margin-inline-start: var(--spacing-xxs); }
|
||
|
|
.sp-ine-xxs { margin-inline-end: var(--spacing-xxs); }
|
||
|
|
|
||
|
|
/* Spacing utility classes: xs */
|
||
|
|
.sp-bls-xs { margin-block-start: var(--spacing-xs); }
|
||
|
|
.sp-ble-xs { margin-block-end: var(--spacing-xs); }
|
||
|
|
.sp-ins-xs { margin-inline-start: var(--spacing-xs); }
|
||
|
|
.sp-ine-xs { margin-inline-end: var(--spacing-xs); }
|
||
|
|
|
||
|
|
/* Spacing utility classes: s */
|
||
|
|
.sp-bls-s { margin-block-start: var(--spacing-s); }
|
||
|
|
.sp-ble-s { margin-block-end: var(--spacing-s); }
|
||
|
|
.sp-ins-s { margin-inline-start: var(--spacing-s); }
|
||
|
|
.sp-ine-s { margin-inline-end: var(--spacing-s); }
|
||
|
|
|
||
|
|
/* Spacing utility classes: m */
|
||
|
|
.sp-bls-m { margin-block-start: var(--spacing-m); }
|
||
|
|
.sp-ble-m { margin-block-end: var(--spacing-m); }
|
||
|
|
.sp-ins-m { margin-inline-start: var(--spacing-m); }
|
||
|
|
.sp-ine-m { margin-inline-end: var(--spacing-m); }
|
||
|
|
|
||
|
|
/* Spacing utility classes: l */
|
||
|
|
.sp-bls-l { margin-block-start: var(--spacing-l); }
|
||
|
|
.sp-ble-l { margin-block-end: var(--spacing-l); }
|
||
|
|
.sp-ins-l { margin-inline-start: var(--spacing-l); }
|
||
|
|
.sp-ine-l { margin-inline-end: var(--spacing-l); }
|
||
|
|
|
||
|
|
/* Spacing utility classes: xl */
|
||
|
|
.sp-bls-xl { margin-block-start: var(--spacing-xl); }
|
||
|
|
.sp-ble-xl { margin-block-end: var(--spacing-xl); }
|
||
|
|
.sp-ins-xl { margin-inline-start: var(--spacing-xl); }
|
||
|
|
.sp-ine-xl { margin-inline-end: var(--spacing-xl); }
|
||
|
|
|
||
|
|
/* Spacing utility classes: xxl */
|
||
|
|
.sp-bls-xxl { margin-block-start: var(--spacing-xxl); }
|
||
|
|
.sp-ble-xxl { margin-block-end: var(--spacing-xxl); }
|
||
|
|
.sp-ins-xxl { margin-inline-start: var(--spacing-xxl); }
|
||
|
|
.sp-ine-xxl { margin-inline-end: var(--spacing-xxl); }
|
||
|
|
|