fix(search-bar): conflict between text and icon

infra-geo-ouverte · Mar 7, 2018 · ccf19c1 · ccf19c1
1 parent 0303899
commit ccf19c1
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/lib/search/search-bar/search-bar.component.html b/src/lib/search/search-bar/search-bar.component.html
@@ -3,6 +3,7 @@
     #input
     matInput
     autocomplete="off"
+    [ngClass]="{'hasSearchIcon': searchIcon}"
     [disabled]="disabled"
     [placeholder]="placeholder"
     [ngModel]="term"

diff --git a/src/lib/search/search-bar/search-bar.component.styl b/src/lib/search/search-bar/search-bar.component.styl
@@ -10,9 +10,15 @@ mat-form-field {
 }
 
 input {
-  width: calc(100% - $igo-icon-size);
+  padding-left: 10px;
+  padding-right: $igo-icon-size;
 }
 
+input.hasSearchIcon {
+  padding-right: "calc(%s * 2)" % $igo-icon-size;
+}
+
+
 .searchButtonDiv {
   position: absolute;
   right: 0;