docs(validator): Simplify the styles for the basic sample of the validator service

Author: dkamburov

src/app/grid/grid-validator-service/grid-validator-service.component.html

@@ -1,12 +1,12 @@
 <div class="top-row">
     <igx-switch [(ngModel)]="rowEdit">Row edit</igx-switch>
 </div>
-<div class="grid__wrapper">
+<div class="grid-wrapper">
     <igx-grid #grid1 [data]="data" [width]="'100%'" [height]="'480px'" [autoGenerate]="false" [batchEditing]="true"
         [rowEditable]="rowEdit" [primaryKey]="'id'">
         <igx-column field="Avatar" header="Photo" dataType="string" width="80" [editable]="false">
             <ng-template igxCell let-cell="cell">
-                <div class="cell__inner avatar-cell">
+                <div>
                     <igx-avatar [src]="cell.row.data.avatar" [roundShape]="true" size="small"></igx-avatar>
                 </div>
             </ng-template>

src/app/grid/grid-validator-service/grid-validator-service.component.scss

@@ -1,42 +1,9 @@
-@use "../../../variables" as *;
-
-$my-light-gray: #e3e3e3;
-$my-banner-palette: $purple-palette;
-$custom-grid: grid-theme(
-    $palette: $purple-palette,
-);
-
 .top-row,
 .grid-wrapper {
     padding: 16px;
 }
 
-.sample-wrapper {
+.grid-wrapper {
     margin: 0 auto;
     padding: 16px;
 }
-
-$banner-theme: banner-theme(
-    $banner-background: $my-light-gray,
-    $banner-message-color: color($my-banner-palette, "secondary", 600),
-);
-
-$button-theme: button-theme(
-    $palette: $purple-palette,
-);
-
-$custom-checkbox: checkbox-theme(
-    $palette: $my-banner-palette,
-);
-
-.custom-buttons {
-    @include button($button-theme);
-}
-
-:host {
-    ::ng-deep {
-        @include checkbox($custom-checkbox);
-        @include grid($custom-grid);
-        @include banner($banner-theme);
-    }
-}