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