cryptpad/www/notifications/app-notifications.less
2019-06-27 10:15:05 +02:00

106 lines
3 KiB
Text

@import (reference) '../../customize/src/less2/include/framework.less';
@import (reference) '../../customize/src/less2/include/sidebar-layout.less';
&.cp-app-notifications {
.framework_min_main(
@bg-color: @colortheme_notifications-bg,
@warn-color: @colortheme_notifications-warn,
@color: @colortheme_notifications-color
);
.sidebar-layout_main();
display: flex;
flex-flow: column;
.cp-clickable {
cursor: pointer;
&:hover {
background-color: rgba(0,0,0,0.1);
}
}
.cp-app-notifications-panel {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
width: 100%;
.cp-app-notifications-panel-titlebar {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
border-radius: 5px 5px 0 0;
background-color: #777;
color: white;
.cp-app-notifications-panel-title {
flex-grow: 1;
margin: 1rem 1rem;
}
.cp-app-notifications-panel-titlebar-buttons {
align-self: stretch;
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: stretch;
.cp-app-notifications-dismissall {
align-self: stretch;
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 3rem;
}
}
}
.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;
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;
width: 3rem;
}
}
}
}
}