client/src/app/menu/avatar-notification.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 /deep/ {
   5   .popover-notifications.popover {
   6     max-width: 400px;
   7
   8     .popover-body {
   9       padding: 0;
  10       font-size: 14px;
  11       font-family: $main-fonts;
  12       overflow-y: auto;
  13       max-height: 500px;
  14       box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30);
  15
  16       .notifications-header {
  17         display: flex;
  18         justify-content: space-between;
  19
  20         background-color: rgba(0, 0, 0, 0.10);
  21         align-items: center;
  22         padding: 0 10px;
  23         font-size: 16px;
  24         height: 50px;
  25
  26         a {
  27           @include disable-default-a-behaviour;
  28
  29           color: rgba(20, 20, 20, 0.5);
  30
  31           &:hover {
  32             color: rgba(20, 20, 20, 0.8);
  33           }
  34         }
  35       }
  36
  37       .all-notifications {
  38         display: flex;
  39         align-items: center;
  40         justify-content: center;
  41         font-weight: $font-semibold;
  42         color: var(--mainForegroundColor);
  43         height: 30px;
  44       }
  45     }
  46   }
  47 }
  48
  49 .notification-avatar {
  50   cursor: pointer;
  51   position: relative;
  52
  53   img,
  54   .unread-notifications {
  55     margin-left: 20px;
  56   }
  57
  58   img {
  59     @include avatar(34px);
  60
  61     margin-right: 10px;
  62   }
  63
  64   .unread-notifications {
  65     position: absolute;
  66     top: -5px;
  67     left: -5px;
  68
  69     display: flex;
  70     align-items: center;
  71     justify-content: center;
  72
  73     background-color: var(--mainColor);
  74     color: var(--mainBackgroundColor);
  75     font-size: 10px;
  76     font-weight: $font-semibold;
  77
  78     border-radius: 15px;
  79     width: 15px;
  80     height: 15px;
  81   }
  82 }