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

Responsive styling of header.

Browse Source
This commit is contained in:
Florian THIERRY
2024-06-12 13:36:16 +02:00
parent 54fbc7d609
commit 4cc2a15231
1 changed files with 37 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -51,7 +51,7 @@ $headerHeight: 3.5em;
color: white;
text-decoration: none;
gap: .5em;
img {
$imageSize: 2em;
width: $imageSize;
@@ -60,6 +60,12 @@ $headerHeight: 3.5em;
.title {
font-size: 1.5em;
opacity: 0;
transition: opacity .2s ease-in-out;
@media screen and (min-width: 600px) {
opacity: 1;
}
}
}
}
@@ -69,9 +75,38 @@ $headerHeight: 3.5em;
.search-bar {
flex: 1;
max-width: 50em;
$borderRadiusValue: 10em;
position: relative;
max-width: 12em;
transition: max-width .2s ease-in-out;
@media screen and (min-width: 435px) {
max-width: 16em;
}
@media screen and (min-width: 500px) {
max-width: 20em;
}
@media screen and (min-width: 700px) {
max-width: 24em;
}
@media screen and (min-width: 800px) {
max-width: 32em;
}
@media screen and (min-width: 900px) {
max-width: 38em;
}
@media screen and (min-width: 1000px) {
max-width: 45em;
}
@media screen and (min-width: 1100px) {
max-width: 50em;
}
input {
flex: 1;