From 4d852ade8edc5e1841ff572b9a539707487506f0 Mon Sep 17 00:00:00 2001 From: smeligrana Date: Sat, 10 Feb 2024 12:27:06 +0100 Subject: [PATCH] fix: used fill-opacity along with opacity to display the sorting arrows correctly --- .../sort-header/sort-header.component.scss | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/projects/design-angular-kit/src/lib/components/core/table/sort/sort-header/sort-header.component.scss b/projects/design-angular-kit/src/lib/components/core/table/sort/sort-header/sort-header.component.scss index d933c5cc..31d44d0f 100644 --- a/projects/design-angular-kit/src/lib/components/core/table/sort/sort-header/sort-header.component.scss +++ b/projects/design-angular-kit/src/lib/components/core/table/sort/sort-header/sort-header.component.scss @@ -14,6 +14,7 @@ .it-sort-arrow { opacity: 0 !important; + fill-opacity: 0 !important; } } @@ -33,23 +34,32 @@ .it-sort-arrow { opacity: 0; - transition: opacity .3s ease-out; - -moz-transition: opacity .3s ease-out; - -webkit-transition: opacity .3s ease-out; - -o-transition: opacity .3s ease-out; + fill-opacity: 0; + transition: + fill-opacity 0.3s ease-out, + opacity 0.3s ease-out; + -moz-transition: + fill-opacity 0.3s ease-out, + opacity 0.3s ease-out; + -webkit-transition: + fill-opacity 0.3s ease-out, + opacity 0.3s ease-out; + -o-transition: + fill-opacity 0.3s ease-out, + opacity 0.3s ease-out; } &:hover { .it-sort-arrow { opacity: 0.5; + fill-opacity: 0.5; } } &.it-sort-header-sorted { .it-sort-arrow { opacity: 1 !important; + fill-opacity: 1 !important; } } } - -