From ad8623ecc4be878b60b7cc483e15acc489825ed5 Mon Sep 17 00:00:00 2001 From: Louis Charette Date: Tue, 5 Nov 2024 23:04:07 -0500 Subject: [PATCH] Add custom notification style --- package-lock.json | 10 +++ package.json | 1 + src/less/components/alert.less | 6 +- src/less/components/notification.less | 124 ++++++++++++++++++++++++++ src/less/components/variables.less | 6 ++ src/less/main.less | 1 + 6 files changed, 147 insertions(+), 1 deletion(-) create mode 100644 src/less/components/notification.less diff --git a/package-lock.json b/package-lock.json index 07f7b90..001461a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "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", @@ -612,6 +613,15 @@ "node": ">=6" } }, + "node_modules/@fortawesome/fontawesome-free": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.6.0.tgz", + "integrity": "sha512-60G28ke/sXdtS9KZCpZSHHkCbdsOGEhIUGlwq6yhY74UpTiToIh8np7A8yphhM4BWsvNFtIvLpi4co+h9Mr9Ow==", + "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)", + "engines": { + "node": ">=6" + } + }, "node_modules/@fortawesome/fontawesome-svg-core": { "version": "6.6.0", "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz", diff --git a/package.json b/package.json index 2852855..e0bba5e 100644 --- a/package.json +++ b/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", diff --git a/src/less/components/alert.less b/src/less/components/alert.less index 50b3e9f..fd325bc 100644 --- a/src/less/components/alert.less +++ b/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; diff --git a/src/less/components/notification.less b/src/less/components/notification.less new file mode 100644 index 0000000..b172873 --- /dev/null +++ b/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; + } +} diff --git a/src/less/components/variables.less b/src/less/components/variables.less index 4b63d2f..17adfad 100644 --- a/src/less/components/variables.less +++ b/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%); diff --git a/src/less/main.less b/src/less/main.less index fee3639..e65d67c 100644 --- a/src/less/main.less +++ b/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';