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