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

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