From 4e323682275d0255858bebcfcffed5b92592f8ea Mon Sep 17 00:00:00 2001 From: timotheegoguely Date: Thu, 12 Sep 2024 19:06:49 +0200 Subject: [PATCH] Update spacing classes names (use numbers instead of T-shirt sizes) --- src/assets/css/src/3.utilities.spacing.css | 124 ++++++++++----------- src/components/Project.vue | 2 +- 2 files changed, 63 insertions(+), 63 deletions(-) diff --git a/src/assets/css/src/3.utilities.spacing.css b/src/assets/css/src/3.utilities.spacing.css index a431dd2..decd625 100644 --- a/src/assets/css/src/3.utilities.spacing.css +++ b/src/assets/css/src/3.utilities.spacing.css @@ -4,81 +4,81 @@ .m-0 { margin: 0 } -.mb-0 { margin-bottom: 0 } -.mb-xs { margin-bottom: var(--space-4) } -.mb-sm { margin-bottom: var(--space-8) } -.mb-md { margin-bottom: var(--space-12) } -.mb-lg { margin-bottom: var(--space-16) } -.mb-xl { margin-bottom: var(--space-24) } -.mb-2xl { margin-bottom: var(--space-32) } +.mb-0 { margin-bottom: 0 } +.mb-4 { margin-bottom: var(--space-4) } +.mb-8 { margin-bottom: var(--space-8) } +.mb-12 { margin-bottom: var(--space-12) } +.mb-16 { margin-bottom: var(--space-16) } +.mb-24 { margin-bottom: var(--space-24) } +.mb-32 { margin-bottom: var(--space-32) } .ml-auto { margin-left: auto } -.ml-xs { margin-left: var(--space-4) } -.ml-sm { margin-left: var(--space-8) } -.ml-md { margin-left: var(--space-12) } -.ml-lg { margin-left: var(--space-16) } -.ml-xl { margin-left: var(--space-24) } +.ml-4 { margin-left: var(--space-4) } +.ml-8 { margin-left: var(--space-8) } +.ml-12 { margin-left: var(--space-12) } +.ml-16 { margin-left: var(--space-16) } +.ml-24 { margin-left: var(--space-24) } .mr-auto { margin-right: auto } -.mr-xs { margin-right: var(--space-4) } -.mr-sm { margin-right: var(--space-8) } -.mr-md { margin-right: var(--space-12) } -.mr-lg { margin-right: var(--space-16) } -.mr-xl { margin-right: var(--space-24) } +.mr-4 { margin-right: var(--space-4) } +.mr-8 { margin-right: var(--space-8) } +.mr-12 { margin-right: var(--space-12) } +.mr-16 { margin-right: var(--space-16) } +.mr-24 { margin-right: var(--space-24) } -.-mt-px { margin-top: -1px } -.mt-0 { margin-top: 0 } -.mt-xs { margin-top: var(--space-4) } -.mt-sm { margin-top: var(--space-8) } -.mt-md { margin-top: var(--space-12) } -.mt-lg { margin-top: var(--space-16) } -.mt-xl { margin-top: var(--space-24) } -.mt-2xl { margin-top: var(--space-32) } +.-mt-px { margin-top: -1px } +.mt-0 { margin-top: 0 } +.mt-4 { margin-top: var(--space-4) } +.mt-8 { margin-top: var(--space-8) } +.mt-12 { margin-top: var(--space-12) } +.mt-16 { margin-top: var(--space-16) } +.mt-24 { margin-top: var(--space-24) } +.mt-32 { margin-top: var(--space-32) } -.mx-px { margin-left: 1px ; margin-right: 1px } -.mx-xs { margin-left: var(--space-4) ; margin-right: var(--space-4) } -.mx-sm { margin-left: var(--space-8) ; margin-right: var(--space-8) } -.mx-md { margin-left: var(--space-12) ; margin-right: var(--space-12) } -.mx-lg { margin-left: var(--space-16) ; margin-right: var(--space-16) } -.mx-xl { margin-left: var(--space-24) ; margin-right: var(--space-24) } -.mx-2xl { margin-left: var(--space-32); margin-right: var(--space-32) } +.mx-px { margin-left: 1px ; margin-right: 1px } +.mx-4 { margin-left: var(--space-4) ; margin-right: var(--space-4) } +.mx-8 { margin-left: var(--space-8) ; margin-right: var(--space-8) } +.mx-12 { margin-left: var(--space-12); margin-right: var(--space-12) } +.mx-16 { margin-left: var(--space-16); margin-right: var(--space-16) } +.mx-24 { margin-left: var(--space-24); margin-right: var(--space-24) } +.mx-32 { margin-left: var(--space-32); margin-right: var(--space-32) } -.my-xs { margin-top: var(--space-4) ; margin-bottom: var(--space-4) } -.my-sm { margin-top: var(--space-8) ; margin-bottom: var(--space-8) } -.my-md { margin-top: var(--space-12) ; margin-bottom: var(--space-12) } -.my-lg { margin-top: var(--space-16) ; margin-bottom: var(--space-16) } -.my-xl { margin-top: var(--space-24) ; margin-bottom: var(--space-24) } -.my-2xl { margin-top: var(--space-32); margin-bottom: var(--space-32) } +.my-4 { margin-top: var(--space-4) ; margin-bottom: var(--space-4) } +.my-8 { margin-top: var(--space-8) ; margin-bottom: var(--space-8) } +.my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12) } +.my-16 { margin-top: var(--space-16); margin-bottom: var(--space-16) } +.my-24 { margin-top: var(--space-24); margin-bottom: var(--space-24) } +.my-32 { margin-top: var(--space-32); margin-bottom: var(--space-32) } /* Padding */ .pl-0 { padding-left: 0 } -.pt-xs { padding-top: var(--space-4) } -.pt-sm { padding-top: var(--space-8) } -.pt-md { padding-top: var(--space-12) } -.pt-lg { padding-top: var(--space-16) } -.pt-xl { padding-top: var(--space-24) } -.pt-2xl { padding-top: var(--space-32) } +.pt-4 { padding-top: var(--space-4) } +.pt-8 { padding-top: var(--space-8) } +.pt-12 { padding-top: var(--space-12) } +.pt-16 { padding-top: var(--space-16) } +.pt-24 { padding-top: var(--space-24) } +.pt-32 { padding-top: var(--space-32) } -.pb-xs { padding-bottom: var(--space-4) } -.pb-sm { padding-bottom: var(--space-8) } -.pb-md { padding-bottom: var(--space-12) } -.pb-lg { padding-bottom: var(--space-16) } -.pb-xl { padding-bottom: var(--space-24) } -.pb-2xl { padding-bottom: var(--space-32) } +.pb-4 { padding-bottom: var(--space-4) } +.pb-8 { padding-bottom: var(--space-8) } +.pb-12 { padding-bottom: var(--space-12) } +.pb-16 { padding-bottom: var(--space-16) } +.pb-24 { padding-bottom: var(--space-24) } +.pb-32 { padding-bottom: var(--space-32) } -.px-xs { padding-left: var(--space-4) ; padding-right: var(--space-4) } -.px-sm { padding-left: var(--space-8) ; padding-right: var(--space-8) } -.px-md { padding-left: var(--space-12) ; padding-right: var(--space-12) } -.px-lg { padding-left: var(--space-16) ; padding-right: var(--space-16) } -.px-xl { padding-left: var(--space-24) ; padding-right: var(--space-24) } -.px-2xl { padding-left: var(--space-32); padding-right: var(--space-32) } +.px-4 { padding-left: var(--space-4) ; padding-right: var(--space-4) } +.px-8 { padding-left: var(--space-8) ; padding-right: var(--space-8) } +.px-12 { padding-left: var(--space-12); padding-right: var(--space-12) } +.px-16 { padding-left: var(--space-16); padding-right: var(--space-16) } +.px-24 { padding-left: var(--space-24); padding-right: var(--space-24) } +.px-32 { padding-left: var(--space-32); padding-right: var(--space-32) } -.py-xs { padding-top: var(--space-4) ; padding-bottom: var(--space-4) } -.py-sm { padding-top: var(--space-8) ; padding-bottom: var(--space-8) } -.py-md { padding-top: var(--space-12) ; padding-bottom: var(--space-12) } -.py-lg { padding-top: var(--space-16) ; padding-bottom: var(--space-16) } -.py-xl { padding-top: var(--space-24) ; padding-bottom: var(--space-24) } -.py-2xl { padding-top: var(--space-32); padding-bottom: var(--space-32) } +.py-4 { padding-top: var(--space-4) ; padding-bottom: var(--space-4) } +.py-8 { padding-top: var(--space-8) ; padding-bottom: var(--space-8) } +.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12) } +.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16) } +.py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24) } +.py-32 { padding-top: var(--space-32); padding-bottom: var(--space-32) } diff --git a/src/components/Project.vue b/src/components/Project.vue index 9cbc153..bcde355 100644 --- a/src/components/Project.vue +++ b/src/components/Project.vue @@ -1,5 +1,5 @@