Игорь Надеин
8363cbd541
- Migrated all 28 CSS components to SCSS architecture
- Deleted 29 source CSS files (kept only compiled app.css & bootstrap-custom.css)
- Created 30 SCSS component modules in scss/components/
- Cleaned 24 templates from duplicate CSS links
- Updated main.scss with new imports (layout-spacing, spacing-utils, rightbar-calendar)
- Filled empty _navbar.scss with content
- Refactored css/ folder: removed obsolete files, updated README.md
- Created comprehensive documentation (migration complete, quick reference, reports)
Migration Statistics:
- Components migrated: 28 (~4,768 lines SCSS)
- CSS files deleted: 29
- Templates cleaned: 24
- app.css size: 95 KB (compiled from SCSS)
- bootstrap-custom.css: 301 KB
- Total: 396 KB
Phase 6 Complete: 100% SCSS architecture achieved ✅
137 lines
3.2 KiB
SCSS
137 lines
3.2 KiB
SCSS
/**
|
||
* spacing-utils.scss
|
||
* Утилиты для точного контроля отступов
|
||
*
|
||
* Использование CSS переменных из variables.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 внутри
|
||
}
|