Update spacing classes names (use numbers instead of T-shirt sizes)
This commit is contained in:
parent
3bed01af75
commit
4e32368227
2 changed files with 63 additions and 63 deletions
|
|
@ -4,81 +4,81 @@
|
||||||
|
|
||||||
.m-0 { margin: 0 }
|
.m-0 { margin: 0 }
|
||||||
|
|
||||||
.mb-0 { margin-bottom: 0 }
|
.mb-0 { margin-bottom: 0 }
|
||||||
.mb-xs { margin-bottom: var(--space-4) }
|
.mb-4 { margin-bottom: var(--space-4) }
|
||||||
.mb-sm { margin-bottom: var(--space-8) }
|
.mb-8 { margin-bottom: var(--space-8) }
|
||||||
.mb-md { margin-bottom: var(--space-12) }
|
.mb-12 { margin-bottom: var(--space-12) }
|
||||||
.mb-lg { margin-bottom: var(--space-16) }
|
.mb-16 { margin-bottom: var(--space-16) }
|
||||||
.mb-xl { margin-bottom: var(--space-24) }
|
.mb-24 { margin-bottom: var(--space-24) }
|
||||||
.mb-2xl { margin-bottom: var(--space-32) }
|
.mb-32 { margin-bottom: var(--space-32) }
|
||||||
|
|
||||||
.ml-auto { margin-left: auto }
|
.ml-auto { margin-left: auto }
|
||||||
.ml-xs { margin-left: var(--space-4) }
|
.ml-4 { margin-left: var(--space-4) }
|
||||||
.ml-sm { margin-left: var(--space-8) }
|
.ml-8 { margin-left: var(--space-8) }
|
||||||
.ml-md { margin-left: var(--space-12) }
|
.ml-12 { margin-left: var(--space-12) }
|
||||||
.ml-lg { margin-left: var(--space-16) }
|
.ml-16 { margin-left: var(--space-16) }
|
||||||
.ml-xl { margin-left: var(--space-24) }
|
.ml-24 { margin-left: var(--space-24) }
|
||||||
|
|
||||||
.mr-auto { margin-right: auto }
|
.mr-auto { margin-right: auto }
|
||||||
.mr-xs { margin-right: var(--space-4) }
|
.mr-4 { margin-right: var(--space-4) }
|
||||||
.mr-sm { margin-right: var(--space-8) }
|
.mr-8 { margin-right: var(--space-8) }
|
||||||
.mr-md { margin-right: var(--space-12) }
|
.mr-12 { margin-right: var(--space-12) }
|
||||||
.mr-lg { margin-right: var(--space-16) }
|
.mr-16 { margin-right: var(--space-16) }
|
||||||
.mr-xl { margin-right: var(--space-24) }
|
.mr-24 { margin-right: var(--space-24) }
|
||||||
|
|
||||||
.-mt-px { margin-top: -1px }
|
.-mt-px { margin-top: -1px }
|
||||||
.mt-0 { margin-top: 0 }
|
.mt-0 { margin-top: 0 }
|
||||||
.mt-xs { margin-top: var(--space-4) }
|
.mt-4 { margin-top: var(--space-4) }
|
||||||
.mt-sm { margin-top: var(--space-8) }
|
.mt-8 { margin-top: var(--space-8) }
|
||||||
.mt-md { margin-top: var(--space-12) }
|
.mt-12 { margin-top: var(--space-12) }
|
||||||
.mt-lg { margin-top: var(--space-16) }
|
.mt-16 { margin-top: var(--space-16) }
|
||||||
.mt-xl { margin-top: var(--space-24) }
|
.mt-24 { margin-top: var(--space-24) }
|
||||||
.mt-2xl { margin-top: var(--space-32) }
|
.mt-32 { margin-top: var(--space-32) }
|
||||||
|
|
||||||
.mx-px { margin-left: 1px ; margin-right: 1px }
|
.mx-px { margin-left: 1px ; margin-right: 1px }
|
||||||
.mx-xs { margin-left: var(--space-4) ; margin-right: var(--space-4) }
|
.mx-4 { margin-left: var(--space-4) ; margin-right: var(--space-4) }
|
||||||
.mx-sm { margin-left: var(--space-8) ; margin-right: var(--space-8) }
|
.mx-8 { margin-left: var(--space-8) ; margin-right: var(--space-8) }
|
||||||
.mx-md { margin-left: var(--space-12) ; margin-right: var(--space-12) }
|
.mx-12 { margin-left: var(--space-12); margin-right: var(--space-12) }
|
||||||
.mx-lg { margin-left: var(--space-16) ; margin-right: var(--space-16) }
|
.mx-16 { margin-left: var(--space-16); margin-right: var(--space-16) }
|
||||||
.mx-xl { margin-left: var(--space-24) ; margin-right: var(--space-24) }
|
.mx-24 { margin-left: var(--space-24); margin-right: var(--space-24) }
|
||||||
.mx-2xl { margin-left: var(--space-32); margin-right: var(--space-32) }
|
.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-4 { margin-top: var(--space-4) ; margin-bottom: var(--space-4) }
|
||||||
.my-sm { margin-top: var(--space-8) ; margin-bottom: var(--space-8) }
|
.my-8 { margin-top: var(--space-8) ; margin-bottom: var(--space-8) }
|
||||||
.my-md { margin-top: var(--space-12) ; margin-bottom: var(--space-12) }
|
.my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12) }
|
||||||
.my-lg { margin-top: var(--space-16) ; margin-bottom: var(--space-16) }
|
.my-16 { margin-top: var(--space-16); margin-bottom: var(--space-16) }
|
||||||
.my-xl { margin-top: var(--space-24) ; margin-bottom: var(--space-24) }
|
.my-24 { margin-top: var(--space-24); margin-bottom: var(--space-24) }
|
||||||
.my-2xl { margin-top: var(--space-32); margin-bottom: var(--space-32) }
|
.my-32 { margin-top: var(--space-32); margin-bottom: var(--space-32) }
|
||||||
|
|
||||||
|
|
||||||
/* Padding */
|
/* Padding */
|
||||||
|
|
||||||
.pl-0 { padding-left: 0 }
|
.pl-0 { padding-left: 0 }
|
||||||
|
|
||||||
.pt-xs { padding-top: var(--space-4) }
|
.pt-4 { padding-top: var(--space-4) }
|
||||||
.pt-sm { padding-top: var(--space-8) }
|
.pt-8 { padding-top: var(--space-8) }
|
||||||
.pt-md { padding-top: var(--space-12) }
|
.pt-12 { padding-top: var(--space-12) }
|
||||||
.pt-lg { padding-top: var(--space-16) }
|
.pt-16 { padding-top: var(--space-16) }
|
||||||
.pt-xl { padding-top: var(--space-24) }
|
.pt-24 { padding-top: var(--space-24) }
|
||||||
.pt-2xl { padding-top: var(--space-32) }
|
.pt-32 { padding-top: var(--space-32) }
|
||||||
|
|
||||||
.pb-xs { padding-bottom: var(--space-4) }
|
.pb-4 { padding-bottom: var(--space-4) }
|
||||||
.pb-sm { padding-bottom: var(--space-8) }
|
.pb-8 { padding-bottom: var(--space-8) }
|
||||||
.pb-md { padding-bottom: var(--space-12) }
|
.pb-12 { padding-bottom: var(--space-12) }
|
||||||
.pb-lg { padding-bottom: var(--space-16) }
|
.pb-16 { padding-bottom: var(--space-16) }
|
||||||
.pb-xl { padding-bottom: var(--space-24) }
|
.pb-24 { padding-bottom: var(--space-24) }
|
||||||
.pb-2xl { padding-bottom: var(--space-32) }
|
.pb-32 { padding-bottom: var(--space-32) }
|
||||||
|
|
||||||
.px-xs { padding-left: var(--space-4) ; padding-right: var(--space-4) }
|
.px-4 { padding-left: var(--space-4) ; padding-right: var(--space-4) }
|
||||||
.px-sm { padding-left: var(--space-8) ; padding-right: var(--space-8) }
|
.px-8 { padding-left: var(--space-8) ; padding-right: var(--space-8) }
|
||||||
.px-md { padding-left: var(--space-12) ; padding-right: var(--space-12) }
|
.px-12 { padding-left: var(--space-12); padding-right: var(--space-12) }
|
||||||
.px-lg { padding-left: var(--space-16) ; padding-right: var(--space-16) }
|
.px-16 { padding-left: var(--space-16); padding-right: var(--space-16) }
|
||||||
.px-xl { padding-left: var(--space-24) ; padding-right: var(--space-24) }
|
.px-24 { padding-left: var(--space-24); padding-right: var(--space-24) }
|
||||||
.px-2xl { padding-left: var(--space-32); padding-right: var(--space-32) }
|
.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-4 { padding-top: var(--space-4) ; padding-bottom: var(--space-4) }
|
||||||
.py-sm { padding-top: var(--space-8) ; padding-bottom: var(--space-8) }
|
.py-8 { padding-top: var(--space-8) ; padding-bottom: var(--space-8) }
|
||||||
.py-md { padding-top: var(--space-12) ; padding-bottom: var(--space-12) }
|
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12) }
|
||||||
.py-lg { padding-top: var(--space-16) ; padding-bottom: var(--space-16) }
|
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16) }
|
||||||
.py-xl { padding-top: var(--space-24) ; padding-bottom: var(--space-24) }
|
.py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24) }
|
||||||
.py-2xl { padding-top: var(--space-32); padding-bottom: var(--space-32) }
|
.py-32 { padding-top: var(--space-32); padding-bottom: var(--space-32) }
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<article class="project-item | flex | rounded-2xl | px-2xl py-2xl">
|
<article class="project-item | flex | rounded-2xl | px-32 py-32">
|
||||||
<hgroup>
|
<hgroup>
|
||||||
<h3>{{ project.title }}</h3>
|
<h3>{{ project.title }}</h3>
|
||||||
<p>
|
<p>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue