myprestarocks
af5066dd26
- Add validation system to prevent contradicting conditions: - Same entity in include/exclude detection - Parent-child conflict detection for tree entities - Redundant selection prevention - Toast notifications for validation errors - Fix entity icons (employees: briefcase, taxes: calculator) - Improve tooltip component: - Use Material Icons instead of broken FA4 icons - Fix positioning using getBoundingClientRect for viewport coords - Add click-to-pin functionality with close button - Pinned tooltips show X icon and close button in corner - Add lightweight test suite (31 tests) for validation logic Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
88 lines
1.8 KiB
SCSS
88 lines
1.8 KiB
SCSS
/**
|
|
* Validation Toast Component
|
|
* Error notifications for selection conflicts
|
|
*/
|
|
|
|
@use '../variables' as *;
|
|
@use '../mixins' as *;
|
|
|
|
// Validation error toast
|
|
.es-validation-toast {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: $es-spacing-sm;
|
|
padding: $es-spacing-md;
|
|
background: $es-white;
|
|
border: 1px solid $es-danger;
|
|
border-left: 4px solid $es-danger;
|
|
border-radius: $es-radius-md;
|
|
box-shadow: $es-shadow-lg;
|
|
max-width: 400px;
|
|
animation: es-toast-slide-in 0.2s ease-out;
|
|
|
|
.es-toast-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
color: $es-danger;
|
|
flex-shrink: 0;
|
|
|
|
i {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
.es-toast-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.es-toast-title {
|
|
font-size: $es-font-size-sm;
|
|
font-weight: $es-font-weight-semibold;
|
|
color: $es-danger;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.es-toast-message {
|
|
font-size: $es-font-size-xs;
|
|
color: $es-text-secondary;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.es-toast-close {
|
|
@include button-reset;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
color: $es-text-muted;
|
|
border-radius: $es-radius-sm;
|
|
flex-shrink: 0;
|
|
transition: all $es-transition-fast;
|
|
|
|
&:hover {
|
|
background: $es-slate-100;
|
|
color: $es-text-primary;
|
|
}
|
|
|
|
i {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes es-toast-slide-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|