From 332c8c7cd07b29a24c0849bca514b14b4243ac47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn?= Date: Thu, 8 Jul 2021 23:57:48 +0200 Subject: [PATCH] adding spacing --- dist/plain-ui.css | 2536 ++++++++++++++++++++++++++++---- src/scss/helpers/_colors.scss | 8 + src/scss/helpers/_core.scss | 183 ++- src/scss/helpers/_spacing.scss | 60 +- src/scss/layout/_masonry.scss | 7 +- src/scss/plain-ui.scss | 2 - 6 files changed, 2411 insertions(+), 385 deletions(-) diff --git a/dist/plain-ui.css b/dist/plain-ui.css index 199b463..42bdec6 100644 --- a/dist/plain-ui.css +++ b/dist/plain-ui.css @@ -2533,31 +2533,30 @@ svg.field-choice__checked { display: flex; width: 100%; flex-flow: row wrap; + gap: 15px; } .masonry__item { width: 100%; height: 200px; - padding-left: 1px; - padding-bottom: 1px; } @media only screen and (min-width: 768px) { .masonry__item { height: 300px; } .masonry__item:nth-child(4n+1) { - width: 25%; + width: calc(25% - 10px); } .masonry__item:nth-child(4n+2) { - width: 55%; + width: calc(55% - 10px); } .masonry__item:nth-child(4n+3) { - width: 20%; + width: calc(20% - 10px); } .masonry__item:nth-child(4n+4) { - width: 67%; + width: calc(67% - 10px); } .masonry__item:nth-child(4n+5) { - width: 33%; + width: calc(33% - 10px); } } @@ -4048,6 +4047,240 @@ svg.field-choice__checked { * * */ +.border, .badge { + border: 1px solid #585858 !important; +} + +.border-round, .badge { + border-radius: 2px; +} + +.borderless { + border: 0 !important; +} + +.radiusless { + border-radius: 0 !important; +} + +/** + * z-index + * + * + */ +.z-index-1 { + z-index: 1; +} + +.z-index-2 { + z-index: 2; +} + +.z-index-3 { + z-index: 3; +} + +.z-index-4 { + z-index: 4; +} + +.z-index-5 { + z-index: 5; +} + +.z-index-6 { + z-index: 6; +} + +.z-index-7 { + z-index: 7; +} + +.z-index-8 { + z-index: 8; +} + +.z-index-9 { + z-index: 9; +} + +.z-index-10 { + z-index: 10; +} + +/** + * + * + */ +.round { + border-radius: 50%; +} + +/** + * typography + * + * + */ +.left { + text-align: left !important; +} + +.right { + text-align: right !important; +} + +.center { + text-align: center !important; +} + +.justify { + text-align: justify !important; +} + +.uppercase { + text-transform: uppercase !important; +} + +.lowercase { + text-transform: lowercase !important; +} + +.crossed { + text-decoration: line-through !important; +} + +.underline { + text-decoration: underline !important; +} + +.capitalize { + text-transform: capitalize !important; +} + +.italic { + font-style: italic !important; +} + +.light { + font-weight: lighter !important; +} + +.normal { + font-weight: normal !important; +} + +.medium { + font-weight: medium !important; +} + +.bold { + font-weight: bolder !important; +} + +.t-size-default { + font-size: 1rem !important; +} + +.t-size-small { + font-size: 0.75rem !important; +} + +.t-size-medium { + font-size: 1.5rem !important; +} + +.t-size-large { + font-size: 2rem !important; +} + +.t-size-big { + font-size: 3rem !important; +} + +/** + * floating + * + * + */ +.float-left { + float: left; +} + +.float-right { + float: right; +} + +.float-none { + float: none; +} + +.centered { + margin-left: auto; + margin-right: auto; +} + +.clearfix::before, .clearfix::after { + display: table; + content: " "; +} +.clearfix::after { + clear: both; +} + +/** + * position + * + * + */ +.absolute { + position: absolute !important; +} + +.fixed { + position: fixed !important; +} + +.relative { + position: relative !important; +} + +/** + * + * + */ +.vertical-align-bottom { + vertical-align: bottom; +} + +.vertical-align-top { + vertical-align: top; +} + +.vertical-align-baseline { + vertical-align: baseline; +} + +.marginless { + margin: 0 !important; +} + +/** + * + * + */ +.overflow-x-hidden { + overflow-x: hidden; +} + +.overflow-y-hidden { + overflow-y: hidden; +} + +.object-fit-cover { + -o-object-fit: cover; + object-fit: cover; +} + /** * Sizing * @@ -4584,38 +4817,263 @@ svg.field-choice__checked { margin-top: 0.125rem; } +@media only screen and (min-width: 576px) { + .m-top-xs-2 { + margin-top: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-2 { + margin-top: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-2 { + margin-top: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-2 { + margin-top: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-2 { + margin-top: 0.125rem; + } +} .m-top-3 { margin-top: 0.5rem; } -.m-top-4 { - margin-top: 1.125rem; -} - -.m-top-5 { - margin-top: 2rem; +@media only screen and (min-width: 576px) { + .m-top-xs-3 { + margin-top: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-3 { + margin-top: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-3 { + margin-top: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-3 { + margin-top: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-3 { + margin-top: 0.5rem; + } +} +.m-top-4 { + margin-top: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-4 { + margin-top: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-4 { + margin-top: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-4 { + margin-top: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-4 { + margin-top: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-4 { + margin-top: 1.125rem; + } +} +.m-top-5 { + margin-top: 2rem; } +@media only screen and (min-width: 576px) { + .m-top-xs-5 { + margin-top: 2rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-5 { + margin-top: 2rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-5 { + margin-top: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-5 { + margin-top: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-5 { + margin-top: 2rem; + } +} .m-top-6 { margin-top: 3.125rem; } +@media only screen and (min-width: 576px) { + .m-top-xs-6 { + margin-top: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-6 { + margin-top: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-6 { + margin-top: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-6 { + margin-top: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-6 { + margin-top: 3.125rem; + } +} .m-top-7 { margin-top: 4.5rem; } +@media only screen and (min-width: 576px) { + .m-top-xs-7 { + margin-top: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-7 { + margin-top: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-7 { + margin-top: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-7 { + margin-top: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-7 { + margin-top: 4.5rem; + } +} .m-top-8 { margin-top: 6.125rem; } +@media only screen and (min-width: 576px) { + .m-top-xs-8 { + margin-top: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-8 { + margin-top: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-8 { + margin-top: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-8 { + margin-top: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-8 { + margin-top: 6.125rem; + } +} .m-top-9 { margin-top: 8rem; } +@media only screen and (min-width: 576px) { + .m-top-xs-9 { + margin-top: 8rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-9 { + margin-top: 8rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-9 { + margin-top: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-9 { + margin-top: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-9 { + margin-top: 8rem; + } +} .m-top-10 { margin-top: 10.125rem; } +@media only screen and (min-width: 576px) { + .m-top-xs-10 { + margin-top: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-10 { + margin-top: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-10 { + margin-top: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-10 { + margin-top: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-10 { + margin-top: 10.125rem; + } +} .m-bottom-0 { margin-bottom: 0; } @@ -4628,38 +5086,263 @@ svg.field-choice__checked { margin-bottom: 0.125rem; } +@media only screen and (min-width: 576px) { + .m-bottom-xs-2 { + margin-bottom: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-2 { + margin-bottom: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-2 { + margin-bottom: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-2 { + margin-bottom: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-2 { + margin-bottom: 0.125rem; + } +} .m-bottom-3 { margin-bottom: 0.5rem; } +@media only screen and (min-width: 576px) { + .m-bottom-xs-3 { + margin-bottom: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-3 { + margin-bottom: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-3 { + margin-bottom: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-3 { + margin-bottom: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-3 { + margin-bottom: 0.5rem; + } +} .m-bottom-4 { margin-bottom: 1.125rem; } +@media only screen and (min-width: 576px) { + .m-bottom-xs-4 { + margin-bottom: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-4 { + margin-bottom: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-4 { + margin-bottom: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-4 { + margin-bottom: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-4 { + margin-bottom: 1.125rem; + } +} .m-bottom-5 { margin-bottom: 2rem; } +@media only screen and (min-width: 576px) { + .m-bottom-xs-5 { + margin-bottom: 2rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-5 { + margin-bottom: 2rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-5 { + margin-bottom: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-5 { + margin-bottom: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-5 { + margin-bottom: 2rem; + } +} .m-bottom-6 { margin-bottom: 3.125rem; } +@media only screen and (min-width: 576px) { + .m-bottom-xs-6 { + margin-bottom: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-6 { + margin-bottom: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-6 { + margin-bottom: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-6 { + margin-bottom: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-6 { + margin-bottom: 3.125rem; + } +} .m-bottom-7 { margin-bottom: 4.5rem; } +@media only screen and (min-width: 576px) { + .m-bottom-xs-7 { + margin-bottom: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-7 { + margin-bottom: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-7 { + margin-bottom: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-7 { + margin-bottom: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-7 { + margin-bottom: 4.5rem; + } +} .m-bottom-8 { margin-bottom: 6.125rem; } +@media only screen and (min-width: 576px) { + .m-bottom-xs-8 { + margin-bottom: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-8 { + margin-bottom: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-8 { + margin-bottom: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-8 { + margin-bottom: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-8 { + margin-bottom: 6.125rem; + } +} .m-bottom-9 { margin-bottom: 8rem; } +@media only screen and (min-width: 576px) { + .m-bottom-xs-9 { + margin-bottom: 8rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-9 { + margin-bottom: 8rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-9 { + margin-bottom: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-9 { + margin-bottom: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-9 { + margin-bottom: 8rem; + } +} .m-bottom-10 { margin-bottom: 10.125rem; } +@media only screen and (min-width: 576px) { + .m-bottom-xs-10 { + margin-bottom: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-10 { + margin-bottom: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-10 { + margin-bottom: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-10 { + margin-bottom: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-10 { + margin-bottom: 10.125rem; + } +} .m-left-0 { margin-left: 0; } @@ -4672,38 +5355,263 @@ svg.field-choice__checked { margin-left: 0.125rem; } +@media only screen and (min-width: 576px) { + .m-left-xs-2 { + margin-left: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-2 { + margin-left: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-2 { + margin-left: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-2 { + margin-left: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-2 { + margin-left: 0.125rem; + } +} .m-left-3 { margin-left: 0.5rem; } +@media only screen and (min-width: 576px) { + .m-left-xs-3 { + margin-left: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-3 { + margin-left: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-3 { + margin-left: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-3 { + margin-left: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-3 { + margin-left: 0.5rem; + } +} .m-left-4 { margin-left: 1.125rem; } +@media only screen and (min-width: 576px) { + .m-left-xs-4 { + margin-left: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-4 { + margin-left: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-4 { + margin-left: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-4 { + margin-left: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-4 { + margin-left: 1.125rem; + } +} .m-left-5 { margin-left: 2rem; } -.m-left-6 { - margin-left: 3.125rem; +@media only screen and (min-width: 576px) { + .m-left-xs-5 { + margin-left: 2rem; + } } - -.m-left-7 { - margin-left: 4.5rem; +@media only screen and (min-width: 768px) { + .m-left-sm-5 { + margin-left: 2rem; + } } - -.m-left-8 { - margin-left: 6.125rem; +@media only screen and (min-width: 992px) { + .m-left-md-5 { + margin-left: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-5 { + margin-left: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-5 { + margin-left: 2rem; + } +} +.m-left-6 { + margin-left: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-6 { + margin-left: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-6 { + margin-left: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-6 { + margin-left: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-6 { + margin-left: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-6 { + margin-left: 3.125rem; + } +} +.m-left-7 { + margin-left: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-7 { + margin-left: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-7 { + margin-left: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-7 { + margin-left: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-7 { + margin-left: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-7 { + margin-left: 4.5rem; + } +} +.m-left-8 { + margin-left: 6.125rem; } +@media only screen and (min-width: 576px) { + .m-left-xs-8 { + margin-left: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-8 { + margin-left: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-8 { + margin-left: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-8 { + margin-left: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-8 { + margin-left: 6.125rem; + } +} .m-left-9 { margin-left: 8rem; } +@media only screen and (min-width: 576px) { + .m-left-xs-9 { + margin-left: 8rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-9 { + margin-left: 8rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-9 { + margin-left: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-9 { + margin-left: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-9 { + margin-left: 8rem; + } +} .m-left-10 { margin-left: 10.125rem; } +@media only screen and (min-width: 576px) { + .m-left-xs-10 { + margin-left: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-10 { + margin-left: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-10 { + margin-left: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-10 { + margin-left: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-10 { + margin-left: 10.125rem; + } +} .m-right-0 { margin-right: 0; } @@ -4716,38 +5624,263 @@ svg.field-choice__checked { margin-right: 0.125rem; } +@media only screen and (min-width: 576px) { + .m-right-xs-2 { + margin-right: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-2 { + margin-right: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-2 { + margin-right: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-2 { + margin-right: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-2 { + margin-right: 0.125rem; + } +} .m-right-3 { margin-right: 0.5rem; } +@media only screen and (min-width: 576px) { + .m-right-xs-3 { + margin-right: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-3 { + margin-right: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-3 { + margin-right: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-3 { + margin-right: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-3 { + margin-right: 0.5rem; + } +} .m-right-4 { margin-right: 1.125rem; } +@media only screen and (min-width: 576px) { + .m-right-xs-4 { + margin-right: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-4 { + margin-right: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-4 { + margin-right: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-4 { + margin-right: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-4 { + margin-right: 1.125rem; + } +} .m-right-5 { margin-right: 2rem; } +@media only screen and (min-width: 576px) { + .m-right-xs-5 { + margin-right: 2rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-5 { + margin-right: 2rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-5 { + margin-right: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-5 { + margin-right: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-5 { + margin-right: 2rem; + } +} .m-right-6 { margin-right: 3.125rem; } +@media only screen and (min-width: 576px) { + .m-right-xs-6 { + margin-right: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-6 { + margin-right: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-6 { + margin-right: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-6 { + margin-right: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-6 { + margin-right: 3.125rem; + } +} .m-right-7 { margin-right: 4.5rem; } +@media only screen and (min-width: 576px) { + .m-right-xs-7 { + margin-right: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-7 { + margin-right: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-7 { + margin-right: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-7 { + margin-right: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-7 { + margin-right: 4.5rem; + } +} .m-right-8 { margin-right: 6.125rem; } +@media only screen and (min-width: 576px) { + .m-right-xs-8 { + margin-right: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-8 { + margin-right: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-8 { + margin-right: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-8 { + margin-right: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-8 { + margin-right: 6.125rem; + } +} .m-right-9 { margin-right: 8rem; } +@media only screen and (min-width: 576px) { + .m-right-xs-9 { + margin-right: 8rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-9 { + margin-right: 8rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-9 { + margin-right: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-9 { + margin-right: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-9 { + margin-right: 8rem; + } +} .m-right-10 { margin-right: 10.125rem; } +@media only screen and (min-width: 576px) { + .m-right-xs-10 { + margin-right: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-10 { + margin-right: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-10 { + margin-right: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-10 { + margin-right: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-10 { + margin-right: 10.125rem; + } +} .p-top-0 { padding-top: 0; } @@ -4760,46 +5893,321 @@ svg.field-choice__checked { padding-top: 0.125rem; } +@media only screen and (min-width: 576px) { + .p-top-xs-0 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-0 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-0 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-0 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-0 { + padding-top: 0.125rem; + } +} .p-top-1 { padding-top: 0rem; } +@media only screen and (min-width: 576px) { + .p-top-xs-1 { + padding-top: 0rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-1 { + padding-top: 0rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-1 { + padding-top: 0rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-1 { + padding-top: 0rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-1 { + padding-top: 0rem; + } +} .p-top-2 { padding-top: 0.125rem; } +@media only screen and (min-width: 576px) { + .p-top-xs-2 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-2 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-2 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-2 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-2 { + padding-top: 0.125rem; + } +} .p-top-3 { padding-top: 0.5rem; } +@media only screen and (min-width: 576px) { + .p-top-xs-3 { + padding-top: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-3 { + padding-top: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-3 { + padding-top: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-3 { + padding-top: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-3 { + padding-top: 0.5rem; + } +} .p-top-4 { padding-top: 1.125rem; } +@media only screen and (min-width: 576px) { + .p-top-xs-4 { + padding-top: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-4 { + padding-top: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-4 { + padding-top: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-4 { + padding-top: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-4 { + padding-top: 1.125rem; + } +} .p-top-5 { padding-top: 2rem; } -.p-top-6 { - padding-top: 3.125rem; +@media only screen and (min-width: 576px) { + .p-top-xs-5 { + padding-top: 2rem; + } } - -.p-top-7 { - padding-top: 4.5rem; +@media only screen and (min-width: 768px) { + .p-top-sm-5 { + padding-top: 2rem; + } } - -.p-top-8 { - padding-top: 6.125rem; +@media only screen and (min-width: 992px) { + .p-top-md-5 { + padding-top: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-5 { + padding-top: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-5 { + padding-top: 2rem; + } +} +.p-top-6 { + padding-top: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-6 { + padding-top: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-6 { + padding-top: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-6 { + padding-top: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-6 { + padding-top: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-6 { + padding-top: 3.125rem; + } +} +.p-top-7 { + padding-top: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-7 { + padding-top: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-7 { + padding-top: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-7 { + padding-top: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-7 { + padding-top: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-7 { + padding-top: 4.5rem; + } +} +.p-top-8 { + padding-top: 6.125rem; } +@media only screen and (min-width: 576px) { + .p-top-xs-8 { + padding-top: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-8 { + padding-top: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-8 { + padding-top: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-8 { + padding-top: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-8 { + padding-top: 6.125rem; + } +} .p-top-9 { padding-top: 8rem; } +@media only screen and (min-width: 576px) { + .p-top-xs-9 { + padding-top: 8rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-9 { + padding-top: 8rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-9 { + padding-top: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-9 { + padding-top: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-9 { + padding-top: 8rem; + } +} .p-top-10 { padding-top: 10.125rem; } +@media only screen and (min-width: 576px) { + .p-top-xs-10 { + padding-top: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-10 { + padding-top: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-10 { + padding-top: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-10 { + padding-top: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-10 { + padding-top: 10.125rem; + } +} .p-bottom-0 { padding-bottom: 0; } @@ -4812,46 +6220,321 @@ svg.field-choice__checked { padding-bottom: 0.125rem; } +@media only screen and (min-width: 576px) { + .p-bottom-xs-0 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-0 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-0 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-0 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-0 { + padding-bottom: 0.125rem; + } +} .p-bottom-1 { padding-bottom: 0rem; } +@media only screen and (min-width: 576px) { + .p-bottom-xs-1 { + padding-bottom: 0rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-1 { + padding-bottom: 0rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-1 { + padding-bottom: 0rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-1 { + padding-bottom: 0rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-1 { + padding-bottom: 0rem; + } +} .p-bottom-2 { padding-bottom: 0.125rem; } +@media only screen and (min-width: 576px) { + .p-bottom-xs-2 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-2 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-2 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-2 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-2 { + padding-bottom: 0.125rem; + } +} .p-bottom-3 { padding-bottom: 0.5rem; } +@media only screen and (min-width: 576px) { + .p-bottom-xs-3 { + padding-bottom: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-3 { + padding-bottom: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-3 { + padding-bottom: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-3 { + padding-bottom: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-3 { + padding-bottom: 0.5rem; + } +} .p-bottom-4 { padding-bottom: 1.125rem; } +@media only screen and (min-width: 576px) { + .p-bottom-xs-4 { + padding-bottom: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-4 { + padding-bottom: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-4 { + padding-bottom: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-4 { + padding-bottom: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-4 { + padding-bottom: 1.125rem; + } +} .p-bottom-5 { padding-bottom: 2rem; } +@media only screen and (min-width: 576px) { + .p-bottom-xs-5 { + padding-bottom: 2rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-5 { + padding-bottom: 2rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-5 { + padding-bottom: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-5 { + padding-bottom: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-5 { + padding-bottom: 2rem; + } +} .p-bottom-6 { padding-bottom: 3.125rem; } +@media only screen and (min-width: 576px) { + .p-bottom-xs-6 { + padding-bottom: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-6 { + padding-bottom: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-6 { + padding-bottom: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-6 { + padding-bottom: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-6 { + padding-bottom: 3.125rem; + } +} .p-bottom-7 { padding-bottom: 4.5rem; } +@media only screen and (min-width: 576px) { + .p-bottom-xs-7 { + padding-bottom: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-7 { + padding-bottom: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-7 { + padding-bottom: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-7 { + padding-bottom: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-7 { + padding-bottom: 4.5rem; + } +} .p-bottom-8 { padding-bottom: 6.125rem; } +@media only screen and (min-width: 576px) { + .p-bottom-xs-8 { + padding-bottom: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-8 { + padding-bottom: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-8 { + padding-bottom: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-8 { + padding-bottom: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-8 { + padding-bottom: 6.125rem; + } +} .p-bottom-9 { padding-bottom: 8rem; } +@media only screen and (min-width: 576px) { + .p-bottom-xs-9 { + padding-bottom: 8rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-9 { + padding-bottom: 8rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-9 { + padding-bottom: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-9 { + padding-bottom: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-9 { + padding-bottom: 8rem; + } +} .p-bottom-10 { padding-bottom: 10.125rem; } +@media only screen and (min-width: 576px) { + .p-bottom-xs-10 { + padding-bottom: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-10 { + padding-bottom: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-10 { + padding-bottom: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-10 { + padding-bottom: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-10 { + padding-bottom: 10.125rem; + } +} .p-left-0 { padding-left: 0; } @@ -4864,46 +6547,321 @@ svg.field-choice__checked { padding-left: 0.125rem; } +@media only screen and (min-width: 576px) { + .p-left-xs-0 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-0 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-0 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-0 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-0 { + padding-left: 0.125rem; + } +} .p-left-1 { padding-left: 0rem; } +@media only screen and (min-width: 576px) { + .p-left-xs-1 { + padding-left: 0rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-1 { + padding-left: 0rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-1 { + padding-left: 0rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-1 { + padding-left: 0rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-1 { + padding-left: 0rem; + } +} .p-left-2 { padding-left: 0.125rem; } +@media only screen and (min-width: 576px) { + .p-left-xs-2 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-2 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-2 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-2 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-2 { + padding-left: 0.125rem; + } +} .p-left-3 { padding-left: 0.5rem; } -.p-left-4 { - padding-left: 1.125rem; +@media only screen and (min-width: 576px) { + .p-left-xs-3 { + padding-left: 0.5rem; + } } - -.p-left-5 { - padding-left: 2rem; +@media only screen and (min-width: 768px) { + .p-left-sm-3 { + padding-left: 0.5rem; + } } - -.p-left-6 { - padding-left: 3.125rem; +@media only screen and (min-width: 992px) { + .p-left-md-3 { + padding-left: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-3 { + padding-left: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-3 { + padding-left: 0.5rem; + } +} +.p-left-4 { + padding-left: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-4 { + padding-left: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-4 { + padding-left: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-4 { + padding-left: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-4 { + padding-left: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-4 { + padding-left: 1.125rem; + } +} +.p-left-5 { + padding-left: 2rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-5 { + padding-left: 2rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-5 { + padding-left: 2rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-5 { + padding-left: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-5 { + padding-left: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-5 { + padding-left: 2rem; + } +} +.p-left-6 { + padding-left: 3.125rem; } +@media only screen and (min-width: 576px) { + .p-left-xs-6 { + padding-left: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-6 { + padding-left: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-6 { + padding-left: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-6 { + padding-left: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-6 { + padding-left: 3.125rem; + } +} .p-left-7 { padding-left: 4.5rem; } +@media only screen and (min-width: 576px) { + .p-left-xs-7 { + padding-left: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-7 { + padding-left: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-7 { + padding-left: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-7 { + padding-left: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-7 { + padding-left: 4.5rem; + } +} .p-left-8 { padding-left: 6.125rem; } +@media only screen and (min-width: 576px) { + .p-left-xs-8 { + padding-left: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-8 { + padding-left: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-8 { + padding-left: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-8 { + padding-left: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-8 { + padding-left: 6.125rem; + } +} .p-left-9 { padding-left: 8rem; } +@media only screen and (min-width: 576px) { + .p-left-xs-9 { + padding-left: 8rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-9 { + padding-left: 8rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-9 { + padding-left: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-9 { + padding-left: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-9 { + padding-left: 8rem; + } +} .p-left-10 { padding-left: 10.125rem; } +@media only screen and (min-width: 576px) { + .p-left-xs-10 { + padding-left: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-10 { + padding-left: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-10 { + padding-left: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-10 { + padding-left: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-10 { + padding-left: 10.125rem; + } +} .p-right-0 { padding-right: 0; } @@ -4916,336 +6874,374 @@ svg.field-choice__checked { padding-right: 0.125rem; } +@media only screen and (min-width: 576px) { + .p-right-xs-0 { + padding-right: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-0 { + padding-right: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-0 { + padding-right: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-0 { + padding-right: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-0 { + padding-right: 0.125rem; + } +} .p-right-1 { padding-right: 0rem; } +@media only screen and (min-width: 576px) { + .p-right-xs-1 { + padding-right: 0rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-1 { + padding-right: 0rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-1 { + padding-right: 0rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-1 { + padding-right: 0rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-1 { + padding-right: 0rem; + } +} .p-right-2 { padding-right: 0.125rem; } -.p-right-3 { - padding-right: 0.5rem; -} - -.p-right-4 { - padding-right: 1.125rem; +@media only screen and (min-width: 576px) { + .p-right-xs-2 { + padding-right: 0.125rem; + } } - -.p-right-5 { - padding-right: 2rem; +@media only screen and (min-width: 768px) { + .p-right-sm-2 { + padding-right: 0.125rem; + } } - -.p-right-6 { - padding-right: 3.125rem; +@media only screen and (min-width: 992px) { + .p-right-md-2 { + padding-right: 0.125rem; + } } - -.p-right-7 { - padding-right: 4.5rem; +@media only screen and (min-width: 1200px) { + .p-right-lg-2 { + padding-right: 0.125rem; + } } - -.p-right-8 { - padding-right: 6.125rem; +@media only screen and (min-width: 1600px) { + .p-right-xlg-2 { + padding-right: 0.125rem; + } } - -.p-right-9 { - padding-right: 8rem; +.p-right-3 { + padding-right: 0.5rem; } -.p-right-10 { - padding-right: 10.125rem; +@media only screen and (min-width: 576px) { + .p-right-xs-3 { + padding-right: 0.5rem; + } } - -.text-color-primary { - color: var(--primary); +@media only screen and (min-width: 768px) { + .p-right-sm-3 { + padding-right: 0.5rem; + } } - -.text-color-success { - color: var(--success); +@media only screen and (min-width: 992px) { + .p-right-md-3 { + padding-right: 0.5rem; + } } - -.text-color-white { - color: var(--white); +@media only screen and (min-width: 1200px) { + .p-right-lg-3 { + padding-right: 0.5rem; + } } - -.fill-primary { - fill: var(--primary); +@media only screen and (min-width: 1600px) { + .p-right-xlg-3 { + padding-right: 0.5rem; + } } - -.fill-success { - fill: var(--success); +.p-right-4 { + padding-right: 1.125rem; } -.fill-white { - fill: var(--white); +@media only screen and (min-width: 576px) { + .p-right-xs-4 { + padding-right: 1.125rem; + } } - -.border-color-primary { - border-color: var(--primary); +@media only screen and (min-width: 768px) { + .p-right-sm-4 { + padding-right: 1.125rem; + } } - -.border-color-success { - border-color: var(--success); +@media only screen and (min-width: 992px) { + .p-right-md-4 { + padding-right: 1.125rem; + } } - -.border-color-white { - border-color: var(--white); +@media only screen and (min-width: 1200px) { + .p-right-lg-4 { + padding-right: 1.125rem; + } } - -.background-color-primary { - background-color: var(--primary); +@media only screen and (min-width: 1600px) { + .p-right-xlg-4 { + padding-right: 1.125rem; + } } - -.background-color-success { - background-color: var(--success); +.p-right-5 { + padding-right: 2rem; } -.background-color-white { - background-color: var(--white); +@media only screen and (min-width: 576px) { + .p-right-xs-5 { + padding-right: 2rem; + } } - -/** - * borders - * - * - */ -.border, .badge { - border: 1px solid #585858 !important; +@media only screen and (min-width: 768px) { + .p-right-sm-5 { + padding-right: 2rem; + } } - -.border-round, .badge { - border-radius: 2px; +@media only screen and (min-width: 992px) { + .p-right-md-5 { + padding-right: 2rem; + } } - -.borderless { - border: 0 !important; +@media only screen and (min-width: 1200px) { + .p-right-lg-5 { + padding-right: 2rem; + } } - -.radiusless { - border-radius: 0 !important; +@media only screen and (min-width: 1600px) { + .p-right-xlg-5 { + padding-right: 2rem; + } } - -/** - * z-index - * - * - */ -.z-index-1 { - z-index: 1; +.p-right-6 { + padding-right: 3.125rem; } -.z-index-2 { - z-index: 2; +@media only screen and (min-width: 576px) { + .p-right-xs-6 { + padding-right: 3.125rem; + } } - -.z-index-3 { - z-index: 3; +@media only screen and (min-width: 768px) { + .p-right-sm-6 { + padding-right: 3.125rem; + } } - -.z-index-4 { - z-index: 4; +@media only screen and (min-width: 992px) { + .p-right-md-6 { + padding-right: 3.125rem; + } } - -.z-index-5 { - z-index: 5; +@media only screen and (min-width: 1200px) { + .p-right-lg-6 { + padding-right: 3.125rem; + } } - -.z-index-6 { - z-index: 6; +@media only screen and (min-width: 1600px) { + .p-right-xlg-6 { + padding-right: 3.125rem; + } } - -.z-index-7 { - z-index: 7; +.p-right-7 { + padding-right: 4.5rem; } -.z-index-8 { - z-index: 8; +@media only screen and (min-width: 576px) { + .p-right-xs-7 { + padding-right: 4.5rem; + } } - -.z-index-9 { - z-index: 9; +@media only screen and (min-width: 768px) { + .p-right-sm-7 { + padding-right: 4.5rem; + } } - -.z-index-10 { - z-index: 10; +@media only screen and (min-width: 992px) { + .p-right-md-7 { + padding-right: 4.5rem; + } } - -/** - * - * - */ -.round { - border-radius: 50%; +@media only screen and (min-width: 1200px) { + .p-right-lg-7 { + padding-right: 4.5rem; + } } - -/** - * typography - * - * - */ -.left { - text-align: left !important; +@media only screen and (min-width: 1600px) { + .p-right-xlg-7 { + padding-right: 4.5rem; + } } - -.right { - text-align: right !important; +.p-right-8 { + padding-right: 6.125rem; } -.center { - text-align: center !important; +@media only screen and (min-width: 576px) { + .p-right-xs-8 { + padding-right: 6.125rem; + } } - -.justify { - text-align: justify !important; +@media only screen and (min-width: 768px) { + .p-right-sm-8 { + padding-right: 6.125rem; + } } - -.uppercase { - text-transform: uppercase !important; +@media only screen and (min-width: 992px) { + .p-right-md-8 { + padding-right: 6.125rem; + } } - -.lowercase { - text-transform: lowercase !important; +@media only screen and (min-width: 1200px) { + .p-right-lg-8 { + padding-right: 6.125rem; + } } - -.crossed { - text-decoration: line-through !important; +@media only screen and (min-width: 1600px) { + .p-right-xlg-8 { + padding-right: 6.125rem; + } } - -.underline { - text-decoration: underline !important; +.p-right-9 { + padding-right: 8rem; } -.capitalize { - text-transform: capitalize !important; +@media only screen and (min-width: 576px) { + .p-right-xs-9 { + padding-right: 8rem; + } } - -.italic { - font-style: italic !important; +@media only screen and (min-width: 768px) { + .p-right-sm-9 { + padding-right: 8rem; + } } - -.light { - font-weight: lighter !important; +@media only screen and (min-width: 992px) { + .p-right-md-9 { + padding-right: 8rem; + } } - -.normal { - font-weight: normal !important; +@media only screen and (min-width: 1200px) { + .p-right-lg-9 { + padding-right: 8rem; + } } - -.medium { - font-weight: medium !important; +@media only screen and (min-width: 1600px) { + .p-right-xlg-9 { + padding-right: 8rem; + } } - -.bold { - font-weight: bolder !important; +.p-right-10 { + padding-right: 10.125rem; } -.t-size-default { - font-size: 1rem !important; +@media only screen and (min-width: 576px) { + .p-right-xs-10 { + padding-right: 10.125rem; + } } - -.t-size-small { - font-size: 0.75rem !important; +@media only screen and (min-width: 768px) { + .p-right-sm-10 { + padding-right: 10.125rem; + } } - -.t-size-medium { - font-size: 1.5rem !important; +@media only screen and (min-width: 992px) { + .p-right-md-10 { + padding-right: 10.125rem; + } } - -.t-size-large { - font-size: 2rem !important; +@media only screen and (min-width: 1200px) { + .p-right-lg-10 { + padding-right: 10.125rem; + } } - -.t-size-big { - font-size: 3rem !important; +@media only screen and (min-width: 1600px) { + .p-right-xlg-10 { + padding-right: 10.125rem; + } } - /** - * colors * * - */ -/** - * floating + * * * */ -.float-left { - float: left; -} - -.float-right { - float: right; -} - -.float-none { - float: none; -} - -.centered { - margin-left: auto; - margin-right: auto; +.text-color-primary { + color: var(--primary); } -.clearfix::before, .clearfix::after { - display: table; - content: " "; -} -.clearfix::after { - clear: both; +.text-color-success { + color: var(--success); } -/** - * position - * - * - */ -.absolute { - position: absolute !important; +.text-color-white { + color: var(--white); } -.fixed { - position: fixed !important; +.fill-primary { + fill: var(--primary); } -.relative { - position: relative !important; +.fill-success { + fill: var(--success); } -/** - * - * - */ -.vertical-align-bottom { - vertical-align: bottom; +.fill-white { + fill: var(--white); } -.vertical-align-top { - vertical-align: top; +.border-color-primary { + border-color: var(--primary); } -.vertical-align-baseline { - vertical-align: baseline; +.border-color-success { + border-color: var(--success); } -.marginless { - margin: 0 !important; +.border-color-white { + border-color: var(--white); } -/** - * - * - */ -.overflow-x-hidden { - overflow-x: hidden; +.background-color-primary { + background-color: var(--primary); } -.overflow-y-hidden { - overflow-y: hidden; +.background-color-success { + background-color: var(--success); } -.object-fit-cover { - -o-object-fit: cover; - object-fit: cover; +.background-color-white { + background-color: var(--white); } .figure { diff --git a/src/scss/helpers/_colors.scss b/src/scss/helpers/_colors.scss index 35792b7..90a5043 100644 --- a/src/scss/helpers/_colors.scss +++ b/src/scss/helpers/_colors.scss @@ -1,3 +1,11 @@ +/** + * + * + * + * + * + */ + @each $name, $color in $plain-ui__colors { .text-color-#{$name} { color: var(#{$color}); diff --git a/src/scss/helpers/_core.scss b/src/scss/helpers/_core.scss index 45c8655..7b98de6 100644 --- a/src/scss/helpers/_core.scss +++ b/src/scss/helpers/_core.scss @@ -5,29 +5,21 @@ * */ -@mixin plain-ui__helpers__core() -{ - /** - * borders - * - * - */ +.border { + border: $plain-ui__border !important; +} - .border { - border: $plain-ui__border !important; - } +.border-round { + border-radius: $plain-ui__border-radius; +} - .border-round { - border-radius: $plain-ui__border-radius; - } - - .borderless { - border: 0 !important; - } +.borderless { + border: 0 !important; +} - .radiusless { - border-radius: 0 !important; - } +.radiusless { + border-radius: 0 !important; +} /** * z-index @@ -110,105 +102,96 @@ font-weight: medium !important; } - .bold { - font-weight: bolder !important; - } +.bold { + font-weight: bolder !important; +} - @each $name, $font-size in $plain-ui__font-sizes { - .t-size-#{$name} { - font-size: $font-size !important; - //@include plain-ui__breakpoints-font-size($plain-ui__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true); - } +@each $name, $font-size in $plain-ui__font-sizes { + .t-size-#{$name} { + font-size: $font-size !important; + //@include plain-ui__breakpoints-font-size($plain-ui__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true); } +} - /** - * colors - * - * - */ - - - - /** - * floating - * - * - */ +/** + * floating + * + * + */ - .float-left { - float: left; - } +.float-left { + float: left; +} - .float-right { - float: right; - } +.float-right { + float: right; +} - .float-none { - float: none; - } +.float-none { + float: none; +} - .centered { - margin-left: auto; - margin-right: auto; - } +.centered { + margin-left: auto; + margin-right: auto; +} - .clearfix { - @include plain-ui__clearfix(); - } +.clearfix { + @include plain-ui__clearfix(); +} - /** - * position - * - * - */ +/** + * position + * + * + */ - .absolute { - position: absolute !important; - } +.absolute { + position: absolute !important; +} - .fixed { - position: fixed !important; - } +.fixed { + position: fixed !important; +} - .relative { - position: relative !important; - } +.relative { + position: relative !important; +} - /** - * - * - */ +/** + * + * + */ - .vertical-align-bottom { - vertical-align: bottom; - } +.vertical-align-bottom { + vertical-align: bottom; +} - .vertical-align-top { - vertical-align: top; - } +.vertical-align-top { + vertical-align: top; +} - .vertical-align-baseline { - vertical-align: baseline; - } +.vertical-align-baseline { + vertical-align: baseline; +} - .marginless { - margin: 0 !important; - } +.marginless { + margin: 0 !important; +} - /** - * - * - */ +/** + * + * + */ - .overflow-x-hidden { - overflow-x: hidden; - } +.overflow-x-hidden { + overflow-x: hidden; +} - .overflow-y-hidden { - overflow-y: hidden; - } +.overflow-y-hidden { + overflow-y: hidden; +} - .object-fit-cover { - object-fit: cover; - } +.object-fit-cover { + object-fit: cover; } \ No newline at end of file diff --git a/src/scss/helpers/_spacing.scss b/src/scss/helpers/_spacing.scss index 11fc561..55b30b7 100644 --- a/src/scss/helpers/_spacing.scss +++ b/src/scss/helpers/_spacing.scss @@ -5,8 +5,8 @@ $plain-ui__spacing-direction: ( 'right' ) !default; -$plain-ui__helpers__spacing-gap: 0.25 !default; -$plain-ui__helpers__spacing-steps: 10 !default; +$plain-ui__spacing-gap: 0.25 !default; +$plain-ui__spacing-steps: 10 !default; /** * @@ -19,24 +19,64 @@ $plain-ui__helpers__spacing-steps: 10 !default; } } -@each $direction in $plain-ui__spacing-direction { - +@each $direction in $plain-ui__spacing-direction +{ @include spacing('m', 'margin', $direction, 0, 0); @include spacing('m', 'margin', $direction, 1, 1px); - @for $i from 2 through $plain-ui__helpers__spacing-steps { - $value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem; + @for $i from 2 through $plain-ui__spacing-steps { + $value: $plain-ui__spacing-gap * factor($i - 1) * 1rem; @include spacing('m', 'margin', $direction, $i, $value); + + @include plain-ui__media-xs() { + @include spacing('m', 'margin', $direction, 'xs-' + $i, $value); + } + + @include plain-ui__media-sm() { + @include spacing('m', 'margin', $direction, 'sm-' + $i, $value); + } + + @include plain-ui__media-md() { + @include spacing('m', 'margin', $direction, 'md-' + $i, $value); + } + + @include plain-ui__media-lg() { + @include spacing('m', 'margin', $direction, 'lg-' + $i, $value); + } + + @include plain-ui__media-xlg() { + @include spacing('m', 'margin', $direction, 'xlg-' + $i, $value); + } } } -@each $direction in $plain-ui__spacing-direction { - +@each $direction in $plain-ui__spacing-direction +{ @include spacing('p', 'padding', $direction, 0, 0); @include spacing('p', 'padding', $direction, 1, 1px); - @for $i from 0 through $plain-ui__helpers__spacing-steps { - $value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem; + @for $i from 0 through $plain-ui__spacing-steps { + $value: $plain-ui__spacing-gap * factor($i - 1) * 1rem; @include spacing('p', 'padding', $direction, $i, $value); + + @include plain-ui__media-xs() { + @include spacing('p', 'padding', $direction, 'xs-' + $i, $value); + } + + @include plain-ui__media-sm() { + @include spacing('p', 'padding', $direction, 'sm-' + $i, $value); + } + + @include plain-ui__media-md() { + @include spacing('p', 'padding', $direction, 'md-' + $i, $value); + } + + @include plain-ui__media-lg() { + @include spacing('p', 'padding', $direction, 'lg-' + $i, $value); + } + + @include plain-ui__media-xlg() { + @include spacing('p', 'padding', $direction, 'xlg-' + $i, $value); + } } } \ No newline at end of file diff --git a/src/scss/layout/_masonry.scss b/src/scss/layout/_masonry.scss index 1858889..8d7348e 100644 --- a/src/scss/layout/_masonry.scss +++ b/src/scss/layout/_masonry.scss @@ -23,17 +23,18 @@ $plain-ui__masonry_sizes: ( $plain-ui__masonry_height: 200px !default; $plain-ui__masonry_height--sm: 300px !default; +$plain-ui__masonry_gap: 15px !default; +$plain-ui__masonry_gap-offset: 10px !default; .masonry { display: flex; width: 100%; flex-flow: row wrap; + gap: $plain-ui__masonry_gap; &__item { width: 100%; height: $plain-ui__masonry_height; - padding-left: 1px; - padding-bottom: 1px; @include plain-ui__media-sm() { height: $plain-ui__masonry_height--sm; @@ -41,7 +42,7 @@ $plain-ui__masonry_height--sm: 300px !default; // add width from data @each $index, $size in $plain-ui__masonry_sizes { &:nth-child(4n+#{$index}) { - width: #{$size}; + width: calc(#{$size} - #{$plain-ui__masonry_gap-offset}); } } } diff --git a/src/scss/plain-ui.scss b/src/scss/plain-ui.scss index 07fdd44..ac8c8c9 100644 --- a/src/scss/plain-ui.scss +++ b/src/scss/plain-ui.scss @@ -31,8 +31,6 @@ 'helpers/spacing', 'helpers/colors'; -@include plain-ui__helpers__core(); - @include plain-ui__component__media(); @include plain-ui__component__table(); @include plain-ui__component__slider();