react 16 upgrade

[sdc.git] / openecomp-ui / resources / scss / components / _listEditorView.scss

diff --git a/openecomp-ui/resources/scss/components/_listEditorView.scss b/openecomp-ui/resources/scss/components/_listEditorView.scss
index 354a6a1..9bda78e 100644 (file)
--- a/openecomp-ui/resources/scss/components/_listEditorView.scss
+++ b/openecomp-ui/resources/scss/components/_listEditorView.scss
@@ -1,162 +1,160 @@
 .list-editor-view {
-  @extend .flex-column;
-  background-color: $content-background-color;
-
-  .expandble-search-wrapper {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 10px;
-  }
-
-  .list-editor-view-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    border-bottom: 1px solid $light-gray;
-    padding-bottom: 5px;
-    .list-editor-view-title {
-      @extend .heading-3-semibold;
-    }
-  }
-
-  .list-editor-view-list-scroller {
-    @extend .flex;
-    overflow: auto;
-    margin: 18px 0 30px 0;
-  }
-
-  .list-editor-view-list {
     @extend .flex-column;
+    background-color: $content-background-color;
 
-    .list-editor-item-view {
-      margin: 8px 0;
-      border: 1px solid $light-gray;
-      background-color: $white;
-      display: flex;
-      min-height: 100px;
-      overflow: hidden;
-      .list-editor-item-view-content {
-        padding: 10px 28px;
+    .expandble-search-wrapper {
         display: flex;
-        flex: 1 1;
-        .list-editor-item-view-field {
-          flex: 1 1;
-          color: $black;
-          padding: 0;
-          @include ellipsis;
-          overflow-wrap: break-word;
-          white-space: initial;
-
+        justify-content: flex-end;
+        margin-top: 10px;
+    }
 
-          .number-field {
-            align-content: center;
-          }
-          .title {
-            @extend .body-1;
-            padding-bottom: 5px;
-            &:not(:first-child) {
-              line-height: 0.9;
-            }
-          }
-          .description {
-            @include multiline-ellipsis(1.3em, 3);
-          }
-          .text {
-            @extend .body-1;
-          }
-          .textEllipses {
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            padding-right: 5px;
-          }
-        }
-      }
-      .list-editor-item-view-controller {
+    .list-editor-view-header {
         display: flex;
-        flex-basis: 5%;
-        align-self: center;
-        justify-content: center;
-        flex-direction: column;
-        .svg-icon-wrapper {
-          &:first-child {
-            margin-bottom: 10px;
-          }
-        }
-        .svg-icon {
-          margin-top: 5px;
-          transition: fill .3s;
-          fill: $white;
-        }
-      }
-      &.selectable:hover{
-        @extend .box-hover;
-        cursor: pointer;
-        .list-editor-item-view-controller {
-          .svg-icon {
-            fill: $dark-gray;
-            &:hover {
-              fill: $black;
-            }
-          }
+        justify-content: space-between;
+        align-items: flex-end;
+        border-bottom: 1px solid $light-gray;
+        padding-bottom: 5px;
+        .list-editor-view-title {
+            @extend .heading-3-semibold;
         }
-      }
     }
-    &.two-columns {
 
-      flex-direction: row;
-      flex-wrap: wrap;
+    .list-editor-view-list-scroller {
+        @extend .flex;
+        overflow: auto;
+        margin: 18px 0 30px 0;
+    }
+
+    .list-editor-view-list {
+        @extend .flex-column;
 
-      .list-editor-item-view {
-        .list-editor-item-view-content {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          padding: 10px 18px 10px 0;
-          .list-editor-item-view-field {
-            flex: 0.3 1;
+        .list-editor-item-view {
+            margin: 8px 0;
+            border: 1px solid $light-gray;
+            background-color: $white;
             display: flex;
-            justify-content: center;
-            flex-direction: column;
-            height: 100%;
-            border-right : 1px solid $light-gray;
-            margin-left: 18px;
-            &:last-child{
-              border: none;
-              flex: 1;
-            }
-            .details{
-              display: flex;
-              flex-direction: row;
-              .title {
-                padding: 0;
-                margin-right: 5px;
-              }
-            }
+            min-height: 100px;
+            overflow: hidden;
+            .list-editor-item-view-content {
+                padding: 10px 28px;
+                display: flex;
+                flex: 1 1;
+                .list-editor-item-view-field {
+                    flex: 1 1;
+                    color: $black;
+                    padding: 0;
+                    @include ellipsis;
+                    overflow-wrap: break-word;
+                    white-space: initial;
 
-            .details-col{
-              flex-direction: column;
-              .title {
-                padding-bottom: 0;
-              }
+                    .number-field {
+                        align-content: center;
+                    }
+                    .title {
+                        @extend .body-1;
+                        padding-bottom: 5px;
+                        &:not(:first-child) {
+                            line-height: 0.9;
+                        }
+                    }
+                    .description {
+                        @include multiline-ellipsis(1.3em, 3);
+                    }
+                    .text {
+                        @extend .body-1;
+                    }
+                    .textEllipses {
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                        padding-right: 5px;
+                    }
+                }
             }
-
-            .description {
-              @extend .body-1;
-              @include multiline-ellipsis(1.3em, 3);
+            .list-editor-item-view-controller {
+                display: flex;
+                flex-basis: 5%;
+                align-self: center;
+                justify-content: center;
+                flex-direction: column;
+                .svg-icon-wrapper {
+                    &:first-child {
+                        margin-bottom: 10px;
+                    }
+                }
+                .svg-icon {
+                    margin-top: 5px;
+                    transition: fill 0.3s;
+                    fill: $white;
+                }
+            }
+            &.selectable:hover {
+                @extend .box-hover;
+                cursor: pointer;
+                .list-editor-item-view-controller {
+                    .svg-icon {
+                        fill: $dark-gray;
+                        &:hover {
+                            fill: $black;
+                        }
+                    }
+                }
             }
-          }
         }
+        &.two-columns {
+            flex-direction: row;
+            flex-wrap: wrap;
 
-        &:nth-child(odd){
-          flex: 0 0 48.5%;
-          margin-right: 50px;
-        }
-        &:nth-child(even) {
-          flex: 1;
-          margin-right: 0;
+            .list-editor-item-view {
+                .list-editor-item-view-content {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    padding: 10px 18px 10px 0;
+                    .list-editor-item-view-field {
+                        flex: 0.3 1;
+                        display: flex;
+                        justify-content: center;
+                        flex-direction: column;
+                        height: 100%;
+                        border-right: 1px solid $light-gray;
+                        margin-left: 18px;
+                        &:last-child {
+                            border: none;
+                            flex: 1;
+                        }
+                        .details {
+                            display: flex;
+                            flex-direction: row;
+                            .title {
+                                padding: 0;
+                                margin-right: 5px;
+                            }
+                        }
+
+                        .details-col {
+                            flex-direction: column;
+                            .title {
+                                padding-bottom: 0;
+                            }
+                        }
+
+                        .description {
+                            @extend .body-1;
+                            @include multiline-ellipsis(1.3em, 3);
+                        }
+                    }
+                }
+
+                &:nth-child(odd) {
+                    flex: 0 0 48.5%;
+                    margin-right: 50px;
+                }
+                &:nth-child(even) {
+                    flex: 1;
+                    margin-right: 0;
+                }
+            }
         }
-      }
     }
-  }
 }