autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feature: notification - top triangle ok on desktop

Browse Source
This commit is contained in:
gaelle morin 2020-07-09 12:30:23 +02:00
parent 7cfea37b1e
commit 897dc336c2
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
2 changed files with 36 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/dependencies.pug
View File

@ -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="https://unpkg.com/@startinblox/router@0.8" defer)
//- script(type="module" src="/lib/solid-router/src/index.js" 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) //- script(type="module" src="/lib/sib-notifications/index.js" defer)
if endpoints.events || (endpoints.get && endpoints.get.events) if endpoints.events || (endpoints.get && endpoints.get.events)

37
src/styles/base/header.scss
View File

@ -109,14 +109,47 @@ 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 { .solid-notifications__list {
border: none; border: none;
border-radius: 0; border-radius: 0;
box-shadow: 0 0 7px 0 rgba(92, 97, 104, 0.24); box-shadow: 0 0 7px 0 rgba(92, 97, 104, 0.24);
max-height: calc(100vh - 84px); max-height: calc(100vh - 84px);
position: fixed; position: fixed;
left: 0; right: -30px !important;
top: 4.5rem; top: 3.99em !important;
width: 100vw; width: 100vw;
/* Custom scrollbar */ /* Custom scrollbar */