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

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