studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Move notifications style outside of component

Browse source
This commit is contained in:
Timothée Goguely 2025-01-29 13:21:50 +01:00
parent 8d51dc3727
commit 46f3551439
3 changed files with 52 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/assets/css/index.css
View file

@ -23,6 +23,7 @@
@import 'src/2.blocks.header.css'; @import 'src/2.blocks.header.css';
@import 'src/2.blocks.image.css'; @import 'src/2.blocks.image.css';
@import 'src/2.blocks.kanban.css'; @import 'src/2.blocks.kanban.css';
@import 'src/2.blocks.notifications.css';
@import 'src/2.blocks.pill.css'; @import 'src/2.blocks.pill.css';
@import 'src/2.blocks.pdf-viewer.css'; @import 'src/2.blocks.pdf-viewer.css';
@import 'src/2.blocks.project.css'; @import 'src/2.blocks.project.css';

51
src/assets/css/src/2.blocks.notifications.css Normal file
View file

@ -0,0 +1,51 @@
/* NOTIFICATIONS BLOCK */
.notifications {
--flow-space: var(--space-16);
}
.notification {
--flow-space: var(--space-12);
font-size: var(--text-sm);
position: relative;
cursor: pointer;
}
.notification[data-status="unread"]::after {
content: "";
display: inline-block;
width: 0.5rem;
height: 0.5rem;
outline: 2px solid var(--color-white);
background: var(--color-primary);
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
}
.notification p {
max-width: 100%;
}
.notification header p {
column-gap: 0;
}
.notification__type {
display: flex;
}
.notification__type::before {
margin-right: var(--space-8);
}
.notification__client {
display: inline-block;
}
.notification__client::before {
content: "";
display: inline-block;
width: 3px;
height: 3px;
background: var(--color-grey-700);
border-radius: 50%;
margin: 0.2em 0.5em;
}
.notification__body {
--line-clamp: 2;
}

54
src/views/Notifications.vue
View file

@ -173,58 +173,4 @@ main > header {
main > header [role="tablist"] { main > header [role="tablist"] {
margin-left: 0; margin-left: 0;
} }
/* Notifications */
.notifications {
--flow-space: var(--space-16);
}
</style>
<!-- WARNING : below styles are not scoped so as to be applied to the children components -->
<style>
.notifications .notification {
--flow-space: var(--space-12);
font-size: var(--text-sm);
position: relative;
cursor: pointer;
}
.notifications .notification[data-status="unread"]::after {
content: "";
display: inline-block;
width: 0.5rem;
height: 0.5rem;
outline: 2px solid var(--color-white);
background: var(--color-primary);
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
}
.notifications .notification p {
max-width: 100%;
}
.notifications .notification header p {
column-gap: 0;
}
.notifications .notification__type {
display: flex;
}
.notifications .notification__type::before {
margin-right: var(--space-8);
}
.notifications .notification__client {
display: inline-block;
}
.notifications .notification__client::before {
content: "";
display: inline-block;
width: 3px;
height: 3px;
background: var(--color-grey-700);
border-radius: 50%;
margin: 0.2em 0.5em;
}
.notifications .notification__body {
--line-clamp: 2;
}
</style> </style>