client/src/app/shared/shared-main/users/user-notifications.component.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 .no-notification {
   5   display: flex;
   6   justify-content: center;
   7   align-items: center;
   8   padding: 20px 0;
   9 }
  10
  11 .notification {
  12   display: flex;
  13   align-items: center;
  14   font-size: inherit;
  15   padding: 15px 5px 15px 10px;
  16   border-bottom: 1px solid $separator-border-color;
  17   word-break: break-word;
  18
  19   &.unread {
  20     background-color: rgba(0, 0, 0, 0.05);
  21   }
  22
  23   my-global-icon {
  24     @include apply-svg-color(#{pvar(--mainForegroundColor)});
  25     @include margin-right(11px);
  26     @include margin-left(3px);
  27
  28     width: 24px;
  29   }
  30
  31   .avatar {
  32     @include margin-right(10px);
  33
  34     width: 30px;
  35     height: 30px;
  36     min-width: 30px;
  37     min-height: 30px;
  38     border-radius: 5px;
  39   }
  40
  41   .message {
  42     flex-grow: 1;
  43
  44     a {
  45       font-weight: $font-semibold;
  46     }
  47   }
  48
  49   .from-date {
  50     @include padding-left(5px);
  51     @include margin-left(auto);
  52
  53     font-size: 0.85em;
  54     color: pvar(--greyForegroundColor);
  55     min-width: 70px;
  56     text-align: end;
  57   }
  58 }