diff options
Diffstat (limited to 'openecomp-ui/resources/scss/modules/_vspHeatSetup.scss')
| -rw-r--r-- | openecomp-ui/resources/scss/modules/_vspHeatSetup.scss | 316 |
1 files changed, 316 insertions, 0 deletions
diff --git a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss new file mode 100644 index 0000000000..59e983686b --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss @@ -0,0 +1,316 @@ +@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; +} + +.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 { + padding-bottom: 20px; + margin-bottom: 20px; + 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; + + .Select-value-label { + @include ellipsis(85%); + } + + .validation-input-wrapper { + flex-basis: 48%; + } + + .control-label { + margin-bottom: 4px; + } + + .form-group { + margin-bottom: 12px; + } + } + } + + .modules-list-controllers { + text-align: right; + .btn-link { + &[disabled] { + color: $gray; + } + @extend .body-1; + color: $blue; + &:last-child { + padding-right: 0; + } + &:hover { + color: $dark-blue; + text-decoration: none; + } + } + } + + .modules-list-item-controllers { + display: flex; + justify-content: space-between; + margin-bottom: 7px; + + .btn { + min-width: 0; + } + + .svg-icon.trash-o { + fill: $dark-gray; + height: 18px; + width: 18px; + &:hover { + fill: $black; + } + } + .module-title-by-type { + @extend .heading-5-medium; + margin-right: 3px; + } + .modules-list-item-filename { + display: flex; + align-items: center; + + .svg-icon.pencil { + height: 15px; + width: 15px; + margin-left: 3px; + opacity: 0; + } + + .filename-text { + @extend .heading-5-medium; + + } + + .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-medium; + 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; + 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-medium; + background-color: $white; + } + &.is-focused { + background-color: $blue; + color: $white; + } + } + .add-or-delete-volumes { + .svg-icon-wrapper { + margin-right: 8px; + .svg-icon { + height: 10px; + width: 10px; + fill: $blue; + } + } + cursor: pointer; + color: $blue; + margin-bottom: 11px; + &:hover { + color: $dark-blue; + .svg-icon { + fill: $dark-blue; + } + } + } + &: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; + margin-top: 20px; + + &.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-medium; + display: flex; + margin-bottom: 10px; + justify-content: space-between; + .image-icon.artifacts { + margin-right: 10px; + } + + span { + display: flex; + } + + .add-all-unassigned { + @extend .body-1; + margin-bottom: 0; + color: $blue; + cursor: pointer; + &:hover { + color: $dark-blue; + } + } + } + } + } + + .unassigned-files { + margin-top: 30px; + border: 1px solid $light-gray; + width: 25%; + background-color: $white; + height: 250px; + width: 250px; + + // Will work in chrome from chrome 56 + position: sticky; + top: 10px; + + .unassigned-files-title { + @extend .heading-5-medium; + 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; + } + .link { + color: $blue; + cursor: pointer; + display: flex; + align-items: center; + margin-bottom: 10px; + .svg-icon.angle-right { + height: 10px; + width: 10px; + margin-left: 7px; + fill: $blue; + } + &:hover { + color: $dark-blue; + .svg-icon.angle-right { + fill: $dark-blue; + } + } + } + } + + .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; + } + } + } + } +} |