Browse code
Style header
Martin Filipovic Hinrichs authored on01/02/2026 11:00:59 Showing2 changed files
- src/Resources/app/storefront/src/scss/areas/_header.scss
- src/Resources/views/storefront/layout/header/search.html.twig
| ... | ... |
@@ -32,11 +32,21 @@ |
| 32 | 32 |
|
| 33 | 33 |
// Header |
| 34 | 34 |
header.header-main {
|
| 35 |
- padding: 2rem .25rem 0; |
|
| 35 |
+ padding: 2.5rem .25rem 1rem; |
|
| 36 |
+} |
|
| 37 |
+ |
|
| 38 |
+.header-logo-picture {
|
|
| 39 |
+ @include media-breakpoint-up(lg) {
|
|
| 40 |
+ max-width: 361px; |
|
| 41 |
+ } |
|
| 36 | 42 |
} |
| 37 | 43 |
|
| 38 | 44 |
.header-row {
|
| 39 | 45 |
display: flex; |
| 46 |
+ |
|
| 47 |
+ @include media-breakpoint-up(lg) {
|
|
| 48 |
+ align-items: flex-end; |
|
| 49 |
+ } |
|
| 40 | 50 |
} |
| 41 | 51 |
|
| 42 | 52 |
.header-search {
|
| ... | ... |
@@ -72,6 +82,10 @@ header.header-main {
|
| 72 | 82 |
padding: 0.5625rem; |
| 73 | 83 |
font-size: rfs-value(18px); |
| 74 | 84 |
|
| 85 |
+ svg {
|
|
| 86 |
+ margin-top: -4px; |
|
| 87 |
+ } |
|
| 88 |
+ |
|
| 75 | 89 |
.phone-number {
|
| 76 | 90 |
padding-left: 0.5rem; |
| 77 | 91 |
font-size: rfs-value(22px); |
| ... | ... |
@@ -6,7 +6,7 @@ |
| 6 | 6 |
{% block layout_header_search_form %}
|
| 7 | 7 |
{{ parent() }}
|
| 8 | 8 |
<div class="header-phone"> |
| 9 |
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone-icon lucide-phone"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></svg> |
|
| 9 |
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone-icon lucide-phone"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></svg> |
|
| 10 | 10 |
{{ 'header.phone.text'|trans }}
|
| 11 | 11 |
<span class="phone-number">{{ 'header.phone.number'|trans }}</span>
|
| 12 | 12 |
</div> |