myprestarocks
c6fd5cee13
- Unified _setBadgeCount for ALL badge updates - target-conditions-trait → entity-selector-trait - target-* → es-* class rename (20+ classes) - SCSS recompiled: zero duplicate selectors - CSS transitions replace jQuery slideDown/slideUp - Serialize cache, method swap cache - Badge: no-matches gray, consistent hover, no blending - Inline condition count always visible - Preview popover refreshes in-place on sort change - Categories add chips immediately - Entity type icons on chips - Consistent info_outline icons via buildHelpIcon - Method dropdown text clipping fix (line-height) - mpr-input-compact on all inputs - Dropdown padding fixed in SCSS source - Chips wrapper: same container always - Reusable helpers: _buildEmptyState, _buildSearchBoxHtml, _buildInfoTooltip - Asset path: uses $this->module->getPathUri() not reflection - Debug logs removed Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
160 lines
4.5 KiB
SCSS
160 lines
4.5 KiB
SCSS
/**
|
|
* Form Integration Styles
|
|
* Handles PrestaShop admin form layout overrides
|
|
*/
|
|
|
|
@use '../variables' as *;
|
|
|
|
// Base border reset for all entity-selector elements
|
|
.entity-selector-trait,
|
|
.entity-selector-trait *,
|
|
.method-dropdown-menu,
|
|
.method-dropdown-menu *,
|
|
.es-preview-popover,
|
|
.es-preview-popover * {
|
|
border-style: solid;
|
|
border-width: 0;
|
|
border-color: $es-border-color;
|
|
}
|
|
|
|
// Full-width form group override using :has()
|
|
// Excludes .layout-form-group which uses standard PrestaShop form layout
|
|
.form-group:has(.entity-selector-trait:not(.layout-form-group)),
|
|
.form-group:has(.entity-selector-trait:not(.layout-form-group)),
|
|
.form-group:has(.condition-trait:not(.layout-form-group)) {
|
|
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;
|
|
}
|
|
}
|
|
|
|
// SAFEGUARD: Force label visibility for form-group layout widgets
|
|
// This overrides any conflicting rules (including fallback class rules)
|
|
// when the widget has layout-form-group class indicating standard form integration
|
|
.form-group:has(.layout-form-group) > .control-label {
|
|
display: flex !important;
|
|
}
|
|
|
|
// Dropdown overflow fix
|
|
// When dropdown is open, parent containers must allow overflow
|
|
.panel:has(.es-search-dropdown.show),
|
|
.card:has(.es-search-dropdown.show),
|
|
.form-wrapper:has(.es-search-dropdown.show),
|
|
.panel-body:has(.es-search-dropdown.show),
|
|
.card-body:has(.es-search-dropdown.show),
|
|
.form-group:has(.es-search-dropdown.show),
|
|
.col-lg-8:has(.es-search-dropdown.show),
|
|
.col-lg-12:has(.es-search-dropdown.show) {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
// Target conditions wrapper hierarchy overflow fix
|
|
.entity-selector-trait:has(.es-search-dropdown.show),
|
|
.entity-selector-trait:has(.es-search-dropdown.show),
|
|
.condition-trait-body:has(.es-search-dropdown.show),
|
|
.es-block-content:has(.es-search-dropdown.show),
|
|
.es-block-groups:has(.es-search-dropdown.show),
|
|
.es-group:has(.es-search-dropdown.show),
|
|
.es-group-body:has(.es-search-dropdown.show),
|
|
.es-search-wrapper:has(.es-search-dropdown.show) {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
// =============================================================================
|
|
// Embedded Layout
|
|
// =============================================================================
|
|
// Use .layout-embedded for entity selectors nested inside other components
|
|
// Removes outer wrapper styling to avoid redundant borders/backgrounds
|
|
|
|
.entity-selector-trait.layout-embedded,
|
|
.entity-selector-trait.layout-embedded {
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 0;
|
|
|
|
// Remove padding from groups container when embedded
|
|
.groups-container {
|
|
padding: 0;
|
|
}
|
|
|
|
// Remove block body padding
|
|
.block-body {
|
|
padding: 0;
|
|
}
|
|
|
|
// Remove block footer border when embedded
|
|
.block-footer {
|
|
border-top: none;
|
|
padding: $es-spacing-sm 0 0;
|
|
}
|
|
|
|
// Simplify selection group when embedded - single thin border only
|
|
.selection-group {
|
|
background: $es-white;
|
|
border: 1px solid $es-slate-200;
|
|
border-radius: $es-radius-md;
|
|
|
|
// Lighter group header in embedded mode
|
|
.group-header {
|
|
background: $es-slate-50;
|
|
border-bottom-color: $es-slate-200;
|
|
padding: $es-spacing-xs $es-spacing-sm;
|
|
border-radius: $es-radius-md $es-radius-md 0 0;
|
|
}
|
|
|
|
// Reduce group body padding (slightly more than $es-spacing-sm for readability)
|
|
.group-body {
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
// Reduce group-include section padding
|
|
.group-include {
|
|
padding: $es-spacing-xs;
|
|
margin-bottom: $es-spacing-sm;
|
|
}
|
|
|
|
// Smaller modifiers section
|
|
.group-modifiers {
|
|
padding: $es-spacing-xs $es-spacing-sm;
|
|
margin: $es-spacing-sm (-$es-spacing-sm) (-$es-spacing-sm);
|
|
}
|
|
}
|
|
|
|
// Empty state - smaller padding
|
|
.groups-empty-state {
|
|
padding: $es-spacing-md;
|
|
}
|
|
|
|
// Smaller add group button
|
|
.btn-add-group {
|
|
padding: 0.375rem 0.625rem;
|
|
font-size: $es-font-size-xs;
|
|
}
|
|
}
|