diff options
-rw-r--r-- | client/src/sass/include/_miniature.scss | 7 | ||||
-rw-r--r-- | client/src/sass/include/_mixins.scss | 16 |
2 files changed, 7 insertions, 16 deletions
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 @@ | |||
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | 3 | ||
4 | @mixin miniature-name { | 4 | @mixin miniature-name { |
5 | @include ellipsis-multiline( | 5 | @include ellipsis-multiline(16px, 2); |
6 | $font-size: 1rem, | 6 | |
7 | $line-height: 1, | ||
8 | $lines-to-show: 2 | ||
9 | ); | ||
10 | transition: color 0.2s; | 7 | transition: color 0.2s; |
11 | font-size: 16px; | 8 | font-size: 16px; |
12 | font-weight: $font-semibold; | 9 | 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 @@ | |||
24 | overflow: hidden; | 24 | overflow: hidden; |
25 | text-overflow: ellipsis; | 25 | text-overflow: ellipsis; |
26 | } | 26 | } |
27 | /** | 27 | |
28 | * This mixin will crop text in block for needed amount of lines and put ellipsis at the end | 28 | @mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) { |
29 | * | ||
30 | * @param $font-size font-size property | ||
31 | * @param $line-height line-height property | ||
32 | * @param $lines-to-show amount of lines to show | ||
33 | */ | ||
34 | @mixin ellipsis-multiline($font-size: 1rem, $line-height: 1, $lines-to-show: 2) { | ||
35 | display: block; | 29 | display: block; |
36 | /* Fallback for non-webkit */ | 30 | /* Fallback for non-webkit */ |
37 | display: -webkit-box; | 31 | display: -webkit-box; |
38 | max-height: $font-size * $line-height * $lines-to-show; | 32 | max-height: $font-size * $number-of-lines; |
39 | /* Fallback for non-webkit */ | 33 | /* Fallback for non-webkit */ |
40 | font-size: $font-size; | 34 | font-size: $font-size; |
41 | line-height: $line-height; | 35 | line-height: $font-size - 0.1; |
42 | -webkit-line-clamp: $lines-to-show; | 36 | -webkit-line-clamp: $number-of-lines; |
43 | -webkit-box-orient: vertical; | 37 | -webkit-box-orient: vertical; |
44 | overflow: hidden; | 38 | overflow: hidden; |
45 | text-overflow: ellipsis; | 39 | text-overflow: ellipsis; |