Simplify header DOM, style it according to specs
[MAILPOET-2777]
This commit is contained in:
@@ -58,17 +58,15 @@
|
|||||||
|
|
||||||
.mailpoet-modal-header {
|
.mailpoet-modal-header {
|
||||||
background: white;
|
background: white;
|
||||||
|
border-bottom: 1px solid $color-tertiary-light;
|
||||||
|
margin-bottom: $grid-gap;
|
||||||
padding: 0 $grid-gap;
|
padding: 0 $grid-gap;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: $modal-header-z-index;
|
z-index: $modal-header-z-index;
|
||||||
}
|
|
||||||
|
|
||||||
.mailpoet-modal-header-heading-container {
|
h3 {
|
||||||
align-items: center;
|
margin-right: $modal-close-button-size + $grid-gap;
|
||||||
display: flex;
|
}
|
||||||
flex-direction: row;
|
|
||||||
flex-grow: 1;
|
|
||||||
justify-content: left;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mailpoet-modal-close {
|
.mailpoet-modal-close {
|
||||||
|
@@ -5,11 +5,9 @@ import Heading from 'common/typography/heading/heading';
|
|||||||
|
|
||||||
const ModalHeader = ({ title }) => (
|
const ModalHeader = ({ title }) => (
|
||||||
<div className="mailpoet-modal-header">
|
<div className="mailpoet-modal-header">
|
||||||
<div className="mailpoet-modal-header-heading-container">
|
<Heading level={3}>
|
||||||
<Heading level={3}>
|
{ title }
|
||||||
{ title }
|
</Heading>
|
||||||
</Heading>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user