Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add small container detection on desktop

Browse Source 
[MAILPOET-2609]
This commit is contained in:
Rostislav Wolny
2020-02-19 14:53:01 +01:00
committed by Pavel Dohnal
parent e5f84f9333
commit 0c64c38e61
3 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
assets/css/src/components/_public.scss
View File

@@ -66,6 +66,23 @@ $form-columns-padding-vertical: 20px;
$form-columns-padding-horizontal: 20px;
$form-break-small-width: 500px;
@mixin maxWidthColumns() {
flex-wrap: wrap;
.mailpoet_form_column:last-child .mailpoet_paragraph:last-child {
margin-bottom: 0;
}
}
@mixin maxWidthColumn() {
// This must be important since the Column assigns its own width as an inline style.
flex-basis: 100% !important;
&:not(:first-child) {
margin-left: 0;
}
}
.mailpoet_form_columns {
display: flex;
flex-wrap: nowrap;
@@ -84,11 +101,11 @@ $form-break-small-width: 500px;
}
@media (max-width: #{ ($form-break-small-width - 1) }) {
flex-wrap: wrap;
@include maxWidthColumns;
}
.mailpoet_form_column:last-child .mailpoet_paragraph:last-child {
margin-bottom: 0;
}
.mailpoet_form_tight_container & {
@include maxWidthColumns;
}
}
@@ -118,17 +135,16 @@ $form-break-small-width: 500px;
}
@media (min-width: $form-break-small-width) {
.mailpoet_paragraph:last-child {
.mailpoet_form_form:not(.mailpoet_form_tight_container) & .mailpoet_paragraph:last-child {
margin-bottom: 0;
}
}
@media (max-width: #{ ($form-break-small-width - 1) }) {
// This must be important since the Column assigns its own width as an inline style.
flex-basis: 100% !important;
@include maxWidthColumn;
}
&:not(:first-child) {
margin-left: 0;
}
.mailpoet_form_tight_container & {
@include maxWidthColumn;
}
}