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 98333e15c785978109dd4baf16dd93587c727882..e51eb52a428c19184598c1e9dc81408199904479 100644 --- a/src/components/footer/hy-footer-base/hy-footer-base.scss +++ b/src/components/footer/hy-footer-base/hy-footer-base.scss @@ -9,7 +9,7 @@ display: flex; flex-direction: column-reverse; max-height: 100%; - padding: 32px 24px 32px 24px; + padding: 32px 16px 32px 16px; place-content: center space-between; position: relative; width: 100%; diff --git a/src/components/footer/hy-footer-base/hy-footer-base.tsx b/src/components/footer/hy-footer-base/hy-footer-base.tsx index 32e87f6914248c868daa73458c1c52994bed4617..137e85d078dd27ee59cc3ffc2edaac82387a0e88 100644 --- a/src/components/footer/hy-footer-base/hy-footer-base.tsx +++ b/src/components/footer/hy-footer-base/hy-footer-base.tsx @@ -91,7 +91,13 @@ export class HyFooterBase implements ComponentInterface { {some && some.map((s) => { return ( - <a href={s.url} class={`hy-footer-base__some__item`} title={s.label} aria-label={s.label}> + <a + aria-label={s.label} + href={s.url} + class={`hy-footer-base__some__item`} + title={s.label} + target="_blank" + > <hy-icon icon={`hy-icon-some-${s.type}`} size={36} /> </a> ); 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 efd37e28125ea612149a51dbdf6c666ed9bb3cb6..4aacdbacf4a6485411da23496cd1c89fb2bf3b55 100644 --- a/src/components/footer/hy-footer-info/hy-footer-info.scss +++ b/src/components/footer/hy-footer-info/hy-footer-info.scss @@ -6,7 +6,7 @@ display: flex; flex-direction: column; max-height: auto; - padding: 0 24px 40px 24px; + padding: 0 16px 40px 16px; place-content: center space-between; @include breakpoint($medium) { @@ -79,4 +79,8 @@ width: 65.56%; } } + + .hy-accordion__content--inner-wrapper { + width: 100%; + } } 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 cb33bb5e78d4d5bb0a8da791333bbba9ef36ec3c..76b2012df0e5c035ab75727e757d9c01d2731411 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 @@ -15,7 +15,7 @@ hy-footer-link-item { flex-direction: column; .hy-footer-link-item:last-child { - margin-bottom: 14px; + margin-bottom: 16px; } } @@ -44,6 +44,10 @@ hy-footer-link-item { padding: 15px 20px 15px 0; } + @include breakpoint($overwide) { + margin-left: 48px; + } + &__color-white { border-bottom: 1px solid var(--grayscale-white); color: var(--grayscale-white); @@ -74,6 +78,7 @@ hy-footer-link-item { color: var(--grayscale-nearly-black); font-family: var(--main-font-family); text-decoration: none; + margin-bottom: 12px; } } } diff --git a/src/components/hy-breadcrumbs/hy-breadcrumbs.scss b/src/components/hy-breadcrumbs/hy-breadcrumbs.scss index 6c539421b4c65645055fb6b41e374c600d7adada..7751c6df4a50a42061742ce4cbe8195955a57d70 100644 --- a/src/components/hy-breadcrumbs/hy-breadcrumbs.scss +++ b/src/components/hy-breadcrumbs/hy-breadcrumbs.scss @@ -153,6 +153,12 @@ } } + .breadcrumb-item-caret { + svg { + fill: var(--grayscale-dark); + } + } + .breadcrumb-item-dropdown-button { display: flex; flex-direction: row; @@ -163,7 +169,7 @@ line-height: 10px; border-radius: 3px; background-color: var(--grayscale-white); - box-shadow: 0 0 10px 0 rgba(14, 104, 139, 0.1); + box-shadow: 0 0 10px 0 rgba(14, 104, 139, 0.3); padding: 0 25px 9px 10px; position: relative; @@ -193,7 +199,7 @@ &__is-open { background: var(--grayscale-white); - box-shadow: 0 0 10px 0 rgba(14, 104, 139, 0.1); + box-shadow: 0 0 10px 0 rgba(14, 104, 139, 0.2); display: block; margin-top: -9px; padding: 32px 16px 6px 16px; @@ -242,6 +248,19 @@ visibility: hidden; } + .breadcrumb-item.main, + .breadcrumb-item.intermediate, + .breadcrumb-item.home { + a { + min-height: 44px; + } + } + .breadcrumb-item.breadcrumb-item__current { + a { + min-height: 0; + } + } + #more, .more { display: none; @@ -263,13 +282,11 @@ @include font-size(26px, 26px); color: var(--grayscale-black); font-weight: 700; + } - //@todo change home icon to be 20px x 20px and be as in the specs - - .breadcrumb-item-caret { - // @todo set styles for caret near the home icon - // should be bold - // padding: 0 6px 0 8px; (mobile) && padding: 0 8px 0 10px (tablet + desktop); + .breadcrumb-item-caret { + svg { + fill: var(--grayscale-black); } } diff --git a/src/components/hy-main/hy-main.scss b/src/components/hy-main/hy-main.scss index d4563441f5704031f5f79a624dc62ec53a8a86b4..75901487c5e3d72d5e416fb58cfcd16e1f102388 100644 --- a/src/components/hy-main/hy-main.scss +++ b/src/components/hy-main/hy-main.scss @@ -1,6 +1,6 @@ .hy-main { display: flex; - margin: var(--gutter-mobile) auto; + //margin: var(--gutter-mobile) auto; max-width: $fullhd; padding: 0; width: 100%;