Files
piratepoet/assets/css/src/components/newsletterEditor/contentBlocks/_container.scss
2019-03-21 08:14:54 -04:00

91 lines
3.6 KiB
SCSS

$column-margin: 20px;
$one-column-width: $newsletter-width - (2 * $column-margin);
$two-column-width: $newsletter-width / 2 - (2 * $column-margin);
$three-column-width: $newsletter-width / 3 - (2 * $column-margin);
$two-column-wider-column-width: (($newsletter-width / 3) - $column-margin) * 2;
.mailpoet_container {
min-height: 15px;
position: relative;
width: 100%;
}
.mailpoet_container_block {
border: 0;
box-sizing: border-box;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
position: relative;
}
.mailpoet_container_vertical > * {
box-sizing: border-box;
width: 100%;
}
.mailpoet_container_horizontal > * {
vertical-align: top;
}
#mailpoet_editor_content {
.mailpoet_container {
box-sizing: border-box;
float: left;
}
& > .mailpoet_container_block {
border: 0;
width: $newsletter-width;
}
& > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block {
margin-bottom: 0;
}
.mailpoet_container_horizontal > .mailpoet_container_block {
margin-bottom: 0;
width: $column-margin + $one-column-width + $column-margin;
}
& > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal,
& > .mailpoet_container_block > .mailpoet_container > .mailpoet_posts_block > .mailpoet_posts_container > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal,
& > .mailpoet_container_block > .mailpoet_container .mailpoet_automated_latest_content_block_posts .mailpoet_container_horizontal,
& > .mailpoet_container_block > .mailpoet_container > .mailpoet_products_block > .mailpoet_products_container > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal,
& > .mailpoet_container_block > .mailpoet_container .mailpoet_automated_latest_content_block_products .mailpoet_container_horizontal {
& > .mailpoet_block:first-child:nth-last-child(2),
& > .mailpoet_block:first-child:nth-last-child(2) ~ .mailpoet_block {
width: $column-margin + $two-column-width + $column-margin;
}
& > .mailpoet_block:first-child:nth-last-child(3),
& > .mailpoet_block:first-child:nth-last-child(3) ~ .mailpoet_block {
width: $column-margin + $three-column-width + $column-margin;
}
}
& > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal.mailpoet_irregular_width_contents_container.column_layout_1_2 > .mailpoet_container_block:first-child,
& > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal.mailpoet_irregular_width_contents_container.column_layout_2_1 > .mailpoet_container_block:nth-child(2) {
width: $column-margin + $three-column-width + $column-margin;
}
& > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal.mailpoet_irregular_width_contents_container.column_layout_2_1 > .mailpoet_container_block:first-child,
& > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal.mailpoet_irregular_width_contents_container.column_layout_1_2 > .mailpoet_container_block:nth-child(2) {
width: $column-margin + $two-column-wider-column-width + $column-margin;
}
}
.mailpoet_container_empty {
background-color: #f2f2f2;
border-radius: 3px;
box-shadow: inset 1px 2px 1px $primary-inactive-color;
color: #656565;
margin: 20px;
padding: 15px;
text-align: center;
@include animation-background-color();
}