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:
395
sources/scss/components/_combinations.scss
Normal file
395
sources/scss/components/_combinations.scss
Normal file
@@ -0,0 +1,395 @@
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user