diff --git a/src/components.d.ts b/src/components.d.ts
index c3fa15cb390e14e957d0b8048612b8a30ba1153a..a4f09efe95e6a13ff5da3dcf778cef1da478a7aa 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 962bb86403eb012b306c8b3f85b834bb7f228928..80ac86219f1184a411ca22b21bb50d7d1641bd6d 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 3efa5768d6bbf82b0d8691f49bb09b3cbfe108e4..8ac25a9ae7769b9d3d43be245383544f37d0da3b 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 a119d283caf0eebef187ce710a853301ac0a956b..828b97dd7aa23a079a9939d593cc036edc8c7e1c 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 e51eb52a428c19184598c1e9dc81408199904479..c6e65d5d55e8f58c29e416a48de83368c04cf29d 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 4aacdbacf4a6485411da23496cd1c89fb2bf3b55..ff49176a503fe3e5b321d02e29d86dd013113641 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 d11b9484fa2be6453e91a51b412640374b8203b5..ee4be9e346c4d12b720cc93e6765feed4671c297 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 76b2012df0e5c035ab75727e757d9c01d2731411..c1f4d546b27ff95a64244ac2c59028cc6d387c29 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 8108c7ad82ecf77a3b2409daa5aba4b2be9faf16..79dd26a1fae627e20f142c2c4a82c389492fcbac 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 0ca31fc23a5df8862322f6e2b2adaf07c0be0647..3255d4f7196127bffb3d12a12fd5703ab362b4b3 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 4e2892dd469716271584a817046160ba30dc3662..a709b4f2c672c3567fbc921fc17d342a8705114b 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 a926797e47da5b175660fa11adb783836a742427..f70847123ffce95c7b099401beb1d06474327bf4 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 524b0ff21750c245f46affffac239fe645ff3c68..83270a47e02d9c29b9a731a307f96558c31af30f 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 3ae739431e84fc46fcb0c220d51bc367f2671628..7eeea7e01b529044e7e2715d10d919f69824a346 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 7751c6df4a50a42061742ce4cbe8195955a57d70..fc58c575f6916b82a6b4f3aa60e37917abc01b05 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 e7c3b0eef2e536aae97c0a7778ec014f9b59c673..110d1457dad8769b60112d5fef9553c1bb67381d 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 36607fc375a71b048390b5a91397b7a10b0eff8a..7d48ec5472102f314d09418eec346ed251ab13cf 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 e6abc90d4551e3bc058d4d3f575721c1fb74bfb0..0ede610111ebabab33a460baace395b75b1d6161 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 8dc6109efb6f6e385808e51bc763c085c2bc7db5..55f4054a482bf0cc1722838998106afb5123ff12 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 0fc1d921c370ec755834e580f633edf18f3928bb..b9bc2c3754ff4b01e1d54715d2d620bc6ea2e130 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 ccd18bf33330e0476fad0bcd8f2a5f809640a584..f1e4e33b1ff0c3dcf9b73ac11714a89356c5246b 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 cd153db203be2605b99ccd695d3febe339e0d437..708c7530760d0a70abe65caba4d30cc6b0705543 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 a3a93adeabe5f15a2ef53424359d927d9aae5588..412dbbaabaef7f316852178ac991a89766f8a9e5 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 2fe63df22c340f87a934d67d61bee8b65eee9459..bec8f554fadececf8c49b388d10524a2d4acee30 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 4165324a5af737e624300a82c072d290d32aba7b..153efd2e7780da9e5995bb7f70689803cc1ddf43 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 cb7a79cb1ad340f540e6102c133b5d232403ddfd..e2e51ea473af5d94c3774e3c4ca3e81c9708c987 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 f4d31815fbc851c1d16be6dd793358932975ee2c..09f7828428325f5627e19df64accbd185a855d19 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 30488a676bf2dc6c2fb2aa2839218755f816a64a..3afcd87895b7b6ce8d368f6190da43b0b1c784af 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 c7699170310bbc8838f849afc8079bc8b8107be0..7bcb2bd551b21a2c9fcfbf37c637fd65c79046ff 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 9d7f156493111a004cd2c86dbc969878356457f5..80dbb0d158e4c9dd5edf2d3761224e7f9b9a4211 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 db5c55dfbfd329fb520f1742cb686587c65eaddf..532c5659e4800f061e8f41eed354ccb217894e86 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 927d02e0ab3d7c4c74d5509cc7b1fdd074beaf2c..f11665f6343b1b7899c0fc87e8e5e41c7b5e5c24 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 282cfd4ae0f70f381981f8cc891adab507a81442..dec12271dc6c5db7cb58f314e2bee7d9baefba1b 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 06f5c9e03c0e8bd5c20c0d0c7e234e5157ed8b09..4f37d85c5ed2620e9207fc7fd6d2a7829012c405 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 ecbed96fcf3a5ae68ce92ee02032b49364e8aced..14d264bd03301fe3f4c3d11a04e097792efedd28 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 f8aa62a6995f1471cd400dd8f8f31f2efb9a3486..3f2717bf29f6992c077d1423e5611c86cab36e57 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 746c604185e1730abd48eef9c2679cac6fd590e3..b1e61253b3131ff7615528638c689fc12c2c615c 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 7f787174fdddd4d8e380a59019ce4bb00e6388f5..967838e878623946f7de40b545822e470c024585 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 ba2dc9e14c31659e485da037faf9259394256470..adb3f88cb66859db1e18a2260ee5a2ee34df991e 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 9dfd65aa8680dc51c78a8b08ab9ba72b3e66653e..8f4b7e6eaaf30c696dae83fdf08527c69ccbd566 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 1fe6db69d87d6e3f537474ae408d382c4fe89f1e..9e05b7adc8e908c7e8c48338b301d93ebc12eccf 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 c995777755c7e8e6dfb666758499c80a4dd61031..dafd132f6668a65a51566ba7024ac7963b86e017 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 7e5feb0c5e044be70bfc9cae0a75941421e464a7..98c483e29a9d9cc6ed0fec600fbde3b169edcb2a 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 a8715385f72e427e41d21c28799e58f8e3afbee7..c285a372fdfd3e9a8430507e602f6970e27d28fc 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',