inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix line clamp temporary (#2747)

Browse Source
This commit is contained in:
Popovics András
2017-12-04 09:52:26 +00:00
committed by Eugenio Romano
parent 6c8ed9eae0
commit 163ef2edc2
3 changed files with 68 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
lib/core/styles/_mixins.scss
View File

@@ -1,4 +1,4 @@
@import 'variables';
@import "variables";
@mixin no-select {
-webkit-touch-callout: none;
@@ -9,7 +9,7 @@
user-select: none;
}
@mixin typo-icon() {
@mixin typo-icon {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
@@ -28,3 +28,33 @@
transition-duration: $duration;
transition-timing-function: $animation-curve-default;
}
@mixin line-clamp($line-height: 1.25, $lines: 3) {
display: block;
display: -webkit-box;
-webkit-box-orient: vertical;
position: relative;
line-height: $line-height;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 !important;
-webkit-line-clamp: $lines;
height: calc(0.99em * #{$line-height} * #{$lines});
&:after {
content: '...';
text-align: right;
bottom: 0;
right: 0;
width: 25%;
display: block;
position: absolute;
height: calc(0.99em * #{$line-height});
}
}
@supports (-webkit-line-clamp: 1) {
.line-clamp:after {
display: none !important;
}
}

2
lib/process-services/app-list/apps-list.component.html
View File

@@ -24,7 +24,7 @@
<h1>{{getAppName(app) | async}}</h1>
</div>
<mat-card-subtitle class="adf-app-listgrid-item-card-subtitle" fxFlex="1 0 auto">
<p>{{app.description}}</p>
<div class="line-clamp">{{app.description}}</div>
</mat-card-subtitle>
<mat-card-actions class="adf-app-listgrid-item-card-actions">

14
lib/process-services/app-list/apps-list.component.scss
View File

@@ -1,3 +1,8 @@
// TODO: import this mixin from core mixins...
// -------
@mixin line-clamp($line-height: 1.25, $lines: 3) { display: block; display: -webkit-box; -webkit-box-orient: vertical; position: relative; line-height: $line-height; overflow: hidden; text-overflow: ellipsis; padding: 0 !important; -webkit-line-clamp: $lines; height: calc(0.99em * #{$line-height} * #{$lines}); &:after { content: '...'; text-align: right; bottom: 0; right: 0; width: 25%; display: block; position: absolute; height: calc(0.99em * #{$line-height}); } } @supports (-webkit-line-clamp: 1) { .line-clamp:after { display: none !important; } }
// -------
:host {
width: 100%;
}
@@ -52,6 +57,7 @@ $themes: (
right: 20px;
top: 20px;
padding: 16px;
z-index: 9998;
&-icon {
font-size: 70px;
@@ -69,6 +75,8 @@ $themes: (
&-title {
padding: 16px;
margin-bottom: 0;
z-index: 9999;
h1 {
color: white;
@@ -83,7 +91,13 @@ $themes: (
}
&-subtitle {
color: white;
z-index: 9999;
padding: 16px;
.line-clamp {
@include line-clamp(1.25, 3);
}
}
&-actions {