Add custom notification style

package.json

@@ -45,6 +45,7 @@
     ],
     "dependencies": {
         "@fontsource/montserrat": "^5.0.8",
+        "@fortawesome/fontawesome-free": "^6.6.0",
         "@fortawesome/fontawesome-svg-core": "^6.4.2",
         "@fortawesome/free-brands-svg-icons": "^6.4.2",
         "@fortawesome/free-regular-svg-icons": "^6.4.2",

src/less/components/alert.less

@@ -11,7 +11,11 @@
 
 // Main background colors
 // N.B.: Preset are not changed, only the custom ones
-@alert-info-background: lighten(tint(@global-info-background, 40%), 25%);
+@alert-primary-background: @global-primary-background-lighten;
+@alert-warning-background: @global-warning-background-lighten;
+@alert-danger-background: @global-danger-background-lighten;
+@alert-success-background: @global-success-background-lighten;
+@alert-info-background: @global-info-background-lighten;
 @alert-secondary-background: @global-muted-background;
 @alert-muted-background: @global-muted-background;
 

src/less/components/notification.less

@@ -0,0 +1,124 @@
+// Imports
+// ========================================================================
+@import '@fortawesome/fontawesome-free/less/solid.less';
+
+// Variables
+// ========================================================================
+// Primary
+@notification-message-primary-color: @global-color;
+@notification-message-primary-background: @global-primary-background-lighten;
+@notification-message-primary-border: @global-primary-background;
+@notification-message-primary-icon-color: @global-primary-background;
+
+// Success
+@notification-message-success-color: @global-color;
+@notification-message-success-background: @global-success-background-lighten;
+@notification-message-success-border: @global-success-background;
+@notification-message-success-icon-color: @global-success-background;
+
+// Danger
+@notification-message-danger-color: @global-color;
+@notification-message-danger-background: @global-danger-background-lighten;
+@notification-message-danger-border: @global-danger-background;
+@notification-message-danger-icon-color: @global-danger-background;
+
+// Warning
+@notification-message-warning-color: @global-color;
+@notification-message-warning-background: @global-warning-background-lighten;
+@notification-message-warning-border: @global-warning-background;
+@notification-message-warning-icon-color: @global-warning-background;
+
+// Undefined - Default style
+@notification-message-color: @global-color;
+@notification-message-background: @global-muted-background;
+@notification-message-border: @global-secondary-background;
+@notification-message-icon-color: @global-secondary-background;
+
+// Icons
+@notification-icon-primary: '\f05a';
+@notification-icon-success: '\f058';
+@notification-icon-danger: '\f057';
+@notification-icon-warning: '\f06a';
+@notification-icon-left: 10px;
+@notification-icon-text-offset: 35px;
+
+// Custom left border width
+@notification-message-border-width: 5px;
+
+// Make font size smaller
+@notification-message-font-size: @global-font-size;
+
+// Add box shadow
+@notification-message-box-shadow: @global-small-box-shadow;
+
+// Move notification below the navbar
+@notification-position-top: 80px;
+
+// Custom hooks
+// ========================================================================
+.hook-notification() {
+    top: @notification-position-top;
+}
+
+.hook-notification-message-primary() {
+    background: @notification-message-primary-background;
+    border-left: @notification-message-border-width solid @notification-message-primary-border;
+}
+
+.hook-notification-message-success() {
+    background: @notification-message-success-background;
+    border-left: @notification-message-border-width solid @notification-message-success-border;
+}
+
+.hook-notification-message-danger() {
+    background: @notification-message-danger-background;
+    border-left: @notification-message-border-width solid @notification-message-danger-border;
+}
+
+.hook-notification-message-warning() {
+    background: @notification-message-warning-background;
+    border-left: @notification-message-border-width solid @notification-message-warning-border;
+}
+
+// Apply "undefined" message style
+.hook-notification-message() {
+    background: @notification-message-background;
+    border-left: @notification-message-border-width solid @notification-message-border;
+
+    // Apply drop shadow
+    box-shadow: @notification-message-box-shadow;
+    padding-left: @notification-icon-text-offset;
+}
+
+// Add custom icons to the notifications
+.hook-notification-misc() {
+    .uk-notification-message::before {
+        position: absolute;
+        top: @notification-message-padding;
+        font-size: @notification-message-font-size;
+        font: var(--fa-font-solid);
+        left: @notification-icon-left;
+        line-height: @notification-message-line-height;
+        -webkit-font-smoothing: antialiased;
+    }
+
+    .uk-notification-message-primary::before {
+        content: @notification-icon-primary;
+        color: @notification-message-primary-icon-color;
+    }
+
+    .uk-notification-message-success::before {
+        content: @notification-icon-success;
+        color: @notification-message-success-icon-color;
+    }
+
+    .uk-notification-message-danger::before {
+        content: @notification-icon-danger;
+        color: @notification-message-danger-icon-color;
+    }
+
+    .uk-notification-message-warning::before {
+        content: @notification-icon-warning;
+        color: @notification-message-warning-icon-color;
+    }
+}

src/less/components/variables.less

@@ -2,3 +2,9 @@
 // Backgrounds
 //
 @global-info-background: #0dcaf0;
+
+@global-primary-background-lighten: rgb(233, 242, 249);
+@global-success-background-lighten: rgb(233, 242, 219);
+@global-danger-background-lighten: rgb(246, 227, 226);
+@global-warning-background-lighten: rgb(253, 242, 222);
+@global-info-background-lighten: lighten(tint(@global-info-background, 40%), 25%);

src/less/main.less

@@ -7,6 +7,7 @@
 @import 'components/button.less';
 @import 'components/label.less';
 @import 'components/navbar.less';
+@import 'components/notification.less';
 @import 'components/section.less';
 @import 'components/utility.less';