diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index cee96ef..f1d2daf 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -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);