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

feature: notification - ok on mobile

This commit is contained in:
gaelle morin 2020-07-09 14:31:14 +02:00
parent 897dc336c2
commit f83b458240
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
1 changed files with 36 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -114,31 +114,33 @@ solid-notifications {
}
.solid-notifications__triangle-shadow {
position: absolute;
left: auto;
right: -2.1em;
top: 5em;
height: 1rem;
background: white;
display: none;
width: 0;
transform: initial;
z-index: 4;
&::after {
content: "";
@include breakpoint(lg) {
background: white;
display: block;
position: absolute;
left: auto;
right: -2.1em;
top: 5em;
transform: initial;
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);
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);
}
}
}
@ -146,11 +148,20 @@ solid-notifications {
border: none;
border-radius: 0;
box-shadow: 0 0 7px 0 rgba(92, 97, 104, 0.24);
max-height: calc(100vh - 84px);
max-height: calc(100vh - 50px);
position: fixed;
right: -30px !important;
top: 3.99em !important;
left: 0;
top: 2.5em;
width: 100vw;
@include breakpoint(lg) {
max-height: calc(100vh - 93px);
position: absolute;
left: auto;
right: -2.3em;
top: 3.99em;
width: 347px;
}
/* Custom scrollbar */
overflow: auto;
@ -173,19 +184,6 @@ solid-notifications {
}
/* End of custom scrollbar */
@include breakpoint(md) {
border: 0;
border-radius: 0;
}
@include breakpoint(lg) {
position: absolute;
left: auto;
right: 0;
top: 5.7rem;
width: 347px;
}
.solid-notifications__item {
border-bottom: 1px solid var(--color-notification-item-border);