Solidarity with Palestine.Success
Google Theme
Material Design-inspired notifications
Error
Warning
Info
Configuration
// config/flasher.php
return [
'default' => 'theme.google',
'themes' => [
'google' => [
'scripts' => [
'/vendor/flasher/themes/theme.google.min.js',
],
'styles' => [
'/vendor/flasher/themes/theme.google.min.css',
],
],
],
];Usage
flash()->success('Your changes have been saved!');flash()->use('theme.google')->success('This uses Google Theme');Key Features
Visual Design
-
Material Design elevation with three-component shadow system
-
Card-based layout with Google's signature typography
-
Interactive ripple effect for tactile button feedback
-
Progress bar showing time until auto-dismiss
-
Responsive design that adapts to different screen sizes
Accessibility
-
ARIA roles specific to each notification type
-
Appropriate aria-live regions based on message importance
-
Reduced motion option for users with motion sensitivity
-
High contrast text meeting WCAG 2.1 AA standards
-
Fully keyboard accessible with clear focus indicators
-
Descriptive aria-labels for interactive elements
Customization
:root {
/* Base appearance */
--md-bg-light: #ffffff; /* Light mode background */
--md-bg-dark: #2d2d2d; /* Dark mode background */
--md-text-light: rgba(0, 0, 0, 0.87); /* Primary text in light mode */
--md-text-secondary-light: rgba(0, 0, 0, 0.6); /* Secondary text in light mode */
--md-text-dark: rgba(255, 255, 255, 0.87); /* Primary text in dark mode */
--md-text-secondary-dark: rgba(255, 255, 255, 0.6); /* Secondary text in dark mode */
--md-elevation: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12); /* Card shadow */
--md-border-radius: 4px; /* Card corner radius */
/* Type colors - based on Material palette */
--md-success: #43a047; /* Green 600 */
--md-info: #1e88e5; /* Blue 600 */
--md-warning: #fb8c00; /* Orange 600 */
--md-error: #e53935; /* Red 600 */
/* Animation timing */
--md-animation-duration: 0.3s; /* Entrance animation duration */
--md-ripple-duration: 0.6s; /* Button ripple effect duration */
}