128 lines
3.2 KiB
CSS
128 lines
3.2 KiB
CSS
/**
|
||
* spacing-utils.css
|
||
* Утилиты для точного контроля отступов
|
||
*
|
||
* Использование CSS переменных из variables.css для унифицированных отступов
|
||
* Подключение: <link rel="stylesheet" href="{% static 'css/components/spacing-utils.css' %}">
|
||
*/
|
||
|
||
/* ========== Gap Utilities ========== */
|
||
|
||
/* Gap для flex/grid контейнеров */
|
||
.gap-component {
|
||
gap: var(--gap-component); /* 16px - стандартный gap между элементами */
|
||
}
|
||
|
||
.gap-section {
|
||
gap: var(--gap-section); /* 24px - gap между секциями */
|
||
}
|
||
|
||
.gap-1 {
|
||
gap: var(--space-1); /* 8px */
|
||
}
|
||
|
||
.gap-2 {
|
||
gap: var(--space-2); /* 16px */
|
||
}
|
||
|
||
.gap-3 {
|
||
gap: var(--space-3); /* 24px */
|
||
}
|
||
|
||
.gap-4 {
|
||
gap: var(--space-4); /* 32px */
|
||
}
|
||
|
||
/* ========== Margin Utilities ========== */
|
||
|
||
/* Margin bottom для секций и блоков */
|
||
.mb-section {
|
||
margin-bottom: var(--margin-section); /* 24px - между секциями */
|
||
}
|
||
|
||
.mb-block {
|
||
margin-bottom: var(--margin-block); /* 32px - между блоками */
|
||
}
|
||
|
||
/* Margin на всех сторонах */
|
||
.my-section {
|
||
margin-block: var(--margin-section); /* 24px сверху/снизу */
|
||
}
|
||
|
||
.my-block {
|
||
margin-block: var(--margin-block); /* 32px сверху/снизу */
|
||
}
|
||
|
||
/* ========== Padding Utilities ========== */
|
||
|
||
/* Padding для карточек */
|
||
.p-card {
|
||
padding: var(--card-padding); /* 16px со всех сторон */
|
||
}
|
||
|
||
.p-card-sm {
|
||
padding: var(--card-padding-sm); /* 8px со всех сторон */
|
||
}
|
||
|
||
.p-card-lg {
|
||
padding: var(--card-padding-lg); /* 24px со всех сторон */
|
||
}
|
||
|
||
/* Padding по осям */
|
||
.px-card {
|
||
padding-inline: var(--card-padding); /* 16px лево/право */
|
||
}
|
||
|
||
.py-card {
|
||
padding-block: var(--card-padding); /* 16px верх/низ */
|
||
}
|
||
|
||
.px-card-sm {
|
||
padding-inline: var(--card-padding-sm); /* 8px лево/право */
|
||
}
|
||
|
||
.py-card-sm {
|
||
padding-block: var(--card-padding-sm); /* 8px верх/низ */
|
||
}
|
||
|
||
.px-card-lg {
|
||
padding-inline: var(--card-padding-lg); /* 24px лево/право */
|
||
}
|
||
|
||
.py-card-lg {
|
||
padding-block: var(--card-padding-lg); /* 24px верх/низ */
|
||
}
|
||
|
||
/* ========== Responsive Utilities ========== */
|
||
|
||
/* Адаптивный gap для мобильных */
|
||
@media (max-width: 576px) {
|
||
.gap-component-mobile {
|
||
gap: var(--space-1); /* 8px на мобильных */
|
||
}
|
||
|
||
.p-card-mobile {
|
||
padding: var(--card-padding-sm); /* 8px на мобильных */
|
||
}
|
||
}
|
||
|
||
/* ========== Комбинированные классы ========== */
|
||
|
||
/* Стандартная секция с отступами */
|
||
.section-spacing {
|
||
margin-bottom: var(--margin-section); /* 24px снизу */
|
||
padding: var(--card-padding); /* 16px внутри */
|
||
}
|
||
|
||
/* Компактная секция */
|
||
.section-spacing-sm {
|
||
margin-bottom: var(--space-2); /* 16px снизу */
|
||
padding: var(--card-padding-sm); /* 8px внутри */
|
||
}
|
||
|
||
/* Просторная секция */
|
||
.section-spacing-lg {
|
||
margin-bottom: var(--margin-block); /* 32px снизу */
|
||
padding: var(--card-padding-lg); /* 24px внутри */
|
||
}
|