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