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>
</div>
<div>
<input name="search-query" placeholder="Search something..." />
<button type="button">
<mat-icon>search</mat-icon>
</button>
<div class="search-bar">
<input name="search-query" placeholder="Search something..." />
<button type="button">
<mat-icon>search</mat-icon>
</button>
</div>
</div>
<div>
<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) {
flex: 1;
$borderRadiusValue: 10em;
input {
.search-bar {
flex: 1;
width: 60%;
max-width: 50em;
border-radius: $borderRadiusValue 0 0 $borderRadiusValue;
background-color: white;
border: solid 1px #ccc;
margin: .5em 0;
padding: .2em .5em;
}
$borderRadiusValue: 10em;
position: relative;
button {
display: flex;
align-items: center;
border-radius: 0 $borderRadiusValue $borderRadiusValue 0;
background-color: white;
border: solid 1px #ccc;
margin: .5em 0;
&:hover {
background-color: #eee;
input {
flex: 1;
width: 60%;
max-width: 50em;
border-radius: $borderRadiusValue;
background-color: white;
border: solid 1px #ddd;
padding: .2em 2.7em .2em 1em;
height: 2em;
}
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;
}
}
}
}