diff options
Diffstat (limited to 'openecomp-ui/resources/scss/components/_listEditorView.scss')
| -rw-r--r-- | openecomp-ui/resources/scss/components/_listEditorView.scss | 284 |
1 files changed, 141 insertions, 143 deletions
diff --git a/openecomp-ui/resources/scss/components/_listEditorView.scss b/openecomp-ui/resources/scss/components/_listEditorView.scss index 354a6a1f70..9bda78e007 100644 --- 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; + } + } } - } } - } } |