diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 2322024241608de2e68c3e34114382323c3b2887..8b12444fd48f892c2a7165afcd6f130c7b160c9a 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -33,19 +33,107 @@ background-color: $gray-dark; } + +// // Spacing -.p-a { - padding: $spacer; +// + +.m-a-0 { margin: 0; } +.m-t-0 { margin-top: 0; } +.m-r-0 { margin-right: 0; } +.m-b-0 { margin-bottom: 0; } +.m-l-0 { margin-left: 0; } + +.m-a { margin: $spacer-base; } +.m-t { margin-top: $spacer-y; } +.m-r { margin-right: $spacer-x } +.m-b { margin-bottom: $spacer-y; } +.m-l { margin-left: $spacer-x; } +.m-x { + margin-right: $spacer-x; + margin-left: $spacer-x; +} +.m-y { + margin-top: $spacer-y; + margin-bottom: $spacer-y; +} + +.m-t-md { margin-top: ($spacer-y * 1.5); } +.m-r-md { margin-right: ($spacer-y * 1.5); } +.m-b-md { margin-bottom: ($spacer-y * 1.5); } +.m-l-md { margin-left: ($spacer-y * 1.5); } +.m-x-md { + margin-right: ($spacer-x * 1.5); + margin-left: ($spacer-x * 1.5); +} +.m-y-md { + margin-top: ($spacer-y * 1.5); + margin-bottom: ($spacer-y * 1.5); +} + +.m-t-lg { margin-top: ($spacer-y * 3); } +.m-r-lg { margin-right: ($spacer-y * 3); } +.m-b-lg { margin-bottom: ($spacer-y * 3); } +.m-l-lg { margin-left: ($spacer-y * 3); } +.m-x-lg { + margin-right: ($spacer-x * 3); + margin-left: ($spacer-x * 3); +} +.m-y-lg { + margin-top: ($spacer-y * 3); + margin-bottom: ($spacer-y * 3); } -.p-h { - padding-right: $spacer; - padding-left: $spacer; + + + +.p-a-0 { padding: 0; } +.p-t-0 { padding-top: 0; } +.p-r-0 { padding-right: 0; } +.p-b-0 { padding-bottom: 0; } +.p-l-0 { padding-left: 0; } + +.p-a { padding: $spacer-base; } +.p-t { padding-top: $spacer-y; } +.p-r { padding-right: $spacer-x } +.p-b { padding-bottom: $spacer-y; } +.p-l { padding-left: $spacer-x; } +.p-x { + padding-right: $spacer-x; + padding-left: $spacer-x; +} +.p-y { + padding-top: $spacer-y; + padding-bottom: $spacer-y; +} + +.p-t-md { padding-top: ($spacer-y * 1.5); } +.p-r-md { padding-right: ($spacer-y * 1.5); } +.p-b-md { padding-bottom: ($spacer-y * 1.5); } +.p-l-md { padding-left: ($spacer-y * 1.5); } +.p-x-md { + padding-right: ($spacer-x * 1.5); + padding-left: ($spacer-x * 1.5); +} +.p-y-md { + padding-top: ($spacer-y * 1.5); + padding-bottom: ($spacer-y * 1.5); +} + +.p-t-lg { padding-top: ($spacer-y * 3); } +.p-r-lg { padding-right: ($spacer-y * 3); } +.p-b-lg { padding-bottom: ($spacer-y * 3); } +.p-l-lg { padding-left: ($spacer-y * 3); } +.p-x-lg { + padding-right: ($spacer-x * 3); + padding-left: ($spacer-x * 3); } -.p-v { - padding-top: $spacer; - padding-bottom: $spacer; +.p-y-lg { + padding-top: ($spacer-y * 3); + padding-bottom: ($spacer-y * 3); } + + // Positioning .pos-f-t { position: fixed;