openecomp-ui/resources/scss/components/_userNotifications.scss

   1 .onboarding-notifications {
   2     margin-left: 10px;
   3     .notifications-icon {
   4         display: flex;
   5         @extend .clickable;
   6         .notifications-count {
   7             color: $white;
   8             font-size: 11px;
   9             text-align: center;
  10             width: 16px;
  11             height: 16px;
  12             background-color: $orange;
  13             border-radius: 50%;
  14             position: relative;
  15             right: 7px;
  16             top: -2px;
  17             &.hidden-count {
  18                 background-color: transparent;
  19                 color: transparent;
  20             }
  21         }
  22     }
  23     .onboarding-overlay {
  24         width: 520px;
  25         right: 39px;
  26         margin-top: 18px;
  27         .arrow-up {
  28             margin-left: 487px;
  29         }
  30
  31         .user-notifications {
  32             .notifications-title {
  33                 color: $blue;
  34                 @extend .heading-5-semibold;
  35                 @extend .text-uppercase !optional;
  36                 padding: 13px 20px 10px 20px;
  37                 border-bottom: 1px solid $tlv-light-gray;
  38             }
  39             .notifications-list {
  40                 max-height: 600px;
  41                 overflow-y: auto;
  42                 .notification {
  43                     border-bottom: 1px solid $tlv-light-gray;
  44                     padding: 16px 20px 18px 20px;
  45                     display: flex;
  46                     &.unread {
  47                         background-color: lighten($gray, 38%);
  48                         .item-name {
  49                             display: flex;
  50                             @include base-font-bold;
  51                         }
  52                         .unread-circle-icon {
  53                             width: 8px;
  54                             height: 8px;
  55                             border-radius: 50%;
  56                             background-color: $blue;
  57                             align-self: center;
  58                             margin-bottom: 3px;
  59                             margin-left: 9px;
  60                         }
  61                     }
  62                     .notification-data {
  63                         width: 366px;
  64                         margin-right: 30px;
  65                         color: $dark-gray;
  66                         .item-name {
  67                             @extend .body-2-semibold;
  68                             @extend .text-uppercase !optional;
  69                             margin-bottom: 6px;
  70                         }
  71                         .flex-items {
  72                             display: flex;
  73                             margin: 6px 0 11px 0;
  74                             @extend .body-3;
  75                             line-height: 20px;
  76                             @extend .text-uppercase !optional;
  77                             color: $gray;
  78                             .separator {
  79                                 border-left: 1px solid $dark-gray;
  80                                 margin: 5px 8px;
  81                             }
  82                         }
  83                         .description {
  84                             @extend .body-3;
  85                             margin: 11px 0 8px 0;
  86                             .more-less {
  87                                 font-size: $icon-font-size;
  88                                 color: $blue;
  89                             }
  90                         }
  91                         .date {
  92                             font-size: $icon-font-size;
  93                             @include base-font-regular;
  94                             color: $gray;
  95                             margin-top: 8px;
  96                         }
  97                     }
  98
  99                     .notification-action .action-button {
 100                         @extend .clickable;
 101                         width: 74px;
 102                         height: 28px;
 103                         color: $white;
 104                         background-color: $blue;
 105                         border-radius: 2px;
 106                         text-align: center;
 107                         line-height: 2;
 108                         margin-top: 4px;
 109                         &.active {
 110                             background-color: $action-button-active-bg;
 111                             border: solid 1px $action-button-active-border;
 112                         }
 113                         &:hover {
 114                             background-color: $action-button-hover-bg;
 115                             border: solid 1px $action-button-hover-border;
 116                         }
 117                     }
 118                 }
 119             }
 120         }
 121     }
 122 }