fix(filter): adjust styles for angular rendering

telerik · Dec 16, 2021 · 971f6cb · 971f6cb
1 parent fe81320
commit 971f6cb
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/packages/default/scss/filter/_layout.scss b/packages/default/scss/filter/_layout.scss
@@ -58,7 +58,9 @@
             }
         }
 
-        .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after {
+        // The second selector targets the Angular rendering
+        .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
+        .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
             content: "";
             position: absolute;
             width: $filter-line-size;
@@ -67,9 +69,12 @@
             left: -$filter-padding-x;
         }
 
+        // The forth and fifth selectors targets the Angular rendering
         .k-filter-group-main::before,
         .k-filter-group-main > .k-filter-toolbar::before,
         .k-filter-group-main > .k-filter-toolbar::after,
+        .k-filter-group-main > * > .k-filter-toolbar::before,
+        .k-filter-group-main > * > .k-filter-toolbar::after,
         .k-filter-lines .k-filter-item:last-child::before {
             display: none;
         }
@@ -99,7 +104,9 @@
                 }
             }
 
-            .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after {
+            // The second selector targets the Angular rendering
+            .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
+            .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
                 left: auto;
                 right: -$filter-padding-x;
             }

diff --git a/packages/default/scss/filter/_theme.scss b/packages/default/scss/filter/_theme.scss
@@ -11,9 +11,11 @@
             color: $filter-preview-operator-text;
         }
 
+        // The last selector targets the Angular rendering
         .k-filter-item::before,
         .k-filter-toolbar::before,
-        .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after {
+        .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
+        .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
             background-color: $component-border;
         }
     }