alerts: add

demo.html

@@ -382,6 +382,43 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </div>
             </div>
 
+            <div class="page">
+                <div class="row">
+                    <div class="col">
+                        <h1>Alert</h1>
+                        <p>
+                            Gli alert devono avere la classe
+                            <code>.alert</code>, e una delle classi
+                            <code>.success</code>, <code>.error</code> o
+                            <code>.info</code> in base alla loro categoria.
+                            Se è presente uno <code>&lt;span&gt;</code> con
+                            classe <code>.close</code>, cliccandolo l'alert
+                            sparirà.
+                        </p>
+                        <pre>
+&lt;div class="alert success"&gt;
+    Contenuto dell'alert
+    &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
+&lt;/div&gt;</pre>
+                    </div>
+                </div>
+            </div>
+
+            <div class="alert success">
+                Tutto è andato bene
+                <span class="close">&times;</span>
+            </div>
+
+            <div class="alert error">
+                Si è verificato un errore...
+                <span class="close">&times;</span>
+            </div>
+
+            <div class="alert info">
+                Una semplice informazione
+                <span class="close">&times;</span>
+            </div>
+
             <footer>
                 <p>
                     Ubuntu e Canonical sono marchi registrati da Canonical

js/alerts.js

+/* Copyright (C) 2018 Pietro Albini <pietroalbini@ubuntu.com>
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by the
+ * Free Software Foundation, either version 3 of the License, or (at your
+ * option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+function ubuntuit_alerts_init() {
+    var alerts = document.querySelectorAll(".alert");
+    for (var i = 0; i < alerts.length; i++) {
+        var close = alerts[i].querySelector("span.close");
+        if (close !== null) {
+            close.addEventListener("click", function(e) {
+                e.preventDefault();
+                this.classList.add("closed");
+            }.bind(alerts[i]))
+        }
+    }
+}
+
+window.addEventListener("load", ubuntuit_alerts_init);

scss/_alerts.scss

+/* Copyright (C) 2018 Pietro Albini <pietroalbini@ubuntu.com>
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by the
+ * Free Software Foundation, either version 3 of the License, or (at your
+ * option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+div.alert {
+    color: #fff;
+    padding: 0.7em 1em 0.8em 1em;
+    margin: 1em 0;
+    border-radius: 0.2em;
+    box-shadow: inset 0 -0.2em 0 rgba(0, 0, 0, 0.15);
+
+    &.success {
+        background: $color_green;
+    }
+
+    &.error {
+        background: $color_red;
+    }
+
+    &.info {
+        background: $color_blue;
+    }
+
+    &.closed {
+        display: none;
+    }
+
+    span.close {
+        float: right;
+        display: block;
+        font-size: 1.2em;
+        margin: -0.2rem 0;
+        cursor: pointer;
+    }
+
+    @media all and (max-width: $page_size) {
+        border-radius: 0;
+    }
+}

scss/_variables.scss

@@ -19,4 +19,8 @@ $color_warm_gray: #aea79f;
 $color_cool_gray: #333;
 $color_text_gray: #111;
 
+$color_green: #3fb24f;
+$color_red: #fc4949;
+$color_blue: #1ab6ef;
+
 $page_size: 60rem;

scss/theme.scss

@@ -19,6 +19,7 @@
 
 @import "buttons";
 @import "box";
+@import "alerts";
 
 @import "cookiepolicy";
 @import "navbar";