Merge pull request #10560 from IgniteUI/mpopov/sorting-indicator

refactor(grid) sorting indicator and dark theme colors
IgniteUI · Nov 22, 2021 · bd5efcf · bd5efcf
2 parents ba2b054 + 2dae5d4
commit bd5efcf
Show file tree

Hide file tree

Showing 2 changed files with 163 additions and 139 deletions.
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -1023,6 +1023,7 @@
         border-bottom: 1px solid var-get($theme, 'row-border-color');
         outline-style: none;
         position: relative;
+        background-clip: content-box !important;
 
         &:hover {
             background: var-get($theme, 'row-hover-background');
@@ -1106,35 +1107,6 @@
         color: var-get($theme, 'row-even-text-color');
     }
 
-    %grid-row--selected {
-        color: var-get($theme, 'row-selected-text-color');
-        background: var-get($theme, 'row-selected-background');
-
-        %grid-cell--selected,
-        %grid-cell--pinned-selected {
-            color: var-get($theme, 'cell-selected-within-text-color');
-            background: var-get($theme, 'cell-selected-within-background');
-        }
-
-        &:hover {
-            background: var-get($theme, 'row-selected-hover-background');
-            color: var-get($theme, 'row-selected-hover-text-color');
-
-            %grid-cell--column-selected {
-                color: var-get($theme, 'row-selected-hover-text-color');
-                background: var-get($theme, 'row-selected-hover-background');
-            }
-        }
-
-        %igx-grid__tree-grouping-indicator {
-            color: var-get($theme, 'row-selected-text-color');
-
-            &:hover {
-                color: var-get($theme, 'row-selected-text-color');
-            }
-        }
-    }
-
     %igx-grid__tr--expanded {
         border-bottom: none;
     }
@@ -1352,6 +1324,7 @@
         line-height: $grid-cell-lh;
         color: inherit;
         text-align: #{$left};
+        background-clip: border-box !important;
     }
 
     %igx-grid__td--tree-cell {
@@ -1385,6 +1358,7 @@
         }
     }
 
+    %grid-cell--pinned-selected,
     %grid-cell--selected {
         color: var-get($theme, 'cell-selected-text-color');
         background: var-get($theme, 'cell-selected-background');
@@ -1398,6 +1372,35 @@
         }
     }
 
+    %grid-row--selected {
+        color: var-get($theme, 'row-selected-text-color');
+        background: var-get($theme, 'row-selected-background');
+
+        %grid-cell--selected,
+        %grid-cell--pinned-selected {
+            color: var-get($theme, 'cell-selected-within-text-color');
+            background: var-get($theme, 'cell-selected-within-background');
+        }
+
+        &:hover {
+            background: var-get($theme, 'row-selected-hover-background');
+            color: var-get($theme, 'row-selected-hover-text-color');
+
+            %grid-cell--column-selected {
+                color: var-get($theme, 'row-selected-hover-text-color');
+                background: var-get($theme, 'row-selected-hover-background');
+            }
+        }
+
+        %igx-grid__tree-grouping-indicator {
+            color: var-get($theme, 'row-selected-text-color');
+
+            &:hover {
+                color: var-get($theme, 'row-selected-text-color');
+            }
+        }
+    }
+
     %grid-cell--column-selected {
         color: var-get($theme, 'row-selected-text-color');
         background: var-get($theme, 'row-selected-background');
@@ -1493,13 +1496,6 @@
         z-index: 9999;
     }
 
-    %grid-cell--pinned-selected {
-        color: var-get($theme, 'cell-selected-text-color');
-        background: var-get($theme, 'cell-selected-background');
-        // this is causing an issue https://github.com/IgniteUI/igniteui-angular/issues/4981
-        // border-bottom: 0;
-    }
-
     %grid-cell--pinned--column-selected {
         color: var-get($theme, 'row-selected-text-color');
         background: var-get($theme, 'row-selected-background');
@@ -1665,8 +1661,23 @@
         background: var-get($theme, 'header-selected-background');
         opacity: if($variant != 'indigo-design', .7, 1);
 
-        .sort-icon::after {
-            background: var-get($theme, 'header-selected-background');
+        .sort-icon {
+            color: var-get($theme, 'header-selected-text-color');
+
+            ::after {
+                background: var-get($theme, 'header-selected-background');
+            }
+        }
+
+        &%igx-grid-th--sorted {
+            .sort-icon {
+                color: var-get($theme, 'header-selected-text-color');
+
+                &:focus,
+                &:hover {
+                    color: var-get($theme, 'header-selected-text-color');
+                }
+            }
         }
     }
 
@@ -1677,6 +1688,17 @@
         .sort-icon::after {
             background: var-get($theme, 'header-selected-background');
         }
+
+        &%igx-grid-th--sorted {
+            .sort-icon {
+                color: var-get($theme, 'header-selected-text-color');
+
+                &:focus,
+                &:hover {
+                    color: var-get($theme, 'header-selected-text-color');
+                }
+            }
+        }
     }
 
     %igx-grid-th--active {
@@ -1831,7 +1853,6 @@
             border-bottom: none;
         }
 
-        // %igx-grid-summary__label,
         %igx-grid-summary__result {
             color: var-get($theme, 'body-summaries-text-color');
         }