Added line-clamp mixin
This commit is contained in:
parent
11b381b1a4
commit
512a2f84f6
2 changed files with 22 additions and 1 deletions
sass/init
|
@ -76,6 +76,27 @@
|
|||
text-shadow: none;
|
||||
}
|
||||
|
||||
// Cross-browser line-clamp support
|
||||
@mixin line-clamp(
|
||||
$element-height: 2rem,
|
||||
$row-count: 2,
|
||||
$fade-color: $lbry-white,
|
||||
$computed-position: relative
|
||||
) {
|
||||
height: $element-height;
|
||||
overflow: hidden;
|
||||
position: $computed-position;
|
||||
|
||||
&::after {
|
||||
width: 50%; height: calc(#{$element-height} / #{$row-count});
|
||||
right: 0; bottom: 0;
|
||||
|
||||
background-image: linear-gradient(to right, rgba($lbry-white, 0), #{$fade-color} 80%);
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin no-user-select {
|
||||
user-select: none;
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue