Merge pull request #1225 from cnomes/fix/small-css-fixes

fix(stark-ui): fix css issues in `route-search-component`
NationalBankBelgium · Apr 1, 2019 · 9b0a04c · 9b0a04c
2 parents 517df61 + 1d39083
commit 9b0a04c
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 40 deletions.
diff --git a/packages/stark-ui/src/modules/route-search/components/_route-search-theme.scss b/packages/stark-ui/src/modules/route-search/components/_route-search-theme.scss
@@ -5,7 +5,7 @@
 .search-field {
   .mat-form-field-wrapper {
     border: 1px solid mat-color($grey-palette, 400);
-    background-color: #ffff;
+    background-color: #fff;
     color: mat-color($grey-palette, 900);
   }
 }
@@ -16,14 +16,4 @@ button.search-button {
   color: mat-color($grey-palette, A100);
 }
 
-@media #{$mobile-only-query} {
-  .search-field {
-    .mat-form-field-wrapper {
-      border: 1px solid mat-color($grey-palette, 400);
-      background-color: #ffff;
-      color: mat-color($grey-palette, 900);
-    }
-  }
-}
-
 /* END stark-ui: src/modules/route-search/components/route-search-theme.scss */
diff --git a/packages/stark-ui/src/modules/route-search/components/_route-search.component.scss b/packages/stark-ui/src/modules/route-search/components/_route-search.component.scss
@@ -20,36 +20,42 @@
   vertical-align: bottom;
 }
 
-.search-field {
-  .mat-form-field-wrapper {
-    margin-left: 5px;
-    margin-right: 5px;
-    width: 210px;
-    border-radius: 10px;
-    height: 40px;
-    padding-bottom: 0;
+.route-search-input-wrapper {
+  &.hide {
+    display: none;
+  }
 
-    .mat-form-field-label {
-      line-height: 18px;
+  .search-field {
+    .mat-form-field-wrapper {
+      margin-left: 5px;
+      margin-right: 5px;
+      width: 210px;
+      border-radius: 10px;
+      height: 40px;
+      padding-bottom: 0;
+
+      .mat-form-field-label {
+        line-height: 18px;
+      }
     }
-  }
 
-  .mat-form-field-label {
-    font-size: 15px;
-  }
+    .mat-form-field-label {
+      font-size: 15px;
+    }
 
-  .mat-input-element {
-    width: 200px;
-  }
+    .mat-input-element {
+      width: 200px;
+    }
 
-  .mat-form-field-infix {
-    border: 0;
-    text-indent: 5px;
-    margin-top: 4px;
-  }
+    .mat-form-field-infix {
+      border: 0;
+      text-indent: 5px;
+      margin-top: 4px;
+    }
 
-  .mat-form-field-underline {
-    display: none;
+    .mat-form-field-underline {
+      display: none;
+    }
   }
 }
 

diff --git a/packages/stark-ui/src/modules/route-search/components/route-search.component.html b/packages/stark-ui/src/modules/route-search/components/route-search.component.html
@@ -9,7 +9,7 @@
 	>
 		<mat-icon [svgIcon]="icon" starkSvgViewBox></mat-icon>
 	</button>
-	<div *ngIf="!hide">
+	<div [ngClass]="{ hide: hide }" class="route-search-input-wrapper">
 		<mat-form-field floatLabel="never" class="search-field">
 			<input
 				class="search-field-input"

diff --git a/packages/stark-ui/src/modules/route-search/components/route-search.component.ts b/packages/stark-ui/src/modules/route-search/components/route-search.component.ts
@@ -187,7 +187,7 @@ export class StarkRouteSearchComponent extends AbstractStarkUiComponent implemen
 			setTimeout(() => {
 				const inputField: HTMLElement = this.elementRef.nativeElement.querySelector(".search-field-input");
 				inputField.focus();
-			}, 80);
+			});
 		}
 	}
 

diff --git a/showcase/src/app/shared/components/reference-block/_reference-block.component.scss b/showcase/src/app/shared/components/reference-block/_reference-block.component.scss
@@ -4,17 +4,17 @@
 /* stark-ui: src/modules/reference-block/components/reference-block.component.scss */
 .stark-reference-block div {
   background-color: #fff;
-  border: solid 1px color(mat-color($grey-palette, 400));
+  border: solid 1px mat-color($grey-palette, 400);
   padding: 10px 10px 10px 50px;
   border-radius: 5px;
-  box-shadow: color(mat-color($grey-palette, 300));
+  box-shadow: mat-color($grey-palette, 300);
   position: relative;
 
   & mat-icon {
     position: absolute;
     left: 15px;
     top: 14px;
-    color: color(mat-color($grey-palette, 700));
+    color: mat-color($grey-palette, 700);
   }
 
   & ul {
-Original file line number
+Diff line change
@@ Expand Up @@
     			setTimeout(() => {
     				const inputField: HTMLElement = this.elementRef.nativeElement.querySelector(".search-field-input");
     				inputField.focus();
-    			}, 80);
+    			});
     		}
     	}
@@ Expand Down @@