*"; $item_reset_selector = "$item_selector > *"; $properties = array( $selector => array(), $list_selector => array( 'display: flex', 'flex-direction: column', ), $item_selector => array(), $item_reset_selector => array(), ); $get_setting = function($setting) use ($settings) { if (empty($settings[$setting])) { return null; } return $settings[$setting] . (isset($settings[$setting . '_unit']) ? $settings[$setting . '_unit'] : ''); }; $add_property = function($selector, $setting, $css_property) use ($get_setting, &$properties) { $value = $get_setting($setting); if ($value) { $properties[$selector][] = "$css_property: $value"; } return $value; }; $min_width = $get_setting('children_min_width'); $max_width = $add_property($item_selector, 'children_max_width', 'max-width'); if ($min_width) { $properties[$item_selector][] = "min-width: calc($min_width - var(--tpl-mixin-margin-left, 0px) - var(--tpl-mixin-margin-right, 0px))"; } if ($max_width) { $properties[$item_selector][] = "--tpl-mixin-layout-max-width: $max_width"; $properties[$item_reset_selector][] = "--tpl-mixin-layout-max-width: 100%"; } else { $properties[$item_selector][] = "--tpl-mixin-layout-max-width: 100%"; } if ($settings['children_alignment'] === 'center') { // выравнивание по центру сделано не через align-items: center, а установкой margin, // так как align-items также влияет на ширину блоков — с этим сложнее бороться $properties[$item_selector][] = 'margin-left: auto'; $properties[$item_selector][] = 'margin-right: auto'; $properties[$item_selector][] = "width: 100%"; if ($min_width) { $properties[$selector][] = "min-width: $min_width"; } if ($max_width) { // используется для выравнивания контента для блока с 100% шириной с контентом с шириной // по настройкам этого миксина (netcat_width_full — опция background_only) $indent = "calc((100% - $max_width) / 2)"; // NB: для calc() всегда нужны единицы: '0px', а не '0' $properties[$item_selector][] = "--tpl-mixin-layout-child-indent-left: $indent"; $properties[$item_selector][] = "--tpl-mixin-layout-child-indent-right: $indent"; $properties[$item_reset_selector][] = "--tpl-mixin-layout-child-indent-left: 0px"; $properties[$item_reset_selector][] = "--tpl-mixin-layout-child-indent-right: 0px"; $properties[$item_selector][] = "width: calc(100% - var(--tpl-mixin-margin-left, 0px) - var(--tpl-mixin-margin-right, 0px))"; } } else { $indent_left = $add_property($item_selector, 'children_indent_left', 'margin-left'); $properties[$item_selector][] = "--tpl-mixin-layout-child-indent-left: " . ($indent_left ?: "0px"); if ($indent_left) { $properties[$item_reset_selector][] = "--tpl-mixin-layout-child-indent-left: 0px"; } $properties[$list_selector][] = '--tpl-mixin-layout-child-on-left: 1'; $properties[$item_reset_selector][] = '--tpl-mixin-layout-child-on-left: 0'; if ($min_width) { if ($indent_left) { $properties[$selector][] = "min-width: calc($min_width + $indent_left)"; } else { $properties[$selector][] = "min-width: $min_width"; } } } $css = ''; foreach ($properties as $selector => $values) { $css .= "$selector {\n" . join(";\n", $values) . "\n}\n"; } return $css;