chore(*): Extract styles in classes.

Author: MKirova

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

@@ -557,6 +557,14 @@
             @extend %igx-grid__tr-pivot--row-area !optional
         }
 
+        @include e(tr-pivot, $m: 'filter-container') {
+            @extend %igx-grid__tr-pivot--filter-container !optional
+        }
+
+        @include e(tr-pivot, $m: 'drop-row-area') {
+            @extend %igx-grid__tr-pivot--drop-row-area !optional
+        }
+
         @include e(tr-pivot, $m: 'filter') {
             @extend %igx-grid__tr-pivot--filter !optional
         }

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

@@ -2936,6 +2936,15 @@
         border-bottom: 0;
     }
 
+    %igx-grid__tr-pivot--filter-container {
+        display: flex;
+        flex-direction: column;
+    }
+
+    %igx-grid__tr-pivot--drop-row-area {
+        flex-grow: 1;
+    }
+
     %igx-grid__tr-pivot--filter {
         height: map.get($grid-header-height, 'comfortable');
 

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

@@ -1,6 +1,6 @@
 <div class="igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot" role="row" [style.width.px]="width">
     <div class="igx-grid__tr" role="row" [style.width.px]="width">
-        <div class='igx-grid__tr-pivot--filterContainer'>
+        <div class='igx-grid__tr-pivot--filter-container'>
             <div #pivotFilterContainer *ngIf="grid.showPivotConfigurationUI"
                 class="igx-grid__tr-pivot igx-grid__tr-pivot--filter" [style.min-width.px]="grid.pivotRowWidths - 1"
                 [style.max-width.px]="grid.pivotRowWidths - 1" (igxDragEnter)="onAreaDragEnter($event, filterArea, 2)"
@@ -25,7 +25,7 @@
                     </igx-chip>
                 </igx-chips-area>
             </div>
-            <div class='igx-grid__tr-pivot--rowDropAreaContainer' style='height:100%;' (igxDragEnter)="onAreaDragEnter($event, rowArea, 0)"
+            <div class='igx-grid__tr-pivot--drop-row-area' (igxDragEnter)="onAreaDragEnter($event, rowArea, 0)"
             (igxDragLeave)="onAreaDragLeave($event, rowArea)" igxDrop (dropped)="onDimDrop($event, rowArea, 0)">
             </div>
         </div>