141 lines
6.9 KiB
SCSS
141 lines
6.9 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: 0.5rem !default; // var(--space-1)
|
||
$dropdown-item-padding-y: 0.5rem !default; // var(--space-1)
|
||
$dropdown-item-padding-x: 1rem !default; // var(--space-2)
|
||
|
||
// Navs
|
||
$nav-link-padding-y: 0.5rem !default; // var(--space-1)
|
||
$nav-link-padding-x: 1rem !default; // var(--space-2)
|
||
|
||
// Navbar
|
||
$navbar-padding-y: 0.5rem !default; // var(--space-1)
|
||
$navbar-padding-x: 1rem !default; // var(--space-2)
|
||
|
||
// Pagination
|
||
$pagination-padding-y: 0.5rem !default; // var(--space-1)
|
||
$pagination-padding-x: 1rem !default; // var(--space-2)
|
||
|
||
$pagination-padding-y-sm: 0.5rem !default; // var(--space-1)
|
||
$pagination-padding-x-sm: 0.5rem !default; // var(--space-1)
|
||
|
||
$pagination-padding-y-lg: 1rem !default; // var(--space-2)
|
||
$pagination-padding-x-lg: 1.5rem !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 Дополнительные настройки (опционально)
|
||
// ──────────────────────────────────────────────────────────────
|
||
|
||
// 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. ИМПОРТ BOOTSTRAP
|
||
// =============================================================================
|
||
// Импортируем Bootstrap ПОСЛЕ переопределения переменных
|
||
@import "../node_modules/bootstrap/scss/bootstrap";
|
||
|
||
// =============================================================================
|
||
// 4. КАСТОМНЫЕ СТИЛИ (если нужно)
|
||
// =============================================================================
|
||
// Здесь можно добавить дополнительные стили или переопределения
|