From ad458656f7033557a33252e6f1f865c37163f07a Mon Sep 17 00:00:00 2001
From: Ekaterina Kondareva <ekaterina.kondareva@helsinki.fi>
Date: Tue, 12 Jan 2021 12:08:59 +0200
Subject: [PATCH] Nxstage 1124 remove breakpoint
---
src/components.d.ts | 3 ++
src/components/cta-button/cta-button.scss | 12 ++---
src/components/cta-link/cta-link.scss | 2 +-
.../hy-footer-action/hy-footer-action.scss | 5 +-
.../footer/hy-footer-base/hy-footer-base.scss | 12 ++---
.../footer/hy-footer-info/hy-footer-info.scss | 7 ++-
.../footer/hy-footer-info/hy-footer-info.tsx | 7 ++-
.../hy-footer-link-item.scss | 18 ++++++--
.../hy-footer-link-item.tsx | 6 ++-
.../footer/hy-footer-link-item/readme.md | 1 +
.../grid-container/grid-container.scss | 2 +-
src/components/grid-item/grid-item.scss | 2 +-
src/components/grid-row/grid-row.scss | 10 ++--
src/components/heading/heading.scss | 34 +++++---------
.../hy-breadcrumbs/hy-breadcrumbs.scss | 8 ++--
src/components/hy-hero/hy-hero.scss | 5 --
.../hy-introduction/hy-introduction.scss | 2 +-
.../hy-key-figure-group.scss | 6 +--
.../hy-key-figure/hy-key-figure.scss | 4 +-
.../hy-key-highlight-group.scss | 6 +--
.../hy-key-highlight/hy-key-highlight.scss | 14 +++---
.../hy-large-process-flow-phase.scss | 4 --
.../hy-large-process-flow.scss | 8 +---
src/components/hy-link-list/hy-link-list.scss | 2 +-
src/components/hy-list-item/hy-list-item.scss | 21 ++++++---
.../hy-main-content-wrapper.scss | 4 +-
src/components/hy-main/hy-main.scss | 14 +++---
src/components/hy-main/hy-main.tsx | 6 ++-
src/components/hy-shortcuts/hy-shortcuts.scss | 20 ++++----
src/components/hy-tabs/hy-tabs.scss | 4 +-
.../hy-two-columns/hy-two-columns.scss | 9 ++--
src/components/hy-video/hy-video.scss | 4 +-
src/components/link-box/link-box.scss | 30 ++++--------
.../menu-language-item.scss | 6 +--
.../menu-language/menu-language.scss | 20 ++++----
src/components/navigation/menu/menu.scss | 2 +-
.../paragraph-text-content.scss | 4 +-
.../process-flow-box/process-flow-box.scss | 16 +++----
.../hy-desktop-menu-links.scss | 2 +-
src/components/site-header/site-header.scss | 46 +++++++++++--------
.../site-header/site-logo/site-logo.scss | 24 +++++-----
.../site-header/site-search/site-search.scss | 35 ++++++--------
src/global/_breakpoints.scss | 4 +-
src/utils/utils.ts | 6 +++
44 files changed, 225 insertions(+), 232 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index c3fa15cb..a4f09efe 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -15,6 +15,7 @@ import {
CtaLinkButtonVariants,
CtaLinkVariants,
FooterLinkItemColor,
+ FooterLinkVariants,
GridAlignVariants,
GridColumns,
GridColumnsLg,
@@ -373,6 +374,7 @@ export namespace Components {
label: string;
mainLink: boolean;
url: string;
+ variant: FooterLinkVariants;
}
interface HyGridContainer {}
interface HyGridItem {
@@ -1651,6 +1653,7 @@ declare namespace LocalJSX {
label?: string;
mainLink?: boolean;
url?: string;
+ variant?: FooterLinkVariants;
}
interface HyGridContainer {}
interface HyGridItem {
diff --git a/src/components/cta-button/cta-button.scss b/src/components/cta-button/cta-button.scss
index 962bb864..80ac8621 100644
--- a/src/components/cta-button/cta-button.scss
+++ b/src/components/cta-button/cta-button.scss
@@ -89,7 +89,7 @@
// with sidebar on page
padding: 15px 16px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
// with sidebar on page
padding: 17px 16px;
}
@@ -104,7 +104,7 @@
// with sidebar on page
@include font-size(18px, 18px); //button medium
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
// with sidebar on page
@include font-size(20px, 20px); //button large
}
@@ -119,7 +119,7 @@
@include breakpoint($extrawide) {
margin-left: 10px; //button medium
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
margin-left: 12px; //button large
}
@@ -137,7 +137,7 @@
height: 18px;
width: 18px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
//button large
height: 22px;
width: 22px;
@@ -149,14 +149,14 @@
&.blue-background,
&.black-background {
border: 3px solid var(--grayscale-white);
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
border: 4px solid var(--grayscale-white);
}
}
&.transparent-background {
border: 3px solid var(--grayscale-black);
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
border: 4px solid var(--grayscale-black);
}
}
diff --git a/src/components/cta-link/cta-link.scss b/src/components/cta-link/cta-link.scss
index 3efa5768..8ac25a9a 100644
--- a/src/components/cta-link/cta-link.scss
+++ b/src/components/cta-link/cta-link.scss
@@ -46,7 +46,7 @@
letter-spacing: -0.5px;
line-height: 20px;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
font-size: 16px;
letter-spacing: -0.53px;
}
diff --git a/src/components/footer/hy-footer-action/hy-footer-action.scss b/src/components/footer/hy-footer-action/hy-footer-action.scss
index a119d283..828b97dd 100644
--- a/src/components/footer/hy-footer-action/hy-footer-action.scss
+++ b/src/components/footer/hy-footer-action/hy-footer-action.scss
@@ -3,12 +3,11 @@
border-top: 1px solid var(--grayscale-medium-dark);
display: flex;
flex-direction: row;
- padding: 0 32px;
padding: 8px 16px 16px 16px;
place-content: center space-between;
width: 100%;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
margin: 0 auto;
max-width: $fullhd;
padding: 16px 24px 16px 24px;
@@ -25,7 +24,7 @@
font-family: var(--main-font-family);
letter-spacing: 0;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
@include font-size(16px, 24px);
}
}
diff --git a/src/components/footer/hy-footer-base/hy-footer-base.scss b/src/components/footer/hy-footer-base/hy-footer-base.scss
index e51eb52a..c6e65d5d 100644
--- a/src/components/footer/hy-footer-base/hy-footer-base.scss
+++ b/src/components/footer/hy-footer-base/hy-footer-base.scss
@@ -14,7 +14,7 @@
position: relative;
width: 100%;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
flex-direction: column-reverse;
margin: 0 auto;
max-width: $fullhd;
@@ -37,7 +37,7 @@
justify-content: space-between;
margin-top: 24px;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
align-items: center;
width: 100%;
}
@@ -66,7 +66,7 @@
margin: 32px 0;
white-space: pre-line;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
margin: 32px 0;
}
@@ -134,13 +134,13 @@
&__right {
display: flex;
- flex-direction: column;
flex-wrap: wrap;
+ flex-direction: row;
justify-content: flex-start;
max-height: 100%;
width: 100%;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
margin-bottom: 32px;
max-height: 300px;
width: calc(100% + 24px);
@@ -167,7 +167,7 @@
transform: translateX(50%);
width: 100%;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
bottom: 32px;
right: 50%;
transform: translateX(50%);
diff --git a/src/components/footer/hy-footer-info/hy-footer-info.scss b/src/components/footer/hy-footer-info/hy-footer-info.scss
index 4aacdbac..ff49176a 100644
--- a/src/components/footer/hy-footer-info/hy-footer-info.scss
+++ b/src/components/footer/hy-footer-info/hy-footer-info.scss
@@ -9,7 +9,7 @@
padding: 0 16px 40px 16px;
place-content: center space-between;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
flex-direction: column;
margin: 0 auto;
max-width: $fullhd;
@@ -29,7 +29,7 @@
margin-bottom: 24px;
width: 100%;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
margin-bottom: 32px;
width: 100%;
}
@@ -66,10 +66,9 @@
flex-direction: column;
flex-wrap: wrap;
max-height: auto;
- overflow: hidden;
width: 100%;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
max-height: 430px;
width: 100%;
}
diff --git a/src/components/footer/hy-footer-info/hy-footer-info.tsx b/src/components/footer/hy-footer-info/hy-footer-info.tsx
index d11b9484..ee4be9e3 100644
--- a/src/components/footer/hy-footer-info/hy-footer-info.tsx
+++ b/src/components/footer/hy-footer-info/hy-footer-info.tsx
@@ -8,7 +8,7 @@ export interface FooterInfoLinks {
import {Component, ComponentInterface, Element, Watch, Host, State, Prop, h} from '@stencil/core';
import ResizeObserver from 'resize-observer-polyfill';
-import {HeadingVarians, FooterLinkItemColor} from '../../../utils/utils';
+import {HeadingVarians, FooterLinkItemColor, FooterLinkVariants} from '../../../utils/utils';
@Component({
tag: 'hy-footer-info',
@@ -69,6 +69,7 @@ export class HyFooterInfo implements ComponentInterface {
render() {
const classAttributes = ['hy-footer-info'].join(' ');
const links = this._dataFooterInfoLinks as Array<FooterInfoLinks>;
+ const variant = FooterLinkVariants.campus;
return (
<Host class={classAttributes}>
@@ -89,6 +90,8 @@ export class HyFooterInfo implements ComponentInterface {
return (
<hy-accordion-item accordiontitle={link.label}>
<hy-footer-link-item
+ class="campus"
+ variant={variant}
color={FooterLinkItemColor.black}
label={link.label}
url={link.url}
@@ -107,6 +110,8 @@ export class HyFooterInfo implements ComponentInterface {
links.map((link) => {
return (
<hy-footer-link-item
+ class="campus"
+ variant={variant}
color={FooterLinkItemColor.black}
label={link.label}
url={link.url}
diff --git a/src/components/footer/hy-footer-link-item/hy-footer-link-item.scss b/src/components/footer/hy-footer-link-item/hy-footer-link-item.scss
index 76b2012d..c1f4d546 100644
--- a/src/components/footer/hy-footer-link-item/hy-footer-link-item.scss
+++ b/src/components/footer/hy-footer-link-item/hy-footer-link-item.scss
@@ -2,14 +2,22 @@
display: block;
}
-hy-footer-link-item {
+hy-footer-link-item:not([main-link]) {
width: 100%;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
width: 50%;
}
}
+hy-footer-link-item[main-link] {
+ width: 100%;
+
+ @include breakpoint($narrow) {
+ max-width: 30%;
+ }
+}
+
.hy-footer-link-item--container {
display: flex;
flex-direction: column;
@@ -32,8 +40,8 @@ hy-footer-link-item {
position: relative;
text-decoration: none;
- @include breakpoint($medium) {
- margin-left: 0px;
+ @include breakpoint($narrow) {
+ margin-left: 0;
margin-right: 24px;
padding: 15px 20px 15px 0;
}
@@ -44,7 +52,7 @@ hy-footer-link-item {
padding: 15px 20px 15px 0;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
margin-left: 48px;
}
diff --git a/src/components/footer/hy-footer-link-item/hy-footer-link-item.tsx b/src/components/footer/hy-footer-link-item/hy-footer-link-item.tsx
index 8108c7ad..79dd26a1 100644
--- a/src/components/footer/hy-footer-link-item/hy-footer-link-item.tsx
+++ b/src/components/footer/hy-footer-link-item/hy-footer-link-item.tsx
@@ -1,5 +1,5 @@
-import {Component, Prop, h} from '@stencil/core';
-import {HeadingVarians, FooterLinkItemColor} from '../../../utils/utils';
+import {Component, h, Prop} from '@stencil/core';
+import {FooterLinkItemColor, FooterLinkVariants, HeadingVarians} from '../../../utils/utils';
@Component({
tag: 'hy-footer-link-item',
@@ -13,10 +13,12 @@ export class HyFooterLinkItem {
@Prop() items: Array<any>;
@Prop() color: FooterLinkItemColor = FooterLinkItemColor.black;
@Prop() isMobile: boolean;
+ @Prop() variant: FooterLinkVariants = FooterLinkVariants.base;
render() {
const containerClassAttributes = [
'hy-footer-link-item--container',
+ `hy-footer-link-item__${this.variant}`,
this.items && 'hy-footer-link-item__has-children',
].join(' ');
const classAttributes = [
diff --git a/src/components/footer/hy-footer-link-item/readme.md b/src/components/footer/hy-footer-link-item/readme.md
index 0ca31fc2..3255d4f7 100644
--- a/src/components/footer/hy-footer-link-item/readme.md
+++ b/src/components/footer/hy-footer-link-item/readme.md
@@ -12,6 +12,7 @@
| `label` | `label` | | `string` | `undefined` |
| `mainLink` | `main-link` | | `boolean` | `false` |
| `url` | `url` | | `string` | `undefined` |
+| `variant` | `variant` | | `FooterLinkVariants` | `FooterLinkVariants.base` |
## Dependencies
diff --git a/src/components/grid-container/grid-container.scss b/src/components/grid-container/grid-container.scss
index 4e2892dd..a709b4f2 100644
--- a/src/components/grid-container/grid-container.scss
+++ b/src/components/grid-container/grid-container.scss
@@ -22,7 +22,7 @@
max-width: 75rem;
}
- @media only screen and (min-width: $overwide) {
+ @media only screen and (min-width: $xlarge) {
width: 100%;
max-width: 90rem;
}
diff --git a/src/components/grid-item/grid-item.scss b/src/components/grid-item/grid-item.scss
index a926797e..f7084712 100644
--- a/src/components/grid-item/grid-item.scss
+++ b/src/components/grid-item/grid-item.scss
@@ -28,7 +28,7 @@
$width: 98%;
$gutter: 2%;
-@media only screen and (min-width: $overwide) {
+@media only screen and (min-width: $xlarge) {
$gutter: 3.5%;
}
diff --git a/src/components/grid-row/grid-row.scss b/src/components/grid-row/grid-row.scss
index 524b0ff2..83270a47 100644
--- a/src/components/grid-row/grid-row.scss
+++ b/src/components/grid-row/grid-row.scss
@@ -11,18 +11,18 @@
width: 100%;
}
-.hy-grid__row > [class^="hy-grid-item"] {
+.hy-grid__row > [class^='hy-grid-item'] {
float: left;
- margin: .5rem 1%;
+ margin: 0.5rem 1%;
min-height: 0.125rem;
-
- @include breakpoint($medium) {
+
+ @include breakpoint($narrow) {
margin: 1%;
}
}
.hy-grid__row::after {
- content: "";
+ content: '';
display: table;
clear: both;
}
diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss
index 3ae73943..7eeea7e0 100644
--- a/src/components/heading/heading.scss
+++ b/src/components/heading/heading.scss
@@ -7,14 +7,14 @@
flex-direction: column-reverse;
width: 100%;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
flex-direction: row;
}
&__subsection {
padding: 2.5rem 0 1.375rem;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
padding: 4rem 0 2.375rem;
}
}
@@ -47,7 +47,7 @@
h6 {
padding: 1.5rem 0 1rem;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
padding: 2rem 0 1.5rem;
}
}
@@ -89,7 +89,7 @@
top: 50%;
transform: translateY(-50%);
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
margin-left: 2rem;
}
}
@@ -144,7 +144,7 @@ h1.hy-heading__introduction {
letter-spacing: -1.5px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
// Large with sidebar
@include font-size(56px, 56px);
letter-spacing: -1.8px;
@@ -162,7 +162,7 @@ h1.hy-heading__introduction {
letter-spacing: -1.25px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
// > 1441px
// ex. Side menu layout on Large desktop; Large font
@include font-size(48px, 48px);
@@ -192,7 +192,7 @@ h1.hy-heading__introduction {
letter-spacing: -1.6px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
// > 1400px
// ex. Full width layout on Large desktop; X-large font
@include font-size(54px, 54px);
@@ -201,11 +201,12 @@ h1.hy-heading__introduction {
}
h2.hy-heading__introduction {
+ //@todo check here
@include breakpoint($extrawide) {
// h2 font large
padding: 0 0 1rem;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
// h2 font x-large
padding: 0 0 20px;
}
@@ -219,8 +220,9 @@ h1.hy-heading__introduction {
letter-spacing: -1.8px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
// > 1400px X-Large
+ //@todo check
@include font-size(72px, 72px);
letter-spacing: -2.5px;
}
@@ -244,7 +246,7 @@ h3.hy-heading__landingsection {
letter-spacing: -1.2px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
// > 1400px
@include font-size(40px, 48px);
letter-spacing: -1.2px;
@@ -285,12 +287,6 @@ h1 {
@include font-size(52px, 64px);
letter-spacing: -1.6px;
}
-
- @include breakpoint($overwide) {
- // > 1400px
- @include font-size(52px, 64px);
- letter-spacing: -1.6px;
- }
}
// default h2 used in content pages
@@ -309,12 +305,6 @@ h2 {
@include font-size(40px, 48px);
letter-spacing: -1.2px;
}
-
- @include breakpoint($overwide) {
- // > 1400px
- @include font-size(40px, 48px);
- letter-spacing: -1.2px;
- }
}
// default h3 used in content pages
diff --git a/src/components/hy-breadcrumbs/hy-breadcrumbs.scss b/src/components/hy-breadcrumbs/hy-breadcrumbs.scss
index 7751c6df..fc58c575 100644
--- a/src/components/hy-breadcrumbs/hy-breadcrumbs.scss
+++ b/src/components/hy-breadcrumbs/hy-breadcrumbs.scss
@@ -53,7 +53,7 @@
position: relative;
text-decoration: none;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
margin-right: 28px;
}
@@ -67,7 +67,7 @@
top: 50%;
transform: translateY(-50%);
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
right: -18px;
}
@@ -118,7 +118,7 @@
position: relative;
margin-right: 20px;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
margin-right: 25px;
}
@@ -136,7 +136,7 @@
top: 50%;
transform: translateY(-50%);
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
right: -18px;
}
diff --git a/src/components/hy-hero/hy-hero.scss b/src/components/hy-hero/hy-hero.scss
index e7c3b0ee..110d1457 100644
--- a/src/components/hy-hero/hy-hero.scss
+++ b/src/components/hy-hero/hy-hero.scss
@@ -283,11 +283,6 @@
padding: 16px 16px 16px 32px !important;
}
- @include breakpoint($medium) {
- margin-left: -32px;
- padding: 16px 16px 16px 32px !important;
- }
-
@include breakpoint($wide) {
margin-left: 0;
padding: 16px 16px 16px 0 !important;
diff --git a/src/components/hy-introduction/hy-introduction.scss b/src/components/hy-introduction/hy-introduction.scss
index 36607fc3..7d48ec54 100644
--- a/src/components/hy-introduction/hy-introduction.scss
+++ b/src/components/hy-introduction/hy-introduction.scss
@@ -261,7 +261,7 @@
position: relative;
text-decoration: none;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
@include font-size(16px, 20px);
letter-spacing: -0.6px;
padding: 15px 62px 15px 16px;
diff --git a/src/components/hy-key-figure-group/hy-key-figure-group.scss b/src/components/hy-key-figure-group/hy-key-figure-group.scss
index e6abc90d..0ede6101 100644
--- a/src/components/hy-key-figure-group/hy-key-figure-group.scss
+++ b/src/components/hy-key-figure-group/hy-key-figure-group.scss
@@ -27,7 +27,7 @@
margin-left: auto;
width: 100%;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
display: flex;
flex-wrap: wrap;
max-width: 100%;
@@ -45,7 +45,7 @@
.box-2,
.box-3 {
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
flex-grow: 1;
max-width: 33%;
width: 33%;
@@ -53,7 +53,7 @@
}
.box-4 {
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
flex-grow: 1;
max-width: 49%;
width: 49%;
diff --git a/src/components/hy-key-figure/hy-key-figure.scss b/src/components/hy-key-figure/hy-key-figure.scss
index 8dc6109e..55f4054a 100644
--- a/src/components/hy-key-figure/hy-key-figure.scss
+++ b/src/components/hy-key-figure/hy-key-figure.scss
@@ -8,7 +8,7 @@
text-align: center;
width: 100%;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
display: flex;
flex-direction: column;
width: 100%;
@@ -28,7 +28,7 @@
position: relative;
z-index: 1;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
@include font-size(40px, 30px);
}
diff --git a/src/components/hy-key-highlight-group/hy-key-highlight-group.scss b/src/components/hy-key-highlight-group/hy-key-highlight-group.scss
index 0fc1d921..b9bc2c37 100644
--- a/src/components/hy-key-highlight-group/hy-key-highlight-group.scss
+++ b/src/components/hy-key-highlight-group/hy-key-highlight-group.scss
@@ -24,7 +24,7 @@
.box-4 {
padding: 0 50px 0 20px;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
padding: 0 var(--gutter-medium);
}
@include breakpoint($wide) {
@@ -35,7 +35,7 @@
// 3 key highlights in a row
.box {
width: 100%;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
width: 33.33%;
max-width: 33.33%;
}
@@ -44,7 +44,7 @@
// 4 key highlights in a row
.box-4 {
width: 100%;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
width: 50%;
max-width: 50%;
}
diff --git a/src/components/hy-key-highlight/hy-key-highlight.scss b/src/components/hy-key-highlight/hy-key-highlight.scss
index ccd18bf3..f1e4e33b 100644
--- a/src/components/hy-key-highlight/hy-key-highlight.scss
+++ b/src/components/hy-key-highlight/hy-key-highlight.scss
@@ -6,7 +6,7 @@
margin-bottom: 20px;
width: 100%;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
width: 100%;
}
@@ -15,7 +15,7 @@
text-align: center;
margin-bottom: 1rem;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
text-align: left;
}
}
@@ -37,7 +37,7 @@
text-transform: uppercase;
z-index: 1;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
text-align: left;
}
}
@@ -50,7 +50,7 @@
transform: translate(-50%, 0);
width: 100%;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
left: 0;
transform: none;
}
@@ -69,7 +69,7 @@
margin-top: 8px;
text-align: center;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
text-align: left;
}
}
@@ -87,7 +87,7 @@
.hy-key-highlight__title__container {
@include font-size(24px, 24px);
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
@include font-size(40px, 40px);
}
}
@@ -95,7 +95,7 @@
.hy-key-highlight__description {
@include font-size(14px, 20px);
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
@include font-size(20px, 20px);
}
}
diff --git a/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.scss b/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.scss
index cd153db2..708c7530 100644
--- a/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.scss
+++ b/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.scss
@@ -12,10 +12,6 @@
//tablet
padding-left: calc(100% / 8 + var(--gutter-narrow)); // 1 column padding
}
- @include breakpoint($medium + 1) {
- //small desktop
- padding-left: calc(100% / 12 + var(--gutter-medium)); // 1 column padding
- }
@include breakpoint($wide) {
//mid desktop
padding-left: calc(100% / 12 + var(--gutter-wide)); // 1 column padding
diff --git a/src/components/hy-large-process-flow/hy-large-process-flow.scss b/src/components/hy-large-process-flow/hy-large-process-flow.scss
index a3a93ade..412dbbaa 100644
--- a/src/components/hy-large-process-flow/hy-large-process-flow.scss
+++ b/src/components/hy-large-process-flow/hy-large-process-flow.scss
@@ -11,10 +11,6 @@
max-width: calc(100% / 8 * 7 + var(--gutter-narrow)); // 7 columns out of 8
padding-top: 0;
}
- @include breakpoint($medium + 1) {
- //small desktop; > 768
- max-width: calc(100% / 12 * 8 + var(--gutter-medium)); // 8 columns out of 12
- }
@include breakpoint($wide) {
max-width: calc(100% / 12 * 8 + var(--gutter-wide)); // 8 columns out of 12
}
@@ -56,10 +52,10 @@
z-index: -1;
@include breakpoint($narrow) {
- left: calc(100% / 8 + var(--gutter-wide) + 26.5px);
+ left: calc(100% / 8 + var(--gutter-narrow) + 26.5px);
}
- @include breakpoint($medium + 1) {
+ @include breakpoint($wide) {
left: calc(100% / 12 + var(--gutter-wide) + 26.5px);
}
diff --git a/src/components/hy-link-list/hy-link-list.scss b/src/components/hy-link-list/hy-link-list.scss
index 2fe63df2..bec8f554 100644
--- a/src/components/hy-link-list/hy-link-list.scss
+++ b/src/components/hy-link-list/hy-link-list.scss
@@ -13,7 +13,7 @@
padding-bottom: 19px;
text-transform: uppercase;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
font-size: 18px;
letter-spacing: -0.56px;
}
diff --git a/src/components/hy-list-item/hy-list-item.scss b/src/components/hy-list-item/hy-list-item.scss
index 4165324a..153efd2e 100644
--- a/src/components/hy-list-item/hy-list-item.scss
+++ b/src/components/hy-list-item/hy-list-item.scss
@@ -43,6 +43,15 @@
letter-spacing: -0.8px;
margin-bottom: 8px;
}
+
+ &__large {
+ // >1200 no sidebar;
+ @include breakpoint($extrawide) {
+ @include font-size(26px, 32px);
+ letter-spacing: -0.8px;
+ margin-bottom: 8px;
+ }
+ }
}
&__link-container {
@@ -153,12 +162,6 @@
padding: 20px 24px;
}
- &__data {
- display: flex;
- flex-direction: column;
- margin-bottom: 32px;
- }
-
// >1200 no sidebar;
&__large {
@include breakpoint($extrawide) {
@@ -166,6 +169,12 @@
}
}
+ &__data {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 32px;
+ }
+
&__title {
@include font-size(18px, 22px);
@include font-weight($bold);
diff --git a/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss b/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss
index cb7a79cb..e2e51ea4 100644
--- a/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss
+++ b/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss
@@ -18,7 +18,7 @@
}
// Large desktop Layout >1441px
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
max-width: 1216px;
padding: 0;
}
@@ -39,7 +39,7 @@
}
// Large desktop Layout >1441px
- @include breakpoint($overwide) {
+ @include breakpoint($extrawide) {
max-width: 1440px;
padding: 0;
}
diff --git a/src/components/hy-main/hy-main.scss b/src/components/hy-main/hy-main.scss
index f4d31815..09f78284 100644
--- a/src/components/hy-main/hy-main.scss
+++ b/src/components/hy-main/hy-main.scss
@@ -19,11 +19,10 @@
}
}
- &.with-sidebar {
+ &__common {
position: relative;
-
.layout-content {
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
margin: 0 auto;
width: 100%;
}
@@ -32,7 +31,7 @@
order: 2;
width: 80%;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
padding: 0 2rem;
}
}
@@ -58,12 +57,11 @@
}
}
- &.without-sidebar {
+ &__large {
.layout-content {
- width: 100%;
-
padding: 0;
- @include breakpoint($overwide) {
+ width: 100%;
+ @include breakpoint($extrawide) {
padding: 0 2rem;
}
}
diff --git a/src/components/hy-main/hy-main.tsx b/src/components/hy-main/hy-main.tsx
index 30488a67..3afcd878 100644
--- a/src/components/hy-main/hy-main.tsx
+++ b/src/components/hy-main/hy-main.tsx
@@ -9,7 +9,11 @@ export class HyMain {
@Prop() hasSidebar: boolean = false;
render() {
- const classAttributes = ['hy-main', this.hasSidebar ? 'with-sidebar' : 'without-sidebar'].join(' ');
+ const classAttributes = [
+ 'hy-main',
+ this.hasSidebar ? 'with-sidebar' : 'without-sidebar',
+ this.hasSidebar ? 'hy-main__common' : 'hy-main__large',
+ ].join(' ');
return (
<div class={classAttributes}>
diff --git a/src/components/hy-shortcuts/hy-shortcuts.scss b/src/components/hy-shortcuts/hy-shortcuts.scss
index c7699170..7bcb2bd5 100644
--- a/src/components/hy-shortcuts/hy-shortcuts.scss
+++ b/src/components/hy-shortcuts/hy-shortcuts.scss
@@ -10,8 +10,8 @@
flex-wrap: wrap;
margin: 0 calc(#{var(--gutter-mobile)}* -1);
- @include breakpoint($medium) {
- margin: 0 calc(#{var(--gutter-medium)}* -1);
+ @include breakpoint($narrow) {
+ margin: 0 calc(#{var(--gutter-narrow)}* -1);
}
@include breakpoint($wide) {
margin: 0 calc(#{var(--gutter-wide)}* -1);
@@ -21,9 +21,9 @@
min-height: 62px;
padding: 0 var(--gutter-mobile);
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
min-height: 70px;
- padding: 0 var(--gutter-medium);
+ padding: 0 var(--gutter-narrow);
}
@include breakpoint($wide) {
min-height: 82px;
@@ -34,7 +34,7 @@
.shortcut-link-wrapper.box-3 {
width: 100%;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
width: 33.33%;
}
}
@@ -42,7 +42,7 @@
.shortcut-link-wrapper.box-4 {
width: 50%;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
width: 25%;
}
}
@@ -52,7 +52,7 @@
// mobile
border-top: 2.5px solid var(--brand-main-nearly-black);
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
// tablet
border-top: 3px solid var(--brand-main-nearly-black);
}
@@ -77,7 +77,7 @@
position: relative;
text-decoration: none;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
// tablet
border-bottom: 3px solid var(--brand-main-nearly-black);
border-top: 3px solid var(--brand-main-nearly-black);
@@ -95,7 +95,7 @@
.link-icon {
padding: 0 0 0 8px;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
padding: 0 0 0 12px;
}
@include breakpoint($wide) {
@@ -106,7 +106,7 @@
height: 20px;
fill: var(--brand-main-light);
width: 20px;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
height: 24px;
width: 24px;
}
diff --git a/src/components/hy-tabs/hy-tabs.scss b/src/components/hy-tabs/hy-tabs.scss
index 9d7f1564..80dbb0d1 100644
--- a/src/components/hy-tabs/hy-tabs.scss
+++ b/src/components/hy-tabs/hy-tabs.scss
@@ -124,7 +124,7 @@
}
}
- @include breakpoint($medium) {
+ @include breakpoint($wide) {
padding: 8px 16px;
span.tab-title {
@@ -135,7 +135,7 @@
// No sidebar
[role='tab'].large {
- @include breakpoint($overwide) {
+ @include breakpoint($extrawide) {
margin: 0 12px 0 0;
}
}
diff --git a/src/components/hy-two-columns/hy-two-columns.scss b/src/components/hy-two-columns/hy-two-columns.scss
index db5c55df..532c5659 100644
--- a/src/components/hy-two-columns/hy-two-columns.scss
+++ b/src/components/hy-two-columns/hy-two-columns.scss
@@ -18,14 +18,14 @@
margin-top: 0;
}
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
flex-direction: row;
}
&--reversed {
flex-direction: column-reverse;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
flex-direction: row-reverse;
}
@@ -36,12 +36,9 @@
@include breakpoint($narrow) {
margin-right: 5.79%;
}
- @include breakpoint($medium) {
+ @include breakpoint($wide) {
margin-right: 8.5%;
}
-
- @include breakpoint($overwide) {
- }
}
}
diff --git a/src/components/hy-video/hy-video.scss b/src/components/hy-video/hy-video.scss
index 927d02e0..f11665f6 100644
--- a/src/components/hy-video/hy-video.scss
+++ b/src/components/hy-video/hy-video.scss
@@ -56,7 +56,7 @@
text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
text-transform: uppercase;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
@include font-size(24px, 32px);
letter-spacing: -0.14px;
@@ -79,7 +79,7 @@
height: 48px;
width: 48px;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.6));
height: 60px;
width: 60px;
diff --git a/src/components/link-box/link-box.scss b/src/components/link-box/link-box.scss
index 282cfd4a..dec12271 100644
--- a/src/components/link-box/link-box.scss
+++ b/src/components/link-box/link-box.scss
@@ -7,8 +7,8 @@
position: relative;
width: 100%;
- @include breakpoint($medium) {
- margin-right: var(--gutter-medium);
+ @include breakpoint($narrow) {
+ margin-right: var(--gutter-narrow);
}
@include breakpoint($wide) {
margin-right: var(--gutter-wide);
@@ -37,10 +37,10 @@
:host(.big) {
display: flex;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
flex-grow: 1;
- max-width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 4 + #{var(--gutter-medium)} * 3);
- width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 4 + #{var(--gutter-medium)} * 3);
+ max-width: calc(((100% - #{var(--gutter-narrow)} * 11) / 12) * 4 + #{var(--gutter-narrow)} * 3);
+ width: calc(((100% - #{var(--gutter-narrow)} * 11) / 12) * 4 + #{var(--gutter-narrow)} * 3);
}
@include breakpoint($wide) {
max-width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 4 + #{var(--gutter-wide)} * 3);
@@ -54,10 +54,10 @@
:host(.small) {
display: flex;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
flex-grow: 1;
- max-width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 6 + #{var(--gutter-medium)} * 5);
- width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 6 + #{var(--gutter-medium)} * 5);
+ max-width: calc(((100% - #{var(--gutter-narrow)} * 11) / 12) * 6 + #{var(--gutter-narrow)} * 5);
+ width: calc(((100% - #{var(--gutter-narrow)} * 11) / 12) * 6 + #{var(--gutter-narrow)} * 5);
}
@include breakpoint($wide) {
max-width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 3 + #{var(--gutter-wide)} * 2);
@@ -75,7 +75,7 @@
:host(.small:nth-of-type(2n + 0)) {
display: flex;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
margin-right: 0;
}
@include breakpoint($wide) {
@@ -88,7 +88,7 @@
:host(.small:nth-of-type(4n + 0)) {
display: flex;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
margin-right: 0;
}
}
@@ -101,8 +101,6 @@
.hy-link-box {
text-decoration: none;
- @include breakpoint($medium) {
- }
@include breakpoint($wide) {
text-align: left;
}
@@ -140,10 +138,6 @@
margin-bottom: 68px;
padding: 0 16px;
- @include breakpoint($medium) {
- padding: 0 16px;
- }
-
&__title {
color: var(--brand-main-nearly-black);
font-family: var(--main-font-family);
@@ -168,10 +162,6 @@
margin-bottom: 68px;
padding: 0 12px;
- @include breakpoint($medium) {
- padding: 0 12px;
- }
-
&__title {
color: var(--brand-main-nearly-black);
font-family: var(--main-font-family);
diff --git a/src/components/navigation/menu-language-item/menu-language-item.scss b/src/components/navigation/menu-language-item/menu-language-item.scss
index 06f5c9e0..4f37d85c 100644
--- a/src/components/navigation/menu-language-item/menu-language-item.scss
+++ b/src/components/navigation/menu-language-item/menu-language-item.scss
@@ -31,7 +31,7 @@ a {
font-weight: 700;
padding: 0 32px 22px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
@include font-size(18px, 22px);
padding: 0 40px 32px;
}
@@ -55,15 +55,13 @@ a {
border-bottom: 3px solid var(--grayscale-black);
padding-bottom: 6px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
padding-bottom: 8px;
}
}
}
&:not(.is-mobile) {
- //@include font-size(16px, 20px);
margin: 0;
- // margin: 0 0 5px;
}
}
diff --git a/src/components/navigation/menu-language/menu-language.scss b/src/components/navigation/menu-language/menu-language.scss
index ecbed96f..14d264bd 100644
--- a/src/components/navigation/menu-language/menu-language.scss
+++ b/src/components/navigation/menu-language/menu-language.scss
@@ -12,7 +12,7 @@
}
:host(.menu--language:not([is-mobile])) {
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
position: relative;
right: auto;
top: auto;
@@ -34,11 +34,13 @@
text-transform: uppercase;
@include breakpoint($extrawide) {
- @include font-size(12px, 24px);
+ @include font-size(12px, 12px);
+ letter-spacing: -0.6px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
@include font-size(14px, 24px);
+ letter-spacing: -0.5px;
}
&:focus {
@@ -65,7 +67,7 @@
margin-top: -26px;
padding: 26px 8px 38px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
margin-bottom: -50px;
padding: 26px 12px 50px;
}
@@ -101,7 +103,7 @@
@include breakpoint($extrawide) {
top: 80px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
top: 90px;
}
@@ -121,11 +123,11 @@
height: 16px;
width: 16px;
}
- @include breakpoint($overwide) {
- height: 14px;
- width: 14px;
- }
@include breakpoint($extrawide) {
+ height: 12px;
+ width: 12px;
+ }
+ @include breakpoint($xlarge) {
height: 16px;
width: 16px;
}
diff --git a/src/components/navigation/menu/menu.scss b/src/components/navigation/menu/menu.scss
index f8aa62a6..3f2717bf 100644
--- a/src/components/navigation/menu/menu.scss
+++ b/src/components/navigation/menu/menu.scss
@@ -27,7 +27,7 @@
display: block;
}
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
display: block;
}
}
diff --git a/src/components/paragraph-text/paragraph-text-content.scss b/src/components/paragraph-text/paragraph-text-content.scss
index 746c6041..b1e61253 100644
--- a/src/components/paragraph-text/paragraph-text-content.scss
+++ b/src/components/paragraph-text/paragraph-text-content.scss
@@ -22,7 +22,7 @@
@include breakpoint($extrawide) {
margin-top: 32px; //total gap 56px
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
margin-top: 40px; //total gap 64px
}
}
@@ -33,7 +33,7 @@
@include breakpoint($extrawide) {
margin-top: 40px; //total gap 64px
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
margin-top: 40px; //total gap 64px
}
}
diff --git a/src/components/process-flow-box/process-flow-box.scss b/src/components/process-flow-box/process-flow-box.scss
index 7f787174..967838e8 100644
--- a/src/components/process-flow-box/process-flow-box.scss
+++ b/src/components/process-flow-box/process-flow-box.scss
@@ -16,7 +16,7 @@
width: 138px;
z-index: 1;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
bottom: -62px;
display: grid;
height: 60px;
@@ -31,7 +31,7 @@
svg.mobile {
display: block;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
display: none;
}
}
@@ -39,7 +39,7 @@
svg.desktop {
display: none;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
display: block;
}
}
@@ -48,7 +48,7 @@
.first.even.hy-process-flow-box__step__container {
left: calc(50% - 69px + 16px);
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
left: -90px;
}
@@ -60,7 +60,7 @@
.first.odd.hy-process-flow-box__step__container {
left: calc(50% - 69px + 16px);
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
left: 0;
}
}
@@ -68,7 +68,7 @@
:not(.first).even.hy-process-flow-box__step__container {
left: calc(50% - 69px + 16px);
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
left: -90px;
}
}
@@ -76,7 +76,7 @@
:not(.first).odd.hy-process-flow-box__step__container {
left: calc(50% - 69px + 16px);
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
left: 0;
}
@@ -99,7 +99,7 @@
text-align: center;
z-index: 11;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
left: 0;
max-width: 175px;
padding: 8px 23px 8px 14px;
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
index ba2dc9e1..adb3f88c 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
@@ -41,7 +41,7 @@
padding-bottom: 8px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
padding-bottom: 12px;
}
}
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index 9dfd65aa..8f4b7e6e 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -11,7 +11,7 @@
place-content: center space-between;
z-index: 99;
- @include breakpoint($medium) {
+ @include breakpoint($wide) {
align-content: center;
display: flex;
flex-flow: row;
@@ -24,7 +24,7 @@
height: 96px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
height: 120px;
}
@@ -82,7 +82,7 @@
padding: 15px 16px 15px 12px;
@include breakpoint($narrow) {
- padding: 15px 28px 15px 10px;
+ padding: 15px 28px 15px 15px;
}
&.is-open {
@@ -116,7 +116,7 @@
height: 24px;
width: 24px;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
width: 20px;
}
}
@@ -141,7 +141,7 @@
}
.menu--secondary {
- @include breakpoint($medium) {
+ @include breakpoint($wide) {
align-items: center;
display: flex;
flex-flow: row;
@@ -150,19 +150,22 @@
align-items: center;
display: flex;
flex-flow: row;
- padding: 10px;
+ margin: 0 10px;
+ padding: 10px 0;
}
}
@include breakpoint($extrawide) {
&__item {
- padding: 10px 8px;
+ margin: 0 6px;
+ padding: 10px 0;
}
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
&__item {
- padding: 10px;
+ margin: 0 8px;
+ padding: 10px 0;
}
}
}
@@ -185,42 +188,45 @@
margin-right: 32px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
margin-left: 10px;
margin-right: 32px;
}
&__label {
@include breakpoint($wide) {
- @include font-size(14px, 14px);
+ @include font-size(14px, 24px);
color: var(--brand-main-nearly-black);
font-family: var(--main-font-family);
font-weight: 600;
+ letter-spacing: -0.5px;
margin-left: 4px;
text-decoration: none;
}
@include breakpoint($extrawide) {
- @include font-size(12px, 14px);
+ @include font-size(12px, 12px);
+ letter-spacing: -0.6px;
}
- @include breakpoint($overwide) {
- @include font-size(14px, 14px);
+ @include breakpoint($xlarge) {
+ @include font-size(14px, 24px);
+ letter-spacing: -0.5px;
}
}
svg {
@include breakpoint($wide) {
height: 16px;
- width: 16px;
- }
- @include breakpoint($overwide) {
- height: 14px;
- width: 14px;
+ width: 13.64px;
}
@include breakpoint($extrawide) {
+ height: 12px;
+ width: 10.23px;
+ }
+ @include breakpoint($xlarge) {
height: 16px;
- width: 16px;
+ width: 13.64px;
}
}
}
diff --git a/src/components/site-header/site-logo/site-logo.scss b/src/components/site-header/site-logo/site-logo.scss
index 1fe6db69..9e05b7ad 100644
--- a/src/components/site-header/site-logo/site-logo.scss
+++ b/src/components/site-header/site-logo/site-logo.scss
@@ -25,9 +25,8 @@
font-family: var(--main-font-family);
letter-spacing: -0.9px;
margin-left: 8px;
- max-width: 100%;
- text-transform: uppercase;
max-width: 90px;
+ text-transform: uppercase;
.hy-site-header__logo-container & {
@include breakpoint($narrow) {
@@ -40,28 +39,27 @@
margin-left: 6px;
}
- @include breakpoint($overwide) {
- @include font-size(18px, 16px);
+ @include breakpoint($extrawide) {
+ @include font-size(14px, 14px);
+ }
+
+ @include breakpoint($xlarge) {
+ @include font-size(16px, 16px);
margin-left: 8px;
}
}
&__icon svg {
height: 32px;
- width: 32px;
+ width: 34px;
@include breakpoint($narrow) {
height: 48px;
- width: 48px;
- }
-
- @include breakpoint($extrawide) {
- height: 56px;
- width: 56px !important;
+ width: 51px;
}
- @include breakpoint($overwide) {
- height: 64px;
+ @include breakpoint($xlarge) {
+ height: 60px;
width: 64px;
}
}
diff --git a/src/components/site-header/site-search/site-search.scss b/src/components/site-header/site-search/site-search.scss
index c9957777..dafd132f 100644
--- a/src/components/site-header/site-search/site-search.scss
+++ b/src/components/site-header/site-search/site-search.scss
@@ -10,7 +10,8 @@
padding: 15px 5px;
}
- @include breakpoint($medium) {
+ @include breakpoint($wide) {
+ flex-direction: row-reverse;
padding: 4px 0;
&:focus {
@@ -19,10 +20,6 @@
}
}
- @include breakpoint($wide) {
- flex-direction: row-reverse;
- }
-
&.is-open--menu {
position: absolute;
right: 50px;
@@ -35,33 +32,34 @@
@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);
+ @include font-size(15px, 24px);
margin-left: 4px;
- margin-right: 8px;
text-transform: uppercase;
}
@include breakpoint($wide) {
- @include font-size(14px);
+ @include font-size(14px, 24px);
display: block;
font-weight: 600;
+ letter-spacing: -0.5px;
text-transform: none;
visibility: visible;
}
@include breakpoint($extrawide) {
- @include font-size(12px, 14px);
+ @include font-size(12px, 12px);
+ letter-spacing: -0.6px;
}
- @include breakpoint($overwide) {
- @include font-size(14px, 14px);
+ @include breakpoint($xlarge) {
+ @include font-size(14px, 24px);
+ letter-spacing: -0.5px;
}
}
@@ -69,20 +67,15 @@
height: 20px;
width: 20px;
- @include breakpoint($medium) {
- height: 16px;
- width: 16px;
- }
-
@include breakpoint($wide) {
height: 16px;
width: 16px;
}
- @include breakpoint($overwide) {
- height: 14px;
- width: 14px;
- }
@include breakpoint($extrawide) {
+ height: 12px;
+ width: 12px;
+ }
+ @include breakpoint($xlarge) {
height: 16px;
width: 16px;
}
diff --git a/src/global/_breakpoints.scss b/src/global/_breakpoints.scss
index 7e5feb0c..98c483e2 100644
--- a/src/global/_breakpoints.scss
+++ b/src/global/_breakpoints.scss
@@ -3,7 +3,6 @@
--breakpoint-max-width: 75.0625rem; // 1201px
--breakpoint-medium: 48rem; // 768px
--breakpoint-narrow: 30rem; // 480px
- --breakpoint-overwide: 90.0625rem; // 1441px
--breakpoint-wide: 60rem; // 960px
}
@@ -11,7 +10,6 @@ $narrow: 30rem; // 480px 480-767
$medium: 48rem; // 768px 768-959
$wide: 60rem; // 960px-1200px; small
$extrawide: 75.0625rem; // 1201px-1440px; mid-size
-$overwide: 90.0625rem; // 1441px-1600px, large
$xlarge: 1601px; //1601px-1920px, x-large
$fullhd: 120.0625rem; // 1921px
-$max-width: $overwide;
+$max-width: $extrawide;
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index a8715385..c285a372 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -12,6 +12,12 @@ export type IconName = {
[key: string]: (props: any) => FunctionalComponent;
};
+export enum FooterLinkVariants {
+ default = 'base',
+ base = 'base',
+ campus = 'base',
+}
+
export enum AccordionVariants {
default = 'default',
mini = 'mini',
--
GitLab