MaDgIK
/
openaire-assets
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[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>.
This commit is contained in:
Konstantina Galouni 2022-07-06 13:14:47 +03:00
parent 052d94e27c
commit d577c6d69a
1 changed files with 41 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
library-css/utils.css
View File

@ -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;
}