39 lines
1.9 KiB
CSS
39 lines
1.9 KiB
CSS
/**
|
||
* layout-spacing.css
|
||
*
|
||
* Централизованное управление отступами в app-layout
|
||
* Все отступы контролируются через CSS переменные в variables.css
|
||
*
|
||
* ПРИНЦИП: Контейнеры занимают 100% пространства ячейки (без padding).
|
||
* Все отступы между колонками управляются ТОЛЬКО через grid gap.
|
||
*
|
||
* Переменные для настройки (в variables.css):
|
||
* --layout-gap: расстояние между sidebar, main, rightbar (по умолчанию 16px)
|
||
* --layout-padding-y: вертикальные отступы layout (по умолчанию 24px)
|
||
* --layout-padding-x: горизонтальные отступы layout (по умолчанию 0)
|
||
*
|
||
* Примеры изменения отступов:
|
||
*
|
||
* Увеличить расстояние между колонками до 24px:
|
||
* :root { --layout-gap: var(--space-3); }
|
||
*
|
||
* Уменьшить расстояние между колонками до 8px:
|
||
* :root { --layout-gap: var(--space-1); }
|
||
*
|
||
* Уменьшить вертикальные отступы до 16px:
|
||
* :root { --layout-padding-y: var(--space-2); }
|
||
*
|
||
* Убрать вертикальные отступы:
|
||
* :root { --layout-padding-y: 0; }
|
||
*/
|
||
|
||
/* Применяем вертикальные отступы к layout */
|
||
.app-layout {
|
||
padding-top: var(--layout-padding-y);
|
||
padding-bottom: var(--layout-padding-y);
|
||
}
|
||
|
||
/* Горизонтальные отступы управляются через container-xxl px-2 px-lg-3 в base.html */
|
||
/* Grid gap между колонками управляется через --layout-gap в base-app.css */
|
||
/* Колонки (sidebar, main, rightbar) НЕ имеют собственных padding - занимают 100% ячейки */
|