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>
396 lines
9.3 KiB
SCSS
396 lines
9.3 KiB
SCSS
/**
|
|
* 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;
|
|
}
|
|
}
|
|
}
|