Merge pull request #3281 from IgniteUI/mpopov/fix-grid-crm

fix searchbar in crm sample

Author: ChronosSF

projects/app-crm/src/app/grid-crm/grid-crm.component.html

@@ -15,7 +15,7 @@
                         <span class="crm-sample-toolbar__ellipsis">Business Propeller</span>
                     </div>
                     <div class="sample-flex-container">
-                        <igx-input-group type="search" class="searchInputGroup">
+                        <igx-input-group type="search" class="searchInputGroup" displayDensity="compact">
                             <igx-prefix>
                                 <igx-icon class="prefixIcon" *ngIf="searchText.length === 0">search</igx-icon>
                                 <igx-icon class="prefixIcon" *ngIf="searchText.length > 0" (click)="clearSearch()">clear
@@ -34,11 +34,13 @@
                                         No results
                                     </span>
                                 </div>
+
                                 <div class="caseSensitiveButton">
                                     <button igxButton="icon" igxRipple [igxRippleCentered]="true" (click)="updateSearch()" [class]="caseSensitive? 'case-sensitive--active' : ''">
                                         <igx-icon class="caseSensitiveIcon" family="material">text_fields</igx-icon>
                                     </button>
                                 </div>
+
                                 <div class="searchButtons">
                                     <button igxButton="icon" igxRipple [igxRippleCentered]="true" (click)="grid1.findPrev(searchText, caseSensitive)">
                                         <igx-icon family="material">navigate_before</igx-icon>

projects/app-crm/src/app/grid-crm/grid-crm.component.scss

@@ -114,15 +114,6 @@
 		max-width: 68ch;
 	}
 
-	.igx-grid-toolbar__button-space {
-		.igx-icon {
-			font-size: 1rem;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
-	}
-
 	.igx-grid-toolbar__custom-content {
 		flex: 1 0 0%;
 	}
@@ -161,28 +152,11 @@
 		width: 100%;
 	}
 
-	.igx-input-group--search .igx-input-group__bundle {
-		height: rem(36px);
-		width: 100%;
-		overflow: hidden;
-
-		.igx-input-group__bundle-main {
-			padding-top: 0.6rem;
-			height: 36px;
-		}
-	}
-
 	.sample-flex-container {
 		.igx-input-group,
 		.igx-input-group--focused {
 			font-size: 13px;
 			overflow: hidden;
-
-			igx-icon {
-				font-size: 1rem;
-				width: 1rem;
-				height: 1rem;
-			}
 		}
 
 		.igx-input-group__input {