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

   1 $message-info-icon-size: 16px;
   2
   3 @mixin status-icon-class {
   4   @extend .body-1-light;
   5   width: $message-info-icon-size;
   6   height: $message-info-icon-size;
   7   margin-left: 8px;
   8   color: $white;
   9   border-radius: $message-info-icon-size / 2;
  10   display: inline-block;
  11   text-align: center;
  12 }
  13
  14 .activity-log-view {
  15
  16   .list-editor-view .list-editor-view-header {
  17         border: none;
  18         .list-editor-view-title {
  19           @extend .heading-1;
  20           color: $blue;
  21         }
  22   }
  23   .list-editor-view-list {
  24         border: 1px solid $light-gray;
  25         border-bottom: none;
  26   }
  27   .activity-list-item {
  28         display: flex;
  29         height: 36px;
  30         @extend .body-1;
  31         &.header {
  32           @extend .body-1-semibold;
  33           background-color: $tlv-light-gray;
  34           color: $text-black;
  35         }
  36   }
  37
  38   .activity-status {
  39         .svg-icon-wrapper {
  40           float: right;
  41         }
  42         .checkCircle {
  43           fill: $green;
  44           width: 16px;
  45           height: 16px;
  46         }
  47         .status-icon.false:after {
  48           @include status-icon-class;
  49           float: right;
  50           background-color: $red;
  51           content: "!";
  52         }
  53   }
  54
  55   .message-further-info-icon {
  56         @include status-icon-class;
  57         background-color: $gray;
  58   }
  59
  60   .table-cell {
  61         border-right: 1px solid $light-gray;
  62         border-bottom: 1px solid $light-gray;
  63         &:last-child {
  64           border-right: none;
  65         }
  66         flex-basis: 20%;
  67         display: flex;
  68         padding: 0 20px;
  69         justify-content: center;
  70         flex-direction: column;
  71         &.activity-comment {
  72           min-width: 0;
  73           span {
  74                 @include ellipsis(100%);
  75           }
  76         }
  77   }
  78
  79   .date-header {
  80         cursor: pointer;
  81         display: flex;
  82         align-items: center;
  83         .header-sort-arrow {
  84           width: 0;
  85           height: 0;
  86           border-left: 5px solid transparent;
  87           border-right: 5px solid transparent;
  88           margin-left: 9px;
  89           &.up {
  90                 border-bottom: 5px solid $black;
  91           }
  92           &.down {
  93                 border-top: 5px solid $black;
  94           }
  95
  96         }
  97   }
  98
  99   .date-cell {
 100         display: flex;
 101         justify-content: space-between;
 102   }
 103
 104 }