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

   1 .list-editor-view {
   2     @extend .flex-column;
   3     background-color: $content-background-color;
   4
   5     .expandble-search-wrapper {
   6         display: flex;
   7         justify-content: flex-end;
   8         margin-top: 10px;
   9     }
  10
  11     .list-editor-view-header {
  12         display: flex;
  13         justify-content: space-between;
  14         align-items: flex-end;
  15         border-bottom: 1px solid $light-gray;
  16         padding-bottom: 5px;
  17         .list-editor-view-title {
  18             @extend .heading-3-semibold;
  19         }
  20     }
  21
  22     .list-editor-view-list-scroller {
  23         @extend .flex;
  24         overflow: auto;
  25         margin: 18px 0 30px 0;
  26     }
  27
  28     .list-editor-view-list {
  29         @extend .flex-column;
  30
  31         .list-editor-item-view {
  32             margin: 8px 0;
  33             border: 1px solid $light-gray;
  34             background-color: $white;
  35             display: flex;
  36             min-height: 100px;
  37             overflow: hidden;
  38             .list-editor-item-view-content {
  39                 padding: 10px 28px;
  40                 display: flex;
  41                 flex: 1 1;
  42                 .list-editor-item-view-field {
  43                     flex: 1 1;
  44                     color: $black;
  45                     padding: 0;
  46                     @include ellipsis;
  47                     overflow-wrap: break-word;
  48                     white-space: initial;
  49
  50                     .number-field {
  51                         align-content: center;
  52                     }
  53                     .title {
  54                         @extend .body-1;
  55                         padding-bottom: 5px;
  56                         &:not(:first-child) {
  57                             line-height: 0.9;
  58                         }
  59                     }
  60                     .description {
  61                         @include multiline-ellipsis(1.3em, 3);
  62                     }
  63                     .text {
  64                         @extend .body-1;
  65                     }
  66                     .textEllipses {
  67                         white-space: nowrap;
  68                         text-overflow: ellipsis;
  69                         overflow: hidden;
  70                         padding-right: 5px;
  71                     }
  72                 }
  73             }
  74             .list-editor-item-view-controller {
  75                 display: flex;
  76                 flex-basis: 5%;
  77                 align-self: center;
  78                 justify-content: center;
  79                 flex-direction: column;
  80                 .svg-icon-wrapper {
  81                     &:first-child {
  82                         margin-bottom: 10px;
  83                     }
  84                 }
  85                 .svg-icon {
  86                     margin-top: 5px;
  87                     transition: fill 0.3s;
  88                     fill: $white;
  89                 }
  90             }
  91             &.selectable:hover {
  92                 @extend .box-hover;
  93                 cursor: pointer;
  94                 .list-editor-item-view-controller {
  95                     .svg-icon {
  96                         fill: $dark-gray;
  97                         &:hover {
  98                             fill: $black;
  99                         }
 100                     }
 101                 }
 102             }
 103         }
 104         &.two-columns {
 105             flex-direction: row;
 106             flex-wrap: wrap;
 107
 108             .list-editor-item-view {
 109                 .list-editor-item-view-content {
 110                     display: flex;
 111                     flex-direction: row;
 112                     align-items: center;
 113                     padding: 10px 18px 10px 0;
 114                     .list-editor-item-view-field {
 115                         flex: 0.3 1;
 116                         display: flex;
 117                         justify-content: center;
 118                         flex-direction: column;
 119                         height: 100%;
 120                         border-right: 1px solid $light-gray;
 121                         margin-left: 18px;
 122                         &:last-child {
 123                             border: none;
 124                             flex: 1;
 125                         }
 126                         .details {
 127                             display: flex;
 128                             flex-direction: row;
 129                             .title {
 130                                 padding: 0;
 131                                 margin-right: 5px;
 132                             }
 133                         }
 134
 135                         .details-col {
 136                             flex-direction: column;
 137                             .title {
 138                                 padding-bottom: 0;
 139                             }
 140                         }
 141
 142                         .description {
 143                             @extend .body-1;
 144                             @include multiline-ellipsis(1.3em, 3);
 145                         }
 146                     }
 147                 }
 148
 149                 &:nth-child(odd) {
 150                     flex: 0 0 48.5%;
 151                     margin-right: 50px;
 152                 }
 153                 &:nth-child(even) {
 154                     flex: 1;
 155                     margin-right: 0;
 156                 }
 157             }
 158         }
 159     }
 160 }