9ebcc359ae
Implement JQHTML function cache ID system and fix bundle compilation Implement underscore prefix for system tables Fix JS syntax linter to support decorators and grant exception to Task system SPA: Update planning docs and wishlists with remaining features SPA: Document Navigation API abandonment and future enhancements Implement SPA browser integration with History API (Phase 1) Convert contacts view page to SPA action Convert clients pages to SPA actions and document conversion procedure SPA: Merge GET parameters and update documentation Implement SPA route URL generation in JavaScript and PHP Implement SPA bootstrap controller architecture Add SPA routing manual page (rsx:man spa) Add SPA routing documentation to CLAUDE.md Phase 4 Complete: Client-side SPA routing implementation Update get_routes() consumers for unified route structure Complete SPA Phase 3: PHP-side route type detection and is_spa flag Restore unified routes structure and Manifest_Query class Refactor route indexing and add SPA infrastructure Phase 3 Complete: SPA route registration in manifest Implement SPA Phase 2: Extract router code and test decorators Rename Jqhtml_Component to Component and complete SPA foundation setup 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
64 lines
1.6 KiB
SCSS
Executable File
64 lines
1.6 KiB
SCSS
Executable File
/**
|
|
* Flash Alert Styles
|
|
*
|
|
* Styles for the floating alert notification system.
|
|
* Alerts appear centered at the top (60px down) or bottom and stack vertically.
|
|
*
|
|
* @SCSS-ANIM-01-EXCEPTION: Hover lift effect acceptable for transient notifications
|
|
*/
|
|
|
|
.floating-alert-container {
|
|
position: fixed;
|
|
top: 60px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 9999;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; // Center alerts horizontally
|
|
gap: 12px;
|
|
max-width: 500px;
|
|
pointer-events: none; // Allow clicks through container
|
|
|
|
.alert-wrapper {
|
|
pointer-events: auto; // But allow clicks on individual alerts
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
width: auto; // Size to content, not container
|
|
min-width: 300px; // Minimum width for alerts
|
|
|
|
.alert {
|
|
margin-bottom: 0;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
|
|
&:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
// Icon spacing
|
|
i {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
// Close button styling
|
|
.btn-close {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Mobile responsive adjustments
|
|
@media (max-width: 768px) {
|
|
.floating-alert-container {
|
|
left: 10px;
|
|
right: 10px;
|
|
transform: none;
|
|
max-width: none;
|
|
min-width: 0;
|
|
top: 10px;
|
|
}
|
|
}
|