// ********************************************************************************************************************* // Insets // ——————————————————————————————————————— // Defines the insets used in the columns and the footer-panel. I.e the empty spaces between text and separators. // .theme-insets {

padding-top: $vspacing-unit;
padding-right: $hspacing-unit;
padding-bottom: $vspacing-unit;
padding-left: $hspacing-unit;

}

// ********************************************************************************************************************* // Overlay // ——————————————————————————————————————— // Will place an element over its parent and make it the exact same size. // // The parent must have its css 'position' property set to 'relative'. // .overlay {

position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;

}

// ********************************************************************************************************************* // display-flex-… // ——————————————————————————————————————— // Will switch a display property to 'flex' for the narrow, medium resp wide layout and 'none' for all others. // // Can be used in custom html code to enable/disable elements. // .display-flex-narrow {

@include narrow-layout { display: flex; }
@include medium-layout { display: none; }
@include widest-layout { display: none; }

} .display-flex-medium {

@include narrow-layout { display: none; }
@include medium-layout { display: flex; }
@include widest-layout { display: none; }

} .display-flex-widest {

@include narrow-layout { display: none; }
@include medium-layout { display: none; }
@include widest-layout { display: flex; }

} .display-flex-medium-and-wide {

@include narrow-layout { display: none; }
@include medium-layout { display: flex; }
@include widest-layout { display: flex; }

}

// ********************************************************************************************************************* // display-block-… // ——————————————————————————————————————— // Will switch a display property to 'block' for the narrow, medium resp wide layout and 'none' for all others. // // Can be used in custom html code to enable/disable elements. // .display-block-narrow {

@include narrow-layout { display: block; }
@include medium-layout { display: none; }
@include widest-layout { display: none; }

} .display-block-medium {

@include narrow-layout { display: none; }
@include medium-layout { display: block; }
@include widest-layout { display: none; }

} .display-block-widest {

@include narrow-layout { display: none; }
@include medium-layout { display: none; }
@include widest-layout { display: block; }

} .display-block-medium-and-wide {

@include narrow-layout { display: none; }
@include medium-layout { display: block; }
@include widest-layout { display: block; }

}