/**
* @namespace Content
*/
@use 'sass:meta';
@use 'sass:map';
@use 'sass:list';
@use 'globals' as *;
@use 'breakpoints';
/**
* @namespace Content:content-holder
*/
/**
* Adds properties to the current element, which make it a "content holder", meaning, that it
* adheres to the defined min/max content widths and keeps the content away from the browser edges by
* defining margins according to the defined responsive content paddings.
*
* Min and max widths are only rendered if they are defined in the jig config, as are content paddings.
*
* A content holder can be used as the base container definition for non-breakout elements on a page,
* which is not supposed to grow indefinitely horizontally.
*
* A content holder can be a grid container at the same time, these things do not exclude themselves and
* are even a very common use case.
*
* @memberof Content:content-holder
* @function
* @name content-holder
* @alias content-holder
*
* @param {Boolean} [$padded=true] - if true, config-defined responsive content padding gets applied to the element
* @param {Boolean} [$centered=true] - if true, element gets auto-centered using auto margins
*
* @example
* \@include content-holder();
*/
@mixin content-holder($padded:true, $centered:false){
$breakpoint-names: map.keys($jig---breakpoint-config);
$smallest-breakpoint: list.nth($breakpoint-names, 1);
$largest-breakpoint: list.nth($breakpoint-names, -1);
$min-width: content-width-value('min');
$max-width: content-width-value('max');
@if $min-width != null {
min-width: $min-width + (2 * content-padding-value($smallest-breakpoint));
}
@if $max-width != null {
max-width: $max-width + (2 * content-padding-value($largest-breakpoint));
}
@if $centered {
margin-right: auto;
margin-left: auto;
}
@if $padded {
$content-padding: map.get($jig---content-config, 'padding');
@if $content-padding != null {
@include breakpoints.attributes-for-breakpoints((
'padding-left' : $content-padding,
'padding-right' : $content-padding,
));
}
}
}
/**
* @namespace Content:content-padding-value
*/
/**
* Returns the defined content padding for a/the current breakpoint.
*
* @memberof Content:content-padding-value
* @function
* @name content-padding-value
* @alias content-padding-value
*
* @param {String} [$breakpoint='auto'] - a defined breakpoint name or "auto", to use the current breakpoint at the point of usage
* @returns {Number} the determined content padding value
* @throws error if no content padding value could be determined, based on given breakpoint
*
* @example
* \@include breakpoint(medium){
* padding-left: content-padding-value();
* }
* margin-right: content-padding-value($breakpoint:'small');
*/
@function content-padding-value($breakpoint:'auto'){
$padding: map.get($jig---content-config, 'padding');
$res: null;
@if $padding != null {
@if meta.type-of($padding) == 'map' {
$res: breakpoints.breakpoint-value($padding, $breakpoint);
} @else {
$res: $padding;
}
}
@if $res == null {
@error 'jig:content-padding-value | could not resolve content padding, check breakpoint';
}
@return $res;
}
/**
* @namespace Content:content-width-value
*/
/**
* Returns the defined min/max content width.
*
* @memberof Content:content-width-value
* @function
* @name content-width-value
* @alias content-width-value
*
* @param {String} [$min-max='max'] - either "min" or "max", defines if min or max content-width is returned
* @param {?Number} [$default=null] - the default value to return if the width definition cannot be found
* @returns {Number|null} the determined content width value, may be null if width is not defined (depending on default value)
*
* @example
* max-width: content-width-value();
* min-width: content-width-value('min', 0);
*/
@function content-width-value($min-max:'max', $default:null){
$width: map.get($jig---content-config, 'max-width');
@if $min-max == 'min' {
$width: map.get($jig---content-config, 'min-width');
}
@if $width == null {
$width: $default;
}
@return $width;
}
/**
* @namespace Content:base-font-size-value
*/
/**
* Returns the base font size, which is most likely applied to the html/body elements and acts as the base
* for rem calculations.
*
* @memberof Content:base-font-size-value
* @function
* @name base-font-size-value
* @alias base-font-size-value
*
* @returns {Number} the currently set jig base font size value
*
* @example
* font-size: base-font-size-value();
*/
@function base-font-size-value(){
@return $jig---base-font-size;
}