myprestarocks
aa9f28bb7e
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>
64 lines
1.3 KiB
SCSS
64 lines
1.3 KiB
SCSS
/**
|
|
* 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);
|
|
}
|
|
}
|
|
}
|