diff options
Diffstat (limited to 'client/src/sass/include/_mixins.scss')
-rw-r--r-- | client/src/sass/include/_mixins.scss | 27 |
1 files changed, 27 insertions, 0 deletions
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index aafe478f9..99225e4e5 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss | |||
@@ -16,6 +16,33 @@ | |||
16 | } | 16 | } |
17 | } | 17 | } |
18 | 18 | ||
19 | /** | ||
20 | * This mixin will crop text in block for needed amount of lines and put ellipsis at the end | ||
21 | * | ||
22 | * @param $font-size font-size property | ||
23 | * @param $line-height line-height property | ||
24 | * @param $lines-to-show amount of lines to show | ||
25 | */ | ||
26 | @mixin ellipsis-multiline($font-size: 1rem, $line-height: 1, $lines-to-show: 2) { | ||
27 | display: block; | ||
28 | /* Fallback for non-webkit */ | ||
29 | display: -webkit-box; | ||
30 | max-height: $font-size*$line-height*$lines-to-show; | ||
31 | /* Fallback for non-webkit */ | ||
32 | font-size: $font-size; | ||
33 | line-height: $line-height; | ||
34 | -webkit-line-clamp: $lines-to-show; | ||
35 | -webkit-box-orient: vertical; | ||
36 | overflow: hidden; | ||
37 | text-overflow: ellipsis; | ||
38 | } | ||
39 | |||
40 | @mixin prefix($property, $parameters...) { | ||
41 | @each $prefix in -webkit-, -moz-, -ms-, -o-, "" { | ||
42 | #{$prefix}#{$property}: $parameters; | ||
43 | } | ||
44 | } | ||
45 | |||
19 | @mixin peertube-word-wrap { | 46 | @mixin peertube-word-wrap { |
20 | word-break: normal; | 47 | word-break: normal; |
21 | word-wrap: break-word; | 48 | word-wrap: break-word; |