Created
July 23, 2023 00:21
-
-
Save uzielweb/2c47d9fef668f5f08a965b6639f778b8 to your computer and use it in GitHub Desktop.
Custom Bootstrap Margins and Paddings
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
| /* Custom Bootstrap Margins by Uziel Almeida Oliveira */ | |
| /* p-1 until p-20 */ | |
| .p-1 { | |
| padding: calc(var(--bs-gutter-x) * .125) | |
| } | |
| .p-2 { | |
| padding: calc(var(--bs-gutter-x) * .25) | |
| } | |
| .p-3 { | |
| padding: calc(var(--bs-gutter-x) * .5) | |
| } | |
| .p-4 { | |
| padding: calc(var(--bs-gutter-x) * 1) | |
| } | |
| .p-5 { | |
| padding: calc(var(--bs-gutter-x) * 1.5) | |
| } | |
| .p-6 { | |
| padding: calc(var(--bs-gutter-x) * 2) | |
| } | |
| .p-7 { | |
| padding: calc(var(--bs-gutter-x) * 2.5) | |
| } | |
| .p-8 { | |
| padding: calc(var(--bs-gutter-x) * 3) | |
| } | |
| .p-9 { | |
| padding: calc(var(--bs-gutter-x) * 3.5) | |
| } | |
| .p-10 { | |
| padding: calc(var(--bs-gutter-x) * 4) | |
| } | |
| .p-11 { | |
| padding: calc(var(--bs-gutter-x) * 4.5) | |
| } | |
| .p-12 { | |
| padding: calc(var(--bs-gutter-x) * 5) | |
| } | |
| .p-13 { | |
| padding: calc(var(--bs-gutter-x) * 5.5) | |
| } | |
| .p-14 { | |
| padding: calc(var(--bs-gutter-x) * 6) | |
| } | |
| .p-15 { | |
| padding: calc(var(--bs-gutter-x) * 6.5) | |
| } | |
| .p-16 { | |
| padding: calc(var(--bs-gutter-x) * 7) | |
| } | |
| .p-17 { | |
| padding: calc(var(--bs-gutter-x) * 7.5) | |
| } | |
| .p-18 { | |
| padding: calc(var(--bs-gutter-x) * 8) | |
| } | |
| .p-19 { | |
| padding: calc(var(--bs-gutter-x) * 8.5) | |
| } | |
| .p-20 { | |
| padding: calc(var(--bs-gutter-x) * 9) | |
| } | |
| /* px,py,pt,pb */ | |
| .px-1 { | |
| padding-left: calc(var(--bs-gutter-x) * .125); | |
| padding-right: calc(var(--bs-gutter-x) * .125) | |
| } | |
| .px-2 { | |
| padding-left: calc(var(--bs-gutter-x) * .25); | |
| padding-right: calc(var(--bs-gutter-x) * .25) | |
| } | |
| .px-3 { | |
| padding-left: calc(var(--bs-gutter-x) * .5); | |
| padding-right: calc(var(--bs-gutter-x) * .5) | |
| } | |
| .px-4 { | |
| padding-left: calc(var(--bs-gutter-x) * 1); | |
| padding-right: calc(var(--bs-gutter-x) * 1) | |
| } | |
| .px-5 { | |
| padding-left: calc(var(--bs-gutter-x) * 1.5); | |
| padding-right: calc(var(--bs-gutter-x) * 1.5) | |
| } | |
| .px-6 { | |
| padding-left: calc(var(--bs-gutter-x) * 2); | |
| padding-right: calc(var(--bs-gutter-x) * 2) | |
| } | |
| .px-7 { | |
| padding-left: calc(var(--bs-gutter-x) * 2.5); | |
| padding-right: calc(var(--bs-gutter-x) * 2.5) | |
| } | |
| .px-8 { | |
| padding-left: calc(var(--bs-gutter-x) * 3); | |
| padding-right: calc(var(--bs-gutter-x) * 3) | |
| } | |
| .px-9 { | |
| padding-left: calc(var(--bs-gutter-x) * 3.5); | |
| padding-right: calc(var(--bs-gutter-x) * 3.5) | |
| } | |
| .px-10 { | |
| padding-left: calc(var(--bs-gutter-x) * 4); | |
| padding-right: calc(var(--bs-gutter-x) * 4) | |
| } | |
| .px-11 { | |
| padding-left: calc(var(--bs-gutter-x) * 4.5); | |
| padding-right: calc(var(--bs-gutter-x) * 4.5) | |
| } | |
| .px-12 { | |
| padding-left: calc(var(--bs-gutter-x) * 5); | |
| padding-right: calc(var(--bs-gutter-x) * 5) | |
| } | |
| .px-13 { | |
| padding-left: calc(var(--bs-gutter-x) * 5.5); | |
| padding-right: calc(var(--bs-gutter-x) * 5.5) | |
| } | |
| .px-14 { | |
| padding-left: calc(var(--bs-gutter-x) * 6); | |
| padding-right: calc(var(--bs-gutter-x) * 6) | |
| } | |
| .px-15 { | |
| padding-left: calc(var(--bs-gutter-x) * 6.5); | |
| padding-right: calc(var(--bs-gutter-x) * 6.5) | |
| } | |
| .px-16 { | |
| padding-left: calc(var(--bs-gutter-x) * 7); | |
| padding-right: calc(var(--bs-gutter-x) * 7) | |
| } | |
| .px-17 { | |
| padding-left: calc(var(--bs-gutter-x) * 7.5); | |
| padding-right: calc(var(--bs-gutter-x) * 7.5) | |
| } | |
| .px-18 { | |
| padding-left: calc(var(--bs-gutter-x) * 8); | |
| padding-right: calc(var(--bs-gutter-x) * 8) | |
| } | |
| .px-19 { | |
| padding-left: calc(var(--bs-gutter-x) * 8.5); | |
| padding-right: calc(var(--bs-gutter-x) * 8.5) | |
| } | |
| .px-20 { | |
| padding-left: calc(var(--bs-gutter-x) * 9); | |
| padding-right: calc(var(--bs-gutter-x) * 9) | |
| } | |
| .py-1 { | |
| padding-top: calc(var(--bs-gutter-x) * .125); | |
| padding-bottom: calc(var(--bs-gutter-x) * .125) | |
| } | |
| .py-2 { | |
| padding-top: calc(var(--bs-gutter-x) * .25); | |
| padding-bottom: calc(var(--bs-gutter-x) * .25) | |
| } | |
| .py-3 { | |
| padding-top: calc(var(--bs-gutter-x) * .5); | |
| padding-bottom: calc(var(--bs-gutter-x) * .5) | |
| } | |
| .py-4 { | |
| padding-top: calc(var(--bs-gutter-x) * 1); | |
| padding-bottom: calc(var(--bs-gutter-x) * 1) | |
| } | |
| .py-5 { | |
| padding-top: calc(var(--bs-gutter-x) * 1.5); | |
| padding-bottom: calc(var(--bs-gutter-x) * 1.5) | |
| } | |
| .py-6 { | |
| padding-top: calc(var(--bs-gutter-x) * 2); | |
| padding-bottom: calc(var(--bs-gutter-x) * 2) | |
| } | |
| .py-7 { | |
| padding-top: calc(var(--bs-gutter-x) * 2.5); | |
| padding-bottom: calc(var(--bs-gutter-x) * 2.5) | |
| } | |
| .py-8 { | |
| padding-top: calc(var(--bs-gutter-x) * 3); | |
| padding-bottom: calc(var(--bs-gutter-x) * 3) | |
| } | |
| .py-9 { | |
| padding-top: calc(var(--bs-gutter-x) * 3.5); | |
| padding-bottom: calc(var(--bs-gutter-x) * 3.5) | |
| } | |
| .py-10 { | |
| padding-top: calc(var(--bs-gutter-x) * 4); | |
| padding-bottom: calc(var(--bs-gutter-x) * 4) | |
| } | |
| .py-11 { | |
| padding-top: calc(var(--bs-gutter-x) * 4.5); | |
| padding-bottom: calc(var(--bs-gutter-x) * 4.5) | |
| } | |
| .py-12 { | |
| padding-top: calc(var(--bs-gutter-x) * 5); | |
| padding-bottom: calc(var(--bs-gutter-x) * 5) | |
| } | |
| .py-13 { | |
| padding-top: calc(var(--bs-gutter-x) * 5.5); | |
| padding-bottom: calc(var(--bs-gutter-x) * 5.5) | |
| } | |
| .py-14 { | |
| padding-top: calc(var(--bs-gutter-x) * 6); | |
| padding-bottom: calc(var(--bs-gutter-x) * 6) | |
| } | |
| .py-15 { | |
| padding-top: calc(var(--bs-gutter-x) * 6.5); | |
| padding-bottom: calc(var(--bs-gutter-x) * 6.5) | |
| } | |
| .py-16 { | |
| padding-top: calc(var(--bs-gutter-x) * 7); | |
| padding-bottom: calc(var(--bs-gutter-x) * 7) | |
| } | |
| .py-17 { | |
| padding-top: calc(var(--bs-gutter-x) * 7.5); | |
| padding-bottom: calc(var(--bs-gutter-x) * 7.5) | |
| } | |
| .py-18 { | |
| padding-top: calc(var(--bs-gutter-x) * 8); | |
| padding-bottom: calc(var(--bs-gutter-x) * 8) | |
| } | |
| .py-19 { | |
| padding-top: calc(var(--bs-gutter-x) * 8.5); | |
| padding-bottom: calc(var(--bs-gutter-x) * 8.5) | |
| } | |
| .py-20 { | |
| padding-top: calc(var(--bs-gutter-x) * 9); | |
| padding-bottom: calc(var(--bs-gutter-x) * 9) | |
| } | |
| .pt-1 { | |
| padding-top: calc(var(--bs-gutter-x) * .125) | |
| } | |
| .pt-2 { | |
| padding-top: calc(var(--bs-gutter-x) * .25) | |
| } | |
| .pt-3 { | |
| padding-top: calc(var(--bs-gutter-x) * .5) | |
| } | |
| .pt-4 { | |
| padding-top: calc(var(--bs-gutter-x) * 1) | |
| } | |
| .pt-5 { | |
| padding-top: calc(var(--bs-gutter-x) * 1.5) | |
| } | |
| .pt-6 { | |
| padding-top: calc(var(--bs-gutter-x) * 2) | |
| } | |
| .pt-7 { | |
| padding-top: calc(var(--bs-gutter-x) * 2.5) | |
| } | |
| .pt-8 { | |
| padding-top: calc(var(--bs-gutter-x) * 3) | |
| } | |
| .pt-9 { | |
| padding-top: calc(var(--bs-gutter-x) * 3.5) | |
| } | |
| .pt-10 { | |
| padding-top: calc(var(--bs-gutter-x) * 4) | |
| } | |
| .pt-11 { | |
| padding-top: calc(var(--bs-gutter-x) * 4.5) | |
| } | |
| .pt-12 { | |
| padding-top: calc(var(--bs-gutter-x) * 5) | |
| } | |
| .pt-13 { | |
| padding-top: calc(var(--bs-gutter-x) * 5.5) | |
| } | |
| .pt-14 { | |
| padding-top: calc(var(--bs-gutter-x) * 6) | |
| } | |
| .pt-15 { | |
| padding-top: calc(var(--bs-gutter-x) * 6.5) | |
| } | |
| .pt-16 { | |
| padding-top: calc(var(--bs-gutter-x) * 7) | |
| } | |
| .pt-17 { | |
| padding-top: calc(var(--bs-gutter-x) * 7.5) | |
| } | |
| .pt-18 { | |
| padding-top: calc(var(--bs-gutter-x) * 8) | |
| } | |
| .pt-19 { | |
| padding-top: calc(var(--bs-gutter-x) * 8.5) | |
| } | |
| .pt-20 { | |
| padding-top: calc(var(--bs-gutter-x) * 9) | |
| } | |
| .pb-1 { | |
| padding-bottom: calc(var(--bs-gutter-x) * .125) | |
| } | |
| .pb-2 { | |
| padding-bottom: calc(var(--bs-gutter-x) * .25) | |
| } | |
| .pb-3 { | |
| padding-bottom: calc(var(--bs-gutter-x) * .5) | |
| } | |
| .pb-4 { | |
| padding-bottom: calc(var(--bs-gutter-x) * 1) | |
| } | |
| .pb-5 { | |
| padding-bottom: calc(var(--bs-gutter-x) * 1.5) | |
| } | |
| .pb-6 { | |
| padding-bottom: calc(var(--bs-gutter-x) * 2) | |
| } | |
| .pb-7 { | |
| padding-bottom: calc(var(--bs-gutter-x) * 2.5) | |
| } | |
| .pb-8 { | |
| padding-bottom: calc(var(--bs-gutter-x) * 3) | |
| } | |
| .pb-9 { | |
| padding-bottom: calc(var(--bs-gutter-x) * 3.5) | |
| } | |
| .pb-10 { | |
| padding-bottom: calc(var(--bs-gutter-x) * 4) | |
| } | |
| .pb-11 { | |
| padding-bottom: calc(var(--bs-gutter-x) * 4.5) | |
| } | |
| .pb-12 { | |
| padding-bottom: calc(var(--bs-gutter-x) * 5) | |
| } | |
| .pb-13 { | |
| padding-bottom: calc(var(--bs-gutter-x) * 5.5) | |
| } | |
| .pb-14 { | |
| padding-bottom: calc(var(--bs-gutter-x) * 6) | |
| } | |
| .pb-15 { | |
| padding-bottom: calc(var(--bs-gutter-x) * 6.5) | |
| } | |
| .pb-16 { | |
| padding-bottom: calc(var(--bs-gutter-x) * 7) | |
| } | |
| .pb-17 { | |
| padding-bottom: calc(var(--bs-gutter-x) * 7.5) | |
| } | |
| .pb-18 { | |
| padding-bottom: calc(var(--bs-gutter-x) * 8) | |
| } | |
| .pb-19 { | |
| padding-bottom: calc(var(--bs-gutter-x) * 8.5) | |
| } | |
| .pb-20 { | |
| padding-bottom: calc(var(--bs-gutter-x) * 9) | |
| } | |
| /* pe,pr + ps,pl */ | |
| .pe-1, | |
| .pr-1 { | |
| padding-right: calc(var(--bs-gutter-x) * .125) | |
| } | |
| .pe-2, | |
| .pr-2 { | |
| padding-right: calc(var(--bs-gutter-x) * .25) | |
| } | |
| .pe-3, | |
| .pr-3 { | |
| padding-right: calc(var(--bs-gutter-x) * .5) | |
| } | |
| .pe-4, | |
| .pr-4 { | |
| padding-right: calc(var(--bs-gutter-x) * 1) | |
| } | |
| .pe-5, | |
| .pr-5 { | |
| padding-right: calc(var(--bs-gutter-x) * 1.5) | |
| } | |
| .pe-6, | |
| .pr-6 { | |
| padding-right: calc(var(--bs-gutter-x) * 2) | |
| } | |
| .pe-7, | |
| .pr-7 { | |
| padding-right: calc(var(--bs-gutter-x) * 2.5) | |
| } | |
| .pe-8, | |
| .pr-8 { | |
| padding-right: calc(var(--bs-gutter-x) * 3) | |
| } | |
| .pe-9, | |
| .pr-9 { | |
| padding-right: calc(var(--bs-gutter-x) * 3.5) | |
| } | |
| .pe-10, | |
| .pr-10 { | |
| padding-right: calc(var(--bs-gutter-x) * 4) | |
| } | |
| .pe-11, | |
| .pr-11 { | |
| padding-right: calc(var(--bs-gutter-x) * 4.5) | |
| } | |
| .pe-12, | |
| .pr-12 { | |
| padding-right: calc(var(--bs-gutter-x) * 5) | |
| } | |
| .pe-13, | |
| .pr-13 { | |
| padding-right: calc(var(--bs-gutter-x) * 5.5) | |
| } | |
| .pe-14, | |
| .pr-14 { | |
| padding-right: calc(var(--bs-gutter-x) * 6) | |
| } | |
| .pe-15, | |
| .pr-15 { | |
| padding-right: calc(var(--bs-gutter-x) * 6.5) | |
| } | |
| .pe-16, | |
| .pr-16 { | |
| padding-right: calc(var(--bs-gutter-x) * 7) | |
| } | |
| .pe-17, | |
| .pr-17 { | |
| padding-right: calc(var(--bs-gutter-x) * 7.5) | |
| } | |
| .pe-18, | |
| .pr-18 { | |
| padding-right: calc(var(--bs-gutter-x) * 8) | |
| } | |
| .pe-19, | |
| .pr-19 { | |
| padding-right: calc(var(--bs-gutter-x) * 8.5) | |
| } | |
| .pe-20, | |
| .pr-20 { | |
| padding-right: calc(var(--bs-gutter-x) * 9) | |
| } | |
| .ps-1,.pl-1 { | |
| padding-left: calc(var(--bs-gutter-x) * .125) | |
| } | |
| .ps-2,.pl-2 { | |
| padding-left: calc(var(--bs-gutter-x) * .25) | |
| } | |
| .ps-3,.pl-3 { | |
| padding-left: calc(var(--bs-gutter-x) * .5) | |
| } | |
| .ps-4,.pl-4 { | |
| padding-left: calc(var(--bs-gutter-x) * 1) | |
| } | |
| .ps-5,.pl-5 { | |
| padding-left: calc(var(--bs-gutter-x) * 1.5) | |
| } | |
| .ps-6,.pl-6 { | |
| padding-left: calc(var(--bs-gutter-x) * 2) | |
| } | |
| .ps-7,.pl-7 { | |
| padding-left: calc(var(--bs-gutter-x) * 2.5) | |
| } | |
| .ps-8,.pl-8 { | |
| padding-left: calc(var(--bs-gutter-x) * 3) | |
| } | |
| .ps-9,.pl-9 { | |
| padding-left: calc(var(--bs-gutter-x) * 3.5) | |
| } | |
| .ps-10,.pl-10 { | |
| padding-left: calc(var(--bs-gutter-x) * 4) | |
| } | |
| .ps-11,.pl-11 { | |
| padding-left: calc(var(--bs-gutter-x) * 4.5) | |
| } | |
| .ps-12,.pl-12 { | |
| padding-left: calc(var(--bs-gutter-x) * 5) | |
| } | |
| .ps-13,.pl-13 { | |
| padding-left: calc(var(--bs-gutter-x) * 5.5) | |
| } | |
| .ps-14,.pl-14 { | |
| padding-left: calc(var(--bs-gutter-x) * 6) | |
| } | |
| .ps-15,.pl-15 { | |
| padding-left: calc(var(--bs-gutter-x) * 6.5) | |
| } | |
| .ps-16,.pl-16 { | |
| padding-left: calc(var(--bs-gutter-x) * 7) | |
| } | |
| .ps-17,.pl-17 { | |
| padding-left: calc(var(--bs-gutter-x) * 7.5) | |
| } | |
| .ps-18,.pl-18 { | |
| padding-left: calc(var(--bs-gutter-x) * 8) | |
| } | |
| .ps-19,.pl-19 { | |
| padding-left: calc(var(--bs-gutter-x) * 8.5) | |
| } | |
| .ps-20,.pl-20 { | |
| padding-left: calc(var(--bs-gutter-x) * 9) | |
| } | |
| /* Custom Bootstrap Margins by Uziel Almeida Oliveira */ | |
| /* m-1 until m-20 */ | |
| .m-1 { | |
| margin: calc(var(--bs-gutter-x) * .125); | |
| } | |
| .m-2 { | |
| margin: calc(var(--bs-gutter-x) * .25); | |
| } | |
| .m-3 { | |
| margin: calc(var(--bs-gutter-x) * .5); | |
| } | |
| .m-4 { | |
| margin: calc(var(--bs-gutter-x) * 1); | |
| } | |
| .m-5 { | |
| margin: calc(var(--bs-gutter-x) * 1.5); | |
| } | |
| .m-6 { | |
| margin: calc(var(--bs-gutter-x) * 2); | |
| } | |
| .m-7 { | |
| margin: calc(var(--bs-gutter-x) * 2.5); | |
| } | |
| .m-8 { | |
| margin: calc(var(--bs-gutter-x) * 3); | |
| } | |
| .m-9 { | |
| margin: calc(var(--bs-gutter-x) * 3.5); | |
| } | |
| .m-10 { | |
| margin: calc(var(--bs-gutter-x) * 4); | |
| } | |
| .m-11 { | |
| margin: calc(var(--bs-gutter-x) * 4.5); | |
| } | |
| .m-12 { | |
| margin: calc(var(--bs-gutter-x) * 5); | |
| } | |
| .m-13 { | |
| margin: calc(var(--bs-gutter-x) * 5.5); | |
| } | |
| .m-14 { | |
| margin: calc(var(--bs-gutter-x) * 6); | |
| } | |
| .m-15 { | |
| margin: calc(var(--bs-gutter-x) * 6.5); | |
| } | |
| .m-16 { | |
| margin: calc(var(--bs-gutter-x) * 7); | |
| } | |
| .m-17 { | |
| margin: calc(var(--bs-gutter-x) * 7.5); | |
| } | |
| .m-18 { | |
| margin: calc(var(--bs-gutter-x) * 8); | |
| } | |
| .m-19 { | |
| margin: calc(var(--bs-gutter-x) * 8.5); | |
| } | |
| .m-20 { | |
| margin: calc(var(--bs-gutter-x) * 9); | |
| } | |
| /* mx,my,mt,mb */ | |
| .mx-1 { | |
| margin-left: calc(var(--bs-gutter-x) * .125); | |
| margin-right: calc(var(--bs-gutter-x) * .125); | |
| } | |
| .mx-2 { | |
| margin-left: calc(var(--bs-gutter-x) * .25); | |
| margin-right: calc(var(--bs-gutter-x) * .25); | |
| } | |
| .mx-3 { | |
| margin-left: calc(var(--bs-gutter-x) * .5); | |
| margin-right: calc(var(--bs-gutter-x) * .5); | |
| } | |
| .mx-4 { | |
| margin-left: calc(var(--bs-gutter-x) * 1); | |
| margin-right: calc(var(--bs-gutter-x) * 1); | |
| } | |
| .mx-5 { | |
| margin-left: calc(var(--bs-gutter-x) * 1.5); | |
| margin-right: calc(var(--bs-gutter-x) * 1.5); | |
| } | |
| .mx-6 { | |
| margin-left: calc(var(--bs-gutter-x) * 2); | |
| margin-right: calc(var(--bs-gutter-x) * 2); | |
| } | |
| .mx-7 { | |
| margin-left: calc(var(--bs-gutter-x) * 2.5); | |
| margin-right: calc(var(--bs-gutter-x) * 2.5); | |
| } | |
| .mx-8 { | |
| margin-left: calc(var(--bs-gutter-x) * 3); | |
| margin-right: calc(var(--bs-gutter-x) * 3); | |
| } | |
| .mx-9 { | |
| margin-left: calc(var(--bs-gutter-x) * 3.5); | |
| margin-right: calc(var(--bs-gutter-x) * 3.5); | |
| } | |
| .mx-10 { | |
| margin-left: calc(var(--bs-gutter-x) * 4); | |
| margin-right: calc(var(--bs-gutter-x) * 4); | |
| } | |
| .mx-11 { | |
| margin-left: calc(var(--bs-gutter-x) * 4.5); | |
| margin-right: calc(var(--bs-gutter-x) * 4.5); | |
| } | |
| .mx-12 { | |
| margin-left: calc(var(--bs-gutter-x) * 5); | |
| margin-right: calc(var(--bs-gutter-x) * 5); | |
| } | |
| .mx-13 { | |
| margin-left: calc(var(--bs-gutter-x) * 5.5); | |
| margin-right: calc(var(--bs-gutter-x) * 5.5); | |
| } | |
| .mx-14 { | |
| margin-left: calc(var(--bs-gutter-x) * 6); | |
| margin-right: calc(var(--bs-gutter-x) * 6); | |
| } | |
| .mx-15 { | |
| margin-left: calc(var(--bs-gutter-x) * 6.5); | |
| margin-right: calc(var(--bs-gutter-x) * 6.5); | |
| } | |
| .mx-16 { | |
| margin-left: calc(var(--bs-gutter-x) * 7); | |
| margin-right: calc(var(--bs-gutter-x) * 7); | |
| } | |
| .mx-17 { | |
| margin-left: calc(var(--bs-gutter-x) * 7.5); | |
| margin-right: calc(var(--bs-gutter-x) * 7.5); | |
| } | |
| .mx-18 { | |
| margin-left: calc(var(--bs-gutter-x) * 8); | |
| margin-right: calc(var(--bs-gutter-x) * 8); | |
| } | |
| .mx-19 { | |
| margin-left: calc(var(--bs-gutter-x) * 8.5); | |
| margin-right: calc(var(--bs-gutter-x) * 8.5); | |
| } | |
| .mx-20 { | |
| margin-left: calc(var(--bs-gutter-x) * 9); | |
| margin-right: calc(var(--bs-gutter-x) * 9); | |
| } | |
| .my-1 { | |
| margin-top: calc(var(--bs-gutter-x) * .125); | |
| margin-bottom: calc(var(--bs-gutter-x) * .125); | |
| } | |
| .my-2 { | |
| margin-top: calc(var(--bs-gutter-x) * .25); | |
| margin-bottom: calc(var(--bs-gutter-x) * .25); | |
| } | |
| .my-3 { | |
| margin-top: calc(var(--bs-gutter-x) * .5); | |
| margin-bottom: calc(var(--bs-gutter-x) * .5); | |
| } | |
| .my-4 { | |
| margin-top: calc(var(--bs-gutter-x) * 1); | |
| margin-bottom: calc(var(--bs-gutter-x) * 1); | |
| } | |
| .my-5 { | |
| margin-top: calc(var(--bs-gutter-x) * 1.5); | |
| margin-bottom: calc(var(--bs-gutter-x) * 1.5); | |
| } | |
| .my-6 { | |
| margin-top: calc(var(--bs-gutter-x) * 2); | |
| margin-bottom: calc(var(--bs-gutter-x) * 2); | |
| } | |
| .my-7 { | |
| margin-top: calc(var(--bs-gutter-x) * 2.5); | |
| margin-bottom: calc(var(--bs-gutter-x) * 2.5); | |
| } | |
| .my-8 { | |
| margin-top: calc(var(--bs-gutter-x) * 3); | |
| margin-bottom: calc(var(--bs-gutter-x) * 3); | |
| } | |
| .my-9 { | |
| margin-top: calc(var(--bs-gutter-x) * 3.5); | |
| margin-bottom: calc(var(--bs-gutter-x) * 3.5); | |
| } | |
| .my-10 { | |
| margin-top: calc(var(--bs-gutter-x) * 4); | |
| margin-bottom: calc(var(--bs-gutter-x) * 4); | |
| } | |
| .my-11 { | |
| margin-top: calc(var(--bs-gutter-x) * 4.5); | |
| margin-bottom: calc(var(--bs-gutter-x) * 4.5); | |
| } | |
| .my-12 { | |
| margin-top: calc(var(--bs-gutter-x) * 5); | |
| margin-bottom: calc(var(--bs-gutter-x) * 5); | |
| } | |
| .my-13 { | |
| margin-top: calc(var(--bs-gutter-x) * 5.5); | |
| margin-bottom: calc(var(--bs-gutter-x) * 5.5); | |
| } | |
| .my-14 { | |
| margin-top: calc(var(--bs-gutter-x) * 6); | |
| margin-bottom: calc(var(--bs-gutter-x) * 6); | |
| } | |
| .my-15 { | |
| margin-top: calc(var(--bs-gutter-x) * 6.5); | |
| margin-bottom: calc(var(--bs-gutter-x) * 6.5); | |
| } | |
| .my-16 { | |
| margin-top: calc(var(--bs-gutter-x) * 7); | |
| margin-bottom: calc(var(--bs-gutter-x) * 7); | |
| } | |
| .my-17 { | |
| margin-top: calc(var(--bs-gutter-x) * 7.5); | |
| margin-bottom: calc(var(--bs-gutter-x) * 7.5); | |
| } | |
| .my-18 { | |
| margin-top: calc(var(--bs-gutter-x) * 8); | |
| margin-bottom: calc(var(--bs-gutter-x) * 8); | |
| } | |
| .my-19 { | |
| margin-top: calc(var(--bs-gutter-x) * 8.5); | |
| margin-bottom: calc(var(--bs-gutter-x) * 8.5); | |
| } | |
| .my-20 { | |
| margin-top: calc(var(--bs-gutter-x) * 9); | |
| margin-bottom: calc(var(--bs-gutter-x) * 9); | |
| } | |
| .mt-1 { | |
| margin-top: calc(var(--bs-gutter-x) * .125); | |
| } | |
| .mt-2 { | |
| margin-top: calc(var(--bs-gutter-x) * .25); | |
| } | |
| .mt-3 { | |
| margin-top: calc(var(--bs-gutter-x) * .5); | |
| } | |
| .mt-4 { | |
| margin-top: calc(var(--bs-gutter-x) * 1); | |
| } | |
| .mt-5 { | |
| margin-top: calc(var(--bs-gutter-x) * 1.5); | |
| } | |
| .mt-6 { | |
| margin-top: calc(var(--bs-gutter-x) * 2); | |
| } | |
| .mt-7 { | |
| margin-top: calc(var(--bs-gutter-x) * 2.5); | |
| } | |
| .mt-8 { | |
| margin-top: calc(var(--bs-gutter-x) * 3); | |
| } | |
| .mt-9 { | |
| margin-top: calc(var(--bs-gutter-x) * 3.5); | |
| } | |
| .mt-10 { | |
| margin-top: calc(var(--bs-gutter-x) * 4); | |
| } | |
| .mt-11 { | |
| margin-top: calc(var(--bs-gutter-x) * 4.5); | |
| } | |
| .mt-12 { | |
| margin-top: calc(var(--bs-gutter-x) * 5); | |
| } | |
| .mt-13 { | |
| margin-top: calc(var(--bs-gutter-x) * 5.5); | |
| } | |
| .mt-14 { | |
| margin-top: calc(var(--bs-gutter-x) * 6); | |
| } | |
| .mt-15 { | |
| margin-top: calc(var(--bs-gutter-x) * 6.5); | |
| } | |
| .mt-16 { | |
| margin-top: calc(var(--bs-gutter-x) * 7); | |
| } | |
| .mt-17 { | |
| margin-top: calc(var(--bs-gutter-x) * 7.5); | |
| } | |
| .mt-18 { | |
| margin-top: calc(var(--bs-gutter-x) * 8); | |
| } | |
| .mt-19 { | |
| margin-top: calc(var(--bs-gutter-x) * 8.5); | |
| } | |
| .mt-20 { | |
| margin-top: calc(var(--bs-gutter-x) * 9); | |
| } | |
| .mb-1 { | |
| margin-bottom: calc(var(--bs-gutter-x) * .125); | |
| } | |
| .mb-2 { | |
| margin-bottom: calc(var(--bs-gutter-x) * .25); | |
| } | |
| .mb-3 { | |
| margin-bottom: calc(var(--bs-gutter-x) * .5); | |
| } | |
| .mb-4 { | |
| margin-bottom: calc(var(--bs-gutter-x) * 1); | |
| } | |
| .mb-5 { | |
| margin-bottom: calc(var(--bs-gutter-x) * 1.5); | |
| } | |
| .mb-6 { | |
| margin-bottom: calc(var(--bs-gutter-x) * 2); | |
| } | |
| .mb-7 { | |
| margin-bottom: calc(var(--bs-gutter-x) * 2.5); | |
| } | |
| .mb-8 { | |
| margin-bottom: calc(var(--bs-gutter-x) * 3); | |
| } | |
| .mb-9 { | |
| margin-bottom: calc(var(--bs-gutter-x) * 3.5); | |
| } | |
| .mb-10 { | |
| margin-bottom: calc(var(--bs-gutter-x) * 4); | |
| } | |
| .mb-11 { | |
| margin-bottom: calc(var(--bs-gutter-x) * 4.5); | |
| } | |
| .mb-12 { | |
| margin-bottom: calc(var(--bs-gutter-x) * 5); | |
| } | |
| .mb-13 { | |
| margin-bottom: calc(var(--bs-gutter-x) * 5.5); | |
| } | |
| .mb-14 { | |
| margin-bottom: calc(var(--bs-gutter-x) * 6); | |
| } | |
| .mb-15 { | |
| margin-bottom: calc(var(--bs-gutter-x) * 6.5); | |
| } | |
| .mb-16 { | |
| margin-bottom: calc(var(--bs-gutter-x) * 7); | |
| } | |
| .mb-17 { | |
| margin-bottom: calc(var(--bs-gutter-x) * 7.5); | |
| } | |
| .mb-18 { | |
| margin-bottom: calc(var(--bs-gutter-x) * 8); | |
| } | |
| .mb-19 { | |
| margin-bottom: calc(var(--bs-gutter-x) * 8.5); | |
| } | |
| .mb-20 { | |
| margin-bottom: calc(var(--bs-gutter-x) * 9); | |
| } | |
| /* me,mr + ms,ml */ | |
| .me-1, | |
| .mr-1 { | |
| margin-right: calc(var(--bs-gutter-x) * .125); | |
| } | |
| .me-2, | |
| .mr-2 { | |
| margin-right: calc(var(--bs-gutter-x) * .25); | |
| } | |
| .me-3, | |
| .mr-3 { | |
| margin-right: calc(var(--bs-gutter-x) * .5); | |
| } | |
| .me-4, | |
| .mr-4 { | |
| margin-right: calc(var(--bs-gutter-x) * 1); | |
| } | |
| .me-5, | |
| .mr-5 { | |
| margin-right: calc(var(--bs-gutter-x) * 1.5); | |
| } | |
| .me-6, | |
| .mr-6 { | |
| margin-right: calc(var(--bs-gutter-x) * 2); | |
| } | |
| .me-7, | |
| .mr-7 { | |
| margin-right: calc(var(--bs-gutter-x) * 2.5); | |
| } | |
| .me-8, | |
| .mr-8 { | |
| margin-right: calc(var(--bs-gutter-x) * 3); | |
| } | |
| .me-9, | |
| .mr-9 { | |
| margin-right: calc(var(--bs-gutter-x) * 3.5); | |
| } | |
| .me-10, | |
| .mr-10 { | |
| margin-right: calc(var(--bs-gutter-x) * 4); | |
| } | |
| .me-11, | |
| .mr-11 { | |
| margin-right: calc(var(--bs-gutter-x) * 4.5); | |
| } | |
| .me-12, | |
| .mr-12 { | |
| margin-right: calc(var(--bs-gutter-x) * 5); | |
| } | |
| .me-13, | |
| .mr-13 { | |
| margin-right: calc(var(--bs-gutter-x) * 5.5); | |
| } | |
| .me-14, | |
| .mr-14 { | |
| margin-right: calc(var(--bs-gutter-x) * 6); | |
| } | |
| .me-15, | |
| .mr-15 { | |
| margin-right: calc(var(--bs-gutter-x) * 6.5); | |
| } | |
| .me-16, | |
| .mr-16 { | |
| margin-right: calc(var(--bs-gutter-x) * 7); | |
| } | |
| .me-17, | |
| .mr-17 { | |
| margin-right: calc(var(--bs-gutter-x) * 7.5); | |
| } | |
| .me-18, | |
| .mr-18 { | |
| margin-right: calc(var(--bs-gutter-x) * 8); | |
| } | |
| .me-19, | |
| .mr-19 { | |
| margin-right: calc(var(--bs-gutter-x) * 8.5); | |
| } | |
| .me-20, | |
| .mr-20 { | |
| margin-right: calc(var(--bs-gutter-x) * 9); | |
| } | |
| .ms-1, | |
| .ml-1 { | |
| margin-left: calc(var(--bs-gutter-x) * .125); | |
| } | |
| .ms-2, | |
| .ml-2 { | |
| margin-left: calc(var(--bs-gutter-x) * .25); | |
| } | |
| .ms-3, | |
| .ml-3 { | |
| margin-left: calc(var(--bs-gutter-x) * .5); | |
| } | |
| .ms-4, | |
| .ml-4 { | |
| margin-left: calc(var(--bs-gutter-x) * 1); | |
| } | |
| .ms-5, | |
| .ml-5 { | |
| margin-left: calc(var(--bs-gutter-x) * 1.5); | |
| } | |
| .ms-6, | |
| .ml-6 { | |
| margin-left: calc(var(--bs-gutter-x) * 2); | |
| } | |
| .ms-7, | |
| .ml-7 { | |
| margin-left: calc(var(--bs-gutter-x) * 2.5); | |
| } | |
| .ms-8, | |
| .ml-8 { | |
| margin-left: calc(var(--bs-gutter-x) * 3); | |
| } | |
| .ms-9, | |
| .ml-9 { | |
| margin-left: calc(var(--bs-gutter-x) * 3.5); | |
| } | |
| .ms-10, | |
| .ml-10 { | |
| margin-left: calc(var(--bs-gutter-x) * 4); | |
| } | |
| .ms-11, | |
| .ml-11 { | |
| margin-left: calc(var(--bs-gutter-x) * 4.5); | |
| } | |
| .ms-12, | |
| .ml-12 { | |
| margin-left: calc(var(--bs-gutter-x) * 5); | |
| } | |
| .ms-13, | |
| .ml-13 { | |
| margin-left: calc(var(--bs-gutter-x) * 5.5); | |
| } | |
| .ms-14, | |
| .ml-14 { | |
| margin-left: calc(var(--bs-gutter-x) * 6); | |
| } | |
| .ms-15, | |
| .ml-15 { | |
| margin-left: calc(var(--bs-gutter-x) * 6.5); | |
| } | |
| .ms-16, | |
| .ml-16 { | |
| margin-left: calc(var(--bs-gutter-x) * 7); | |
| } | |
| .ms-17, | |
| .ml-17 { | |
| margin-left: calc(var(--bs-gutter-x) * 7.5); | |
| } | |
| .ms-18, | |
| .ml-18 { | |
| margin-left: calc(var(--bs-gutter-x) * 8); | |
| } | |
| .ms-19, | |
| .ml-19 { | |
| margin-left: calc(var(--bs-gutter-x) * 8.5); | |
| } | |
| .ms-20, | |
| .ml-20 { | |
| margin-left: calc(var(--bs-gutter-x) * 9); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment