diff --git a/assets/css/src/components-plugin/_browser-preview.scss b/assets/css/src/components-plugin/_browser-preview.scss new file mode 100644 index 0000000000..a0b060c214 --- /dev/null +++ b/assets/css/src/components-plugin/_browser-preview.scss @@ -0,0 +1,47 @@ +.mailpoet_browser_preview_toggle { + flex: 0 1 auto; + height: 30px; + padding-bottom: 10px; + text-align: center; + width: 100%; +} + +.mailpoet_browser_preview_toggle > label { + display: inline-block; + margin: 0 5px; +} + +.mailpoet_browser_preview_container { + border: 1px solid #979797; + border-radius: 20px; + box-sizing: border-box; + display: flex; + flex: 1 1 auto; + flex-direction: column; + height: 100%; + margin: auto; + padding: 20px; + transition: width .5s; +} + +.mailpoet_browser_preview_container_desktop { + width: 100%; +} + +.mailpoet_browser_preview_container_mobile { + width: 350px; +} + +.mailpoet_browser_preview_border { + border: 1px solid #c3c3c3; + box-sizing: border-box; + height: 100%; + padding: 30px; + width: 100%; +} + +.mailpoet_browser_preview_iframe { + display: block; + margin: auto; + width: calc(100% - 1px); +} diff --git a/assets/css/src/components-plugin/_common.scss b/assets/css/src/components-plugin/_common.scss index 709f26fa27..4d2e1fcd07 100644 --- a/assets/css/src/components-plugin/_common.scss +++ b/assets/css/src/components-plugin/_common.scss @@ -30,63 +30,6 @@ a:focus { text-align: center; } -.select2-container { - width: 25em !important; -} - -$placeholder-color: #999; /* default Select2 placeholder color for single dropdown */ - -input.select2-search__field::-webkit-input-placeholder { - color: $placeholder-color; -} - -input.select2-search__field:-moz-placeholder { - color: $placeholder-color; -} - -input.select2-search__field::-moz-placeholder { - color: $placeholder-color; -} - -input.select2-search__field:-ms-input-placeholder { - color: $placeholder-color; -} - -.select2-container--default.select2-container--focus .select2-selection--multiple { - border: 1px solid #aaa; /* default Select2 border for single dropdown */ -} - -textarea.regular-text { - width: 25em !important; -} - -@include breakpoint-max-width(782px) { - .select2-container { - width: 100% !important; - } -} - -progress { - background-color: $progress-background; - border: 0; - height: 2em; - width: 100%; -} - -progress::-webkit-progress-bar { - background-color: $progress-background; -} - -progress::-webkit-progress-value { - background-color: $progress-foreground; - border-radius: $progress-border-radius; -} - -progress::-moz-progress-bar { - background-color: $progress-foreground; - border-radius: $progress-border-radius; -} - /* double class is intentional here, we need to be very specific here to something wrapping our warning message could override its style */ p.sender_email_address_warning.sender_email_address_warning, @@ -105,51 +48,3 @@ p.sender_email_address_warning:first-child { height: 46px; padding: 10px 18px; } - -.mailpoet_browser_preview_toggle { - flex: 0 1 auto; - height: 30px; - padding-bottom: 10px; - text-align: center; - width: 100%; -} - -.mailpoet_browser_preview_toggle > label { - display: inline-block; - margin: 0 5px; -} - -.mailpoet_browser_preview_container { - border: 1px solid #979797; - border-radius: 20px; - box-sizing: border-box; - display: flex; - flex: 1 1 auto; - flex-direction: column; - height: 100%; - margin: auto; - padding: 20px; - transition: width .5s; -} - -.mailpoet_browser_preview_container_desktop { - width: 100%; -} - -.mailpoet_browser_preview_container_mobile { - width: 350px; -} - -.mailpoet_browser_preview_border { - border: 1px solid #c3c3c3; - box-sizing: border-box; - height: 100%; - padding: 30px; - width: 100%; -} - -.mailpoet_browser_preview_iframe { - display: block; - margin: auto; - width: calc(100% - 1px); -} diff --git a/assets/css/src/components-plugin/_form.scss b/assets/css/src/components-plugin/_form.scss deleted file mode 100644 index 349b40f928..0000000000 --- a/assets/css/src/components-plugin/_form.scss +++ /dev/null @@ -1,7 +0,0 @@ -.mailpoet_form { - margin: 0 0 20px; -} - -.mailpoet_form td { - vertical-align: top !important; -} diff --git a/assets/css/src/components-plugin/_forms.scss b/assets/css/src/components-plugin/_forms.scss new file mode 100644 index 0000000000..3e5a79c52c --- /dev/null +++ b/assets/css/src/components-plugin/_forms.scss @@ -0,0 +1,62 @@ +.mailpoet_form { + margin: 0 0 20px; +} + +.mailpoet_form td { + vertical-align: top !important; +} + +.select2-container { + width: 25em !important; +} + +input.select2-search__field::-webkit-input-placeholder { + color: $color-placeholder-select2; +} + +input.select2-search__field:-moz-placeholder { + color: $color-placeholder-select2; +} + +input.select2-search__field::-moz-placeholder { + color: $color-placeholder-select2; +} + +input.select2-search__field:-ms-input-placeholder { + color: $color-placeholder-select2; +} + +.select2-container--default.select2-container--focus .select2-selection--multiple { + border: 1px solid #aaa; /* default Select2 border for single dropdown */ +} + +textarea.regular-text { + width: 25em !important; +} + +@include breakpoint-max-width(782px) { + .select2-container { + width: 100% !important; + } +} + +progress { + background-color: $progress-background; + border: 0; + height: 2em; + width: 100%; +} + +progress::-webkit-progress-bar { + background-color: $progress-background; +} + +progress::-webkit-progress-value { + background-color: $progress-foreground; + border-radius: $progress-border-radius; +} + +progress::-moz-progress-bar { + background-color: $progress-foreground; + border-radius: $progress-border-radius; +} diff --git a/assets/css/src/components-plugin/_pages-custom.scss b/assets/css/src/components-plugin/_pages-custom.scss index 3900ef9916..c6f484a728 100644 --- a/assets/css/src/components-plugin/_pages-custom.scss +++ b/assets/css/src/components-plugin/_pages-custom.scss @@ -1,7 +1,6 @@ /* Custom styles for MailPoet pages. */ - .mailpoet-about-wrap { .videoWrapper { /* padding-top: 25px */ diff --git a/assets/css/src/components-plugin/_pages.scss b/assets/css/src/components-plugin/_pages.scss index ee1c922f65..dacc13f452 100644 --- a/assets/css/src/components-plugin/_pages.scss +++ b/assets/css/src/components-plugin/_pages.scss @@ -4,7 +4,6 @@ This is to make MailPoet pages independent of the WordPress About page styles that may differ across WP versions. Please add custom styles to pages_custom.styl */ - .mailpoet-about-wrap { font-size: 15px; margin: 25px 40px 0 20px; diff --git a/assets/css/src/components-plugin/_premium-page.scss b/assets/css/src/components-plugin/_premium-page.scss index eb0a32385a..a2a8accde0 100644 --- a/assets/css/src/components-plugin/_premium-page.scss +++ b/assets/css/src/components-plugin/_premium-page.scss @@ -1,4 +1,3 @@ - .mailpoet-about-wrap.mailpoet-premium-page { display: flex; flex-direction: column; diff --git a/assets/css/src/mailpoet-plugin.scss b/assets/css/src/mailpoet-plugin.scss index b3aaaf6b56..2a7e66ebb5 100644 --- a/assets/css/src/mailpoet-plugin.scss +++ b/assets/css/src/mailpoet-plugin.scss @@ -22,6 +22,7 @@ // Actual UI components. @import 'components/parsley'; @import 'components-plugin/automatic-emails'; +@import 'components-plugin/browser-preview'; @import 'components-plugin/dynamic-segments'; @import 'components-plugin/common'; @import 'components-plugin/legacy-modal'; @@ -30,7 +31,7 @@ @import 'components-plugin/listing'; @import 'components-plugin/box'; @import 'components-plugin/breadcrumb'; -@import 'components-plugin/form'; +@import 'components-plugin/forms'; @import 'components-plugin/settings'; @import 'components-plugin/progress-bar'; @import 'components-plugin/subscribers'; diff --git a/assets/css/src/settings/_colors.scss b/assets/css/src/settings/_colors.scss index 933b0a1c6a..094fa53034 100644 --- a/assets/css/src/settings/_colors.scss +++ b/assets/css/src/settings/_colors.scss @@ -1,4 +1,5 @@ // General colors +$color-placeholder-select2: #999; /* default Select2 placeholder color for single dropdown */ $color-transparent: rgba(#fff, 0); $color-white: rgb(255, 255, 255);