florian/codiki-hexagonal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Design header search bar.

Browse Source
This commit is contained in:
Florian THIERRY
2024-06-05 10:23:38 +02:00
parent 2ba707c336
commit e5076f0c64
2 changed files with 36 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/app/components/header/header.component.html
View File

@@ -8,10 +8,12 @@
</a> </a>
</div> </div>
<div> <div>
<input name="search-query" placeholder="Search something..." /> <div class="search-bar">
<button type="button"> <input name="search-query" placeholder="Search something..." />
<mat-icon>search</mat-icon> <button type="button">
</button> <mat-icon>search</mat-icon>
</button>
</div>
</div> </div>
<div> <div>
<ng-container *ngIf="isAuthenticated; else anonymousRightMenu"> <ng-container *ngIf="isAuthenticated; else anonymousRightMenu">

50
frontend/src/app/components/header/header.component.scss
View File

@@ -66,29 +66,39 @@ $headerHeight: 3.5em;
&:nth-child(2) { &:nth-child(2) {
flex: 1; flex: 1;
$borderRadiusValue: 10em;
.search-bar {
input {
flex: 1; flex: 1;
width: 60%;
max-width: 50em; max-width: 50em;
border-radius: $borderRadiusValue 0 0 $borderRadiusValue; $borderRadiusValue: 10em;
background-color: white; position: relative;
border: solid 1px #ccc;
margin: .5em 0;
padding: .2em .5em;
}
button { input {
display: flex; flex: 1;
align-items: center; width: 60%;
border-radius: 0 $borderRadiusValue $borderRadiusValue 0; max-width: 50em;
background-color: white; border-radius: $borderRadiusValue;
border: solid 1px #ccc; background-color: white;
margin: .5em 0; border: solid 1px #ddd;
padding: .2em 2.7em .2em 1em;
&:hover { height: 2em;
background-color: #eee; }
button {
position: absolute;
display: flex;
align-items: center;
border-radius: $borderRadiusValue;
background-color: white;
border: none;
margin: .5em 0;
right: 1.1em;
color: #aaaaaa;
&:hover {
background-color: #eee;
cursor: pointer;
}
} }
} }
} }