web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Simple notification UI

Browse Source
This commit is contained in:
ClemDee
2019-06-26 14:33:38 +02:00
parent a62f2ff003
commit 2d6e8754be
3 changed files with 97 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
www/notifications/app-notifications.less
View File

@@ -12,5 +12,71 @@
display: flex;
flex-flow: column;
.cp-app-notifications-panel {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
width: 100%;
.cp-app-notifications-panel-titlebar {
padding: 1rem 1rem;
border-radius: 5px 5px 0 0;
background-color: #777;
color: white;
}
.cp-app-notifications-panel-list {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 0 5px 5px;
overflow: hidden;
.cp-notification {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
background-color: #ffffff;
&:not(:last-child) {
border-bottom: 1px solid #ccc;
}
.cp-notification-content {
flex-grow: 1;
cursor: pointer;
&:hover {
background-color: #eee;
}
p {
margin: 1rem 1rem;
}
}
.cp-notification-dismiss {
align-self: stretch;
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-left: 1px solid #ccc;
background-color: white;
cursor: pointer;
width: 3rem;
&:hover {
background-color: rgba(0, 0, 0, 0.1);
}
}
}
}
}
}