From d577c6d69a55901e319cf0cf5b93f900f1cdeaab Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Wed, 6 Jul 2022 13:14:47 +0300
Subject: [PATCH] [Connect & Library | new-theme]: Redesigned invite and join
 buttons |  Added rule .uk-light .custom-external::after | Updated css for
 .multi-line-ellipsis - now supports inner elements. 1. invite.component.html:
    a. Redesigned invite button according to the new mocks.    b. Button of
 invite is a route to invite page (removed dropdown for quick invitation). 2.
 subscribe.component.ts:    a. Redesigned join (subscribe) button according to
 the new mocks.    b. Subscribe renamed to Join/Leave and Member. 3
 subscribe.module.ts: Imported IconsModule. 4. app.component.ts: Renamed
 id="subscribeAndInviteBtn" to id="joinAndInviteBtn". 5. connect-custom.less:
 Added rules under .communityApp for #joinAndInviteBtn, #join, #invite,
 .member-button. 6. utils.css:    a. Added rule .uk-light
 .custom-external::after to set color with light-color.    b. Updated css for
 .multi-line-ellipsis - now supports inner elements (e.g. <p>) inside parent
 <p>.

---
 library-css/utils.css | 47 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 41 insertions(+), 6 deletions(-)

diff --git a/library-css/utils.css b/library-css/utils.css
index d6b69fc..bc22709 100644
--- a/library-css/utils.css
+++ b/library-css/utils.css
@@ -38,6 +38,10 @@
   display: inline-block;
 }
 
+.uk-light .custom-external::after {
+  color: var(--light-color);
+}
+
 .custom-external:hover::after, .custom-external::after:hover{
   text-decoration: none !important;
 }
@@ -77,27 +81,58 @@
 /*  background: rgba(0, 0, 0, 0) url("~src/assets/common-assets/external-link.svg") no-repeat scroll left center;*/
 /*}*/
 
-.multi-line-ellipsis > p {
-  display: -webkit-box;
+.multi-line-ellipsis > * {
+  display: -webkit-box !important;
   autoprefixer: ignore next;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: initial;
 }
 
-.multi-line-ellipsis.line-1 > p {
+/* all tags with display: block */
+.multi-line-ellipsis > * p, .multi-line-ellipsis > * div, .multi-line-ellipsis > * pre,
+.multi-line-ellipsis > * address, .multi-line-ellipsis > * article, .multi-line-ellipsis > * aside,
+.multi-line-ellipsis > * blockquote, .multi-line-ellipsis > * canvas,
+.multi-line-ellipsis > * dl, .multi-line-ellipsis > * dd, .multi-line-ellipsis > * dt,
+.multi-line-ellipsis > * fieldset, .multi-line-ellipsis > * figcaption, .multi-line-ellipsis > * figure,
+.multi-line-ellipsis > * footer, .multi-line-ellipsis > * form,
+.multi-line-ellipsis > * h1, .multi-line-ellipsis > * h2, .multi-line-ellipsis > * h3, .multi-line-ellipsis > * h4, .multi-line-ellipsis > * h5, .multi-line-ellipsis > * h6,
+.multi-line-ellipsis > * header, .multi-line-ellipsis > * hr, .multi-line-ellipsis > * li, .multi-line-ellipsis > * main,
+.multi-line-ellipsis > * nav, .multi-line-ellipsis > * noscript, .multi-line-ellipsis > * ol, .multi-line-ellipsis > * section,
+.multi-line-ellipsis > * table, .multi-line-ellipsis > * tfoot, .multi-line-ellipsis > * ul, .multi-line-ellipsis > * video {
+  display: contents;
+}
+
+.multi-line-ellipsis > * p:after, .multi-line-ellipsis > * div:after, .multi-line-ellipsis > * pre:after,
+.multi-line-ellipsis > * address:after, .multi-line-ellipsis > * article:after, .multi-line-ellipsis > * aside:after,
+.multi-line-ellipsis > * blockquote:after, .multi-line-ellipsis > * canvas:after,
+.multi-line-ellipsis > * dl:after, .multi-line-ellipsis > * dd:after, .multi-line-ellipsis > * dt:after,
+.multi-line-ellipsis > * fieldset:after, .multi-line-ellipsis > * figcaption:after, .multi-line-ellipsis > * figure:after,
+.multi-line-ellipsis > * footer:after, .multi-line-ellipsis > * form:after,
+.multi-line-ellipsis > * h1:after, .multi-line-ellipsis > * h2:after, .multi-line-ellipsis > * h3:after,
+.multi-line-ellipsis > * h4:after, .multi-line-ellipsis > * h5:after, .multi-line-ellipsis > * h6:after,
+.multi-line-ellipsis > * header:after, .multi-line-ellipsis > * hr:after, .multi-line-ellipsis > * li:after,
+.multi-line-ellipsis > * main:after, .multi-line-ellipsis > * nav:after, .multi-line-ellipsis > * noscript:after,
+.multi-line-ellipsis > * ol:after, .multi-line-ellipsis > * section:after, .multi-line-ellipsis > * table:after,
+.multi-line-ellipsis > * tfoot:after, .multi-line-ellipsis > * ul:after, .multi-line-ellipsis > * video:after {
+  content: "\A";
+  white-space:pre;
+}
+
+.multi-line-ellipsis.line-1 > * {
   -webkit-line-clamp: 1;
 }
 
-.multi-line-ellipsis.lines-2 > p {
+.multi-line-ellipsis.lines-2 > * {
   -webkit-line-clamp: 2;
 }
 
-.multi-line-ellipsis.lines-3 > p {
+.multi-line-ellipsis.lines-3 > * {
   -webkit-line-clamp: 3;
 }
 
-.multi-line-ellipsis.lines-10 > p {
+.multi-line-ellipsis.lines-10 > * {
   -webkit-line-clamp: 10;
 }