[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

@@ -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 {
+.multi-line-ellipsis > * {
-  display: -webkit-box;
+  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;
 }