diff --git a/notifications/notification-user/notification-user.component.ts b/notifications/notification-user/notification-user.component.ts index 3582eff4..8759db89 100644 --- a/notifications/notification-user/notification-user.component.ts +++ b/notifications/notification-user/notification-user.component.ts @@ -18,7 +18,7 @@ export class NotificationUserComponent implements OnInit{ @Input() public surname: string; @Input() - public colorClass = 'portal-color'; + public colorClass = 'uk-text-primary'; @Input() public outline: boolean = false; public firstLetters: string; diff --git a/notifications/notifications-sidebar/notification-sidebar.component.css b/notifications/notifications-sidebar/notification-sidebar.component.css index cfd33e8c..29063d36 100644 --- a/notifications/notifications-sidebar/notification-sidebar.component.css +++ b/notifications/notifications-sidebar/notification-sidebar.component.css @@ -1,62 +1,5 @@ #notifications-switcher { - top: 250px !important; - position: fixed; - height: 36px; - background-color: var(--portal-main-color); - color: var(--portal-main-contrast); - border-radius: 4px 0 0 4px; - cursor: pointer; - padding: 4px; - box-shadow: -2px 2px 5px rgba(0, 0, 0, .26); - box-sizing: border-box; - right: 0; - z-index: 980; -} - -#notifications-switcher #notifications-count { - position: absolute; - top: 0; - left: 0; - font-size: 10px; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - height: 14px; - border-radius: 50%; - padding: 1px 5px; -} - -#notifications .uk-offcanvas-bar { - background-color: white; - color: #1a1a1a; - font-size: 14px; - top: 100px; - padding: 0; - border: 1px solid var(--portal-main-color); - width: 550px; -} - -#notifications .uk-offcanvas-flip .uk-offcanvas-bar { - right: -550px; -} - -#notifications .uk-offcanvas-bar .text-small { - font-size: 12px; -} - -#notifications .uk-offcanvas-bar h5, #notifications .uk-offcanvas-bar h6 { - color: #1a1a1a; -} - -#notifications button.notification-close, #notifications button.notification-close:focus { - border-radius: 4px; - background-color: #F0F0F0; - color: #76706B; - border: none; - outline: none; -} - -#notifications button.notification-close:hover, #notifications button.notification-close:focus { - color: #1a1a1a; + top: 320px !important; } #notifications .notification-list { @@ -87,30 +30,26 @@ overflow: auto; } -#notifications .uk-offcanvas-bar a, #notifications .uk-offcanvas-bar button.uk-button-link { - color: var(--secondary-color); -} - -#notifications .uk-offcanvas-bar a:hover, #notifications .uk-offcanvas-bar button.uk-button-link:hover { - color: var(--portal-main-color); -} +/*#notifications .uk-offcanvas-bar a, #notifications .uk-offcanvas-bar button.uk-button-link {*/ +/* color: var(--secondary-color);*/ +/*}*/ #notifications .uk-offcanvas-bar button.uk-button-link:disabled { color: var(--secondary-color); opacity: 0.5; } -#notifications .uk-offcanvas-bar .uk-button-secondary { - background-color: var(--secondary-color); - color: #fff; - border: 1px solid transparent; -} +/*#notifications .uk-offcanvas-bar .uk-button-secondary {*/ +/* background-color: var(--secondary-color);*/ +/* color: #fff;*/ +/* border: 1px solid transparent;*/ +/*}*/ -#notifications .uk-offcanvas-bar .uk-button-secondary:focus, #notifications .uk-offcanvas-bar .uk-button-secondary:hover { - background-color: transparent; - color: #4687e6; - border-color: #4687e6; -} +/*#notifications .uk-offcanvas-bar .uk-button-secondary:focus, #notifications .uk-offcanvas-bar .uk-button-secondary:hover {*/ +/* background-color: transparent;*/ +/* color: #4687e6;*/ +/* border-color: #4687e6;*/ +/*}*/ #notifications .uk-offcanvas-bar .uk-button-secondary:disabled { background-color: transparent; diff --git a/notifications/notifications-sidebar/notifications-sidebar.component.ts b/notifications/notifications-sidebar/notifications-sidebar.component.ts index fb3b95b0..797d6437 100644 --- a/notifications/notifications-sidebar/notifications-sidebar.component.ts +++ b/notifications/notifications-sidebar/notifications-sidebar.component.ts @@ -1,4 +1,4 @@ -import {Component, Input, OnDestroy, OnInit, ViewEncapsulation} from "@angular/core"; +import {ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation} from "@angular/core"; import {Notification} from "../notifications"; import {NotificationService} from "../notification.service"; import {Subscription} from "rxjs"; @@ -11,20 +11,38 @@ declare var UIkit; @Component({ selector: 'notification-sidebar', template: ` -