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:
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;
|
||||
}
|
||||
Reference in New Issue
Block a user