Space Types
These are scaled via variables.
Rim Space
var(--sp-rim)Base Space
var(--sp-base)Feature Space
var(--sp-feat)/*---------------------------------------------------------------------------
Padding & Margin Helpers FRAMEWORK 2024-05-25
---------------------------------------------------------------------------*/
/* Margin 0
-----------------------------------------------*/
.mb-0 { margin-bottom: 0px !important; }
.mb0, .mb-0, .smb0 :last-child, .smb0-child > :first-child { margin-bottom: 0px !important; }
/* Padding, Margin Base
-----------------------------------------------*/
.spv, .spv-child > :first-child { padding-top: var(--sp-base) !important; ; padding-bottom: var(--sp-base) !important; ; }
.spb, .spb-child > :first-child { padding-bottom: var(--sp-base) !important; ; }
.spt, .spt-child > :first-child { padding-top: var(--sp-base) !important; ; }
.sph, .sph-child > :first-child { padding-left: var(--sp-base); padding-right: var(--sp-base) !important; ; }
.smv, .smv-child > :first-child { margin-top: var(--sp-base) !important; ; margin-bottom: var(--sp-base) !important; ; }
.smb, .smb-child > :first-child { margin-bottom: var(--sp-base) !important; ; }
.smt, .smt-child > :first-child { margin-top: var(--sp-base) !important; ; }
.smh, .smh-child > :first-child { margin-left: var(--sp-base); margin-right: var(--sp-base) !important; ; }
/* Padding, Margin Rim
-----------------------------------------------*/
.spv-rim, .spv-rim-child > :first-child { padding-top: var(--sp-rim) !important; ; padding-bottom: var(--sp-rim) !important; ; }
.spb-rim, .spb-rim-child > :first-child { padding-bottom: var(--sp-rim) !important; ; }
.spt-rim, .spt-rim-child > :first-child { padding-top: var(--sp-rim) !important; ; }
.sph-rim, .sph-rim-child > :first-child { padding-left: var(--sp-rim); padding-right: var(--sp-rim) !important; ; }
.smv-rim, .smv-rim-child > :first-child { margin-top: var(--sp-rim) !important; ; margin-bottom: var(--sp-rim) !important; ; }
.smb-rim, .smb-rim-child > :first-child { margin-bottom: var(--sp-rim) !important; ; }
.smt-rim, .smt-rim-child > :first-child { margin-top: var(--sp-rim) !important; ; }
.smh-rim, .smh-rim-child > :first-child { margin-left: var(--sp-rim); margin-right: var(--sp-rim) !important; ; }
/* Padding, Margin Feature
-----------------------------------------------*/
.spv-feat, .spv-feat-child > :first-child { padding-top: var(--sp-feat) !important; ; padding-bottom: var(--sp-feat) !important; ; }
.spb-feat, .spb-feat-child > :first-child { padding-bottom: var(--sp-feat) !important; ; }
.spb-feat15, .spb-feat15-child > :first-child { padding-bottom: calc(var(--sp-feat) * 1.5); !important; ; }
.spb-feat2, .spb-feat2-child > :first-child { padding-bottom: calc(var(--sp-feat) * 2); !important; ; }
.spt-feat, .spt-feat-child > :first-child { padding-top: var(--sp-feat) !important; ; }
.sph-feat, .sph-feat-child > :first-child { padding-left: var(--sp-feat); padding-right: var(--sp-feat) !important; ; }
.smv-feat, .smv-feat-child > :first-child { margin-top: var(--sp-feat) !important; ; margin-bottom: var(--sp-feat) !important; ; }
.smb-feat, .smb-feat-child > :first-child { margin-bottom: var(--sp-feat) !important; ; }
.smt-feat, .smt-feat-child > :first-child { margin-top: var(--sp-feat) !important; ; }
.smh-feat, .smh-feat-child > :first-child { margin-left: var(--sp-feat); margin-right: var(--sp-feat) !important; ; }
/* Pull top */
.pull-top-feat { position: relative; margin-top: calc(var(--sp-feat) * -1); z-index: 1; }
.pull-top-feat15 { position: relative; margin-top: calc(var(--sp-feat) * -1.5); z-index: 1; }
.pull-top-feat2 { position: relative; margin-top: calc(var(--sp-feat) * -2); z-index: 1; }