fix(grid): Fix class name and vertical centering of the checkbox

Signed-off-by: MPopov <desig9stein@gmail.com>

Author: MPopov

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -331,8 +331,8 @@
         @extend %grid-cell-text !optional;
     }
 
-    @include e(def_tmp_padding) {
-        @extend %grid__def_tmp_padding !optional;
+    @include e(cbx-padding) {
+        @extend %cbx-padding !optional;
     }
 
     @include e(cbx-selection) {
@@ -523,8 +523,8 @@
             @extend %igx-grid__drag-indicator--cosy !optional;
         }
 
-        @include e(def_tmp_padding) {
-            @extend %grid__def_tmp_padding--cosy !optional;
+        @include e(cbx-padding) {
+            @extend %cbx-padding--cosy !optional;
         }
 
         @include e(cbx-selection, $m: push) {
@@ -623,8 +623,8 @@
             @extend %igx-grid__drag-indicator--compact !optional;
         }
 
-        @include e(def_tmp_padding) {
-            @extend %grid__def_tmp_padding--compact !optional;
+        @include e(cbx-padding) {
+            @extend %cbx-padding--compact !optional;
         }
 
         @include e(cbx-selection, $m: push) {

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1386,15 +1386,18 @@
         z-index: 4;
     }
 
-    %grid__def_tmp_padding {
+    %cbx-padding {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         padding: map-get($grid-header-padding, 'comfortable');
     }
 
-    %grid__def_tmp_padding--cosy {
+    %cbx-padding--cosy {
         padding: map-get($grid-header-padding, 'cosy');
     }
 
-    %grid__def_tmp_padding--compact {
+    %cbx_padding--compact {
         padding: map-get($grid-header-padding, 'compact');
     }
 

projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html

@@ -11,7 +11,7 @@
          <ng-template *ngTemplateOutlet="
             this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;
             context: { $implicit: {
-                            index: this.grid.groupingExpressions.length > 0 ? this.grid.filteredSortedData.indexOf(this.rowData) : 
+                            index: this.grid.groupingExpressions.length > 0 ? this.grid.filteredSortedData.indexOf(this.rowData) :
                                 this.index + this.grid.page * this.grid.perPage,
                             rowID: rowID, selected: selected }}">
         </ng-template>
@@ -112,7 +112,7 @@
 </ng-container>
 
 <ng-template #rowSelectorBaseTemplate>
-    <div class="igx-grid__def_tmp_padding">
+    <div class="igx-grid__cbx-padding">
         <igx-checkbox
             [checked]="selected"
             [readonly]="true"

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -252,7 +252,7 @@
 </ng-template>
 
 <ng-template #headSelectorBaseTemplate igxHeadSelector let-context>
-    <div class="igx-grid__def_tmp_padding">
+    <div class="igx-grid__cbx-padding">
         <igx-checkbox
             [readonly]="true"
             [checked]="context.selectedCount > 0 && context.totalCount === context.selectedCount"

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

@@ -217,7 +217,7 @@
 </ng-template>
 
 <ng-template #headSelectorBaseTemplate igxHeadSelector let-context>
-    <div class="igx-grid__def_tmp_padding">
+    <div class="igx-grid__cbx-padding">
         <igx-checkbox
             [readonly]="true"
             [checked]="context.selectedCount > 0 && context.totalCount === context.selectedCount"

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html

@@ -9,7 +9,7 @@
 <ng-template #defaultCollapsedTemplate>
         <igx-icon [isActive]='!added' fontSet="material">chevron_right</igx-icon>
  </ng-template>
- 
+
  <ng-template #defaultEmptyTemplate>
     <igx-icon fontSet="material"></igx-icon>
 </ng-template>
@@ -77,7 +77,7 @@
 </ng-template>
 
 <ng-template #rowSelectorBaseTemplate>
-    <div class="igx-grid__def_tmp_padding">
+    <div class="igx-grid__cbx-padding">
         <igx-checkbox
             [readonly]="true"
             [checked]="selected"

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html

@@ -110,7 +110,7 @@
     <ng-container *ngTemplateOutlet="col.visibleIndex === 0 ? treeCellTemplate : cellTemplate"></ng-container>
 </ng-template>
 <ng-template #rowSelectorBaseTemplate>
-    <div class="igx-grid__def_tmp_padding">
+    <div class="igx-grid__cbx-padding">
         <igx-checkbox
             [readonly]="true"
             [checked]="selected"

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html

@@ -192,7 +192,7 @@
 </ng-template>
 
 <ng-template #headSelectorBaseTemplate igxHeadSelector let-context>
-    <div class="igx-grid__def_tmp_padding">
+    <div class="igx-grid__cbx-padding">
         <igx-checkbox
             [checked]="context.selectedCount > 0 && context.totalCount === context.selectedCount"
             [ngStyle]="{'visibility': isMultiRowSelectionEnabled? 'visible' : 'hidden' }"