aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/resources/scss/modules/_vspHeatSetup.scss')
-rw-r--r--openecomp-ui/resources/scss/modules/_vspHeatSetup.scss316
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;
+ }
+ }
+ }
+ }
+}