diff options
Diffstat (limited to 'openecomp-ui/resources/scss/modules/_vspHeatSetup.scss')
| -rw-r--r-- | openecomp-ui/resources/scss/modules/_vspHeatSetup.scss | 550 |
1 files changed, 273 insertions, 277 deletions
diff --git a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss index bd216c794b..e50ad2ddd7 100644 --- a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss +++ b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss @@ -1,282 +1,278 @@ @mixin modules-and-artifacts-list-items { - background-color: $tlv-gray; - margin-bottom: 12px; - border: 1px solid $light-gray; - border-left-width: 18px; - border-left-color: $blue; - display: flex; - flex-direction: column; - justify-content: space-between; - padding: 10px 20px 0 20px; + background-color: $tlv-gray; + margin-bottom: 12px; + border: 1px solid $light-gray; + border-left-width: 18px; + border-left-color: $blue; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 10px 20px 0 20px; } .heat-setup-view { - margin-top: 20px; - display: flex; - justify-content: space-between; - padding: 0 60px 0 36px; - - .heat-setup-view-modules-and-artifacts { - margin-right: 20px; - flex: 1; - .heat-setup-module-icon { - margin: 0 6px 0 0; - position: relative; - top: -2px; - } - - .modules-list-wrapper { - &.modules-list-wrapper-divider { - border-bottom: 1px solid $tlv-light-gray; - } - - ul { - .undefined-dragging { - opacity: 0.5; - } - .modules-list-item-selectors { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - padding-bottom: 3px; - .Select-value-label { - @include ellipsis(85%); - } - - .validation-input-wrapper { - flex-basis: 48%; - } - - .control-label { - margin-bottom: 4px; - } - - .form-group { - margin-bottom: 12px; - } - } - } - - .modules-list-item-controllers { - display: flex; - justify-content: space-between; - margin-bottom: 7px; - - .btn { - min-width: 0; - } - - .svg-icon { - &.__trashO { - fill: $dark-gray; - &:hover { - fill: $black; - } - } - } - - .module-title-by-type { - @extend .heading-5-semibold; - margin-right: 3px; - } - .modules-list-item-filename { - display: flex; - align-items: center; - - .svg-icon { - &.__pencil { - margin-left: 3px; - opacity: 0; - } - } - - - - .filename-text { - @extend .heading-5-semibold; - - } - - .text-and-icon { - padding: 5px; - border: 1px solid transparent; - display: flex; - align-items: center; - height: 35px; - &.in-edit { - padding: 0; - .name-edit { - padding: 4px; - @extend .heading-5-semibold; - height: 100%; - border: 1px solid $light-gray; - width: 400px; - } - } - } - - input[disabled] { - border: none; - } - &:hover { - .text-and-icon { - border-color: $light-gray; - background-color: $white; - - &.in-edit { - border-color: transparent; - } - } - .svg-icon { - &.__pencil { - margin-left: 10px; - opacity: 1; - .svg-icon { - stroke: $dark-gray; - &:hover { - stroke: $black; - } - } - } - } - } - } - } - - .modules-list-item { - @include modules-and-artifacts-list-items; - position: relative; - .Select-option { - @extend .body-1; - &.is-selected { - @extend .body-1-semibold; - background-color: $white; - } - &.is-focused { - background-color: $blue; - color: $white; - } - } - .add-or-delete-volumes { - margin-right: 8px; - margin-bottom: 11px; - } - &:before { - content: "\00B7\00B7\00B7\00B7\00B7\00B7"; - color: $white; - position: absolute; - left: -27px; - top: 56%; - font-size: 27px; - width: 75px; - @include transform-rotate(90); - height: 0; - letter-spacing: 1px; - } - } - } - - .artifact-files { - @include modules-and-artifacts-list-items; - &.with-list-items { - margin-top: 10px; - } - - &.nested { - .nested-list { - display: flex; - flex-wrap: wrap; - margin-bottom: 18px; - } - - .nested-list-item { - border-radius: 15px; - background-color: $tlv-light-gray; - padding: 4px 15px; - margin: 2px 10px 2px 0; - } - } - - .artifact-files-header { - @extend .heading-5-semibold; - display: flex; - margin-bottom: 10px; - justify-content: space-between; - .image-icon.artifacts { - margin-right: 10px; - } - - span { - display: flex; - } - - } - } - } - - .modules-list-header { - height: 30px; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-end; - align-items: baseline; - } - - .unassigned-files { - border: 1px solid $light-gray; - background-color: $white; - height: 250px; - width: 250px; - - // Will work in chrome from chrome 56 - position: sticky; - top: 10px; - - .unassigned-files-title { - @extend .heading-5-semibold; - background-color: $tlv-gray; - padding: 11px 0 9px 15px; - } - - .unassigned-files-list { - height: 207px; - overflow-y: auto; - padding-bottom: 5px; - - .go-to-validation-button-wrapper { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-top: 70px; - .all-files-assigned { - @extend .heading-4; - margin-bottom: 10px; - } - .svg-icon-wrapper { - margin-bottom: 10px; - .svg-icon { - &.__angleRight { - width: 10px; - height: 10px; - } - } - } - } - - .unassigned-files-list-item { - @include ellipsis(); - border-bottom: 1px solid $tlv-light-gray; - padding: 0 5px 5px 15px; - &:first-child { - padding-top: 5px; - } - &:last-child { - border-bottom: none; - padding-bottom: 0; - } - } - } - } + margin-top: 20px; + display: flex; + justify-content: space-between; + padding: 0 60px 0 36px; + + .heat-setup-view-modules-and-artifacts { + margin-right: 20px; + flex: 1; + .heat-setup-module-icon { + margin: 0 6px 0 0; + position: relative; + top: -2px; + } + + .modules-list-wrapper { + &.modules-list-wrapper-divider { + border-bottom: 1px solid $tlv-light-gray; + } + + ul { + .undefined-dragging { + opacity: 0.5; + } + .modules-list-item-selectors { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding-bottom: 3px; + .Select-value-label { + @include ellipsis(85%); + } + + .validation-input-wrapper { + flex-basis: 48%; + } + + .control-label { + margin-bottom: 4px; + } + + .form-group { + margin-bottom: 12px; + } + } + } + + .modules-list-item-controllers { + display: flex; + justify-content: space-between; + margin-bottom: 7px; + + .btn { + min-width: 0; + } + + .svg-icon { + &.__trashO { + fill: $dark-gray; + &:hover { + fill: $black; + } + } + } + + .module-title-by-type { + @extend .heading-5-semibold; + margin-right: 3px; + } + .modules-list-item-filename { + display: flex; + align-items: center; + + .svg-icon { + &.__pencil { + margin-left: 3px; + opacity: 0; + } + } + + .filename-text { + @extend .heading-5-semibold; + } + + .text-and-icon { + padding: 5px; + border: 1px solid transparent; + display: flex; + align-items: center; + height: 35px; + &.in-edit { + padding: 0; + .name-edit { + padding: 4px; + @extend .heading-5-semibold; + height: 100%; + border: 1px solid $light-gray; + width: 400px; + } + } + } + + input[disabled] { + border: none; + } + &:hover { + .text-and-icon { + border-color: $light-gray; + background-color: $white; + + &.in-edit { + border-color: transparent; + } + } + .svg-icon { + &.__pencil { + margin-left: 10px; + opacity: 1; + .svg-icon { + stroke: $dark-gray; + &:hover { + stroke: $black; + } + } + } + } + } + } + } + + .modules-list-item { + @include modules-and-artifacts-list-items; + position: relative; + .Select-option { + @extend .body-1; + &.is-selected { + @extend .body-1-semibold; + background-color: $white; + } + &.is-focused { + background-color: $blue; + color: $white; + } + } + .add-or-delete-volumes { + margin-right: 8px; + margin-bottom: 11px; + } + &:before { + content: '\00B7\00B7\00B7\00B7\00B7\00B7'; + color: $white; + position: absolute; + left: -27px; + top: 56%; + font-size: 27px; + width: 75px; + @include transform-rotate(90); + height: 0; + letter-spacing: 1px; + } + } + } + + .artifact-files { + @include modules-and-artifacts-list-items; + &.with-list-items { + margin-top: 10px; + } + + &.nested { + .nested-list { + display: flex; + flex-wrap: wrap; + margin-bottom: 18px; + } + + .nested-list-item { + border-radius: 15px; + background-color: $tlv-light-gray; + padding: 4px 15px; + margin: 2px 10px 2px 0; + } + } + + .artifact-files-header { + @extend .heading-5-semibold; + display: flex; + margin-bottom: 10px; + justify-content: space-between; + .image-icon.artifacts { + margin-right: 10px; + } + + span { + display: flex; + } + } + } + } + + .modules-list-header { + height: 30px; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-end; + align-items: baseline; + } + + .unassigned-files { + border: 1px solid $light-gray; + background-color: $white; + height: 250px; + width: 250px; + + // Will work in chrome from chrome 56 + position: sticky; + top: 10px; + + .unassigned-files-title { + @extend .heading-5-semibold; + background-color: $tlv-gray; + padding: 11px 0 9px 15px; + } + + .unassigned-files-list { + height: 207px; + overflow-y: auto; + padding-bottom: 5px; + + .go-to-validation-button-wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 70px; + .all-files-assigned { + @extend .heading-4; + margin-bottom: 10px; + } + .svg-icon-wrapper { + margin-bottom: 10px; + .svg-icon { + &.__angleRight { + width: 10px; + height: 10px; + } + } + } + } + + .unassigned-files-list-item { + @include ellipsis(); + border-bottom: 1px solid $tlv-light-gray; + padding: 0 5px 5px 15px; + &:first-child { + padding-top: 5px; + } + &:last-child { + border-bottom: none; + padding-bottom: 0; + } + } + } + } } |