IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/app/plugins/panel/news/NewsPanel.tsx
View File

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

11
public/sass/base/_type.scss
View File

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

1
public/sass/components/_drop.scss
View File

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