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:
323
sources/scss/_mixins.scss
Normal file
323
sources/scss/_mixins.scss
Normal file
@@ -0,0 +1,323 @@
|
||||
/**
|
||||
* Entity Selector Mixins
|
||||
* Reusable patterns - prefer Bootstrap utilities in HTML where possible
|
||||
*/
|
||||
|
||||
@use 'variables' as *;
|
||||
|
||||
// =============================================================================
|
||||
// Layout
|
||||
// =============================================================================
|
||||
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@mixin flex-between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Text
|
||||
// =============================================================================
|
||||
|
||||
@mixin text-truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Interactive Elements
|
||||
// =============================================================================
|
||||
|
||||
// Reset button styles
|
||||
@mixin button-reset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Focus ring (Bootstrap 4 style)
|
||||
@mixin focus-ring($color: $es-primary) {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba($color, 0.25);
|
||||
}
|
||||
|
||||
// Interactive hover state
|
||||
@mixin interactive-item {
|
||||
cursor: pointer;
|
||||
transition: background-color $es-transition-fast, color $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background-color: $es-bg-hover;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Cards & Containers
|
||||
// =============================================================================
|
||||
|
||||
@mixin card {
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
}
|
||||
|
||||
@mixin dropdown-container {
|
||||
position: absolute;
|
||||
z-index: $es-z-dropdown;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
box-shadow: $es-shadow-lg;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Form Elements
|
||||
// =============================================================================
|
||||
|
||||
// Reset input styles (for inputs in custom wrappers)
|
||||
@mixin input-reset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin input-base {
|
||||
width: 100%;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
font-size: $es-font-size-sm;
|
||||
line-height: $es-line-height-normal;
|
||||
color: $es-text-primary;
|
||||
background-color: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-md;
|
||||
transition: border-color $es-transition-fast, box-shadow $es-transition-fast;
|
||||
|
||||
&:focus {
|
||||
border-color: $es-primary;
|
||||
@include focus-ring($es-primary);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $es-text-light;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Scrollbar
|
||||
// =============================================================================
|
||||
|
||||
@mixin custom-scrollbar {
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: $es-gray-100;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: $es-gray-300;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: $es-gray-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Badges & Chips
|
||||
// =============================================================================
|
||||
|
||||
@mixin badge($bg: $es-gray-200, $color: $es-gray-700) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.125rem 0.5rem;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
line-height: 1;
|
||||
background-color: $bg;
|
||||
color: $color;
|
||||
border-radius: $es-radius-full;
|
||||
}
|
||||
|
||||
// Count badge with preview icon (used for tab badges, match counts, totals)
|
||||
// Note: Eye icon is provided in HTML via <i class="icon-eye"></i>
|
||||
@mixin count-badge($bg: $es-primary) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
padding: 0 0.5rem;
|
||||
background: $bg;
|
||||
color: $es-white;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
border-radius: $es-radius-full;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 2px 8px rgba($bg, 0.4);
|
||||
}
|
||||
|
||||
// Loading state - spinner icon replaces eye
|
||||
&.loading {
|
||||
cursor: wait;
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Inactive/empty state
|
||||
&.inactive,
|
||||
&.no-matches {
|
||||
background: $es-slate-400;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Popover open state
|
||||
&.popover-open {
|
||||
background: darken($bg, 10%);
|
||||
box-shadow: 0 2px 8px rgba($bg, 0.4);
|
||||
}
|
||||
|
||||
// Icon inside badge (eye, spinner, etc.)
|
||||
i {
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:hover i {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.preview-count {
|
||||
font-weight: $es-font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@mixin chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-xs;
|
||||
padding: $es-spacing-xs $es-spacing-sm;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
background: $es-gray-200;
|
||||
color: $es-gray-700;
|
||||
border-radius: $es-radius-full;
|
||||
|
||||
.chip-remove {
|
||||
@include button-reset;
|
||||
@include flex-center;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
font-size: 10px;
|
||||
color: $es-text-muted;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: $es-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Toggle Switch
|
||||
// =============================================================================
|
||||
|
||||
@mixin toggle-switch($width: 36px, $height: 20px) {
|
||||
position: relative;
|
||||
width: $width;
|
||||
height: $height;
|
||||
border-radius: $height;
|
||||
background: $es-gray-400;
|
||||
transition: background-color $es-transition-normal;
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: $height - 4px;
|
||||
height: $height - 4px;
|
||||
background: $es-white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
transition: transform $es-transition-normal;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $es-success;
|
||||
|
||||
&::after {
|
||||
transform: translateX($width - $height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Screen Reader Only
|
||||
// =============================================================================
|
||||
|
||||
@mixin sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
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;
|
||||
490
sources/scss/components/_chips.scss
Normal file
490
sources/scss/components/_chips.scss
Normal file
@@ -0,0 +1,490 @@
|
||||
/**
|
||||
* Chips Component
|
||||
* Entity chips, selection pills, tags
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
.target-conditions-trait,
|
||||
.entity-selector-trait {
|
||||
|
||||
// Chips container
|
||||
.entity-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $es-spacing-xs;
|
||||
padding: $es-spacing-sm 0;
|
||||
min-height: 32px;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Individual chip
|
||||
.entity-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: $es-slate-100;
|
||||
color: $es-text-secondary;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
border-radius: $es-radius-full;
|
||||
max-width: 200px;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
}
|
||||
|
||||
// Chip with image
|
||||
&.has-image {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.chip-image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chip-icon {
|
||||
font-size: 12px;
|
||||
color: $es-text-muted;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chip-text,
|
||||
.chip-name {
|
||||
@include text-truncate;
|
||||
}
|
||||
|
||||
.chip-remove {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 0.125rem;
|
||||
color: $es-text-muted;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: $es-danger;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// Chip variants
|
||||
.entity-chip.chip-primary {
|
||||
background: $es-primary-light;
|
||||
color: $es-primary;
|
||||
|
||||
&:hover {
|
||||
background: rgba($es-primary, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.entity-chip.chip-success {
|
||||
background: $es-success-light;
|
||||
color: $es-success-dark;
|
||||
|
||||
&:hover {
|
||||
background: rgba($es-success, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.entity-chip.chip-danger {
|
||||
background: $es-danger-light;
|
||||
color: $es-danger;
|
||||
|
||||
&:hover {
|
||||
background: rgba($es-danger, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.entity-chip.chip-warning {
|
||||
background: $es-warning-light;
|
||||
color: darken($es-warning, 20%);
|
||||
|
||||
&:hover {
|
||||
background: rgba($es-warning, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
// Chip loading state
|
||||
.entity-chip.loading,
|
||||
.entity-chip-loading {
|
||||
opacity: 0.7;
|
||||
|
||||
.chip-remove {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chip-icon i {
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
// Hidden chip (collapsed view)
|
||||
.entity-chip.chip-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Chips expanded/collapsed states
|
||||
.entity-chips.chips-collapsed,
|
||||
.entity-chips.chips-expanded {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Show more/less toggle
|
||||
.chips-show-more-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
color: $es-primary;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
cursor: pointer;
|
||||
transition: color $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
color: $es-primary-hover;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.chips-collapse-toggle,
|
||||
.chips-expand-toggle {
|
||||
// Specific variants inherit from .chips-show-more-toggle
|
||||
}
|
||||
|
||||
// More chips indicator
|
||||
.chips-more {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: $es-slate-200;
|
||||
color: $es-text-secondary;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
border-radius: $es-radius-full;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-300;
|
||||
}
|
||||
}
|
||||
|
||||
// Add chip button
|
||||
.chip-add-btn {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: transparent;
|
||||
color: $es-primary;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
border: 1px dashed $es-primary;
|
||||
border-radius: $es-radius-full;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-primary-light;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// Inline chips (compact mode)
|
||||
.entity-chips.inline {
|
||||
display: inline-flex;
|
||||
padding: 0;
|
||||
min-height: auto;
|
||||
|
||||
.entity-chip {
|
||||
padding: 0.125rem 0.375rem;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
// Selected chips section in include/exclude
|
||||
.selected-chips-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-xs;
|
||||
}
|
||||
|
||||
.selected-chips-label {
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-muted;
|
||||
}
|
||||
|
||||
// Pattern chips (for name/reference patterns)
|
||||
.entity-chip.chip-pattern {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
font-family: monospace;
|
||||
|
||||
&:hover {
|
||||
background: #fde68a;
|
||||
}
|
||||
|
||||
.chip-icon {
|
||||
color: #d97706;
|
||||
}
|
||||
}
|
||||
|
||||
// Range chips (price, quantity, etc.)
|
||||
.entity-chip.chip-range,
|
||||
.range-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: $es-cyan-50;
|
||||
color: $es-cyan-600;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
border-radius: $es-radius-full;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-cyan-100;
|
||||
}
|
||||
}
|
||||
|
||||
.range-chip-text {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.btn-remove-range {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: $es-cyan-600;
|
||||
border-radius: 50%;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: $es-danger;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// Multi-range chips container
|
||||
.multi-range-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $es-spacing-xs;
|
||||
margin-bottom: $es-spacing-xs;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Pattern chips container
|
||||
.pattern-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $es-spacing-xs;
|
||||
padding: $es-spacing-sm 0;
|
||||
min-height: 32px;
|
||||
|
||||
&:empty::before {
|
||||
content: attr(data-placeholder);
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-xs;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
// Pattern tag
|
||||
.pattern-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: #fde68a;
|
||||
}
|
||||
|
||||
&.case-sensitive {
|
||||
.case-icon {
|
||||
color: $es-success;
|
||||
font-weight: $es-font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
&.draft-tag {
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
|
||||
&:hover {
|
||||
background: $es-white;
|
||||
}
|
||||
|
||||
.pattern-input {
|
||||
flex: 1;
|
||||
min-width: 100px;
|
||||
padding: 0.375rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-size: $es-font-size-sm;
|
||||
font-family: inherit;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $es-text-muted;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pattern-tag-text {
|
||||
font-family: monospace;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-toggle-case {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.case-icon {
|
||||
font-size: 11px;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.btn-remove-pattern {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #d97706;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: $es-danger;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-add-pattern {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: $es-primary;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-primary-light;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// Pattern match count (in draft tag)
|
||||
.pattern-match-count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0 0.375rem;
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-xs;
|
||||
cursor: pointer;
|
||||
|
||||
&.count-zero {
|
||||
color: $es-warning;
|
||||
}
|
||||
|
||||
&.count-found {
|
||||
color: $es-success;
|
||||
}
|
||||
|
||||
.count-value {
|
||||
font-weight: $es-font-weight-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
// Pattern input row
|
||||
.pattern-input-row {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: $es-spacing-xs;
|
||||
}
|
||||
}
|
||||
395
sources/scss/components/_combinations.scss
Normal file
395
sources/scss/components/_combinations.scss
Normal file
@@ -0,0 +1,395 @@
|
||||
/**
|
||||
* Combination Attributes Picker Component
|
||||
* Product attribute combination selection styles
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
.target-conditions-trait,
|
||||
.entity-selector-trait {
|
||||
|
||||
// Main container
|
||||
.combination-attributes-picker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
// Mode toggle (Any/All)
|
||||
.combination-mode-toggle {
|
||||
display: inline-flex;
|
||||
gap: 0.25rem;
|
||||
padding: 0.125rem;
|
||||
background: $es-slate-100;
|
||||
border-radius: $es-radius-md;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.combination-mode-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
color: $es-text-muted;
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mode-label {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $es-primary;
|
||||
background: rgba($es-primary, 0.1);
|
||||
}
|
||||
|
||||
&:has(input[type="radio"]:checked) {
|
||||
background: $es-primary;
|
||||
color: $es-white;
|
||||
font-weight: $es-font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
// Groups container
|
||||
.combination-groups-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $es-spacing-md;
|
||||
}
|
||||
|
||||
// Loading/Empty/Error states
|
||||
.combination-loading,
|
||||
.combination-empty,
|
||||
.combination-error {
|
||||
color: $es-text-muted;
|
||||
font-style: italic;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.combination-error {
|
||||
color: $es-danger;
|
||||
}
|
||||
|
||||
// Section header
|
||||
.combinations-section {
|
||||
margin-bottom: $es-spacing-md;
|
||||
}
|
||||
|
||||
.combinations-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.combinations-label {
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-muted;
|
||||
}
|
||||
|
||||
.combinations-help {
|
||||
font-size: 11px;
|
||||
color: $es-slate-400;
|
||||
}
|
||||
|
||||
// Toggle combinations button
|
||||
.btn-toggle-combinations {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-primary;
|
||||
background: transparent;
|
||||
border: 1px solid $es-primary;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-remove-combinations {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-danger;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Attribute Group
|
||||
// =============================================================================
|
||||
|
||||
.comb-attr-group {
|
||||
flex: none;
|
||||
min-width: 120px;
|
||||
max-width: 200px;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-gray-300;
|
||||
border-radius: $es-radius-sm;
|
||||
overflow: hidden;
|
||||
|
||||
&.has-selections {
|
||||
border-color: $es-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.comb-attr-group-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.375rem 0.625rem;
|
||||
background: $es-slate-100;
|
||||
border-bottom: 1px solid $es-gray-300;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-slate-800;
|
||||
|
||||
.comb-attr-group.has-selections & {
|
||||
background: $es-cyan-50;
|
||||
border-bottom-color: $es-cyan-200;
|
||||
}
|
||||
}
|
||||
|
||||
.comb-attr-group-name {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.comb-attr-group-count {
|
||||
flex-shrink: 0;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 0.25rem;
|
||||
background: $es-gray-300;
|
||||
border-radius: $es-radius-full;
|
||||
font-size: 11px;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
color: $es-text-muted;
|
||||
|
||||
.comb-attr-group.has-selections & {
|
||||
background: $es-primary;
|
||||
color: $es-white;
|
||||
}
|
||||
}
|
||||
|
||||
// Toolbar
|
||||
.comb-attr-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.375rem;
|
||||
background: $es-slate-50;
|
||||
border-bottom: 1px solid $es-slate-100;
|
||||
}
|
||||
|
||||
.comb-toolbar-btn {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
padding: 0;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-gray-300;
|
||||
border-radius: $es-radius-sm;
|
||||
color: $es-text-muted;
|
||||
cursor: pointer;
|
||||
font-size: $es-font-size-xs;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-100;
|
||||
border-color: $es-slate-400;
|
||||
color: $es-slate-800;
|
||||
}
|
||||
}
|
||||
|
||||
.comb-attr-search {
|
||||
flex: 1;
|
||||
min-width: 60px;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border: 1px solid $es-gray-300;
|
||||
border-radius: $es-radius-sm;
|
||||
font-size: 11px;
|
||||
outline: none;
|
||||
|
||||
&:focus {
|
||||
border-color: $es-primary;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $es-slate-400;
|
||||
}
|
||||
}
|
||||
|
||||
// Values container
|
||||
.comb-attr-values {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
padding: 0.375rem;
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
@include custom-scrollbar;
|
||||
}
|
||||
|
||||
.comb-attr-loading,
|
||||
.comb-attr-empty,
|
||||
.comb-attr-error {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: $es-slate-400;
|
||||
font-size: 11px;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.comb-attr-error {
|
||||
color: $es-danger;
|
||||
}
|
||||
|
||||
// Individual value
|
||||
.comb-attr-value {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.125rem 0.5rem;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-slate-400;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 11px;
|
||||
color: $es-slate-600;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-100;
|
||||
border-color: $es-text-muted;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: $es-primary;
|
||||
border-color: $es-primary-hover;
|
||||
color: $es-white;
|
||||
|
||||
&:hover {
|
||||
background: $es-primary-hover;
|
||||
border-color: darken($es-primary-hover, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comb-attr-value-count {
|
||||
font-size: 9px;
|
||||
color: $es-slate-400;
|
||||
background: $es-slate-100;
|
||||
padding: 1px 0.25rem;
|
||||
border-radius: 0.5rem;
|
||||
min-width: 14px;
|
||||
text-align: center;
|
||||
|
||||
.comb-attr-value.selected & {
|
||||
color: $es-white;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Combination Conditions (Row-based)
|
||||
// =============================================================================
|
||||
|
||||
.combination-conditions-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.combination-condition-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-sm;
|
||||
background: $es-slate-50;
|
||||
border-radius: $es-radius-sm;
|
||||
}
|
||||
|
||||
.combination-group-select,
|
||||
.combination-values-select {
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.combination-equals {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.btn-add-combination-condition {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-primary;
|
||||
background: transparent;
|
||||
border: 1px dashed $es-primary;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-primary-light;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-remove-combination-row {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: rgba($es-danger, 0.1);
|
||||
color: $es-danger;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
293
sources/scss/components/_condition-trait.scss
Normal file
293
sources/scss/components/_condition-trait.scss
Normal file
@@ -0,0 +1,293 @@
|
||||
/**
|
||||
* Condition Trait Base Styles
|
||||
* Shared styling for all condition trait components
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
// Base condition trait container
|
||||
.condition-trait {
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
margin-bottom: $es-spacing-lg;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Collapsed state
|
||||
.condition-trait.collapsed {
|
||||
.condition-trait-header {
|
||||
border-bottom-color: transparent;
|
||||
border-radius: $es-radius-lg;
|
||||
}
|
||||
|
||||
.collapse-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Trait Header
|
||||
// =============================================================================
|
||||
|
||||
.condition-trait-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $es-spacing-lg;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.875rem $es-spacing-lg;
|
||||
background: $es-slate-50;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg $es-radius-lg 0 0;
|
||||
cursor: pointer;
|
||||
transition: background-color $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-100;
|
||||
}
|
||||
}
|
||||
|
||||
.trait-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-md;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.trait-icon {
|
||||
font-size: 1.125rem;
|
||||
color: $es-text-muted;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.trait-title-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.trait-title {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-slate-800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.trait-subtitle {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.trait-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-md;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.trait-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
// Collapse icon
|
||||
.collapse-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
font-size: $es-font-size-sm;
|
||||
color: $es-text-muted;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border-radius: $es-radius-sm;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
color: $es-primary;
|
||||
background: rgba($es-primary, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
// Show all toggle
|
||||
.trait-show-all-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-primary;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Trait total count badge (global fallback)
|
||||
.trait-total-count {
|
||||
@include count-badge($es-primary);
|
||||
}
|
||||
|
||||
// Required indicator
|
||||
.trait-required {
|
||||
color: $es-danger;
|
||||
font-size: $es-font-size-xs;
|
||||
}
|
||||
|
||||
// Validation error
|
||||
.trait-validation-error {
|
||||
color: $es-danger;
|
||||
font-size: $es-font-size-xs;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
// Trait toggle button
|
||||
.trait-toggle {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-secondary;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-md;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-50;
|
||||
border-color: $es-gray-300;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $es-primary;
|
||||
border-color: $es-primary;
|
||||
background: $es-primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Trait Body
|
||||
// =============================================================================
|
||||
|
||||
.condition-trait-body {
|
||||
padding: $es-spacing-lg;
|
||||
border-radius: 0 0 $es-radius-lg $es-radius-lg;
|
||||
background: $es-white;
|
||||
animation: slideDown 0.2s ease-out;
|
||||
}
|
||||
|
||||
// Condition trait collapsed - hide body
|
||||
.condition-trait.collapsed .condition-trait-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Section Styles
|
||||
// =============================================================================
|
||||
|
||||
.schedule-section,
|
||||
.context-section {
|
||||
margin-bottom: 1.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
border-bottom: 1px solid $es-slate-100;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 13px;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-slate-600;
|
||||
margin-bottom: $es-spacing-md;
|
||||
|
||||
i {
|
||||
font-size: $es-font-size-sm;
|
||||
color: $es-slate-400;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.section-content {
|
||||
// Container for section content
|
||||
}
|
||||
|
||||
.section-hint {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 11px;
|
||||
color: $es-slate-400;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Full-width Form Group Override
|
||||
// =============================================================================
|
||||
|
||||
.form-group.condition-trait-fullwidth {
|
||||
display: block !important;
|
||||
|
||||
> .control-label {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
> .col-lg-8,
|
||||
> .col-lg-8.col-lg-offset-3 {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
flex: 0 0 100% !important;
|
||||
padding-left: $es-spacing-lg !important;
|
||||
padding-right: $es-spacing-lg !important;
|
||||
margin: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Condition traits group label
|
||||
.condition-traits-group-label {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-slate-700;
|
||||
margin-bottom: $es-spacing-md;
|
||||
}
|
||||
|
||||
.condition-traits-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-md;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Animations
|
||||
// =============================================================================
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
2333
sources/scss/components/_dropdown.scss
Normal file
2333
sources/scss/components/_dropdown.scss
Normal file
File diff suppressed because it is too large
Load Diff
362
sources/scss/components/_entity-selector.scss
Normal file
362
sources/scss/components/_entity-selector.scss
Normal file
@@ -0,0 +1,362 @@
|
||||
/**
|
||||
* Entity Selector - Main Component Styles
|
||||
* Wrapper, header, body, tabs, blocks
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
// Main wrapper (supports both .target-conditions-trait and .entity-selector-trait)
|
||||
.target-conditions-trait,
|
||||
.entity-selector-trait {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
|
||||
// Trait Header (collapsible)
|
||||
.condition-trait-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: $es-spacing-md;
|
||||
padding: 0.875rem $es-spacing-md;
|
||||
background: $es-bg-header;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg $es-radius-lg 0 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background-color $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-bg-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.trait-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.trait-icon {
|
||||
font-size: $es-font-size-lg;
|
||||
color: $es-text-muted;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.trait-title-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.trait-title {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.trait-subtitle {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// Total count badge in header
|
||||
.trait-total-count {
|
||||
@include count-badge($es-primary);
|
||||
margin-left: $es-spacing-sm;
|
||||
}
|
||||
|
||||
// Show all toggle switch
|
||||
.trait-show-all-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
margin-right: 0.75rem;
|
||||
padding: 0.25rem $es-spacing-sm;
|
||||
border-radius: $es-radius-sm;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background-color $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-muted;
|
||||
}
|
||||
|
||||
.show-all-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-slider {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
background: $es-slate-300;
|
||||
border-radius: $es-radius-full;
|
||||
transition: background-color $es-transition-normal;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: $es-white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
transition: transform $es-transition-normal;
|
||||
}
|
||||
}
|
||||
|
||||
.show-all-checkbox:checked + .toggle-slider {
|
||||
background: $es-success;
|
||||
|
||||
&::after {
|
||||
transform: translateX(16px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Validation error states
|
||||
&.has-validation-error {
|
||||
border-color: $es-danger;
|
||||
box-shadow: 0 0 0 3px rgba($es-danger, 0.1);
|
||||
|
||||
.condition-trait-header {
|
||||
border-bottom-color: $es-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.trait-validation-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: 0.625rem $es-spacing-md;
|
||||
background: $es-danger-light;
|
||||
color: #b91c1c;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-medium;
|
||||
border-bottom: 1px solid #fecaca;
|
||||
|
||||
i {
|
||||
color: $es-danger;
|
||||
}
|
||||
}
|
||||
|
||||
// Required indicator
|
||||
&.trait-required .trait-title::after {
|
||||
content: ' *';
|
||||
color: $es-danger;
|
||||
}
|
||||
|
||||
// Body
|
||||
.condition-trait-body {
|
||||
padding: 0;
|
||||
background: $es-white;
|
||||
border-radius: 0 0 $es-radius-lg $es-radius-lg;
|
||||
}
|
||||
|
||||
// Block type tabs
|
||||
.target-block-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
background: $es-slate-100;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
}
|
||||
|
||||
.target-block-tab {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
flex: none;
|
||||
min-width: 0;
|
||||
padding: 0.625rem $es-spacing-md;
|
||||
margin-bottom: -1px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-medium;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
color: $es-slate-700;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $es-white;
|
||||
border-bottom-color: $es-cyan-500;
|
||||
color: $es-primary;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
|
||||
.tab-label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tab-badge {
|
||||
@include count-badge($es-primary);
|
||||
}
|
||||
|
||||
&.has-data:not(.active) .tab-badge {
|
||||
@include count-badge($es-slate-400);
|
||||
}
|
||||
}
|
||||
|
||||
// Block container
|
||||
.target-block-container {
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.target-block-content {
|
||||
padding: $es-spacing-md;
|
||||
}
|
||||
|
||||
.target-block-groups {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-md;
|
||||
}
|
||||
|
||||
// Block header (for standalone blocks)
|
||||
.target-block-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-bg-header;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
}
|
||||
|
||||
// Empty state
|
||||
.target-block-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-xl;
|
||||
text-align: center;
|
||||
color: $es-text-muted;
|
||||
|
||||
i {
|
||||
font-size: 2rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Collapse toggle
|
||||
.trait-collapse-toggle,
|
||||
.collapse-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $es-text-muted;
|
||||
cursor: pointer;
|
||||
transition: transform $es-transition-normal;
|
||||
|
||||
&.collapsed {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Header actions
|
||||
.trait-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
// Collapsed state
|
||||
&.collapsed {
|
||||
.condition-trait-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.condition-trait-header {
|
||||
border-radius: $es-radius-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Single mode specific styles
|
||||
.target-conditions-trait.single-mode,
|
||||
.entity-selector-trait.single-mode {
|
||||
.target-block-tabs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.target-block-container {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Header action buttons
|
||||
.target-conditions-trait,
|
||||
.entity-selector-trait {
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-xs;
|
||||
}
|
||||
|
||||
.header-action-btn {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem $es-spacing-sm;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-muted;
|
||||
background: transparent;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
842
sources/scss/components/_groups.scss
Normal file
842
sources/scss/components/_groups.scss
Normal file
@@ -0,0 +1,842 @@
|
||||
/**
|
||||
* Groups Component
|
||||
* Selection groups, include/exclude sections, method selectors
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
.target-conditions-trait,
|
||||
.entity-selector-trait {
|
||||
|
||||
// Group container
|
||||
.target-group {
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Group header
|
||||
.target-group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $es-spacing-md;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-bg-header;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
}
|
||||
|
||||
.target-group-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
|
||||
.group-number {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
padding: 0 0.25rem;
|
||||
background: $es-primary;
|
||||
color: $es-white;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-bold;
|
||||
border-radius: $es-radius-full;
|
||||
}
|
||||
}
|
||||
|
||||
.target-group-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-xs;
|
||||
}
|
||||
|
||||
.group-action-btn {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
|
||||
&.danger:hover {
|
||||
background: $es-danger-light;
|
||||
color: $es-danger;
|
||||
}
|
||||
}
|
||||
|
||||
// Group body
|
||||
.target-group-body,
|
||||
.group-body {
|
||||
padding: $es-spacing-md;
|
||||
}
|
||||
|
||||
// Include section
|
||||
.include-section {
|
||||
margin-bottom: $es-spacing-md;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-xs;
|
||||
margin-bottom: $es-spacing-sm;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
&.label-include {
|
||||
color: $es-success-dark;
|
||||
|
||||
i {
|
||||
color: $es-success;
|
||||
}
|
||||
}
|
||||
|
||||
&.label-exclude {
|
||||
color: $es-danger;
|
||||
|
||||
i {
|
||||
color: $es-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Method selector
|
||||
.method-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
margin-bottom: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.method-selector-wrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.method-select {
|
||||
@include input-base;
|
||||
padding-right: 2rem;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
|
||||
background-position: right 0.5rem center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.5em 1.5em;
|
||||
}
|
||||
|
||||
.method-help-btn {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-full;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-100;
|
||||
color: $es-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Value picker (search trigger)
|
||||
.value-picker {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.value-picker-trigger {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
width: 100%;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-md;
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-sm;
|
||||
text-align: left;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
border-color: $es-slate-300;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $es-primary;
|
||||
@include focus-ring($es-primary);
|
||||
}
|
||||
|
||||
i {
|
||||
color: $es-text-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Pattern input (text input for patterns)
|
||||
.pattern-input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pattern-input {
|
||||
@include input-base;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.pattern-add-btn {
|
||||
@include button-reset;
|
||||
position: absolute;
|
||||
right: 0.25rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: $es-primary;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Multi-range input (price ranges)
|
||||
.multi-range-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.range-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.range-input {
|
||||
@include input-base;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.range-separator {
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
|
||||
.range-remove-btn {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-danger-light;
|
||||
color: $es-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.range-add-btn {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
color: $es-primary;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Multi-select tiles (stock status, etc.)
|
||||
.multi-select-tiles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $es-spacing-xs;
|
||||
}
|
||||
|
||||
.multi-select-tile {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
background: $es-slate-100;
|
||||
color: $es-text-secondary;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $es-radius-full;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: $es-primary-light;
|
||||
color: $es-primary;
|
||||
border-color: $es-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Exclude section
|
||||
.exclude-section {
|
||||
margin-top: $es-spacing-md;
|
||||
padding-top: $es-spacing-md;
|
||||
border-top: 1px dashed $es-border-color;
|
||||
}
|
||||
|
||||
.exclude-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.exclude-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-sm;
|
||||
background: rgba($es-danger, 0.05);
|
||||
border: 1px solid rgba($es-danger, 0.2);
|
||||
border-radius: $es-radius-md;
|
||||
}
|
||||
|
||||
.exclude-row-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.exclude-remove-btn {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
flex-shrink: 0;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-danger-light;
|
||||
color: $es-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.add-exclude-btn {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-top: $es-spacing-sm;
|
||||
padding: 0.25rem 0.5rem;
|
||||
color: $es-danger;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
border: 1px dashed $es-danger;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-danger-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Add group button (used in block-footer)
|
||||
.btn-add-group {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.5rem 0.875rem;
|
||||
color: $es-primary;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-medium;
|
||||
background: rgba($es-primary, 0.05);
|
||||
border: 1px dashed $es-primary;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: rgba($es-primary, 0.1);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// Block footer
|
||||
.block-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-md;
|
||||
border-top: 1px solid $es-border-color;
|
||||
}
|
||||
|
||||
// Block body
|
||||
.block-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Groups container
|
||||
.groups-container {
|
||||
padding: $es-spacing-md;
|
||||
}
|
||||
|
||||
// Groups empty state
|
||||
.groups-empty-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $es-spacing-xl;
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
|
||||
// Selection group
|
||||
.selection-group {
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
margin-bottom: $es-spacing-md;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
.group-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.group-collapse-toggle i {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Group header
|
||||
.group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-bg-header;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg $es-radius-lg 0 0;
|
||||
cursor: pointer;
|
||||
|
||||
&.group-header-single {
|
||||
padding: $es-spacing-xs $es-spacing-md;
|
||||
background: transparent;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.group-collapse-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
color: $es-text-muted;
|
||||
|
||||
i {
|
||||
transition: transform $es-transition-fast;
|
||||
}
|
||||
}
|
||||
|
||||
.group-name-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.group-name-input {
|
||||
flex: 1;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $es-white;
|
||||
border-color: $es-border-color;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $es-text-muted;
|
||||
font-weight: $es-font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.group-count-badge {
|
||||
@include count-badge($es-primary);
|
||||
}
|
||||
|
||||
.btn-remove-group {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-danger-light;
|
||||
color: $es-danger;
|
||||
}
|
||||
}
|
||||
|
||||
// Group include section
|
||||
.group-include {
|
||||
margin-bottom: $es-spacing-md;
|
||||
}
|
||||
|
||||
.section-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
// Method selector wrapper (from PHP)
|
||||
.method-selector-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.method-info-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.include-method-select,
|
||||
.exclude-method-select {
|
||||
flex: 1;
|
||||
@include input-base;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Group excludes section
|
||||
.group-excludes {
|
||||
margin-top: $es-spacing-md;
|
||||
|
||||
&.has-excludes {
|
||||
padding-top: $es-spacing-md;
|
||||
border-top: 1px dashed $es-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.except-separator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.except-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: $es-danger-light;
|
||||
color: $es-danger;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
border-radius: $es-radius-sm;
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.exclude-rows-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.exclude-row {
|
||||
padding: $es-spacing-sm;
|
||||
background: rgba($es-danger, 0.03);
|
||||
border: 1px solid rgba($es-danger, 0.15);
|
||||
border-radius: $es-radius-md;
|
||||
}
|
||||
|
||||
.exclude-header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
margin-bottom: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.btn-remove-exclude-row {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-danger-light;
|
||||
color: $es-danger;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-add-exclude,
|
||||
.btn-add-another-exclude {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-top: $es-spacing-sm;
|
||||
padding: 0.375rem 0.625rem;
|
||||
color: $es-danger;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
background: transparent;
|
||||
border: 1px dashed rgba($es-danger, 0.5);
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-danger-light;
|
||||
border-color: $es-danger;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// Group modifiers (inline version from PHP)
|
||||
// Uses negative margins to break out of .group-body padding
|
||||
.group-modifiers {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: $es-spacing-md;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
margin: $es-spacing-md (-$es-spacing-md) (-$es-spacing-md);
|
||||
background: $es-slate-50;
|
||||
border-top: 1px solid $es-border-color;
|
||||
border-radius: 0 0 $es-radius-lg $es-radius-lg;
|
||||
}
|
||||
|
||||
.modifier-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.group-modifier-limit {
|
||||
width: 60px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: $es-font-size-xs;
|
||||
text-align: center;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-sm;
|
||||
|
||||
&:focus {
|
||||
border-color: $es-primary;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.group-modifier-sort {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: $es-font-size-xs;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-sm;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
border-color: $es-primary;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sort-dir {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $es-text-muted;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-100;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.group-preview-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: $es-slate-100;
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
border-radius: $es-radius-full;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&.clickable {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $es-primary-light;
|
||||
color: $es-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// OR separator between groups
|
||||
.group-separator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $es-spacing-sm 0;
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: $es-border-color;
|
||||
margin: 0 $es-spacing-md;
|
||||
}
|
||||
}
|
||||
|
||||
// Group modifiers (limit, sort)
|
||||
.group-modifiers {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $es-spacing-md;
|
||||
padding-top: $es-spacing-md;
|
||||
margin-top: $es-spacing-md;
|
||||
border-top: 1px solid $es-border-color;
|
||||
}
|
||||
|
||||
.modifier-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.modifier-label {
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-muted;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.modifier-input {
|
||||
@include input-base;
|
||||
width: 80px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: $es-font-size-xs;
|
||||
}
|
||||
|
||||
.modifier-select {
|
||||
@include input-base;
|
||||
width: auto;
|
||||
padding: 0.25rem 1.5rem 0.25rem 0.5rem;
|
||||
font-size: $es-font-size-xs;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
|
||||
background-position: right 0.25rem center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.25em 1.25em;
|
||||
}
|
||||
|
||||
// Condition match count badge
|
||||
.condition-match-count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.125rem 0.375rem;
|
||||
background: $es-slate-100;
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
border-radius: $es-radius-full;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
}
|
||||
|
||||
&.has-results {
|
||||
background: $es-primary-light;
|
||||
color: $es-primary;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
378
sources/scss/components/_list-preview.scss
Normal file
378
sources/scss/components/_list-preview.scss
Normal file
@@ -0,0 +1,378 @@
|
||||
/**
|
||||
* List Preview Component
|
||||
* Entity list display in modals and popovers
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
// =============================================================================
|
||||
// Preview Popover (floating popover attached to badges)
|
||||
// =============================================================================
|
||||
|
||||
.target-preview-popover {
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
min-width: 280px;
|
||||
max-width: 400px;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
box-shadow: $es-shadow-lg;
|
||||
overflow: hidden;
|
||||
|
||||
// Arrow pointing to badge
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-bottom: 8px solid $es-border-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid $es-white;
|
||||
}
|
||||
|
||||
.preview-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-bg-header;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
|
||||
.preview-count {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
}
|
||||
|
||||
.preview-close {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
color: $es-text-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-list {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
@include custom-scrollbar;
|
||||
padding: $es-spacing-sm;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-xs;
|
||||
}
|
||||
|
||||
.preview-footer {
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-slate-50;
|
||||
border-top: 1px solid $es-border-color;
|
||||
text-align: center;
|
||||
|
||||
.preview-more-info {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
font-weight: $es-font-weight-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Preview List Container
|
||||
// =============================================================================
|
||||
|
||||
// Preview list container
|
||||
.entity-list-preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-xs;
|
||||
}
|
||||
|
||||
// Preview item
|
||||
.preview-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-sm;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-md;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-bg-hover;
|
||||
border-color: $es-slate-300;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-item-image {
|
||||
flex-shrink: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
object-fit: cover;
|
||||
border-radius: $es-radius-sm;
|
||||
background: $es-slate-100;
|
||||
}
|
||||
|
||||
.preview-item-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: $es-slate-100;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
font-size: $es-font-size-base;
|
||||
}
|
||||
|
||||
.preview-item-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.preview-item-name {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-primary;
|
||||
@include text-truncate;
|
||||
}
|
||||
|
||||
.preview-item-meta {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
@include text-truncate;
|
||||
}
|
||||
|
||||
.preview-item-badge {
|
||||
@include badge($es-slate-100, $es-text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.preview-item-price {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-primary;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// Preview grid layout
|
||||
.entity-list-preview.grid-layout {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: $es-spacing-sm;
|
||||
|
||||
.preview-item {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: $es-spacing-md;
|
||||
}
|
||||
|
||||
.preview-item-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.preview-item-info {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Compact list layout
|
||||
.entity-list-preview.compact {
|
||||
gap: 0;
|
||||
|
||||
.preview-item {
|
||||
border-radius: 0;
|
||||
border-bottom: none;
|
||||
|
||||
&:first-child {
|
||||
border-radius: $es-radius-md $es-radius-md 0 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 0 $es-radius-md $es-radius-md;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Preview empty state
|
||||
.preview-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-xl;
|
||||
text-align: center;
|
||||
color: $es-text-muted;
|
||||
|
||||
i {
|
||||
font-size: 2rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Preview loading state
|
||||
.preview-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $es-spacing-xl;
|
||||
color: $es-text-muted;
|
||||
|
||||
.spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 3px solid $es-slate-200;
|
||||
border-top-color: $es-primary;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
// Preview pagination
|
||||
.preview-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $es-spacing-xs;
|
||||
padding: $es-spacing-md 0;
|
||||
}
|
||||
|
||||
.preview-page-btn {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
padding: 0 $es-spacing-sm;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-secondary;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: $es-bg-hover;
|
||||
border-color: $es-slate-300;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $es-primary;
|
||||
border-color: $es-primary;
|
||||
color: $es-white;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
// Preview summary
|
||||
.preview-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-bg-header;
|
||||
border-top: 1px solid $es-border-color;
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
}
|
||||
|
||||
.preview-count {
|
||||
font-weight: $es-font-weight-medium;
|
||||
|
||||
strong {
|
||||
color: $es-text-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Preview filters in modal
|
||||
.preview-filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-slate-50;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
}
|
||||
|
||||
.preview-filter-chip {
|
||||
@include chip;
|
||||
}
|
||||
|
||||
.preview-search {
|
||||
@include input-base;
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
padding: 0.375rem $es-spacing-sm;
|
||||
font-size: $es-font-size-xs;
|
||||
}
|
||||
|
||||
// Scrollable preview list
|
||||
.preview-list-scrollable {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
@include custom-scrollbar;
|
||||
}
|
||||
|
||||
// Mini preview (inline)
|
||||
.entity-mini-preview {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: $es-slate-50;
|
||||
border-radius: $es-radius-sm;
|
||||
font-size: $es-font-size-xs;
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
object-fit: cover;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.mini-preview-name {
|
||||
color: $es-text-primary;
|
||||
font-weight: $es-font-weight-medium;
|
||||
@include text-truncate;
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
214
sources/scss/components/_method-dropdown.scss
Normal file
214
sources/scss/components/_method-dropdown.scss
Normal file
@@ -0,0 +1,214 @@
|
||||
/**
|
||||
* Method Dropdown Component
|
||||
* Custom select dropdown with icons for method selection
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
.target-conditions-trait,
|
||||
.entity-selector-trait {
|
||||
|
||||
// Method dropdown trigger button
|
||||
.method-dropdown-trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
height: 36px;
|
||||
padding: 0 $es-spacing-md;
|
||||
border-radius: $es-radius-md;
|
||||
background: $es-white;
|
||||
color: $es-slate-800;
|
||||
font-size: $es-font-size-sm;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
min-width: 180px;
|
||||
max-width: 320px;
|
||||
border: 1px solid $es-border-color;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-50;
|
||||
border-color: $es-gray-300;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: none;
|
||||
border-color: $es-primary;
|
||||
box-shadow: 0 0 0 3px rgba($es-primary, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.method-trigger-icon {
|
||||
font-size: $es-font-size-sm;
|
||||
color: $es-text-muted;
|
||||
flex-shrink: 0;
|
||||
width: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.method-trigger-label {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: $es-font-weight-medium;
|
||||
}
|
||||
|
||||
.method-trigger-caret {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-slate-400;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
// Locked state
|
||||
.selector-locked .method-dropdown-trigger {
|
||||
background: $es-slate-100;
|
||||
color: $es-slate-400;
|
||||
cursor: not-allowed;
|
||||
border-color: $es-border-color;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-100;
|
||||
border-color: $es-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Method selector wrapper
|
||||
.method-selector-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Hidden select (for form submission)
|
||||
.method-select-hidden {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Method Dropdown Menu (appended to body, outside trait wrappers)
|
||||
// =============================================================================
|
||||
|
||||
.method-dropdown-menu {
|
||||
position: absolute;
|
||||
z-index: $es-z-dropdown + 1;
|
||||
min-width: 200px;
|
||||
max-width: 360px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
background: $es-white;
|
||||
border-radius: $es-radius-lg;
|
||||
padding: 0.375rem 0;
|
||||
border: 1px solid $es-border-color;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
|
||||
animation: methodDropdownFadeIn 0.15s ease;
|
||||
@include custom-scrollbar;
|
||||
}
|
||||
|
||||
@keyframes methodDropdownFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Method dropdown item
|
||||
.method-dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
padding: 0.5rem $es-spacing-md;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.1s;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-100;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: rgba($es-primary, 0.08);
|
||||
}
|
||||
|
||||
.method-item-icon {
|
||||
font-size: $es-font-size-sm;
|
||||
color: $es-text-muted;
|
||||
width: 18px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&.selected .method-item-icon {
|
||||
color: $es-primary;
|
||||
}
|
||||
|
||||
.method-item-label {
|
||||
flex: 1;
|
||||
font-size: $es-font-size-sm;
|
||||
color: $es-slate-700;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&.selected .method-item-label {
|
||||
color: $es-cyan-700;
|
||||
font-weight: $es-font-weight-medium;
|
||||
}
|
||||
|
||||
.method-item-check {
|
||||
font-size: $es-font-size-xs;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
color: $es-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Method dropdown optgroup
|
||||
.method-dropdown-optgroup {
|
||||
margin-top: 0.25rem;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.method-optgroup-label {
|
||||
padding: 0.5rem $es-spacing-md;
|
||||
font-size: 11px;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-muted;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
background: $es-slate-50;
|
||||
border-top: 1px solid $es-slate-100;
|
||||
border-bottom: 1px solid $es-slate-100;
|
||||
|
||||
.method-dropdown-optgroup:first-child & {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.method-optgroup-items {
|
||||
padding: 0.25rem 0;
|
||||
|
||||
.method-dropdown-item {
|
||||
padding-left: $es-spacing-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Method info placeholder
|
||||
.method-info-placeholder {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
font-style: italic;
|
||||
}
|
||||
275
sources/scss/components/_modal.scss
Normal file
275
sources/scss/components/_modal.scss
Normal file
@@ -0,0 +1,275 @@
|
||||
/**
|
||||
* Modal Component
|
||||
* Preview modals, confirmation dialogs
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
// Modal backdrop
|
||||
.mpr-modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: $es-z-modal;
|
||||
opacity: 0;
|
||||
transition: opacity $es-transition-normal;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Modal container
|
||||
.mpr-modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0.95);
|
||||
z-index: $es-z-modal + 1;
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
max-height: 90vh;
|
||||
background: $es-white;
|
||||
border-radius: $es-radius-xl;
|
||||
box-shadow: $es-shadow-xl;
|
||||
opacity: 0;
|
||||
transition: all $es-transition-normal;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
|
||||
&.modal-sm {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
&.modal-lg {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
&.modal-xl {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
&.modal-fullscreen {
|
||||
width: 95%;
|
||||
max-width: none;
|
||||
height: 90vh;
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Modal header
|
||||
.mpr-modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $es-spacing-md;
|
||||
padding: $es-spacing-md $es-spacing-lg;
|
||||
background: $es-bg-header;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mpr-modal-title {
|
||||
font-size: $es-font-size-base;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mpr-modal-close {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-md;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: $es-font-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Modal body
|
||||
.mpr-modal-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: $es-spacing-lg;
|
||||
@include custom-scrollbar;
|
||||
}
|
||||
|
||||
// Modal footer
|
||||
.mpr-modal-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-md $es-spacing-lg;
|
||||
background: $es-bg-header;
|
||||
border-top: 1px solid $es-border-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mpr-modal-btn {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $es-spacing-xs;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-medium;
|
||||
border-radius: $es-radius-md;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&.btn-secondary {
|
||||
color: $es-text-secondary;
|
||||
background: $es-slate-100;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
color: $es-white;
|
||||
background: $es-primary;
|
||||
|
||||
&:hover {
|
||||
background: $es-primary-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-danger {
|
||||
color: $es-white;
|
||||
background: $es-danger;
|
||||
|
||||
&:hover {
|
||||
background: darken($es-danger, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
// Preview popover styles moved to _list-preview.scss
|
||||
|
||||
.popover-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-bg-header;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg $es-radius-lg 0 0;
|
||||
}
|
||||
|
||||
.popover-title {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
}
|
||||
|
||||
.popover-close {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
padding: $es-spacing-sm;
|
||||
@include custom-scrollbar;
|
||||
}
|
||||
|
||||
.popover-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-bg-header;
|
||||
border-top: 1px solid $es-border-color;
|
||||
border-radius: 0 0 $es-radius-lg $es-radius-lg;
|
||||
}
|
||||
|
||||
.popover-info {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
}
|
||||
|
||||
.popover-load-more {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-primary;
|
||||
border-radius: $es-radius-sm;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Popover arrow
|
||||
.popover-arrow {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
transform: rotate(45deg);
|
||||
|
||||
&.arrow-top {
|
||||
top: -7px;
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.arrow-bottom {
|
||||
bottom: -7px;
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
308
sources/scss/components/_schedule.scss
Normal file
308
sources/scss/components/_schedule.scss
Normal file
@@ -0,0 +1,308 @@
|
||||
/**
|
||||
* Schedule Conditions Component
|
||||
* DateTime picker, weekly timeline, holidays
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
// Schedule conditions wrapper
|
||||
.schedule-conditions-trait {
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
}
|
||||
|
||||
// Schedule header
|
||||
.schedule-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $es-spacing-md;
|
||||
padding: 0.875rem $es-spacing-md;
|
||||
background: $es-bg-header;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg $es-radius-lg 0 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background-color $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-bg-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
|
||||
i {
|
||||
color: $es-text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
// Schedule body
|
||||
.schedule-body {
|
||||
padding: $es-spacing-md;
|
||||
}
|
||||
|
||||
// Schedule section
|
||||
.schedule-section {
|
||||
margin-bottom: $es-spacing-lg;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
margin-bottom: $es-spacing-sm;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
|
||||
i {
|
||||
color: $es-text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-section-description {
|
||||
margin-bottom: $es-spacing-md;
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
}
|
||||
|
||||
// DateTime range picker
|
||||
.datetime-range {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $es-spacing-md;
|
||||
}
|
||||
|
||||
.datetime-field {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.datetime-label {
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
|
||||
.datetime-input {
|
||||
@include input-base;
|
||||
}
|
||||
|
||||
// Weekly schedule
|
||||
.weekly-schedule {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.day-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-md;
|
||||
padding: $es-spacing-sm;
|
||||
background: $es-slate-50;
|
||||
border-radius: $es-radius-md;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.day-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.day-checkbox {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.day-name {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-primary;
|
||||
}
|
||||
|
||||
// Timeline slider
|
||||
.timeline-slider {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
height: 24px;
|
||||
background: $es-slate-200;
|
||||
border-radius: $es-radius-full;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.timeline-fill {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background: $es-primary;
|
||||
border-radius: $es-radius-full;
|
||||
transition: all $es-transition-fast;
|
||||
}
|
||||
|
||||
.timeline-handle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: $es-white;
|
||||
border: 2px solid $es-primary;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
cursor: grab;
|
||||
box-shadow: $es-shadow-sm;
|
||||
transition: box-shadow $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
box-shadow: $es-shadow-md;
|
||||
}
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
&.handle-start {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&.handle-end {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Time display
|
||||
.day-times {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-xs;
|
||||
min-width: 120px;
|
||||
font-size: $es-font-size-xs;
|
||||
font-family: monospace;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
|
||||
.time-separator {
|
||||
color: $es-text-muted;
|
||||
}
|
||||
|
||||
// Holiday exclusions
|
||||
.holiday-section {
|
||||
padding: $es-spacing-md;
|
||||
background: $es-slate-50;
|
||||
border-radius: $es-radius-md;
|
||||
}
|
||||
|
||||
.holiday-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
margin-bottom: $es-spacing-md;
|
||||
}
|
||||
|
||||
.holiday-checkbox {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.holiday-label {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-primary;
|
||||
}
|
||||
|
||||
.holiday-countries {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $es-spacing-xs;
|
||||
}
|
||||
|
||||
.holiday-country-chip {
|
||||
@include chip;
|
||||
cursor: pointer;
|
||||
|
||||
&.selected {
|
||||
background: $es-primary-light;
|
||||
color: $es-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Server time display
|
||||
.server-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-info-light;
|
||||
border-radius: $es-radius-md;
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-info;
|
||||
|
||||
i {
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
|
||||
.time-value {
|
||||
font-family: monospace;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
// Schedule summary
|
||||
.schedule-summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-xs;
|
||||
padding: $es-spacing-md;
|
||||
background: $es-slate-50;
|
||||
border-radius: $es-radius-md;
|
||||
font-size: $es-font-size-sm;
|
||||
color: $es-text-secondary;
|
||||
|
||||
.summary-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
|
||||
i {
|
||||
color: $es-success;
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
|
||||
&.inactive i {
|
||||
color: $es-text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Collapsed state
|
||||
.schedule-conditions-trait.collapsed {
|
||||
.schedule-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.schedule-header {
|
||||
border-radius: $es-radius-lg;
|
||||
}
|
||||
}
|
||||
142
sources/scss/components/_tips.scss
Normal file
142
sources/scss/components/_tips.scss
Normal file
@@ -0,0 +1,142 @@
|
||||
/**
|
||||
* Tips Box Component
|
||||
* Pro tips and help information display
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
.target-conditions-trait,
|
||||
.entity-selector-trait {
|
||||
|
||||
// Tips box container
|
||||
.target-tips-box {
|
||||
margin: $es-spacing-lg $es-spacing-md $es-spacing-md;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
}
|
||||
|
||||
// Tips header (clickable to expand/collapse)
|
||||
.tips-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
padding: $es-spacing-md $es-spacing-lg;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background-color $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
// Lightbulb icon
|
||||
> i:first-child {
|
||||
font-size: 1rem;
|
||||
color: $es-warning;
|
||||
}
|
||||
|
||||
// Title text
|
||||
> span {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-slate-600;
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle chevron icon
|
||||
.tips-toggle {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-slate-400;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
// Expanded state
|
||||
.target-tips-box.expanded {
|
||||
.tips-toggle {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Tips content (hidden by default)
|
||||
.tips-content {
|
||||
display: none;
|
||||
padding: 0 $es-spacing-lg $es-spacing-lg;
|
||||
}
|
||||
|
||||
// Tips grid layout
|
||||
.tips-grid {
|
||||
display: grid;
|
||||
gap: $es-spacing-md;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
}
|
||||
|
||||
// Individual tip item
|
||||
.tip-item {
|
||||
display: flex;
|
||||
gap: $es-spacing-md;
|
||||
padding: $es-spacing-md;
|
||||
background: $es-white;
|
||||
border-radius: $es-radius-md;
|
||||
border: 1px solid $es-border-color;
|
||||
}
|
||||
|
||||
// Tip icon
|
||||
.tip-icon {
|
||||
flex-shrink: 0;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $es-primary-light;
|
||||
border-radius: $es-radius-md;
|
||||
color: $es-primary;
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
|
||||
// Tip text content
|
||||
.tip-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-slate-700;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 11px;
|
||||
color: $es-text-muted;
|
||||
line-height: 1.625;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Tips footer
|
||||
.tips-footer {
|
||||
margin-top: $es-spacing-md;
|
||||
padding: 0.625rem $es-spacing-md;
|
||||
background: $es-white;
|
||||
border-radius: $es-radius-md;
|
||||
border: 1px dashed $es-gray-300;
|
||||
font-size: 11px;
|
||||
color: $es-text-muted;
|
||||
line-height: 1.625;
|
||||
|
||||
i {
|
||||
color: $es-primary;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
178
sources/scss/components/_tooltip.scss
Normal file
178
sources/scss/components/_tooltip.scss
Normal file
@@ -0,0 +1,178 @@
|
||||
/**
|
||||
* Tooltip Component
|
||||
* Info tooltips and help popovers
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
// =============================================================================
|
||||
// MPR Info Wrapper (hover tooltip trigger)
|
||||
// =============================================================================
|
||||
|
||||
.mpr-info-wrapper {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
cursor: help;
|
||||
vertical-align: middle;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
// Tooltip (absolute positioned, follows element)
|
||||
.mpr-info-wrapper .mpr-tooltip {
|
||||
position: absolute;
|
||||
background: $es-white;
|
||||
color: $es-slate-800;
|
||||
padding: $es-spacing-md $es-spacing-lg;
|
||||
border-radius: $es-radius-md;
|
||||
font-size: 13px;
|
||||
line-height: 1.625;
|
||||
white-space: normal;
|
||||
z-index: 1050;
|
||||
max-width: 350px;
|
||||
min-width: 200px;
|
||||
text-align: left;
|
||||
bottom: calc(100% + 10px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
|
||||
rgba(64, 68, 82, 0.16) 0px 0px 0px 1px,
|
||||
rgba(64, 68, 82, 0.08) 0px 2px 5px 0px;
|
||||
|
||||
// Arrow (border)
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 9px solid transparent;
|
||||
border-top-color: rgba(64, 68, 82, 0.16);
|
||||
}
|
||||
|
||||
// Arrow (fill)
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 8px solid transparent;
|
||||
border-top-color: $es-white;
|
||||
}
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: #337ab7;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Fixed Tooltip (appended to body)
|
||||
// =============================================================================
|
||||
|
||||
.mpr-tooltip-fixed {
|
||||
position: fixed;
|
||||
background: $es-white;
|
||||
color: $es-slate-800;
|
||||
padding: $es-spacing-md $es-spacing-lg;
|
||||
border-radius: $es-radius-md;
|
||||
font-size: 13px;
|
||||
line-height: 1.625;
|
||||
white-space: normal;
|
||||
z-index: 10500;
|
||||
max-width: 350px;
|
||||
min-width: 200px;
|
||||
text-align: left;
|
||||
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
|
||||
rgba(64, 68, 82, 0.16) 0px 0px 0px 1px,
|
||||
rgba(64, 68, 82, 0.08) 0px 2px 5px 0px;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: #337ab7;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// MPR Icon (SVG mask icons)
|
||||
// =============================================================================
|
||||
|
||||
.mpr-icon {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: $es-slate-600;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
-webkit-mask-size: contain;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
|
||||
&:hover {
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
|
||||
&.link {
|
||||
background-color: #5bc0de;
|
||||
|
||||
&:hover {
|
||||
background-color: #337ab7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Info icon
|
||||
.mpr-icon.icon-info {
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2.5H5A2.5 2.5 0 0 0 2.5 5v6A2.5 2.5 0 0 0 5 13.5h6a2.5 2.5 0 0 0 2.5-2.5V5A2.5 2.5 0 0 0 11 2.5ZM5 1a4 4 0 0 0-4 4v6a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4V5a4 4 0 0 0-4-4H5Z' fill='%23414552'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.25 8A.75.75 0 0 1 7 7.25h1.25A.75.75 0 0 1 9 8v3.5a.75.75 0 0 1-1.5 0V8.75H7A.75.75 0 0 1 6.25 8Z' fill='%23414552'/%3E%3Cpath d='M6.75 5a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Z' fill='%23414552'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2.5H5A2.5 2.5 0 0 0 2.5 5v6A2.5 2.5 0 0 0 5 13.5h6a2.5 2.5 0 0 0 2.5-2.5V5A2.5 2.5 0 0 0 11 2.5ZM5 1a4 4 0 0 0-4 4v6a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4V5a4 4 0 0 0-4-4H5Z' fill='%23414552'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.25 8A.75.75 0 0 1 7 7.25h1.25A.75.75 0 0 1 9 8v3.5a.75.75 0 0 1-1.5 0V8.75H7A.75.75 0 0 1 6.25 8Z' fill='%23414552'/%3E%3Cpath d='M6.75 5a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Z' fill='%23414552'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Tooltip Content Styling
|
||||
// =============================================================================
|
||||
|
||||
.tooltip-list {
|
||||
margin: 0.5rem 0;
|
||||
|
||||
> div {
|
||||
margin: 0.25rem 0;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-example {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
background: $es-slate-100;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: $es-radius-sm;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.tooltip-logic {
|
||||
font-size: 11px;
|
||||
color: $es-text-muted;
|
||||
margin-top: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid $es-border-color;
|
||||
}
|
||||
242
sources/scss/components/_value-picker.scss
Normal file
242
sources/scss/components/_value-picker.scss
Normal file
@@ -0,0 +1,242 @@
|
||||
/**
|
||||
* Value Picker Component
|
||||
* Search boxes, input types, range inputs
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
.target-conditions-trait,
|
||||
.entity-selector-trait {
|
||||
|
||||
// Value picker container
|
||||
.value-picker {
|
||||
padding: $es-spacing-sm 0;
|
||||
|
||||
&[style*="display: none"],
|
||||
&[style*="display:none"] {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.include-picker,
|
||||
.exclude-picker {
|
||||
// Section-specific picker styles
|
||||
}
|
||||
|
||||
// Entity search box
|
||||
.entity-search-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-xs;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-md;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:focus-within {
|
||||
border-color: $es-primary;
|
||||
box-shadow: 0 0 0 2px rgba($es-primary, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.entity-search-icon {
|
||||
color: $es-text-muted;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// Override parent form's max-width on search input
|
||||
input.entity-search-input,
|
||||
input.entity-search-input[type="text"] {
|
||||
@include input-reset;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: auto !important;
|
||||
max-width: none !important;
|
||||
padding: 0.375rem;
|
||||
font-size: $es-font-size-sm;
|
||||
color: $es-text-primary;
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
&::placeholder {
|
||||
color: $es-text-muted;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $es-primary;
|
||||
|
||||
i {
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
// Numeric range box
|
||||
.numeric-range-box,
|
||||
.multi-range-input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-xs;
|
||||
}
|
||||
|
||||
.range-min-input,
|
||||
.range-max-input {
|
||||
@include input-base;
|
||||
width: 100px;
|
||||
padding: $es-spacing-sm;
|
||||
text-align: center;
|
||||
font-size: $es-font-size-sm;
|
||||
|
||||
&::-webkit-inner-spin-button,
|
||||
&::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.range-separator {
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-medium;
|
||||
}
|
||||
|
||||
.btn-add-range {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: $es-white;
|
||||
background: $es-primary;
|
||||
border-radius: $es-radius-md;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-primary-hover;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// Multi-range container
|
||||
.multi-range-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
// Date range box
|
||||
.date-range-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-xs;
|
||||
}
|
||||
|
||||
.date-from-input,
|
||||
.date-to-input {
|
||||
@include input-base;
|
||||
width: 140px;
|
||||
padding: $es-spacing-sm;
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
|
||||
// Multi-select tiles
|
||||
.multi-select-tiles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $es-spacing-xs;
|
||||
}
|
||||
|
||||
.tile-option {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.375rem 0.625rem;
|
||||
color: $es-text-secondary;
|
||||
background: $es-slate-100;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $es-radius-sm;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: $es-primary;
|
||||
background: $es-primary-light;
|
||||
border-color: $es-primary;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.tile-label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Select input box
|
||||
.select-input-box {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.select-value-input {
|
||||
@include input-base;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
font-size: $es-font-size-sm;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
// Boolean input box
|
||||
.boolean-input-box {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-success-light;
|
||||
color: $es-success-dark;
|
||||
border-radius: $es-radius-md;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-medium;
|
||||
}
|
||||
|
||||
.boolean-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
|
||||
&::before {
|
||||
content: '\2713';
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
// Condition match count badge
|
||||
.condition-match-count {
|
||||
@include count-badge($es-primary);
|
||||
margin-left: $es-spacing-sm;
|
||||
}
|
||||
}
|
||||
1
sources/scss/components/index.php
Normal file
1
sources/scss/components/index.php
Normal file
@@ -0,0 +1 @@
|
||||
<?php header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); header("Location: ../"); exit;
|
||||
1
sources/scss/index.php
Normal file
1
sources/scss/index.php
Normal file
@@ -0,0 +1 @@
|
||||
<?php header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); header("Location: ../"); exit;
|
||||
81
sources/scss/layouts/_form-integration.scss
Normal file
81
sources/scss/layouts/_form-integration.scss
Normal file
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
* Form Integration Styles
|
||||
* Handles PrestaShop admin form layout overrides
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
|
||||
// Base border reset for all entity-selector elements
|
||||
.target-conditions-trait,
|
||||
.target-conditions-trait *,
|
||||
.entity-selector-trait,
|
||||
.entity-selector-trait *,
|
||||
.method-dropdown-menu,
|
||||
.method-dropdown-menu *,
|
||||
.target-preview-popover,
|
||||
.target-preview-popover * {
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
border-color: $es-border-color;
|
||||
}
|
||||
|
||||
// Full-width form group override using :has()
|
||||
.form-group:has(.entity-selector-trait),
|
||||
.form-group:has(.target-conditions-trait),
|
||||
.form-group:has(.condition-trait) {
|
||||
display: block;
|
||||
|
||||
> .control-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .col-lg-8 {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding-left: $es-spacing-md;
|
||||
padding-right: $es-spacing-md;
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback class for browsers without :has() support
|
||||
.form-group.condition-trait-fullwidth {
|
||||
display: block;
|
||||
|
||||
> .control-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .col-lg-8 {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding-left: $es-spacing-md;
|
||||
padding-right: $es-spacing-md;
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown overflow fix
|
||||
// When dropdown is open, parent containers must allow overflow
|
||||
.panel:has(.target-search-dropdown.show),
|
||||
.card:has(.target-search-dropdown.show),
|
||||
.form-wrapper:has(.target-search-dropdown.show),
|
||||
.panel-body:has(.target-search-dropdown.show),
|
||||
.card-body:has(.target-search-dropdown.show),
|
||||
.form-group:has(.target-search-dropdown.show),
|
||||
.col-lg-8:has(.target-search-dropdown.show),
|
||||
.col-lg-12:has(.target-search-dropdown.show) {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
// Target conditions wrapper hierarchy overflow fix
|
||||
.target-conditions-trait:has(.target-search-dropdown.show),
|
||||
.entity-selector-trait:has(.target-search-dropdown.show),
|
||||
.condition-trait-body:has(.target-search-dropdown.show),
|
||||
.target-block-content:has(.target-search-dropdown.show),
|
||||
.target-block-groups:has(.target-search-dropdown.show),
|
||||
.target-group:has(.target-search-dropdown.show),
|
||||
.target-group-body:has(.target-search-dropdown.show),
|
||||
.target-search-wrapper:has(.target-search-dropdown.show) {
|
||||
overflow: visible !important;
|
||||
}
|
||||
63
sources/scss/layouts/_responsive.scss
Normal file
63
sources/scss/layouts/_responsive.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
/**
|
||||
* Responsive Styles
|
||||
* Media query adjustments for different screen sizes
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
|
||||
// Tablet and below
|
||||
@media (max-width: 991px) {
|
||||
.target-conditions-trait,
|
||||
.entity-selector-trait {
|
||||
.condition-trait-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.trait-header-right {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.target-block-tabs {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile
|
||||
@media (max-width: 767px) {
|
||||
.target-conditions-trait,
|
||||
.entity-selector-trait {
|
||||
.target-block-tab {
|
||||
padding: $es-spacing-sm;
|
||||
font-size: $es-font-size-xs;
|
||||
}
|
||||
|
||||
.target-group-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.target-search-dropdown {
|
||||
width: 100% !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
}
|
||||
|
||||
.dropdown-results-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// High-resolution displays
|
||||
@media (min-width: 1600px) {
|
||||
.target-conditions-trait,
|
||||
.entity-selector-trait {
|
||||
.dropdown-results-grid.view-grid-3 {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
1
sources/scss/layouts/index.php
Normal file
1
sources/scss/layouts/index.php
Normal file
@@ -0,0 +1 @@
|
||||
<?php header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); header("Location: ../"); exit;
|
||||
30
sources/scss/main.scss
Normal file
30
sources/scss/main.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* Entity Selector Styles
|
||||
* @package prestashop-entity-selector
|
||||
* @version 2.0.0
|
||||
*
|
||||
* Compiles to: assets/css/admin/entity-selector.css
|
||||
*/
|
||||
|
||||
// Foundation
|
||||
@use 'variables' as *;
|
||||
@use 'mixins' as *;
|
||||
|
||||
// Layouts
|
||||
@use 'layouts/form-integration';
|
||||
@use 'layouts/responsive';
|
||||
|
||||
// Components
|
||||
@use 'components/entity-selector';
|
||||
@use 'components/dropdown';
|
||||
@use 'components/chips';
|
||||
@use 'components/groups';
|
||||
@use 'components/value-picker';
|
||||
@use 'components/modal';
|
||||
@use 'components/list-preview';
|
||||
@use 'components/schedule';
|
||||
@use 'components/tips';
|
||||
@use 'components/condition-trait';
|
||||
@use 'components/combinations';
|
||||
@use 'components/method-dropdown';
|
||||
@use 'components/tooltip';
|
||||
Reference in New Issue
Block a user