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

View File

@ -114,16 +114,17 @@ solid-notifications {
}
.solid-notifications__triangle-shadow {
display: none;
@include breakpoint(lg) {
background: white;
display: block;
position: absolute;
left: auto;
right: -2.1em;
top: 5em;
height: 1rem;
background: white;
width: 0;
transform: initial;
width: 0;
z-index: 4;
&::after {
@ -141,17 +142,27 @@ solid-notifications {
box-shadow: 6px -6px 10px -3px rgba(92, 97, 104, 0.14);
}
}
}
.solid-notifications__list {
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;
-webkit-overflow-scrolling: touch;
@ -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);