From a85ee219eb7b1d758b02fb78a8b16474e8061d91 Mon Sep 17 00:00:00 2001 From: Alex Inkin Date: Thu, 12 Oct 2023 14:27:03 +0400 Subject: [PATCH] fix(experimental): `Fade` fix line height issue (#5617) Co-authored-by: a.inkin --- projects/experimental/directives/fade/fade.directive.ts | 2 ++ projects/experimental/directives/fade/fade.style.less | 1 - 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/experimental/directives/fade/fade.directive.ts b/projects/experimental/directives/fade/fade.directive.ts index b3312b72fe0d..0d6b02fcaf97 100644 --- a/projects/experimental/directives/fade/fade.directive.ts +++ b/projects/experimental/directives/fade/fade.directive.ts @@ -36,7 +36,9 @@ import {TuiFadeComponent} from './fade.component'; ], }) export class TuiFadeDirective { + // TODO: Remove when lh CSS units are supported: https://caniuse.com/mdn-css_types_length_lh @Input('tuiFadeHeight') + @HostBinding('style.line-height') @HostBinding('style.--line-height') lineHeight: string | null = null; diff --git a/projects/experimental/directives/fade/fade.style.less b/projects/experimental/directives/fade/fade.style.less index 4e83973d130f..b103f43f814e 100644 --- a/projects/experimental/directives/fade/fade.style.less +++ b/projects/experimental/directives/fade/fade.style.less @@ -8,7 +8,6 @@ mask-repeat: no-repeat; &:not([data-orientation='vertical']) { - line-height: var(--line-height, inherit) !important; mask-image: linear-gradient(to right, transparent var(--fade-offset), #000 calc(var(--fade-size) + var(--fade-offset))), linear-gradient(to left, transparent var(--fade-offset), #000 calc(var(--fade-size) + var(--fade-offset))),