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

feature: notification - ok on mobile

Browse Source
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 { .solid-notifications__triangle-shadow {
position: absolute; display: none;
left: auto;
right: -2.1em;
top: 5em;
height: 1rem;
background: white;
width: 0; @include breakpoint(lg) {
transform: initial; background: white;
display: block;
z-index: 4;
&::after {
content: "";
position: absolute; position: absolute;
left: auto;
right: -2.1em;
top: 5em;
transform: initial;
width: 0; width: 0;
height: 0; z-index: 4;
margin-left: -5em;
top: 0px; &::after {
left: 50%; content: "";
border: 1em solid black; position: absolute;
border-color: #fff #fff transparent transparent; width: 0;
transform-origin: 0 0; height: 0;
transform: rotate(-45deg); margin-left: -5em;
box-shadow: 6px -6px 10px -3px rgba(92, 97, 104, 0.14); 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,12 +148,21 @@ solid-notifications {
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 - 50px);
position: fixed; position: fixed;
right: -30px !important; left: 0;
top: 3.99em !important; top: 2.5em;
width: 100vw; width: 100vw;
@include breakpoint(lg) {
max-height: calc(100vh - 93px);
position: absolute;
left: auto;
right: -2.3em;
top: 3.99em;
width: 347px;
}
/* Custom scrollbar */ /* Custom scrollbar */
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -173,19 +184,6 @@ solid-notifications {
} }
/* End of custom scrollbar */ /* 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 { .solid-notifications__item {
border-bottom: 1px solid var(--color-notification-item-border); border-bottom: 1px solid var(--color-notification-item-border);