Skip to content

feat: Add Pure CSS Dismissible Alert Demo (No JS needed) #822

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 12, 2025
Merged

feat: Add Pure CSS Dismissible Alert Demo (No JS needed) #822

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d22e500
feat: Add Pure CSS Dismissible Alert Demo (No JS needed)
Kulsum-ahmad Oct 11, 2025
7556237
feat: Implement multiple alert types (error, warning, info) per revie…
Kulsum-ahmad Oct 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 70 additions & 0 deletions Pure-CSS-Dismissible-Alert/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure CSS Dismissible Alerts (Multiple Types)</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Pure CSS Dismissible Alerts</h1>
<p class="instruction">Click the 'X' to dismiss. All functionality is pure HTML/CSS.</p>

<!-- SUCCESS ALERT -->
<input type="checkbox" id="alert-success-toggle" class="alert-toggle" hidden>
<div class="alert-container">
<div class="alert-box alert--success">
<h3 class="alert-title">Success! 🎉</h3>
<p class="alert-message">
Your settings have been saved successfully. (Dismissed with CSS only)
</p>
<label for="alert-success-toggle" class="alert-close" role="button" aria-label="Dismiss success alert">
&times;
</label>
</div>
</div>

<!-- ERROR ALERT -->
<input type="checkbox" id="alert-error-toggle" class="alert-toggle" hidden>
<div class="alert-container">
<div class="alert-box alert--error">
<h3 class="alert-title">Error! 🚫</h3>
<p class="alert-message">
File upload failed due to insufficient permissions.
</p>
<label for="alert-error-toggle" class="alert-close" role="button" aria-label="Dismiss error alert">
&times;
</label>
</div>
</div>

<!-- WARNING ALERT -->
<input type="checkbox" id="alert-warning-toggle" class="alert-toggle" hidden>
<div class="alert-container">
<div class="alert-box alert--warning">
<h3 class="alert-title">Warning! ⚠️</h3>
<p class="alert-message">
Session expiring soon. Please save your work to prevent data loss.
</p>
<label for="alert-warning-toggle" class="alert-close" role="button" aria-label="Dismiss warning alert">
&times;
</label>
</div>
</div>

<!-- INFO ALERT -->
<input type="checkbox" id="alert-info-toggle" class="alert-toggle" hidden>
<div class="alert-container">
<div class="alert-box alert--info">
<h3 class="alert-title">Information 💡</h3>
<p class="alert-message">
New features are available. Check the changelog for details.
</p>
<label for="alert-info-toggle" class="alert-close" role="button" aria-label="Dismiss info alert">
&times;
</label>
</div>
</div>

</body>
</html>
126 changes: 126 additions & 0 deletions Pure-CSS-Dismissible-Alert/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
body {
font-family: 'Inter', Arial, sans-serif; /* Using Inter as per instructions */
background-color: #f4f7f6;
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 20px;
margin: 0;
min-height: 100vh;
}

h1 {
color: #333;
font-size: 2rem;
margin-bottom: 10px;
}

.instruction {
color: #666;
margin-bottom: 40px;
font-style: italic;
}

.alert-container {
width: 90%;
max-width: 600px;
margin-bottom: 20px;
}

/* --- BASE ALERT STYLES (Applies to all) --- */
.alert-box {
border-radius: 8px;
padding: 20px;
position: relative;
opacity: 1;
transform: translateY(0);
transition: opacity 0.4s ease-out, transform 0.4s ease-out, margin-bottom 0.4s ease-out, height 0.4s ease-out, padding 0.4s ease-out;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-left: 5px solid; /* For colored accent */
overflow: hidden; /* Crucial for transition */
min-height: 80px; /* Ensure consistent initial height */
}

.alert-title {
margin-top: 0;
font-size: 1.25rem;
font-weight: 600;
}

.alert-message {
margin-bottom: 0;
line-height: 1.5;
}

.alert-close {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
font-size: 1.5rem;
cursor: pointer;
text-decoration: none;
line-height: 1;
opacity: 0.7;
transition: opacity 0.2s;
}

.alert-close:hover {
opacity: 1;
}

/* --- THEME COLORS --- */

/* SUCCESS (Green) */
.alert--success {
background-color: #d4edda;
color: #155724;
border-left-color: #28a745;
}
.alert--success .alert-close { color: #155724; }

/* ERROR (Red) */
.alert--error {
background-color: #f8d7da;
color: #721c24;
border-left-color: #dc3545;
}
.alert--error .alert-close { color: #721c24; }

/* WARNING (Yellow/Orange) */
.alert--warning {
background-color: #fff3cd;
color: #856404;
border-left-color: #ffc107;
}
.alert--warning .alert-close { color: #856404; }

/* INFO (Blue) */
.alert--info {
background-color: #d1ecf1;
color: #0c5460;
border-left-color: #17a2b8;
}
.alert--info .alert-close { color: #0c5460; }


/* --- THE PURE CSS MAGIC (DISMISSAL LOGIC) --- */

/* Selects the sibling alert-container when the toggle is checked */
.alert-toggle:checked + .alert-container {
/* Set container height/padding to 0 */
max-height: 0;
margin-top: 0;
margin-bottom: 0;
padding: 0;
transition: max-height 0.4s ease-out, margin-bottom 0.4s ease-out;
}

/* Hide the inner content once the container collapses */
.alert-toggle:checked + .alert-container .alert-box {
opacity: 0;
padding-top: 0;
padding-bottom: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease-out 0.1s, transform 0.3s ease-out 0.1s, padding 0.3s ease-out 0.1s;
}