diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss index 5bfd85a..136c6d7 100644 --- a/src/styles/abstracts/_variables.scss +++ b/src/styles/abstracts/_variables.scss @@ -44,6 +44,8 @@ --color-notification-summary: var(--color-grey-4); --solid-notifications-theme: var(--color-primary); --color-notification-item-border: var(--color-grey-12); + --color-notification-scrollbar-background: #EDF1FA; + --color-notification-scrollbar-track: var(--color-grey-8); --color-user-panel-header-text: var(--color-secondary); --color-user-panel-header-background: var(--color-white); --color-user-panel-header-text-open: var(--color-white); diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index 8ad1c6c..9d9af2e 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -106,12 +106,35 @@ solid-notifications { } .solid-notifications__list { - overflow-x: hidden; + position: fixed; left: 0; top: 4.5rem; width: 100vw; + + overflow: auto; + height: 60px; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: none; + + scrollbar-width: thin; + scrollbar-color: var(--color-notification-scrollbar-track) var(--color-notification-scrollbar-background); + + &::-webkit-scrollbar-track { + background: var(--color-notification-scrollbar-background); + } + + &::-webkit-scrollbar-thumb { + background-color: var(--color-notification-scrollbar-track); + border-radius: 6px; + border: 3px solid var(--color-notification-scrollbar-background); + } + + &::-webkit-scrollbar { + width: 11px; + } + @include breakpoint(md) { border: 0; border-radius: 0;