myprestarocks
7d79273743
Features: - Tree view mode for categories with expand/collapse - Product count badges with clickable preview popover - Select parent with all children button - Client-side tree filtering (refine search) - Keyboard shortcuts: Ctrl+A (select all), Ctrl+D (clear) - View mode switching between tree/list/columns - Tree view as default for categories, respects user preference Backend: - Add previewCategoryProducts and previewCategoryPages AJAX handlers - Support pagination and filtering in category previews Styling: - Consistent count-badge styling across tree and other views - Loading and popover-open states for count badges Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
155 lines
5.4 KiB
SCSS
155 lines
5.4 KiB
SCSS
/**
|
|
* Entity Selector Variables
|
|
* Bootstrap 4 compatible values for PrestaShop admin theme
|
|
*
|
|
* Imports shared variables from prestashop-admin package
|
|
* and maps them to $es-* prefixed aliases for this package
|
|
*/
|
|
|
|
// Import shared variables from prestashop-admin
|
|
@use '../../../prestashop-admin/assets/scss/variables' as admin;
|
|
|
|
// =============================================================================
|
|
// Base Colors
|
|
// =============================================================================
|
|
|
|
$es-white: #ffffff !default;
|
|
$es-black: #000000 !default;
|
|
|
|
// Primary (from prestashop-admin)
|
|
$es-primary: admin.$primary !default;
|
|
$es-primary-hover: #1a9ab7 !default;
|
|
$es-primary-light: rgba(37, 185, 215, 0.1) !default;
|
|
|
|
// Semantic colors (from prestashop-admin)
|
|
$es-success: admin.$success !default;
|
|
$es-success-light: #d4edda !default;
|
|
$es-success-dark: #1e7e34 !default;
|
|
|
|
$es-danger: admin.$danger !default;
|
|
$es-danger-light: #f8d7da !default;
|
|
$es-danger-dark: #bd2130 !default;
|
|
|
|
$es-warning: admin.$warning !default;
|
|
$es-warning-light: #fff3cd !default;
|
|
|
|
$es-info: admin.$info !default;
|
|
$es-info-light: #d1ecf1 !default;
|
|
|
|
// =============================================================================
|
|
// Gray Scale (Bootstrap 4)
|
|
// =============================================================================
|
|
|
|
$es-gray-100: admin.$light !default;
|
|
$es-gray-200: #e9ecef !default;
|
|
$es-gray-300: admin.$border-color !default;
|
|
$es-gray-400: #ced4da !default;
|
|
$es-gray-500: #adb5bd !default;
|
|
$es-gray-600: admin.$secondary !default;
|
|
$es-gray-700: #495057 !default;
|
|
$es-gray-800: admin.$dark !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: admin.$border-color !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, derived from admin.$spacer)
|
|
// =============================================================================
|
|
|
|
$es-spacing-xs: admin.$spacer * 0.25 !default; // 4px
|
|
$es-spacing-sm: admin.$spacer * 0.5 !default; // 8px
|
|
$es-spacing-md: admin.$spacer !default; // 16px
|
|
$es-spacing-lg: admin.$spacer * 1.5 !default; // 24px
|
|
$es-spacing-xl: admin.$spacer * 2 !default; // 32px
|
|
|
|
// =============================================================================
|
|
// Border Radius (from prestashop-admin)
|
|
// =============================================================================
|
|
|
|
$es-radius-sm: admin.$border-radius-sm !default;
|
|
$es-radius-md: admin.$border-radius !default;
|
|
$es-radius-lg: admin.$border-radius-lg !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;
|