Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix appearance of notification dismiss button

pull/10616/head
Alex P 2018-03-01 16:00:51 -08:00 committed by Andrew Watkins
parent 3744627c51
commit 715b90f0ec
2 changed files with 28 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/src/shared/components/Notifications.js
View File

@ -31,13 +31,13 @@ class Notifications extends Component {
if (!message || isDismissed) { if (!message || isDismissed) {
return null return null
} }
const cls = classnames('alert', { const alertClassname = classnames('alert', {
'alert-danger': type === 'error', 'alert-danger': type === 'error',
'alert-success': type === 'success', 'alert-success': type === 'success',
'alert-warning': type === 'warning', 'alert-warning': type === 'warning',
}) })
return ( return (
<div className={cls} role="alert"> <div className={alertClassname}>
{message} {message}
{this.renderDismiss(type)} {this.renderDismiss(type)}
</div> </div>
@ -48,12 +48,7 @@ class Notifications extends Component {
renderDismiss = type => { renderDismiss = type => {
return ( return (
<button <button className="alert-close" onClick={this.handleDismiss(type)}>
className="close"
data-dismiss="alert"
aria-label="Close"
onClick={this.handleDismiss(type)}
>
<span className="icon remove" /> <span className="icon remove" />
</button> </button>
) )

49
ui/src/style/theme/_alerts.scss
View File

@ -12,37 +12,38 @@
margin-bottom: $ix-marg-c; margin-bottom: $ix-marg-c;
font-weight: 500; font-weight: 500;
@extend %no-user-select; @extend %no-user-select;
}
button.close { .alert-icon {
outline: none; padding-left: ($ix-marg-e - $ix-marg-b);
> span.icon {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: $ix-marg-c;
transform: translateY(-50%); transform: translateY(-50%);
right: ($ix-marg-c - $ix-marg-a); width: ($ix-text-base-2 + 4px);
font-size: $ix-text-base; margin: 0;
width: 20px; font-size: $ix-text-base-2;
height: 20px;
opacity: 0.25;
transition:
opacity 0.25s ease;
&:hover {
opacity: 1;
}
} }
}
&-icon { .alert-close {
padding-left: ($ix-marg-e - $ix-marg-b); outline: none;
position: absolute;
top: 50%;
background-color: transparent;
transform: translateY(-50%);
right: ($ix-marg-c - $ix-marg-a);
font-size: $ix-text-base;
width: 20px;
height: 20px;
opacity: 0.25;
transition:
opacity 0.25s ease;
span.icon:not(.remove) { &:hover {
position: absolute; opacity: 1;
top: 50%;
left: $ix-marg-c;
transform: translateY(-50%);
width: ($ix-text-base-2 + 4px);
margin: 0;
font-size: $ix-text-base-2;
}
} }
} }