Fix dismiss button overlapping with text in dismissable banners (#26935)
This commit is contained in:
parent
e4f5114aaf
commit
2a4fcc51fd
3 changed files with 10 additions and 5 deletions
|
@ -33,8 +33,6 @@ export const DismissableBanner: React.FC<PropsWithChildren<Props>> = ({
|
|||
|
||||
return (
|
||||
<div className='dismissable-banner'>
|
||||
<div className='dismissable-banner__message'>{children}</div>
|
||||
|
||||
<div className='dismissable-banner__action'>
|
||||
<IconButton
|
||||
icon='times'
|
||||
|
@ -42,6 +40,8 @@ export const DismissableBanner: React.FC<PropsWithChildren<Props>> = ({
|
|||
onClick={handleDismiss}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='dismissable-banner__message'>{children}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -8941,9 +8941,7 @@ noscript {
|
|||
}
|
||||
|
||||
&__action {
|
||||
position: absolute;
|
||||
inset-inline-end: 0;
|
||||
top: 0;
|
||||
float: right;
|
||||
padding: 15px 10px;
|
||||
|
||||
.icon-button {
|
||||
|
|
|
@ -58,4 +58,11 @@ body.rtl {
|
|||
.fa-chevron-right::before {
|
||||
content: '\F053';
|
||||
}
|
||||
|
||||
.dismissable-banner,
|
||||
.warning-banner {
|
||||
&__action {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue