fix(styling layout): add scss files styling rules improve layout (#12680)

* fix(styling layout): add buttons submenu in sidenav scss

* fix(styling layout): add styling properties

* fix(styling layout): add classes scss files headings

* fix(styling layout): add classes attributes styles

* fix(styling layout): add headings clsses scss files

* fix(styling layout): add general styling rules

* fix(styling layout): add scss files styling rules inprove layout

* fix(styling layout): add scss files styling rules improve layout

---------

Co-authored-by: Hristo <[email protected]>

Author: esteecodes

src/app/app.component.css renamed to src/app/app.component.scss

@@ -6,7 +6,7 @@ import { IgxNavigationDrawerComponent, IgxIconService } from 'igniteui-angular';
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
-    styleUrls: ['./app.component.css']
+    styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
     @HostBinding('attr.id')

src/app/app.component.ts

@@ -6,7 +6,7 @@ import { IgxDialogComponent } from 'igniteui-angular';
 const ATTRACTIONS_CUSTOM_WIDTH = '300px';
 @Component({
     selector: 'app-autocomplete-sample',
-    styleUrls: ['autocomplete.sample.css'],
+    styleUrls: ['autocomplete.sample.scss'],
     templateUrl: `autocomplete.sample.html`
 })
 export class AutocompleteSampleComponent {

src/app/autocomplete/autocomplete.sample.css renamed to src/app/autocomplete/autocomplete.sample.scss

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'app-avatar-sample',
-    styleUrls: ['avatar.sample.css'],
+    styleUrls: ['avatar.sample.scss'],
     templateUrl: `avatar.sample.html`
 })
 export class AvatarSampleComponent {

src/app/autocomplete/autocomplete.sample.ts

@@ -3,6 +3,8 @@
     grid-template-columns: repeat(3, 1fr);
     row-gap: 70px;
     align-items: center;
+    width: 60vw;
+    margin: 2rem auto;
 }
 
 .avatar-sample {

src/app/avatar/avatar.sample.css renamed to src/app/avatar/avatar.sample.scss

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'app-badge-sample',
-    styleUrls: ['badge.sample.css'],
+    styleUrls: ['badge.sample.scss'],
     templateUrl: 'badge.sample.html'
 })
 export class BadgeSampleComponent {}

src/app/avatar/avatar.sample.ts

@@ -5,7 +5,7 @@ import { useAnimation } from '@angular/animations';
 @Component({
     selector: 'app-banner-sample',
     templateUrl: `banner.sample.html`,
-    styleUrls: [`banner.sample.css`]
+    styleUrls: [`banner.sample.scss`]
 })
 export class BannerSampleComponent {
     @ViewChild('bannerNoSafeConnection', { static: true })