Links: Add underline on hover for links in NewsPanel (#30166)

This commit is contained in:
Torkel Ödegaard 2021-01-11 13:22:21 +01:00 committed by GitHub
parent 28704d5274
commit d71073bd96
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 5 deletions

View File

@ -77,7 +77,12 @@ export class NewsPanel extends PureComponent<Props, State> {
{news.map((item, index) => {
return (
<div key={index} className={styles.item}>
<a href={textUtil.sanitizeUrl(item.link)} target="_blank" rel="noopener noreferrer">
<a
className={styles.link}
href={textUtil.sanitizeUrl(item.link)}
target="_blank"
rel="noopener noreferrer"
>
<div className={styles.title}>{item.title}</div>
<div className={styles.date}>{dateTimeFormat(item.date, { format: 'MMM DD' })} </div>
</a>
@ -101,8 +106,15 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
margin-right: ${theme.spacing.sm};
border-bottom: 2px solid ${theme.colors.border1};
`,
title: css`
link: css`
color: ${theme.colors.linkExternal};
&:hover {
color: ${theme.colors.linkExternal};
text-decoration: underline;
}
`,
title: css`
max-width: calc(100% - 70px);
font-size: 16px;
margin-bottom: ${theme.spacing.sm};

View File

@ -313,7 +313,12 @@ address {
a.external-link {
color: $external-link-color;
text-decoration: underline;
text-decoration: normal;
&:hover {
color: $external-link-color;
text-decoration: underline;
}
}
.link {
@ -359,10 +364,12 @@ a.external-link {
}
a {
text-decoration: underline;
color: $external-link-color;
text-decoration: none;
&:hover {
color: lighten($external-link-color, 10%);
color: $external-link-color;
text-decoration: underline;
}
}

View File

@ -39,6 +39,7 @@ $easing: cubic-bezier(0, 0, 0.265, 1);
.drop-help {
a {
color: $gray-6;
&:hover {
color: $white;
}