diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index 2ea4aa105..1e9e8d749 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss @@ -2,11 +2,8 @@ @import '_mixins'; @mixin miniature-name { - @include ellipsis-multiline( - $font-size: 1rem, - $line-height: 1, - $lines-to-show: 2 - ); + @include ellipsis-multiline(16px, 2); + transition: color 0.2s; font-size: 16px; font-weight: $font-semibold; diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 37bd404dd..900638a0e 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -24,22 +24,16 @@ overflow: hidden; text-overflow: ellipsis; } -/** - * This mixin will crop text in block for needed amount of lines and put ellipsis at the end - * - * @param $font-size font-size property - * @param $line-height line-height property - * @param $lines-to-show amount of lines to show - */ -@mixin ellipsis-multiline($font-size: 1rem, $line-height: 1, $lines-to-show: 2) { + +@mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) { display: block; /* Fallback for non-webkit */ display: -webkit-box; - max-height: $font-size * $line-height * $lines-to-show; + max-height: $font-size * $number-of-lines; /* Fallback for non-webkit */ font-size: $font-size; - line-height: $line-height; - -webkit-line-clamp: $lines-to-show; + line-height: $font-size - 0.1; + -webkit-line-clamp: $number-of-lines; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;