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     .list-editor-view .list-editor-view-header {
  16         border: none;
  17         .list-editor-view-title {
  18             @extend .heading-1;
  19             color: $blue;
  20         }
  21     }
  22     .list-editor-view-list {
  23         border: 1px solid $light-gray;
  24         border-bottom: none;
  25         overflow-y: hidden;
  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
  43         .status-icon.false:after {
  44             @include status-icon-class;
  45             float: right;
  46             background-color: $red;
  47             content: '!';
  48         }
  49     }
  50
  51     .message-further-info-icon {
  52         @include status-icon-class;
  53         background-color: $gray;
  54     }
  55
  56     .table-cell {
  57         border-right: 1px solid $light-gray;
  58         border-bottom: 1px solid $light-gray;
  59         &:last-child {
  60             border-right: none;
  61         }
  62         flex-basis: 20%;
  63         display: flex;
  64         padding: 0 20px;
  65         justify-content: center;
  66         flex-direction: column;
  67         &.activity-comment {
  68             min-width: 0;
  69             span {
  70                 @include ellipsis(100%);
  71             }
  72         }
  73     }
  74
  75     .date-header {
  76         cursor: pointer;
  77         display: flex;
  78         align-items: center;
  79         .header-sort-arrow {
  80             width: 0;
  81             height: 0;
  82             border-left: 5px solid transparent;
  83             border-right: 5px solid transparent;
  84             margin-left: 9px;
  85             &.up {
  86                 border-bottom: 5px solid $black;
  87             }
  88             &.down {
  89                 border-top: 5px solid $black;
  90             }
  91         }
  92     }
  93
  94     .date-cell {
  95         display: flex;
  96         justify-content: space-between;
  97     }
  98 }