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

feature: notifications__item styling scrollbar

Browse Source
This commit is contained in:
gaelle morin 2020-06-26 14:10:51 +02:00
parent 70b430b39d
commit f8c43b74f3
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
2 changed files with 26 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/styles/abstracts/_variables.scss
View File

@ -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);

25
src/styles/base/header.scss
View File

@ -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;