aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/modules
diff options
context:
space:
mode:
authorEinav Weiss Keidar <einavw@amdocs.com>2018-08-13 16:19:46 +0300
committerAvi Gaffa <avi.gaffa@amdocs.com>2019-02-11 13:50:22 +0000
commit1801b24389baa8e3f7298ff2c41e2512b19c1290 (patch)
treed3d2a15f53aa28698280d609548298d177f9280d /openecomp-ui/resources/scss/modules
parentaf8e36eb7f43803bd9cf40e9b46a0c0c8f47c781 (diff)
react 16 upgrade
Issue-ID: SDC-1762 Change-Id: I7701f12fc63bb09f8c985c7c893b984701dcbfab Signed-off-by: Einav Keidar <einavw@amdocs.com>
Diffstat (limited to 'openecomp-ui/resources/scss/modules')
-rw-r--r--openecomp-ui/resources/scss/modules/_entitlementPools.scss58
-rw-r--r--openecomp-ui/resources/scss/modules/_featureGroup.scss69
-rw-r--r--openecomp-ui/resources/scss/modules/_licenseAgreement.scss42
-rw-r--r--openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss49
-rw-r--r--openecomp-ui/resources/scss/modules/_licenseModel.scss85
-rw-r--r--openecomp-ui/resources/scss/modules/_licenseModelLimits.scss263
-rw-r--r--openecomp-ui/resources/scss/modules/_licenseModelOverview.scss902
-rw-r--r--openecomp-ui/resources/scss/modules/_mergeEditor.scss384
-rw-r--r--openecomp-ui/resources/scss/modules/_onboardingCatalog.scss118
-rw-r--r--openecomp-ui/resources/scss/modules/_permissions.scss101
-rw-r--r--openecomp-ui/resources/scss/modules/_revisions.scss102
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss475
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss6
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss20
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss98
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss136
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss10
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss40
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss55
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss76
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss491
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss98
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss64
-rw-r--r--openecomp-ui/resources/scss/modules/_uploadScreen.scss52
-rw-r--r--openecomp-ui/resources/scss/modules/_versionsPage.scss689
-rw-r--r--openecomp-ui/resources/scss/modules/_vspComponentCompute.scss6
-rw-r--r--openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss38
-rw-r--r--openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss77
-rw-r--r--openecomp-ui/resources/scss/modules/_vspHeatSetup.scss550
-rw-r--r--openecomp-ui/resources/scss/modules/_workflows.scss38
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss2
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss62
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss68
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss277
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss138
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss60
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss24
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss38
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss168
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss8
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss145
41 files changed, 3013 insertions, 3169 deletions
diff --git a/openecomp-ui/resources/scss/modules/_entitlementPools.scss b/openecomp-ui/resources/scss/modules/_entitlementPools.scss
index 06ef4d21fd..736927fb51 100644
--- a/openecomp-ui/resources/scss/modules/_entitlementPools.scss
+++ b/openecomp-ui/resources/scss/modules/_entitlementPools.scss
@@ -1,37 +1,37 @@
-
-.entitlement-pools-list-editor {
+.entitlement-pools-list-editor {
.list-editor-item-view-field {
-
- .entitlement-pools-count {
- @extend .heading-1;
- color: $purple;
+ .entitlement-pools-count {
+ @extend .heading-1;
+ color: $purple;
+ }
}
- }
}
.entitlement-pools-modal {
- .entitlement-pools-form {
- .threshold-section, .date-section {
- display: flex;
- justify-content: space-between;
- .validation-input-wrapper {
- flex: 0 0 46%;
- }
- }
- .uuid-row-wrapper {
- display: flex;
- .separator{
- margin-left: 30px;
- margin-right: 30px;
- height: 35px;
- border: 1px solid $tlv-light-gray;
- }
- .uuid-container {
- .uuid-value {
- @extend .body-3;
- user-select: text;
+ .entitlement-pools-form {
+ .threshold-section,
+ .date-section {
+ display: flex;
+ justify-content: space-between;
+ .validation-input-wrapper {
+ flex: 0 0 46%;
+ }
+ }
+ .uuid-row-wrapper {
+ display: flex;
+ margin-top: 20px;
+ .separator {
+ margin-left: 30px;
+ margin-right: 30px;
+ height: 35px;
+ border: 1px solid $tlv-light-gray;
+ }
+ .uuid-container {
+ .uuid-value {
+ @extend .body-3;
+ user-select: text;
+ }
+ }
}
- }
}
- }
}
diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss
index cf681b8758..375bb2c08e 100644
--- a/openecomp-ui/resources/scss/modules/_featureGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss
@@ -1,41 +1,38 @@
.feature-groups-list-editor {
- .list-editor-view{
- .list-editor-view-list {
- .list-editor-item-view {
- min-height: 110px;
- height: 110px;
- }
- .list-editor-item-view-content {
- .list-editor-item-view-field {
- &.smaller-field {
- flex: 0.35;
- }
- .feature-groups-count-field {
- display: inline-block;
- &:first-child {
- margin-right: 95px;
+ .list-editor-view {
+ .list-editor-view-list {
+ .list-editor-item-view {
+ min-height: 110px;
+ height: 110px;
+ }
+ .list-editor-item-view-content {
+ .list-editor-item-view-field {
+ &.smaller-field {
+ flex: 0.35;
+ }
+ .feature-groups-count-field {
+ display: inline-block;
+ &:first-child {
+ margin-right: 95px;
+ }
+ }
+ .feature-groups-count-ep {
+ @extend .heading-1;
+ color: $light-blue;
+ }
+ .feature-groups-mrn-ep {
+ @extend .body-1;
+ color: $light-blue;
+ }
+ .feature-groups-count-lk {
+ @extend .heading-1;
+ color: $light-green;
+ }
+ .title-no-wrap {
+ white-space: nowrap;
+ }
+ }
}
- }
- .feature-groups-count-ep {
- @extend .heading-1;
- color: $light-blue;
- }
- .feature-groups-mrn-ep {
- @extend .body-1;
- color: $light-blue;
- }
- .feature-groups-count-lk {
- @extend .heading-1;
- color: $light-green;
- }
- .title-no-wrap {
- white-space: nowrap;
- }
}
- }
}
- }
}
-
-
-
diff --git a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss
index 579e9bab2b..acde2edcb8 100644
--- a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss
@@ -1,26 +1,24 @@
-
.license-agreement-list-editor {
-
- .list-editor-view-list {
- .list-editor-item-view-field {
- .list-editor-item-view-field-tight {
- vertical-align: top;
- display: inline-block;
- &:first-child {
- @include ellipsis;
- margin-right: 95px;
- width: 20%;
- overflow-wrap: break-word;
+ .list-editor-view-list {
+ .list-editor-item-view-field {
+ .list-editor-item-view-field-tight {
+ vertical-align: top;
+ display: inline-block;
+ &:first-child {
+ @include ellipsis;
+ margin-right: 95px;
+ width: 20%;
+ overflow-wrap: break-word;
+ }
+ }
+ .feature-groups-count,
+ .type {
+ color: $light-green;
+ }
+ .feature-groups-count {
+ @extend .heading-1;
+ padding-top: 2px;
+ }
}
- }
- .feature-groups-count, .type {
- color: $light-green;
- }
- .feature-groups-count {
- @extend .heading-1;
- padding-top: 2px;
- }
-
}
- }
}
diff --git a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
index b7681fef9d..d873c3998c 100644
--- a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
@@ -1,31 +1,32 @@
.license-key-groups-list-editor {
- .list-editor-view-list {
- .list-editor-item-view-field {
-
- .operational-scope, .type {
- color: $orange;
- }
- .operational-scope {
- @include ellipsis;
- }
+ .list-editor-view-list {
+ .list-editor-item-view-field {
+ .operational-scope,
+ .type {
+ color: $orange;
+ }
+ .operational-scope {
+ @include ellipsis;
+ }
+ }
}
- }
}
.license-keygroup-editor {
- .uuid-row-wrapper {
- display: flex;
- .separator{
- margin-left: 30px;
- margin-right: 30px;
- height: 35px;
- border: 1px solid $tlv-light-gray;
- }
- .uuid-container {
- .uuid-value {
- @extend .body-3;
- user-select: text;
- }
+ .uuid-row-wrapper {
+ display: flex;
+ margin-top: 20px;
+ .separator {
+ margin-left: 30px;
+ margin-right: 30px;
+ height: 35px;
+ border: 1px solid $tlv-light-gray;
+ }
+ .uuid-container {
+ .uuid-value {
+ @extend .body-3;
+ user-select: text;
+ }
+ }
}
- }
}
diff --git a/openecomp-ui/resources/scss/modules/_licenseModel.scss b/openecomp-ui/resources/scss/modules/_licenseModel.scss
index e93ea989fd..da43e3e3cf 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModel.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModel.scss
@@ -1,55 +1,42 @@
.license-model-modal {
- .modal-body {
- padding: 0;
- }
- .modal-header {
- border-bottom: none;
- padding-bottom: 30px;
- }
- .sdc-tabs-list {
- padding-left: 50px;
- border-bottom: 1px solid $tlv-light-gray;
- display: flex;
- align-items: baseline;
- }
- .sdc-tab-content {
- margin-top: 0;
- }
- .add-limit-button {
- margin-left: auto;
- margin-right: 50px;
- padding-right: 0;
- text-align: end;
- }
- .license-model-form {
- .validation-form-content, .validation-buttons {
- padding: 20px 50px;
+ .sdc-tabs {
+ margin-top: 20px;
}
- &.license-agreement-form, &.feature-group-form {
- .validation-form-content {
- padding: 0;
- }
- .sdc-tab-content {
- padding: 20px 50px;
- }
- }
- }
- .license-model-modal-buttons {
- padding: 21px 50px;
- display: flex;
- justify-content: flex-end;
- background-color: $tlv-gray;
- margin-top: 2px;
- .sdc-button {
- margin-left: 20px;
+ .sdc-tabs-list {
+ padding-left: 40px;
+ border-bottom: 1px solid $tlv-light-gray;
+ display: flex;
+ align-items: baseline;
+ }
+ .sdc-tab-content {
+ margin-top: 0;
+ }
+ .add-limit-button {
+ margin-left: auto;
+ margin-right: 50px;
+ padding-right: 0;
+ text-align: end;
+ }
+ .license-model-form {
+ &.license-agreement-form,
+ &.feature-group-form {
+ .validation-form-content {
+ padding: 0;
+ }
+ .sdc-tab-content {
+ padding: 20px 40px;
+ .dual-list-box {
+ margin: 0;
+ }
+ }
+ }
}
- }
}
.license-model-list-editor {
- .list-editor-view-list {
- .list-editor-item-view {
- min-height: 110px;
- height: 110px;
- }
- }
+ .list-editor-view-list {
+ .list-editor-item-view {
+ min-height: 110px;
+ height: 110px;
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss b/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss
index 16b6af7cf9..794ed388e4 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss
@@ -1,133 +1,132 @@
.license-model-limits-view {
- max-height: 490px;
- overflow: auto;
-
- .limit-editor-title {
- padding: 10px 50px;
- background-color: $blue;
- color: $white;
-
- }
- .list-editor-view-add-title {
- margin-right: 20px;
- }
-
- .no-limits-text {
- padding-left: 50px;
- }
-
- .list-editor-view {
- .list-editor-view-header {
- border-bottom: none;
- padding-top: 30px;
- padding-bottom: 0;
- }
-
- .list-editor-view-list-scroller {
- margin-top: 0;
- margin-bottom: 30px;
- }
- .list-editor-view-list {
- width: 100%;
- .list-editor-item-view {
- min-height: 50px;
- height: 50px;
- background-color: $tlv-light-gray;
- border-color: transparent;
- margin: 1px 0;
- .list-editor-item-view-content {
- padding-left: 0;
- }
-
- .svg-icon {
- margin-top: 10px;
- margin-right: 50px;
- fill: $gray;
- &:hover {
- fill: $dark-gray;
- }
- }
-
- &.selectable {
- &:hover {
- .list-editor-item-view-field {
- .text.description, .text-name {
- &:after {
- background-color: darken($tlv-light-gray, 4%);
- }
- }
-
- }
- background-color: darken($tlv-light-gray, 4%);
- cursor: pointer;
- }
-
- }
- &:hover {
- border-color: transparent;
- cursor: default;
- }
- .list-editor-item-view-content {
- .list-editor-item-view-field {
- display: flex;
- align-items: center;
- white-space: nowrap;
-
- &.limit-name {
- .text.name {
- @extend .body-1-semibold;
- color: $blue;
- text-transform: uppercase;
- margin-left : 45px;
- }
-
- border-right: 1px solid $light-gray;
- margin-right: 22px;
- flex: 0.4;
- display: flex;
- justify-content: left;
- }
-
- &.limit-description {
- max-width: 300px;
- margin-right: 22px;
- }
-
- &.limit-metric-details {
- max-width: 300px;
- }
-
-
- .text.description, .text.name {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- &:after {
- background: $tlv-light-gray;
- }
-
- }
- }
-
- }
- }
- }
- }
- .limit-editor{
- .limit-editor-form {
- .limit-editor-form-grid-section {
- padding-bottom: 0;
- }
- .validation-form-content {
- padding: 21px 45px;
- }
- .limit-editor-buttons {
- display: flex;
- justify-content: flex-end;
- .sdc-button {
- margin-left: 20px;
- }
- }
- }
- }
-} \ No newline at end of file
+ max-height: 490px;
+ overflow: auto;
+
+ .limit-editor-title {
+ padding: 10px 50px;
+ background-color: $blue;
+ color: $white;
+ }
+ .list-editor-view-add-title {
+ margin-right: 20px;
+ }
+
+ .no-limits-text {
+ padding-left: 50px;
+ }
+
+ .list-editor-view {
+ .list-editor-view-header {
+ border-bottom: none;
+ padding-top: 30px;
+ padding-bottom: 0;
+ }
+
+ .list-editor-view-list-scroller {
+ margin-top: 0;
+ margin-bottom: 30px;
+ }
+ .list-editor-view-list {
+ width: 100%;
+ .list-editor-item-view {
+ min-height: 50px;
+ height: 50px;
+ background-color: $tlv-light-gray;
+ border-color: transparent;
+ margin: 1px 0;
+ .list-editor-item-view-content {
+ padding-left: 0;
+ }
+
+ .svg-icon {
+ margin-top: 10px;
+ margin-right: 50px;
+ fill: $gray;
+ &:hover {
+ fill: $dark-gray;
+ }
+ }
+
+ &.selectable {
+ &:hover {
+ .list-editor-item-view-field {
+ .text.description,
+ .text-name {
+ &:after {
+ background-color: darken(
+ $tlv-light-gray,
+ 4%
+ );
+ }
+ }
+ }
+ background-color: darken($tlv-light-gray, 4%);
+ cursor: pointer;
+ }
+ }
+ &:hover {
+ border-color: transparent;
+ cursor: default;
+ }
+ .list-editor-item-view-content {
+ .list-editor-item-view-field {
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+
+ &.limit-name {
+ .text.name {
+ @extend .body-1-semibold;
+ color: $blue;
+ text-transform: uppercase;
+ margin-left: 45px;
+ }
+
+ border-right: 1px solid $light-gray;
+ margin-right: 22px;
+ flex: 0.4;
+ display: flex;
+ justify-content: left;
+ }
+
+ &.limit-description {
+ max-width: 300px;
+ margin-right: 22px;
+ }
+
+ &.limit-metric-details {
+ max-width: 300px;
+ }
+
+ .text.description,
+ .text.name {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ &:after {
+ background: $tlv-light-gray;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ .limit-editor {
+ .limit-editor-form {
+ .limit-editor-form-grid-section {
+ padding-bottom: 0;
+ }
+ .validation-form-content {
+ padding: 21px 45px;
+ }
+ .limit-editor-buttons {
+ display: flex;
+ justify-content: flex-end;
+ .sdc-button {
+ margin-left: 20px;
+ }
+ }
+ }
+ }
+}
diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
index 21c5bd8007..eca87b6962 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
@@ -4,236 +4,233 @@ $icon-margin: 30px;
$arrow-element-width: 30px;
$list-item-padding: 15px;
-
-
$la-color: $dark-blue;
$fg-color: $blue;
$lkg-ep-color: $light-blue;
@mixin overview-tile-shadow() {
- @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05));
+ @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05));
}
.license-model-overview {
- .overview-top-section {
- .overview-title{
- @extend .heading-1;
- @extend .text-uppercase !optional;
- margin-bottom: 20px;
- color: $blue;
- }
- .license-model-overview-top {
- display: flex;
- justify-content: flex-start;
- flex-direction: row;
- padding-bottom: 10px;
- min-height: 155px;
- .separator {
- width: 1px;
- border-right: 1px solid $tlv-light-gray;
- margin-left: 20px;
- }
- .vendor-data-view {
- @extend .flex-column;
- background-color: $tlv-gray;
- padding: 13px 30px;
- border: 1px solid $tlv-light-gray;
- @include overview-tile-shadow();
- .vendor-title {
- margin-top:5px;
+ .overview-top-section {
+ .overview-title {
+ @extend .heading-1;
+ @extend .text-uppercase !optional;
+ margin-bottom: 20px;
+ color: $blue;
}
- .vendor-name {
- @extend .heading-4-semibold;
- text-transform: none;
- padding-bottom: 10px;
- border-bottom: 1px solid $tlv-light-gray;
- }
- .vendor-description, .vendor-description-readonly {
- @extend .flex;
- @extend .body-1;
- justify-content: space-between;
- overflow: hidden;
- position: relative;
- flex: initial;
- }
-
- &:not(.read-only) .vendor-description {
- border: 1px solid transparent;
- width: 100%;
- padding: 2px 0 2px 6px;
- margin-top: 10px;
- position: relative;
- .svg-icon-wrapper {
- position: absolute;;
- right:0;
- top:0;
- opacity: 0;
- }
- $hover-padding-right: 16px;
- @include percent-plus-value($property: width, $percent: 100%, $value: -$hover-padding-right); // compensate for padding added on hover
- &:hover {
- padding-right: $hover-padding-right;
- border: 1px solid $light-gray;
- cursor: pointer;
-
- background-color: $white;
- .svg-icon-wrapper {
- opacity: 1;
- z-index: 10;
- }
- .description-data:after {
- background: white;
- }
- .description-data {
- width: 100%;
+ .license-model-overview-top {
+ display: flex;
+ justify-content: flex-start;
+ flex-direction: row;
+ padding-bottom: 10px;
+ min-height: 155px;
+ .separator {
+ width: 1px;
+ border-right: 1px solid $tlv-light-gray;
+ margin-left: 20px;
}
- }
- }
+ .vendor-data-view {
+ @extend .flex-column;
+ background-color: $tlv-gray;
+ padding: 13px 30px;
+ border: 1px solid $tlv-light-gray;
+ @include overview-tile-shadow();
+ .vendor-title {
+ margin-top: 5px;
+ }
+ .vendor-name {
+ @extend .heading-4-semibold;
+ text-transform: none;
+ padding-bottom: 10px;
+ border-bottom: 1px solid $tlv-light-gray;
+ }
+ .vendor-description,
+ .vendor-description-readonly {
+ @extend .flex;
+ @extend .body-1;
+ justify-content: space-between;
+ overflow: hidden;
+ position: relative;
+ flex: initial;
+ }
- .vendor-description-readonly {
- margin-top: 16px;
- }
+ &:not(.read-only) .vendor-description {
+ border: 1px solid transparent;
+ width: 100%;
+ padding: 2px 0 2px 6px;
+ margin-top: 10px;
+ position: relative;
+ .svg-icon-wrapper {
+ position: absolute;
+ right: 0;
+ top: 0;
+ opacity: 0;
+ }
+ $hover-padding-right: 16px;
+ @include percent-plus-value($property: width, $percent: 100%, $value: -$hover-padding-right); // compensate for padding added on hover
+ &:hover {
+ padding-right: $hover-padding-right;
+ border: 1px solid $light-gray;
+ cursor: pointer;
- .description-data {
- @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
- flex: initial;
- }
+ background-color: $white;
+ .svg-icon-wrapper {
+ opacity: 1;
+ z-index: 10;
+ }
+ .description-data:after {
+ background: white;
+ }
+ .description-data {
+ width: 100%;
+ }
+ }
+ }
- .vendor-description-edit {
- @extend .flex;
- flex-direction: column;
- border: none;
- margin-top: 10px;
- position: relative;
- left: -6px;
- width: 101%;
- textarea {
- padding-left: 6px;
- resize: vertical;
- }
- .buttons-row {
- @extend .flex;
- justify-content: flex-end;
- flex-direction: row;
- margin-top: -25px;
- .buttons-wrapper {
- @extend .flex;
- @extend .body-3;
- border: 1px solid $light-gray;
- width: 95px;
- height: 19px;
- background-color: $tlv-light-gray;
- border-radius: 2px;
- position: relative;
- flex: 0 1 auto;
- text-align: center;
- .description-button {
- cursor: pointer;
- flex: 1;
- &:hover {
- background-color: $white;
+ .vendor-description-readonly {
+ margin-top: 16px;
}
- }
- .description-save {
- cursor: pointer;
- flex: 1;
- color:$blue;
- &:hover {
- background-color: $white;
+
+ .description-data {
+ @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
+ flex: initial;
}
- }
- }
- }
- .description-edit-textarea {
- height:67px;
- border: 1px solid $tlv-light-gray;
- resize: none;
- position: relative;
- left: -12px;
- }
- .validation-error-message.tooltip {
- z-index: 1000;
- .tooltip-inner {
- background-color: $red;
- }
- }
- }
- }
- .summary-count-list {
- @extend .flex-column;
- flex: 0.6;
- margin-left: 20px;
- justify-content: space-between;
- border: 1px solid $tlv-light-gray;
- @include overview-tile-shadow();
- background-color: $tlv-gray;
- .summary-count-item {
- @extend .flex;
- @extend .heading-5-semibold;
- align-items: center;
- padding-left: 45px;
- padding-right: 45px;
- border-bottom: 1px solid $tlv-light-gray;
- &:last-child { border-bottom: none; }
- .item-count {
- flex-grow: 2;
- margin-left: 5px;
- }
- .summary-name-and-count {
- width: 100%;
- }
- .svg-icon-wrapper {
- .svg-icon {
- &.__plusCircle {
- margin-top: 3px;
- margin-left: auto;
- fill: $dark-gray;
- &:hover {
- fill: $blue;
+
+ .vendor-description-edit {
+ @extend .flex;
+ flex-direction: column;
+ border: none;
+ margin-top: 10px;
+ position: relative;
+ left: -6px;
+ width: 101%;
+ textarea {
+ padding-left: 6px;
+ resize: vertical;
+ }
+ .buttons-row {
+ @extend .flex;
+ justify-content: flex-end;
+ flex-direction: row;
+ margin-top: -25px;
+ .buttons-wrapper {
+ @extend .flex;
+ @extend .body-3;
+ border: 1px solid $light-gray;
+ width: 95px;
+ height: 19px;
+ background-color: $tlv-light-gray;
+ border-radius: 2px;
+ position: relative;
+ flex: 0 1 auto;
+ text-align: center;
+ .description-button {
+ cursor: pointer;
+ flex: 1;
+ &:hover {
+ background-color: $white;
+ }
+ }
+ .description-save {
+ cursor: pointer;
+ flex: 1;
+ color: $blue;
+ &:hover {
+ background-color: $white;
+ }
+ }
+ }
+ }
+ .description-edit-textarea {
+ height: 67px;
+ border: 1px solid $tlv-light-gray;
+ resize: none;
+ position: relative;
+ left: -12px;
+ }
+ .validation-error-message.tooltip {
+ z-index: 1000;
+ .tooltip-inner {
+ background-color: $red;
+ }
+ }
}
- }
}
+ .summary-count-list {
+ @extend .flex-column;
+ flex: 0.6;
+ margin-left: 20px;
+ justify-content: space-between;
+ border: 1px solid $tlv-light-gray;
+ @include overview-tile-shadow();
+ background-color: $tlv-gray;
+ .summary-count-item {
+ @extend .flex;
+ @extend .heading-5-semibold;
+ align-items: center;
+ padding-left: 45px;
+ padding-right: 45px;
+ border-bottom: 1px solid $tlv-light-gray;
+ &:last-child {
+ border-bottom: none;
+ }
+ .item-count {
+ flex-grow: 2;
+ margin-left: 5px;
+ }
+ .summary-name-and-count {
+ width: 100%;
+ }
+ .svg-icon-wrapper {
+ .svg-icon {
+ &.__plusCircle {
+ margin-top: 3px;
+ margin-left: auto;
+ fill: $dark-gray;
+ &:hover {
+ fill: $blue;
+ }
+ }
+ }
+ }
- }
-
- .summary-name-and-count {
- &:hover {
- cursor: pointer;
- color: $blue;
+ .summary-name-and-count {
+ &:hover {
+ cursor: pointer;
+ color: $blue;
+ }
+ }
+ }
+ }
+ .plus-icon {
+ font-size: $icon-font-size;
+ border-radius: 50%;
+ border: 1px solid $black;
+ color: $black;
+ height: 16px;
+ width: 16px;
+ padding: 2px 2px 2px 3px;
}
- }
-
-
}
- }
- .plus-icon {
- font-size: $icon-font-size;
- border-radius: 50%;
- border: 1px solid $black;
- color: $black;
- height: 16px;
- width: 16px;
- padding: 2px 2px 2px 3px;
- }
- }
- }
- .vlm-list-tab-panel {
-
- @extend .flex;
- margin-bottom: 7px;
- .section-title {
- flex: 1;
}
- .overview-buttons-section {
- margin-top: 20px;
- display: flex;
- justify-content: flex-start;
- .button-vlm-list-view {
- height: 32px;
- width: 34px;
- margin-left:10px;
- cursor: pointer;
- }
- /**
+ .vlm-list-tab-panel {
+ @extend .flex;
+ margin-bottom: 7px;
+ .section-title {
+ flex: 1;
+ }
+ .overview-buttons-section {
+ margin-top: 20px;
+ display: flex;
+ justify-content: flex-start;
+ .button-vlm-list-view {
+ height: 32px;
+ width: 34px;
+ margin-left: 10px;
+ cursor: pointer;
+ }
+ /**
.vlm-list-icon {
background-size: 32px;
background-repeat: no-repeat;
@@ -251,262 +248,253 @@ $lkg-ep-color: $light-blue;
}
}
**/
- }
- }
-
- .overview-list-section {
- @extend .flex-column;
- margin-top: 35px;
- .section-title {
- @extend .heading-2;
- padding-top: 20px;
- margin-bottom: 15px;
- padding-bottom: 0px;
- }
- &.overview-list-orphans {
- .chevron::before
- {
- display: none;
- }
- .vlm-list-view {
- .vlm-list {
- .vlm-list-item.orphan-list-item {
- @include overview-tile-shadow();
- margin-left: 0;
-
- .vlm-list-item-title {
-
- .item-name {
- color: $dark-gray;
- }
- }
- .list-item-icon-col {
- .overview-list-icon {
- background-color: $gray;
- border-color: $gray;
- }
- }
- .list-item-section {
- &:first-child {
- display: flex;
- color: $white;
- min-width: $arrow-element-width;
- }
- &.list-item-icon-col {
- margin-left: 65px;
- margin-right: 65px - $list-item-padding;
- }
- }
- }
}
- }
}
- .vlm-list-view {
- flex: 1;
- .vlm-list {
- @extend .flex;
- flex-direction: column;
- .vlm-list-item {
- @include border-shadow();
- min-height: 90px;
- height: 90px;
- background-color: $tlv-gray;
- @extend .flex;
- border: 1px solid $tlv-light-gray;
- margin-bottom: 0px;
- .clickable {
- cursor: pointer;
- }
- .list-item-section {
- .count-value {
- @extend .body-3;
- }
- &.list-item-icon-col {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- padding: 0;
- margin-right: 40px - $list-item-padding;
- margin-left: $icon-margin;
- .overview-list-icon {
- @extend .body-2;
- }
- }
- padding: 15px;
- &.list-item-arrow-col {
- padding: 0;
- }
- .children-count {
- @extend .body-1;
- color: $gray;
- padding-left: 5px;
- .count-value {
- padding: 0 5px;
- }
- }
- .additional-data {
- padding-left: 60px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- *:last-child {
- margin-top: 20px;
- }
- *:only-child {
- margin-top: 0;
- }
- .additional-data-name {
- @extend .body-2-semibold;
- }
- }
- .additional-data-col-border {
- border-left: 1px solid $tlv-light-gray;
- min-height: 100%;
- height: 100%;
- }
- }
- .list-item-additional-data-col {
- @extend .body-2;
- @extend .flex;
- align-items: stretch;
- flex: 0.8;
- margin-left: 30px;
- padding-top: 17px;
- padding-bottom: 11px;
- }
- .arrow-icon {
- align-self: center;
-
- }
- .vlm-item-info {
- flex: 1;
- }
- .vlm-list-item-title {
- @extend .flex;
- align-items: baseline;
- .item-name {
- @extend .heading-5-semibold;
- flex: 0 1 auto;
- margin-bottom: 4px;
- text-transform: uppercase;
- }
- }
- .vlm-list-item-description {
- @extend .body-1;
- @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
- max-height: 38px;
- }
- &.vlm-list-item-la {
- margin-top: 10px;
- .la-icon {
- @include create-circle($circle-icon-size, $la-color);
- color: $white;
- }
- .vlm-list-item-title {
- .item-name {
- color: $la-color;
- }
- }
- .list-item-section {
-
- &:first-child {
- display: flex;
- color: $la-color;
- min-width: $arrow-element-width;
- }
- }
- .list-item-arrow-col {
- flex: 0.01;
- margin-left: $arrow-margin;
- justify-content: center;
+ .overview-list-section {
+ @extend .flex-column;
+ margin-top: 35px;
+ .section-title {
+ @extend .heading-2;
+ padding-top: 20px;
+ margin-bottom: 15px;
+ padding-bottom: 0px;
+ }
+ &.overview-list-orphans {
+ .chevron::before {
+ display: none;
}
- }
- &.vlm-list-item-fg {
- margin-left: $list-indentation;
- margin-top: 10px;
- .fg-pipeline-separator {
- color: $dark-gray;
- padding: 0 5px;
- }
- .list-item-icon-col {
- margin-left: 29px;
- }
- .fg-icon {
- @include create-circle($circle-icon-size, $fg-color);
- color: $white;
- }
-
- .vlm-list-item-title {
- .item-name {
- color: $fg-color;
- }
- }
- .list-item-section {
- &:first-child {
- display: flex;
- color: $fg-color;
- min-width: $arrow-element-width;
+ .vlm-list-view {
+ .vlm-list {
+ .vlm-list-item.orphan-list-item {
+ @include overview-tile-shadow();
+ margin-left: 0;
- }
- }
- .list-item-arrow-col {
- flex: 0.01;
- margin-left: $arrow-margin - $list-indentation;
- padding-left: $list-indentation;
- }
- }
- &.vlm-list-item-ep {
- margin-left: $list-indentation * 2;
- margin-top: 10px;
- cursor: default;
- .ep-icon {
- @include create-circle($circle-icon-size, $lkg-ep-color);
- color: $white;
- }
- .vlm-list-item-title {
- .item-name {
- color: $lkg-ep-color;
- }
- }
- .list-item-section {
- &:first-child {
- display: none;
- }
- &.list-item-icon-col {
- margin-left: 52px;
- }
+ .vlm-list-item-title {
+ .item-name {
+ color: $dark-gray;
+ }
+ }
+ .list-item-icon-col {
+ .overview-list-icon {
+ background-color: $gray;
+ border-color: $gray;
+ }
+ }
+ .list-item-section {
+ &:first-child {
+ display: flex;
+ color: $white;
+ min-width: $arrow-element-width;
+ }
+ &.list-item-icon-col {
+ margin-left: 65px;
+ margin-right: 65px - $list-item-padding;
+ }
+ }
+ }
+ }
}
+ }
+ .vlm-list-view {
+ flex: 1;
+ .vlm-list {
+ @extend .flex;
+ flex-direction: column;
+ .vlm-list-item {
+ @include border-shadow();
+ min-height: 90px;
+ height: 90px;
+ background-color: $tlv-gray;
+ @extend .flex;
+ border: 1px solid $tlv-light-gray;
+ margin-bottom: 0px;
+ .clickable {
+ cursor: pointer;
+ }
- }
- &.vlm-list-item-lkg {
- margin-top: 10px;
- margin-left: $list-indentation * 2;
- cursor: default;
- .lkg-icon {
- @include create-circle($circle-icon-size, $lkg-ep-color);
- color: $white;
- }
- .vlm-list-item-title {
- .item-name {
- color: $lkg-ep-color;
- }
- }
- .list-item-section {
- &:first-child {
- display: none;
- }
- &.list-item-icon-col {
- margin-left: 52px;
- }
+ .list-item-section {
+ .count-value {
+ @extend .body-3;
+ }
+ &.list-item-icon-col {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 0;
+ margin-right: 40px - $list-item-padding;
+ margin-left: $icon-margin;
+ .overview-list-icon {
+ @extend .body-2;
+ }
+ }
+ padding: 15px;
+ &.list-item-arrow-col {
+ padding: 0;
+ }
+ .children-count {
+ @extend .body-1;
+ color: $gray;
+ padding-left: 5px;
+ .count-value {
+ padding: 0 5px;
+ }
+ }
+ .additional-data {
+ padding-left: 60px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ *:last-child {
+ margin-top: 20px;
+ }
+ *:only-child {
+ margin-top: 0;
+ }
+ .additional-data-name {
+ @extend .body-2-semibold;
+ }
+ }
+ .additional-data-col-border {
+ border-left: 1px solid $tlv-light-gray;
+ min-height: 100%;
+ height: 100%;
+ }
+ }
+ .list-item-additional-data-col {
+ @extend .body-2;
+ @extend .flex;
+ align-items: stretch;
+ flex: 0.8;
+ margin-left: 30px;
+ padding-top: 17px;
+ padding-bottom: 11px;
+ }
+ .arrow-icon {
+ align-self: center;
+ }
+ .vlm-item-info {
+ flex: 1;
+ }
+ .vlm-list-item-title {
+ @extend .flex;
+ align-items: baseline;
+ .item-name {
+ @extend .heading-5-semibold;
+ flex: 0 1 auto;
+ margin-bottom: 4px;
+ text-transform: uppercase;
+ }
+ }
+ .vlm-list-item-description {
+ @extend .body-1;
+ @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
+ max-height: 38px;
+ }
+ &.vlm-list-item-la {
+ margin-top: 10px;
+ .la-icon {
+ @include create-circle($circle-icon-size, $la-color);
+ color: $white;
+ }
+ .vlm-list-item-title {
+ .item-name {
+ color: $la-color;
+ }
+ }
+ .list-item-section {
+ &:first-child {
+ display: flex;
+ color: $la-color;
+ min-width: $arrow-element-width;
+ }
+ }
+ .list-item-arrow-col {
+ flex: 0.01;
+ margin-left: $arrow-margin;
+ justify-content: center;
+ }
+ }
+ &.vlm-list-item-fg {
+ margin-left: $list-indentation;
+ margin-top: 10px;
+ .fg-pipeline-separator {
+ color: $dark-gray;
+ padding: 0 5px;
+ }
+ .list-item-icon-col {
+ margin-left: 29px;
+ }
+ .fg-icon {
+ @include create-circle($circle-icon-size, $fg-color);
+ color: $white;
+ }
+ .vlm-list-item-title {
+ .item-name {
+ color: $fg-color;
+ }
+ }
+ .list-item-section {
+ &:first-child {
+ display: flex;
+ color: $fg-color;
+ min-width: $arrow-element-width;
+ }
+ }
+ .list-item-arrow-col {
+ flex: 0.01;
+ margin-left: $arrow-margin - $list-indentation;
+ padding-left: $list-indentation;
+ }
+ }
+ &.vlm-list-item-ep {
+ margin-left: $list-indentation * 2;
+ margin-top: 10px;
+ cursor: default;
+ .ep-icon {
+ @include create-circle($circle-icon-size, $lkg-ep-color);
+ color: $white;
+ }
+ .vlm-list-item-title {
+ .item-name {
+ color: $lkg-ep-color;
+ }
+ }
+ .list-item-section {
+ &:first-child {
+ display: none;
+ }
+ &.list-item-icon-col {
+ margin-left: 52px;
+ }
+ }
+ }
+ &.vlm-list-item-lkg {
+ margin-top: 10px;
+ margin-left: $list-indentation * 2;
+ cursor: default;
+ .lkg-icon {
+ @include create-circle($circle-icon-size, $lkg-ep-color);
+ color: $white;
+ }
+ .vlm-list-item-title {
+ .item-name {
+ color: $lkg-ep-color;
+ }
+ }
+ .list-item-section {
+ &:first-child {
+ display: none;
+ }
+ &.list-item-icon-col {
+ margin-left: 52px;
+ }
+ }
+ }
+ }
}
- }
}
-
- }
}
- }
-
}
diff --git a/openecomp-ui/resources/scss/modules/_mergeEditor.scss b/openecomp-ui/resources/scss/modules/_mergeEditor.scss
index 96648dd20f..000e42d5b4 100644
--- a/openecomp-ui/resources/scss/modules/_mergeEditor.scss
+++ b/openecomp-ui/resources/scss/modules/_mergeEditor.scss
@@ -5,203 +5,201 @@ $selected-width: 1px;
$selected-color: $blue;
@mixin levels {
- @for $i from 1 to 6 {
- .level-#{$i} {
- padding-left: 18px + 10 * $i;
- }
- }
+ @for $i from 1 to 6 {
+ .level-#{$i} {
+ padding-left: 18px + 10 * $i;
+ }
+ }
}
.merge-editor-modal {
- .modal-lg {
- width: 1300px;
- }
+ .modal-lg {
+ width: 1300px;
+ }
}
.merge-editor {
- margin: 30px 40px;
- max-height: 600px;
- border: 1px solid $light-gray;
- .grid-section {
- &.conflict-titles-section {
- @extend .body-1;
- background-color: $blue;
- height: 33px;
- padding-top: 6px;
- padding-bottom: 3px;
- color: $white;
- position: sticky;
- top: 0;
- z-index: 2;
- border-bottom: 1px solid $tlv-light-gray;
- .grid-item {
- padding-left: 10px;
- }
- .form-group {
- margin-bottom: 0;
- .checkbox {
- label {
- margin-right: 0;
- }
-
- text-align: right;
-
- input[type="checkbox"] {
- cursor: pointer;
- margin-top: 1px;
- }
- }
- }
- }
- }
- .merge-editor-body {
- max-height: 500px;
- overflow-y: scroll;
- padding: 10px;
- .conflict-section {
- margin-bottom: 0;
- border-left: 0;
- border-right: 0;
- padding: 5px 0;
-
- .conflict-resolve-btn {
- align-self: flex-end;
- }
-
- .grid-items {
- align-items: center;
-
- input[type="radio"]:not(:checked) {
- cursor: pointer;
- }
- }
- }
-
- .collapsible-section {
- display: flex;
- cursor: pointer;
-
- .conflict-title {
- @extend .heading-5-semibold;
- text-transform: uppercase;
- }
- }
-
- .merge-chevron {
- margin-right: 7px;
- &.right {
- transform: rotate(90deg);
- }
- }
-
- .grid-section .grid-items .field-col:not(.grid-col-title) {
- &.grid-col-yours {
- border-top: $selected-width solid $yours-bg-color;
- border-bottom: $selected-width solid $yours-bg-color;
- }
-
- &.theirs-color {
- border-top: $selected-width solid $theirs-bg-color;
- border-bottom: $selected-width solid $theirs-bg-color;
- }
- }
-
- .merge-editor-text-field {
- display: flex;
- justify-content: space-between;
- // margin: 0 0 10px 0;
- margin: 0;
-
- .field {
- color: $text-black;
-
- &.field-name:not(.field-object-name) {
- color: $gray;
- }
- }
-
- &.diff {
- .field {
- color: $red;
- }
- }
-
- &.grid-section {
- padding-bottom: 0;
-
- .grid-items {
- flex: 1;
-
-
- .field-col {
- padding: 7px 0;
- height: 100%;
-
- &:not(:first-child) {
- padding-left: 8px;
- }
-
- &.grid-col-yours {
- background-color: $yours-bg-color;
- }
-
- &.grid-col-theirs {
- background-color: $theirs-bg-color;
- }
-
- @include levels;
-
-
- .field {
- @extend .body-1;
- flex: 2;
- min-width: 0;
-
- &.field-name {
- @include multiline-ellipsis($bgColor: white);
- &.diff {
- color: $red;
- }
- text-transform: uppercase;
- &.field-object-name {
- @extend .body-1-semibold;
- margin-bottom: 5px;
- margin-top: 10px;
-
- }
- }
-
- &.field-yours {
- @include multiline-ellipsis($bgColor: $yours-bg-color);
- }
-
- &.field-theirs {
- @include multiline-ellipsis($bgColor: $theirs-bg-color);
- }
- &.field-name, &.field.field-yours, &.field.field-theirs {
- word-break: break-word;
- text-align: initial;
- }
- &.empty-field {
- padding-top: 2px;
- }
- }
-
- *::after {
- bottom: 0;
- }
- }
- }
- }
-
- &.field-error {
- @extend .body-1;
- color: $error-text-color;
- min-width: 0;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- }
+ margin: 30px 40px;
+ max-height: 600px;
+ border: 1px solid $light-gray;
+ .grid-section {
+ &.conflict-titles-section {
+ @extend .body-1;
+ background-color: $blue;
+ height: 33px;
+ padding-top: 6px;
+ padding-bottom: 3px;
+ color: $white;
+ position: sticky;
+ top: 0;
+ z-index: 2;
+ border-bottom: 1px solid $tlv-light-gray;
+ .grid-item {
+ padding-left: 10px;
+ }
+ .form-group {
+ margin-bottom: 0;
+ .checkbox {
+ label {
+ margin-right: 0;
+ }
+
+ text-align: right;
+
+ input[type='checkbox'] {
+ cursor: pointer;
+ margin-top: 1px;
+ }
+ }
+ }
+ }
+ }
+ .merge-editor-body {
+ max-height: 500px;
+ overflow-y: scroll;
+ padding: 10px;
+ .conflict-section {
+ margin-bottom: 0;
+ border-left: 0;
+ border-right: 0;
+ padding: 5px 0;
+
+ .conflict-resolve-btn {
+ align-self: flex-end;
+ }
+
+ .grid-items {
+ align-items: center;
+
+ input[type='radio']:not(:checked) {
+ cursor: pointer;
+ }
+ }
+ }
+
+ .collapsible-section {
+ display: flex;
+ cursor: pointer;
+
+ .conflict-title {
+ @extend .heading-5-semibold;
+ text-transform: uppercase;
+ }
+ }
+
+ .merge-chevron {
+ margin-right: 7px;
+ &.right {
+ transform: rotate(90deg);
+ }
+ }
+
+ .grid-section .grid-items .field-col:not(.grid-col-title) {
+ &.grid-col-yours {
+ border-top: $selected-width solid $yours-bg-color;
+ border-bottom: $selected-width solid $yours-bg-color;
+ }
+
+ &.theirs-color {
+ border-top: $selected-width solid $theirs-bg-color;
+ border-bottom: $selected-width solid $theirs-bg-color;
+ }
+ }
+
+ .merge-editor-text-field {
+ display: flex;
+ justify-content: space-between;
+ margin: 0;
+
+ .field {
+ color: $text-black;
+
+ &.field-name:not(.field-object-name) {
+ color: $gray;
+ }
+ }
+
+ &.diff {
+ .field {
+ color: $red;
+ }
+ }
+
+ &.grid-section {
+ padding-bottom: 0;
+
+ .grid-items {
+ flex: 1;
+
+ .field-col {
+ padding: 7px 0;
+ height: 100%;
+
+ &:not(:first-child) {
+ padding-left: 8px;
+ }
+
+ &.grid-col-yours {
+ background-color: $yours-bg-color;
+ }
+
+ &.grid-col-theirs {
+ background-color: $theirs-bg-color;
+ }
+
+ @include levels;
+
+ .field {
+ @extend .body-1;
+ flex: 2;
+ min-width: 0;
+
+ &.field-name {
+ @include multiline-ellipsis($bgColor: white);
+ &.diff {
+ color: $red;
+ }
+ text-transform: uppercase;
+ &.field-object-name {
+ @extend .body-1-semibold;
+ margin-bottom: 5px;
+ margin-top: 10px;
+ }
+ }
+
+ &.field-yours {
+ @include multiline-ellipsis($bgColor: $yours-bg-color);
+ }
+
+ &.field-theirs {
+ @include multiline-ellipsis($bgColor: $theirs-bg-color);
+ }
+ &.field-name,
+ &.field.field-yours,
+ &.field.field-theirs {
+ word-break: break-word;
+ text-align: initial;
+ }
+ &.empty-field {
+ padding-top: 2px;
+ }
+ }
+
+ *::after {
+ bottom: 0;
+ }
+ }
+ }
+ }
+
+ &.field-error {
+ @extend .body-1;
+ color: $error-text-color;
+ min-width: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
index 39f7636e79..bf0c14649e 100644
--- a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
+++ b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
@@ -1,63 +1,63 @@
$transitionLength: 0.6s;
.catalog-view {
- background-color: $background-gray;
- overflow: hidden;
- height: 100%;
- display: flex;
- @import "onboardingCatalog/catalogFilter.scss";
- .catalog-parts {
- width: 100%;
- @import "onboardingCatalog/onboardHeader";
- @import "onboardingCatalog/catalogHeader";
- }
- @import "onboardingCatalog/vendorPageHeader";
- @import "onboardingCatalog/catalogList";
- @import "onboardingCatalog/vspOverlay";
- .catalog-wrapper {
- height: 100%;
- overflow: auto;
- .tab-separator {
- content: '';
- height: 25px;
- border-right: 1px solid $dark-gray;
- }
- .catalog-list {
- overflow: hidden;
- height: auto;
- .sdc-tile {
- margin: 9px;
- .sdc-tile-header {
- position: initial;
- display: block;
- flex-shrink: initial;
- align-items: initial;
- flex-direction: initial;
- }
- .sdc-tile-content {
- position: initial;
- flex: initial;
- display: flex;
- align-items: initial;
- flex-direction: column;
- justify-content: space-between;
- overflow: initial;
- .sdc-tile-info-line {
- .with-overlay {
- line-height: 1.2em;
- @include ellipsis($width: initial, $max-width: 100%);
- }
- }
- }
- .sdc-tile-footer {
- position: initial;
- flex-shrink: initial;
- display: flex;
- align-items: center;
- flex-direction: row;
- text-transform: none;
- }
- }
- }
- }
+ background-color: $background-gray;
+ overflow: hidden;
+ height: 100%;
+ display: flex;
+ @import 'onboardingCatalog/catalogFilter.scss';
+ .catalog-parts {
+ width: 100%;
+ @import 'onboardingCatalog/onboardHeader';
+ @import 'onboardingCatalog/catalogHeader';
+ }
+ @import 'onboardingCatalog/vendorPageHeader';
+ @import 'onboardingCatalog/catalogList';
+ @import 'onboardingCatalog/vspOverlay';
+ .catalog-wrapper {
+ height: 100%;
+ overflow: auto;
+ .tab-separator {
+ content: '';
+ height: 25px;
+ border-right: 1px solid $dark-gray;
+ }
+ .catalog-list {
+ overflow: hidden;
+ height: auto;
+ .sdc-tile {
+ margin: 9px;
+ .sdc-tile-header {
+ position: initial;
+ display: block;
+ flex-shrink: initial;
+ align-items: initial;
+ flex-direction: initial;
+ }
+ .sdc-tile-content {
+ position: initial;
+ flex: initial;
+ display: flex;
+ align-items: initial;
+ flex-direction: column;
+ justify-content: space-between;
+ overflow: initial;
+ .sdc-tile-info-line {
+ .with-overlay {
+ line-height: 1.2em;
+ @include ellipsis($width: initial, $max-width: 100%);
+ }
+ }
+ }
+ .sdc-tile-footer {
+ position: initial;
+ flex-shrink: initial;
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ text-transform: none;
+ }
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_permissions.scss b/openecomp-ui/resources/scss/modules/_permissions.scss
index e652d9d82f..5f83dc2fe9 100644
--- a/openecomp-ui/resources/scss/modules/_permissions.scss
+++ b/openecomp-ui/resources/scss/modules/_permissions.scss
@@ -1,55 +1,50 @@
-.modal-content {
- .modal-body {
- .manage-permissions-page {
- .validation-form-content {
- overflow-y: visible;
- }
+.manage-permissions-page {
+ .validation-form-content {
+ overflow-y: visible;
+ }
- .manage-permissions-title {
- @extend .body-1-semibold;
- margin-bottom: 10px;
- }
- .owner-details {
- @extend .body-2;
- display: flex;
- margin-bottom: 30px;
- .change-owner {
- margin-left: auto;
- color: $blue;
- cursor: pointer;
- &:hover {
- color: $dark-blue;
- }
- }
- }
- .change-owner-wrapper {
- .form-group {
- margin-bottom: 30px;
- }
-
- }
- .change-owner-title {
- display: flex;
- align-items: center;
- margin-bottom: 10px;
- .manage-permissions-title {
- margin-bottom: 0;
- }
- .svg-icon-wrapper {
- margin-left: 5px;
- .svg-icon {
- width: 13px;
- height: 13px;
- fill: $dark-gray;
- }
- }
- }
- .contributors-select {
- .Select-menu {
- max-height: 150px;
- overflow-y: auto
- }
- }
- }
- }
+ .manage-permissions-title {
+ @extend .body-1-semibold;
+ margin-bottom: 10px;
+ }
+ .owner-details {
+ @extend .body-2;
+ display: flex;
+ margin-bottom: 30px;
+ .change-owner {
+ margin-left: auto;
+ color: $blue;
+ cursor: pointer;
+ &:hover {
+ color: $dark-blue;
+ }
+ }
+ }
+ .change-owner-wrapper {
+ .form-group {
+ margin-bottom: 30px;
+ }
+ }
+ .change-owner-title {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+ .manage-permissions-title {
+ margin-bottom: 0;
+ }
+ .svg-icon-wrapper {
+ margin-left: 5px;
+ .svg-icon {
+ width: 13px;
+ height: 13px;
+ fill: $dark-gray;
+ }
+ }
+ }
+ .contributors-select {
+ .Select-menu {
+ max-height: 150px;
+ overflow-y: auto;
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_revisions.scss b/openecomp-ui/resources/scss/modules/_revisions.scss
index 2b196c132c..619fe7e53e 100644
--- a/openecomp-ui/resources/scss/modules/_revisions.scss
+++ b/openecomp-ui/resources/scss/modules/_revisions.scss
@@ -1,86 +1,68 @@
.manage-revisions-modal {
- .modal-dialog {
- width: 700px;
- }
- .modal-content {
- .modal-body {
- .validation-form-content {
- padding-top: 30px;
- }
- //.selected {
- // .selectable {
- // border-color: $light-blue;
- // }
- // .selectable:hover{
- // border-color: hotpink;
- // }
- //}
-
- .revision-list-item {
+ .revision-list-item {
&.selected {
- .selectable, .selectable:hover {
- border-width: 2px;
- border-color: $light-blue;
- }
+ .selectable,
+ .selectable:hover {
+ border-width: 2px;
+ border-color: $light-blue;
+ }
}
- .selectable:hover{
- border-color: $gray;
+ .selectable:hover {
+ border-color: $gray;
}
.selectable:active {
- border-color: $light-blue;
+ border-color: $light-blue;
}
- }
+ }
- .list-editor-view-list-scroller {
- margin-top : 0px;
- }
+ .list-editor-view-list-scroller {
+ margin-top: 0px;
+ }
- .list-editor-view-header {
+ .list-editor-view-header {
border-bottom: none;
.list-editor-view-title {
- @extend .heading-5;
- text-transform: none;
- color: $blue;
+ @extend .heading-5;
+ text-transform: none;
+ color: $blue;
}
- }
+ }
- .list-editor-item-view-content {
+ .list-editor-item-view-content {
background-color: $background-gray;
- }
- .revision-list-item-fields {
+ }
+ .revision-list-item-fields {
width: 100%;
display: flex;
flex-wrap: wrap;
.revision-user {
- flex-basis: 50%;
- fill: transparent;
- stroke: $blue;
- .svg-icon-label {
- margin-left: 13px;
- }
+ flex-basis: 50%;
+ fill: transparent;
+ stroke: $blue;
+ .svg-icon-label {
+ margin-left: 13px;
+ }
}
.revision-date {
- flex-basis: 50%;
- text-align: right;
- @extend .body-3;
- color: $gray;
- .revision-time {
- margin-left: 5px;
- }
+ flex-basis: 50%;
+ text-align: right;
+ @extend .body-3;
+ color: $gray;
+ .revision-time {
+ margin-left: 5px;
+ }
}
.revision-message {
- flex-basis: 100%;
- margin-top: 5px;
- @extend .body-2;
- .more-less {
- @extend .body-3;
- color: $blue;
- margin-left: 5px;
- }
+ flex-basis: 100%;
+ margin-top: 5px;
+ @extend .body-2;
+ .more-less {
+ @extend .body-3;
+ color: $blue;
+ margin-left: 5px;
+ }
}
- }
}
- }
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
index 81a109c97f..f24198cf59 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
@@ -1,267 +1,262 @@
-
.vsp-attachments-view {
- position: relative;
- .attachments-tabs {
- .sdc-tabs-list {
- padding-left: 28px;
- background-color: $tlv-gray;
- box-shadow: none;
- border-bottom: 1px solid $light-gray;
- .sdc-tab {
- @extend .heading-2;
- padding-top: 10px;
- margin-top: 0;
- &.sdc-tab-active {
- color: $blue;
- font-weight: bold;
+ position: relative;
+ .attachments-tabs {
+ .sdc-tabs-list {
+ padding-left: 28px;
+ background-color: $tlv-gray;
+ box-shadow: none;
+ border-bottom: 1px solid $light-gray;
+ .sdc-tab {
+ @extend .heading-2;
+ padding-top: 10px;
+ margin-top: 0;
+ &.sdc-tab-active {
+ color: $blue;
+ font-weight: bold;
+ }
+ }
+ }
+ .sdc-tab-content {
+ margin-top: 0;
}
- }
- }
- .sdc-tab-content {
- margin-top: 0;
}
- }
- .attachments-view-controllers {
- position: absolute;
- right: 40px;
- top: 10px;
- display: flex;
+ .attachments-view-controllers {
+ position: absolute;
+ right: 40px;
+ top: 10px;
+ display: flex;
-
- .icon-component {
- margin-right: 30px;
- }
+ .icon-component {
+ margin-right: 30px;
+ }
- input[type="file"] {
- visibility: hidden;
- width: 1px;
- padding: 0;
- margin-left: -1px;
- }
+ input[type='file'] {
+ visibility: hidden;
+ width: 1px;
+ padding: 0;
+ margin-left: -1px;
+ }
- .proceed-to-validation-btn {
- margin-right: 30px;
- }
- .go-to-overview-btn {
- width: 191px;
- margin-right: 36px;
- height: 36px;
- }
- .separator {
- height: 27px;
- border: 1px solid $light-gray;
- margin-right: 31px;
- margin-left: 0px;
- margin-top: 3px;
+ .proceed-to-validation-btn {
+ margin-right: 30px;
+ }
+ .go-to-overview-btn {
+ width: 191px;
+ margin-right: 36px;
+ height: 36px;
+ }
+ .separator {
+ height: 27px;
+ border: 1px solid $light-gray;
+ margin-right: 31px;
+ margin-left: 0px;
+ margin-top: 3px;
+ }
+ .abort-btn {
+ fill: $blue;
+ color: $blue;
+ &:hover {
+ color: $light-blue;
+ fill: $light-blue;
+ }
+ }
}
- .abort-btn {
- fill: $blue;
- color: $blue;
- &:hover {
- color: $light-blue;
- fill: $light-blue;
- }
- }
- }
}
.vsp-attachments-heat-validation {
- @extend .body-1;
- display: flex;
- .svg-icon.exclamationTriangleFull {
- fill: $orange;
- width: 15px;
- height: 15px;
- &.large {
- width: 20px;
- height: 20px;
- }
- }
- .validation-tree-section {
+ @extend .body-1;
display: flex;
- width: 400px;
- justify-content: space-between;
- }
- .vsp-attachments-heat-validation-tree {
- @extend .flex-column;
- margin: 0;
- overflow: auto;
- height: 100%;
- .attachments-tree-header {
- display: flex;
- justify-content: space-between;
- height: 55px;
- align-items: center;
- &.header-selected {
- background: $tlv-gray;
- }
- .header-icon {
- top: -3px;
- position: relative;
- margin-left: 20px;
- }
- .tree-header-title-text {
- @extend .heading-4-semibold;
- padding-left: 32px;
- cursor: pointer;
- &.tree-header-title-selected{
- color: $blue;
+ .svg-icon.exclamationTriangleFull {
+ fill: $orange;
+ width: 15px;
+ height: 15px;
+ &.large {
+ width: 20px;
+ height: 20px;
}
- }
- .tree-header-title {
- display: flex;
- }
}
- .counters {
- display: flex;
- justify-content: space-between;
- z-index: 1;
- padding-right: 20px;
- .counter {
- .svg-icon {
- &.__exclamationTriangleLine {
- fill: $orange;
- }
- }
+ .validation-tree-section {
display: flex;
- &:first-child {
- margin-right: 20px;
- }
- &:only-child {
- margin-right: 0;
- }
- .svg-icon-wrapper {
- margin-right: 5px;
- }
- .counter-icon {
- margin-right: 5px;
- }
- .error-text, .warning-text {
- @extend .body-3;
- &.large {
- @extend .heading-4-semibold;
- }
- }
- }
+ width: 400px;
+ justify-content: space-between;
}
- .tree-wrapper {
- flex: 1 1;
- position: relative;
- padding-bottom: 10px;
-
- @-moz-document url-prefix() {
- .tree-block-inside {
- top: 0;
- position: relative;
+ .vsp-attachments-heat-validation-tree {
+ @extend .flex-column;
+ margin: 0;
+ overflow: auto;
+ height: 100%;
+ .attachments-tree-header {
+ display: flex;
+ justify-content: space-between;
+ height: 55px;
+ align-items: center;
+ &.header-selected {
+ background: $tlv-gray;
+ }
+ .header-icon {
+ top: -3px;
+ position: relative;
+ margin-left: 20px;
+ }
+ .tree-header-title-text {
+ @extend .heading-4-semibold;
+ padding-left: 32px;
+ cursor: pointer;
+ &.tree-header-title-selected {
+ color: $blue;
+ }
+ }
+ .tree-header-title {
+ display: flex;
+ }
}
- }
- .tree-block-inside {
- padding-left: 20px;
- .tree-node-row {
- cursor: default;
- white-space: nowrap;
- display: flex;
- justify-content: space-between;
- height: 40px;
- align-items: center;
- .svg-icon {
- &.__chevronUp, &.__chevronDown {
- height: 10px;
- width: 10px;
+ .counters {
+ display: flex;
+ justify-content: space-between;
+ z-index: 1;
+ padding-right: 20px;
+ .counter {
+ .svg-icon {
+ &.__exclamationTriangleLine {
+ fill: $orange;
+ }
+ }
+ display: flex;
+ &:first-child {
+ margin-right: 20px;
+ }
+ &:only-child {
+ margin-right: 0;
+ }
+ .svg-icon-wrapper {
+ margin-right: 5px;
+ }
+ .counter-icon {
+ margin-right: 5px;
+ }
+ .error-text,
+ .warning-text {
+ @extend .body-3;
+ &.large {
+ @extend .heading-4-semibold;
+ }
+ }
}
- }
+ }
+ .tree-wrapper {
+ flex: 1 1;
+ position: relative;
+ padding-bottom: 10px;
- &:after {
- border-top: 1px solid $tlv-gray;
- height: 40px;
- position: absolute;
- left: 0;
- right: 0;
- content: ' ';
- }
- @-moz-document url-prefix() {
- &:after {
- top: 0;
+ @-moz-document url-prefix() {
+ .tree-block-inside {
+ top: 0;
+ position: relative;
+ }
}
- }
- &.tree-node-selected::before {
- position: absolute;
- left: 0;
- right: 0;
- height: 20px;
- display: inline-block;
- content: ' ';
- background-color: $tlv-gray;
- color: $blue;
- }
+ .tree-block-inside {
+ padding-left: 20px;
+ .tree-node-row {
+ cursor: default;
+ white-space: nowrap;
+ display: flex;
+ justify-content: space-between;
+ height: 40px;
+ align-items: center;
+ .svg-icon {
+ &.__chevronUp,
+ &.__chevronDown {
+ height: 10px;
+ width: 10px;
+ }
+ }
- &.tree-node-clicked {
- color: $blue;
- &:after {
- background: $tlv-gray;
- height: 40px;
- position: absolute;
- left: 0;
- right: 0;
- content: ' ';
+ &:after {
+ border-top: 1px solid $tlv-gray;
+ height: 40px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ content: ' ';
+ }
+ @-moz-document url-prefix() {
+ &:after {
+ top: 0;
+ }
+ }
+ &.tree-node-selected::before {
+ position: absolute;
+ left: 0;
+ right: 0;
+ height: 20px;
+ display: inline-block;
+ content: ' ';
+ background-color: $tlv-gray;
+ color: $blue;
+ }
+
+ &.tree-node-clicked {
+ color: $blue;
+ &:after {
+ background: $tlv-gray;
+ height: 40px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ content: ' ';
+ }
+ }
+ .tree-node-name {
+ cursor: pointer;
+ }
+ .name-section {
+ z-index: 1;
+ flex: 1;
+ @include ellipsis(auto);
+ }
+ .tree-node-expander {
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+ .tree-node-icon {
+ margin: 0 7px;
+ }
+ }
}
- }
- .tree-node-name {
- cursor: pointer;
- }
- .name-section {
- z-index: 1;
- flex: 1;
- @include ellipsis(auto);
- }
- .tree-node-expander {
- position: relative;
- display: inline-block;
- cursor: pointer;
- }
- .tree-node-icon {
- margin: 0 7px;
- }
}
- }
}
- }
- .vsp-attachments-heat-validation-separator {
- border-left: 1px solid $tlv-light-gray;
- height: 100%;
- width: 5px;
- cursor: e-resize;
- }
+ .vsp-attachments-heat-validation-separator {
+ border-left: 1px solid $tlv-light-gray;
+ height: 100%;
+ width: 5px;
+ cursor: e-resize;
+ }
- .message-board-section {
- @extend .flex-column;
- padding-left: 25px;
- padding-top: 10px;
- padding-right: 60px;
- overflow: auto;
- margin-bottom: 70px;
- .error-item {
- display: flex;
- margin: 10px 0;
- .large {
- .svg-icon {
- width: 20px;
- height: 20px;
- fill: $orange;
+ .message-board-section {
+ @extend .flex-column;
+ padding-left: 25px;
+ padding-top: 10px;
+ padding-right: 60px;
+ overflow: auto;
+ margin-bottom: 70px;
+ .error-item {
+ display: flex;
+ margin: 10px 0;
+ .large {
+ .svg-icon {
+ width: 20px;
+ height: 20px;
+ fill: $orange;
+ }
+ }
+ .error-item-file-type {
+ margin-left: 15px;
+ }
+ .error-file-name {
+ @extend .body-1-semibold;
+ margin-right: 5px;
+ }
}
- }
- .error-item-file-type {
- margin-left: 15px;
- }
- .error-file-name {
- @extend .body-1-semibold;
- margin-right: 5px;
- }
-
-
-
}
-
- }
-
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss
index 164e3bc261..83941c002a 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss
@@ -1,3 +1,3 @@
-.section-title.software-product-compute-number-of-vms{
- text-transform: initial;
-} \ No newline at end of file
+.section-title.software-product-compute-number-of-vms {
+ text-transform: initial;
+}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
index d31c7f0b92..f50e342304 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
@@ -1,13 +1,13 @@
.vsp-components-general {
- .general-data {
- .one-line-textarea {
- height: 30px;
+ .general-data {
+ .one-line-textarea {
+ height: 30px;
+ }
+ .multi-line-textarea {
+ height: calc(100% - 25px);
+ textarea {
+ height: inherit;
+ }
+ }
}
- .multi-line-textarea {
- height: calc(100% - 25px);
- textarea {
- height: inherit;
- }
- }
- }
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
index b67c448b54..409b686814 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
@@ -1,67 +1,51 @@
-.image-modal-new {
- .modal-dialog {
- width: 600px;
- }
- .image-filename {
- width: 480px;
- }
-}
-
-.image-modal-edit {
- .modal-dialog {
- width: 910px;
- }
- .image-filename {
- width: 550px;
- }
-}
-
.vsp-components-image-editor {
- .note-text {
- color: $red;
- }
+ .note-text {
+ color: $red;
+ }
}
-.image-modal-edit, .image-modal-new {
- .vsp-components-image-editor {
-
- .image-format, .image-md5, .image-version {
- width: 200px;
- }
- .image-version {
- padding-left: 30px;
- }
- .section-title {
- text-transform: uppercase;
- font-size: 18px;
+.image-modal-edit,
+.image-modal-new {
+ .vsp-components-image-editor {
+ .image-format,
+ .image-md5,
+ .image-version {
+ width: 200px;
+ }
+ .image-version {
+ padding-left: 30px;
+ }
+ .section-title {
+ text-transform: uppercase;
+ font-size: 18px;
+ }
}
- }
}
.vsp-components-image {
- .list-editor-view {
- margin-top: 50px;
- .manual-title {
- @extend .body-1-semibold;
+ .list-editor-view {
+ margin-top: 50px;
+ .manual-title {
+ @extend .body-1-semibold;
+ }
+ }
+ .list-editor-item-view-content {
+ flex: 1;
+ min-width: 0;
+ }
+ .list-editor-item-view-controller {
+ padding-top: 5px;
}
- }
- .list-editor-item-view-content {
- flex:1;
- min-width: 0;
- }
- .list-editor-item-view-controller {
- padding-top: 5px;
- }
- .image-filename-cell {
- display: flex;
- .image-filename {
- white-space: nowrap;
- overflow: hidden;
- display: inline-block;
- text-overflow: ellipsis;
-  span {
- @include ellipsis(100%);
- }
+ .image-filename-cell {
+ display: flex;
+ .image-filename {
+ white-space: nowrap;
+ overflow: hidden;
+ display: inline-block;
+ text-overflow: ellipsis;
+  span {
+ @include ellipsis(100%);
+ }
+ }
}
- }
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
index eaba47acb4..464ef98d11 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
@@ -1,87 +1,85 @@
.vsp-components-network {
- .network-data {
- .single-col {
- .validation-input-wrapper {
- label {
- max-width: 230px;
+ .network-data {
+ .single-col {
+ .validation-input-wrapper {
+ label {
+ max-width: 230px;
+ }
+ }
}
- }
}
- }
- .list-editor-view {
- margin-top: 50px;
- .manual-title {
- @extend .body-1-semibold;
+ .list-editor-view {
+ margin-top: 50px;
+ .manual-title {
+ @extend .body-1-semibold;
+ }
}
- }
}
.network-nic-modal-create {
- .network-type-radio {
- display: flex;
- }
+ .network-type-radio {
+ display: flex;
+ .validation-radio-wrapper:first-child {
+ padding-right: 20px;
+ }
+ }
}
-.network-nic-modal-edit {
- .modal-dialog {
- width: 900px;
- }
- .vsp-components-network-editor {
+.vsp-components-network-editor {
.editor-data {
- height: 500px;
- .grid-section {
- padding-bottom: 15px;
- .section-title {
- @extend .heading-5;
- padding-bottom: 10px;
- padding-left: 0;
+ height: 500px;
+ .grid-section {
+ padding-bottom: 15px;
+ .section-title {
+ @extend .heading-5;
+ padding-bottom: 10px;
+ padding-left: 0;
+ }
}
- }
- .part-title {
- @extend .heading-5;
- padding-bottom: 10px;
- padding-left: 14px;
- }
- .part-title-small {
- @extend .heading-3;
- padding-bottom: 10px;
- padding-left: 0;
- }
- .network-radio label {
- font-size: 15px;
- }
-
- .packets-bytes-gen {
- display: flex;
- justify-content: space-between;
- flex-direction: column;
- .top-row {
- display: flex;
- .part-title-small {
+ .part-title {
+ @extend .heading-5;
+ padding-bottom: 10px;
+ padding-left: 14px;
+ }
+ .part-title-small {
+ @extend .heading-3;
+ padding-bottom: 10px;
padding-left: 0;
- &.packets {
- flex: 0 0 52%;
- }
- &.bytes {
- flex: 0 0 48%;
- }
- }
}
- .bottom-row {
- display: flex;
- justify-content: space-between;
- flex-direction: row;
- flex: 1;
- .inputs-wrapper {
+ .network-radio label {
+ font-size: 15px;
+ }
+
+ .packets-bytes-gen {
display: flex;
- flex-direction: row;
justify-content: space-between;
- flex: 1;
- .validation-input-wrapper {
- flex: 0 0 22%;
+ flex-direction: column;
+ .top-row {
+ display: flex;
+ .part-title-small {
+ padding-left: 0;
+ &.packets {
+ flex: 0 0 52%;
+ }
+ &.bytes {
+ flex: 0 0 48%;
+ }
+ }
+ }
+ .bottom-row {
+ display: flex;
+ justify-content: space-between;
+ flex-direction: row;
+ flex: 1;
+ .inputs-wrapper {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ flex: 1;
+ .validation-input-wrapper {
+ flex: 0 0 22%;
+ }
+ }
}
- }
}
- }
}
- }
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
index 9476d7043d..b3c4800492 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
@@ -1,9 +1,9 @@
.edit-process-modal {
- .component-process-description > textarea {
- height: 113px;
- }
+ .component-process-description > textarea {
+ height: 113px;
+ }
}
.software-product-landing-view-right-side.vsp-components-processes-page {
- overflow-y: initial;
-} \ No newline at end of file
+ overflow-y: initial;
+}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss b/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss
index b788a86e44..8b13789179 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss
@@ -1,39 +1 @@
-.software-product-type-modal {
- .modal-dialog {
- @extend .modal-lg !optional;
- .modal-body {
- padding: 0;
- }
- .validation-form-content {
- padding: 50px;
- .software-product-form-row {
- display: flex;
- justify-content: space-between;
- margin-bottom: 20px;
- .software-product-inline-section {
- padding: 0 20px;
- flex: 45%;
- .validation-input-wrapper {
- .field-section {
- @extend .body-2-semibold;
- margin-bottom: 23px;
- color: $black;
- }
- textarea {
- height: 191px;
- }
- select optgroup[label] {
- color: $dark-blue;
- }
- option {
- color: black;
- }
- }
- }
- }
- }
- .validation-buttons {
- padding: 20px 50px;
- }
- }
-}
+
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
index 65c558fa0e..5358e7c51b 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
@@ -2,22 +2,22 @@
.software-product-dependencies-title {
@extend .heading-1;
@extend .text-uppercase !optional;
- position: sticky;
- top: -30px;
- z-index: 1;
- background: $white;
+ position: sticky;
+ top: -30px;
+ z-index: 1;
+ background: $white;
margin-bottom: 20px;
color: $blue;
}
.select-action-table-controllers {
- position: sticky;
- top: 4px;
- z-index: 1;
- background: $white;
+ position: sticky;
+ top: 4px;
+ z-index: 1;
+ background: $white;
justify-content: flex-end;
cursor: pointer;
color: $blue;
- padding-right: 27px;
+ padding-right: 27px;
margin-bottom: 3px;
&:hover {
color: $dark-blue;
@@ -26,23 +26,24 @@
.select-action-table-view {
min-width: 770px;
}
- .select-action-table-headers {
- position: sticky;
- top: 27px;
- z-index: 1;
- .select-action-table-header {
- @extend .body-1-semibold;
- color: $text-black;
- }
- }
- .select-action-table-row-wrapper {
- .svg-icon {
- &.__trashO, &.__plusCircle {
- fill: $dark-gray;
- &:hover {
- fill: $black;
+ .select-action-table-headers {
+ position: sticky;
+ top: 27px;
+ z-index: 1;
+ .select-action-table-header {
+ @extend .body-1-semibold;
+ color: $text-black;
+ }
+ }
+ .select-action-table-row-wrapper {
+ .svg-icon {
+ &.__trashO,
+ &.__plusCircle {
+ fill: $dark-gray;
+ &:hover {
+ fill: $black;
+ }
+ }
+ }
}
- }
- }
- }
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss b/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss
index b5f9a546d9..85eea9c742 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss
@@ -1,46 +1,38 @@
.deployment-flavor-editor {
- .modal-dialog {
- width: 780px;
- }
- .deployment-feature-groups-section.no-feature-groups {
- padding-bottom: 0;
- .form-group {
- margin-bottom: 5px;
- }
- }
- .deployment-feature-group-warning-section {
- padding-bottom: 30px;
- span {
- @extend .body-2;
- color: $red;
- }
- }
- .grid-section.vfc-table {
- .section-title {
- padding-bottom: 10px;
- }
- }
- .modal-content {
- .modal-body {
- .validation-form-content {
- overflow-y: visible;
- .grid-col-1 {
- flex-basis: 30%;
- }
+ .deployment-feature-groups-section.no-feature-groups {
+ padding-bottom: 0;
+ .form-group {
+ margin-bottom: 5px;
+ }
+ }
+ .deployment-feature-group-warning-section {
+ padding-bottom: 30px;
+ span {
+ @extend .body-2;
+ color: $red;
+ }
+ }
+ .grid-section.vfc-table {
+ .section-title {
+ padding-bottom: 10px;
+ }
+ }
+ &.sdc-modal__content {
+ .validation-form-content {
+ .grid-col-1 {
+ flex-basis: 30%;
+ }
+ .grid-section.vfc-table {
+ padding-bottom: 50px;
+ .Select-menu {
+ max-height: 100px;
+ }
+ }
- .grid-section.vfc-table {
- padding-bottom: 50px;
- .Select-menu {
- max-height: 100px;
- }
-
- }
-
- .grid-col-3 {
- flex-basis: 65%;
- }
- }
- }
- }
+ .grid-col-3 {
+ flex-basis: 65%;
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
index 8d124c3b40..8f0803f6d0 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
@@ -1,276 +1,273 @@
.upload-modal-body-content {
- padding-left: 30px;
- padding-right: 30px;
- padding-bottom: 10px;
- .title {
- @extend .body-1-semibold;
- }
- .file-name {
- padding-left: 5px;
- @extend .body-1-semibold;
- }
+ padding-left: 30px;
+ padding-right: 30px;
+ padding-bottom: 10px;
+ .title {
+ @extend .body-1-semibold;
+ }
+ .file-name {
+ padding-left: 5px;
+ @extend .body-1-semibold;
+ }
}
-
.software-product-view {
- display: flex;
- height:100%;
+ display: flex;
+ height: 100%;
- .description {
- @extend .body-1;
- padding-right: 20px;
+ .description {
+ @extend .body-1;
+ padding-right: 20px;
- .missing-license {
- display: flex;
- align-items: baseline;
- .svg-icon{
- margin-right: 7px;
- margin-left: 3px;
- &.__exclamationTriangleFull {
- fill: $orange;
- width: 17px;
- height: 17px;
+ .missing-license {
+ display: flex;
+ align-items: baseline;
+ .svg-icon {
+ margin-right: 7px;
+ margin-left: 3px;
+ &.__exclamationTriangleFull {
+ fill: $orange;
+ width: 17px;
+ height: 17px;
+ }
+ }
+ .warning-text {
+ position: relative;
+ top: -2px;
+ }
}
- }
- .warning-text {
- position: relative;
- top: -2px;
- }
}
- }
- .name {
- @extend .body-1-semibold;
- }
- .software-product-landing-view-right-side {
- @extend .flex;
- overflow-y: hidden;
- .list-editor-view {
- .list-editor-view-title {
- margin-bottom: 0;
- }
+ .name {
+ @extend .body-1-semibold;
}
- }
- .software-product-landing-view {
- padding-bottom: 50px;
-
-
- .software-product-landing-view-top {
- .details-container {
- @extend .flex-column;
-
- .single-detail-section {
-
- @extend .flex-column;
- &.title-section {
- flex: 0.8;
- @extend .heading-5-semibold;
- }
- &.title-text {
- margin-bottom: 24px;
- }
- .description {
- @include multiline-ellipsis();
- }
- }
- .title {
- @extend .body-3;
- color: $gray;
- &.extra-large {
- min-width: 130px;
- }
- }
- .details-section {
- display: flex;
- }
- .multiple-details-section {
- @extend .flex-column;
- justify-content: space-between;
- .detail-col {
- padding-bottom: 10px;
- }
- }
- }
- .row {
- margin: 0;
- display: flex;
- .details-panel {
- flex: 1;
- margin-right: 50px;
- &:last-child {
- margin-right: 0;
- }
- .software-product-landing-view-top-block-col-upl {
- height: 215px;
- width: initial;
- }
+ .software-product-landing-view-right-side {
+ @extend .flex;
+ overflow-y: hidden;
+ .list-editor-view {
+ .list-editor-view-title {
+ margin-bottom: 0;
+ }
}
- .col-md-6 {
- padding: 0;
+ }
+ .software-product-landing-view {
+ padding-bottom: 50px;
- overflow-wrap: break-word;
- &:first-child {
- padding-right: 25px;
- }
- &:last-child {
- padding-left: 25px;
- }
- }
- .title {
- @extend .body-1-semibold;
- }
- .software-product-landing-view-heading-title {
- @extend .section-title;
- color: $dark-gray;
- padding-bottom: 20px;
- &:first-child {
- padding-bottom: 20px;
- }
- }
- .software-product-landing-view-top-block {
- &.clickable {
- cursor: pointer;
- &:hover {
- @extend .box-hover;
- }
- }
- border: 1px solid $light-gray;
- padding: 20px 18px 0 18px;
- height: 215px;
- display: flex;
- justify-content: space-between;
- background-color: $white;
+ .software-product-landing-view-top {
+ .details-container {
+ @extend .flex-column;
- .col-md-6 {
- @extend .body-1;
- }
- .software-product-landing-view-top-block-col {
- @extend .body-1;
- flex: 0.8;
- display: flex;
- justify-content: space-between;
- flex-direction: column;
- .description {
- overflow: hidden;
- padding-right: 20px;
- }
- .attachment-details {
- padding-bottom: 10px;
- }
- .attachment-details-count {
- color: $light-blue;
+ .single-detail-section {
+ @extend .flex-column;
+ &.title-section {
+ flex: 0.8;
+ @extend .heading-5-semibold;
+ }
+ &.title-text {
+ margin-bottom: 24px;
+ }
+ .description {
+ @include multiline-ellipsis();
+ }
+ }
+ .title {
+ @extend .body-3;
+ color: $gray;
+ &.extra-large {
+ min-width: 130px;
+ }
+ }
+ .details-section {
+ display: flex;
+ }
+ .multiple-details-section {
+ @extend .flex-column;
+ justify-content: space-between;
+ .detail-col {
+ padding-bottom: 10px;
+ }
+ }
}
- }
- }
+ .row {
+ margin: 0;
+ display: flex;
+ .details-panel {
+ flex: 1;
+ margin-right: 50px;
+ &:last-child {
+ margin-right: 0;
+ }
+ .software-product-landing-view-top-block-col-upl {
+ height: 215px;
+ width: initial;
+ }
+ }
+ .col-md-6 {
+ padding: 0;
- .software-product-landing-view-top-block-col-upl {
- @extend .flex;
- height: 215px;
- text-align: center;
- flex-direction: column;
- justify-content: center;
- border: 2px dashed $light-gray;
- margin-bottom: 20px;
- @extend .body-1;
- align-items: center;
- .upload-btn {
- padding: 15px 55px;
+ overflow-wrap: break-word;
+ &:first-child {
+ padding-right: 25px;
+ }
+ &:last-child {
+ padding-left: 25px;
+ }
+ }
+ .title {
+ @extend .body-1-semibold;
+ }
+ .software-product-landing-view-heading-title {
+ @extend .section-title;
+ color: $dark-gray;
+ padding-bottom: 20px;
+ &:first-child {
+ padding-bottom: 20px;
+ }
+ }
+ .software-product-landing-view-top-block {
+ &.clickable {
+ cursor: pointer;
+ &:hover {
+ @extend .box-hover;
+ }
+ }
+ border: 1px solid $light-gray;
+ padding: 20px 18px 0 18px;
+ height: 215px;
+ display: flex;
+ justify-content: space-between;
+ background-color: $white;
- }
- .drag-text {
- color: $blue;
- @extend .body-1-semibold;
- }
- .or-text {
- margin-top: 10px;
- margin-bottom: 10px;
- color: $light-gray;
- }
- .upload {
- width: 50%;
- border : 0px !important;
- }
- .vnfRepo {
- width: 50%;
- cursor: pointer;
- .searchRepo-text {
- color: $blue;
- @extend .body-1-semibold;
- width: 72px;
- line-height: 24px;
- margin-left: auto;
- margin-right: auto;
- }
- .svg-icon-wrapper {
- .svg-icon.__search {
- width: 34px;
- height: 34px;
- margin-top: 10px;
- }
- &.__positive {
- fill: $blue;
- color: $blue;
- }
+ .col-md-6 {
+ @extend .body-1;
+ }
+ .software-product-landing-view-top-block-col {
+ @extend .body-1;
+ flex: 0.8;
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ .description {
+ overflow: hidden;
+ padding-right: 20px;
+ }
+ .attachment-details {
+ padding-bottom: 10px;
+ }
+ .attachment-details-count {
+ color: $light-blue;
+ }
+ }
+ }
+
+ .software-product-landing-view-top-block-col-upl {
+ @extend .flex;
+ height: 215px;
+ text-align: center;
+ flex-direction: column;
+ justify-content: center;
+ border: 2px dashed $light-gray;
+ margin-bottom: 20px;
+ @extend .body-1;
+ align-items: center;
+ .upload-btn {
+ padding: 15px 55px;
+ }
+ .drag-text {
+ color: $blue;
+ @extend .body-1-semibold;
+ }
+ .or-text {
+ margin-top: 10px;
+ margin-bottom: 10px;
+ color: $light-gray;
+ }
+ .upload {
+ width: 50%;
+ border: 0px !important;
+ }
+ .vnfRepo {
+ width: 50%;
+ cursor: pointer;
+ .searchRepo-text {
+ color: $blue;
+ @extend .body-1-semibold;
+ width: 72px;
+ line-height: 24px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ .svg-icon-wrapper {
+ .svg-icon.__search {
+ width: 34px;
+ height: 34px;
+ margin-top: 10px;
+ }
+ &.__positive {
+ fill: $blue;
+ color: $blue;
+ }
+ }
+ }
+ .verticalLine {
+ height: 90%;
+ border-left: 1px solid $light-gray;
+ }
+ }
+ .showVnf {
+ flex-direction: row;
+ }
}
- }
- .verticalLine {
- height: 90%;
- border-left: 1px solid $light-gray;
- }
- }
- .showVnf {
- flex-direction: row;
}
- }
}
- }
}
.vsp-details-page {
- .grid-section-general {
- padding-bottom: 30px;
- }
- .vsp-general-tab {
- .validation-form-content {
- margin: 0;
+ .grid-section-general {
+ padding-bottom: 30px;
}
- .validation-buttons {
- margin: 43px 0;
- padding: 0 52px;
- }
- .validation-form-content {
- .vsp-general-tab-inline-section {
- display: flex;
-
- .vsp-general-tab-sub-section:not(:last-of-type) {
- margin-right: 40px;
+ .vsp-general-tab {
+ .validation-form-content {
+ margin: 0;
}
- .field-section {
- width: 440px;
+ .validation-buttons {
+ margin: 43px 0;
+ padding: 0 52px;
}
- .form-group textarea {
- height: 192px;
- }
- select optgroup[label] {
- color: $dark-blue;
+ .validation-form-content {
+ .vsp-general-tab-inline-section {
+ display: flex;
+
+ .vsp-general-tab-sub-section:not(:last-of-type) {
+ margin-right: 40px;
+ }
+ .field-section {
+ width: 440px;
+ }
+ .form-group textarea {
+ height: 192px;
+ }
+ select optgroup[label] {
+ color: $dark-blue;
+ }
+ option {
+ color: $dark-gray;
+ }
+ .Select,
+ .input-options {
+ width: 440px;
+ }
+ }
}
- option {
- color: $dark-gray;
+ .validation-buttons {
+ position: fixed;
+ display: block;
+ bottom: 0;
+ width: 66%;
}
- .Select, .input-options {
- width: 440px;
+ .validation-input-wrapper {
+ select.form-control {
+ width: 100%;
+ }
}
- }
- }
- .validation-buttons {
- position: fixed;
- display: block;
- bottom: 0;
- width: 66%;
- }
- .validation-input-wrapper {
- select.form-control {
- width: 100%;
- }
}
- }
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
index 3f2a2f9a69..9ec074f09f 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
@@ -1,60 +1,60 @@
.edit-process-modal {
- height: 100%;
- .vsp-processes-editor {
- padding-left: 0;
- padding-right: 0;
- .editor-title {
- @extend .heading-2;
- color: $dark-gray;
- padding-bottom: 50px;
- }
- .file-upload-box {
- @extend .body-1;
- display: flex;
- text-align: center;
- flex-direction: column;
- justify-content: center;
- border: 2px dashed $light-gray;
- padding-top: 20px;
- padding-bottom: 20px;
+ height: 100%;
+ .vsp-processes-editor {
+ padding-left: 0;
+ padding-right: 0;
+ .editor-title {
+ @extend .heading-2;
+ color: $dark-gray;
+ padding-bottom: 50px;
+ }
+ .file-upload-box {
+ @extend .body-1;
+ display: flex;
+ text-align: center;
+ flex-direction: column;
+ justify-content: center;
+ border: 2px dashed $light-gray;
+ padding-top: 20px;
+ padding-bottom: 20px;
- .process-type {
- width: 100%;
- }
- }
- .vsp-processes-editor-data {
- .validation-input-wrapper {
- .form-group.vsp-process-description > textarea {
- height: 113px;
+ .process-type {
+ width: 100%;
+ }
+ }
+ .vsp-processes-editor-data {
+ .validation-input-wrapper {
+ .form-group.vsp-process-description > textarea {
+ height: 113px;
+ }
+ }
+ .process-type {
+ width: 100%;
+ }
+ .process-editor-file-box {
+ width: 380px;
+ }
}
- }
- .process-type {
- width: 100%;
- }
- .process-editor-file-box {
- width: 380px;
- }
}
- }
}
.software-product-landing-view-right-side.vsp-processes-page {
- overflow-y: initial;
- .processes-list {
- @extend .flex-column;
- }
- .list-editor-view {
- .list-editor-view-list {
- .list-editor-item-view {
- .list-editor-item-view-content {
- .list-editor-item-view-field {
- .artifact-name {
- @extend .body-1;
- color: $light-green;
+ overflow-y: initial;
+ .processes-list {
+ @extend .flex-column;
+ }
+ .list-editor-view {
+ .list-editor-view-list {
+ .list-editor-item-view {
+ .list-editor-item-view-content {
+ .list-editor-item-view-field {
+ .artifact-name {
+ @extend .body-1;
+ color: $light-green;
+ }
+ }
+ }
}
- }
}
- }
}
- }
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
index 440b2424df..00f3ae4567 100644
--- a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
@@ -1,35 +1,35 @@
.vsp-components-load-balancing {
- .svg-icon-wrapper {
- position: relative;
- top: -4px;
- }
+ .svg-icon-wrapper {
+ position: relative;
+ top: -4px;
+ }
- .halb-data {
- .question {
- padding-top: 10px;
- &:first-child {
- padding-top: 0;
- }
- }
- .title {
- @extend .body-1-semibold;
- margin-bottom: 8px;
- cursor: pointer;
- .svg-icon {
- @include transition(transform 0.3s);
- margin-right: 5px;
- position: relative;
- top: 4px;
- }
- }
- .add-padding {
- padding-bottom: 20px;
- }
- .new-line {
- margin-left: 16px;
- }
- textarea.form-control {
- height: 90px;
- }
- }
+ .halb-data {
+ .question {
+ padding-top: 10px;
+ &:first-child {
+ padding-top: 0;
+ }
+ }
+ .title {
+ @extend .body-1-semibold;
+ margin-bottom: 8px;
+ cursor: pointer;
+ .svg-icon {
+ @include transition(transform 0.3s);
+ margin-right: 5px;
+ position: relative;
+ top: 4px;
+ }
+ }
+ .add-padding {
+ padding-bottom: 20px;
+ }
+ .new-line {
+ margin-left: 16px;
+ }
+ textarea.form-control {
+ height: 90px;
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_uploadScreen.scss b/openecomp-ui/resources/scss/modules/_uploadScreen.scss
index 23f41c8816..1c3ed2ada1 100644
--- a/openecomp-ui/resources/scss/modules/_uploadScreen.scss
+++ b/openecomp-ui/resources/scss/modules/_uploadScreen.scss
@@ -1,32 +1,32 @@
.heat-validation-stand-alone {
- .upload-screen {
- margin-top: 100px;
- .title {
- text-align: center;
- margin-bottom: 50px;
+ .upload-screen {
+ margin-top: 100px;
+ .title {
+ text-align: center;
+ margin-bottom: 50px;
+ }
}
- }
- .attachments-screen {
- .back-button {
- z-index: 1000;
- position: absolute;
- top: 20px;
- right: 20px;
- width: 200px;
- }
- .software-product-attachments {
- display: block;
- .software-product-view {
- display: block;
- .software-product-landing-view-right-side {
- display: block;
- .software-product-attachments-main {
- display: flex;
- height: 100vh;
- }
+ .attachments-screen {
+ .back-button {
+ z-index: 1000;
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ width: 200px;
+ }
+ .software-product-attachments {
+ display: block;
+ .software-product-view {
+ display: block;
+ .software-product-landing-view-right-side {
+ display: block;
+ .software-product-attachments-main {
+ display: flex;
+ height: 100vh;
+ }
+ }
+ }
}
- }
}
- }
}
diff --git a/openecomp-ui/resources/scss/modules/_versionsPage.scss b/openecomp-ui/resources/scss/modules/_versionsPage.scss
index 5651c89032..c29230198a 100644
--- a/openecomp-ui/resources/scss/modules/_versionsPage.scss
+++ b/openecomp-ui/resources/scss/modules/_versionsPage.scss
@@ -1,360 +1,361 @@
.dox-ui-punch-out {
- background-color: $content-background-color;
+ background-color: $content-background-color;
}
.dox-ui-punch-out.dox-ui-punch-out-full-page {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- overflow-y: auto;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ overflow-y: auto;
}
@mixin version-page-box-shadow() {
- box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06);
+ box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06);
}
-@mixin version-page-sub-title(){
- color: $text-black;
- text-transform: uppercase;
- background-color: $white;
- border-bottom: 1px solid $light-gray;
- padding: 12px 0 10px 23px;
+@mixin version-page-sub-title() {
+ color: $text-black;
+ text-transform: uppercase;
+ background-color: $white;
+ border-bottom: 1px solid $light-gray;
+ padding: 12px 0 10px 23px;
}
.versions-tree-modal {
- .modal-dialog {
- width: 800px;
- }
-
- .tree-view {
- display: flex;
- align-items: center;
- }
+ .tree-view {
+ display: flex;
+ align-items: center;
+ }
}
.versions-page-view {
- height: 100%;
- background-color: $background-gray;
- overflow: auto;
- padding: 35px 50px 20px 50px;
-
- .svg-icon-wrapper {
- justify-content: flex-start;
- }
- .version-page-header {
- display: flex;
- justify-content: space-between;
- .versions-page-title {
- @extend .heading-1;
- text-transform: uppercase;
- margin-bottom: 29px;
- color: $blue;
- display: flex;
- .archived-title {
- @extend .body-3;
- color: $white;
- background-color: $dark-purple;
- margin-left: 20px;
- border-radius: 3px;
- padding: 1px 10px;
- align-self: center;
- text-transform: none;
- }
- }
- .deprecate-btn-wrapper {
- display: flex;
- justify-content: flex-end;
- margin-bottom: 10px;
- align-self: center;
- .svg-icon-wrapper {
- &:hover {
- fill: $light-blue;
- }
- .svg-icon {
- width: 24px;
- height: 24px;
- }
- }
- }
- }
- .versions-page-permissions-view-wrapper {
- @extend .body-1-semibold;
- @include version-page-box-shadow();
-
- .permissions-view-wrapper-title {
- @include version-page-sub-title();
- }
-
- .svg-icon-wrapper.user-view {
- fill: transparent;
- stroke: $blue;
- .svg-icon {
- height: 18px;
- width: 16px;
- margin: 0 7px;
- }
- &.current-user {
- .svg-icon {
- background-color: $blue;
- stroke: $white;
- padding-top: 5px;
- padding-bottom: 3px;
- height: 29px;
- width: 29px;
- border-radius: 20px;
- border: 1px solid $blue;
- box-shadow: inset 0px 0px 0px 2px $white;
- margin: 0;
- }
- .svg-icon-label {
- margin-left: 7px;
- }
- }
- .svg-icon-label {
- @extend .body-2;
- color: $dark-gray;
- margin-left: 6px;
- }
- }
-
- .permissions-view-content {
- padding: 20px 40px 20px 25px;
- background-color: $white;
-
- height: 120px;
- display: flex;
- }
-
- .permissions-view {
- display: flex;
- flex: 1;
- flex-direction: column;
- justify-content: space-around;
-
- .permissions-view-title {
- text-transform: uppercase;
- color: $dark-gray;
- }
-
- .contributors-view, .owner-view {
- display: flex;
- height: 16px;
- @extend .body-1-semibold;
-
- .permissions-view-title {
- width: 130px;
- line-height: 16px;
- }
-
- .extra-contributors {
- border-radius: 30px;
- background-color: $gray;
- width: 26px;
- height: 26px;
- padding-right: 2px;
- display: flex;
- align-items: center;
- justify-content: center;
- color: $white;
- cursor: default;
- &:hover {
- background-color: $dark-gray;
- }
- }
-
- .user-view {
- margin-right: 38px;
- }
-
- .manage-permissions {
- color: $blue;
- margin-left: auto;
- cursor: pointer;
-
- &:hover {
- color: $dark-blue;
- }
- }
- }
- }
- }
-
- .versions-page-list-and-tree {
- display: flex;
- margin-top: 20px;
-
- .version-tree-wrapper {
- display: flex;
- flex-direction: column;
- margin-right:10px;
- transition: all 1s ease;
- @include version-page-box-shadow();
-
- .version-tree-title-container {
- display: flex;
- align-items: center;
- height: 40px;
- @include version-page-sub-title();
- padding-right: 10px;
-
- .version-tree-full-screen {
- margin-left: auto;
- }
- }
-
- .tree-view {
- background-color: $white;
- flex: 1;
-
- .node:not(.selectedNode):hover {
- .outer-circle, .inner-circle {
- transform: scale(1.1);
- }
- }
- }
- }
- }
-
- .version-list {
- flex: 1;
- @extend .body-1-semibold;
- color: $text-black;
- display: flex;
- flex-direction: column;
-
- .version-list-items {
- flex: 1;
- display: flex;
- flex-direction: column;
-
- .version-item-row {
- border-bottom: 1px solid $tlv-light-gray;
-
- &:last-child {
- border-bottom: none;
- }
- }
- }
-
- .version-item-row {
- $row-hover-color: lighten($blue, 54%);
- $row-active-color: lighten($blue, 51%);
-
- display: flex;
- align-items: center;
- padding: 15px 30px;
- @include version-page-box-shadow();
- background-color: $white;
- height: 70px;
-
- &:hover {
- background-color: $row-hover-color;
- }
-
- &.selected {
- box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 $blue;
- background-color: $row-active-color;
-
- &:hover {
- box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 lighten($blue, 35%);
- }
- }
-
- &.header-row {
- height: 40px;
-
- @extend .body-1-semibold;
- @include version-page-sub-title();
- padding: 15px 27px;
-
- &:hover {
- background-color: $white;
- pointer-events: none;
- &:active {
- background-color: $white;
- @include version-page-box-shadow();
- }
- }
- .header-field.actions {
- margin-right: 57px;
- }
- }
-
- .version-item-field {
- flex: 1;
- display: flex;
- margin-right: 10px;
-
- &.item-version, &.item-status {
- flex: 0 1 10%;
- @extend .body-1-semibold;
- color: $text-black;
- }
-
- &.item-description, &.item-last-edited {
- @extend .body-1;
- color: $dark-gray;
- }
-
- &.item-description, &.header-description {
- flex: 2 1 0;
- }
-
- &.item-description > .description-text {
- margin-right: 10px;
- @include ellipsis($max-width: 300px);
- width: initial;
- }
-
- &.item-actions {
- display: flex;
- flex: 1 1 3%;
- justify-content: space-between;
- }
-
- &.item-select, &.item-create {
- @extend .body-1;
- flex: 0 1 auto;
- margin-right: 0;
-
- .svg-icon-wrapper {
- fill: $blue;
- color: $blue;
-
- &[disabled] {
- cursor: default;
- }
-
- .svg-icon {
- width: 16px;
- height: 16px;
- }
-
- &:hover:not([disabled]) {
- fill: $dark-blue;
- color: $dark-blue;
- }
- }
- }
-
- }
-
- /* To keep ellipsis hider's background the same color as row background */
- &:not(.selected):hover .item-description > .description-text:after {
- background: $row-hover-color;
- }
-
- &:hover:active .item-description > .description-text:after {
- background: $row-active-color;
- }
-
- }
-
- }
-
- &.clickable {
- cursor: pointer;
- }
+ height: 100%;
+ background-color: $background-gray;
+ overflow: auto;
+ padding: 35px 50px 20px 50px;
+
+ .svg-icon-wrapper {
+ justify-content: flex-start;
+ }
+ .version-page-header {
+ display: flex;
+ justify-content: space-between;
+ .versions-page-title {
+ @extend .heading-1;
+ text-transform: uppercase;
+ margin-bottom: 29px;
+ color: $blue;
+ display: flex;
+ .archived-title {
+ @extend .body-3;
+ color: $white;
+ background-color: $dark-purple;
+ margin-left: 20px;
+ border-radius: 3px;
+ padding: 1px 10px;
+ align-self: center;
+ text-transform: none;
+ }
+ }
+ .deprecate-btn-wrapper {
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 10px;
+ align-self: center;
+ .svg-icon-wrapper {
+ &:hover {
+ fill: $light-blue;
+ }
+ .svg-icon {
+ width: 24px;
+ height: 24px;
+ }
+ }
+ }
+ }
+ .versions-page-permissions-view-wrapper {
+ @extend .body-1-semibold;
+ @include version-page-box-shadow();
+
+ .permissions-view-wrapper-title {
+ @include version-page-sub-title();
+ }
+
+ .svg-icon-wrapper.user-view {
+ fill: transparent;
+ stroke: $blue;
+ .svg-icon {
+ height: 18px;
+ width: 16px;
+ margin: 0 7px;
+ }
+ &.current-user {
+ .svg-icon {
+ background-color: $blue;
+ stroke: $white;
+ padding-top: 5px;
+ padding-bottom: 3px;
+ height: 29px;
+ width: 29px;
+ border-radius: 20px;
+ border: 1px solid $blue;
+ box-shadow: inset 0px 0px 0px 2px $white;
+ margin: 0;
+ }
+ .svg-icon-label {
+ margin-left: 7px;
+ }
+ }
+ .svg-icon-label {
+ @extend .body-2;
+ color: $dark-gray;
+ margin-left: 6px;
+ }
+ }
+
+ .permissions-view-content {
+ padding: 20px 40px 20px 25px;
+ background-color: $white;
+
+ height: 120px;
+ display: flex;
+ }
+
+ .permissions-view {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ justify-content: space-around;
+
+ .permissions-view-title {
+ text-transform: uppercase;
+ color: $dark-gray;
+ }
+
+ .contributors-view,
+ .owner-view {
+ display: flex;
+ height: 16px;
+ @extend .body-1-semibold;
+
+ .permissions-view-title {
+ width: 130px;
+ line-height: 16px;
+ }
+
+ .extra-contributors {
+ border-radius: 30px;
+ background-color: $gray;
+ width: 26px;
+ height: 26px;
+ padding-right: 2px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: $white;
+ cursor: default;
+ &:hover {
+ background-color: $dark-gray;
+ }
+ }
+
+ .user-view {
+ margin-right: 38px;
+ }
+
+ .manage-permissions {
+ color: $blue;
+ margin-left: auto;
+ cursor: pointer;
+
+ &:hover {
+ color: $dark-blue;
+ }
+ }
+ }
+ }
+ }
+
+ .versions-page-list-and-tree {
+ display: flex;
+ margin-top: 20px;
+
+ .version-tree-wrapper {
+ display: flex;
+ flex-direction: column;
+ margin-right: 10px;
+ transition: all 1s ease;
+ @include version-page-box-shadow();
+
+ .version-tree-title-container {
+ display: flex;
+ align-items: center;
+ height: 40px;
+ @include version-page-sub-title();
+ padding-right: 10px;
+
+ .version-tree-full-screen {
+ margin-left: auto;
+ }
+ }
+
+ .tree-view {
+ background-color: $white;
+ flex: 1;
+
+ .node:not(.selectedNode):hover {
+ .outer-circle,
+ .inner-circle {
+ transform: scale(1.1);
+ }
+ }
+ }
+ }
+ }
+
+ .version-list {
+ flex: 1;
+ @extend .body-1-semibold;
+ color: $text-black;
+ display: flex;
+ flex-direction: column;
+
+ .version-list-items {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+
+ .version-item-row {
+ border-bottom: 1px solid $tlv-light-gray;
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+ }
+
+ .version-item-row {
+ $row-hover-color: lighten($blue, 54%);
+ $row-active-color: lighten($blue, 51%);
+
+ display: flex;
+ align-items: center;
+ padding: 15px 30px;
+ @include version-page-box-shadow();
+ background-color: $white;
+ height: 70px;
+
+ &:hover {
+ background-color: $row-hover-color;
+ }
+
+ &.selected {
+ box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06),
+ inset 5px 0 0 0 $blue;
+ background-color: $row-active-color;
+
+ &:hover {
+ box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06),
+ inset 5px 0 0 0 lighten($blue, 35%);
+ }
+ }
+
+ &.header-row {
+ height: 40px;
+
+ @extend .body-1-semibold;
+ @include version-page-sub-title();
+ padding: 15px 27px;
+
+ &:hover {
+ background-color: $white;
+ pointer-events: none;
+ &:active {
+ background-color: $white;
+ @include version-page-box-shadow();
+ }
+ }
+ .header-field.actions {
+ margin-right: 57px;
+ }
+ }
+
+ .version-item-field {
+ flex: 1;
+ display: flex;
+ margin-right: 10px;
+
+ &.item-version,
+ &.item-status {
+ flex: 0 1 10%;
+ @extend .body-1-semibold;
+ color: $text-black;
+ }
+
+ &.item-description,
+ &.item-last-edited {
+ @extend .body-1;
+ color: $dark-gray;
+ }
+
+ &.item-description,
+ &.header-description {
+ flex: 2 1 0;
+ }
+
+ &.item-description > .description-text {
+ margin-right: 10px;
+ @include ellipsis($max-width: 300px);
+ width: initial;
+ }
+
+ &.item-actions {
+ display: flex;
+ flex: 1 1 3%;
+ justify-content: space-between;
+ }
+
+ &.item-select,
+ &.item-create {
+ @extend .body-1;
+ flex: 0 1 auto;
+ margin-right: 0;
+
+ .svg-icon-wrapper {
+ fill: $blue;
+ color: $blue;
+
+ &[disabled] {
+ cursor: default;
+ }
+
+ .svg-icon {
+ width: 16px;
+ height: 16px;
+ }
+
+ &:hover:not([disabled]) {
+ fill: $dark-blue;
+ color: $dark-blue;
+ }
+ }
+ }
+ }
+
+ /* To keep ellipsis hider's background the same color as row background */
+ &:not(.selected):hover .item-description > .description-text:after {
+ background: $row-hover-color;
+ }
+
+ &:hover:active .item-description > .description-text:after {
+ background: $row-active-color;
+ }
+ }
+ }
+
+ &.clickable {
+ cursor: pointer;
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss b/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss
deleted file mode 100644
index 9f88e94393..0000000000
--- a/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-
-.compute-flavor-editor-modal-edit {
- .modal-lg {
- width: 1182px;
- }
-} \ No newline at end of file
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
index 14bad18179..867749d8e9 100644
--- a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
+++ b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
@@ -1,24 +1,22 @@
-
.vsp-component-monitoring {
- .dropzone {
- &:not(:last-child) {
- padding-bottom: 50px;
- }
+ .dropzone {
+ &:not(:last-child) {
+ padding-bottom: 50px;
+ }
- .monitoring-file {
- display: flex;
- .filename {
- opacity: 1;
- width: auto;
- border-right-style: none;
- }
- .delete {
- display: flex;
- width: 30px;
- justify-content: center;
- align-items: center;
- }
+ .monitoring-file {
+ display: flex;
+ .filename {
+ opacity: 1;
+ width: auto;
+ border-right-style: none;
+ }
+ .delete {
+ display: flex;
+ width: 30px;
+ justify-content: center;
+ align-items: center;
+ }
+ }
}
- }
-
}
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
index 2a99263285..8a7575fd97 100644
--- a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
+++ b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
@@ -1,48 +1,47 @@
-
.vsp-component-questionnaire-view {
- input[type='checkbox'] {
- &:before {
- border: 1px solid $dark-gray;
- cursor: pointer;
- }
- &:checked:before {
- border: 1px solid $blue;
- }
- }
- .component-questionnaire-validation-form {
-
- .section-field {
- textarea {
- height: 80px;
- }
+ input[type='checkbox'] {
+ &:before {
+ border: 1px solid $dark-gray;
+ cursor: pointer;
+ }
+ &:checked:before {
+ border: 1px solid $blue;
+ }
}
-
- .rows-section, .grid-items {
- .row-flex-components {
- display: flex;
- }
-
- .vertical-flex {
- flex-direction: column;
- .control-label {
- @extend .body-2-semibold;
+ .component-questionnaire-validation-form {
+ .section-field {
+ textarea {
+ height: 80px;
+ }
}
- .radio-options-content-row {
- display: flex;
- margin-top: -4px;
- .validation-radio-wrapper {
- margin-right: 20px;
- & > .form-group {
- display: flex;
+ .rows-section,
+ .grid-items {
+ .row-flex-components {
+ display: flex;
}
- .form-group .sdc-radio {
- width: auto;
- margin-right: 0;
+
+ .vertical-flex {
+ flex-direction: column;
+ .control-label {
+ @extend .body-2-semibold;
+ }
+ .radio-options-content-row {
+ display: flex;
+ margin-top: -4px;
+ .validation-radio-wrapper {
+ margin-right: 20px;
+
+ & > .form-group {
+ display: flex;
+ }
+ .form-group .sdc-radio {
+ width: auto;
+ margin-right: 0;
+ }
+ }
+ }
}
- }
}
- }
}
- }
}
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;
+ }
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_workflows.scss b/openecomp-ui/resources/scss/modules/_workflows.scss
index 894b6e7973..c7ce4521f5 100644
--- a/openecomp-ui/resources/scss/modules/_workflows.scss
+++ b/openecomp-ui/resources/scss/modules/_workflows.scss
@@ -1,27 +1,19 @@
-
.workflows {
- position: absolute;
- bottom: 0;
- right: 0;
- left: 0;
- top: 0;
-
- background-color: $background-gray;
- .list-editor-view-list .list-editor-item-view .list-editor-item-view-content .list-editor-item-view-field:last-child {
- flex: 2 1;
- }
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ top: 0;
- .list-editor-view {
- padding: 30px 50px;
- }
-
-}
+ background-color: $background-gray;
+ .list-editor-view-list
+ .list-editor-item-view
+ .list-editor-item-view-content
+ .list-editor-item-view-field:last-child {
+ flex: 2 1;
+ }
-.workflows-editor-modal {
- .modal-body {
- padding: 0;
- }
- .validation-form-content {
- padding: 15px;
- }
+ .list-editor-view {
+ padding: 30px 50px;
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
index e3fc6a9143..1b6459a429 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
@@ -13,7 +13,7 @@
height: 34px;
color: $blue;
font-weight: bolder;
- text-transform: uppercase;
+ text-transform: uppercase;
}
.sdc-accordion {
padding-left: 18px;
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
index 0a234a5a96..429d6cc3d3 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
@@ -1,33 +1,33 @@
.catalog-header {
- margin: 34px 0 29px 50px;
- display: flex;
- flex-direction: row;
- .expandable-input-top {
- margin-right: 60px;
- }
- &.workspace-header {
- @extend .heading-1;
- color: $blue;
- }
- .catalog-header-tabs {
- display: flex;
- flex-direction: row;
- .tab-separator {
- position: relative;
- top: 8px;
- }
- .catalog-header-tab {
- @extend .heading-1;
- cursor: pointer;
- padding: 0 15px 0 15px;
- display: flex;
- align-items: center;
- &.active {
- color: $blue;
- }
- &:first-child {
- padding-left: 0;
- }
- }
- }
+ margin: 34px 0 29px 50px;
+ display: flex;
+ flex-direction: row;
+ .expandable-input-top {
+ margin-right: 60px;
+ }
+ &.workspace-header {
+ @extend .heading-1;
+ color: $blue;
+ }
+ .catalog-header-tabs {
+ display: flex;
+ flex-direction: row;
+ .tab-separator {
+ position: relative;
+ top: 8px;
+ }
+ .catalog-header-tab {
+ @extend .heading-1;
+ cursor: pointer;
+ padding: 0 15px 0 15px;
+ display: flex;
+ align-items: center;
+ &.active {
+ color: $blue;
+ }
+ &:first-child {
+ padding-left: 0;
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss
index 11a739d004..c632beb382 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss
@@ -1,39 +1,37 @@
.catalog-list {
- height: 100%;
- overflow: auto;
- display: flex;
- flex-direction: column;
- padding: 0 10px 0 42px;
- .catalog-title {
- @extend .heading-1;
- color: $blue;
- margin:0 0 12px 18px;
- }
+ height: 100%;
+ overflow: auto;
+ display: flex;
+ flex-direction: column;
+ padding: 0 10px 0 42px;
+ .catalog-title {
+ @extend .heading-1;
+ color: $blue;
+ margin: 0 0 12px 18px;
+ }
- .catalog-items {
- display: flex;
- flex-wrap: wrap;
- @import "tile";
- @import "createItemTile";
- @import "catalogTile";
- @import "vendorTile";
- @import "vlmTile";
- &:after {
- content: " ";
- height: 250px;
- display: block;
- width: 100%;
- }
- .venodor-tile-btn {
- border: 1px solid $light-gray;
- color: $black;
- line-height: 20px;
- &:hover {
- background-color: $light-gray;
- }
- }
- }
-
- // Bottom spacing - cross browser solution
+ .catalog-items {
+ display: flex;
+ flex-wrap: wrap;
+ @import 'tile';
+ @import 'createItemTile';
+ @import 'catalogTile';
+ @import 'vendorTile';
+ &:after {
+ content: ' ';
+ height: 250px;
+ display: block;
+ width: 100%;
+ }
+ .venodor-tile-btn {
+ border: 1px solid $light-gray;
+ color: $black;
+ line-height: 20px;
+ &:hover {
+ background-color: $light-gray;
+ }
+ }
+ }
+ // Bottom spacing - cross browser solution
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
index 612ec495cd..a2c7997266 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
@@ -1,147 +1,144 @@
.catalog-tile {
- &:hover {
- box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
- border: 1px solid $light-gray;
- }
- .catalog-tile-top {
- position: relative;
- flex: 1;
- display: flex;
- padding-top: 29px;
- padding-left: 10px;
- align-items: flex-start;
- flex-direction: column;
- .catalog-tile-content {
- margin-top: auto;
- width: 180px;
- }
-
- .catalog-tile-type {
- display: block;
- margin-top: -25px;
- font-size: $heading-font-5;
- &.license-model-type {
- color: $purple;
- }
- &.software-product-type {
- color: $blue;
- }
- }
- .catalog-tile-entity-details {
- margin-top: 20px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- flex: 0.8;
- .catalog-tile-version-info {
- display: flex;
- justify-content: space-between;
-
- .catalog-tile-item-version {
- @extend .body-2;
- line-height: 6px;
- }
- }
- .catalog-tile-vendor-name {
- @extend .body-3;
- flex: 0.4;
- align-self: baseline;
- color: $gray;
- line-height: 10px;
- &:first-letter {
- text-transform: capitalize;
+ &:hover {
+ box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
+ border: 1px solid $light-gray;
}
- @include ellipsis(auto, inline-block, 178px);
- }
-
- }
- .catalog-tile-item-name {
- @extend .heading-5-semibold;
- color: $black;
- @include ellipsis(auto, inline-block, 175px);
- line-height: inherit;
- &:first-letter {
- text-transform: capitalize;
- }
- }
- }
- .catalog-tile-icon {
+ .catalog-tile-top {
+ position: relative;
+ flex: 1;
+ display: flex;
+ padding-top: 29px;
+ padding-left: 10px;
+ align-items: flex-start;
+ flex-direction: column;
+ .catalog-tile-content {
+ margin-top: auto;
+ width: 180px;
+ }
- width: 58px;
- height: 58px;
- text-align: center;
- justify-content: center;
- display: flex;
+ .catalog-tile-type {
+ display: block;
+ margin-top: -25px;
+ font-size: $heading-font-5;
+ &.license-model-type {
+ color: $purple;
+ }
+ &.software-product-type {
+ color: $blue;
+ }
+ }
+ .catalog-tile-entity-details {
+ margin-top: 20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ flex: 0.8;
+ .catalog-tile-version-info {
+ display: flex;
+ justify-content: space-between;
- .icon {
- align-self: center;
- height: 58px;
- width: 58px;
- margin-left: 122px;
- background-repeat: no-repeat;
- .svg-icon {
- &.__vendor {
- fill: $dark-gray;
- &:hover {
- fill: $dark-gray;
- }
- margin-top: 22px;
- }
- &.__vsp {
- fill: $light-blue;
- }
- margin-top: 18px;
- margin-left: 3px;
- &.__vlm {
- margin-top: 18px;
- fill: $purple;
- }
- }
- }
- }
- .catalog-tile-content {
- border-top: 1px solid $background-gray;
- padding-top: 5px;
- display: flex;
- justify-content: space-between;
- margin-top: 2px;
- padding-bottom: 3px;
- @extend .body-2-semibold;
- .svg-icon {
- &.__plus {
- width: 20px;
- height: 20px;
- fill: $blue;
- }
- }
- .catalog-tile-item-details {
- overflow: hidden;
- }
+ .catalog-tile-item-version {
+ @extend .body-2;
+ line-height: 6px;
+ }
+ }
+ .catalog-tile-vendor-name {
+ @extend .body-3;
+ flex: 0.4;
+ align-self: baseline;
+ color: $gray;
+ line-height: 10px;
+ &:first-letter {
+ text-transform: capitalize;
+ }
+ @include ellipsis(auto, inline-block, 178px);
+ }
+ }
+ .catalog-tile-item-name {
+ @extend .heading-5-semibold;
+ color: $black;
+ @include ellipsis(auto, inline-block, 175px);
+ line-height: inherit;
+ &:first-letter {
+ text-transform: capitalize;
+ }
+ }
+ }
+ .catalog-tile-icon {
+ width: 58px;
+ height: 58px;
+ text-align: center;
+ justify-content: center;
+ display: flex;
- .catalog-tile-add-new-vsp {
- color: $blue;
- .svg-icon {
- &.__plus {
- width: 20px;
- height: 20px;
+ .icon {
+ align-self: center;
+ height: 58px;
+ width: 58px;
+ margin-left: 122px;
+ background-repeat: no-repeat;
+ .svg-icon {
+ &.__vendor {
+ fill: $dark-gray;
+ &:hover {
+ fill: $dark-gray;
+ }
+ margin-top: 22px;
+ }
+ &.__vsp {
+ fill: $light-blue;
+ }
+ margin-top: 18px;
+ margin-left: 3px;
+ &.__vlm {
+ margin-top: 18px;
+ fill: $purple;
+ }
+ }
+ }
+ }
+ .catalog-tile-content {
+ border-top: 1px solid $background-gray;
+ padding-top: 5px;
+ display: flex;
+ justify-content: space-between;
+ margin-top: 2px;
+ padding-bottom: 3px;
+ @extend .body-2-semibold;
+ .svg-icon {
+ &.__plus {
+ width: 20px;
+ height: 20px;
+ fill: $blue;
+ }
+ }
+ .catalog-tile-item-details {
+ overflow: hidden;
+ }
- }
- }
- margin-left: 40px;
- }
- .catalog-tile-locking-user-name {
- @extend .body-2;
- @include ellipsis(auto, inline-block, 180px);
- }
- .catalog-tile-check-in-status {
- .svg-icon {
- &.__locked {
- fill: $gray;
- }
- &.__unlocked {
- fill: $gray;
- }
- }
- }
- }
+ .catalog-tile-add-new-vsp {
+ color: $blue;
+ .svg-icon {
+ &.__plus {
+ width: 20px;
+ height: 20px;
+ }
+ }
+ margin-left: 40px;
+ }
+ .catalog-tile-locking-user-name {
+ @extend .body-2;
+ @include ellipsis(auto, inline-block, 180px);
+ }
+ .catalog-tile-check-in-status {
+ .svg-icon {
+ &.__locked {
+ fill: $gray;
+ }
+ &.__unlocked {
+ fill: $gray;
+ }
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
index d17dcdd685..9838e65b10 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
@@ -1,73 +1,77 @@
.create-catalog-item-wrapper {
- width: 204px;
- height: 200px;
- display: flex;
- flex-direction: column;
- margin: 9px;
+ width: 204px;
+ height: 200px;
+ display: flex;
+ flex-direction: column;
+ margin: 9px;
- .tile.create-catalog-item {
- margin: 9px 0 9px 0;
- display: flex;
- background-color: $white;
- &:first-child{margin-top: 0;}
- &:last-child{margin-bottom: 0;}
- flex-direction: row;
- align-items: center;
- justify-content: center;
- &.disabled {
- color: $gray;
- .create-item-plus-icon {
- fill: $gray;
- }
- }
- &:hover {
- box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
+ .tile.create-catalog-item {
+ margin: 9px 0 9px 0;
+ display: flex;
+ background-color: $white;
+ &:first-child {
+ margin-top: 0;
+ }
+ &:last-child {
+ margin-bottom: 0;
+ }
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ &.disabled {
+ color: $gray;
+ .create-item-plus-icon {
+ fill: $gray;
+ }
+ }
+ &:hover {
+ box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
- border: 1px solid $light-gray;
- }
- &:only-child {
- text-align: center;
- flex-direction: column;
- justify-content: center;
- .create-item-plus-icon {
- margin: 0 0 15px 0;
- }
- .create-item-text {
- @extend .heading-4-semibold;
- }
- }
- .create-item-plus-icon{
- margin: -5px 12px 0 0;
- height: 19px;
- width: 19px;
- .svg-icon {
- &.__plus {
- width: 19px;
- height: 19px;
- }
- }
- }
- &.vlm-type {
- .create-item-text {
- color: $purple;
- }
+ border: 1px solid $light-gray;
+ }
+ &:only-child {
+ text-align: center;
+ flex-direction: column;
+ justify-content: center;
+ .create-item-plus-icon {
+ margin: 0 0 15px 0;
+ }
+ .create-item-text {
+ @extend .heading-4-semibold;
+ }
+ }
+ .create-item-plus-icon {
+ margin: -5px 12px 0 0;
+ height: 19px;
+ width: 19px;
+ .svg-icon {
+ &.__plus {
+ width: 19px;
+ height: 19px;
+ }
+ }
+ }
+ &.vlm-type {
+ .create-item-text {
+ color: $purple;
+ }
- .create-item-plus-icon {
- fill: $purple;
- }
- }
- &.vsp-type {
- .create-item-text {
- color: $blue;
- }
+ .create-item-plus-icon {
+ fill: $purple;
+ }
+ }
+ &.vsp-type {
+ .create-item-text {
+ color: $blue;
+ }
- .create-item-plus-icon {
- fill: $blue;
- }
- }
- .create-item-text {
- width: 140px;
- @extend .heading-5-semibold;
- }
- }
+ .create-item-plus-icon {
+ fill: $blue;
+ }
+ }
+ .create-item-text {
+ width: 140px;
+ @extend .heading-5-semibold;
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
index f97641cbe3..5f8446b9ff 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
@@ -1,32 +1,32 @@
.onboard-header {
- padding-top: 8px;
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
- background-color: $tlv-light-gray;
- margin-bottom: 2px;
- padding-left: 60px;
- padding-right: 40px;
- @include box-shadow(0px 1px 3px 0 rgba(0, 0, 0, 0.2));
- .expandable-input-top {
- margin-right: 20px;
- margin-left: auto;
- }
- .onboard-header-tabs {
- display: flex;
- flex-direction: row;
- .onboard-header-tab {
- @extend .body-1-semibold;
- margin-right: 40px;
- cursor: pointer;
- display: flex;
- padding-bottom: 5px;
- align-items: flex-end;
- &.active {
- color: $blue;
- padding-bottom: 2px;
- border-bottom: 3px solid $blue;
- }
- }
- }
+ padding-top: 8px;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ background-color: $tlv-light-gray;
+ margin-bottom: 2px;
+ padding-left: 60px;
+ padding-right: 40px;
+ @include box-shadow(0px 1px 3px 0 rgba(0, 0, 0, 0.2));
+ .expandable-input-top {
+ margin-right: 20px;
+ margin-left: auto;
+ }
+ .onboard-header-tabs {
+ display: flex;
+ flex-direction: row;
+ .onboard-header-tab {
+ @extend .body-1-semibold;
+ margin-right: 40px;
+ cursor: pointer;
+ display: flex;
+ padding-bottom: 5px;
+ align-items: flex-end;
+ &.active {
+ color: $blue;
+ padding-bottom: 2px;
+ border-bottom: 3px solid $blue;
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss
index 217098fb97..fa513fb44d 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss
@@ -1,14 +1,14 @@
.tile {
- background-color: $white;
- margin: 9px;
- width: 204px;
- height: 200px;
- display: flex;
- flex-direction: column;
- cursor: pointer;
- border: 1px solid $tlv-light-gray;
- @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05));
- &:active {
- border: 1px solid $light-blue;
- }
+ background-color: $white;
+ margin: 9px;
+ width: 204px;
+ height: 200px;
+ display: flex;
+ flex-direction: column;
+ cursor: pointer;
+ border: 1px solid $tlv-light-gray;
+ @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05));
+ &:active {
+ border: 1px solid $light-blue;
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss
index f1af28a0a0..a741764727 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss
@@ -1,21 +1,21 @@
.vendor-page-header {
- display: flex;
- align-items: center;
- margin-top: 34px;
- margin-left: 9px;
- margin-bottom: 29px;
- .vendor-name {
- @extend .heading-1;
- color: $blue;
- margin-left: 20px;
- text-transform: uppercase;
- }
- .svg-icon-wrapper {
- padding: 5px 18px 5px 0;
- .svg-icon.back {
- height: 25px;
- width: 25px;
- fill: $blue;
- }
- }
+ display: flex;
+ align-items: center;
+ margin-top: 34px;
+ margin-left: 9px;
+ margin-bottom: 29px;
+ .vendor-name {
+ @extend .heading-1;
+ color: $blue;
+ margin-left: 20px;
+ text-transform: uppercase;
+ }
+ .svg-icon-wrapper {
+ padding: 5px 18px 5px 0;
+ .svg-icon.back {
+ height: 25px;
+ width: 25px;
+ fill: $blue;
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
index d490fd6e1c..63fb236ec3 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
@@ -1,91 +1,91 @@
@mixin flipOverlayDirection($itemsInRow) {
- &:nth-child(#{$itemsInRow}n) {
- .vsp-overlay-wrapper {
- right: 74%;
- left: inherit;
- .vsp-overlay-arrow {
- border-right-color: transparent;
- border-left-color: $tlv-light-gray;
- border-right-width: 2px;
- border-left-width: 6px;
- left: 100%;
- &:after {
- border-left-color: $white;
- border-right-color: transparent;
- left: -11px;
- }
- }
- }
- }
+ &:nth-child(#{$itemsInRow}n) {
+ .vsp-overlay-wrapper {
+ right: 74%;
+ left: inherit;
+ .vsp-overlay-arrow {
+ border-right-color: transparent;
+ border-left-color: $tlv-light-gray;
+ border-right-width: 2px;
+ border-left-width: 6px;
+ left: 100%;
+ &:after {
+ border-left-color: $white;
+ border-right-color: transparent;
+ left: -11px;
+ }
+ }
+ }
+ }
}
.catalog-tile.vendor-type {
- position: relative;
- .catalog-tile-top {
- .catalog-tile-item-name {
- margin-top: 21px;
- line-height: inherit;
- &:first-letter {
- text-transform: capitalize;
- }
- }
- .catalog-tile-vsp-count {
- @extend .body-3-semibold;
- margin-top: 8px;
- margin-left: 54px;
- margin-bottom: 9px;
- color: $dark-gray;
- border: 1px solid $dark-gray;
- padding: 0 15px 0 15px;
- border-radius: 15px;
+ position: relative;
+ .catalog-tile-top {
+ .catalog-tile-item-name {
+ margin-top: 21px;
+ line-height: inherit;
+ &:first-letter {
+ text-transform: capitalize;
+ }
+ }
+ .catalog-tile-vsp-count {
+ @extend .body-3-semibold;
+ margin-top: 8px;
+ margin-left: 54px;
+ margin-bottom: 9px;
+ color: $dark-gray;
+ border: 1px solid $dark-gray;
+ padding: 0 15px 0 15px;
+ border-radius: 15px;
- &.clickable {
- &:hover {
- background-color: #eceff3;
- color: $dark-gray;
- }
- }
- &.active {
- background-color: $white;
- color: $dark-gray;
- }
- }
- }
+ &.clickable {
+ &:hover {
+ background-color: #eceff3;
+ color: $dark-gray;
+ }
+ }
+ &.active {
+ background-color: $white;
+ color: $dark-gray;
+ }
+ }
+ }
- .catalog-tile-content {
- flex-basis: auto;
- max-height: 31px;
- height: 31px;
- text-align: center;
- color: $blue;
- display: block;
- background-color: $white;
- margin-bottom: 7px;
- padding-bottom: 0px;
- .create-new-vsp-button {
- margin-top: 1px;
- }
- &:hover {
- color: $dark-blue;
- .svg-icon.plus {
- fill: $dark-blue;
- }
- }
- &.disabled {
- cursor: default;
- }
- }
- @media (min-width: 1900px) {
- @include flipOverlayDirection($itemsInRow: 8);
- }
- @media (min-width: 1586px) and (max-width: 1899px) {
- @include flipOverlayDirection($itemsInRow: 7);
- }
- @media (min-width: 1368px) and (max-width: 1585px) {
- @include flipOverlayDirection($itemsInRow: 6);
- }
- @media (max-width: 1367px) {
- @include flipOverlayDirection($itemsInRow: 5);
- }
- @import "vspOverlay";
+ .catalog-tile-content {
+ flex-basis: auto;
+ max-height: 31px;
+ height: 31px;
+ text-align: center;
+ color: $blue;
+ display: block;
+ background-color: $white;
+ margin-bottom: 7px;
+ padding-bottom: 0px;
+ .create-new-vsp-button {
+ margin-top: 1px;
+ }
+ &:hover {
+ color: $dark-blue;
+ .svg-icon.plus {
+ fill: $dark-blue;
+ }
+ }
+ &.disabled {
+ cursor: default;
+ }
+ }
+ @media (min-width: 1900px) {
+ @include flipOverlayDirection($itemsInRow: 8);
+ }
+ @media (min-width: 1586px) and (max-width: 1899px) {
+ @include flipOverlayDirection($itemsInRow: 7);
+ }
+ @media (min-width: 1368px) and (max-width: 1585px) {
+ @include flipOverlayDirection($itemsInRow: 6);
+ }
+ @media (max-width: 1367px) {
+ @include flipOverlayDirection($itemsInRow: 5);
+ }
+ @import 'vspOverlay';
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss
deleted file mode 100644
index 721a4f3f22..0000000000
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.catalog-tile.license-model-type {
- .catalog-tile-top {
- &:hover {
- //background-color: $purple;
- //color: $white;
- }
- }
-}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
index e0b72bf9ff..e2617b8b04 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
@@ -1,74 +1,73 @@
-.vsp-overlay-wrapper{
- display:flex;
- align-items: center;
- position:absolute;
- left: 68%;
- top: 14%;
- height: 100%;
- pointer-events: none;
- z-index: 100;
- .vsp-overlay-list {
- padding: 0 20px;
- }
- .vsp-overlay-arrow {
- border-style: solid;
- position: relative;
- bottom: -18px;
- border-width: 6px;
- border-left-width: 2px;
- border-color: transparent;
- border-right-color: $light-gray;
- &:after {
- position: absolute;
- border-style: solid;
- bottom: -10px;
- left: -9px;
- border-width: 10px;
- border-color: transparent;
- border-right-color: $white;
- content:' ';
- }
- }
- .vsp-overlay {
- pointer-events: all;
- width: 205px;
- cursor: default;
- background-color: $white;
- @include box-shadow(0px 2px 9.2px 0.8px rgba(24, 24, 25, 0.25));
- border-radius: 6px;
- padding: 0 0 10px 0;
- display: flex;
- flex-direction: column;
- margin: 10px 0 10px 0;
- .vsp-overlay-title {
- @extend .heading-5-semibold;
- margin-bottom: 15px;
- padding: 10px 20px 10px 20px;
- background: $highlight-gray;
- color: $text-black;
- text-transform: uppercase;
- border-radius: 6px 6px 0 0;
- }
- .vsp-overlay-detail{
- @extend .body-2;
- &:hover {
- color: $blue;
- }
- text-transform: none;
- @include ellipsis(auto, block);
- border-bottom: 1px solid $tlv-light-gray;
- cursor: pointer;
- padding: 5px 0 5px 0;
- &:last-child {
- border-bottom: none;
- }
- }
- .vsp-overlay-see-more{
- color: $blue;
- cursor: pointer;
- margin-top: 12px;
- align-self:center;
- }
-
- }
+.vsp-overlay-wrapper {
+ display: flex;
+ align-items: center;
+ position: absolute;
+ left: 68%;
+ top: 14%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 100;
+ .vsp-overlay-list {
+ padding: 0 20px;
+ }
+ .vsp-overlay-arrow {
+ border-style: solid;
+ position: relative;
+ bottom: -18px;
+ border-width: 6px;
+ border-left-width: 2px;
+ border-color: transparent;
+ border-right-color: $light-gray;
+ &:after {
+ position: absolute;
+ border-style: solid;
+ bottom: -10px;
+ left: -9px;
+ border-width: 10px;
+ border-color: transparent;
+ border-right-color: $white;
+ content: ' ';
+ }
+ }
+ .vsp-overlay {
+ pointer-events: all;
+ width: 205px;
+ cursor: default;
+ background-color: $white;
+ @include box-shadow(0px 2px 9.2px 0.8px rgba(24, 24, 25, 0.25));
+ border-radius: 6px;
+ padding: 0 0 10px 0;
+ display: flex;
+ flex-direction: column;
+ margin: 10px 0 10px 0;
+ .vsp-overlay-title {
+ @extend .heading-5-semibold;
+ margin-bottom: 15px;
+ padding: 10px 20px 10px 20px;
+ background: $highlight-gray;
+ color: $text-black;
+ text-transform: uppercase;
+ border-radius: 6px 6px 0 0;
+ }
+ .vsp-overlay-detail {
+ @extend .body-2;
+ &:hover {
+ color: $blue;
+ }
+ text-transform: none;
+ @include ellipsis(auto, block);
+ border-bottom: 1px solid $tlv-light-gray;
+ cursor: pointer;
+ padding: 5px 0 5px 0;
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+ .vsp-overlay-see-more {
+ color: $blue;
+ cursor: pointer;
+ margin-top: 12px;
+ align-self: center;
+ }
+ }
}