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:
323
sources/scss/_mixins.scss
Normal file
323
sources/scss/_mixins.scss
Normal file
@@ -0,0 +1,323 @@
|
||||
/**
|
||||
* Entity Selector Mixins
|
||||
* Reusable patterns - prefer Bootstrap utilities in HTML where possible
|
||||
*/
|
||||
|
||||
@use 'variables' as *;
|
||||
|
||||
// =============================================================================
|
||||
// Layout
|
||||
// =============================================================================
|
||||
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@mixin flex-between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Text
|
||||
// =============================================================================
|
||||
|
||||
@mixin text-truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Interactive Elements
|
||||
// =============================================================================
|
||||
|
||||
// Reset button styles
|
||||
@mixin button-reset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Focus ring (Bootstrap 4 style)
|
||||
@mixin focus-ring($color: $es-primary) {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba($color, 0.25);
|
||||
}
|
||||
|
||||
// Interactive hover state
|
||||
@mixin interactive-item {
|
||||
cursor: pointer;
|
||||
transition: background-color $es-transition-fast, color $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background-color: $es-bg-hover;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Cards & Containers
|
||||
// =============================================================================
|
||||
|
||||
@mixin card {
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
}
|
||||
|
||||
@mixin dropdown-container {
|
||||
position: absolute;
|
||||
z-index: $es-z-dropdown;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
box-shadow: $es-shadow-lg;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Form Elements
|
||||
// =============================================================================
|
||||
|
||||
// Reset input styles (for inputs in custom wrappers)
|
||||
@mixin input-reset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin input-base {
|
||||
width: 100%;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
font-size: $es-font-size-sm;
|
||||
line-height: $es-line-height-normal;
|
||||
color: $es-text-primary;
|
||||
background-color: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-md;
|
||||
transition: border-color $es-transition-fast, box-shadow $es-transition-fast;
|
||||
|
||||
&:focus {
|
||||
border-color: $es-primary;
|
||||
@include focus-ring($es-primary);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $es-text-light;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Scrollbar
|
||||
// =============================================================================
|
||||
|
||||
@mixin custom-scrollbar {
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: $es-gray-100;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: $es-gray-300;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: $es-gray-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Badges & Chips
|
||||
// =============================================================================
|
||||
|
||||
@mixin badge($bg: $es-gray-200, $color: $es-gray-700) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.125rem 0.5rem;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
line-height: 1;
|
||||
background-color: $bg;
|
||||
color: $color;
|
||||
border-radius: $es-radius-full;
|
||||
}
|
||||
|
||||
// Count badge with preview icon (used for tab badges, match counts, totals)
|
||||
// Note: Eye icon is provided in HTML via <i class="icon-eye"></i>
|
||||
@mixin count-badge($bg: $es-primary) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
padding: 0 0.5rem;
|
||||
background: $bg;
|
||||
color: $es-white;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
border-radius: $es-radius-full;
|
||||
cursor: pointer;
|
||||
transition: all $es-transition-fast;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 2px 8px rgba($bg, 0.4);
|
||||
}
|
||||
|
||||
// Loading state - spinner icon replaces eye
|
||||
&.loading {
|
||||
cursor: wait;
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Inactive/empty state
|
||||
&.inactive,
|
||||
&.no-matches {
|
||||
background: $es-slate-400;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Popover open state
|
||||
&.popover-open {
|
||||
background: darken($bg, 10%);
|
||||
box-shadow: 0 2px 8px rgba($bg, 0.4);
|
||||
}
|
||||
|
||||
// Icon inside badge (eye, spinner, etc.)
|
||||
i {
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:hover i {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.preview-count {
|
||||
font-weight: $es-font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@mixin chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-xs;
|
||||
padding: $es-spacing-xs $es-spacing-sm;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
background: $es-gray-200;
|
||||
color: $es-gray-700;
|
||||
border-radius: $es-radius-full;
|
||||
|
||||
.chip-remove {
|
||||
@include button-reset;
|
||||
@include flex-center;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
font-size: 10px;
|
||||
color: $es-text-muted;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: $es-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Toggle Switch
|
||||
// =============================================================================
|
||||
|
||||
@mixin toggle-switch($width: 36px, $height: 20px) {
|
||||
position: relative;
|
||||
width: $width;
|
||||
height: $height;
|
||||
border-radius: $height;
|
||||
background: $es-gray-400;
|
||||
transition: background-color $es-transition-normal;
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: $height - 4px;
|
||||
height: $height - 4px;
|
||||
background: $es-white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
transition: transform $es-transition-normal;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $es-success;
|
||||
|
||||
&::after {
|
||||
transform: translateX($width - $height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Screen Reader Only
|
||||
// =============================================================================
|
||||
|
||||
@mixin sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user