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:
308
sources/scss/components/_schedule.scss
Normal file
308
sources/scss/components/_schedule.scss
Normal file
@@ -0,0 +1,308 @@
|
||||
/**
|
||||
* Schedule Conditions Component
|
||||
* DateTime picker, weekly timeline, holidays
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
// Schedule conditions wrapper
|
||||
.schedule-conditions-trait {
|
||||
background: $es-white;
|
||||
border: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg;
|
||||
}
|
||||
|
||||
// Schedule header
|
||||
.schedule-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $es-spacing-md;
|
||||
padding: 0.875rem $es-spacing-md;
|
||||
background: $es-bg-header;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
border-radius: $es-radius-lg $es-radius-lg 0 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background-color $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-bg-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
|
||||
i {
|
||||
color: $es-text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
// Schedule body
|
||||
.schedule-body {
|
||||
padding: $es-spacing-md;
|
||||
}
|
||||
|
||||
// Schedule section
|
||||
.schedule-section {
|
||||
margin-bottom: $es-spacing-lg;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
margin-bottom: $es-spacing-sm;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
|
||||
i {
|
||||
color: $es-text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-section-description {
|
||||
margin-bottom: $es-spacing-md;
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
}
|
||||
|
||||
// DateTime range picker
|
||||
.datetime-range {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $es-spacing-md;
|
||||
}
|
||||
|
||||
.datetime-field {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.datetime-label {
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: $es-font-size-xs;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
|
||||
.datetime-input {
|
||||
@include input-base;
|
||||
}
|
||||
|
||||
// Weekly schedule
|
||||
.weekly-schedule {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-sm;
|
||||
}
|
||||
|
||||
.day-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-md;
|
||||
padding: $es-spacing-sm;
|
||||
background: $es-slate-50;
|
||||
border-radius: $es-radius-md;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.day-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.day-checkbox {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.day-name {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-primary;
|
||||
}
|
||||
|
||||
// Timeline slider
|
||||
.timeline-slider {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
height: 24px;
|
||||
background: $es-slate-200;
|
||||
border-radius: $es-radius-full;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.timeline-fill {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background: $es-primary;
|
||||
border-radius: $es-radius-full;
|
||||
transition: all $es-transition-fast;
|
||||
}
|
||||
|
||||
.timeline-handle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: $es-white;
|
||||
border: 2px solid $es-primary;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
cursor: grab;
|
||||
box-shadow: $es-shadow-sm;
|
||||
transition: box-shadow $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
box-shadow: $es-shadow-md;
|
||||
}
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
&.handle-start {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&.handle-end {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Time display
|
||||
.day-times {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-xs;
|
||||
min-width: 120px;
|
||||
font-size: $es-font-size-xs;
|
||||
font-family: monospace;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
|
||||
.time-separator {
|
||||
color: $es-text-muted;
|
||||
}
|
||||
|
||||
// Holiday exclusions
|
||||
.holiday-section {
|
||||
padding: $es-spacing-md;
|
||||
background: $es-slate-50;
|
||||
border-radius: $es-radius-md;
|
||||
}
|
||||
|
||||
.holiday-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
margin-bottom: $es-spacing-md;
|
||||
}
|
||||
|
||||
.holiday-checkbox {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.holiday-label {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-medium;
|
||||
color: $es-text-primary;
|
||||
}
|
||||
|
||||
.holiday-countries {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $es-spacing-xs;
|
||||
}
|
||||
|
||||
.holiday-country-chip {
|
||||
@include chip;
|
||||
cursor: pointer;
|
||||
|
||||
&.selected {
|
||||
background: $es-primary-light;
|
||||
color: $es-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Server time display
|
||||
.server-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-info-light;
|
||||
border-radius: $es-radius-md;
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-info;
|
||||
|
||||
i {
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
|
||||
.time-value {
|
||||
font-family: monospace;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
// Schedule summary
|
||||
.schedule-summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-xs;
|
||||
padding: $es-spacing-md;
|
||||
background: $es-slate-50;
|
||||
border-radius: $es-radius-md;
|
||||
font-size: $es-font-size-sm;
|
||||
color: $es-text-secondary;
|
||||
|
||||
.summary-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
|
||||
i {
|
||||
color: $es-success;
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
|
||||
&.inactive i {
|
||||
color: $es-text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Collapsed state
|
||||
.schedule-conditions-trait.collapsed {
|
||||
.schedule-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.schedule-header {
|
||||
border-radius: $es-radius-lg;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user