Skip to content
Snippets Groups Projects
Verified Commit f8c43b74 authored by Gaëlle Morin's avatar Gaëlle Morin
Browse files

feature: notifications__item styling scrollbar

parent 70b430b3
No related branches found
No related tags found
3 merge requests!200Feature/projects,!185Release/notification template,!183Feature/notification template
Pipeline #6505 passed with stages
in 1 minute and 5 seconds
...@@ -44,6 +44,8 @@ ...@@ -44,6 +44,8 @@
--color-notification-summary: var(--color-grey-4); --color-notification-summary: var(--color-grey-4);
--solid-notifications-theme: var(--color-primary); --solid-notifications-theme: var(--color-primary);
--color-notification-item-border: var(--color-grey-12); --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-text: var(--color-secondary);
--color-user-panel-header-background: var(--color-white); --color-user-panel-header-background: var(--color-white);
--color-user-panel-header-text-open: var(--color-white); --color-user-panel-header-text-open: var(--color-white);
......
...@@ -106,12 +106,35 @@ solid-notifications { ...@@ -106,12 +106,35 @@ solid-notifications {
} }
.solid-notifications__list { .solid-notifications__list {
overflow-x: hidden;
position: fixed; position: fixed;
left: 0; left: 0;
top: 4.5rem; top: 4.5rem;
width: 100vw; 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) { @include breakpoint(md) {
border: 0; border: 0;
border-radius: 0; border-radius: 0;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment