Игорь Надеин
9df9f78666
SCSS Architecture 2.0 - Feature-based structure ### Major Changes: - ✅ Reorganized 51 SCSS files into logical categories - ✅ Created feature-based structure: core/, layout/, features/, utilities/ - ✅ Merged duplicate components: badges (2→1), modals (3→1), lists (2→1), spacing (2→1) - ✅ Renamed files: ios-search→search, team-wheel→team-viz, recipientPicker→recipient-picker - ✅ Cleaned custom-bootstrap.scss from all app components - ✅ Moved chat components from custom-bootstrap to main.scss ### Results: - Files: 51 → 38 (-13 files, -25%) - bootstrap-custom.css: 301 KB → 229 KB (-72 KB, -24%) - app.css: 95 KB → 137 KB (+42 KB, expected) - Total CSS: 396 KB → 366 KB (-30 KB, -7.5%) ### New Structure: scss/ ├── abstracts/ # Variables, mixins (4 files) ├── core/ # UI Kit - reusable components (9 files) │ ├── buttons, badges, cards, lists, modals, etc. ├── layout/ # App structure (6 files) │ ├── grid, navbar, sidebar, rightbar, etc. ├── utilities/ # Utility classes (1 file) │ └── spacing └── features/ # Feature-specific styles (18 files in 6 folders) ├── feed/ (3 files) ├── requests/ (3 files) ├── documents/ (1 file) ├── employees/ (2 files) ├── notifications/ (1 file) └── chat/ (10 files) ### Benefits: - Clear categorization - No duplicate imports (removed 8 duplicates) - Logical feature grouping - Easier maintenance - Clean architecture - Better naming conventions ### Documentation: - scss/README.md - full architecture documentation - scss/MIGRATION_MATRIX.md - file migration matrix - docs/reports/SCSS_REORGANIZATION_COMPLETE.md - completion report Bootstrap remains as base UI framework.
179 lines
5.2 KiB
SCSS
179 lines
5.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 внутри
|
||
}
|
||
/**
|
||
* layout-spacing.scss
|
||
*
|
||
* Централизованное управление отступами в 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; }
|
||
*/
|
||
|
||
/* =====================================
|
||
APP LAYOUT SPACING
|
||
===================================== */
|
||
|
||
// Применяем вертикальные отступы к 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.scss
|
||
// Колонки (sidebar, main, rightbar) НЕ имеют собственных padding - занимают 100% ячейки
|