Skip to content

Commit dd7f03a

Browse files
aayush105aayush105
authored
Merge pull request #822 from Kulsum-ahmad/feature/pure-css-dismissible-alert
feat: Add Pure CSS Dismissible Alert Demo (No JS needed)
2 parents 5a9536b + 7556237 commit dd7f03a

File tree

2 files changed

+196
-0
lines changed

2 files changed

+196
-0
lines changed

‎Pure-CSS-Dismissible-Alert/index.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Pure CSS Dismissible Alerts (Multiple Types)</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<h1>Pure CSS Dismissible Alerts</h1>
11+
<p class="instruction">Click the 'X' to dismiss. All functionality is pure HTML/CSS.</p>
12+
13+
<!-- SUCCESS ALERT -->
14+
<input type="checkbox" id="alert-success-toggle" class="alert-toggle" hidden>
15+
<div class="alert-container">
16+
<div class="alert-box alert--success">
17+
<h3 class="alert-title">Success! 🎉</h3>
18+
<p class="alert-message">
19+
Your settings have been saved successfully. (Dismissed with CSS only)
20+
</p>
21+
<label for="alert-success-toggle" class="alert-close" role="button" aria-label="Dismiss success alert">
22+
&times;
23+
</label>
24+
</div>
25+
</div>
26+
27+
<!-- ERROR ALERT -->
28+
<input type="checkbox" id="alert-error-toggle" class="alert-toggle" hidden>
29+
<div class="alert-container">
30+
<div class="alert-box alert--error">
31+
<h3 class="alert-title">Error! 🚫</h3>
32+
<p class="alert-message">
33+
File upload failed due to insufficient permissions.
34+
</p>
35+
<label for="alert-error-toggle" class="alert-close" role="button" aria-label="Dismiss error alert">
36+
&times;
37+
</label>
38+
</div>
39+
</div>
40+
41+
<!-- WARNING ALERT -->
42+
<input type="checkbox" id="alert-warning-toggle" class="alert-toggle" hidden>
43+
<div class="alert-container">
44+
<div class="alert-box alert--warning">
45+
<h3 class="alert-title">Warning! ⚠️</h3>
46+
<p class="alert-message">
47+
Session expiring soon. Please save your work to prevent data loss.
48+
</p>
49+
<label for="alert-warning-toggle" class="alert-close" role="button" aria-label="Dismiss warning alert">
50+
&times;
51+
</label>
52+
</div>
53+
</div>
54+
55+
<!-- INFO ALERT -->
56+
<input type="checkbox" id="alert-info-toggle" class="alert-toggle" hidden>
57+
<div class="alert-container">
58+
<div class="alert-box alert--info">
59+
<h3 class="alert-title">Information 💡</h3>
60+
<p class="alert-message">
61+
New features are available. Check the changelog for details.
62+
</p>
63+
<label for="alert-info-toggle" class="alert-close" role="button" aria-label="Dismiss info alert">
64+
&times;
65+
</label>
66+
</div>
67+
</div>
68+
69+
</body>
70+
</html>

‎Pure-CSS-Dismissible-Alert/style.css‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
body {
2+
font-family: 'Inter', Arial, sans-serif; /* Using Inter as per instructions */
3+
background-color: #f4f7f6;
4+
display: flex;
5+
flex-direction: column;
6+
align-items: center;
7+
padding: 30px 20px;
8+
margin: 0;
9+
min-height: 100vh;
10+
}
11+
12+
h1 {
13+
color: #333;
14+
font-size: 2rem;
15+
margin-bottom: 10px;
16+
}
17+
18+
.instruction {
19+
color: #666;
20+
margin-bottom: 40px;
21+
font-style: italic;
22+
}
23+
24+
.alert-container {
25+
width: 90%;
26+
max-width: 600px;
27+
margin-bottom: 20px;
28+
}
29+
30+
/* --- BASE ALERT STYLES (Applies to all) --- */
31+
.alert-box {
32+
border-radius: 8px;
33+
padding: 20px;
34+
position: relative;
35+
opacity: 1;
36+
transform: translateY(0);
37+
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;
38+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
39+
border-left: 5px solid; /* For colored accent */
40+
overflow: hidden; /* Crucial for transition */
41+
min-height: 80px; /* Ensure consistent initial height */
42+
}
43+
44+
.alert-title {
45+
margin-top: 0;
46+
font-size: 1.25rem;
47+
font-weight: 600;
48+
}
49+
50+
.alert-message {
51+
margin-bottom: 0;
52+
line-height: 1.5;
53+
}
54+
55+
.alert-close {
56+
position: absolute;
57+
top: 50%;
58+
right: 15px;
59+
transform: translateY(-50%);
60+
font-size: 1.5rem;
61+
cursor: pointer;
62+
text-decoration: none;
63+
line-height: 1;
64+
opacity: 0.7;
65+
transition: opacity 0.2s;
66+
}
67+
68+
.alert-close:hover {
69+
opacity: 1;
70+
}
71+
72+
/* --- THEME COLORS --- */
73+
74+
/* SUCCESS (Green) */
75+
.alert--success {
76+
background-color: #d4edda;
77+
color: #155724;
78+
border-left-color: #28a745;
79+
}
80+
.alert--success .alert-close { color: #155724; }
81+
82+
/* ERROR (Red) */
83+
.alert--error {
84+
background-color: #f8d7da;
85+
color: #721c24;
86+
border-left-color: #dc3545;
87+
}
88+
.alert--error .alert-close { color: #721c24; }
89+
90+
/* WARNING (Yellow/Orange) */
91+
.alert--warning {
92+
background-color: #fff3cd;
93+
color: #856404;
94+
border-left-color: #ffc107;
95+
}
96+
.alert--warning .alert-close { color: #856404; }
97+
98+
/* INFO (Blue) */
99+
.alert--info {
100+
background-color: #d1ecf1;
101+
color: #0c5460;
102+
border-left-color: #17a2b8;
103+
}
104+
.alert--info .alert-close { color: #0c5460; }
105+
106+
107+
/* --- THE PURE CSS MAGIC (DISMISSAL LOGIC) --- */
108+
109+
/* Selects the sibling alert-container when the toggle is checked */
110+
.alert-toggle:checked + .alert-container {
111+
/* Set container height/padding to 0 */
112+
max-height: 0;
113+
margin-top: 0;
114+
margin-bottom: 0;
115+
padding: 0;
116+
transition: max-height 0.4s ease-out, margin-bottom 0.4s ease-out;
117+
}
118+
119+
/* Hide the inner content once the container collapses */
120+
.alert-toggle:checked + .alert-container .alert-box {
121+
opacity: 0;
122+
padding-top: 0;
123+
padding-bottom: 0;
124+
transform: translateY(-10px);
125+
transition: opacity 0.3s ease-out 0.1s, transform 0.3s ease-out 0.1s, padding 0.3s ease-out 0.1s;
126+
}

0 commit comments

Comments
 (0)