From b2a848436df8b88e888deb4b81d4003c7cf3b696 Mon Sep 17 00:00:00 2001
From: shamalainen <sebastian@hamse.fi>
Date: Wed, 11 Nov 2020 15:31:25 +0200
Subject: [PATCH] Update logo label sizing to match the design
---
src/components/site-header/site-header.scss | 7 +------
src/components/site-header/site-logo/site-logo.scss | 7 +++++++
src/components/site-header/site-logo/site-logo.tsx | 2 +-
src/components/site-header/site-search/site-search.scss | 6 ++++--
4 files changed, 13 insertions(+), 9 deletions(-)
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index 34dbd237..1088f59d 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 bac069b0..356b7550 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 90f924f2..7f066393 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 4190ab9a..c9957777 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) {
--
GitLab