From 4c798b8747839c2388c7951f9032e96b8e6bc911 Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Wed, 3 Feb 2021 11:33:36 +0200
Subject: [PATCH] pointing to external link, arrow up right
---
src/components/link-box/link-box.scss | 23 +++++++++++++++--------
src/components/link-box/link-box.tsx | 15 +++++++++------
2 files changed, 24 insertions(+), 14 deletions(-)
diff --git a/src/components/link-box/link-box.scss b/src/components/link-box/link-box.scss
index e52f6e41..3dc3871f 100644
--- a/src/components/link-box/link-box.scss
+++ b/src/components/link-box/link-box.scss
@@ -1,6 +1,5 @@
:host {
background: var(--grayscale-background-box);
- border: 2px solid purple; //@todo remove before submitting
display: flex;
margin-bottom: 32px;
margin-right: 0;
@@ -233,7 +232,6 @@
padding: 0 12px;
}
- //@todo check title + description styles
&__title {
@include font-size(18px, 22px);
@include font-weight($bold);
@@ -308,13 +306,24 @@
}
}
-.hy-link-box-link {
+.hy-icon-wrapper {
+ background-color: var(--brand-main-light);
bottom: 12px;
+ overflow: hidden;
position: absolute;
right: -6px;
+ z-index: 10;
+
+ &__hover {
+ background-color: var(--brand-main);
+ }
+}
+
+.hy-link-box-link {
+ display: block;
svg {
- background-color: var(--brand-main-light);
+ background-color: transparent;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
fill: var(--grayscale-white);
height: 32px;
@@ -322,10 +331,8 @@
width: 32px;
}
- &__hover {
- svg {
- background-color: var(--brand-main);
- }
+ &__external {
+ transform: rotate(-45deg);
}
@include breakpoint($extrawide) {
diff --git a/src/components/link-box/link-box.tsx b/src/components/link-box/link-box.tsx
index 40510adb..88879769 100644
--- a/src/components/link-box/link-box.tsx
+++ b/src/components/link-box/link-box.tsx
@@ -71,13 +71,13 @@ export class LinkBox implements ComponentInterface {
manageHoverEffect(linkbox, hoverOn = true) {
let title = linkbox.shadowRoot.querySelector('h3.hy-link-box__text-container__title');
- let boxLink = linkbox.shadowRoot.querySelector('.hy-link-box-link');
+ let boxLink = linkbox.shadowRoot.querySelector('.hy-icon-wrapper');
if (hoverOn) {
(title as HTMLElement).classList.add('hy-link-box__text-container__title__hover');
- (boxLink as HTMLElement).classList.add('hy-link-box-link__hover');
+ (boxLink as HTMLElement).classList.add('hy-icon-wrapper__hover');
} else {
(title as HTMLElement).classList.remove('hy-link-box__text-container__title__hover');
- (boxLink as HTMLElement).classList.remove('hy-link-box-link__hover');
+ (boxLink as HTMLElement).classList.remove('hy-icon-wrapper__hover');
}
}
@@ -98,6 +98,7 @@ export class LinkBox implements ComponentInterface {
`hy-link-box-link__${this.variant}`,
`hy-link-box-link__${this.headerstyle}`,
this.headerstyle,
+ this.isExternal ? 'hy-link-box-link__external' : null,
].join(' ');
const classTextContainer = ['hy-link-box__text-container', this.imageUrl ? 'hy-link-box--with-image' : null].join(
@@ -140,9 +141,11 @@ export class LinkBox implements ComponentInterface {
{this.textDescription && <div class={classDescription}>{this.textDescription}</div>}
</div>
</div>
- <a class={classLinkAttributes} href={this.url} target={target} aria-label={this.scLabel} tabindex="-1">
- <hy-icon icon={'hy-icon-arrow-right'} size={32} />
- </a>
+ <span class={'hy-icon-wrapper'}>
+ <a class={classLinkAttributes} href={this.url} target={target} aria-label={this.scLabel} tabindex="-1">
+ <hy-icon icon={'hy-icon-arrow-to-right'} size={32} />
+ </a>
+ </span>
</article>,
];
}
--
GitLab