diff --git a/src/dependencies.pug b/src/dependencies.pug index 2f74b10..61dc886 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -11,7 +11,7 @@ script(type="module" src="https://unpkg.com/@startinblox/oidc@0.9" defer) script(type="module" src="https://unpkg.com/@startinblox/router@0.8" defer) //- script(type="module" src="/lib/solid-router/src/index.js" defer) -script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.5.0-beta.2" defer) +script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.5.0-beta.3" defer) //- script(type="module" src="/lib/sib-notifications/index.js" defer) if endpoints.events || (endpoints.get && endpoints.get.events) diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index 8365842..cee96ef 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -108,6 +108,39 @@ solid-notifications { } } } + + .solid-notifications__triangle-back { + display: none; + } + + .solid-notifications__triangle-shadow { + position: absolute; + left: auto; + right: -2.1em; + top: 5em; + height: 1rem; + background: white; + + width: 0; + transform: initial; + + z-index: 4; + + &::after { + content: ""; + position: absolute; + width: 0; + height: 0; + margin-left: -5em; + top: 0px; + left: 50%; + border: 1em solid black; + border-color: #fff #fff transparent transparent; + transform-origin: 0 0; + transform: rotate(-45deg); + box-shadow: 6px -6px 10px -3px rgba(92, 97, 104, 0.14); + } + } .solid-notifications__list { border: none; @@ -115,8 +148,8 @@ solid-notifications { box-shadow: 0 0 7px 0 rgba(92, 97, 104, 0.24); max-height: calc(100vh - 84px); position: fixed; - left: 0; - top: 4.5rem; + right: -30px !important; + top: 3.99em !important; width: 100vw; /* Custom scrollbar */