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         overflow-y: hidden;
  27   }
  28   .activity-list-item {
  29         display: flex;
  30         height: 36px;
  31         @extend .body-1;
  32         &.header {
  33           @extend .body-1-semibold;
  34           background-color: $tlv-light-gray;
  35           color: $text-black;
  36         }
  37   }
  38
  39   .activity-status {
  40         .svg-icon-wrapper {
  41           float: right;
  42         }
  43
  44         .status-icon.false:after {
  45           @include status-icon-class;
  46           float: right;
  47           background-color: $red;
  48           content: "!";
  49         }
  50   }
  51
  52   .message-further-info-icon {
  53         @include status-icon-class;
  54         background-color: $gray;
  55   }
  56
  57   .table-cell {
  58         border-right: 1px solid $light-gray;
  59         border-bottom: 1px solid $light-gray;
  60         &:last-child {
  61           border-right: none;
  62         }
  63         flex-basis: 20%;
  64         display: flex;
  65         padding: 0 20px;
  66         justify-content: center;
  67         flex-direction: column;
  68         &.activity-comment {
  69           min-width: 0;
  70           span {
  71                 @include ellipsis(100%);
  72           }
  73         }
  74   }
  75
  76   .date-header {
  77         cursor: pointer;
  78         display: flex;
  79         align-items: center;
  80         .header-sort-arrow {
  81           width: 0;
  82           height: 0;
  83           border-left: 5px solid transparent;
  84           border-right: 5px solid transparent;
  85           margin-left: 9px;
  86           &.up {
  87                 border-bottom: 5px solid $black;
  88           }
  89           &.down {
  90                 border-top: 5px solid $black;
  91           }
  92
  93         }
  94   }
  95
  96   .date-cell {
  97         display: flex;
  98         justify-content: space-between;
  99   }
 100
 101 }