Created
January 22, 2023 08:50
-
-
Save digisavvy/a2f9f1b2a80e244946e92a977a08e32e to your computer and use it in GitHub Desktop.
From BricksForge CSS Framework
This file contains hidden or 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
:root { | |
--brf-color-primary: #14854F; | |
--brf-color-lightGrey: #d2d6dd; | |
--brf-color-grey: #747681; | |
--brf-color-darkGrey: #3f4144; | |
--brf-color-error: #d43939; | |
--brf-color-success: #28bd14; | |
--brf-grid-maxWidth: 120rem; | |
--brf-grid-gutter: 2rem; | |
--brf-font-size: 1.6rem; | |
--brf-h1-font-size: clamp(2.4rem,calc(2.4rem + ((1vw - 0.32rem) * 7.8351)),10rem); | |
--brf-h1-line-height: 1.3em; | |
--brf-h2-font-size: clamp(2rem,calc(2rem + ((1vw - 0.32rem) * 6.1856)),8rem); | |
--brf-h2-line-height: 1.3em; | |
--brf-h3-font-size: clamp(1.8rem,calc(1.8rem + ((1vw - 0.32rem) * 4.3299)),6rem); | |
--brf-h3-line-height: 1.3em; | |
--brf-h4-font-size: clamp(1.4rem,calc(1.4rem + ((1vw - 0.32rem) * 2.6804)),4rem); | |
--brf-h4-line-height: 1.3em; | |
--brf-h5-font-size: clamp(1.4rem,calc(1.4rem + ((1vw - 0.32rem) * 2.6804)),4rem); | |
--brf-h5-line-height: 1.3em; | |
--brf-h6-font-size: clamp(1.4rem,calc(1.4rem + ((1vw - 0.32rem) * 2.6804)),4rem); | |
--brf-h6-line-height: 1.3em; | |
--brf-p-font-size: clamp(1.4rem,calc(1.4rem + ((1vw - 0.32rem) * 0.4124)),1.8rem); | |
--brf-p-line-height: 1.3em; | |
--brf-font-color: #333333; | |
--brf-spacing-xs: 5px; | |
--brf-spacing-s: 15px; | |
--brf-spacing-m: 20px; | |
--brf-spacing-l: 25px; | |
--brf-spacing-xl: 35px; | |
--brf-spacing-xxl: 50px; | |
} | |
/** | |
Grid | |
*/ | |
.container { | |
max-width: var(--brf-grid-maxWidth); | |
margin: 0 auto; | |
width: 96%; | |
padding: 0 calc(var(--brf-grid-gutter) / 2); | |
} | |
.row { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-orient: horizontal; | |
-webkit-box-direction: normal; | |
-ms-flex-flow: row wrap; | |
flex-flow: row wrap; | |
-webkit-box-pack: start; | |
-ms-flex-pack: start; | |
justify-content: flex-start; | |
margin-left: calc(var(--brf-grid-gutter) / -2); | |
margin-right: calc(var(--brf-grid-gutter) / -2); | |
} | |
.row.reverse { | |
-webkit-box-orient: horizontal; | |
-webkit-box-direction: reverse; | |
-ms-flex-direction: row-reverse; | |
flex-direction: row-reverse; | |
} | |
.col { | |
-webkit-box-flex: 1; | |
-ms-flex: 1; | |
flex: 1; | |
} | |
.col, | |
[class*=" brf-col-"], | |
[class^='brf-col-'] { | |
margin: 0 calc(var(--brf-grid-gutter) / 2) calc(var(--brf-grid-gutter) / 2); | |
} | |
.col-1 { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/1)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/1)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/1)) - var(--brf-grid-gutter)); | |
} | |
.col-2 { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/2)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/2)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/2)) - var(--brf-grid-gutter)); | |
} | |
.col-3 { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/3)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/3)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/3)) - var(--brf-grid-gutter)); | |
} | |
.col-4 { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/4)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/4)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/4)) - var(--brf-grid-gutter)); | |
} | |
.col-5 { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/5)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/5)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/5)) - var(--brf-grid-gutter)); | |
} | |
.col-6 { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/6)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/6)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/6)) - var(--brf-grid-gutter)); | |
} | |
.col-7 { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/7)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/7)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/7)) - var(--brf-grid-gutter)); | |
} | |
.col-8 { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/8)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/8)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/8)) - var(--brf-grid-gutter)); | |
} | |
.col-9 { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/9)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/9)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/9)) - var(--brf-grid-gutter)); | |
} | |
.col-10 { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/10)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/10)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/10)) - var(--brf-grid-gutter)); | |
} | |
.col-11 { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/11)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/11)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/11)) - var(--brf-grid-gutter)); | |
} | |
.col-12 { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/12)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/12)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/12)) - var(--brf-grid-gutter)); | |
} | |
@media screen and (max-width: 599px) { | |
.container { | |
width: 100%; | |
} | |
.col, | |
[class*="col-"], | |
[class^='col-'] { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 1 100%; | |
flex: 0 1 100%; | |
max-width: 100%; | |
} | |
} | |
@media screen and (min-width: 900px) { | |
.col-1-md { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/1)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/1)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/1)) - var(--brf-grid-gutter)); | |
} | |
.col-2-md { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/2)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/2)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/2)) - var(--brf-grid-gutter)); | |
} | |
.col-3-md { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/3)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/3)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/3)) - var(--brf-grid-gutter)); | |
} | |
.col-4-md { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/4)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/4)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/4)) - var(--brf-grid-gutter)); | |
} | |
.col-5-md { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/5)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/5)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/5)) - var(--brf-grid-gutter)); | |
} | |
.col-6-md { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/6)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/6)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/6)) - var(--brf-grid-gutter)); | |
} | |
.col-7-md { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/7)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/7)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/7)) - var(--brf-grid-gutter)); | |
} | |
.col-8-md { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/8)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/8)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/8)) - var(--brf-grid-gutter)); | |
} | |
.col-9-md { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/9)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/9)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/9)) - var(--brf-grid-gutter)); | |
} | |
.col-10-md { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/10)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/10)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/10)) - var(--brf-grid-gutter)); | |
} | |
.col-11-md { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/11)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/11)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/11)) - var(--brf-grid-gutter)); | |
} | |
.col-12-md { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/12)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/12)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/12)) - var(--brf-grid-gutter)); | |
} | |
} | |
@media screen and (min-width: 1200px) { | |
.col-1-lg { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/1)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/1)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/1)) - var(--brf-grid-gutter)); | |
} | |
.col-2-lg { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/2)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/2)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/2)) - var(--brf-grid-gutter)); | |
} | |
.col-3-lg { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/3)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/3)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/3)) - var(--brf-grid-gutter)); | |
} | |
.col-4-lg { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/4)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/4)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/4)) - var(--brf-grid-gutter)); | |
} | |
.col-5-lg { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/5)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/5)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/5)) - var(--brf-grid-gutter)); | |
} | |
.col-6-lg { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/6)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/6)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/6)) - var(--brf-grid-gutter)); | |
} | |
.col-7-lg { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/7)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/7)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/7)) - var(--brf-grid-gutter)); | |
} | |
.col-8-lg { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/8)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/8)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/8)) - var(--brf-grid-gutter)); | |
} | |
.col-9-lg { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/9)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/9)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/9)) - var(--brf-grid-gutter)); | |
} | |
.col-10-lg { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/10)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/10)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/10)) - var(--brf-grid-gutter)); | |
} | |
.col-11-lg { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/11)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/11)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/11)) - var(--brf-grid-gutter)); | |
} | |
.col-12-lg { | |
-webkit-box-flex: 0; | |
-ms-flex: 0 0 calc((100% / (12/12)) - var(--brf-grid-gutter)); | |
flex: 0 0 calc((100% / (12/12)) - var(--brf-grid-gutter)); | |
max-width: calc((100% / (12/12)) - var(--brf-grid-gutter)); | |
} | |
} | |
/* | |
Colors | |
*/ | |
.bg-primary { | |
background-color: var(--brf-color-primary) !important; | |
} | |
.bg-light { | |
background-color: var(--brf-color-lightGrey) !important; | |
} | |
.bg-dark { | |
background-color: var(--brf-color-darkGrey) !important; | |
} | |
.bg-grey { | |
background-color: var(--brf-color-grey) !important; | |
} | |
.bg-error { | |
background-color: var(--brf-color-error) !important; | |
} | |
.bg-success { | |
background-color: var(--brf-color-success) !important; | |
} | |
.bd-primary { | |
border: 1px solid var(--brf-color-primary) !important; | |
} | |
.bd-light { | |
border: 1px solid var(--brf-color-lightGrey) !important; | |
} | |
.bd-dark { | |
border: 1px solid var(--brf-color-darkGrey) !important; | |
} | |
.bd-grey { | |
border: 1px solid var(--brf-color-grey) !important; | |
} | |
.bd-error { | |
border: 1px solid var(--brf-color-error) !important; | |
} | |
.bd-success { | |
border: 1px solid var(--brf-color-success) !important; | |
} | |
.text-primary { | |
color: var(--brf-color-primary) !important; | |
} | |
.text-light { | |
color: var(--brf-color-lightGrey) !important; | |
} | |
.text-dark { | |
color: var(--brf-color-darkGrey) !important; | |
} | |
.text-grey { | |
color: var(--brf-color-grey) !important; | |
} | |
.text-error { | |
color: var(--brf-color-error) !important; | |
} | |
.text-success { | |
color: var(--brf-color-success) !important; | |
} | |
.text-white { | |
color: #fff !important; | |
} | |
/** | |
Position & alignment | |
*/ | |
.pull-right { | |
float: right !important; | |
} | |
.pull-left { | |
float: left !important; | |
} | |
.text-center { | |
text-align: center; | |
} | |
.text-left { | |
text-align: left; | |
} | |
.text-right { | |
text-align: right; | |
} | |
.text-justify { | |
text-align: justify; | |
} | |
.text-uppercase { | |
text-transform: uppercase; | |
} | |
.text-lowercase { | |
text-transform: lowercase; | |
} | |
.text-capitalize { | |
text-transform: capitalize; | |
} | |
.is-full-screen { | |
width: 100%; | |
min-height: 100vh; | |
} | |
.is-full-width { | |
width: 100% !important; | |
} | |
.is-vertical-align { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
} | |
.is-horizontal-align { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-pack: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
} | |
.is-center { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
-webkit-box-pack: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
} | |
.is-right { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
-webkit-box-pack: end; | |
-ms-flex-pack: end; | |
justify-content: flex-end; | |
} | |
.is-left { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
-webkit-box-pack: start; | |
-ms-flex-pack: start; | |
justify-content: flex-start; | |
} | |
.is-fixed { | |
position: fixed; | |
width: 100%; | |
} | |
.is-paddingless { | |
padding: 0 !important; | |
} | |
.is-marginless { | |
margin: 0 !important; | |
} | |
.is-pointer { | |
cursor: pointer !important; | |
} | |
.is-rounded { | |
border-radius: 100%; | |
} | |
.clearfix { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
.is-hidden { | |
display: none !important; | |
} | |
@media screen and (max-width: 599px) { | |
.hide-xs { | |
display: none !important; | |
} | |
} | |
@media screen and (min-width: 600px) and (max-width: 899px) { | |
.hide-sm { | |
display: none !important; | |
} | |
} | |
@media screen and (min-width: 900px) and (max-width: 1199px) { | |
.hide-md { | |
display: none !important; | |
} | |
} | |
@media screen and (min-width: 1200px) { | |
.hide-lg { | |
display: none !important; | |
} | |
} | |
@media print { | |
.hide-pr { | |
display: none !important; | |
} | |
} | |
/** | |
Typography | |
*/ | |
.p { | |
font-size: var(--brf-p-font-size); | |
line-height: var(--brf-p-line-height); | |
} | |
.h1 { | |
font-size: var(--brf-h1-font-size); | |
line-height: var(--brf-h1-line-height); | |
} | |
.h2 { | |
font-size: var(--brf-h2-font-size); | |
line-height: var(--brf-h2-line-height); | |
} | |
.h3 { | |
font-size: var(--brf-h3-font-size); | |
line-height: var(--brf-h3-line-height); | |
} | |
.h4 { | |
font-size: var(--brf-h4-font-size); | |
line-height: var(--brf-h4-line-height); | |
} | |
.h5 { | |
font-size: var(--brf-h5-font-size); | |
line-height: var(--brf-h5-line-height); | |
} | |
.h6 { | |
font-size: var(--brf-h6-font-size); | |
line-height: var(--brf-h6-line-height); | |
} | |
/** | |
Margin & Padding | |
*/ | |
.m-0 { | |
margin: 0; | |
} | |
.m-xs { | |
margin: var(--brf-spacing-xs); | |
} | |
.m-s { | |
margin: var(--brf-spacing-s); | |
} | |
.m-m { | |
margin: var(--brf-spacing-m); | |
} | |
.m-l { | |
margin: var(--brf-spacing-l); | |
} | |
.m-xl { | |
margin: var(--brf-spacing-xl); | |
} | |
.m-xxl { | |
margin: var(--brf-spacing-xxl); | |
} | |
.mt-0 { | |
margin-top: 0; | |
} | |
.mt-xs { | |
margin-top: var(--brf-spacing-xs); | |
} | |
.mt-s { | |
margin-top: var(--brf-spacing-s); | |
} | |
.mt-m { | |
margin-top: var(--brf-spacing-m); | |
} | |
.mt-l { | |
margin-top: var(--brf-spacing-l); | |
} | |
.mt-xl { | |
margin-top: var(--brf-spacing-xl); | |
} | |
.mt-xxl { | |
margin-top: var(--brf-spacing-xxl); | |
} | |
.mr-0 { | |
margin-right: 0; | |
} | |
.mr-xs { | |
margin-right: var(--brf-spacing-xs); | |
} | |
.mr-s { | |
margin-right: var(--brf-spacing-s); | |
} | |
.mr-m { | |
margin-right: var(--brf-spacing-m); | |
} | |
.mr-l { | |
margin-right: var(--brf-spacing-l); | |
} | |
.mr-xl { | |
margin-right: var(--brf-spacing-xl); | |
} | |
.mr-xxl { | |
margin-right: var(--brf-spacing-xxl); | |
} | |
.mb-0 { | |
margin-bottom: 0; | |
} | |
.mb-xs { | |
margin-bottom: var(--brf-spacing-xs); | |
} | |
.mb-s { | |
margin-bottom: var(--brf-spacing-s); | |
} | |
.mb-m { | |
margin-bottom: var(--brf-spacing-m); | |
} | |
.mb-l { | |
margin-bottom: var(--brf-spacing-l); | |
} | |
.mb-xl { | |
margin-bottom: var(--brf-spacing-xl); | |
} | |
.mb-xxl { | |
margin-bottom: var(--brf-spacing-xxl); | |
} | |
.ml-0 { | |
margin-left: 0; | |
} | |
.ml-xs { | |
margin-left: var(--brf-spacing-xs); | |
} | |
.ml-s { | |
margin-left: var(--brf-spacing-s); | |
} | |
.ml-m { | |
margin-left: var(--brf-spacing-m); | |
} | |
.ml-l { | |
margin-left: var(--brf-spacing-l); | |
} | |
.ml-xl { | |
margin-left: var(--brf-spacing-xl); | |
} | |
.ml-xxl { | |
margin-left: var(--brf-spacing-xxl); | |
} | |
.p-0 { | |
padding: 0; | |
} | |
.p-xs { | |
padding: var(--brf-spacing-xs); | |
} | |
.p-s { | |
padding: var(--brf-spacing-s); | |
} | |
.p-m { | |
padding: var(--brf-spacing-m); | |
} | |
.p-l { | |
padding: var(--brf-spacing-l); | |
} | |
.p-xl { | |
padding: var(--brf-spacing-xl); | |
} | |
.p-xxl { | |
padding: var(--brf-spacing-xxl); | |
} | |
.pt-0 { | |
padding-top: 0; | |
} | |
.pt-xs { | |
padding-top: var(--brf-spacing-xs); | |
} | |
.pt-s { | |
padding-top: var(--brf-spacing-s); | |
} | |
.pt-m { | |
padding-top: var(--brf-spacing-m); | |
} | |
.pt-l { | |
padding-top: var(--brf-spacing-l); | |
} | |
.pt-xl { | |
padding-top: var(--brf-spacing-xl); | |
} | |
.pt-xxl { | |
padding-top: var(--brf-spacing-xxl); | |
} | |
.pr-0 { | |
padding-right: 0; | |
} | |
.pr-xs { | |
padding-right: var(--brf-spacing-xs); | |
} | |
.pr-s { | |
padding-right: var(--brf-spacing-s); | |
} | |
.pr-m { | |
padding-right: var(--brf-spacing-m); | |
} | |
.pr-l { | |
padding-right: var(--brf-spacing-l); | |
} | |
.pr-xl { | |
padding-right: var(--brf-spacing-xl); | |
} | |
.pr-xxl { | |
padding-right: var(--brf-spacing-xxl); | |
} | |
.pb-0 { | |
padding-bottom: 0; | |
} | |
.pb-xs { | |
padding-bottom: var(--brf-spacing-xs); | |
} | |
.pb-s { | |
padding-bottom: var(--brf-spacing-s); | |
} | |
.pb-m { | |
padding-bottom: var(--brf-spacing-m); | |
} | |
.pb-l { | |
padding-bottom: var(--brf-spacing-l); | |
} | |
.pb-xl { | |
padding-bottom: var(--brf-spacing-xl); | |
} | |
.pb-xxl { | |
padding-bottom: var(--brf-spacing-xxl); | |
} | |
.pl-0 { | |
padding-left: 0; | |
} | |
.pl-xs { | |
padding-left: var(--brf-spacing-xs); | |
} | |
.pl-s { | |
padding-left: var(--brf-spacing-s); | |
} | |
.pl-m { | |
padding-left: var(--brf-spacing-m); | |
} | |
.pl-l { | |
padding-left: var(--brf-spacing-l); | |
} | |
.pl-xl { | |
padding-left: var(--brf-spacing-xl); | |
} | |
.pl-xxl { | |
padding-left: var(--brf-spacing-xxl); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment