From d22e500982c23a6dd7406fb8249bd9847dd32b50 Mon Sep 17 00:00:00 2001 From: Kulsum Ahmad Date: Sat, 11 Oct 2025 19:23:12 +0530 Subject: [PATCH 1/2] feat: Add Pure CSS Dismissible Alert Demo (No JS needed) --- Pure-CSS-Dismissible-Alert/index.html | 29 +++++++++ Pure-CSS-Dismissible-Alert/style.css | 90 +++++++++++++++++++++++++++ 2 files changed, 119 insertions(+) create mode 100644 Pure-CSS-Dismissible-Alert/index.html create mode 100644 Pure-CSS-Dismissible-Alert/style.css diff --git a/Pure-CSS-Dismissible-Alert/index.html b/Pure-CSS-Dismissible-Alert/index.html new file mode 100644 index 00000000..cb157ebc --- /dev/null +++ b/Pure-CSS-Dismissible-Alert/index.html @@ -0,0 +1,29 @@ + + + + + + Pure CSS Dismissible Alert + + + + + + +
+
+

Success! 🎉

+

+ Your settings have been saved. This alert is dismissed with **only CSS**! +

+ +
+

+ This content becomes visible when the alert is dismissed (via CSS transition). +

+
+ + + \ No newline at end of file diff --git a/Pure-CSS-Dismissible-Alert/style.css b/Pure-CSS-Dismissible-Alert/style.css new file mode 100644 index 00000000..afb0083b --- /dev/null +++ b/Pure-CSS-Dismissible-Alert/style.css @@ -0,0 +1,90 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + background-color: #f0f2f5; + display: flex; + justify-content: center; + align-items: flex-start; + min-height: 100vh; + padding-top: 50px; + margin: 0; +} + +.alert-container { + width: 90%; + max-width: 600px; +} + +/* --- ALERT BOX STYLES (VISIBLE BY DEFAULT) --- */ +.alert-box { + background-color: #d4edda; + color: #155724; + border: 1px solid #c3e6cb; + border-radius: 5px; + padding: 20px; + margin-bottom: 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, padding 0.4s ease-out, height 0.4s ease-out; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.alert-title { + margin-top: 0; + font-size: 1.25rem; +} + +.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; + color: #155724; + text-decoration: none; + line-height: 1; + opacity: 0.7; + transition: opacity 0.2s; +} + +.alert-close:hover { + opacity: 1; +} + +/* --- THE PURE CSS MAGIC (CHECKBOX HACK) --- */ + +/* 1. Hide the element by changing its style when the checkbox is checked */ +.alert-toggle:checked + .alert-container .alert-box { + opacity: 0; + transform: translateY(-10px); /* Move it up slightly for the dismissal animation */ + /* Collapse the box visually and remove it from flow */ + height: 0; + padding: 0 20px; + margin-bottom: 0; + border: none; + overflow: hidden; +} + +/* 2. Hide any content that should only be visible when the alert is gone */ +.content-after-dismiss { + opacity: 0; + transform: translateY(-20px); + transition: opacity 0.4s ease-out 0.4s, transform 0.4s ease-out 0.4s; + font-style: italic; + color: #666; + margin-top: 10px; +} + +/* 3. Show the 'after dismiss' content when the checkbox is checked */ +.alert-toggle:checked + .alert-container .content-after-dismiss { + opacity: 1; + transform: translateY(0); +} + +/* Note: The 'alert-toggle' itself is hidden using the 'hidden' attribute in HTML. */ \ No newline at end of file From 7556237da6501d01d725fc42c12d66b5d3286067 Mon Sep 17 00:00:00 2001 From: Kulsum Ahmad Date: Sun, 12 Oct 2025 13:42:26 +0530 Subject: [PATCH 2/2] feat: Implement multiple alert types (error, warning, info) per review feedback --- Pure-CSS-Dismissible-Alert/index.html | 59 +++++++++++-- Pure-CSS-Dismissible-Alert/style.css | 114 +++++++++++++++++--------- 2 files changed, 125 insertions(+), 48 deletions(-) diff --git a/Pure-CSS-Dismissible-Alert/index.html b/Pure-CSS-Dismissible-Alert/index.html index cb157ebc..8ec87a29 100644 --- a/Pure-CSS-Dismissible-Alert/index.html +++ b/Pure-CSS-Dismissible-Alert/index.html @@ -3,26 +3,67 @@ - Pure CSS Dismissible Alert + Pure CSS Dismissible Alerts (Multiple Types) +

