Feature: embedded layout mode and schedule improvements
- Add layout-embedded class for nested entity selectors - Simplified styling for embedded widgets (less padding, borders) - Schedule toggle row with summary badges - Summary badges show datetime range, weekly schedule, holiday count - Flag fallback styling for countries without valid ISO codes - Section hint margin after embedded entity selector - Holiday countries group without modifiers section Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -20,9 +20,10 @@
|
||||
}
|
||||
|
||||
// Full-width form group override using :has()
|
||||
.form-group:has(.entity-selector-trait),
|
||||
.form-group:has(.target-conditions-trait),
|
||||
.form-group:has(.condition-trait) {
|
||||
// Excludes .layout-form-group which uses standard PrestaShop form layout
|
||||
.form-group:has(.entity-selector-trait:not(.layout-form-group)),
|
||||
.form-group:has(.target-conditions-trait:not(.layout-form-group)),
|
||||
.form-group:has(.condition-trait:not(.layout-form-group)) {
|
||||
display: block;
|
||||
|
||||
> .control-label {
|
||||
@@ -55,6 +56,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 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(.target-search-dropdown.show),
|
||||
@@ -79,3 +87,75 @@
|
||||
.target-search-wrapper:has(.target-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
|
||||
|
||||
.target-conditions-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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user