diff --git a/src/header.pug b/src/header.pug index a7549f9988ae7ecf8e47f303edd5d8715c88a663..a20b9813356c60684ef83ddd14951e4b6a220ca8 100644 --- a/src/header.pug +++ b/src/header.pug @@ -10,6 +10,8 @@ details summary#notifications-button + div.menu-notification + div 7 #notifications include page-notifications.pug diff --git a/src/styles/header.scss b/src/styles/header.scss index 076235ba253660fe96db8b70e00767adf6bce943..2e2c81645ac896e11f5d6be91b6517e011cef720 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -37,6 +37,13 @@ font-size: 2em; cursor: pointer; list-style-type: none; + position: relative; + + .menu-notification { + position: absolute; + top: -3px; + left: 3px; + } } #notifications { diff --git a/src/styles/main.scss b/src/styles/main.scss index f3fa214d7e00af33e8153e4ec6f4d8972055a00b..df634b73adc796d581ccf2f5225c7e6f08e2539f 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -140,6 +140,29 @@ h4 { } */ +.menu-notification { + //flex-basis: 3em; + width: 2em; + flex-shrink: 0; + flex-grow: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + > div { + color: $color-black; + display: flex; + justify-content: center; + align-items: center; + width: 1.7em; + height: 1.7em; + border-radius: 100%; + background-color: $color-yellow-light; + font-size: 12px; + } +} + .layer { position: absolute; bottom: 0; diff --git a/src/styles/menu.scss b/src/styles/menu.scss index bc7b8ec8df1b0f9ad73f458a01b94555f5387ffe..8408fdf58c6c1f4294991ef7a636d4f07d329594 100644 --- a/src/styles/menu.scss +++ b/src/styles/menu.scss @@ -149,7 +149,7 @@ sib-router { letter-spacing: 0.17px; font-size: 16px; } - +/* .menu-notification { //flex-basis: 3em; width: 2em; @@ -172,7 +172,7 @@ sib-router { font-size: 12px; } } - +*/ &[id-prefix] { display: none; }