X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Finclude%2F_mixins.scss;h=547f03caac89322f42c3cd935b95556bad57534e;hb=74d63469355bad731cdd32defdc85913df3cbd5c;hp=aafe478f9596007263c1bd2207ca3a5ae756899c;hpb=22a16e36f6526887ed8f5e5d3c9f9e5da0b4a8cd;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index aafe478f9..547f03caa 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -16,6 +16,33 @@
   }
 }
 
+/**
+ *  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) {
+  display: block;
+  /* Fallback for non-webkit */
+  display: -webkit-box;
+  max-height: $font-size*$line-height*$lines-to-show;
+  /* Fallback for non-webkit */
+  font-size: $font-size;
+  line-height: $line-height;
+  -webkit-line-clamp: $lines-to-show;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin prefix($property, $parameters...) {
+  @each $prefix in -webkit-, -moz-, -ms-, -o-, "" {
+    #{$prefix}#{$property}: $parameters;
+  }
+}
+
 @mixin peertube-word-wrap {
   word-break: normal;
   word-wrap: break-word;