diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss index 34dbd237d612089ce81d6d64c9ac835dd6a2f029..1088f59d2b9f42092f0bca9627ec92e7164f76ed 100644 --- a/src/components/site-header/site-header.scss +++ b/src/components/site-header/site-header.scss @@ -70,7 +70,7 @@ width: 90%; z-index: 100; - @include breakpoint($medium) { + @include breakpoint($narrow) { width: 400px; } } @@ -112,13 +112,8 @@ svg { height: 24px; - margin-left: 4px; width: 24px; - @include breakpoint($narrow) { - margin-left: 8px; - } - @include breakpoint($medium) { width: 20px; } diff --git a/src/components/site-header/site-logo/site-logo.scss b/src/components/site-header/site-logo/site-logo.scss index bac069b098ea532d2170f8180a54c5f241cc92dd..356b7550bcd29f5725c49fa17993a70058cdb8a6 100644 --- a/src/components/site-header/site-logo/site-logo.scss +++ b/src/components/site-header/site-logo/site-logo.scss @@ -27,6 +27,13 @@ a { margin-left: 8px; max-width: 100%; text-transform: uppercase; + max-width: 90px; + + .hy-site-header__logo-container & { + @include breakpoint($narrow) { + max-width: none; + } + } @include breakpoint($narrow) { @include font-size(15px, 16px); diff --git a/src/components/site-header/site-logo/site-logo.tsx b/src/components/site-header/site-logo/site-logo.tsx index 90f924f229009eee5290043a0f1021bd89fc20ca..7f06639326843659c2310a2218d3d5d67628eec3 100644 --- a/src/components/site-header/site-logo/site-logo.tsx +++ b/src/components/site-header/site-logo/site-logo.tsx @@ -4,7 +4,7 @@ import {ColorVariant, SiteLogoSize} from '../../../utils/utils'; @Component({ tag: 'hy-site-logo', styleUrl: 'site-logo.scss', - shadow: true, + shadow: false, }) export class SiteLogo { @Prop() color: ColorVariant = ColorVariant.black; diff --git a/src/components/site-header/site-search/site-search.scss b/src/components/site-header/site-search/site-search.scss index 4190ab9ae8610307cc5a874ea978223eaf1ecf30..c995777755c7e8e6dfb666758499c80a4dd61031 100644 --- a/src/components/site-header/site-search/site-search.scss +++ b/src/components/site-header/site-search/site-search.scss @@ -33,16 +33,16 @@ &__label { @include font-size(14px, 14px); @include font-weight($bold); - color: var(--site-logo-color); display: none; + display: none; font-family: var(--main-font-family); letter-spacing: -0.9px; margin-left: 4px; + visibility: hidden; @include breakpoint($narrow) { @include font-size(15px, 16px); - display: block; margin-left: 4px; margin-right: 8px; text-transform: uppercase; @@ -50,8 +50,10 @@ @include breakpoint($wide) { @include font-size(14px); + display: block; font-weight: 600; text-transform: none; + visibility: visible; } @include breakpoint($extrawide) {