habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: update styling of notification drawer to match rest

Browse Source
This commit is contained in:
Jens Langhammer
2021-01-15 12:16:35 +01:00
parent d637bd0bf9
commit 0b41cb84f0
2 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/authentik.css
View File

@ -228,4 +228,11 @@ select[multiple] {
.form-control-static {
color: var(--ak-dark-foreground);
}
/* notifications */
.pf-c-notification-drawer {
--pf-c-notification-drawer--BackgroundColor: var(--ak-dark-background);
}
.pf-c-notification-drawer__header {
background-color: var(--ak-dark-background-lighter);
}
}

12
web/src/elements/notifications/NotificationDrawer.ts
View File

@ -17,8 +17,10 @@ export class NotificationDrawer extends LitElement {
return COMMON_STYLES.concat(
css`
.pf-c-notification-drawer__header {
height: 82px;
height: 114px;
padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
display: flex;
flex-direction: column;
}
`
);
@ -72,13 +74,13 @@ export class NotificationDrawer extends LitElement {
}
return html`<div class="pf-c-drawer__body pf-m-no-padding">
<div class="pf-c-notification-drawer">
<div class="pf-c-notification-drawer__header">
<h1 class="pf-c-notification-drawer__header-title">
<div class="pf-c-notification-drawer__header pf-c-content">
<h1>
${gettext("Notifications")}
</h1>
<span class="pf-c-notification-drawer__header-status">
<p>
${gettext(`${this.unread} unread`)}
</span>
</p>
</div>
<div class="pf-c-notification-drawer__body">
<ul class="pf-c-notification-drawer__list">