Pure CSS Dismissible Alerts

+

Click the 'X' to dismiss. All functionality is pure HTML/CSS.

- - + +
-
+

Success! 🎉

- Your settings have been saved. This alert is dismissed with **only CSS**! + Your settings have been saved successfully. (Dismissed with CSS only) +

+ +
+
+ + + +
+
+

Error! 🚫

+

+ File upload failed due to insufficient permissions. +

+ +
+
+ + + +
+
+

Warning! ⚠️

+

+ Session expiring soon. Please save your work to prevent data loss. +

+ +
+
+ + + +
+
+

Information 💡

+

+ New features are available. Check the changelog for details.

-
-

- This content becomes visible when the alert is dismissed (via CSS transition). -

diff --git a/Pure-CSS-Dismissible-Alert/style.css b/Pure-CSS-Dismissible-Alert/style.css index afb0083b..119dc389 100644 --- a/Pure-CSS-Dismissible-Alert/style.css +++ b/Pure-CSS-Dismissible-Alert/style.css @@ -1,37 +1,50 @@ body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; - background-color: #f0f2f5; + font-family: 'Inter', Arial, sans-serif; /* Using Inter as per instructions */ + background-color: #f4f7f6; display: flex; - justify-content: center; - align-items: flex-start; - min-height: 100vh; - padding-top: 50px; + 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; } -/* --- ALERT BOX STYLES (VISIBLE BY DEFAULT) --- */ +/* --- BASE ALERT STYLES (Applies to all) --- */ .alert-box { - background-color: #d4edda; - color: #155724; - border: 1px solid #c3e6cb; - border-radius: 5px; + border-radius: 8px; padding: 20px; - margin-bottom: 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, padding 0.4s ease-out, height 0.4s ease-out; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + 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 { @@ -46,7 +59,6 @@ body { transform: translateY(-50%); font-size: 1.5rem; cursor: pointer; - color: #155724; text-decoration: none; line-height: 1; opacity: 0.7; @@ -57,34 +69,58 @@ body { opacity: 1; } -/* --- THE PURE CSS MAGIC (CHECKBOX HACK) --- */ +/* --- THEME COLORS --- */ -/* 1. Hide the element by changing its style when the checkbox is checked */ -.alert-toggle:checked + .alert-container .alert-box { - opacity: 0; - transform: translateY(-10px); /* Move it up slightly for the dismissal animation */ - /* Collapse the box visually and remove it from flow */ - height: 0; - padding: 0 20px; - margin-bottom: 0; - border: none; - overflow: hidden; +/* SUCCESS (Green) */ +.alert--success { + background-color: #d4edda; + color: #155724; + border-left-color: #28a745; } +.alert--success .alert-close { color: #155724; } -/* 2. Hide any content that should only be visible when the alert is gone */ -.content-after-dismiss { - opacity: 0; - transform: translateY(-20px); - transition: opacity 0.4s ease-out 0.4s, transform 0.4s ease-out 0.4s; - font-style: italic; - color: #666; - margin-top: 10px; +/* ERROR (Red) */ +.alert--error { + background-color: #f8d7da; + color: #721c24; + border-left-color: #dc3545; } +.alert--error .alert-close { color: #721c24; } -/* 3. Show the 'after dismiss' content when the checkbox is checked */ -.alert-toggle:checked + .alert-container .content-after-dismiss { - opacity: 1; - transform: translateY(0); +/* 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; } + -/* Note: The 'alert-toggle' itself is hidden using the 'hidden' attribute in HTML. */ \ No newline at end of file +/* --- 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; +}