mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Links: Add underline on hover for links in NewsPanel (#30166)
This commit is contained in:
parent
28704d5274
commit
d71073bd96
@ -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};
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -39,6 +39,7 @@ $easing: cubic-bezier(0, 0, 0.265, 1);
|
||||
.drop-help {
|
||||
a {
|
||||
color: $gray-6;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user