From bf2e9f790b6b1dbaa526b84d4a9b8bc7ff1bd29d Mon Sep 17 00:00:00 2001
From: katja <ekaterina.kondareva@druid.fi>
Date: Thu, 4 Mar 2021 12:19:37 +0200
Subject: [PATCH] black top navbar, styles
---
.../hy-menu-main-group.scss | 7 +++
src/components/site-header/site-header.scss | 16 ++++++-
src/components/site-header/site-header.tsx | 11 +++--
.../site-header/site-logo/site-logo.scss | 43 +++++++++++++++----
.../site-header/site-logo/site-logo.tsx | 18 ++++++--
5 files changed, 77 insertions(+), 18 deletions(-)
diff --git a/src/components/hy-menu-main-group/hy-menu-main-group.scss b/src/components/hy-menu-main-group/hy-menu-main-group.scss
index 90bad91b..9c41cfe4 100644
--- a/src/components/hy-menu-main-group/hy-menu-main-group.scss
+++ b/src/components/hy-menu-main-group/hy-menu-main-group.scss
@@ -7,6 +7,13 @@
display: flex;
flex-flow: row;
position: relative;
+ margin-left: 28px;
+ @include breakpoint($narrow) {
+ margin-left: 32px;
+ }
+ @include breakpoint($wide) {
+ margin-left: 40px;
+ }
}
.menu--main-group__toggle {
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index fc6c275c..26a7e6e4 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -101,11 +101,9 @@
@include breakpoint($narrow) {
margin: 16px 16px 16px 28px;
}
-
@include breakpoint($wide) {
margin: 16px 24px;
}
-
@include breakpoint($extrawide) {
margin: 16px;
}
@@ -126,6 +124,20 @@
display: flex;
flex-direction: row;
+ margin: 12px;
+ @include breakpoint($narrow) {
+ margin: 12px 24px;
+ }
+ @include breakpoint($wide) {
+ margin: 6px 24px;
+ }
+ @include breakpoint($extrawide) {
+ margin: 8px 24px;
+ }
+ @include breakpoint($xlarge) {
+ margin: 8px 32px;
+ }
+
&:hover {
color: var(--grayscale-medium);
a,
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index 688e7941..e4e26ab7 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -321,11 +321,16 @@ export class SiteHeader {
{this.isGroup && (
<div class="hy-site-header__content-top">
<div class={'hy-site-header__logo-container group '}>
- <hy-site-logo size={logoSizeGroup} color={logoColorGroup} url={this.siteUrl} label={this.siteLabel} />
+ <hy-site-logo
+ is-group={true}
+ size={logoSizeGroup}
+ color={logoColorGroup}
+ url={this.siteUrl}
+ label={this.siteLabel}
+ />
+ <hy-menu-main-group is-mobile={false} data-main-menu={this.dataMainMenuLinks} />
</div>
- <hy-menu-main-group is-mobile={false} data-main-menu={this.dataMainMenuLinks} />
-
<div class={'menu--secondary menu--secondary--group'}>
<hy-menu-language
class={'menu--secondary__item is-first group'}
diff --git a/src/components/site-header/site-logo/site-logo.scss b/src/components/site-header/site-logo/site-logo.scss
index 71393b7e..670f16e0 100644
--- a/src/components/site-header/site-logo/site-logo.scss
+++ b/src/components/site-header/site-logo/site-logo.scss
@@ -52,20 +52,45 @@
letter-spacing: -0.7px;
margin-left: 4px;
}
+
+ &.group {
+ @include font-size(12px, 14px);
+ color: var(--grayscale-white);
+ letter-spacing: -0.6px;
+ margin-left: 3px;
+
+ @include breakpoint($wide) {
+ @include font-size(14px, 14px);
+ letter-spacing: -0.7px;
+ }
+
+ @include breakpoint($xlarge) {
+ margin-left: 8px;
+ }
+ }
}
- &__icon svg {
- height: 32px;
- width: 33.41px;
+ &__icon {
+ svg {
+ height: 32px;
+ width: 33.41px;
- @include breakpoint($narrow) {
- height: 48px;
- width: 51px;
+ @include breakpoint($narrow) {
+ height: 48px;
+ width: 51px;
+ }
+
+ @include breakpoint($xlarge) {
+ height: 60px;
+ width: 64px;
+ }
}
- @include breakpoint($xlarge) {
- height: 60px;
- width: 64px;
+ &.group {
+ svg {
+ height: 32px;
+ width: 34px;
+ }
}
}
diff --git a/src/components/site-header/site-logo/site-logo.tsx b/src/components/site-header/site-logo/site-logo.tsx
index 6153aadd..cfd68d4d 100644
--- a/src/components/site-header/site-logo/site-logo.tsx
+++ b/src/components/site-header/site-logo/site-logo.tsx
@@ -24,16 +24,26 @@ export class SiteLogo {
return this.url ? (
<Host class={classAttributes}>
<a href={this.url}>
- <hy-icon class={'hy-site-logo__icon'} icon={'hy-icon-hy-logo'} size={this.size} fill={this.color} />
- <span class={'hy-site-logo__label'} style={{color: this.color}}>
+ <hy-icon
+ class={{'hy-site-logo__icon': true, group: this.isGroup}}
+ icon={'hy-icon-hy-logo'}
+ size={this.size}
+ fill={this.color}
+ />
+ <span class={{'hy-site-logo__label': true, group: this.isGroup}} style={{color: this.color}}>
{this.label}
</span>
</a>
</Host>
) : this.label ? (
<Host class={classAttributes}>
- <hy-icon class={'hy-site-logo__icon'} icon={'hy-icon-hy-logo'} size={this.size} fill={this.color} />
- <span class={'hy-site-logo__label'} style={{color: this.color}}>
+ <hy-icon
+ class={{'hy-site-logo__icon': true, group: this.isGroup}}
+ icon={'hy-icon-hy-logo'}
+ size={this.size}
+ fill={this.color}
+ />
+ <span class={{'hy-site-logo__label': true, group: this.isGroup}} style={{color: this.color}}>
{this.label}
</span>
</Host>
--
GitLab