Игорь Надеин
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.
86 lines
3.3 KiB
SCSS
86 lines
3.3 KiB
SCSS
// =============================================================================
|
|
// Main Application SCSS
|
|
// =============================================================================
|
|
// Главный файл для сборки всех стилей приложения (кроме Bootstrap)
|
|
// Компилируется в css/app.css
|
|
|
|
// =============================================================================
|
|
// 1. ABSTRACTS - Переменные, миксины, функции
|
|
// =============================================================================
|
|
@import 'abstracts/index';
|
|
|
|
// =============================================================================
|
|
// 2. LAYOUT - Структура приложения
|
|
// =============================================================================
|
|
@import 'layout/base-app';
|
|
@import 'layout/chat-layout';
|
|
|
|
// =============================================================================
|
|
// 3. COMPONENTS - Переиспользуемые компоненты
|
|
// =============================================================================
|
|
|
|
// Базовые компоненты
|
|
@import 'components/buttons';
|
|
@import 'components/cards';
|
|
@import 'components/modals';
|
|
@import 'components/navbar';
|
|
@import 'components/sidebar';
|
|
@import 'components/page-header';
|
|
@import 'components/common';
|
|
|
|
// Spacing и layout utilities
|
|
@import 'components/layout-spacing';
|
|
@import 'components/spacing-utils';
|
|
|
|
// iOS-стиль компоненты
|
|
@import 'components/ios-search';
|
|
@import 'components/ios-components';
|
|
|
|
// Бейджи
|
|
@import 'components/badges-bem';
|
|
@import 'components/badges-telegram-style';
|
|
|
|
// Комментарии
|
|
@import 'components/comments';
|
|
|
|
// Списки и уведомления
|
|
@import 'components/card-list';
|
|
@import 'components/notifications';
|
|
|
|
// Заявления и документы
|
|
@import 'components/request-list';
|
|
@import 'components/request-detail';
|
|
@import 'components/document-list';
|
|
@import 'components/recipientPicker';
|
|
@import 'components/list-view';
|
|
|
|
// Feed компоненты
|
|
@import 'components/feed-specific';
|
|
@import 'components/join-scroller';
|
|
@import 'components/post-form';
|
|
|
|
// Модальные окна
|
|
@import 'components/modal-overrides';
|
|
@import 'components/logout-modal';
|
|
|
|
// Employees компоненты
|
|
@import 'components/department-controls';
|
|
@import 'components/team-wheel';
|
|
|
|
// Календарь и rightbar
|
|
@import 'components/rightbar-calendar';
|
|
|
|
// =============================================================================
|
|
// 4. UTILITIES - Вспомогательные классы
|
|
// =============================================================================
|
|
// @import 'utilities/spacing-utils';
|
|
// @import 'utilities/index';
|
|
|
|
// =============================================================================
|
|
// ПРИМЕЧАНИЯ
|
|
// =============================================================================
|
|
// - Bootstrap подключается отдельно через bootstrap-custom.css
|
|
// - CSS переменные (--variable) определены в abstracts/_css-variables.scss
|
|
// - SCSS переменные ($variable) определены в abstracts/_variables.scss
|
|
// - Порядок импортов критичен для CSS каскада
|