Created
February 6, 2020 06:38
-
-
Save stranger26/e205d91a58dcb49246a39412d5d35485 to your computer and use it in GitHub Desktop.
Spacer class for margin & paddings in CSS with CSS variables.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
/* Space - Sizes */ | |
--space-none: 0; | |
--space-xs: 4px; | |
--space-s: 8px; | |
--space-base: 12px; | |
--space-m: 16px; | |
--space-l: 24px; | |
--space-xl: 32px; | |
--space-xxl: 40px; | |
} | |
.padding-none { padding: var(--space-none); } | |
.padding-xs { padding: var(--space-xs); } | |
.padding-s { padding: var(--space-s); } | |
.padding-base { padding: var(--space-base); } | |
.padding-m { padding: var(--space-m); } | |
.padding-l { padding: var(--space-l); } | |
.padding-xl { padding: var(--space-xl); } | |
.padding-xxl { padding: var(--space-xxl); } | |
.margin-none { margin: var(--space-none); } | |
.margin-xs { margin: var(--space-xs); } | |
.margin-s { margin: var(--space-s); } | |
.margin-base { margin: var(--space-base); } | |
.margin-m { margin: var(--space-m); } | |
.margin-l { margin: var(--space-l); } | |
.margin-xl { margin: var(--space-xl); } | |
.margin-xxl { margin: var(--space-xxl); } | |
/* Top paddings */ | |
.padding-top-none { padding-top: var(--space-none); } | |
.padding-top-xs { padding-top: var(--space-xs); } | |
.padding-top-s { padding-top: var(--space-s); } | |
.padding-top-base { padding-top: var(--space-base); } | |
.padding-top-m { padding-top: var(--space-m); } | |
.padding-top-l { padding-top: var(--space-l); } | |
.padding-top-xl { padding-top: var(--space-xl); } | |
.padding-top-xxl { padding-top: var(--space-xxl); } | |
/* Right paddings */ | |
.padding-right-none { padding-right: var(--space-none); } | |
.padding-right-xs { padding-right: var(--space-xs); } | |
.padding-right-s { padding-right: var(--space-s); } | |
.padding-right-base { padding-right: var(--space-base); } | |
.padding-right-m { padding-right: var(--space-m); } | |
.padding-right-l { padding-right: var(--space-l); } | |
.padding-right-xl { padding-right: var(--space-xl); } | |
.padding-right-xxl { padding-right: var(--space-xxl); } | |
/* Bottom paddings */ | |
.padding-bottom-none { padding-bottom: var(--space-none); } | |
.padding-bottom-xs { padding-bottom: var(--space-xs); } | |
.padding-bottom-s { padding-bottom: var(--space-s); } | |
.padding-bottom-base { padding-bottom: var(--space-base); } | |
.padding-bottom-m { padding-bottom: var(--space-m); } | |
.padding-bottom-l { padding-bottom: var(--space-l); } | |
.padding-bottom-xl { padding-bottom: var(--space-xl); } | |
.padding-bottom-xxl { padding-bottom: var(--space-xxl); } | |
/* Left paddings */ | |
.padding-left-none { padding-left: var(--space-none); } | |
.padding-left-xs { padding-left: var(--space-xs); } | |
.padding-left-s { padding-left: var(--space-s); } | |
.padding-left-base { padding-left: var(--space-base); } | |
.padding-left-m { padding-left: var(--space-m); } | |
.padding-left-l { padding-left: var(--space-l); } | |
.padding-left-xl { padding-left: var(--space-xl); } | |
.padding-left-xxl { padding-left: var(--space-xxl); } | |
/* Padding Vertical */ | |
.padding-y-none { | |
padding-top: var(--space-none); | |
padding-bottom: var(--space-none); | |
} | |
.padding-y-xs { | |
padding-top: var(--space-xs); | |
padding-bottom: var(--space-xs); | |
} | |
.padding-y-s { | |
padding-top: var(--space-s); | |
padding-bottom: var(--space-s); | |
} | |
.padding-y-base { | |
padding-top: var(--space-base); | |
padding-bottom: var(--space-base); | |
} | |
.padding-y-m { | |
padding-top: var(--space-m); | |
padding-bottom: var(--space-m); | |
} | |
.padding-y-l { | |
padding-top: var(--space-l); | |
padding-bottom: var(--space-l); | |
} | |
.padding-y-xl { | |
padding-top: var(--space-xl); | |
padding-bottom: var(--space-xl); | |
} | |
.padding-y-xxl { | |
padding-top: var(--space-xxl); | |
padding-bottom: var(--space-xxl); | |
} | |
/* Padding Horizontal */ | |
.padding-x-none { | |
padding-left: var(--space-none); | |
padding-right: var(--space-none); | |
} | |
.padding-x-xs { | |
padding-left: var(--space-xs); | |
padding-right: var(--space-xs); | |
} | |
.padding-x-s { | |
padding-left: var(--space-s); | |
padding-right: var(--space-s); | |
} | |
.padding-x-base { | |
padding-left: var(--space-base); | |
padding-right: var(--space-base); | |
} | |
.padding-x-m { | |
padding-left: var(--space-m); | |
padding-right: var(--space-m); | |
} | |
.padding-x-l { | |
padding-left: var(--space-l); | |
padding-right: var(--space-l); | |
} | |
.padding-x-xl { | |
padding-left: var(--space-xl); | |
padding-right: var(--space-xl); | |
} | |
.padding-x-xxl { | |
padding-left: var(--space-xxl); | |
padding-right: var(--space-xxl); | |
} | |
/* Top margins */ | |
.margin-top-none { margin-top: var(--space-none); } | |
.margin-top-xs { margin-top: var(--space-xs); } | |
.margin-top-s { margin-top: var(--space-s); } | |
.margin-top-base { margin-top: var(--space-base); } | |
.margin-top-m { margin-top: var(--space-m); } | |
.margin-top-l { margin-top: var(--space-l); } | |
.margin-top-xl { margin-top: var(--space-xl); } | |
.margin-top-xxl { margin-top: var(--space-xxl); } | |
/* Right margins */ | |
.margin-right-none { margin-right: var(--space-none); } | |
.margin-right-xs { margin-right: var(--space-xs); } | |
.margin-right-s { margin-right: var(--space-s); } | |
.margin-right-base { margin-right: var(--space-base); } | |
.margin-right-m { margin-right: var(--space-m); } | |
.margin-right-l { margin-right: var(--space-l); } | |
.margin-right-xl { margin-right: var(--space-xl); } | |
.margin-right-xxl { margin-right: var(--space-xxl); } | |
/* Bottom margins */ | |
.margin-bottom-none { margin-bottom: var(--space-none); } | |
.margin-bottom-xs { margin-bottom: var(--space-xs); } | |
.margin-bottom-s { margin-bottom: var(--space-s); } | |
.margin-bottom-base { margin-bottom: var(--space-base); } | |
.margin-bottom-m { margin-bottom: var(--space-m); } | |
.margin-bottom-l { margin-bottom: var(--space-l); } | |
.margin-bottom-xl { margin-bottom: var(--space-xl); } | |
.margin-bottom-xxl { margin-bottom: var(--space-xxl); } | |
/* Left margins */ | |
.margin-left-none { margin-left: var(--space-none); } | |
.margin-left-xs { margin-left: var(--space-xs); } | |
.margin-left-s { margin-left: var(--space-s); } | |
.margin-left-base { margin-left: var(--space-base); } | |
.margin-left-m { margin-left: var(--space-m); } | |
.margin-left-l { margin-left: var(--space-l); } | |
.margin-left-xl { margin-left: var(--space-xl); } | |
.margin-left-xxl { margin-left: var(--space-xxl); } | |
/* margin Vertical */ | |
.margin-y-none { | |
margin-top: var(--space-none); | |
margin-bottom: var(--space-none); | |
} | |
.margin-y-xs { | |
margin-top: var(--space-xs); | |
margin-bottom: var(--space-xs); | |
} | |
.margin-y-s { | |
margin-top: var(--space-s); | |
margin-bottom: var(--space-s); | |
} | |
.margin-y-base { | |
margin-top: var(--space-base); | |
margin-bottom: var(--space-base); | |
} | |
.margin-y-m { | |
margin-top: var(--space-m); | |
margin-bottom: var(--space-m); | |
} | |
.margin-y-l { | |
margin-top: var(--space-l); | |
margin-bottom: var(--space-l); | |
} | |
.margin-y-xl { | |
margin-top: var(--space-xl); | |
margin-bottom: var(--space-xl); | |
} | |
.margin-y-xxl { | |
margin-top: var(--space-xxl); | |
margin-bottom: var(--space-xxl); | |
} | |
/* margin Horizontal */ | |
.margin-x-none { | |
margin-left: var(--space-none); | |
margin-right: var(--space-none); | |
} | |
.margin-x-xs { | |
margin-left: var(--space-xs); | |
margin-right: var(--space-xs); | |
} | |
.margin-x-s { | |
margin-left: var(--space-s); | |
margin-right: var(--space-s); | |
} | |
.margin-x-base { | |
margin-left: var(--space-base); | |
margin-right: var(--space-base); | |
} | |
.margin-x-m { | |
margin-left: var(--space-m); | |
margin-right: var(--space-m); | |
} | |
.margin-x-l { | |
margin-left: var(--space-l); | |
margin-right: var(--space-l); | |
} | |
.margin-x-xl { | |
margin-left: var(--space-xl); | |
margin-right: var(--space-xl); | |
} | |
.margin-x-xxl { | |
margin-left: var(--space-xxl); | |
margin-right: var(--space-xxl); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment