Игорь Надеин
180232017c
Excluded Bootstrap button components from custom-bootstrap.scss: - Removed @import 'bootstrap/scss/buttons' - Removed @import 'bootstrap/scss/button-group' - Using custom button system instead (core/_buttons-custom.scss) ### Results: - bootstrap-custom.css: 229 KB → 215 KB (-14 KB, -6%) - Total CSS: 377 KB → 363 KB (-14 KB) - Complete button independence from Bootstrap ### Benefits: - Smaller bundle size - Full control over button styles - Modern CSS features (Custom Properties, Grid) - Better animations and interactions Bootstrap buttons completely replaced with custom implementation.
200 lines
8.7 KiB
SCSS
200 lines
8.7 KiB
SCSS
// =============================================================================
|
||
// Custom Bootstrap Configuration
|
||
// =============================================================================
|
||
// Этот файл переопределяет переменные Bootstrap ДО его компиляции
|
||
// Результат: полностью кастомизированный Bootstrap с нашей системой отступов
|
||
//
|
||
// CLEANED: 15 января 2026 - Удалены все импорты компонентов приложения
|
||
// Теперь содержит ТОЛЬКО Bootstrap + переопределения переменных
|
||
|
||
// =============================================================================
|
||
// 1. ПЕРЕОПРЕДЕЛЕНИЕ BOOTSTRAP ПЕРЕМЕННЫХ
|
||
// =============================================================================
|
||
|
||
// ──────────────────────────────────────────────────────────────
|
||
// 1.1 Система отступов (8px grid)
|
||
// ──────────────────────────────────────────────────────────────
|
||
$spacer: 1rem !default; // 16px - базовое значение
|
||
|
||
// Переопределение всей шкалы spacing
|
||
$spacers: (
|
||
0: 0, // 0px
|
||
1: 0.25rem, // 4px
|
||
2: 0.5rem, // 8px
|
||
3: 0.75rem, // 12px
|
||
4: 1rem, // 16px
|
||
5: 1.5rem, // 24px
|
||
) !default;
|
||
|
||
// ──────────────────────────────────────────────────────────────
|
||
// 1.2 Grid система
|
||
// ──────────────────────────────────────────────────────────────
|
||
$grid-gutter-width: 0.5rem !default; // 8px
|
||
|
||
// ──────────────────────────────────────────────────────────────
|
||
// 1.3 Компоненты - Padding
|
||
// ──────────────────────────────────────────────────────────────
|
||
|
||
// Cards
|
||
$card-spacer-y: 1rem !default;
|
||
$card-spacer-x: 1rem !default;
|
||
$card-border-radius: 18px !default;
|
||
$card-border-width: 1px !default;
|
||
$card-border-color: rgba(255, 255, 255, 0.1) !default;
|
||
$card-bg: rgba(255, 255, 255, 0.05) !default;
|
||
$card-box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !default;
|
||
$card-cap-padding-y: 1rem !default;
|
||
$card-cap-padding-x: 1rem !default;
|
||
$card-cap-bg: transparent !default;
|
||
|
||
// Alerts
|
||
$alert-padding-y: 1rem !default;
|
||
$alert-padding-x: 1rem !default;
|
||
|
||
// Buttons
|
||
$btn-padding-y: 0.5rem !default;
|
||
$btn-padding-x: 1rem !default;
|
||
$btn-padding-y-sm: 0.5rem !default;
|
||
$btn-padding-x-sm: 0.5rem !default;
|
||
$btn-padding-y-lg: 1rem !default;
|
||
$btn-padding-x-lg: 1.5rem !default;
|
||
|
||
// Form controls
|
||
$input-padding-y: 0.5rem !default;
|
||
$input-padding-x: 1rem !default;
|
||
$input-padding-y-sm: 0.5rem !default;
|
||
$input-padding-x-sm: 0.5rem !default;
|
||
$input-padding-y-lg: 1rem !default;
|
||
$input-padding-x-lg: 1.5rem !default;
|
||
|
||
// Modals
|
||
$modal-inner-padding: 1rem !default;
|
||
$modal-header-padding-y: 1rem !default;
|
||
$modal-header-padding-x: 1rem !default;
|
||
|
||
// Dropdowns
|
||
$dropdown-padding-x: 0 !default;
|
||
$dropdown-padding-y: 8px !default;
|
||
$dropdown-item-padding-y: 8px !default;
|
||
$dropdown-item-padding-x: 16px !default;
|
||
|
||
// Navs
|
||
$nav-link-padding-y: 8px !default;
|
||
$nav-link-padding-x: 16px !default;
|
||
|
||
// Navbar
|
||
$navbar-padding-y: 8px !default;
|
||
$navbar-padding-x: 16px !default;
|
||
|
||
// Pagination
|
||
$pagination-padding-y: 8px !default;
|
||
$pagination-padding-x: 16px !default;
|
||
$pagination-padding-y-sm: 8px !default;
|
||
$pagination-padding-x-sm: 8px !default;
|
||
$pagination-padding-y-lg: 16px !default;
|
||
$pagination-padding-x-lg: 24px !default;
|
||
|
||
// List groups
|
||
$list-group-item-padding-y: 1rem !default;
|
||
$list-group-item-padding-x: 1rem !default;
|
||
|
||
// Breadcrumbs
|
||
$breadcrumb-padding-y: 0.5rem !default;
|
||
$breadcrumb-padding-x: 1rem !default;
|
||
|
||
// Toasts
|
||
$toast-padding-x: 1rem !default;
|
||
$toast-padding-y: 0.5rem !default;
|
||
|
||
// Offcanvas
|
||
$offcanvas-padding-y: 1rem !default;
|
||
$offcanvas-padding-x: 1rem !default;
|
||
|
||
// Badges
|
||
$badge-padding-y: 0.5rem !default;
|
||
$badge-padding-x: 0.5rem !default;
|
||
|
||
// =============================================================================
|
||
// 2. ИМПОРТ ABSTRACTS (Design Tokens & Mixins)
|
||
// =============================================================================
|
||
// Импортируем переменные и миксины ДО Bootstrap
|
||
@import "abstracts/variables";
|
||
@import "abstracts/mixins";
|
||
|
||
// =============================================================================
|
||
// 3. ИМПОРТ BOOTSTRAP (ВЫБОРОЧНО, БЕЗ BUTTONS)
|
||
// =============================================================================
|
||
// Импортируем Bootstrap компоненты по отдельности, исключая buttons
|
||
// Buttons заменены на нашу систему в core/_buttons-custom.scss
|
||
|
||
// Configuration
|
||
@import "../node_modules/bootstrap/scss/functions";
|
||
@import "../node_modules/bootstrap/scss/variables";
|
||
@import "../node_modules/bootstrap/scss/variables-dark";
|
||
@import "../node_modules/bootstrap/scss/maps";
|
||
@import "../node_modules/bootstrap/scss/mixins";
|
||
@import "../node_modules/bootstrap/scss/utilities";
|
||
|
||
// Layout & components
|
||
@import "../node_modules/bootstrap/scss/root";
|
||
@import "../node_modules/bootstrap/scss/reboot";
|
||
@import "../node_modules/bootstrap/scss/type";
|
||
@import "../node_modules/bootstrap/scss/images";
|
||
@import "../node_modules/bootstrap/scss/containers";
|
||
@import "../node_modules/bootstrap/scss/grid";
|
||
@import "../node_modules/bootstrap/scss/tables";
|
||
@import "../node_modules/bootstrap/scss/forms";
|
||
// @import "../node_modules/bootstrap/scss/buttons"; // ❌ ИСКЛЮЧЕНО - используем свои кнопки
|
||
@import "../node_modules/bootstrap/scss/transitions";
|
||
@import "../node_modules/bootstrap/scss/dropdown";
|
||
// @import "../node_modules/bootstrap/scss/button-group"; // ❌ ИСКЛЮЧЕНО - используем свои группы
|
||
@import "../node_modules/bootstrap/scss/nav";
|
||
@import "../node_modules/bootstrap/scss/navbar";
|
||
@import "../node_modules/bootstrap/scss/card";
|
||
@import "../node_modules/bootstrap/scss/accordion";
|
||
@import "../node_modules/bootstrap/scss/breadcrumb";
|
||
@import "../node_modules/bootstrap/scss/pagination";
|
||
@import "../node_modules/bootstrap/scss/badge";
|
||
@import "../node_modules/bootstrap/scss/alert";
|
||
@import "../node_modules/bootstrap/scss/progress";
|
||
@import "../node_modules/bootstrap/scss/list-group";
|
||
@import "../node_modules/bootstrap/scss/close";
|
||
@import "../node_modules/bootstrap/scss/toasts";
|
||
@import "../node_modules/bootstrap/scss/modal";
|
||
@import "../node_modules/bootstrap/scss/tooltip";
|
||
@import "../node_modules/bootstrap/scss/popover";
|
||
@import "../node_modules/bootstrap/scss/carousel";
|
||
@import "../node_modules/bootstrap/scss/spinners";
|
||
@import "../node_modules/bootstrap/scss/offcanvas";
|
||
@import "../node_modules/bootstrap/scss/placeholders";
|
||
|
||
// Helpers
|
||
@import "../node_modules/bootstrap/scss/helpers";
|
||
|
||
// Utilities API
|
||
@import "../node_modules/bootstrap/scss/utilities/api";
|
||
|
||
// =============================================================================
|
||
// 4. CSS ПЕРЕМЕННЫЕ (RUNTIME)
|
||
// =============================================================================
|
||
// CSS custom properties для использования в браузере
|
||
@import "abstracts/css-variables";
|
||
|
||
// =============================================================================
|
||
// ВСЕ! Никаких компонентов приложения здесь!
|
||
// =============================================================================
|
||
// Все компоненты приложения импортируются в main.scss → app.css
|
||
// Этот файл содержит ТОЛЬКО Bootstrap с переопределенными переменными
|
||
//
|
||
// РЕЗУЛЬТАТ:
|
||
// - bootstrap-custom.css (~280 KB) - чистый Bootstrap
|
||
// - app.css (~95 KB) - компоненты приложения
|
||
// - Вместе они создают полный UI
|
||
//
|
||
// ПРЕИМУЩЕСТВА:
|
||
// - Чистая архитектура
|
||
// - Легче кешировать Bootstrap (меняется редко)
|
||
// - Понятное разделение ответственности
|
||
// - Нет дублирования компонентов
|
||
|