Refactor from Tailwind CSS to SCSS/Bootstrap
Major changes: - Replace Tailwind with SCSS using Bootstrap-compatible variables - Add Gulp build system for SCSS and JS compilation - Split JS into modular partials (_events, _filters, _preview, etc.) CSS fixes: - Fix preview popover visibility (remove conflicting modal.scss rule) - Fix search input max-width override for parent form styles - Add filter panel styling (toggle buttons, chips, values row) - Add group-body padding with negative margins on modifiers - Style filter-group-toggle with eye icon for preview JS additions: - Add showGroupPreviewPopover for group count badge clicks - Add showItemsPopover for rendering preview popover - Add renderPreviewItems for product list rendering - Add eye icon to filter toggle button generation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
148
sources/scss/_variables.scss
Normal file
148
sources/scss/_variables.scss
Normal file
@@ -0,0 +1,148 @@
|
||||
/**
|
||||
* Entity Selector Variables
|
||||
* Bootstrap 4 compatible values for PrestaShop admin theme
|
||||
*/
|
||||
|
||||
// =============================================================================
|
||||
// Base Colors
|
||||
// =============================================================================
|
||||
|
||||
$es-white: #ffffff !default;
|
||||
$es-black: #000000 !default;
|
||||
|
||||
// Primary (PrestaShop admin accent)
|
||||
$es-primary: #25b9d7 !default;
|
||||
$es-primary-hover: #1a9ab7 !default;
|
||||
$es-primary-light: rgba(37, 185, 215, 0.1) !default;
|
||||
|
||||
// Semantic colors (Bootstrap 4 aligned)
|
||||
$es-success: #28a745 !default;
|
||||
$es-success-light: #d4edda !default;
|
||||
$es-success-dark: #1e7e34 !default;
|
||||
|
||||
$es-danger: #dc3545 !default;
|
||||
$es-danger-light: #f8d7da !default;
|
||||
$es-danger-dark: #bd2130 !default;
|
||||
|
||||
$es-warning: #ffc107 !default;
|
||||
$es-warning-light: #fff3cd !default;
|
||||
|
||||
$es-info: #17a2b8 !default;
|
||||
$es-info-light: #d1ecf1 !default;
|
||||
|
||||
// =============================================================================
|
||||
// Gray Scale (Bootstrap 4)
|
||||
// =============================================================================
|
||||
|
||||
$es-gray-100: #f8f9fa !default;
|
||||
$es-gray-200: #e9ecef !default;
|
||||
$es-gray-300: #dee2e6 !default;
|
||||
$es-gray-400: #ced4da !default;
|
||||
$es-gray-500: #adb5bd !default;
|
||||
$es-gray-600: #6c757d !default;
|
||||
$es-gray-700: #495057 !default;
|
||||
$es-gray-800: #343a40 !default;
|
||||
$es-gray-900: #212529 !default;
|
||||
|
||||
// Slate (subtle variations)
|
||||
$es-slate-50: #f8fafc !default;
|
||||
$es-slate-100: #f1f5f9 !default;
|
||||
$es-slate-200: #e2e8f0 !default;
|
||||
$es-slate-300: #cbd5e1 !default;
|
||||
$es-slate-400: #94a3b8 !default;
|
||||
$es-slate-500: #64748b !default;
|
||||
$es-slate-600: #475569 !default;
|
||||
$es-slate-700: #334155 !default;
|
||||
$es-slate-800: #1e293b !default;
|
||||
$es-slate-900: #0f172a !default;
|
||||
|
||||
// Cyan
|
||||
$es-cyan-50: #ecfeff !default;
|
||||
$es-cyan-100: #cffafe !default;
|
||||
$es-cyan-200: #a5f3fc !default;
|
||||
$es-cyan-500: #06b6d4 !default;
|
||||
$es-cyan-600: #0891b2 !default;
|
||||
$es-cyan-700: #0e7490 !default;
|
||||
|
||||
// =============================================================================
|
||||
// Semantic Aliases
|
||||
// =============================================================================
|
||||
|
||||
$es-bg-header: $es-gray-100 !default;
|
||||
$es-bg-hover: $es-gray-200 !default;
|
||||
$es-bg-active: $es-gray-200 !default;
|
||||
$es-bg-body: $es-white !default;
|
||||
|
||||
$es-border-color: $es-gray-300 !default;
|
||||
$es-border-light: $es-gray-200 !default;
|
||||
$es-border-dark: $es-gray-400 !default;
|
||||
|
||||
$es-text-primary: $es-gray-900 !default;
|
||||
$es-text-secondary: $es-gray-700 !default;
|
||||
$es-text-muted: $es-gray-600 !default;
|
||||
$es-text-light: $es-gray-500 !default;
|
||||
|
||||
// =============================================================================
|
||||
// Spacing (Bootstrap 4 compatible)
|
||||
// =============================================================================
|
||||
|
||||
$es-spacing-xs: 0.25rem !default; // 4px
|
||||
$es-spacing-sm: 0.5rem !default; // 8px
|
||||
$es-spacing-md: 1rem !default; // 16px
|
||||
$es-spacing-lg: 1.5rem !default; // 24px
|
||||
$es-spacing-xl: 2rem !default; // 32px
|
||||
|
||||
// =============================================================================
|
||||
// Border Radius (Bootstrap 4 compatible)
|
||||
// =============================================================================
|
||||
|
||||
$es-radius-sm: 0.2rem !default;
|
||||
$es-radius-md: 0.25rem !default;
|
||||
$es-radius-lg: 0.3rem !default;
|
||||
$es-radius-xl: 0.5rem !default;
|
||||
$es-radius-full: 50rem !default;
|
||||
|
||||
// =============================================================================
|
||||
// Box Shadows (Bootstrap 4 compatible)
|
||||
// =============================================================================
|
||||
|
||||
$es-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !default;
|
||||
$es-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !default;
|
||||
$es-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175) !default;
|
||||
$es-shadow-xl: 0 1.5rem 4rem rgba(0, 0, 0, 0.2) !default;
|
||||
|
||||
// =============================================================================
|
||||
// Transitions
|
||||
// =============================================================================
|
||||
|
||||
$es-transition-fast: 0.15s ease-in-out !default;
|
||||
$es-transition-normal: 0.2s ease-in-out !default;
|
||||
$es-transition-slow: 0.3s ease-in-out !default;
|
||||
|
||||
// =============================================================================
|
||||
// Z-Index (below Bootstrap modal)
|
||||
// =============================================================================
|
||||
|
||||
$es-z-dropdown: 1000 !default;
|
||||
$es-z-modal: 1050 !default;
|
||||
$es-z-popover: 1060 !default;
|
||||
$es-z-tooltip: 1070 !default;
|
||||
|
||||
// =============================================================================
|
||||
// Typography
|
||||
// =============================================================================
|
||||
|
||||
$es-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
|
||||
|
||||
$es-font-size-xs: 0.75rem !default; // 12px
|
||||
$es-font-size-sm: 0.875rem !default; // 14px
|
||||
$es-font-size-base: 1rem !default; // 16px
|
||||
$es-font-size-lg: 1.125rem !default; // 18px
|
||||
|
||||
$es-font-weight-normal: 400 !default;
|
||||
$es-font-weight-medium: 500 !default;
|
||||
$es-font-weight-semibold: 600 !default;
|
||||
$es-font-weight-bold: 700 !default;
|
||||
|
||||
$es-line-height-tight: 1.25 !default;
|
||||
$es-line-height-normal: 1.5 !default;
|
||||
Reference in New Issue
Block a user