Игорь Надеин
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.
202 lines
9.6 KiB
SCSS
202 lines
9.6 KiB
SCSS
// =============================================================================
|
||
// Custom Bootstrap Configuration
|
||
// =============================================================================
|
||
// Этот файл переопределяет переменные Bootstrap ДО его компиляции
|
||
// Результат: полностью кастомизированный Bootstrap с нашей системой отступов
|
||
|
||
// =============================================================================
|
||
// 1. ИМПОРТ НАШИХ ПЕРЕМЕННЫХ
|
||
// =============================================================================
|
||
// Сначала импортируем наши CSS переменные (для справки)
|
||
// Реальные значения ниже в SCSS переменных
|
||
|
||
// =============================================================================
|
||
// 2. ПЕРЕОПРЕДЕЛЕНИЕ BOOTSTRAP ПЕРЕМЕННЫХ
|
||
// =============================================================================
|
||
|
||
// ──────────────────────────────────────────────────────────────
|
||
// 2.1 Система отступов (8px grid)
|
||
// ──────────────────────────────────────────────────────────────
|
||
// Bootstrap использует $spacer для всех utility классов (.p-*, .m-* и т.д.)
|
||
// Переопределяем его на нашу 8px сетку
|
||
|
||
$spacer: 1rem !default; // 16px - базовое значение
|
||
|
||
// Переопределение всей шкалы spacing
|
||
$spacers: (
|
||
0: 0, // 0px
|
||
1: 0.25rem, // 4px - var(--space-1)
|
||
2: 0.5rem, // 8px - var(--space-2)
|
||
3: 0.75rem, // 12px - var(--space-3)
|
||
4: 1rem, // 16px - var(--space-4)
|
||
5: 1.5rem, // 24px - var(--space-5)
|
||
) !default;
|
||
|
||
// ──────────────────────────────────────────────────────────────
|
||
// 2.2 Grid система
|
||
// ──────────────────────────────────────────────────────────────
|
||
$grid-gutter-width: 0.5rem !default; // 8px - var(--space-2)
|
||
|
||
// ──────────────────────────────────────────────────────────────
|
||
// 2.3 Компоненты - Padding
|
||
// ──────────────────────────────────────────────────────────────
|
||
// Переопределяем padding для всех Bootstrap компонентов
|
||
|
||
// Cards
|
||
$card-spacer-y: 1rem !default; // var(--space-2)
|
||
$card-spacer-x: 1rem !default; // var(--space-2)
|
||
|
||
// Alerts
|
||
$alert-padding-y: 1rem !default; // var(--space-2)
|
||
$alert-padding-x: 1rem !default; // var(--space-2)
|
||
|
||
// Buttons
|
||
$btn-padding-y: 0.5rem !default; // var(--space-1)
|
||
$btn-padding-x: 1rem !default; // var(--space-2)
|
||
|
||
$btn-padding-y-sm: 0.5rem !default; // var(--space-1)
|
||
$btn-padding-x-sm: 0.5rem !default; // var(--space-1)
|
||
|
||
$btn-padding-y-lg: 1rem !default; // var(--space-2)
|
||
$btn-padding-x-lg: 1.5rem !default; // var(--space-3)
|
||
|
||
// Form controls
|
||
$input-padding-y: 0.5rem !default; // var(--space-1)
|
||
$input-padding-x: 1rem !default; // var(--space-2)
|
||
|
||
$input-padding-y-sm: 0.5rem !default; // var(--space-1)
|
||
$input-padding-x-sm: 0.5rem !default; // var(--space-1)
|
||
|
||
$input-padding-y-lg: 1rem !default; // var(--space-2)
|
||
$input-padding-x-lg: 1.5rem !default; // var(--space-3)
|
||
|
||
// Modals
|
||
$modal-inner-padding: 1rem !default; // var(--space-2)
|
||
$modal-header-padding-y: 1rem !default; // var(--space-2)
|
||
$modal-header-padding-x: 1rem !default; // var(--space-2)
|
||
|
||
// Dropdowns
|
||
$dropdown-padding-x: 0 !default;
|
||
$dropdown-padding-y: 8px !default; // var(--space-1)
|
||
$dropdown-item-padding-y: 8px !default; // var(--space-1)
|
||
$dropdown-item-padding-x: 16px !default; // var(--space-2)
|
||
|
||
// Navs
|
||
$nav-link-padding-y: 8px !default; // var(--space-1)
|
||
$nav-link-padding-x: 16px !default; // var(--space-2)
|
||
|
||
// Navbar
|
||
$navbar-padding-y: 8px !default; // var(--space-1)
|
||
$navbar-padding-x: 16px !default; // var(--space-2)
|
||
|
||
// Pagination
|
||
$pagination-padding-y: 8px !default; // var(--space-1)
|
||
$pagination-padding-x: 16px !default; // var(--space-2)
|
||
|
||
$pagination-padding-y-sm: 8px !default; // var(--space-1)
|
||
$pagination-padding-x-sm: 8px !default; // var(--space-1)
|
||
|
||
$pagination-padding-y-lg: 16px !default; // var(--space-2)
|
||
$pagination-padding-x-lg: 24px !default; // var(--space-3)
|
||
|
||
// List groups
|
||
$list-group-item-padding-y: 1rem !default; // var(--space-2)
|
||
$list-group-item-padding-x: 1rem !default; // var(--space-2)
|
||
|
||
// Breadcrumbs
|
||
$breadcrumb-padding-y: 0.5rem !default; // var(--space-1)
|
||
$breadcrumb-padding-x: 1rem !default; // var(--space-2)
|
||
|
||
// Toasts
|
||
$toast-padding-x: 1rem !default; // var(--space-2)
|
||
$toast-padding-y: 0.5rem !default; // var(--space-1)
|
||
|
||
// Offcanvas
|
||
$offcanvas-padding-y: 1rem !default; // var(--space-2)
|
||
$offcanvas-padding-x: 1rem !default; // var(--space-2)
|
||
|
||
// Badges
|
||
$badge-padding-y: 0.5rem !default; // var(--space-1)
|
||
$badge-padding-x: 0.5rem !default; // var(--space-1)
|
||
|
||
// ──────────────────────────────────────────────────────────────
|
||
// 2.4 Cards - переопределяем стили карточек (GLASSMORPHISM)
|
||
// ──────────────────────────────────────────────────────────────
|
||
$card-border-radius: 18px !default;
|
||
$card-border-width: 1px !default;
|
||
$card-border-color: rgba(255, 255, 255, 0.1) !default; // Светлая граница для glassmorphism
|
||
$card-bg: rgba(255, 255, 255, 0.05) !default; // Полупрозрачный для эффекта стекла
|
||
$card-box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !default; // Глубокая тень
|
||
|
||
// Card header/footer
|
||
$card-cap-padding-y: 1rem !default;
|
||
$card-cap-padding-x: 1rem !default;
|
||
$card-cap-bg: transparent !default; // Прозрачный header/footer
|
||
$card-cap-color: null !default;
|
||
|
||
// ──────────────────────────────────────────────────────────────
|
||
// 2.5 Дополнительные настройки (опционально)
|
||
// ──────────────────────────────────────────────────────────────
|
||
|
||
// Border radius (если хотите унифицировать)
|
||
// $border-radius: 10px !default; // var(--radius-md)
|
||
// $border-radius-sm: 6px !default; // var(--radius-sm)
|
||
// $border-radius-lg: 14px !default; // var(--radius-lg)
|
||
|
||
// =============================================================================
|
||
// 3. ИМПОРТ ABSTRACTS (Design Tokens & Mixins)
|
||
// =============================================================================
|
||
// Импортируем переменные и миксины ДО Bootstrap
|
||
@import "abstracts/variables";
|
||
@import "abstracts/mixins";
|
||
|
||
// =============================================================================
|
||
// 4. ИМПОРТ BOOTSTRAP
|
||
// =============================================================================
|
||
// Импортируем Bootstrap ПОСЛЕ переопределения переменных
|
||
@import "../node_modules/bootstrap/scss/bootstrap";
|
||
|
||
// =============================================================================
|
||
// 4.5 CSS ПЕРЕМЕННЫЕ (RUNTIME)
|
||
// =============================================================================
|
||
// CSS custom properties для использования в браузере
|
||
@import "abstracts/css-variables";
|
||
|
||
// =============================================================================
|
||
// 5. КАСТОМНЫЕ КОМПОНЕНТЫ
|
||
// =============================================================================
|
||
|
||
// Layout
|
||
@import "layout/chat-layout";
|
||
|
||
// Базовые компоненты
|
||
@import "components/common";
|
||
@import "components/navbar";
|
||
@import "components/sidebar";
|
||
@import "components/page-header";
|
||
@import "components/cards";
|
||
|
||
// Badge компоненты
|
||
@import "components/badges-bem";
|
||
|
||
// Чат компоненты (в подпапке chat/)
|
||
@import "components/chat/message-inputs";
|
||
@import "components/chat/chat-detail";
|
||
@import "components/chat/chat-date-groups";
|
||
@import "components/chat/chat-list-enhanced";
|
||
@import "components/chat/chat-enhanced";
|
||
@import "components/chat/chat-polls";
|
||
@import "components/chat/chat-new-messages-indicator";
|
||
@import "components/chat/message-selection";
|
||
@import "components/chat/message-context-menu";
|
||
@import "components/chat/message-reactions";
|
||
|
||
// Дополнительные компоненты
|
||
@import "components/comments";
|
||
@import "components/modals";
|
||
|
||
// Остальные компоненты (загружаются напрямую из CSS - не мигрировано)
|
||
// TODO: Мигрировать buttons, card-list, document-list, request-list,
|
||
// ios-search, feed-specific, base-app, request-detail
|
||
|