46063: css attempt to fix multiline clamping

This commit is contained in:
Lotte Hofstede
2017-12-20 12:38:59 +01:00
parent eb2143d0a1
commit f381649112
11 changed files with 42 additions and 64 deletions

View File

@@ -1,4 +1,26 @@
@import '../../node_modules/bootstrap/scss/functions.scss';
@import '../../node_modules/bootstrap/scss/mixins.scss';
@import '../../node_modules/bootstrap/scss/variables.scss';
/* Custom mixins go here */
@mixin clamp($lines) {
max-height: $lines * $line-height-base * $font-size-base;
position: relative;
overflow: hidden;
line-height: $line-height-base;
overflow-wrap: break-word;
&:after {
content: "...";
color: $link-color;
text-align: right;
position: absolute;
padding-right: 15px;
top: ($lines - 1) * $line-height-base * $font-size-base;
right: 0;
width: 30%;
min-width: 75px;
max-width: 150px;
height: $line-height-base * $font-size-base;
background: linear-gradient(to right, rgba(255, 255, 255, 0), $body-bg 50%);
}
}