summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-08-10 18:21:36 +0000
committerGerrit Code Review <gerrit@onap.org>2017-08-10 18:21:36 +0000
commitce07d7cd59425944f85d0fef5126ebeef731bc7b (patch)
treea0d8bb991aa164e01eb930b23f34d9e27999602a /openecomp-ui/resources
parent46f9fd57f24428f6a6fd0d290b0463e188975231 (diff)
parent644017cb3edd5b7a077a634ffd5daf2fee6bc088 (diff)
Merge "[SDC] OnBoard with enabled tests and features"
Diffstat (limited to 'openecomp-ui/resources')
-rw-r--r--openecomp-ui/resources/scss/_components.scss1
-rw-r--r--openecomp-ui/resources/scss/common/_variables.scss27
-rw-r--r--openecomp-ui/resources/scss/components/_activityLog.scss6
-rw-r--r--openecomp-ui/resources/scss/components/_expandableInput.scss49
-rw-r--r--openecomp-ui/resources/scss/components/_selectActionTable.scss29
-rw-r--r--openecomp-ui/resources/scss/components/_submitErrorResponse.scss17
-rw-r--r--openecomp-ui/resources/scss/components/_validationForm.scss2
-rw-r--r--openecomp-ui/resources/scss/components/_versionController.scss59
-rw-r--r--openecomp-ui/resources/scss/modules/_featureGroup.scss52
-rw-r--r--openecomp-ui/resources/scss/modules/_licenseModelOverview.scss70
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss32
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss6
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss18
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss8
-rw-r--r--openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss18
-rw-r--r--openecomp-ui/resources/scss/modules/_vspHeatSetup.scss137
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss51
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss14
-rw-r--r--openecomp-ui/resources/scss/onboarding.scss4
19 files changed, 278 insertions, 322 deletions
diff --git a/openecomp-ui/resources/scss/_components.scss b/openecomp-ui/resources/scss/_components.scss
index c70b914187..7c726aa8dd 100644
--- a/openecomp-ui/resources/scss/_components.scss
+++ b/openecomp-ui/resources/scss/_components.scss
@@ -16,7 +16,6 @@
@import "components/submitErrorResponse";
@import "components/expandableInput";
@import "components/grid";
-@import "components/icon";
@import "components/activityLog";
@import "components/selectActionTable";
@import "components/datepicker";
diff --git a/openecomp-ui/resources/scss/common/_variables.scss b/openecomp-ui/resources/scss/common/_variables.scss
index 2162b0b1b0..3a3178c6b0 100644
--- a/openecomp-ui/resources/scss/common/_variables.scss
+++ b/openecomp-ui/resources/scss/common/_variables.scss
@@ -47,14 +47,23 @@ $desktop-min-width: 1824px;
/* Textures */
$images-folder-name: "../images";
+/*
+$plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg";
+$interface-icon: $images-folder-name + "/interface.svg";
+$sdc-logo: $images-folder-name + "/logo.svg";
+$warning-icon: $images-folder-name + "/warning.svg";
+*/
/* Icons */
$icons-folder: "../images/icons";
-$artifacts-icon: $images-folder-name + "/artifacts_icon.png";
-$check-icon: $images-folder-name + "/v_icon.png";
-$base-module-icon: $images-folder-name + "/base_icon.png";
-$module-icon: $images-folder-name + "/module_icon.png";
+/*
+$plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg";
+$interface-icon: $images-folder-name + "/interface.svg";
+$sdc-logo: $images-folder-name + "/logo.svg";
+$warning-icon: $images-folder-name + "/warning.svg";
+*/
$pencil-icon: $images-folder-name + "/pencil_icon-01.svg";
+/*
$vc-check-in-icon: $icons-folder + "/checked_in.png";
$vc-checkout-icon: $icons-folder + "/checked_out.png";
$vc-revert-icon: $icons-folder + "/reverticon.png";
@@ -66,11 +75,12 @@ $vc-submit-disabled-icon: $icons-folder + "/submit_icon_disable.png";
$trash-icon: $images-folder-name + "/trash_icon.png";
$download-icon: $images-folder-name + "/download_icon.png";
$upload-icon: $images-folder-name + "/upload_icon.png";
+*/
-
-/* catalog icons */
+/*****
+// catalog icons
$back-icon: $icons-folder + "/back_icon.png";
-/* validation icons */
+// validation icons
$artifacts-selected-icon: $icons-folder + "/artifacts_blue_icon.png";
$artifacts-regular-icon: $icons-folder + "/artifacts_grey_icon.png";
$chevron_down: $icons-folder + "/down_chevron.png";
@@ -93,7 +103,7 @@ $heat-selected-icon: $icons-folder + "/nested_HEAT_icon_blue.png";
$env-icon: $icons-folder + "/env_icon.png";
$env-selected-icon: $icons-folder + "/env_icon_blue.png";
-/* vlm summary icons */
+// vlm summary icons
$vlm-summary-plus-blue: $icons-folder + "/plus_vlm_summary_icon_blue.png";
$vlm-summary-plus: $icons-folder + "/plus_vlm_summary_icon.png";
@@ -102,4 +112,5 @@ $vlm-summary-orphans: $icons-folder + "/orphans_grey_icon.png";
$vlm-summary-orphans-blue: $icons-folder + "/orphans_blue_icon-n.png";
$vlm-summary-used: $icons-folder + "/vlm_list_view_grey_icon.png";
$vlm-summary-used-blue: $icons-folder + "/vlm_list_view_blue_icon.png";
+*****/
diff --git a/openecomp-ui/resources/scss/components/_activityLog.scss b/openecomp-ui/resources/scss/components/_activityLog.scss
index 9ada804934..5e9418ed7d 100644
--- a/openecomp-ui/resources/scss/components/_activityLog.scss
+++ b/openecomp-ui/resources/scss/components/_activityLog.scss
@@ -39,11 +39,7 @@ $message-info-icon-size: 16px;
.svg-icon-wrapper {
float: right;
}
- .checkCircle {
- fill: $green;
- width: 16px;
- height: 16px;
- }
+
.status-icon.false:after {
@include status-icon-class;
float: right;
diff --git a/openecomp-ui/resources/scss/components/_expandableInput.scss b/openecomp-ui/resources/scss/components/_expandableInput.scss
index 52b72d7c91..2484a73e8a 100644
--- a/openecomp-ui/resources/scss/components/_expandableInput.scss
+++ b/openecomp-ui/resources/scss/components/_expandableInput.scss
@@ -1,24 +1,21 @@
.expandable-input-top {
display: flex;
height: 22px;
- .svg-icon-wrapper {
- height: 17px;
- width: 17px;
- }
.expandable-input-wrapper {
display: flex;
- .svg-icon.search {
- height: 17px;
- width: 17px;
- }
&.closed {
- .svg-icon.search {
- transition: fill 0.5s ease-in;
- fill: $blue;
- cursor: pointer;
- &:hover {
+ .svg-icon
+ {
+ &.__search {
+ height: 17px;
+ width: 17px;
transition: fill 0.5s ease-in;
- fill: $dark-blue;
+ fill: $blue;
+ cursor: pointer;
+ &:hover {
+ transition: fill 0.5s ease-in;
+ fill: $dark-blue;
+ }
}
}
}
@@ -26,17 +23,21 @@
.svg-icon-wrapper {
margin-left: 3px;
}
- .svg-icon.search {
- fill: $dark-blue;
+ .svg-icon {
+ &.__search {
+ height: 17px;
+ width: 17px;
+ fill: $dark-blue;
+ }
}
- .svg-icon.close {
- margin-left: 7px;
- height: 10px;
- width: 10px;
- opacity: 0.6;
- fill: $dark-gray;
- &:hover {
- opacity: 1;
+ .svg-icon {
+ &.__close {
+ margin-left: 7px;
+ opacity: 0.6;
+ fill: $dark-gray;
+ &:hover {
+ opacity: 1;
+ }
}
}
}
diff --git a/openecomp-ui/resources/scss/components/_selectActionTable.scss b/openecomp-ui/resources/scss/components/_selectActionTable.scss
index 79a5432ef1..fa8eb3110c 100644
--- a/openecomp-ui/resources/scss/components/_selectActionTable.scss
+++ b/openecomp-ui/resources/scss/components/_selectActionTable.scss
@@ -1,15 +1,13 @@
.select-action-table-view {
.svg-icon-wrapper {
flex-direction: row;
-
- &::before {
- content:"";
- }
.svg-icon {
- margin-left: 5px;
- margin-right: 5px;
- width:16px;
- height:16px;
+ &:not(.__plus) {
+ margin-left: 5px;
+ margin-right: 5px;
+ width:16px;
+ height:16px;
+ }
}
}
.dummy-icon {
@@ -57,21 +55,6 @@
display: flex;
flex-direction: row;
margin-bottom: 14px;
- .svg-icon-wrapper.trashO {
- .svg-icon {
- fill: $dark-gray;
- }
- }
- .svg-icon-wrapper.errorCircle {
- .svg-icon {
- fill: $red;
- }
- }
- .svg-icon-wrapper.checkCircle {
- .svg-icon {
- fill: $green;
- }
- }
.svg-icon-wrapper.hideDelete {
.svg-icon {
fill: $white;
diff --git a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
index b917dfefeb..f045038193 100644
--- a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
+++ b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
@@ -26,14 +26,19 @@
background-color: $tlv-gray;
padding: 5px;
cursor: pointer;
- .chevronDown {
- width:10px;
- height:10px;
- margin-right: 10px;
- &.right {
- transform: rotate(270deg);
+ .svg-icon {
+ &.__chevronDown {
+ margin-right: 10px;
}
}
+ .collapse-right {
+ .svg-icon {
+ &.__chevronDown {
+ transform: rotate(270deg);
+ }
+ }
+
+ }
}
.error-code-list-item {
diff --git a/openecomp-ui/resources/scss/components/_validationForm.scss b/openecomp-ui/resources/scss/components/_validationForm.scss
index e4aac32b74..e1adb5650f 100644
--- a/openecomp-ui/resources/scss/components/_validationForm.scss
+++ b/openecomp-ui/resources/scss/components/_validationForm.scss
@@ -75,7 +75,7 @@ form {
flex: 0.2;
content: ' ';
}
- @media (min-width: 1349px) {
+ @media (min-width: 1389px) {
&.add-line-break {
.control-label {
&:after {
diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss
index b454d3496b..57610986c3 100644
--- a/openecomp-ui/resources/scss/components/_versionController.scss
+++ b/openecomp-ui/resources/scss/components/_versionController.scss
@@ -59,56 +59,33 @@
margin-right: 20px;
padding-bottom: 5px;
- .versionControllerLockClosed {
+
+ .svg-icon {
fill: $dark-gray;
- width: 21px;
- height: 23px;
- margin-top: -3px;
- &.disabled {
- fill: $light-gray;
- }
&:hover {
fill: $black;
}
- }
- .versionControllerLockOpen {
- fill: $dark-gray;
- width: 24px;
- height: 28px;
- margin-top: -6px;
- &:hover {
- fill: $black;
+ &.__versionControllerLockClosed {
+ margin-top: -3px;
}
- }
- .versionControllerSubmit {
- fill: $blue;
- &.disabled {
- fill: $light-gray;
+ &.__versionControllerLockOpen {
+ margin-top: -6px;
}
- &:hover {
- fill: $dark-blue;
+ &.__versionControllerSubmit {
+ fill: $blue;
+ &:hover {
+ fill: $dark-blue;
+ }
+ &.disabled {
+ fill: $dark-gray;
+ }
}
}
-
- .versionControllerRevert {
- fill: $dark-gray;
- &.disabled {
- fill: $light-gray;
- }
- &:hover {
- fill: $black;
- }
- }
- .versionControllerSave {
- fill: $dark-gray;
- &.disabled {
- fill: $light-gray;
- }
- &:hover {
- fill: $black;
- }
}
- }
+
+
+
+
}
.vc-nav-item-close {
display: flex;
diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss
index 9d395f98c8..5f98ed2c05 100644
--- a/openecomp-ui/resources/scss/modules/_featureGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss
@@ -1,23 +1,37 @@
.feature-groups-list-editor {
- .list-editor-view-list {
- .list-editor-item-view {
- min-height: 110px;
- height: 110px;
- }
- .list-editor-item-view-field {
- .feature-groups-count-field {
- display: inline-block;
- &:first-child {
- margin-right: 95px;
- }
- }
- .feature-groups-count-ep {
- @extend .heading-1;
- color: $light-blue;
+ .list-editor-view{
+ .list-editor-view-list {
+ .list-editor-item-view {
+ min-height: 110px;
+ height: 110px;
}
- .feature-groups-count-lk {
- @extend .heading-1;
- color: $light-green;
+ .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;
+ }
+ }
}
}
}
@@ -39,7 +53,7 @@
.nav.nav-tabs {
padding-left: 50px;
}
-
+
.tab-content {
padding: 50px;
.field-section {
diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
index 1c133a1dce..15bb9a7033 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
@@ -61,26 +61,34 @@ $lkg-ep-color: $light-blue;
&: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;
- width: 100%;
border: 1px solid $light-gray;
cursor: pointer;
- background-position: calc(100% - 4px) 4px;
- background-size: 14px;
- background-image: url($pencil-icon);
- background-repeat: no-repeat;
- background-color: white;
-
+ background-color: $white;
+ .svg-icon-wrapper {
+ opacity: 1;
+ z-index: 10;
+ }
.description-data:after {
background: white;
}
+ .description-data {
+ width: 100%;
+ }
}
}
@@ -167,20 +175,23 @@ $lkg-ep-color: $light-blue;
flex-grow: 2;
margin-left: 5px;
}
- .add-button {
- cursor: pointer;
- font-size: larger;
- background-image: url($vlm-summary-plus);
- background-size: 20px;
- background-repeat: no-repeat;
- width:20px;
- height:20px;
- margin-top: 3px;
- margin-left: auto;
- &:hover {
- cursor: pointer;
- background-image: url($vlm-summary-plus-blue);
- }
+ .summary-name-and-count {
+ width: 100%;
+ }
+ .svg-icon-wrapper {
+
+ .svg-icon {
+ &.__plusCircle {
+ width: 20px;
+ height: 20px;
+ margin-top: 3px;
+ margin-left: auto;
+ fill: $dark-gray;
+ &:hover {
+ fill: $blue;
+ }
+ }
+ }
}
.summary-name-and-count {
@@ -205,7 +216,7 @@ $lkg-ep-color: $light-blue;
}
}
.vlm-list-tab-panel {
-
+
@extend .flex;
margin-bottom: 7px;
.section-title {
@@ -221,6 +232,7 @@ $lkg-ep-color: $light-blue;
margin-left:10px;
cursor: pointer;
}
+ /**
.vlm-list-icon {
background-size: 32px;
background-repeat: no-repeat;
@@ -237,7 +249,7 @@ $lkg-ep-color: $light-blue;
background-image: url($vlm-summary-orphans-blue);
}
}
-
+ **/
}
}
@@ -260,7 +272,7 @@ $lkg-ep-color: $light-blue;
.vlm-list-item.orphan-list-item {
@include overview-tile-shadow();
margin-left: 0;
-
+
.vlm-list-item-title {
.item-name {
@@ -304,7 +316,7 @@ $lkg-ep-color: $light-blue;
.clickable {
cursor: pointer;
}
-
+
.list-item-section {
.count-value {
@extend .body-3;
@@ -365,7 +377,7 @@ $lkg-ep-color: $light-blue;
}
.arrow-icon {
align-self: center;
-
+
}
.vlm-item-info {
flex: 1;
@@ -424,7 +436,7 @@ $lkg-ep-color: $light-blue;
@include create-circle($circle-icon-size,$fg-color,'FG');
color: $white;
}
-
+
.vlm-list-item-title {
.item-name {
color: $fg-color;
@@ -465,7 +477,7 @@ $lkg-ep-color: $light-blue;
margin-left: 52px;
}
}
-
+
}
&.vlm-list-item-lkg {
margin-top: 10px;
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
index bab2872691..0e092dd8bb 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
@@ -22,20 +22,7 @@
right: 40px;
top: 15px;
display: flex;
- .icon-label {
- color: $dark-gray;
- }
- .go-to-overview-icon {
- .icon-label {
- color: $blue;
- }
- &.disabled {
- .icon-label {
- color: $gray;
- }
- }
- }
.icon-component {
margin-right: 30px;
@@ -104,6 +91,11 @@
z-index: 1;
padding-right: 20px;
.counter {
+ .svg-icon {
+ &.__exclamationTriangleLine {
+ fill :$orange;
+ }
+ }
display: flex;
&:first-child {
margin-right: 20px;
@@ -145,8 +137,8 @@
justify-content: space-between;
height: 40px;
align-items: center;
- .svg-icon-wrapper.chevronDown, .svg-icon-wrapper.chevronUp {
- .svg-icon {
+ .svg-icon {
+ &.__chevronUp, &.__chevronDown {
height: 10px;
width: 10px;
}
@@ -224,6 +216,13 @@
.error-item {
display: flex;
margin: 10px 0;
+ .large {
+ .svg-icon {
+ width: 20px;
+ height: 20px;
+ fill: $orange;
+ }
+ }
.error-item-file-type {
margin-left: 15px;
}
@@ -231,6 +230,9 @@
@extend .body-1-semibold;
margin-right: 5px;
}
+
+
+
}
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
index 068404fcb6..dad837f356 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
@@ -16,6 +16,12 @@
}
}
+.vsp-components-image-editor {
+ .note-text {
+ color: $red;
+ }
+}
+
.image-modal-edit, .image-modal-new {
.modal-body {
padding: 0;
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
index 56860101b2..9b0375d24a 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
@@ -28,21 +28,19 @@
.missing-license {
display: flex;
align-items: baseline;
- .svg-icon-wrapper.exclamationTriangleFull .svg-icon{
- fill: $orange;
+ .svg-icon{
+ margin-right: 7px;
+ margin-left: 3px;
+ &.__exclamationTriangleFull {
+ fill: $orange;
+ width: 17px;
+ height: 17px;
+ }
}
.warning-text {
position: relative;
top: -2px;
}
- .svg-icon-wrapper {
- margin-right: 7px;
- margin-left: 3px;
- .svg-icon {
- height: 17px;
- width: 17px;
- }
- }
}
}
.name {
diff --git a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
index ceae4a00de..d1f3f488bd 100644
--- a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
@@ -1,13 +1,7 @@
.vsp-components-load-balancing {
.svg-icon-wrapper {
position: relative;
- top: -3px;
- &.chevronUp, &.chevronDown {
- .svg-icon {
- width: 10px;
- height: 10px;
- }
- }
+ top: -4px;
}
.halb-data {
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
index 4bcf7940eb..bda8512f36 100644
--- a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
+++ b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
@@ -1,6 +1,6 @@
.vsp-component-monitoring {
- .snmp-dropzone {
+ .dropzone {
.section-title {
padding-bottom: 20px;
}
@@ -22,7 +22,7 @@
}
.drag-text {
color: $blue;
- @extend .body-1-semibold;
+ @extend .body-1-semibold
}
.or-text {
margin-top: 10px;
@@ -30,6 +30,20 @@
}
}
+ .monitoring-file {
+ display: flex;
+ .filename {
+ opacity: 1;
+ width: auto;
+ border-right-style: none;
+ }
+ .delete {
+ display: flex;
+ width: 30px;
+ justify-content: center;
+ align-items: center;
+ }
+ }
}
.delete-button {
diff --git a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
index 75d96b4c85..bd216c794b 100644
--- a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
+++ b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
@@ -24,10 +24,12 @@
position: relative;
top: -2px;
}
+
.modules-list-wrapper {
- padding-bottom: 20px;
- margin-bottom: 20px;
- border-bottom: 1px solid $tlv-light-gray;
+ &.modules-list-wrapper-divider {
+ border-bottom: 1px solid $tlv-light-gray;
+ }
+
ul {
.undefined-dragging {
opacity: 0.5;
@@ -36,7 +38,7 @@
display: flex;
justify-content: space-between;
flex-wrap: wrap;
-
+ padding-bottom: 3px;
.Select-value-label {
@include ellipsis(85%);
}
@@ -55,24 +57,6 @@
}
}
- .modules-list-controllers {
- text-align: right;
- .btn-link {
- &[disabled] {
- color: $gray;
- }
- @extend .body-1;
- color: $blue;
- &:last-child {
- padding-right: 0;
- }
- &:hover {
- color: $dark-blue;
- text-decoration: none;
- }
- }
- }
-
.modules-list-item-controllers {
display: flex;
justify-content: space-between;
@@ -82,16 +66,15 @@
min-width: 0;
}
- .svg-icon-wrapper.trashO {
- .svg-icon {
- fill: $dark-gray;
- height: 18px;
- width: 18px;
- &:hover {
- fill: $black;
+ .svg-icon {
+ &.__trashO {
+ fill: $dark-gray;
+ &:hover {
+ fill: $black;
+ }
}
- }
}
+
.module-title-by-type {
@extend .heading-5-semibold;
margin-right: 3px;
@@ -100,15 +83,15 @@
display: flex;
align-items: center;
- .svg-icon-wrapper.pencil {
- .svg-icon {
- height: 15px;
- width: 15px;
+ .svg-icon {
+ &.__pencil {
+ margin-left: 3px;
+ opacity: 0;
}
- margin-left: 3px;
- opacity: 0;
}
+
+
.filename-text {
@extend .heading-5-semibold;
@@ -144,14 +127,16 @@
border-color: transparent;
}
}
- .svg-icon-wrapper.pencil {
- margin-left: 10px;
- opacity: 1;
- .svg-icon {
- stroke: $dark-gray;
- &:hover {
- stroke: $black;
- }
+ .svg-icon {
+ &.__pencil {
+ margin-left: 10px;
+ opacity: 1;
+ .svg-icon {
+ stroke: $dark-gray;
+ &:hover {
+ stroke: $black;
+ }
+ }
}
}
}
@@ -173,23 +158,8 @@
}
}
.add-or-delete-volumes {
- .svg-icon-wrapper {
- margin-right: 8px;
- .svg-icon {
- height: 10px;
- width: 10px;
- fill: $blue;
- }
- }
- cursor: pointer;
- color: $blue;
+ margin-right: 8px;
margin-bottom: 11px;
- &:hover {
- color: $dark-blue;
- .svg-icon {
- fill: $dark-blue;
- }
- }
}
&:before {
content: "\00B7\00B7\00B7\00B7\00B7\00B7";
@@ -208,7 +178,9 @@
.artifact-files {
@include modules-and-artifacts-list-items;
- margin-top: 20px;
+ &.with-list-items {
+ margin-top: 10px;
+ }
&.nested {
.nested-list {
@@ -238,21 +210,20 @@
display: flex;
}
- .add-all-unassigned {
- @extend .body-1;
- margin-bottom: 0;
- color: $blue;
- cursor: pointer;
- &:hover {
- color: $dark-blue;
- }
- }
}
}
}
+ .modules-list-header {
+ height: 30px;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: flex-end;
+ align-items: baseline;
+ }
+
.unassigned-files {
- margin-top: 30px;
border: 1px solid $light-gray;
background-color: $white;
height: 250px;
@@ -283,26 +254,12 @@
@extend .heading-4;
margin-bottom: 10px;
}
- .link {
- color: $blue;
- cursor: pointer;
- display: flex;
- align-items: center;
+ .svg-icon-wrapper {
margin-bottom: 10px;
- .svg-icon-wrapper.angleRight {
- .svg-icon {
- height: 10px;
- width: 10px;
- margin-left: 7px;
- fill: $blue;
- }
- }
- &:hover {
- color: $dark-blue;
- .svg-icon-wrapper.angleRight {
- .svg-icon {
- fill: $dark-blue;
- }
+ .svg-icon {
+ &.__angleRight {
+ width: 10px;
+ height: 10px;
}
}
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
index 87a852f755..612ec495cd 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
@@ -79,36 +79,22 @@
width: 58px;
margin-left: 122px;
background-repeat: no-repeat;
- .svg-icon-wrapper {
- &.vendor {
- .svg-icon {
+ .svg-icon {
+ &.__vendor {
fill: $dark-gray;
- width: 53px;
- height: 47px;
&:hover {
fill: $dark-gray;
}
- }
margin-top: 22px;
-
}
- &.vsp {
- .svg-icon {
+ &.__vsp {
fill: $light-blue;
- width: 60px;
- height: 40px;
}
margin-top: 18px;
margin-left: 3px;
- }
- &.vlm {
+ &.__vlm {
margin-top: 18px;
- .svg-icon {
fill: $purple;
-
- width: 45px;
- height: 53px;
- }
}
}
}
@@ -121,13 +107,11 @@
margin-top: 2px;
padding-bottom: 3px;
@extend .body-2-semibold;
- .svg-icon-wrapper {
- &.plus {
- .svg-icon {
- height: 9px;
- width: 9px;
+ .svg-icon {
+ &.__plus {
+ width: 20px;
+ height: 20px;
fill: $blue;
- }
}
}
.catalog-tile-item-details {
@@ -136,6 +120,13 @@
.catalog-tile-add-new-vsp {
color: $blue;
+ .svg-icon {
+ &.__plus {
+ width: 20px;
+ height: 20px;
+
+ }
+ }
margin-left: 40px;
}
.catalog-tile-locking-user-name {
@@ -143,18 +134,12 @@
@include ellipsis(auto, inline-block, 180px);
}
.catalog-tile-check-in-status {
- .svg-icon-wrapper {
- &.locked {
- .svg-icon {
- width: 11px;
+ .svg-icon {
+ &.__locked {
fill: $gray;
- }
}
- &.unlocked {
- .svg-icon {
- width: 11px;
+ &.__unlocked {
fill: $gray;
- }
}
}
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
index aa3cf04c4f..d17dcdd685 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
@@ -37,12 +37,14 @@
}
}
.create-item-plus-icon{
- width: 19px;
- height: 19px;
- margin: -5px 12px 0 0;
- .svg-icon.plus {
- height: 19px;
- width: 19px;
+ margin: -5px 12px 0 0;
+ height: 19px;
+ width: 19px;
+ .svg-icon {
+ &.__plus {
+ width: 19px;
+ height: 19px;
+ }
}
}
&.vlm-type {
diff --git a/openecomp-ui/resources/scss/onboarding.scss b/openecomp-ui/resources/scss/onboarding.scss
index b49a7cb423..94dc223be3 100644
--- a/openecomp-ui/resources/scss/onboarding.scss
+++ b/openecomp-ui/resources/scss/onboarding.scss
@@ -23,14 +23,14 @@ div[data-reactroot].customized-date-picker-calendar {
width: 12px;
height: 12px;
margin-top: 2px;
- content: url(../images/angle-left.svg);
+ content: url(../../node_modules/sdc-ui/assets/icons/angleLeft.svg);
}
.react-datepicker__navigation--next {
border: none;
width: 12px;
height: 12px;
margin-top: 2px;
- content: url(../images/angle-right.svg);
+ content: url(../../node_modules/sdc-ui/assets/icons/angleRight.svg);
}
.react-datepicker__month-container {
.react-datepicker__header {