chore(*): Address comments on styling.

IgniteUI · Apr 10, 2020 · ee87527 · ee87527
1 parent 5ab9919
commit ee87527
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss
@@ -706,6 +706,10 @@
                 @extend %igx-grid__tree-cell-cosy--padding-level-#{$i} !optional;
             }
         }
+
+        @include e(td, $m: pinned-chip) {
+            @extend %grid-cell--pinned-chip--cosy !optional;
+        }
     }
 
     @include m(compact) {
@@ -811,6 +815,10 @@
                 @extend %igx-grid__tree-cell-compact--padding-level-#{$i} !optional;
             }
         }
+
+        @include e(td, $m: pinned-chip) {
+            @extend %grid-cell--pinned-chip--compact !optional;
+        }
     }
 
     @include _excel-filtering-partial();

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
@@ -1418,7 +1418,15 @@
     }
 
     %grid-cell--pinned-chip {
-        margin-right: rem(4px);
+        margin-#{$right}: rem(12px);
+    }
+
+    %grid-cell--pinned-chip--cosy {
+        margin-#{$right}: rem(8px);
+    }
+
+    %grid-cell--pinned-chip--compact {
+        margin-#{$right}: rem(4px);
     }
 
     %grid-cell-header {

diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss
@@ -47,7 +47,7 @@
 /// @prop {Map} edit-mode-color [igx-color: ('secondary', 500)] - The text color in edit mode.
 /// @prop {Map} edited-row-indicator [igx-color: ('grays', 400)] - The indicator's color of edited row.
 /// @prop {Map} cell-edited-value-color [igx-color: ('grays', 600)] - The color of cell edited value.
-/// @prop {Map} cell-disabled-color [igx-color: ('grays', 600)] - The text color of a disabled cell.
+/// @prop {Map} cell-disabled-color [igx-color: ('grays', 500)] - The text color of a disabled cell.
 /// @prop {Map} resize-line-color [igx-color: ('secondary', 500)] - The table header resize line color.
 /// @prop {Map} drop-indicator-color [igx-color: ('secondary', 500)] - The color of the drop indicator.
 /// @prop {Map} grouparea-background [igx-color: ('grays', 100), hexrgba: #fff] - The grid group area background color.
@@ -235,7 +235,7 @@ $_light-grid: extend(
         ),
 
         cell-disabled-color: (
-            igx-color: ('grays', 400)
+            igx-color: ('grays', 500)
         ),
 
         resize-line-color: (