Add mailpoet-automation-section-content to define a max-width for section content
[MAILPOET-4536]
This commit is contained in:
@ -11,6 +11,19 @@
|
||||
}
|
||||
|
||||
.mailpoet-automation-section {
|
||||
@include full-width;
|
||||
}
|
||||
|
||||
.mailpoet-automation-white-background {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.mailpoet-automation-section-content {
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-width: 1072px;
|
||||
padding: 65px 0;
|
||||
|
||||
h2 {
|
||||
font-size: 23px;
|
||||
font-weight: 400;
|
||||
@ -29,14 +42,10 @@
|
||||
}
|
||||
|
||||
.mailpoet-automation-section-hero {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: -20px;
|
||||
padding: 65px;
|
||||
|
||||
@include full-width;
|
||||
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
@ -71,7 +80,7 @@
|
||||
}
|
||||
|
||||
.mailpoet-section-templates {
|
||||
padding: 48px 64px 48px 84px;
|
||||
padding: 48px 0;
|
||||
|
||||
.components-button {
|
||||
display: block;
|
||||
@ -129,13 +138,9 @@
|
||||
}
|
||||
|
||||
.mailpoet-section-build-your-own {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 64px;
|
||||
|
||||
@include full-width;
|
||||
|
||||
ol {
|
||||
list-style: decimal-leading-zero inside;
|
||||
|
@ -46,7 +46,8 @@ export function BuildYourOwnSection(): JSX.Element {
|
||||
const selectedItem = list.filter((item) => item.slug === itemOpen)[0];
|
||||
|
||||
return (
|
||||
<section className="mailpoet-automation-section mailpoet-section-build-your-own">
|
||||
<section className="mailpoet-automation-section mailpoet-automation-white-background">
|
||||
<div className="mailpoet-automation-section-content mailpoet-section-build-your-own">
|
||||
<div>
|
||||
<h2>{__('Build your own automation workflows', 'mailpoet')}</h2>
|
||||
<p>
|
||||
@ -79,6 +80,7 @@ export function BuildYourOwnSection(): JSX.Element {
|
||||
</ol>
|
||||
</div>
|
||||
<img src={selectedItem.image} alt={selectedItem.title} />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
@ -9,7 +9,8 @@ export function HeroSection(): JSX.Element {
|
||||
[],
|
||||
);
|
||||
return (
|
||||
<section className="mailpoet-automation-section mailpoet-automation-section-hero">
|
||||
<section className="mailpoet-automation-section mailpoet-automation-white-background">
|
||||
<div className="mailpoet-automation-section-content mailpoet-automation-section-hero">
|
||||
<div>
|
||||
<span className="mailpoet-automation-preheading">
|
||||
{__('Automations', 'mailpoet')}
|
||||
@ -36,6 +37,7 @@ export function HeroSection(): JSX.Element {
|
||||
src={`${MailPoet.cdnUrl}automation/sections/hero.png`}
|
||||
alt={__('Welcome', 'mailpoet')}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
@ -8,7 +8,8 @@ export function TemplatesSection(): JSX.Element {
|
||||
const templates = workflowTemplates.slice(0, 3);
|
||||
|
||||
return (
|
||||
<section className="mailpoet-automation-section mailpoet-section-templates">
|
||||
<section className="mailpoet-automation-section">
|
||||
<div className="mailpoet-automation-section-content mailpoet-section-templates">
|
||||
<h2>{__('Explore essentials', 'mailpoet')}</h2>
|
||||
<p>
|
||||
{__(
|
||||
@ -28,6 +29,7 @@ export function TemplatesSection(): JSX.Element {
|
||||
<Button variant="link" href={MailPoet.urls.automationTemplates}>
|
||||
{__('Browse all templates →', 'mailpoet')}
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
Reference in New Issue
Block a user