Feature: embedded layout mode and schedule improvements
- Add layout-embedded class for nested entity selectors - Simplified styling for embedded widgets (less padding, borders) - Schedule toggle row with summary badges - Summary badges show datetime range, weekly schedule, holiday count - Flag fallback styling for countries without valid ISO codes - Section hint margin after embedded entity selector - Holiday countries group without modifiers section Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
* Entity chips, selection pills, tags
|
||||
*/
|
||||
|
||||
@use "sass:color";
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
@@ -285,6 +286,57 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Country flag in chip
|
||||
.chip-flag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width: 18px;
|
||||
height: 12px;
|
||||
object-fit: cover;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.flag-fallback {
|
||||
width: 18px;
|
||||
height: 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #e8eaed 0%, #dadce0 100%);
|
||||
border-radius: 2px;
|
||||
font-size: 10px;
|
||||
color: #5f6368;
|
||||
}
|
||||
}
|
||||
|
||||
// Holiday preview button in country chip
|
||||
.chip-preview-holidays {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: $es-primary;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: rgba($es-primary, 0.15);
|
||||
color: darken($es-primary, 10%);
|
||||
}
|
||||
|
||||
i.material-icons {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.chip-text,
|
||||
.chip-name {
|
||||
// Show full name, no truncation
|
||||
@@ -344,7 +396,7 @@
|
||||
|
||||
.entity-chip.chip-warning {
|
||||
background: $es-warning-light;
|
||||
color: darken($es-warning, 20%);
|
||||
color: color.adjust($es-warning, $lightness: -20%);
|
||||
|
||||
&:hover {
|
||||
background: rgba($es-warning, 0.3);
|
||||
@@ -715,6 +767,238 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Holiday Preview Popover (Country chip eye button)
|
||||
// ==========================================================================
|
||||
|
||||
.holiday-preview-popover {
|
||||
position: absolute;
|
||||
z-index: 10001;
|
||||
width: 320px;
|
||||
max-width: 90vw;
|
||||
background: $es-white;
|
||||
border-radius: $es-radius-lg;
|
||||
box-shadow: $es-shadow-xl;
|
||||
overflow: hidden;
|
||||
|
||||
.popover-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-bg-header;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
}
|
||||
|
||||
.popover-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-sm;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
}
|
||||
|
||||
.popover-flag {
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.popover-close {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-md;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-200;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
|
||||
i.material-icons {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
max-height: 350px;
|
||||
overflow-y: auto;
|
||||
padding: $es-spacing-sm;
|
||||
@include custom-scrollbar;
|
||||
}
|
||||
|
||||
// Loading state
|
||||
.holiday-preview-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-xl 0;
|
||||
color: $es-text-muted;
|
||||
font-size: $es-font-size-sm;
|
||||
|
||||
i.material-icons {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.icon-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
// Empty state
|
||||
.holiday-preview-empty {
|
||||
text-align: center;
|
||||
padding: $es-spacing-xl 0;
|
||||
color: $es-text-muted;
|
||||
|
||||
i.material-icons {
|
||||
font-size: 48px;
|
||||
opacity: 0.4;
|
||||
margin-bottom: $es-spacing-sm;
|
||||
display: block;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: $es-font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Holiday list
|
||||
.holiday-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $es-spacing-xs;
|
||||
}
|
||||
|
||||
.holiday-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $es-spacing-md;
|
||||
padding: $es-spacing-sm $es-spacing-md;
|
||||
background: $es-slate-50;
|
||||
border-radius: $es-radius-md;
|
||||
border-left: 3px solid $es-success;
|
||||
|
||||
&.holiday-type-bank,
|
||||
&.holiday-type-bank-holiday {
|
||||
border-left-color: $es-info;
|
||||
}
|
||||
|
||||
&.holiday-type-observance {
|
||||
border-left-color: $es-warning;
|
||||
}
|
||||
|
||||
&.holiday-type-regional,
|
||||
&.holiday-type-local-holiday {
|
||||
border-left-color: #8b5cf6;
|
||||
}
|
||||
}
|
||||
|
||||
.holiday-date {
|
||||
flex-shrink: 0;
|
||||
min-width: 80px;
|
||||
|
||||
.holiday-day {
|
||||
display: block;
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-text-primary;
|
||||
}
|
||||
|
||||
.holiday-weekday {
|
||||
display: block;
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.holiday-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.holiday-country-flag {
|
||||
vertical-align: middle;
|
||||
margin-right: 0.25rem;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.holiday-name {
|
||||
display: inline;
|
||||
font-size: $es-font-size-sm;
|
||||
color: $es-text-primary;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.holiday-type-badge {
|
||||
display: inline-block;
|
||||
margin-left: $es-spacing-sm;
|
||||
padding: 0.125rem 0.375rem;
|
||||
font-size: 10px;
|
||||
font-weight: $es-font-weight-medium;
|
||||
text-transform: capitalize;
|
||||
background: $es-slate-200;
|
||||
color: $es-text-secondary;
|
||||
border-radius: $es-radius-sm;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.holiday-preview-note {
|
||||
margin-top: $es-spacing-md;
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-muted;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Filter input
|
||||
.popover-filter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $es-spacing-xs;
|
||||
padding: $es-spacing-xs $es-spacing-md;
|
||||
border-bottom: 1px solid $es-border-color;
|
||||
background: $es-slate-50;
|
||||
|
||||
i.material-icons {
|
||||
font-size: 18px;
|
||||
color: $es-text-muted;
|
||||
}
|
||||
|
||||
.holiday-filter-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: $es-font-size-sm;
|
||||
color: $es-text-primary;
|
||||
outline: none;
|
||||
padding: $es-spacing-xs 0;
|
||||
|
||||
&::placeholder {
|
||||
color: $es-text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Spin animation for loading icons
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Bootstrap specificity overrides for chips toolbar form elements
|
||||
// PrestaShop admin uses #content .mpr-config-form... with high specificity
|
||||
// We need to match or exceed that specificity
|
||||
|
||||
Reference in New Issue
Block a user