From 2790c6c2728b522bb1728a556dc20866a909ad5d Mon Sep 17 00:00:00 2001 From: martibelegu Date: Fri, 22 Mar 2024 11:45:54 +0100 Subject: [PATCH 1/2] XCORNER-7 truncate review summary --- assets/scss/components/_reviews.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/assets/scss/components/_reviews.scss b/assets/scss/components/_reviews.scss index 7f98a290..6923317a 100644 --- a/assets/scss/components/_reviews.scss +++ b/assets/scss/components/_reviews.scss @@ -21,6 +21,11 @@ $swiper-arrow-right-purple: './../icons/arrow-right-purple.svg'; } .c-review-carousel__summary { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; + overflow: hidden; + text-overflow: ellipsis; color: $color-black; font-family: $font-regular; font-size: rem-calc(16px); From 4deb9cbba0e21b7d094a85c3f391f542b4c3d698 Mon Sep 17 00:00:00 2001 From: martibelegu Date: Fri, 22 Mar 2024 13:51:53 +0100 Subject: [PATCH 2/2] XCORNER-7 add it as a mixin --- assets/scss/components/_reviews.scss | 6 +----- assets/scss/tools/_tools.scss | 1 + assets/scss/tools/_truncate.scss | 7 +++++++ 3 files changed, 9 insertions(+), 5 deletions(-) create mode 100644 assets/scss/tools/_truncate.scss diff --git a/assets/scss/components/_reviews.scss b/assets/scss/components/_reviews.scss index 6923317a..c275d2bf 100644 --- a/assets/scss/components/_reviews.scss +++ b/assets/scss/components/_reviews.scss @@ -21,11 +21,7 @@ $swiper-arrow-right-purple: './../icons/arrow-right-purple.svg'; } .c-review-carousel__summary { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 4; - overflow: hidden; - text-overflow: ellipsis; + @include truncate(4); color: $color-black; font-family: $font-regular; font-size: rem-calc(16px); diff --git a/assets/scss/tools/_tools.scss b/assets/scss/tools/_tools.scss index b3b045ea..f908a7e1 100644 --- a/assets/scss/tools/_tools.scss +++ b/assets/scss/tools/_tools.scss @@ -8,3 +8,4 @@ @import 'rem-calculations'; @import 'lists'; @import 'container'; +@import 'truncate'; diff --git a/assets/scss/tools/_truncate.scss b/assets/scss/tools/_truncate.scss new file mode 100644 index 00000000..8a76cd01 --- /dev/null +++ b/assets/scss/tools/_truncate.scss @@ -0,0 +1,7 @@ +@mixin truncate($lines: 1) { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: $lines; +}