Add 'Service Dependencies' tab in composition page

 Issue-ID: SDC-1987

Change-Id: Ib5b688c12234c81fe6f89b2b5d37dd16a75b0db9
Signed-off-by: miriame <miriam.eini@amdocs.com>

5 files changed, 30 insertions, 0 deletions

diff --git a/catalog-ui/src/assets/styles/images/service-proxy-icons/dependent.png b/catalog-ui/src/assets/styles/images/service-proxy-icons/dependent.png
new file mode 100644
index 0000000000..603093ec62
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/service-proxy-icons/dependent.png
diff --git a/catalog-ui/src/assets/styles/images/service-proxy-icons/uncertified_dependent.png b/catalog-ui/src/assets/styles/images/service-proxy-icons/uncertified_dependent.png
new file mode 100644
index 0000000000..26ebe6016a
--- /dev/null
+++ b/catalog-ui/src/assets/styles/images/service-proxy-icons/uncertified_dependent.png
diff --git a/catalog-ui/src/assets/styles/mixins.less b/catalog-ui/src/assets/styles/mixins.less
index e71f3444aa..43bd2a5f44 100644
--- a/catalog-ui/src/assets/styles/mixins.less
+++ b/catalog-ui/src/assets/styles/mixins.less
@@ -220,6 +220,32 @@
     user-select: text;
 }
 
+.multiline-ellipsis(@lineHeight: 1.3em, @lineCount: 2, @bgColor: @main_color_p){
+    overflow: hidden;
+    position: relative;
+    line-height: @lineHeight;
+    max-height: @lineHeight * @lineCount;
+    text-align: left;
+    word-break: normal;
+    white-space: normal;
+    padding-right: 1em;
+    &:before {
+        content: '...';
+        position: absolute;
+        right: 3px;
+        bottom: 0;
+    }
+    &:after {
+        content: '';
+        position: absolute;
+        right: 0;
+        width: 1em;
+        height: 1em;
+        margin-top: 0.2em;
+        background: @bgColor;
+    }
+}
+
 
 .square-icon() {
     display: inline-block;
diff --git a/catalog-ui/src/assets/styles/mixins_old.less b/catalog-ui/src/assets/styles/mixins_old.less
index 29c9574565..7deed223df 100644
--- a/catalog-ui/src/assets/styles/mixins_old.less
+++ b/catalog-ui/src/assets/styles/mixins_old.less
@@ -243,6 +243,7 @@
 .t_15 {.font-color > .t; .font-type > ._15;}
 
 /* Added by ikram - */
+.s_1 {.font-color > .s; .font-type > ._1;}
 .s_12 {.font-color > .s; .font-type > ._12;}
 
 .z_9  {.font-color > .z; .font-type > ._9;}
diff --git a/catalog-ui/src/assets/styles/sprite.less b/catalog-ui/src/assets/styles/sprite.less
index 3e56a0163b..383a830b00 100644
--- a/catalog-ui/src/assets/styles/sprite.less
+++ b/catalog-ui/src/assets/styles/sprite.less
@@ -135,6 +135,9 @@
 .sprite-new.properties:active                   { background-position: -350px -671px; width: 19px;  height: 19px;}
 .active > .sprite-new.properties                { background-position: -350px -671px; width: 19px;  height: 19px;}
 
+.sprite-new.dependencies-icon                     { background-position: -751px -693px; width: 19px;  height: 19px;  opacity: 0.7;}
+.sprite-new.dependencies:active                   { background-position: -751px -693px; width: 19px;  height: 19px;}
+
 .sprite-new.distribution-bth                    { background-position: -399px -716px; width: 55px;  height: 21px;}
 .sprite-new.distribution-bth.disable            { background-position: -464px -716px; width: 55px;  height: 21px;}