diff --git a/assets/css/src/admin.scss b/assets/css/src/admin.scss new file mode 100644 index 0000000000..7d595d0017 --- /dev/null +++ b/assets/css/src/admin.scss @@ -0,0 +1,40 @@ +@import 'components/mixins'; + +@import '../../../node_modules/select2/dist/css/select2'; +@import 'components/datepicker/datepicker'; + +@import 'components/common'; +@import 'components/modal'; +@import 'components/notice'; + +@import 'components/formEditor'; +@import 'components/listing'; +@import 'components/listing/newsletters'; + +@import 'components/box'; +@import 'components/breadcrumb'; + +@import 'components/form'; +@import 'components/parsley'; +@import 'components/formValidation'; + +@import 'components/settings'; +@import 'components/progressBar'; + +@import 'components/subscribers'; + +@import 'components/pages'; +@import 'components/pagesCustom'; + +@import 'components/mp2migrator'; + +@import '../../../node_modules/intro.js/introjs'; + +@import 'components/newsletterTemplates'; +@import 'components/welcomeWizard'; +@import 'components/intro'; +@import 'components/featureAnnouncement'; +@import 'components/inAppAnnouncements'; +@import 'components/newsletterCongratulate.scss'; +@import 'components/discounts'; +@import 'components/reviewRequest'; diff --git a/assets/css/src/admin.styl b/assets/css/src/admin.styl deleted file mode 100644 index 1808134428..0000000000 --- a/assets/css/src/admin.styl +++ /dev/null @@ -1,41 +0,0 @@ -@import 'nib' - -@require 'select2/dist/css/select2.css' -@require 'datepicker/datepicker' -@require 'badge' - -@require 'common' -@require 'modal' -@require 'notice' - -@require 'form_editor' -@require 'listing' -@require 'listing/newsletters' - -@require 'box' -@require 'breadcrumb' - -@require 'form' -@require 'parsley' -@require 'form_validation' - -@require 'settings' -@require 'progress_bar' - -@require 'subscribers' - -@require 'pages' -@require 'pages_custom' - -@require 'mp2migrator' - -@require '../../../node_modules/intro.js/introjs.css' - -@require 'newsletter_templates' -@require 'welcome_wizard' -@require 'intro' -@require 'feature_announcement' -@require 'in_app_announcements' -@require 'newsletter_congratulate.styl' -@require 'discounts' -@require 'review_request' diff --git a/assets/css/src/adminGlobal.scss b/assets/css/src/adminGlobal.scss new file mode 100644 index 0000000000..ce3ca355aa --- /dev/null +++ b/assets/css/src/adminGlobal.scss @@ -0,0 +1,2 @@ +@import 'components/globals'; +@import 'components/plugins/members'; diff --git a/assets/css/src/badge.styl b/assets/css/src/badge.styl deleted file mode 100644 index 98c1fe1c77..0000000000 --- a/assets/css/src/badge.styl +++ /dev/null @@ -1,9 +0,0 @@ -badge() - text-transform uppercase - cursor pointer - color white - font-size 0.5625rem - font-weight 500 - border-radius 3px - letter-spacing 1px - vertical-align middle diff --git a/assets/css/src/breadcrumb.styl b/assets/css/src/breadcrumb.styl deleted file mode 100644 index 61b698a0b3..0000000000 --- a/assets/css/src/breadcrumb.styl +++ /dev/null @@ -1,14 +0,0 @@ -.mailpoet_breadcrumb - font-size: 0.9em - text-transform: uppercase - color: #444 - -.mailpoet_breadcrumb .mailpoet_current - font-weight: bold - -.mailpoet_breadcrumb a - text-decoration: none - color: #444 - -.mailpoet_breadcrumb a:hover - color: darken(#444, 50%) \ No newline at end of file diff --git a/assets/css/src/common.styl b/assets/css/src/common.styl deleted file mode 100644 index f590e94ff0..0000000000 --- a/assets/css/src/common.styl +++ /dev/null @@ -1,84 +0,0 @@ -// clearfix -.clearfix - clearfix() - -// disable outline on link focus -a:focus - outline: 0 none !important - -// success and error messages -.mailpoet_success - color: #090 - -.mailpoet_error - color: #900 - -// hide elements -.mailpoet_hidden - display: none - -// add margins to a div -.mailpoet_spaced_block - margin: 1em 0 - -.mailpoet_centered - text-align: center - -// select 2 -.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 */ - -// textareas -textarea.regular-text - width: 25em !important - -@media screen and (max-width: 782px) - .select2-container - width: 100% !important - -// progress bars -progress-border-radius = 5px -progress-background = #efefef -progress-foreground = #69b1e9 - -progress - background-color: progress-background; - height: 2em - border: 0 - 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, - p.sender_email_address_warning.sender_email_address_warning a - color: #990000 - text-align: left - align-self: flex-start; - -p.sender_email_address_warning:first-child - margin-top: 1em diff --git a/assets/css/src/box.styl b/assets/css/src/components/_box.scss similarity index 84% rename from assets/css/src/box.styl rename to assets/css/src/components/_box.scss index 77f82475b9..68bf6d08bf 100644 --- a/assets/css/src/box.styl +++ b/assets/css/src/components/_box.scss @@ -1,132 +1,155 @@ -$box-width = 425px -$box-height = 150px -$thumbnail-height = $box-height * 2 -$box-margin-big = 40px -$box-margin-small = 20px -$box-description-space-between-heading-and-paragraph = 5px -$box-description-height = 110px -$box-description-text-height = $box-description-height - $box-description-space-between-heading-and-paragraph -$box-heading-line-height = $box-description-text-height / 4 -$box-heading-font-size = $box-heading-line-height * 5/7 -$box-description-line-height = $box-heading-line-height / 2 -$box-description-font-size = $box-description-line-height +$box-width: 425px; +$box-height: 150px; +$thumbnail-height: $box-height * 2; +$box-margin-big: 40px; +$box-margin-small: 20px; +$box-description-space-between-heading-and-paragraph: 5px; +$box-description-height: 110px; +$box-description-text-height: $box-description-height - $box-description-space-between-heading-and-paragraph; +$box-heading-line-height: $box-description-text-height / 4; +$box-heading-font-size: $box-heading-line-height * 5 / 7; +$box-description-line-height: $box-heading-line-height / 2; +$box-description-font-size: $box-description-line-height; -.mailpoet_boxes.mailpoet_boxes_loading - opacity: 0.2 +.mailpoet_boxes.mailpoet_boxes_loading { + opacity: 0.2; +} -.mailpoet_boxes li - float: left - position: relative - padding: 15px - margin: 15px 25px 0 0 - width: $box-width - height: $box-height - border: 1px solid #dedede - background-color: #fff +.mailpoet_boxes li { + float: left; + position: relative; + padding: 15px; + margin: 15px 25px 0 0; + width: $box-width; + height: $box-height; + border: 1px solid #dedede; + background-color: #fff; +} -.mailpoet_boxes .mailpoet_template_boxes - box-sizing: border-box - height: auto - margin: 0 0 $box-margin-big - padding: 0 - width: 30.5% +.mailpoet_boxes .mailpoet_template_boxes { + box-sizing: border-box; + height: auto; + margin: 0 0 $box-margin-big; + padding: 0; + width: 30.5%; - @media screen and (max-width 1178px) - width: 47% + @media screen and (max-width: 1178px) { + width: 47%; + } - @media screen and (max-width 520px) - width: 90% + @media screen and (max-width: 520px) { + width: 90%; + } +} -@media screen and (min-width 1179px) - .mailpoet_boxes .mailpoet_template_boxes:nth-child(3n-1) - margin: 0 $box-margin-big $box-margin-big $box-margin-big +@media screen and (min-width: 1179px) { + .mailpoet_boxes .mailpoet_template_boxes:nth-child(3n-1) { + margin: 0 $box-margin-big $box-margin-big $box-margin-big; + } +} -@media screen and (max-width 1178px) - .mailpoet_boxes .mailpoet_template_boxes:nth-child(2n-1) - margin: 0 $box-margin-big $box-margin-big 0 +@media screen and (max-width: 1178px) { + .mailpoet_boxes .mailpoet_template_boxes:nth-child(2n-1) { + margin: 0 $box-margin-big $box-margin-big 0; + } +} -@media screen and (max-width 782px) - .mailpoet_boxes .mailpoet_template_boxes:nth-child(2n-1) - margin: 0 $box-margin-small $box-margin-small 0 +@media screen and (max-width: 782px) { + .mailpoet_boxes .mailpoet_template_boxes:nth-child(2n-1) { + margin: 0 $box-margin-small $box-margin-small 0; + } +} -@media screen and (max-width 520px) - .mailpoet_boxes .mailpoet_template_boxes:nth-child(1n) - margin: 0 0 $box-margin-small $box-margin-small +@media screen and (max-width: 520px) { + .mailpoet_boxes .mailpoet_template_boxes:nth-child(1n) { + margin: 0 0 $box-margin-small $box-margin-small; + } +} -.mailpoet_boxes .mailpoet_template_boxes .mailpoet_description - background: #fafafa - border-top: 1px solid #e1e1e1 - padding: 12px 5% - width: 90% +.mailpoet_boxes .mailpoet_template_boxes .mailpoet_description { + background: #fafafa; + border-top: 1px solid #e1e1e1; + padding: 12px 5%; + width: 90%; +} -.mailpoet_boxes .mailpoet_template_boxes .mailpoet_description h3 - font-size: 15px - font-weight: 600 - line-height: 20px - margin: 0 - white-space: nowrap - max-width: 100% +.mailpoet_boxes .mailpoet_template_boxes .mailpoet_description h3 { + font-size: 15px; + font-weight: 600; + line-height: 20px; + margin: 0; + white-space: nowrap; + max-width: 100%; +} -.mailpoet_boxes .mailpoet_template_boxes .mailpoet_actions - background: #f5f5f5 - border-top: 1px solid#d6d6d6 - border-left: 1px solid #e8e8e8 - padding: 8px 16px - bottom: 0px - right: 0px +.mailpoet_boxes .mailpoet_template_boxes .mailpoet_actions { + background: #f5f5f5; + border-top: 1px solid #d6d6d6; + border-left: 1px solid #e8e8e8; + padding: 8px 16px; + bottom: 0px; + right: 0px; - @media screen and (max-width 782px) - padding: 6px 16px 2px + @media screen and (max-width: 782px) { + padding: 6px 16px 2px; + } +} -.mailpoet_boxes .mailpoet_thumbnail - background-size: 50% 50% - background-repeat: no-repeat - background-position: center - border: 0 - width: 100% - height: $thumbnail-height - float: left - overflow: hidden - position: relative +.mailpoet_boxes .mailpoet_thumbnail { + background-size: 50% 50%; + background-repeat: no-repeat; + background-position: center; + border: 0; + width: 100%; + height: $thumbnail-height; + float: left; + overflow: hidden; + position: relative; - img - min-width: $thumbnail-height - height: auto - width: 100% + img { + min-width: $thumbnail-height; + height: auto; + width: 100%; + } +} .woocommerce .mailpoet_thumbnail, -.mailpoet_boxes .mailpoet_newsletter_types .mailpoet_thumbnail - border: 1px solid #ccc - width: $box-height - height: $box-height - margin-right: 15px - float: left - overflow: hidden - position: relative +.mailpoet_boxes .mailpoet_newsletter_types .mailpoet_thumbnail { + border: 1px solid #ccc; + width: $box-height; + height: $box-height; + margin-right: 15px; + float: left; + overflow: hidden; + position: relative; - img - min-width: $box-height - width: 110% - position: relative - top: 50% - left: 50% - transform: translate(-50%, -50%) + img { + min-width: $box-height; + width: 110%; + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } +} -.mailpoet_overlay - position: absolute - top: 0 - left: 0 - right: 0 - bottom: 0 - background-color: rgba(255, 255, 255, 0.0) - opacity: 0 - transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */ +.mailpoet_overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(255, 255, 255, 0); + opacity: 0; + transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1); /* ease-in-out */ - &:hover - background-color: rgba(255, 255, 255, 0.7) - opacity: 1 + &:hover { + background-color: rgba(255, 255, 255, 0.7); + opacity: 1; + } +} -.mailpoet_overlay .mailpoet_more_details +.mailpoet_overlay .mailpoet_more_details { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* opacity: 0; */ position: absolute; @@ -134,78 +157,93 @@ $box-description-font-size = $box-description-line-height right: 20%; left: 20%; background: #23282d; - background: rgba(0,0,0,.7); + background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 15px; - text-shadow: 0 1px 0 rgba(0,0,0,.6); + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); -webkit-font-smoothing: antialiased; font-weight: 600; padding: 15px 12px; text-align: center; border-radius: 3px; - transition: opacity .1s ease-in-out; + transition: opacity 0.1s ease-in-out; +} -.mailpoet_boxes.woocommerce .mailpoet_description - h3 - font-size: 17px - line-height: 1.2 +.mailpoet_boxes.woocommerce .mailpoet_description { + h3 { + font-size: 17px; + line-height: 1.2; + } +} -.mailpoet_boxes .mailpoet_description - float:left - width: 258px - max-height: $box-description-height - padding-bottom: 0 - word-wrap: break-word - overflow-wrap: break-word +.mailpoet_boxes .mailpoet_description { + float: left; + width: 258px; + max-height: $box-description-height; + padding-bottom: 0; + word-wrap: break-word; + overflow-wrap: break-word; - h3 - margin: 0 0 $box-description-space-between-heading-and-paragraph 0 - overflow: hidden - max-width: 223px - line-height: $box-heading-line-height - font-size: $box-heading-font-size + h3 { + margin: 0 0 $box-description-space-between-heading-and-paragraph 0; + overflow: hidden; + max-width: 223px; + line-height: $box-heading-line-height; + font-size: $box-heading-font-size; + } - p - font-size: $box-description-font-size - line-height: $box-description-line-height - margin: 0 + p { + font-size: $box-description-font-size; + line-height: $box-description-line-height; + margin: 0; + } +} -.mailpoet_boxes .mailpoet_actions - position: absolute - bottom: 15px - right: 15px +.mailpoet_boxes .mailpoet_actions { + position: absolute; + bottom: 15px; + right: 15px; +} -.mailpoet_boxes .mailpoet_delete - margin-right: 6px +.mailpoet_boxes .mailpoet_delete { + margin-right: 6px; +} -.mailpoet_boxes .mailpoet_delete a - color:inherit - text-decoration: none +.mailpoet_boxes .mailpoet_delete a { + color: inherit; + text-decoration: none; +} -.mailpoet_boxes .mailpoet_delete a:hover - color:inherit +.mailpoet_boxes .mailpoet_delete a:hover { + color: inherit; +} +[data-type="notification"] .mailpoet_thumbnail { + background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='170.08px' height='170.08px' enable-background='new 0 0 170.079 170.079' version='1.1' viewBox='0 0 170.079 170.079' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='-165.74 77.092 -103.12 26.46 -40.486 77.092' fill='%238CD2CA'/%3E%3Cpath d='m-165.74 82.159c-1.477 0-2.942-0.644-3.944-1.88-1.759-2.178-1.42-5.366 0.755-7.128l62.63-50.63c1.858-1.503 4.512-1.503 6.37 0l62.627 50.63c2.178 1.762 2.514 4.95 0.755 7.128-1.759 2.174-4.948 2.513-7.125 0.754l-59.443-48.057-59.444 48.057c-0.938 0.757-2.063 1.126-3.181 1.126z' fill='%233A232C'/%3E%3Crect x='-165.74' y='77.706' width='125.26' height='79.142' display='none' fill='%238CD2CA'/%3E%3Cpath d='m-40.486 161.91h-125.26c-2.798 0-5.067-2.269-5.067-5.066v-79.142c0-2.798 2.269-5.066 5.067-5.066h125.26c2.798 0 5.066 2.269 5.066 5.066v79.142c0 2.797-2.268 5.066-5.066 5.066zm-120.19-10.133h115.12v-69.009h-115.12v69.009z' fill='%233A232C'/%3E%3Cline x1='-103.12' x2='-40.486' y1='117.28' y2='155.97' fill='%238CD2CA'/%3E%3Cpath d='m-40.491 161.04c-0.908 0-1.828-0.243-2.657-0.757l-62.629-38.698c-2.38-1.469-3.117-4.591-1.648-6.971 1.472-2.383 4.594-3.117 6.974-1.648l62.629 38.698c2.38 1.472 3.117 4.591 1.646 6.974-0.958 1.548-2.616 2.402-4.315 2.402z' fill='%233A232C'/%3E%3Cline x1='-103.12' x2='-165.74' y1='117.28' y2='155.97' fill='%238CD2CA'/%3E%3Cpath d='m-165.74 161.04c-1.697 0-3.357-0.854-4.315-2.402-1.472-2.383-0.732-5.502 1.648-6.974l62.628-38.698c2.382-1.472 5.504-0.731 6.974 1.648 1.472 2.38 0.732 5.502-1.648 6.971l-62.628 38.698c-0.831 0.513-1.751 0.757-2.659 0.757z' fill='%233A232C'/%3E%3Cpath d='m-103.12 122.34c-0.925 0-1.86-0.253-2.702-0.784l-62.627-39.571c-2.365-1.494-3.07-4.624-1.576-6.988 1.494-2.365 4.624-3.073 6.989-1.576l62.63 39.57c2.365 1.494 3.07 4.624 1.576 6.989-0.965 1.526-2.607 2.36-4.29 2.36z' fill='%233A232C'/%3E%3Cpath d='m-103.11 122.34c-1.683 0-3.325-0.834-4.29-2.36-1.494-2.365-0.789-5.495 1.576-6.989l62.63-39.57c2.364-1.494 5.494-0.789 6.991 1.576 1.494 2.364 0.786 5.494-1.579 6.988l-62.627 39.571c-0.841 0.531-1.777 0.784-2.701 0.784z' fill='%233A232C'/%3E%3Cpolygon points='-143.83 91.552 -143.83 14.976 -62.405 14.976 -62.405 91.555 -103.12 117.28' fill='%23fff'/%3E%3Cpath d='m-103.12 122.34c-0.938 0-1.88-0.26-2.707-0.784l-40.711-25.725c-1.47-0.928-2.36-2.543-2.36-4.282v-76.576c0-2.798 2.269-5.066 5.067-5.066h81.422c2.798 0 5.066 2.269 5.066 5.066v76.579c0 1.736-0.891 3.354-2.36 4.282l-40.708 25.722c-0.826 0.524-1.766 0.784-2.709 0.784zm-35.645-33.582l35.645 22.523 35.645-22.523v-68.718h-71.289v68.718z' fill='%233A232C'/%3E%3Cpolyline points='-359.84 77.937 -296.12 26.417 -232.39 77.937' fill='%238CD2CA'/%3E%3Cpath d='m-359.84 83.092c-1.503 0-2.993-0.654-4.011-1.913-1.79-2.215-1.446-5.46 0.768-7.252l63.729-51.519c1.891-1.529 4.592-1.529 6.482 0l63.728 51.519c2.213 1.792 2.558 5.037 0.768 7.252-1.791 2.213-5.035 2.558-7.25 0.768l-60.487-48.9-60.486 48.9c-0.957 0.77-2.102 1.145-3.241 1.145z' fill='%233A232C'/%3E%3Crect x='-359.84' y='78.561' width='127.46' height='80.532' display='none' fill='%238CD2CA'/%3E%3Cpath d='m-232.39 164.25h-127.46c-2.847 0-5.156-2.308-5.156-5.155v-80.533c0-2.847 2.309-5.155 5.156-5.155h127.46c2.848 0 5.156 2.309 5.156 5.155v80.532c1e-3 2.848-2.308 5.156-5.156 5.156zm-122.3-10.311h117.14v-70.221h-117.14v70.221z' fill='%233A232C'/%3E%3Cline x1='-296.12' x2='-232.39' y1='118.83' y2='158.2' fill='%238CD2CA'/%3E%3Cpath d='m-232.39 163.36c-0.926 0-1.86-0.25-2.706-0.771l-63.727-39.377c-2.422-1.497-3.173-4.674-1.677-7.096 1.498-2.425 4.675-3.172 7.097-1.677l63.728 39.379c2.422 1.495 3.174 4.672 1.677 7.094-0.975 1.579-2.665 2.448-4.392 2.448z' fill='%233A232C'/%3E%3Cline x1='-296.12' x2='-359.84' y1='118.83' y2='158.2' fill='%238CD2CA'/%3E%3Cpath d='m-359.84 163.36c-1.728 0-3.416-0.869-4.39-2.447-1.498-2.422-0.747-5.599 1.675-7.094l63.728-39.379c2.424-1.498 5.6-0.745 7.096 1.677 1.498 2.422 0.745 5.599-1.676 7.096l-63.728 39.377c-0.845 0.52-1.782 0.77-2.705 0.77z' fill='%233A232C'/%3E%3Cpath d='m-296.12 123.98c-0.941 0-1.893-0.257-2.749-0.798l-63.727-40.268c-2.406-1.521-3.125-4.704-1.604-7.111 1.521-2.406 4.705-3.126 7.113-1.604l63.728 40.265c2.407 1.521 3.125 4.705 1.605 7.112-0.983 1.553-2.654 2.404-4.366 2.404z' fill='%233A232C'/%3E%3Cpath d='m-296.11 123.98c-1.71 0-3.382-0.848-4.364-2.403-1.521-2.407-0.803-5.592 1.604-7.112l63.729-40.265c2.407-1.521 5.589-0.803 7.112 1.604 1.521 2.407 0.803 5.591-1.604 7.111l-63.729 40.268c-0.853 0.54-1.806 0.797-2.748 0.797z' fill='%233A232C'/%3E%3Cpolygon points='-337.54 92.651 -337.54 14.732 -254.69 14.732 -254.69 92.654 -296.12 118.83' fill='%23fff'/%3E%3Cpath d='m-296.12 123.98c-0.955 0-1.913-0.267-2.754-0.798l-41.425-26.178c-1.495-0.944-2.401-2.588-2.401-4.357v-77.919c0-2.847 2.308-5.156 5.155-5.156h82.849c2.847 0 5.156 2.309 5.156 5.156v77.922c0 1.767-0.906 3.413-2.401 4.357l-41.422 26.175c-0.843 0.531-1.799 0.798-2.757 0.798zm-36.27-34.173l36.27 22.918 36.268-22.918v-69.924h-72.538v69.924z' fill='%233A232C'/%3E%3Cline x1='-320.67' x2='-271.56' y1='35.248' y2='35.248' fill='%23fff'/%3E%3Cpath d='m-271.56 40.403h-49.115c-2.847 0-5.156-2.308-5.156-5.155s2.309-5.156 5.156-5.156h49.115c2.847 0 5.155 2.309 5.155 5.156s-2.308 5.155-5.155 5.155z' fill='%233A232C'/%3E%3Cline x1='-320.67' x2='-271.56' y1='56.592' y2='56.592' fill='%23fff'/%3E%3Cpath d='m-271.56 61.748h-49.115c-2.847 0-5.156-2.309-5.156-5.156s2.309-5.155 5.156-5.155h49.115c2.847 0 5.155 2.309 5.155 5.155 1e-3 2.847-2.308 5.156-5.155 5.156z' fill='%233A232C'/%3E%3Cline x1='-320.67' x2='-271.56' y1='77.937' y2='77.937' fill='%23fff'/%3E%3Cpath d='m-271.56 83.092h-49.115c-2.847 0-5.156-2.309-5.156-5.155s2.309-5.155 5.156-5.155h49.115c2.847 0 5.155 2.309 5.155 5.155s-2.308 5.155-5.155 5.155z' fill='%233A232C'/%3E%3Cpath d='m-102.93 60.33c-6 0-7.215-9.093-7.215-9.093-0.714-4.731 1.454-10.071 7.137-10.071 5.71 0 7.877 5.339 7.163 10.071-1e-3 0-1.086 9.093-7.085 9.093zm0 6.794l7.19-4.812c6.317 0 11.947 6.159 11.947 11.976v6.582s-9.646 2.986-19.137 2.986c-9.648 0-19.138-2.986-19.138-2.986v-6.582c0-5.948 5.128-11.843 11.817-11.843l7.321 4.679z' fill='%233A232C'/%3E%3Crect x='16.105' y='13.898' width='108.41' height='112.6' fill='none' stroke='%23BFBFBF' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='8'/%3E%3Crect x='29.935' y='27.729' width='108.41' height='112.6' fill='%23fff' stroke='%23BFBFBF' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='8'/%3E%3Crect x='44.149' y='42.328' width='108.41' height='112.6' fill='%23fff' stroke='%233A232C' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='8'/%3E%3Cpath d='m100.26 68.858l7.971-7.972 27.863 27.815-8.02 7.974c-4.599-2.979-10.863-2.497-14.938 1.577l-3.284 3.286c-4.029 4.073-4.556 10.293-1.534 14.936l-8.016 7.975-10.556-10.559-12.267 12.222c-1.84 1.842-14.807 11.873-16.646 10.032-1.84-1.839 8.146-14.85 9.987-16.689l12.221-12.222-10.556-10.602 8.017-7.972c4.6 3.021 10.865 2.494 14.895-1.579l3.284-3.283c4.075-4.032 4.6-10.295 1.579-14.939z' fill='%233A232C'/%3E%3C/svg%3E"); +} -// newsletters: types -[data-type="notification"] .mailpoet_thumbnail - background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='170.08px' height='170.08px' enable-background='new 0 0 170.079 170.079' version='1.1' viewBox='0 0 170.079 170.079' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='-165.74 77.092 -103.12 26.46 -40.486 77.092' fill='%238CD2CA'/%3E%3Cpath d='m-165.74 82.159c-1.477 0-2.942-0.644-3.944-1.88-1.759-2.178-1.42-5.366 0.755-7.128l62.63-50.63c1.858-1.503 4.512-1.503 6.37 0l62.627 50.63c2.178 1.762 2.514 4.95 0.755 7.128-1.759 2.174-4.948 2.513-7.125 0.754l-59.443-48.057-59.444 48.057c-0.938 0.757-2.063 1.126-3.181 1.126z' fill='%233A232C'/%3E%3Crect x='-165.74' y='77.706' width='125.26' height='79.142' display='none' fill='%238CD2CA'/%3E%3Cpath d='m-40.486 161.91h-125.26c-2.798 0-5.067-2.269-5.067-5.066v-79.142c0-2.798 2.269-5.066 5.067-5.066h125.26c2.798 0 5.066 2.269 5.066 5.066v79.142c0 2.797-2.268 5.066-5.066 5.066zm-120.19-10.133h115.12v-69.009h-115.12v69.009z' fill='%233A232C'/%3E%3Cline x1='-103.12' x2='-40.486' y1='117.28' y2='155.97' fill='%238CD2CA'/%3E%3Cpath d='m-40.491 161.04c-0.908 0-1.828-0.243-2.657-0.757l-62.629-38.698c-2.38-1.469-3.117-4.591-1.648-6.971 1.472-2.383 4.594-3.117 6.974-1.648l62.629 38.698c2.38 1.472 3.117 4.591 1.646 6.974-0.958 1.548-2.616 2.402-4.315 2.402z' fill='%233A232C'/%3E%3Cline x1='-103.12' x2='-165.74' y1='117.28' y2='155.97' fill='%238CD2CA'/%3E%3Cpath d='m-165.74 161.04c-1.697 0-3.357-0.854-4.315-2.402-1.472-2.383-0.732-5.502 1.648-6.974l62.628-38.698c2.382-1.472 5.504-0.731 6.974 1.648 1.472 2.38 0.732 5.502-1.648 6.971l-62.628 38.698c-0.831 0.513-1.751 0.757-2.659 0.757z' fill='%233A232C'/%3E%3Cpath d='m-103.12 122.34c-0.925 0-1.86-0.253-2.702-0.784l-62.627-39.571c-2.365-1.494-3.07-4.624-1.576-6.988 1.494-2.365 4.624-3.073 6.989-1.576l62.63 39.57c2.365 1.494 3.07 4.624 1.576 6.989-0.965 1.526-2.607 2.36-4.29 2.36z' fill='%233A232C'/%3E%3Cpath d='m-103.11 122.34c-1.683 0-3.325-0.834-4.29-2.36-1.494-2.365-0.789-5.495 1.576-6.989l62.63-39.57c2.364-1.494 5.494-0.789 6.991 1.576 1.494 2.364 0.786 5.494-1.579 6.988l-62.627 39.571c-0.841 0.531-1.777 0.784-2.701 0.784z' fill='%233A232C'/%3E%3Cpolygon points='-143.83 91.552 -143.83 14.976 -62.405 14.976 -62.405 91.555 -103.12 117.28' fill='%23fff'/%3E%3Cpath d='m-103.12 122.34c-0.938 0-1.88-0.26-2.707-0.784l-40.711-25.725c-1.47-0.928-2.36-2.543-2.36-4.282v-76.576c0-2.798 2.269-5.066 5.067-5.066h81.422c2.798 0 5.066 2.269 5.066 5.066v76.579c0 1.736-0.891 3.354-2.36 4.282l-40.708 25.722c-0.826 0.524-1.766 0.784-2.709 0.784zm-35.645-33.582l35.645 22.523 35.645-22.523v-68.718h-71.289v68.718z' fill='%233A232C'/%3E%3Cpolyline points='-359.84 77.937 -296.12 26.417 -232.39 77.937' fill='%238CD2CA'/%3E%3Cpath d='m-359.84 83.092c-1.503 0-2.993-0.654-4.011-1.913-1.79-2.215-1.446-5.46 0.768-7.252l63.729-51.519c1.891-1.529 4.592-1.529 6.482 0l63.728 51.519c2.213 1.792 2.558 5.037 0.768 7.252-1.791 2.213-5.035 2.558-7.25 0.768l-60.487-48.9-60.486 48.9c-0.957 0.77-2.102 1.145-3.241 1.145z' fill='%233A232C'/%3E%3Crect x='-359.84' y='78.561' width='127.46' height='80.532' display='none' fill='%238CD2CA'/%3E%3Cpath d='m-232.39 164.25h-127.46c-2.847 0-5.156-2.308-5.156-5.155v-80.533c0-2.847 2.309-5.155 5.156-5.155h127.46c2.848 0 5.156 2.309 5.156 5.155v80.532c1e-3 2.848-2.308 5.156-5.156 5.156zm-122.3-10.311h117.14v-70.221h-117.14v70.221z' fill='%233A232C'/%3E%3Cline x1='-296.12' x2='-232.39' y1='118.83' y2='158.2' fill='%238CD2CA'/%3E%3Cpath d='m-232.39 163.36c-0.926 0-1.86-0.25-2.706-0.771l-63.727-39.377c-2.422-1.497-3.173-4.674-1.677-7.096 1.498-2.425 4.675-3.172 7.097-1.677l63.728 39.379c2.422 1.495 3.174 4.672 1.677 7.094-0.975 1.579-2.665 2.448-4.392 2.448z' fill='%233A232C'/%3E%3Cline x1='-296.12' x2='-359.84' y1='118.83' y2='158.2' fill='%238CD2CA'/%3E%3Cpath d='m-359.84 163.36c-1.728 0-3.416-0.869-4.39-2.447-1.498-2.422-0.747-5.599 1.675-7.094l63.728-39.379c2.424-1.498 5.6-0.745 7.096 1.677 1.498 2.422 0.745 5.599-1.676 7.096l-63.728 39.377c-0.845 0.52-1.782 0.77-2.705 0.77z' fill='%233A232C'/%3E%3Cpath d='m-296.12 123.98c-0.941 0-1.893-0.257-2.749-0.798l-63.727-40.268c-2.406-1.521-3.125-4.704-1.604-7.111 1.521-2.406 4.705-3.126 7.113-1.604l63.728 40.265c2.407 1.521 3.125 4.705 1.605 7.112-0.983 1.553-2.654 2.404-4.366 2.404z' fill='%233A232C'/%3E%3Cpath d='m-296.11 123.98c-1.71 0-3.382-0.848-4.364-2.403-1.521-2.407-0.803-5.592 1.604-7.112l63.729-40.265c2.407-1.521 5.589-0.803 7.112 1.604 1.521 2.407 0.803 5.591-1.604 7.111l-63.729 40.268c-0.853 0.54-1.806 0.797-2.748 0.797z' fill='%233A232C'/%3E%3Cpolygon points='-337.54 92.651 -337.54 14.732 -254.69 14.732 -254.69 92.654 -296.12 118.83' fill='%23fff'/%3E%3Cpath d='m-296.12 123.98c-0.955 0-1.913-0.267-2.754-0.798l-41.425-26.178c-1.495-0.944-2.401-2.588-2.401-4.357v-77.919c0-2.847 2.308-5.156 5.155-5.156h82.849c2.847 0 5.156 2.309 5.156 5.156v77.922c0 1.767-0.906 3.413-2.401 4.357l-41.422 26.175c-0.843 0.531-1.799 0.798-2.757 0.798zm-36.27-34.173l36.27 22.918 36.268-22.918v-69.924h-72.538v69.924z' fill='%233A232C'/%3E%3Cline x1='-320.67' x2='-271.56' y1='35.248' y2='35.248' fill='%23fff'/%3E%3Cpath d='m-271.56 40.403h-49.115c-2.847 0-5.156-2.308-5.156-5.155s2.309-5.156 5.156-5.156h49.115c2.847 0 5.155 2.309 5.155 5.156s-2.308 5.155-5.155 5.155z' fill='%233A232C'/%3E%3Cline x1='-320.67' x2='-271.56' y1='56.592' y2='56.592' fill='%23fff'/%3E%3Cpath d='m-271.56 61.748h-49.115c-2.847 0-5.156-2.309-5.156-5.156s2.309-5.155 5.156-5.155h49.115c2.847 0 5.155 2.309 5.155 5.155 1e-3 2.847-2.308 5.156-5.155 5.156z' fill='%233A232C'/%3E%3Cline x1='-320.67' x2='-271.56' y1='77.937' y2='77.937' fill='%23fff'/%3E%3Cpath d='m-271.56 83.092h-49.115c-2.847 0-5.156-2.309-5.156-5.155s2.309-5.155 5.156-5.155h49.115c2.847 0 5.155 2.309 5.155 5.155s-2.308 5.155-5.155 5.155z' fill='%233A232C'/%3E%3Cpath d='m-102.93 60.33c-6 0-7.215-9.093-7.215-9.093-0.714-4.731 1.454-10.071 7.137-10.071 5.71 0 7.877 5.339 7.163 10.071-1e-3 0-1.086 9.093-7.085 9.093zm0 6.794l7.19-4.812c6.317 0 11.947 6.159 11.947 11.976v6.582s-9.646 2.986-19.137 2.986c-9.648 0-19.138-2.986-19.138-2.986v-6.582c0-5.948 5.128-11.843 11.817-11.843l7.321 4.679z' fill='%233A232C'/%3E%3Crect x='16.105' y='13.898' width='108.41' height='112.6' fill='none' stroke='%23BFBFBF' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='8'/%3E%3Crect x='29.935' y='27.729' width='108.41' height='112.6' fill='%23fff' stroke='%23BFBFBF' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='8'/%3E%3Crect x='44.149' y='42.328' width='108.41' height='112.6' fill='%23fff' stroke='%233A232C' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='8'/%3E%3Cpath d='m100.26 68.858l7.971-7.972 27.863 27.815-8.02 7.974c-4.599-2.979-10.863-2.497-14.938 1.577l-3.284 3.286c-4.029 4.073-4.556 10.293-1.534 14.936l-8.016 7.975-10.556-10.559-12.267 12.222c-1.84 1.842-14.807 11.873-16.646 10.032-1.84-1.839 8.146-14.85 9.987-16.689l12.221-12.222-10.556-10.602 8.017-7.972c4.6 3.021 10.865 2.494 14.895-1.579l3.284-3.283c4.075-4.032 4.6-10.295 1.579-14.939z' fill='%233A232C'/%3E%3C/svg%3E") +[data-type="welcome"] .mailpoet_thumbnail { + background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='170.08px' height='170.08px' enable-background='new 0 0 170.079 170.079' version='1.1' viewBox='0 0 170.079 170.079' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='22.59 76.092 85.217 25.46 147.85 76.092' fill='%238CD2CA'/%3E%3Cpath d='m22.592 81.159c-1.477 0-2.942-0.644-3.944-1.88-1.759-2.178-1.42-5.366 0.755-7.128l62.63-50.63c1.858-1.503 4.512-1.503 6.37 0l62.627 50.63c2.178 1.762 2.514 4.95 0.755 7.128-1.759 2.174-4.948 2.513-7.125 0.754l-59.443-48.057-59.444 48.057c-0.937 0.757-2.063 1.126-3.181 1.126z' fill='%233A232C'/%3E%3Crect x='22.59' y='76.706' width='125.26' height='79.142' display='none' fill='%238CD2CA'/%3E%3Cpath d='m147.85 160.91h-125.26c-2.798 0-5.067-2.269-5.067-5.066v-79.142c0-2.798 2.269-5.066 5.067-5.066h125.26c2.798 0 5.066 2.269 5.066 5.066v79.142c1e-3 2.797-2.268 5.066-5.066 5.066zm-120.19-10.133h115.12v-69.009h-115.12v69.009z' fill='%233A232C'/%3E%3Cline x1='85.217' x2='147.85' y1='116.28' y2='154.97' fill='%238CD2CA'/%3E%3Cpath d='m147.84 160.04c-0.908 0-1.828-0.243-2.657-0.757l-62.629-38.698c-2.38-1.469-3.117-4.591-1.648-6.971 1.472-2.383 4.594-3.117 6.974-1.648l62.629 38.698c2.38 1.472 3.117 4.591 1.646 6.974-0.957 1.548-2.615 2.402-4.315 2.402z' fill='%233A232C'/%3E%3Cline x1='85.217' x2='22.59' y1='116.28' y2='154.97' fill='%238CD2CA'/%3E%3Cpath d='m22.595 160.04c-1.697 0-3.357-0.854-4.315-2.402-1.472-2.383-0.732-5.502 1.648-6.974l62.628-38.698c2.382-1.472 5.504-0.731 6.974 1.648 1.472 2.38 0.732 5.502-1.648 6.971l-62.628 38.698c-0.831 0.513-1.752 0.757-2.659 0.757z' fill='%233A232C'/%3E%3Cpath d='m85.212 121.34c-0.925 0-1.86-0.253-2.702-0.784l-62.627-39.571c-2.365-1.494-3.07-4.624-1.576-6.988 1.494-2.365 4.624-3.073 6.989-1.576l62.63 39.57c2.365 1.494 3.07 4.624 1.576 6.989-0.964 1.526-2.607 2.36-4.29 2.36z' fill='%233A232C'/%3E%3Cpath d='m85.225 121.34c-1.683 0-3.325-0.834-4.29-2.36-1.494-2.365-0.789-5.495 1.576-6.989l62.63-39.57c2.364-1.494 5.494-0.789 6.991 1.576 1.494 2.364 0.786 5.494-1.579 6.988l-62.627 39.571c-0.841 0.531-1.776 0.784-2.701 0.784z' fill='%233A232C'/%3E%3Cpolygon points='44.506 90.552 44.506 13.976 125.93 13.976 125.93 90.555 85.217 116.28' fill='%23fff'/%3E%3Cpath d='m85.217 121.34c-0.938 0-1.88-0.26-2.707-0.784l-40.71-25.725c-1.47-0.928-2.36-2.543-2.36-4.282v-76.576c0-2.798 2.269-5.066 5.067-5.066h81.422c2.798 0 5.066 2.269 5.066 5.066v76.579c0 1.736-0.891 3.354-2.36 4.282l-40.708 25.722c-0.827 0.524-1.767 0.784-2.71 0.784zm-35.644-33.582l35.645 22.523 35.645-22.523v-68.718h-71.29v68.718z' fill='%233A232C'/%3E%3Cpolyline points='-171.51 76.937 -107.78 25.417 -44.055 76.937' fill='%238CD2CA'/%3E%3Cpath d='m-171.51 82.092c-1.503 0-2.993-0.654-4.011-1.913-1.79-2.215-1.446-5.46 0.768-7.252l63.729-51.519c1.891-1.529 4.592-1.529 6.482 0l63.728 51.519c2.213 1.792 2.558 5.037 0.768 7.252-1.791 2.213-5.035 2.558-7.25 0.768l-60.487-48.9-60.486 48.9c-0.956 0.77-2.102 1.145-3.241 1.145z' fill='%233A232C'/%3E%3Crect x='-171.51' y='77.561' width='127.46' height='80.532' display='none' fill='%238CD2CA'/%3E%3Cpath d='m-44.052 163.25h-127.46c-2.847 0-5.156-2.308-5.156-5.155v-80.533c0-2.847 2.309-5.155 5.156-5.155h127.46c2.848 0 5.156 2.309 5.156 5.155v80.532c0 2.848-2.308 5.156-5.156 5.156zm-122.3-10.311h117.14v-70.221h-117.14v70.221z' fill='%233A232C'/%3E%3Cline x1='-107.78' x2='-44.052' y1='117.83' y2='157.2' fill='%238CD2CA'/%3E%3Cpath d='m-44.057 162.36c-0.926 0-1.86-0.25-2.706-0.771l-63.727-39.377c-2.422-1.497-3.173-4.674-1.677-7.096 1.498-2.425 4.675-3.172 7.097-1.677l63.728 39.379c2.422 1.495 3.174 4.672 1.677 7.094-0.976 1.579-2.665 2.448-4.392 2.448z' fill='%233A232C'/%3E%3Cline x1='-107.78' x2='-171.51' y1='117.83' y2='157.2' fill='%238CD2CA'/%3E%3Cpath d='m-171.5 162.36c-1.728 0-3.416-0.869-4.39-2.447-1.498-2.422-0.747-5.599 1.675-7.094l63.728-39.379c2.424-1.498 5.6-0.745 7.096 1.677 1.498 2.422 0.745 5.599-1.676 7.096l-63.728 39.377c-0.845 0.52-1.781 0.77-2.705 0.77z' fill='%233A232C'/%3E%3Cpath d='m-107.79 122.98c-0.941 0-1.893-0.257-2.749-0.798l-63.727-40.268c-2.406-1.521-3.125-4.704-1.604-7.111 1.521-2.406 4.705-3.126 7.113-1.604l63.728 40.265c2.407 1.521 3.125 4.705 1.605 7.112-0.982 1.553-2.654 2.404-4.366 2.404z' fill='%233A232C'/%3E%3Cpath d='m-107.78 122.98c-1.71 0-3.382-0.848-4.364-2.403-1.521-2.407-0.803-5.592 1.604-7.112l63.729-40.265c2.407-1.521 5.589-0.803 7.112 1.604 1.521 2.407 0.803 5.591-1.604 7.111l-63.729 40.268c-0.854 0.54-1.807 0.797-2.748 0.797z' fill='%233A232C'/%3E%3Cpolygon points='-149.21 91.651 -149.21 13.732 -66.358 13.732 -66.358 91.654 -107.78 117.83' fill='%23fff'/%3E%3Cpath d='m-107.78 122.98c-0.955 0-1.913-0.267-2.754-0.798l-41.425-26.178c-1.495-0.944-2.401-2.588-2.401-4.357v-77.919c0-2.847 2.308-5.156 5.155-5.156h82.849c2.847 0 5.156 2.309 5.156 5.156v77.922c0 1.767-0.906 3.413-2.401 4.357l-41.422 26.175c-0.842 0.531-1.799 0.798-2.757 0.798zm-36.269-34.173l36.27 22.918 36.268-22.918v-69.924h-72.538v69.924z' fill='%233A232C'/%3E%3Cline x1='-132.34' x2='-83.224' y1='34.248' y2='34.248' fill='%23fff'/%3E%3Cpath d='m-83.224 39.403h-49.115c-2.847 0-5.156-2.308-5.156-5.155s2.309-5.156 5.156-5.156h49.115c2.847 0 5.155 2.309 5.155 5.156s-2.308 5.155-5.155 5.155z' fill='%233A232C'/%3E%3Cline x1='-132.34' x2='-83.224' y1='55.592' y2='55.592' fill='%23fff'/%3E%3Cpath d='m-83.224 60.748h-49.115c-2.847 0-5.156-2.309-5.156-5.156s2.309-5.155 5.156-5.155h49.115c2.847 0 5.155 2.309 5.155 5.155 0 2.847-2.308 5.156-5.155 5.156z' fill='%233A232C'/%3E%3Cline x1='-132.34' x2='-83.224' y1='76.937' y2='76.937' fill='%23fff'/%3E%3Cpath d='m-83.224 82.092h-49.115c-2.847 0-5.156-2.309-5.156-5.155s2.309-5.155 5.156-5.155h49.115c2.847 0 5.155 2.309 5.155 5.155s-2.308 5.155-5.155 5.155z' fill='%233A232C'/%3E%3Cpath d='m85.403 52.58c-8.062 0-9.694-12.217-9.694-12.217-0.959-6.357 1.953-13.531 9.589-13.531 7.672 0 10.583 7.174 9.625 13.531-1e-3 0-1.459 12.217-9.52 12.217zm0 9.128l9.661-6.465c8.487 0 16.052 8.275 16.052 16.09v8.844s-12.961 4.013-25.712 4.013c-12.962 0-25.713-4.013-25.713-4.013v-8.844c0-7.992 6.89-15.912 15.877-15.912l9.835 6.287z' fill='%233A232C'/%3E%3Crect x='204.44' y='12.898' width='108.41' height='112.6' fill='none' stroke='%23BFBFBF' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='8'/%3E%3Crect x='218.27' y='26.729' width='108.41' height='112.6' fill='%23fff' stroke='%23BFBFBF' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='8'/%3E%3Crect x='232.48' y='41.328' width='108.41' height='112.6' fill='%23fff' stroke='%233A232C' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='8'/%3E%3Cpath d='m288.6 67.858l7.971-7.972 27.863 27.815-8.02 7.974c-4.599-2.979-10.863-2.497-14.938 1.577l-3.284 3.286c-4.029 4.073-4.556 10.293-1.534 14.936l-8.016 7.975-10.557-10.559-12.267 12.222c-1.84 1.842-14.807 11.873-16.646 10.032-1.84-1.839 8.146-14.85 9.987-16.689l12.221-12.222-10.557-10.602 8.017-7.972c4.6 3.021 10.865 2.494 14.895-1.579l3.284-3.283c4.077-4.032 4.603-10.295 1.581-14.939z' fill='%233A232C'/%3E%3C/svg%3E"); +} -[data-type="welcome"] .mailpoet_thumbnail - background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='170.08px' height='170.08px' enable-background='new 0 0 170.079 170.079' version='1.1' viewBox='0 0 170.079 170.079' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='22.59 76.092 85.217 25.46 147.85 76.092' fill='%238CD2CA'/%3E%3Cpath d='m22.592 81.159c-1.477 0-2.942-0.644-3.944-1.88-1.759-2.178-1.42-5.366 0.755-7.128l62.63-50.63c1.858-1.503 4.512-1.503 6.37 0l62.627 50.63c2.178 1.762 2.514 4.95 0.755 7.128-1.759 2.174-4.948 2.513-7.125 0.754l-59.443-48.057-59.444 48.057c-0.937 0.757-2.063 1.126-3.181 1.126z' fill='%233A232C'/%3E%3Crect x='22.59' y='76.706' width='125.26' height='79.142' display='none' fill='%238CD2CA'/%3E%3Cpath d='m147.85 160.91h-125.26c-2.798 0-5.067-2.269-5.067-5.066v-79.142c0-2.798 2.269-5.066 5.067-5.066h125.26c2.798 0 5.066 2.269 5.066 5.066v79.142c1e-3 2.797-2.268 5.066-5.066 5.066zm-120.19-10.133h115.12v-69.009h-115.12v69.009z' fill='%233A232C'/%3E%3Cline x1='85.217' x2='147.85' y1='116.28' y2='154.97' fill='%238CD2CA'/%3E%3Cpath d='m147.84 160.04c-0.908 0-1.828-0.243-2.657-0.757l-62.629-38.698c-2.38-1.469-3.117-4.591-1.648-6.971 1.472-2.383 4.594-3.117 6.974-1.648l62.629 38.698c2.38 1.472 3.117 4.591 1.646 6.974-0.957 1.548-2.615 2.402-4.315 2.402z' fill='%233A232C'/%3E%3Cline x1='85.217' x2='22.59' y1='116.28' y2='154.97' fill='%238CD2CA'/%3E%3Cpath d='m22.595 160.04c-1.697 0-3.357-0.854-4.315-2.402-1.472-2.383-0.732-5.502 1.648-6.974l62.628-38.698c2.382-1.472 5.504-0.731 6.974 1.648 1.472 2.38 0.732 5.502-1.648 6.971l-62.628 38.698c-0.831 0.513-1.752 0.757-2.659 0.757z' fill='%233A232C'/%3E%3Cpath d='m85.212 121.34c-0.925 0-1.86-0.253-2.702-0.784l-62.627-39.571c-2.365-1.494-3.07-4.624-1.576-6.988 1.494-2.365 4.624-3.073 6.989-1.576l62.63 39.57c2.365 1.494 3.07 4.624 1.576 6.989-0.964 1.526-2.607 2.36-4.29 2.36z' fill='%233A232C'/%3E%3Cpath d='m85.225 121.34c-1.683 0-3.325-0.834-4.29-2.36-1.494-2.365-0.789-5.495 1.576-6.989l62.63-39.57c2.364-1.494 5.494-0.789 6.991 1.576 1.494 2.364 0.786 5.494-1.579 6.988l-62.627 39.571c-0.841 0.531-1.776 0.784-2.701 0.784z' fill='%233A232C'/%3E%3Cpolygon points='44.506 90.552 44.506 13.976 125.93 13.976 125.93 90.555 85.217 116.28' fill='%23fff'/%3E%3Cpath d='m85.217 121.34c-0.938 0-1.88-0.26-2.707-0.784l-40.71-25.725c-1.47-0.928-2.36-2.543-2.36-4.282v-76.576c0-2.798 2.269-5.066 5.067-5.066h81.422c2.798 0 5.066 2.269 5.066 5.066v76.579c0 1.736-0.891 3.354-2.36 4.282l-40.708 25.722c-0.827 0.524-1.767 0.784-2.71 0.784zm-35.644-33.582l35.645 22.523 35.645-22.523v-68.718h-71.29v68.718z' fill='%233A232C'/%3E%3Cpolyline points='-171.51 76.937 -107.78 25.417 -44.055 76.937' fill='%238CD2CA'/%3E%3Cpath d='m-171.51 82.092c-1.503 0-2.993-0.654-4.011-1.913-1.79-2.215-1.446-5.46 0.768-7.252l63.729-51.519c1.891-1.529 4.592-1.529 6.482 0l63.728 51.519c2.213 1.792 2.558 5.037 0.768 7.252-1.791 2.213-5.035 2.558-7.25 0.768l-60.487-48.9-60.486 48.9c-0.956 0.77-2.102 1.145-3.241 1.145z' fill='%233A232C'/%3E%3Crect x='-171.51' y='77.561' width='127.46' height='80.532' display='none' fill='%238CD2CA'/%3E%3Cpath d='m-44.052 163.25h-127.46c-2.847 0-5.156-2.308-5.156-5.155v-80.533c0-2.847 2.309-5.155 5.156-5.155h127.46c2.848 0 5.156 2.309 5.156 5.155v80.532c0 2.848-2.308 5.156-5.156 5.156zm-122.3-10.311h117.14v-70.221h-117.14v70.221z' fill='%233A232C'/%3E%3Cline x1='-107.78' x2='-44.052' y1='117.83' y2='157.2' fill='%238CD2CA'/%3E%3Cpath d='m-44.057 162.36c-0.926 0-1.86-0.25-2.706-0.771l-63.727-39.377c-2.422-1.497-3.173-4.674-1.677-7.096 1.498-2.425 4.675-3.172 7.097-1.677l63.728 39.379c2.422 1.495 3.174 4.672 1.677 7.094-0.976 1.579-2.665 2.448-4.392 2.448z' fill='%233A232C'/%3E%3Cline x1='-107.78' x2='-171.51' y1='117.83' y2='157.2' fill='%238CD2CA'/%3E%3Cpath d='m-171.5 162.36c-1.728 0-3.416-0.869-4.39-2.447-1.498-2.422-0.747-5.599 1.675-7.094l63.728-39.379c2.424-1.498 5.6-0.745 7.096 1.677 1.498 2.422 0.745 5.599-1.676 7.096l-63.728 39.377c-0.845 0.52-1.781 0.77-2.705 0.77z' fill='%233A232C'/%3E%3Cpath d='m-107.79 122.98c-0.941 0-1.893-0.257-2.749-0.798l-63.727-40.268c-2.406-1.521-3.125-4.704-1.604-7.111 1.521-2.406 4.705-3.126 7.113-1.604l63.728 40.265c2.407 1.521 3.125 4.705 1.605 7.112-0.982 1.553-2.654 2.404-4.366 2.404z' fill='%233A232C'/%3E%3Cpath d='m-107.78 122.98c-1.71 0-3.382-0.848-4.364-2.403-1.521-2.407-0.803-5.592 1.604-7.112l63.729-40.265c2.407-1.521 5.589-0.803 7.112 1.604 1.521 2.407 0.803 5.591-1.604 7.111l-63.729 40.268c-0.854 0.54-1.807 0.797-2.748 0.797z' fill='%233A232C'/%3E%3Cpolygon points='-149.21 91.651 -149.21 13.732 -66.358 13.732 -66.358 91.654 -107.78 117.83' fill='%23fff'/%3E%3Cpath d='m-107.78 122.98c-0.955 0-1.913-0.267-2.754-0.798l-41.425-26.178c-1.495-0.944-2.401-2.588-2.401-4.357v-77.919c0-2.847 2.308-5.156 5.155-5.156h82.849c2.847 0 5.156 2.309 5.156 5.156v77.922c0 1.767-0.906 3.413-2.401 4.357l-41.422 26.175c-0.842 0.531-1.799 0.798-2.757 0.798zm-36.269-34.173l36.27 22.918 36.268-22.918v-69.924h-72.538v69.924z' fill='%233A232C'/%3E%3Cline x1='-132.34' x2='-83.224' y1='34.248' y2='34.248' fill='%23fff'/%3E%3Cpath d='m-83.224 39.403h-49.115c-2.847 0-5.156-2.308-5.156-5.155s2.309-5.156 5.156-5.156h49.115c2.847 0 5.155 2.309 5.155 5.156s-2.308 5.155-5.155 5.155z' fill='%233A232C'/%3E%3Cline x1='-132.34' x2='-83.224' y1='55.592' y2='55.592' fill='%23fff'/%3E%3Cpath d='m-83.224 60.748h-49.115c-2.847 0-5.156-2.309-5.156-5.156s2.309-5.155 5.156-5.155h49.115c2.847 0 5.155 2.309 5.155 5.155 0 2.847-2.308 5.156-5.155 5.156z' fill='%233A232C'/%3E%3Cline x1='-132.34' x2='-83.224' y1='76.937' y2='76.937' fill='%23fff'/%3E%3Cpath d='m-83.224 82.092h-49.115c-2.847 0-5.156-2.309-5.156-5.155s2.309-5.155 5.156-5.155h49.115c2.847 0 5.155 2.309 5.155 5.155s-2.308 5.155-5.155 5.155z' fill='%233A232C'/%3E%3Cpath d='m85.403 52.58c-8.062 0-9.694-12.217-9.694-12.217-0.959-6.357 1.953-13.531 9.589-13.531 7.672 0 10.583 7.174 9.625 13.531-1e-3 0-1.459 12.217-9.52 12.217zm0 9.128l9.661-6.465c8.487 0 16.052 8.275 16.052 16.09v8.844s-12.961 4.013-25.712 4.013c-12.962 0-25.713-4.013-25.713-4.013v-8.844c0-7.992 6.89-15.912 15.877-15.912l9.835 6.287z' fill='%233A232C'/%3E%3Crect x='204.44' y='12.898' width='108.41' height='112.6' fill='none' stroke='%23BFBFBF' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='8'/%3E%3Crect x='218.27' y='26.729' width='108.41' height='112.6' fill='%23fff' stroke='%23BFBFBF' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='8'/%3E%3Crect x='232.48' y='41.328' width='108.41' height='112.6' fill='%23fff' stroke='%233A232C' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='8'/%3E%3Cpath d='m288.6 67.858l7.971-7.972 27.863 27.815-8.02 7.974c-4.599-2.979-10.863-2.497-14.938 1.577l-3.284 3.286c-4.029 4.073-4.556 10.293-1.534 14.936l-8.016 7.975-10.557-10.559-12.267 12.222c-1.84 1.842-14.807 11.873-16.646 10.032-1.84-1.839 8.146-14.85 9.987-16.689l12.221-12.222-10.557-10.602 8.017-7.972c4.6 3.021 10.865 2.494 14.895-1.579l3.284-3.283c4.077-4.032 4.603-10.295 1.581-14.939z' fill='%233A232C'/%3E%3C/svg%3E") +[data-type="standard"] .mailpoet_thumbnail { + background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='170.08px' height='170.08px' enable-background='new 0 0 170.079 170.079' version='1.1' viewBox='0 0 170.079 170.079' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='217.59 74.092 280.22 23.46 342.85 74.092' fill='%238CD2CA'/%3E%3Cpath d='m217.59 79.159c-1.477 0-2.942-0.644-3.944-1.88-1.759-2.178-1.42-5.366 0.755-7.128l62.63-50.63c1.858-1.503 4.512-1.503 6.37 0l62.627 50.63c2.178 1.762 2.514 4.95 0.755 7.128-1.759 2.174-4.948 2.513-7.125 0.754l-59.443-48.057-59.444 48.057c-0.938 0.757-2.063 1.126-3.181 1.126z' fill='%233A232C'/%3E%3Crect x='217.59' y='74.706' width='125.26' height='79.142' display='none' fill='%238CD2CA'/%3E%3Cpath d='m342.85 158.91h-125.26c-2.798 0-5.067-2.269-5.067-5.066v-79.142c0-2.798 2.269-5.066 5.067-5.066h125.26c2.798 0 5.066 2.269 5.066 5.066v79.142c1e-3 2.797-2.267 5.066-5.065 5.066zm-120.19-10.133h115.12v-69.009h-115.12v69.009z' fill='%233A232C'/%3E%3Cline x1='280.22' x2='342.85' y1='114.28' y2='152.97' fill='%238CD2CA'/%3E%3Cpath d='m342.84 158.04c-0.908 0-1.828-0.243-2.657-0.757l-62.629-38.698c-2.38-1.469-3.117-4.591-1.648-6.971 1.472-2.383 4.594-3.117 6.974-1.648l62.629 38.698c2.38 1.472 3.117 4.591 1.646 6.974-0.958 1.548-2.616 2.402-4.315 2.402z' fill='%233A232C'/%3E%3Cline x1='280.22' x2='217.59' y1='114.28' y2='152.97' fill='%238CD2CA'/%3E%3Cpath d='m217.59 158.04c-1.697 0-3.357-0.854-4.315-2.402-1.472-2.383-0.732-5.502 1.648-6.974l62.628-38.698c2.382-1.472 5.504-0.731 6.974 1.648 1.472 2.38 0.732 5.502-1.648 6.971l-62.628 38.698c-0.831 0.513-1.751 0.757-2.659 0.757z' fill='%233A232C'/%3E%3Cpath d='m280.21 119.34c-0.925 0-1.86-0.253-2.702-0.784l-62.627-39.571c-2.365-1.494-3.07-4.624-1.576-6.988 1.494-2.365 4.624-3.073 6.989-1.576l62.63 39.57c2.365 1.494 3.07 4.624 1.576 6.989-0.965 1.526-2.607 2.36-4.29 2.36z' fill='%233A232C'/%3E%3Cpath d='m280.22 119.34c-1.683 0-3.325-0.834-4.29-2.36-1.494-2.365-0.789-5.495 1.576-6.989l62.63-39.57c2.364-1.494 5.494-0.789 6.991 1.576 1.494 2.364 0.786 5.494-1.579 6.988l-62.627 39.571c-0.841 0.531-1.777 0.784-2.701 0.784z' fill='%233A232C'/%3E%3Cpolygon points='239.51 88.552 239.51 11.976 320.93 11.976 320.93 88.555 280.22 114.28' fill='%23fff'/%3E%3Cpath d='m280.22 119.34c-0.938 0-1.88-0.26-2.707-0.784l-40.711-25.725c-1.47-0.928-2.36-2.543-2.36-4.282v-76.576c0-2.798 2.269-5.066 5.067-5.066h81.422c2.798 0 5.066 2.269 5.066 5.066v76.579c0 1.736-0.891 3.354-2.36 4.282l-40.708 25.722c-0.826 0.524-1.766 0.784-2.709 0.784zm-35.645-33.582l35.645 22.523 35.645-22.523v-68.718h-71.289v68.718z' fill='%233A232C'/%3E%3Cpolyline points='23.49 74.937 87.218 23.417 150.94 74.937' fill='%238CD2CA'/%3E%3Cpath d='m23.493 80.092c-1.503 0-2.993-0.654-4.011-1.913-1.79-2.215-1.446-5.46 0.768-7.252l63.729-51.519c1.891-1.529 4.592-1.529 6.482 0l63.728 51.519c2.213 1.792 2.558 5.037 0.768 7.252-1.791 2.213-5.035 2.558-7.25 0.768l-60.487-48.9-60.486 48.9c-0.957 0.77-2.102 1.145-3.241 1.145z' fill='%233A232C'/%3E%3Crect x='23.492' y='75.561' width='127.46' height='80.532' display='none' fill='%238CD2CA'/%3E%3Cpath d='m150.95 161.25h-127.46c-2.847 0-5.156-2.308-5.156-5.155v-80.533c0-2.847 2.309-5.155 5.156-5.155h127.46c2.848 0 5.156 2.309 5.156 5.155v80.532c0 2.848-2.309 5.156-5.157 5.156zm-122.3-10.311h117.14v-70.221h-117.14v70.221z' fill='%233A232C'/%3E%3Cline x1='87.218' x2='150.95' y1='115.83' y2='155.2' fill='%238CD2CA'/%3E%3Cpath d='m150.94 160.36c-0.926 0-1.86-0.25-2.706-0.771l-63.727-39.377c-2.422-1.497-3.173-4.674-1.677-7.096 1.498-2.425 4.675-3.172 7.097-1.677l63.728 39.379c2.422 1.495 3.174 4.672 1.677 7.094-0.975 1.579-2.665 2.448-4.392 2.448z' fill='%233A232C'/%3E%3Cline x1='87.218' x2='23.492' y1='115.83' y2='155.2' fill='%238CD2CA'/%3E%3Cpath d='m23.497 160.36c-1.728 0-3.416-0.869-4.39-2.447-1.498-2.422-0.747-5.599 1.675-7.094l63.728-39.379c2.424-1.498 5.6-0.745 7.096 1.677 1.498 2.422 0.745 5.599-1.676 7.096l-63.729 39.376c-0.844 0.521-1.781 0.771-2.704 0.771z' fill='%233A232C'/%3E%3Cpath d='m87.213 120.98c-0.941 0-1.893-0.257-2.749-0.798l-63.727-40.268c-2.406-1.521-3.125-4.704-1.604-7.111 1.521-2.406 4.705-3.126 7.113-1.604l63.728 40.265c2.407 1.521 3.125 4.705 1.605 7.112-0.983 1.553-2.654 2.404-4.366 2.404z' fill='%233A232C'/%3E%3Cpath d='m87.224 120.98c-1.71 0-3.382-0.848-4.364-2.403-1.521-2.407-0.803-5.592 1.604-7.112l63.729-40.265c2.407-1.521 5.589-0.803 7.112 1.604 1.521 2.407 0.803 5.591-1.604 7.111l-63.729 40.268c-0.853 0.54-1.806 0.797-2.748 0.797z' fill='%233A232C'/%3E%3Cpolygon points='45.792 89.651 45.792 11.732 128.64 11.732 128.64 89.654 87.218 115.83' fill='%23fff'/%3E%3Cpath d='m87.218 120.98c-0.955 0-1.913-0.267-2.754-0.798l-41.425-26.178c-1.495-0.944-2.401-2.588-2.401-4.357v-77.919c0-2.847 2.308-5.156 5.155-5.156h82.849c2.847 0 5.156 2.309 5.156 5.156v77.922c0 1.767-0.906 3.413-2.401 4.357l-41.422 26.175c-0.843 0.531-1.799 0.798-2.757 0.798zm-36.27-34.173l36.27 22.918 36.268-22.918v-69.924h-72.538v69.924z' fill='%233A232C'/%3E%3Cline x1='62.66' x2='111.78' y1='32.248' y2='32.248' fill='%23fff'/%3E%3Cpath d='m111.78 37.403h-49.115c-2.847 0-5.156-2.308-5.156-5.155s2.309-5.156 5.156-5.156h49.115c2.847 0 5.155 2.309 5.155 5.156s-2.308 5.155-5.155 5.155z' fill='%233A232C'/%3E%3Cline x1='62.66' x2='111.78' y1='53.592' y2='53.592' fill='%23fff'/%3E%3Cpath d='m111.78 58.748h-49.115c-2.847 0-5.156-2.309-5.156-5.156s2.309-5.155 5.156-5.155h49.115c2.847 0 5.155 2.309 5.155 5.155 1e-3 2.847-2.308 5.156-5.155 5.156z' fill='%233A232C'/%3E%3Cline x1='62.66' x2='111.78' y1='74.937' y2='74.937' fill='%23fff'/%3E%3Cpath d='m111.78 80.092h-49.115c-2.847 0-5.156-2.309-5.156-5.155s2.309-5.155 5.156-5.155h49.115c2.847 0 5.155 2.309 5.155 5.155s-2.308 5.155-5.155 5.155z' fill='%233A232C'/%3E%3Cpath d='m280.4 57.33c-6 0-7.215-9.093-7.215-9.093-0.714-4.731 1.454-10.071 7.137-10.071 5.71 0 7.877 5.339 7.163 10.071-1e-3 0-1.086 9.093-7.085 9.093zm0 6.794l7.19-4.812c6.317 0 11.947 6.159 11.947 11.976v6.582s-9.646 2.986-19.137 2.986c-9.648 0-19.138-2.986-19.138-2.986v-6.582c0-5.948 5.128-11.843 11.817-11.843l7.321 4.679z' fill='%233A232C'/%3E%3Crect x='399.44' y='10.898' width='108.41' height='112.6' fill='none' stroke='%23BFBFBF' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='8'/%3E%3Crect x='413.27' y='24.729' width='108.41' height='112.6' fill='%23fff' stroke='%23BFBFBF' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='8'/%3E%3Crect x='427.48' y='39.328' width='108.41' height='112.6' fill='%23fff' stroke='%233A232C' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='8'/%3E%3Cpath d='m483.6 65.858l7.971-7.972 27.863 27.815-8.02 7.974c-4.599-2.979-10.863-2.497-14.938 1.577l-3.284 3.286c-4.029 4.073-4.556 10.293-1.534 14.936l-8.016 7.975-10.557-10.559-12.267 12.222c-1.84 1.842-14.807 11.873-16.646 10.032-1.84-1.839 8.146-14.85 9.987-16.689l12.221-12.222-10.557-10.602 8.017-7.972c4.6 3.021 10.865 2.494 14.895-1.579l3.284-3.283c4.077-4.032 4.602-10.295 1.581-14.939z' fill='%233A232C'/%3E%3C/svg%3E"); +} -[data-type="standard"] .mailpoet_thumbnail - background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='170.08px' height='170.08px' enable-background='new 0 0 170.079 170.079' version='1.1' viewBox='0 0 170.079 170.079' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='217.59 74.092 280.22 23.46 342.85 74.092' fill='%238CD2CA'/%3E%3Cpath d='m217.59 79.159c-1.477 0-2.942-0.644-3.944-1.88-1.759-2.178-1.42-5.366 0.755-7.128l62.63-50.63c1.858-1.503 4.512-1.503 6.37 0l62.627 50.63c2.178 1.762 2.514 4.95 0.755 7.128-1.759 2.174-4.948 2.513-7.125 0.754l-59.443-48.057-59.444 48.057c-0.938 0.757-2.063 1.126-3.181 1.126z' fill='%233A232C'/%3E%3Crect x='217.59' y='74.706' width='125.26' height='79.142' display='none' fill='%238CD2CA'/%3E%3Cpath d='m342.85 158.91h-125.26c-2.798 0-5.067-2.269-5.067-5.066v-79.142c0-2.798 2.269-5.066 5.067-5.066h125.26c2.798 0 5.066 2.269 5.066 5.066v79.142c1e-3 2.797-2.267 5.066-5.065 5.066zm-120.19-10.133h115.12v-69.009h-115.12v69.009z' fill='%233A232C'/%3E%3Cline x1='280.22' x2='342.85' y1='114.28' y2='152.97' fill='%238CD2CA'/%3E%3Cpath d='m342.84 158.04c-0.908 0-1.828-0.243-2.657-0.757l-62.629-38.698c-2.38-1.469-3.117-4.591-1.648-6.971 1.472-2.383 4.594-3.117 6.974-1.648l62.629 38.698c2.38 1.472 3.117 4.591 1.646 6.974-0.958 1.548-2.616 2.402-4.315 2.402z' fill='%233A232C'/%3E%3Cline x1='280.22' x2='217.59' y1='114.28' y2='152.97' fill='%238CD2CA'/%3E%3Cpath d='m217.59 158.04c-1.697 0-3.357-0.854-4.315-2.402-1.472-2.383-0.732-5.502 1.648-6.974l62.628-38.698c2.382-1.472 5.504-0.731 6.974 1.648 1.472 2.38 0.732 5.502-1.648 6.971l-62.628 38.698c-0.831 0.513-1.751 0.757-2.659 0.757z' fill='%233A232C'/%3E%3Cpath d='m280.21 119.34c-0.925 0-1.86-0.253-2.702-0.784l-62.627-39.571c-2.365-1.494-3.07-4.624-1.576-6.988 1.494-2.365 4.624-3.073 6.989-1.576l62.63 39.57c2.365 1.494 3.07 4.624 1.576 6.989-0.965 1.526-2.607 2.36-4.29 2.36z' fill='%233A232C'/%3E%3Cpath d='m280.22 119.34c-1.683 0-3.325-0.834-4.29-2.36-1.494-2.365-0.789-5.495 1.576-6.989l62.63-39.57c2.364-1.494 5.494-0.789 6.991 1.576 1.494 2.364 0.786 5.494-1.579 6.988l-62.627 39.571c-0.841 0.531-1.777 0.784-2.701 0.784z' fill='%233A232C'/%3E%3Cpolygon points='239.51 88.552 239.51 11.976 320.93 11.976 320.93 88.555 280.22 114.28' fill='%23fff'/%3E%3Cpath d='m280.22 119.34c-0.938 0-1.88-0.26-2.707-0.784l-40.711-25.725c-1.47-0.928-2.36-2.543-2.36-4.282v-76.576c0-2.798 2.269-5.066 5.067-5.066h81.422c2.798 0 5.066 2.269 5.066 5.066v76.579c0 1.736-0.891 3.354-2.36 4.282l-40.708 25.722c-0.826 0.524-1.766 0.784-2.709 0.784zm-35.645-33.582l35.645 22.523 35.645-22.523v-68.718h-71.289v68.718z' fill='%233A232C'/%3E%3Cpolyline points='23.49 74.937 87.218 23.417 150.94 74.937' fill='%238CD2CA'/%3E%3Cpath d='m23.493 80.092c-1.503 0-2.993-0.654-4.011-1.913-1.79-2.215-1.446-5.46 0.768-7.252l63.729-51.519c1.891-1.529 4.592-1.529 6.482 0l63.728 51.519c2.213 1.792 2.558 5.037 0.768 7.252-1.791 2.213-5.035 2.558-7.25 0.768l-60.487-48.9-60.486 48.9c-0.957 0.77-2.102 1.145-3.241 1.145z' fill='%233A232C'/%3E%3Crect x='23.492' y='75.561' width='127.46' height='80.532' display='none' fill='%238CD2CA'/%3E%3Cpath d='m150.95 161.25h-127.46c-2.847 0-5.156-2.308-5.156-5.155v-80.533c0-2.847 2.309-5.155 5.156-5.155h127.46c2.848 0 5.156 2.309 5.156 5.155v80.532c0 2.848-2.309 5.156-5.157 5.156zm-122.3-10.311h117.14v-70.221h-117.14v70.221z' fill='%233A232C'/%3E%3Cline x1='87.218' x2='150.95' y1='115.83' y2='155.2' fill='%238CD2CA'/%3E%3Cpath d='m150.94 160.36c-0.926 0-1.86-0.25-2.706-0.771l-63.727-39.377c-2.422-1.497-3.173-4.674-1.677-7.096 1.498-2.425 4.675-3.172 7.097-1.677l63.728 39.379c2.422 1.495 3.174 4.672 1.677 7.094-0.975 1.579-2.665 2.448-4.392 2.448z' fill='%233A232C'/%3E%3Cline x1='87.218' x2='23.492' y1='115.83' y2='155.2' fill='%238CD2CA'/%3E%3Cpath d='m23.497 160.36c-1.728 0-3.416-0.869-4.39-2.447-1.498-2.422-0.747-5.599 1.675-7.094l63.728-39.379c2.424-1.498 5.6-0.745 7.096 1.677 1.498 2.422 0.745 5.599-1.676 7.096l-63.729 39.376c-0.844 0.521-1.781 0.771-2.704 0.771z' fill='%233A232C'/%3E%3Cpath d='m87.213 120.98c-0.941 0-1.893-0.257-2.749-0.798l-63.727-40.268c-2.406-1.521-3.125-4.704-1.604-7.111 1.521-2.406 4.705-3.126 7.113-1.604l63.728 40.265c2.407 1.521 3.125 4.705 1.605 7.112-0.983 1.553-2.654 2.404-4.366 2.404z' fill='%233A232C'/%3E%3Cpath d='m87.224 120.98c-1.71 0-3.382-0.848-4.364-2.403-1.521-2.407-0.803-5.592 1.604-7.112l63.729-40.265c2.407-1.521 5.589-0.803 7.112 1.604 1.521 2.407 0.803 5.591-1.604 7.111l-63.729 40.268c-0.853 0.54-1.806 0.797-2.748 0.797z' fill='%233A232C'/%3E%3Cpolygon points='45.792 89.651 45.792 11.732 128.64 11.732 128.64 89.654 87.218 115.83' fill='%23fff'/%3E%3Cpath d='m87.218 120.98c-0.955 0-1.913-0.267-2.754-0.798l-41.425-26.178c-1.495-0.944-2.401-2.588-2.401-4.357v-77.919c0-2.847 2.308-5.156 5.155-5.156h82.849c2.847 0 5.156 2.309 5.156 5.156v77.922c0 1.767-0.906 3.413-2.401 4.357l-41.422 26.175c-0.843 0.531-1.799 0.798-2.757 0.798zm-36.27-34.173l36.27 22.918 36.268-22.918v-69.924h-72.538v69.924z' fill='%233A232C'/%3E%3Cline x1='62.66' x2='111.78' y1='32.248' y2='32.248' fill='%23fff'/%3E%3Cpath d='m111.78 37.403h-49.115c-2.847 0-5.156-2.308-5.156-5.155s2.309-5.156 5.156-5.156h49.115c2.847 0 5.155 2.309 5.155 5.156s-2.308 5.155-5.155 5.155z' fill='%233A232C'/%3E%3Cline x1='62.66' x2='111.78' y1='53.592' y2='53.592' fill='%23fff'/%3E%3Cpath d='m111.78 58.748h-49.115c-2.847 0-5.156-2.309-5.156-5.156s2.309-5.155 5.156-5.155h49.115c2.847 0 5.155 2.309 5.155 5.155 1e-3 2.847-2.308 5.156-5.155 5.156z' fill='%233A232C'/%3E%3Cline x1='62.66' x2='111.78' y1='74.937' y2='74.937' fill='%23fff'/%3E%3Cpath d='m111.78 80.092h-49.115c-2.847 0-5.156-2.309-5.156-5.155s2.309-5.155 5.156-5.155h49.115c2.847 0 5.155 2.309 5.155 5.155s-2.308 5.155-5.155 5.155z' fill='%233A232C'/%3E%3Cpath d='m280.4 57.33c-6 0-7.215-9.093-7.215-9.093-0.714-4.731 1.454-10.071 7.137-10.071 5.71 0 7.877 5.339 7.163 10.071-1e-3 0-1.086 9.093-7.085 9.093zm0 6.794l7.19-4.812c6.317 0 11.947 6.159 11.947 11.976v6.582s-9.646 2.986-19.137 2.986c-9.648 0-19.138-2.986-19.138-2.986v-6.582c0-5.948 5.128-11.843 11.817-11.843l7.321 4.679z' fill='%233A232C'/%3E%3Crect x='399.44' y='10.898' width='108.41' height='112.6' fill='none' stroke='%23BFBFBF' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='8'/%3E%3Crect x='413.27' y='24.729' width='108.41' height='112.6' fill='%23fff' stroke='%23BFBFBF' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='8'/%3E%3Crect x='427.48' y='39.328' width='108.41' height='112.6' fill='%23fff' stroke='%233A232C' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='8'/%3E%3Cpath d='m483.6 65.858l7.971-7.972 27.863 27.815-8.02 7.974c-4.599-2.979-10.863-2.497-14.938 1.577l-3.284 3.286c-4.029 4.073-4.556 10.293-1.534 14.936l-8.016 7.975-10.557-10.559-12.267 12.222c-1.84 1.842-14.807 11.873-16.646 10.032-1.84-1.839 8.146-14.85 9.987-16.689l12.221-12.222-10.557-10.602 8.017-7.972c4.6 3.021 10.865 2.494 14.895-1.579l3.284-3.283c4.077-4.032 4.602-10.295 1.581-14.939z' fill='%233A232C'/%3E%3C/svg%3E") +[data-type*="woocommerce"] .mailpoet_thumbnail { + background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUwMCIgaGVpZ2h0PSIxNDk0IiB2aWV3Qm94PSIwIDAgMjU2IDE1MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+PHBhdGggZD0iTTIzLjc1OSAwaDIwOC4zNzhDMjQ1LjMyNSAwIDI1NiAxMC42NzUgMjU2IDIzLjg2M3Y3OS41NDFjMCAxMy4xODgtMTAuNjc1IDIzLjg2My0yMy44NjMgMjMuODYzSDE1Ny40MWwxMC4yNTcgMjUuMTE4LTQ1LjEwOS0yNS4xMThIMjMuODYzYy0xMy4xODcgMC0yMy44NjItMTAuNjc1LTIzLjg2Mi0yMy44NjNWMjMuODYzQy0uMTA0IDEwLjc4IDEwLjU3IDAgMjMuNzU5IDB6IiBmaWxsPSIjOUI1QzhGIi8+PHBhdGggZD0iTTE0LjU3OCAyMS43NWMxLjQ1Ny0xLjk3OCAzLjY0Mi0zLjAxOCA2LjU1Ni0zLjIyNiA1LjMwOC0uNDE3IDguMzI2IDIuMDggOS4wNTQgNy40OTIgMy4yMjYgMjEuNzUgNi43NjQgNDAuMTcgMTAuNTEgNTUuMjU5bDIyLjc5LTQzLjM5NWMyLjA4Mi0zLjk1NSA0LjY4NC02LjAzNiA3LjgwNi02LjI0NCA0LjU3OS0uMzEyIDcuMzg4IDIuNjAxIDguNTMzIDguNzQxIDIuNjAyIDEzLjg0IDUuOTMyIDI1LjYgOS44ODYgMzUuNTkgMi43MDYtMjYuNDMyIDcuMjg1LTQ1LjQ3NiAxMy43MzctNTcuMjM1IDEuNTYtMi45MTQgMy44NS00LjM3MSA2Ljg2OC00LjU4IDIuMzk0LS4yMDcgNC41NzkuNTIxIDYuNTU2IDIuMDgyIDEuOTc3IDEuNTYxIDMuMDE4IDMuNTM4IDMuMjI2IDUuOTMyLjEwNCAxLjg3My0uMjA4IDMuNDM0LTEuMDQgNC45OTUtNC4wNTkgNy40OTMtNy4zOSAyMC4wODUtMTAuMDk1IDM3LjU2Ny0yLjYwMSAxNi45NjMtMy41MzggMzAuMTgtMi45MTQgMzkuNjUuMjA5IDIuNi0uMjA4IDQuODktMS4yNDggNi44NjgtMS4yNSAyLjI4OS0zLjEyMiAzLjUzOC01LjUxNiAzLjc0Ni0yLjcwNi4yMDgtNS41MTUtMS4wNC04LjIyMS0zLjg1LTkuNjc4LTkuODg3LTE3LjM3OS0yNC42NjQtMjIuOTk4LTQ0LjMzMi02Ljc2NSAxMy4zMi0xMS43NiAyMy4zMS0xNC45ODYgMjkuOTctNi4xNCAxMS43Ni0xMS4zNDMgMTcuNzk2LTE1LjcxNCAxOC4xMDgtMi44MS4yMDgtNS4yMDMtMi4xODYtNy4yODQtNy4xOC01LjMwNy0xMy42MzMtMTEuMDMxLTM5Ljk2Mi0xNy4xNy03OC45ODYtLjQxNy0yLjcwNi4yMDctNS4xIDEuNjY0LTYuOTcyem0yMjMuNjM2IDE2LjMzOGMtMy43NDYtNi41NTYtOS4yNjItMTAuNTEtMTYuNjUtMTIuMDcyLTEuOTc4LS40MTYtMy44NS0uNjI0LTUuNjItLjYyNC05Ljk5IDAtMTguMTA3IDUuMjAzLTI0LjQ1NSAxNS42MS01LjQxMiA4Ljg0NS04LjExNyAxOC42MjctOC4xMTcgMjkuMzQ2IDAgOC4wMTMgMS42NjUgMTQuODgxIDQuOTk1IDIwLjYwNSAzLjc0NiA2LjU1NiA5LjI2MiAxMC41MSAxNi42NSAxMi4wNzEgMS45NzcuNDE3IDMuODUuNjI1IDUuNjIuNjI1IDEwLjA5NCAwIDE4LjIxMS01LjIwMyAyNC40NTUtMTUuNjEgNS40MTEtOC45NSA4LjExNy0xOC43MzIgOC4xMTctMjkuNDUuMTA0LTguMTE3LTEuNjY1LTE0Ljg4Mi00Ljk5NS0yMC41MDF6bS0xMy4xMTIgMjguODI2Yy0xLjQ1NyA2Ljg2OC00LjA1OSAxMS45NjctNy45MSAxNS40MDEtMy4wMTcgMi43MDYtNS44MjcgMy44NS04LjQyOCAzLjMzLTIuNDk4LS41Mi00LjU4LTIuNzA1LTYuMTQtNi43NjQtMS4yNS0zLjIyNi0xLjg3My02LjQ1Mi0xLjg3My05LjQ3IDAtMi42MDEuMjA4LTUuMjAzLjcyOC03LjU5Ni45MzctNC4yNjcgMi43MDYtOC40MyA1LjUxNS0xMi4zODQgMy40MzUtNS4xIDcuMDc3LTcuMTggMTAuODIzLTYuNDUyIDIuNDk4LjUyIDQuNTggMi43MDYgNi4xNCA2Ljc2NCAxLjI0OSAzLjIyNiAxLjg3MyA2LjQ1MiAxLjg3MyA5LjQ3IDAgMi43MDYtLjIwOCA1LjMwNy0uNzI4IDcuN3ptLTUyLjAzMy0yOC44MjZjLTMuNzQ2LTYuNTU2LTkuMzY2LTEwLjUxLTE2LjY1LTEyLjA3Mi0xLjk3Ny0uNDE2LTMuODUtLjYyNC01LjYyLS42MjQtOS45OSAwLTE4LjEwNyA1LjIwMy0yNC40NTUgMTUuNjEtNS40MTEgOC44NDUtOC4xMTcgMTguNjI3LTguMTE3IDI5LjM0NiAwIDguMDEzIDEuNjY1IDE0Ljg4MSA0Ljk5NSAyMC42MDUgMy43NDYgNi41NTYgOS4yNjIgMTAuNTEgMTYuNjUgMTIuMDcxIDEuOTc4LjQxNyAzLjg1LjYyNSA1LjYyLjYyNSAxMC4wOTQgMCAxOC4yMTEtNS4yMDMgMjQuNDU1LTE1LjYxIDUuNDEyLTguOTUgOC4xMTctMTguNzMyIDguMTE3LTI5LjQ1IDAtOC4xMTctMS42NjUtMTQuODgyLTQuOTk1LTIwLjUwMXptLTEzLjIxNiAyOC44MjZjLTEuNDU3IDYuODY4LTQuMDU5IDExLjk2Ny03LjkwOSAxNS40MDEtMy4wMTggMi43MDYtNS44MjggMy44NS04LjQzIDMuMzMtMi40OTctLjUyLTQuNTc4LTIuNzA1LTYuMTQtNi43NjQtMS4yNDgtMy4yMjYtMS44NzItNi40NTItMS44NzItOS40NyAwLTIuNjAxLjIwOC01LjIwMy43MjgtNy41OTYuOTM3LTQuMjY3IDIuNzA2LTguNDMgNS41MTYtMTIuMzg0IDMuNDM0LTUuMSA3LjA3Ni03LjE4IDEwLjgyMi02LjQ1MiAyLjQ5OC41MiA0LjU4IDIuNzA2IDYuMTQgNi43NjQgMS4yNSAzLjIyNiAxLjg3MyA2LjQ1MiAxLjg3MyA5LjQ3LjEwNSAyLjcwNi0uMjA4IDUuMzA3LS43MjggNy43eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg=='); +} -[data-type*="woocommerce"] .mailpoet_thumbnail - background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUwMCIgaGVpZ2h0PSIxNDk0IiB2aWV3Qm94PSIwIDAgMjU2IDE1MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+PHBhdGggZD0iTTIzLjc1OSAwaDIwOC4zNzhDMjQ1LjMyNSAwIDI1NiAxMC42NzUgMjU2IDIzLjg2M3Y3OS41NDFjMCAxMy4xODgtMTAuNjc1IDIzLjg2My0yMy44NjMgMjMuODYzSDE1Ny40MWwxMC4yNTcgMjUuMTE4LTQ1LjEwOS0yNS4xMThIMjMuODYzYy0xMy4xODcgMC0yMy44NjItMTAuNjc1LTIzLjg2Mi0yMy44NjNWMjMuODYzQy0uMTA0IDEwLjc4IDEwLjU3IDAgMjMuNzU5IDB6IiBmaWxsPSIjOUI1QzhGIi8+PHBhdGggZD0iTTE0LjU3OCAyMS43NWMxLjQ1Ny0xLjk3OCAzLjY0Mi0zLjAxOCA2LjU1Ni0zLjIyNiA1LjMwOC0uNDE3IDguMzI2IDIuMDggOS4wNTQgNy40OTIgMy4yMjYgMjEuNzUgNi43NjQgNDAuMTcgMTAuNTEgNTUuMjU5bDIyLjc5LTQzLjM5NWMyLjA4Mi0zLjk1NSA0LjY4NC02LjAzNiA3LjgwNi02LjI0NCA0LjU3OS0uMzEyIDcuMzg4IDIuNjAxIDguNTMzIDguNzQxIDIuNjAyIDEzLjg0IDUuOTMyIDI1LjYgOS44ODYgMzUuNTkgMi43MDYtMjYuNDMyIDcuMjg1LTQ1LjQ3NiAxMy43MzctNTcuMjM1IDEuNTYtMi45MTQgMy44NS00LjM3MSA2Ljg2OC00LjU4IDIuMzk0LS4yMDcgNC41NzkuNTIxIDYuNTU2IDIuMDgyIDEuOTc3IDEuNTYxIDMuMDE4IDMuNTM4IDMuMjI2IDUuOTMyLjEwNCAxLjg3My0uMjA4IDMuNDM0LTEuMDQgNC45OTUtNC4wNTkgNy40OTMtNy4zOSAyMC4wODUtMTAuMDk1IDM3LjU2Ny0yLjYwMSAxNi45NjMtMy41MzggMzAuMTgtMi45MTQgMzkuNjUuMjA5IDIuNi0uMjA4IDQuODktMS4yNDggNi44NjgtMS4yNSAyLjI4OS0zLjEyMiAzLjUzOC01LjUxNiAzLjc0Ni0yLjcwNi4yMDgtNS41MTUtMS4wNC04LjIyMS0zLjg1LTkuNjc4LTkuODg3LTE3LjM3OS0yNC42NjQtMjIuOTk4LTQ0LjMzMi02Ljc2NSAxMy4zMi0xMS43NiAyMy4zMS0xNC45ODYgMjkuOTctNi4xNCAxMS43Ni0xMS4zNDMgMTcuNzk2LTE1LjcxNCAxOC4xMDgtMi44MS4yMDgtNS4yMDMtMi4xODYtNy4yODQtNy4xOC01LjMwNy0xMy42MzMtMTEuMDMxLTM5Ljk2Mi0xNy4xNy03OC45ODYtLjQxNy0yLjcwNi4yMDctNS4xIDEuNjY0LTYuOTcyem0yMjMuNjM2IDE2LjMzOGMtMy43NDYtNi41NTYtOS4yNjItMTAuNTEtMTYuNjUtMTIuMDcyLTEuOTc4LS40MTYtMy44NS0uNjI0LTUuNjItLjYyNC05Ljk5IDAtMTguMTA3IDUuMjAzLTI0LjQ1NSAxNS42MS01LjQxMiA4Ljg0NS04LjExNyAxOC42MjctOC4xMTcgMjkuMzQ2IDAgOC4wMTMgMS42NjUgMTQuODgxIDQuOTk1IDIwLjYwNSAzLjc0NiA2LjU1NiA5LjI2MiAxMC41MSAxNi42NSAxMi4wNzEgMS45NzcuNDE3IDMuODUuNjI1IDUuNjIuNjI1IDEwLjA5NCAwIDE4LjIxMS01LjIwMyAyNC40NTUtMTUuNjEgNS40MTEtOC45NSA4LjExNy0xOC43MzIgOC4xMTctMjkuNDUuMTA0LTguMTE3LTEuNjY1LTE0Ljg4Mi00Ljk5NS0yMC41MDF6bS0xMy4xMTIgMjguODI2Yy0xLjQ1NyA2Ljg2OC00LjA1OSAxMS45NjctNy45MSAxNS40MDEtMy4wMTcgMi43MDYtNS44MjcgMy44NS04LjQyOCAzLjMzLTIuNDk4LS41Mi00LjU4LTIuNzA1LTYuMTQtNi43NjQtMS4yNS0zLjIyNi0xLjg3My02LjQ1Mi0xLjg3My05LjQ3IDAtMi42MDEuMjA4LTUuMjAzLjcyOC03LjU5Ni45MzctNC4yNjcgMi43MDYtOC40MyA1LjUxNS0xMi4zODQgMy40MzUtNS4xIDcuMDc3LTcuMTggMTAuODIzLTYuNDUyIDIuNDk4LjUyIDQuNTggMi43MDYgNi4xNCA2Ljc2NCAxLjI0OSAzLjIyNiAxLjg3MyA2LjQ1MiAxLjg3MyA5LjQ3IDAgMi43MDYtLjIwOCA1LjMwNy0uNzI4IDcuN3ptLTUyLjAzMy0yOC44MjZjLTMuNzQ2LTYuNTU2LTkuMzY2LTEwLjUxLTE2LjY1LTEyLjA3Mi0xLjk3Ny0uNDE2LTMuODUtLjYyNC01LjYyLS42MjQtOS45OSAwLTE4LjEwNyA1LjIwMy0yNC40NTUgMTUuNjEtNS40MTEgOC44NDUtOC4xMTcgMTguNjI3LTguMTE3IDI5LjM0NiAwIDguMDEzIDEuNjY1IDE0Ljg4MSA0Ljk5NSAyMC42MDUgMy43NDYgNi41NTYgOS4yNjIgMTAuNTEgMTYuNjUgMTIuMDcxIDEuOTc4LjQxNyAzLjg1LjYyNSA1LjYyLjYyNSAxMC4wOTQgMCAxOC4yMTEtNS4yMDMgMjQuNDU1LTE1LjYxIDUuNDEyLTguOTUgOC4xMTctMTguNzMyIDguMTE3LTI5LjQ1IDAtOC4xMTctMS42NjUtMTQuODgyLTQuOTk1LTIwLjUwMXptLTEzLjIxNiAyOC44MjZjLTEuNDU3IDYuODY4LTQuMDU5IDExLjk2Ny03LjkwOSAxNS40MDEtMy4wMTggMi43MDYtNS44MjggMy44NS04LjQzIDMuMzMtMi40OTctLjUyLTQuNTc4LTIuNzA1LTYuMTQtNi43NjQtMS4yNDgtMy4yMjYtMS44NzItNi40NTItMS44NzItOS40NyAwLTIuNjAxLjIwOC01LjIwMy43MjgtNy41OTYuOTM3LTQuMjY3IDIuNzA2LTguNDMgNS41MTYtMTIuMzg0IDMuNDM0LTUuMSA3LjA3Ni03LjE4IDEwLjgyMi02LjQ1MiAyLjQ5OC41MiA0LjU4IDIuNzA2IDYuMTQgNi43NjQgMS4yNSAzLjIyNiAxLjg3MyA2LjQ1MiAxLjg3MyA5LjQ3LjEwNSAyLjcwNi0uMjA4IDUuMzA3LS43MjggNy43eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==') +.mailpoet_boxes { + .title_and_badge { + display: flex; + flex-direction: row; + justify-content: space-between; -.mailpoet_boxes - .title_and_badge - display: flex - flex-direction: row - justify-content: space-between - - .mailpoet_badge - margin: 0 0 0 10px - padding: 0 6px 0 6px - max-height: 21px - white-space: nowrap + .mailpoet_badge { + margin: 0 0 0 10px; + padding: 0 6px 0 6px; + max-height: 21px; + white-space: nowrap; + } + } +} diff --git a/assets/css/src/components/_breadcrumb.scss b/assets/css/src/components/_breadcrumb.scss new file mode 100644 index 0000000000..1c787def85 --- /dev/null +++ b/assets/css/src/components/_breadcrumb.scss @@ -0,0 +1,18 @@ +.mailpoet_breadcrumb { + font-size: 0.9em; + text-transform: uppercase; + color: #444; +} + +.mailpoet_breadcrumb .mailpoet_current { + font-weight: bold; +} + +.mailpoet_breadcrumb a { + text-decoration: none; + color: #444; +} + +.mailpoet_breadcrumb a:hover { + color: darken(#444, 50%); +} diff --git a/assets/css/src/components/_common.scss b/assets/css/src/components/_common.scss new file mode 100644 index 0000000000..0598fe7487 --- /dev/null +++ b/assets/css/src/components/_common.scss @@ -0,0 +1,94 @@ + +.clearfix { + @include clearfix(); +} +a:focus { + outline: 0 none !important; +} +.mailpoet_success { + color: #090; +} + +.mailpoet_error { + color: #900; +} +.mailpoet_hidden { + display: none; +} +.mailpoet_spaced_block { + margin: 1em 0; +} + +.mailpoet_centered { + 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; +} + +@media screen and (max-width: 782px) { + .select2-container { + width: 100% !important; + } +} + + +$progress-border-radius: 5px; +$progress-background: #efefef; +$progress-foreground: #69b1e9; + +progress { + background-color: $progress-background; + height: 2em; + border: 0; + 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, +p.sender_email_address_warning.sender_email_address_warning a { + color: #990000; + text-align: left; + align-self: flex-start; +} + +p.sender_email_address_warning:first-child { + margin-top: 1em; +} diff --git a/assets/css/src/components/_discounts.scss b/assets/css/src/components/_discounts.scss new file mode 100644 index 0000000000..3b3a6cb255 --- /dev/null +++ b/assets/css/src/components/_discounts.scss @@ -0,0 +1,19 @@ +.mailpoet-discount-container { + margin: 15px; + padding: 20px; + background: white; + border: 1px solid #FF5301; + text-align: center; +} + +.mailpoet-discount-container h1 { + margin: 0; + line-height: 1.2em; + font-size: 2.8em; + font-weight: 400; +} + +.mailpoet-discount-container p { + line-height: 1.2em; + font-size: 1.2em; +} diff --git a/assets/css/src/components/_featureAnnouncement.scss b/assets/css/src/components/_featureAnnouncement.scss new file mode 100644 index 0000000000..793eb26e6e --- /dev/null +++ b/assets/css/src/components/_featureAnnouncement.scss @@ -0,0 +1,25 @@ +.mailpoet_feature_announcement { + float: right; +} + +.button.mailpoet_feature_announcement_button { + height: 28px; + padding: 0 5px 1px; + position: relative; +} + +.mailpoet_feature_announcement_icon { + line-height: 28px; +} + +.mailpoet_feature_announcement_dot::before { + content: ""; + display: block; + position: absolute; + top: -4px; + right: -4px; + height: 10px; + width: 10px; + background: #d54e21; + border-radius: 10px; +} diff --git a/assets/css/src/components/_form.scss b/assets/css/src/components/_form.scss new file mode 100644 index 0000000000..05d91d0d5f --- /dev/null +++ b/assets/css/src/components/_form.scss @@ -0,0 +1,7 @@ +.mailpoet_form { + margin: 0 0 20px 0; +} + +.mailpoet_form td { + vertical-align: top !important; +} diff --git a/assets/css/src/components/_formEditor.scss b/assets/css/src/components/_formEditor.scss new file mode 100644 index 0000000000..9b0b27d3eb --- /dev/null +++ b/assets/css/src/components/_formEditor.scss @@ -0,0 +1,665 @@ +@import '../../../../node_modules/codemirror/lib/codemirror'; +@import '../../../../node_modules/codemirror/theme/neo'; + +$icons: '../../img/form_editor_icons.png'; +$handle_icon: '../../img/handle.png'; + +#mailpoet_form_name { + font-size: 23px; +} + +#mailpoet_form_history { + display: none; +} + +#mailpoet_form_editor { + padding: 20px; + width: 300px; + border: 1px solid #ccc; + position: relative; + background-color: #fff; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.1); +} + +#mailpoet_form_editor:before, #mailpoet_form_editor:after { + + position: absolute; + width: 40%; + height: 10px; + content: ' '; + left: 12px; + bottom: 12px; + background: transparent; + -webkit-transform: skew(-5deg) rotate(-5deg); + -ms-transform: skew(-5deg) rotate(-5deg); + transform: skew(-5deg) rotate(-5deg); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); + z-index: -1; +} + +#mailpoet_form_editor:after { + left: auto; + right: 12px; + -webkit-transform: skew(5deg) rotate(5deg); + -ms-transform: skew(5deg) rotate(5deg); + transform: skew(5deg) rotate(5deg); +} + +/* Warnings in blocks*/ +.mailpoet_warning { + font-weight: bold; + color: #900; +} + +.block_placeholder { + font-weight: bold; + height: 0; + overflow: hidden; + line-height: 30px; + text-align: center; + border: 0 none; + width: 298px; + z-index: 9500; + margin: 0 auto; + text-indent: -9999px; +} + +.block_placeholder.active { + text-indent: 0; + /*border:1px dashed #dfdfdf;*/ + /*background-color:#f5f5f5;*/ + background-color: #4cb7e1; + display: block; + overflow: auto; + height: 30px; +} + +.block_placeholder.hover { + background-color: #0074a2; + border-color: #0074a2; + color: #fff; +} + +.mailpoet_form_block { + background-color: #fff; + height: 20px; + border: 0 none; +} + +.mailpoet_form_block.highlighted { + border: 1px solid #5897FB; + padding: 9px 17px; +} + +.mailpoet_form_block img { + max-width: 100%; +} + +/* Widget styles */ +.mailpoet_form_block p { + margin: 5px 0; + word-wrap: break-word; +} + +/* Widget: checkbox, radio */ +.mailpoet_radio, +.mailpoet_checkbox { + margin: -2px 5px 0 0; +} + +/* MailPoet Form wrapper */ +#mailpoet_form_wrapper { + position: relative; + margin: 20px 0 0 0; +} + +/* MailPoet Form container */ +#mailpoet_form_container { + width: 340px; + margin: 0; +} + +#mailpoet_form_editor.loading, #mailpoet_form_toolbar.loading { + + background: url(loading.gif) no-repeat center center #fcfcfc; +} + +#mailpoet_form_toolbar.loading { + border: 1px solid #dfdfdf; +} + +#mailpoet_form_toolbar.loading #mailpoet_toolbar_fields { + visibility: hidden; + z-index: 1; +} + +/* Tabs : content/images/styles/themes */ +#wysija-add-field { + float: none; +} + +#mailpoet_form_toolbar { + z-index: 999; + position: absolute; + width: 400px; +} + +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs { + border-bottom: 1px solid #dfdfdf; + line-height: 0; +} + +#mailpoet_form_toolbar .add_custom_field { + text-align: center; + padding: 15px 0 5px 0; +} + +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs li, #mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a { + + margin: 0; + height: 30px; + line-height: 30px; + padding: 0; + display: -moz-inline-box; + display: inline-block; + *display: inline; + *float: left; + outline: 0 none; +} + +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a { + outline: 0 none; + text-decoration: none; + color: #a6a6a6; +} + +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs li { + margin: 0 0 1px 0; +} + +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a { + font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif; + background-color: #F5F5F5; + background: linear-gradient(center top, #F9F9F9, #F5F5F5); + border: 1px solid #DFDFDF; + border-radius: 3px 3px 0 0; + box-shadow: 0 1px 0 #FFFFFF inset; + padding: 0 7px; +} + +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a:hover { + background-color: #eee; +} + +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a.selected { + color: #000; + border-bottom: 0 none; + background: #fcfcfc; + filter: none; + padding-bottom: 1px; +} + +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs .last a, + +.wysija_params { + display: none !important; +} + +#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs, #mailpoet_form_toolbar #mailpoet_toolbar_fields { + + position: relative; + z-index: 9998; + margin: 0; +} + +/* edit form name */ +#mailpoet_form_name_input { + vertical-align: bottom; +} + +/* wysija widgets */ +.mailpoet_form_widget { + width: 298px; + height: 25px; + line-height: 25px; + z-index: 9999 !important; +} + +.mailpoet_toolbar_section { + margin-bottom: 0; + background: none repeat scroll 0 0 #fff; + border: 1px solid #e5e5e5; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + min-width: 255px; + position: relative; + cursor: pointer; + overflow: hidden; + max-height: 1000px; + transition: max-height 0.5s ease-in-out; +} + +.mailpoet_toolbar_section > div { + padding: 10px 20px 20px 20px; + overflow: auto; + height: 100%; + min-width: 255px; +} + +.mailpoet_toolbar_section h3 { + margin: 10px; + position: relative; +} + +.mailpoet_toolbar_section.closed { + max-height: 38px; +} + +.mailpoet_toolbar_section .mailpoet_toggle { + position: absolute; + top: 0; + right: 0; + height: 38px; + width: 27px; +} + +.mailpoet_toolbar_section .mailpoet_toggle:focus { + outline: 0 none !important; + box-shadow: none !important; +} + +.mailpoet_toolbar_section .mailpoet_toggle:before { + right: 12px; + font: 400 20px / 1 dashicons; + speak: none; + display: inline-block; + padding: 8px 10px; + top: 0; + position: relative; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + content: '\f142'; +} + +.mailpoet_toolbar_section.closed .mailpoet_toggle:before { + content: '\f140'; +} + +#mailpoet_form_styles { + margin: 10px; + max-width: 318px; + width: 318px; + min-height: 300px; + resize: vertical; +} + +#mailpoet_form_toolbar a.mailpoet_form_field, +.mailpoet_form_widget { + height: 25px; + line-height: 25px; + background-color: #F5F5F5; + background: linear-gradient(center 0, #F9F9F9, #ececec); + border: 1px solid #DFDFDF; + border-radius: 3px; + box-shadow: 0 1px 0 #FFFFFF inset; + display: block; + font-size: 12px; + font-weight: bold; + padding: 0 7px; + cursor: move; + color: #222; + text-shadow: 0 1px 0 #FFFFFF; +} + +#mailpoet_form_toolbar a.mailpoet_form_field.disabled { + cursor: pointer; + color: #cccccc; + pointer-events: none; +} + +.mailpoet_form_field_edit { + position: absolute; + right: 27px; + bottom: 13px; +} + +.mailpoet_form_field_delete { + position: absolute; + right: 7px; + bottom: 13px; +} + +/* toolbar: fields */ +#mailpoet_toolbar_fields li { + padding: 0 0 10px 0; + position: relative; +} + +#mailpoet_toolbar_fields li.notice { + font-style: italic; + font-size: 11px; + margin: 0 !important; + border: 0 none !important; + background: none !important; +} + +/* blocks */ +.mailpoet_form_block { + position: relative; + margin: 0; + padding: 10px 18px 10px 18px; + display: inline-table; + display: block; + height: 1%; + margin: 0; + z-index: 98; +} + +.mailpoet_form_block.dragging { + z-index: 99000; + pointer-events: none; +} + +.mailpoet_form_block:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +.mailpoet_form_block.hover { + border: 1px dashed #bbb; + margin: 0 0 0 0; + padding: 9px 17px 9px 17px; +} + +.mailpoet_form_block.static { + /*padding:0; + margin:0;*/ + background-color: #999; +} + +/* controls*/ +.mailpoet_form_block .wysija_controls { + background-color: #dfdfdf; + background: linear-gradient(center 0, #eee, #bbb); + border-radius: 2px; + border: 1px solid #ccc; + position: absolute; + margin: 0; + padding: 0; + width: 298px; + height: 20px; + left: -1px; + right: 0; + top: -22px; +} + +.mailpoet_form_block .wysija_controls li { + float: left; + width: 20px; + height: 20px; +} + +.mailpoet_form_block .wysija_controls a { + cursor: pointer; + float: left; + font-size: 120%; + font-weight: bold; + height: 20px; + line-height: 20px; + text-align: center; + width: 20px; + color: #000; +} + +.mailpoet_form_block .wysija_controls a.remove { + margin: 0 0 0 1px; +} + +.mailpoet_form_block .handle_container, +.mailpoet_form_block .handle_container a { + float: none; + width: 40px !important; +} + +.mailpoet_form_block .handle_container { + left: 140px; + top: 0; + position: absolute; +} + +/* controls & icons */ +.wysija_controls a span, +.wysija_gallery .wysija_tools a span, +.wysija_image .wysija_tools a span, +.wysija_text .wysija_tools a span, #mailpoet_toolbar_fields a span { + + display: block; + height: 20px; + width: 20px; +} + +/* toolbar: full width button */ +/* color picker in control bars */ +.wysija_controls span input { + margin: 2px 0 0 0; + padding: 0; + color: transparent; +} + +/* left alignment button */ +.alignment-left span { + background: url($icons) no-repeat 0 0; +} + +.alignment-left.active span, +.alignment-left:hover span { + background: url($icons) no-repeat 0 -20px; +} + +/* center alignment button */ +.alignment-center span { + background: url($icons) no-repeat -20px 0; +} + +.alignment-center.active span, +.alignment-center:hover span { + background: url($icons) no-repeat -20px -20px; +} + +/* right alignment button */ +.alignment-right span { + background: url($icons) no-repeat -40px 0; +} + +.alignment-right.active span, +.alignment-right:hover span { + background: url($icons) no-repeat -40px -20px; +} + +/* linking */ +.add-link span { + background: url($icons) no-repeat -60px 0; +} + +.add-link.active span, +.add-link:hover span { + background: url($icons) no-repeat -60px -20px; +} + +.remove-link span { + background: url($icons) no-repeat -80px 0; +} + +.remove-link.active span, +.remove-link:hover span { + background: url($icons) no-repeat -80px -20px; +} + +/* block controls */ +.remove span, +.delete span { + background: url($icons) no-repeat -100px 0; +} + +.remove.active span, +.remove:hover span, +.delete.active span, +.delete:hover span { + background: url($icons) no-repeat -100px -20px; +} + +.handle span { + background: url($handle_icon) no-repeat; + cursor: move; + width: 40px !important; +} + +.duplicate span { + background: url($icons) no-repeat -140px 0; +} + +.duplicate.active span, +.duplicate:hover span { + background: url($icons) no-repeat -140px -20px; +} + +.settings span { + background: url($icons) no-repeat -160px 0; +} + +.settings.active span, +.settings:hover span { + background: url($icons) no-repeat -160px -20px; +} + +.icon-plus span { + background: url($icons) no-repeat -200px 0; +} + +.icon-plus.active span, +.icon-plus:hover span { + background: url($icons) no-repeat -200px -20px; +} + +.icon-minus span { + background: url($icons) no-repeat -220px 0; +} + +.icon-minus.active span, +.icon-minus:hover span { + background: url($icons) no-repeat -220px -20px; +} + +/* wysija options */ +.wysija_options { + display: none; +} + +/* wysija block settings */ +.wysija_settings { + position: absolute; + z-index: 1000; +} + +.wysija_settings a { + background-color: #F5F5F5; + background: linear-gradient(center 0, #F9F9F9, #ececec); + border: 1px solid #DFDFDF; + border-radius: 3px; + box-shadow: 0 1px 0 #FFFFFF inset; + font-size: 12px; + font-weight: normal; + cursor: pointer; + color: #222; + text-shadow: 0 1px 0 #FFFFFF; + text-decoration: none; + display: block; + padding: 5px 5px 3px 27px; +} + +.wysija_settings a span { + width: 20px; + height: 20px; + position: absolute; + top: 3px; + left: 5px; +} + +/* labels */ +.mailpoet_form_block label { + margin: 0 5px 0 0; + display: block; +} + +/* form settings: success message */ +#mailpoet_on_success textarea, #mailpoet_on_success select { + + width: 100%; +} + +#mailpoet_on_success textarea { + height: 50px; + min-height: 50px; + resize: vertical; +} + +/* make sure textareas within the form editor are not resizeable */ +.mailpoet_form_block textarea { + resize: none; +} + +/* remove click events from inputs within form editor */ +.mailpoet_form_block input, +.mailpoet_form_block textarea { + pointer-events: none; +} + +/* form export */ +#mailpoet_form_export textarea { + width: 340px; + height: 150px; + min-height: 150px; + resize: vertical; + font-size: 85%; + display: none; +} + +/** Styling for WP 3.8 and higher */ +.mailpoet_form_field_edit, +.mailpoet_form_field_delete { + text-decoration: none; +} + +.mailpoet_form_field_edit:hover .dashicons-admin-generic:before, +.mailpoet_form_field_delete:hover .dashicons-dismiss:before, +.settings:hover .dashicons-admin-generic:before { + color: #2ea2cc; +} + +.mailpoet_form_field_edit span, +.mailpoet_form_field_delete span { + background: none !important; + color: #999; +} + +.mailpoet_form_field_delete span:before { + font-size: 21px; +} + +/* Code Mirror */ +.CodeMirror { + border: 1px solid #eee; +} + +/* Settings */ +#mailpoet_form_segments.parsley-error + span .select2-selection { + border: 1px solid #b94a48; +} + +.mailpoet_form_field_settings_text { + width: 100%; + min-height: 100px; +} diff --git a/assets/css/src/components/_formValidation.scss b/assets/css/src/components/_formValidation.scss new file mode 100644 index 0000000000..26ab85f956 --- /dev/null +++ b/assets/css/src/components/_formValidation.scss @@ -0,0 +1,8 @@ +.parsley-errors-list { + margin-top: 8px; +} + +.parsley-required, +.parsley-custom-error-message { + color: #b94a48; +} diff --git a/assets/css/src/admin-global.styl b/assets/css/src/components/_globals.scss similarity index 82% rename from assets/css/src/admin-global.styl rename to assets/css/src/components/_globals.scss index 7a8762461e..eab0288fb0 100644 --- a/assets/css/src/admin-global.styl +++ b/assets/css/src/components/_globals.scss @@ -1,46 +1,22 @@ -@import 'nib' - -/* -Style for Members plugin -*/ - -.members-tab-title - .mailpoet-icon-logo - background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNTIuMDIgMTU2LjQiPjxwYXRoIGQ9Ik0zNy43MSw4OS4xYzMuNSwwLDUuOS0uOCw3LjItMi4zYTgsOCwwLDAsMCwyLTUuNFYzNS43bDE3LDQ1LjFhMTIuNjgsMTIuNjgsMCwwLDAsMy43LDUuNGMxLjYsMS4zLDQsMiw3LjIsMmExMi41NCwxMi41NCwwLDAsMCw1LjktMS40LDguNDEsOC40MSwwLDAsMCwzLjktNWwxOC4xLTUwVjgxYTguNTMsOC41MywwLDAsMCwyLjEsNi4xYzEuNCwxLjQsMy43LDIuMiw2LjksMi4yLDMuNSwwLDUuOS0uOCw3LjItMi4zYTgsOCwwLDAsMCwyLTUuNFY4LjdhNy40OCw3LjQ4LDAsMCwwLTMuMy02LjZjLTIuMS0xLjQtNS0yLjEtOC42LTIuMWExOS4zLDE5LjMsMCwwLDAtOS40LDIsMTEuNjMsMTEuNjMsMCwwLDAtNS4xLDYuOEw3NC45MSw2Ny4xLDU0LjQxLDguNGExMi40LDEyLjQsMCwwLDAtNC41LTYuMmMtMi4xLTEuNS01LTIuMi04LjgtMi4yYTE2LjUxLDE2LjUxLDAsMCwwLTguOSwyLjFjLTIuMywxLjUtMy41LDMuOS0zLjUsNy4yVjgwLjhjMCwyLjguNyw0LjgsMiw2LjJDMzIuMjEsODguNCwzNC40MSw4OS4xLDM3LjcxLDg5LjFaIiAvPjxwYXRoIGQ9Ik0xNDksMTE2LjZsLTIuNC0xLjlhNy40LDcuNCwwLDAsMC05LjQuMywxOS42NSwxOS42NSwwLDAsMS0xMi41LDQuNmgtMjEuNEEzNy4wOCwzNy4wOCwwLDAsMCw3NywxMzAuNWwtMS4xLDEuMi0xLjEtMS4xYTM3LjI1LDM3LjI1LDAsMCwwLTI2LjMtMTAuOUgyN2ExOS41OSwxOS41OSwwLDAsMS0xMi40LTQuNiw3LjI4LDcuMjgsMCwwLDAtOS40LS4zbC0yLjQsMS45QTcuNDMsNy40MywwLDAsMCwwLDEyMi4yYTcuMTQsNy4xNCwwLDAsMCwyLjQsNS43QTM3LjI4LDM3LjI4LDAsMCwwLDI3LDEzNy40aDIxLjZhMTkuNTksMTkuNTksMCwwLDEsMTguOSwxNC40di4yYy4xLjcsMS4yLDQuNCw4LjUsNC40czguNC0zLjcsOC41LTQuNHYtLjJhMTkuNTksMTkuNTksMCwwLDEsMTguOS0xNC40SDEyNWEzNy4yOCwzNy4yOCwwLDAsMCwyNC42LTkuNSw3LjQyLDcuNDIsMCwwLDAsMi40LTUuN0E3Ljg2LDcuODYsMCwwLDAsMTQ5LDExNi42WiIgLz48L3N2Zz4=') no-repeat center - background-size: contain - display: inline-block - height: 20px; - margin-right: 3px; - vertical-align: top - width: 20px; - - &:not([aria-selected="true"]) .mailpoet-icon-logo - // #0073aa generated via filter - filter: invert(24%) sepia(95%) saturate(1872%) hue-rotate(179deg) brightness(93%) contrast(101%) - - > a:hover .mailpoet-icon-logo - > a:active .mailpoet-icon-logo - // #00a0d2 generated via filter - filter: invert(49%) sepia(50%) saturate(3683%) hue-rotate(163deg) brightness(94%) contrast(101%) - - &[aria-selected="true"] a .mailpoet-icon-logo - // #555 generated via filter - filter: invert(33%) sepia(0%) saturate(7%) hue-rotate(205deg) brightness(94%) contrast(87%) - -#wpbody +#wpbody { padding-bottom: 20px; +} /* menu icon */ -#adminmenu #toplevel_page_mailpoet-newsletters .wp-menu-image +#adminmenu #toplevel_page_mailpoet-newsletters .wp-menu-image { background-size: 18px 18px; background-repeat: no-repeat; background-position: center; +} -#adminmenu #toplevel_page_mailpoet-newsletters.wp-not-current-submenu .wp-menu-image +#adminmenu #toplevel_page_mailpoet-newsletters.wp-not-current-submenu .wp-menu-image { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABcFJREFUeNrsWHtsU1UYP7e37/W9MDYYInSosI6XEBhjgxEEDBI0GNTEGFFgEkR5iEGFsChBghJgSwBh4RElGhN1iQy2MF5jjMfYg40NeQxhjiEra2nXrrfry98pt1hqW1hj+YuTfOm95/R8/Z1zvu/3/U4ZEqV9uX7jZH3akAKXy5UR6NPpEjdtWJe/vurUSVO0uROyssmq1fnTTabOPXhN4bs5oVC476/Wmx98tnJZ2HkCEr2tgRmCO8xm09JPVq2emT0pN+pEj8czjmGYrXhMDuqWwmbBZkea9yhAOhgT3OHz+VisMlcgEPSNNCkrexIBaAN257nQ+WhimDZWQGEbVp7ldDoHRxoH4CSpVJoJ8EwkF/8rIBybfsmyFZkTcyaHHec4BwWbFYvvmAB5vV5WpVKPk0pl/f8TzBNzyOKPlmeYzeYhTwwQ316y220ZoZ1yeUKiVqcb6/V62CcK6J7ZrH1/4SIDDeDgZrPZRuPj1Vj9xgzI7XaT5JR+L2o02pR/uSeHvDc/b7jl3r0+fFcPzBpPQF0UC59pxOf1vtzVZR3/gCMSE5P7pw4YDSINdN2GVccTUCXsz8CL1WpRz33r7VE0kP3vFssoxM5UP1ifj0gkkssqtXo/kiBugDpgJ2Gd/vPo6SGD9PpMpVKZlp4xnMx5480RAJlEx2QyGamtOd+4vXBrk1qtjg8grFSGdC8B6V2lO0B3wuN2jzcajQaFQiF6/oWhIylInhxvddz5+/CF+lqhWCyJDyCVSiXbt6foZE31uYt0B/xZ1dWlmDlr9rPTZswcZ+rszAo6ritqtaZSLBYr6XtcAEkkUvbc2aru1tabx0Ui8V3ahxJChqVnTIMtxXOqv4JKZc7a2vOnyw4dsCtVKnHcghor9QGUBjFRhh24GDg2p5ObBHuFPvurp1jceuP69WOX/7hEpPxOxo2HECuSyooTd+sQsYilQPrI6QbyoOlxNau1Wn+6+3qRYTEBksvlpLmpkVxqvngEP9waOg6Q9gv1dVUnjh6xxIOpQ+sRi0zzz9FoNKeRPfXBAUufcZw3rrdcrairqY4kNZgwfh8bkDso5UlCgqJbKBI56Hv12TOWlmtXypFJrgAoxBdpbKivaaivawxmi4dWxLJSHLs9opaKejwJCfuVShXrcvUkyWRyY8WJo7+2t7X5s6v63BnCObniBXmLdYPT0qY7OQ5lTXfl4IHinRizB4m1FnDXUfgYLWBZH+rcscNlpRHLCRMN0OzXXhf0SUqaAH08EGzcCg6qgkNP8HcoQ+dOmTrMbrdDJcpq62qrrWeqTj0YH/DMQPiZMxDj07E75HZ7+5GS34tbyNP2tMWpMajQ9HMQLPV+WgobQHyWJwVgaLpB6/V40vkEa2eKD5bT28EO2JT7qS5f9/nK5b+ZOu8aeQka6e5luXWrjbPbbOHogqSmDpBD5ioiZDLtk4HD+mzYtGWuw8GtCAhAZu/+n9fiIT+EbTmBgK3kBZkvDJl61FrN2aId205VVVbcMBo7zJAhJEGhIH2TkhPHjs9MW/Thx9m4CNBbiSiEHH18n97r844BjZBAUfYj/f6nXz4Fz3wdg1jz7wR4quCHfbsLSksOtE2dNkM/b37eEmPHnTzwDoPrdu9j6JvNhfq+ySk/AuVQAFP01gHdURTU02KJZBfU4rucw5ETvOLHLqosS9n9mn/mxs2FVMOsBvcvwKrUvJSIVAAZgBA+jgqkwGDuMMceXOc4+OoymTp343ntQ0vZ8O0WOerODBzHFP5vFCaMAwlEl0EkEvWjei0KGKfb7Wp3dDua6I+GCQkKsgPfO9btsB9auXSJ7ZG1LFJ7Z958FXT0FxzHLQQoTRgwVmilbeVlpWuKdm5z98Z3TPdv3CScKKTlGcNHeHEpzAlRDU7c79eXHirJ371ru7e3vtlYCa3hQh2VqjdHjhpjgLh/8E8HVMFxVPOv9hZ9Z43F7z8CDAAMFFaTyVAO5gAAAABJRU5ErkJggg=='); +} -#adminmenu #toplevel_page_mailpoet-newsletters.wp-has-current-submenu .wp-menu-image +#adminmenu #toplevel_page_mailpoet-newsletters.wp-has-current-submenu .wp-menu-image { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAa9JREFUeNrsWO2NgkAUnGeuAErgOuAq0A7YDs4OtIPLVWCsQK8CtQJKkA6kA+lg7s+a4Mp+HLtgLnESfoDsY3gz77FPwAKSGckD71GRzBAAkorkxVi/wVCQXLIfu4C1GcmrZX3hWjtz/JZbrquALCkAtnuyoYTgCKg895RDlZkNXFe65AognJyQS7bBZGIIuR5cPotQmVqu6AyRzD1Za8YmVHsImFnbjk3oxzj/dMjV9LxAckJ747zoyKY85NMTEpEWwNEi28pDfjRTm2++0lnqfqNqEWkmISQiRwCt8c37SiFXTNmbcixTyBVDyJWBo/badIREpHaU9OlZnbovS62I7MciZFZJ2+OT1uOdNiDuHd5cXgAw7+wct2ZPIvnRMXRjZkdEapLfOg4AnIa2gxde+L8gmesJtSK5nvjZiuRZHwsAEJIXYyisdbetLX3kVuKNZxQq9GGbTuYAFsa1d3A4ziSVQWTR83/AX7CEDhyDg57lN5FxriRzJAwWg+phgtHm3iTIWCguJHc3M8dURhHgkwd/TVGya5unntnDqh5CWUzMWSQnc5O2j9m+AsDvAIQNSWYrVntNAAAAAElFTkSuQmCC'); +} -#adminmenu #toplevel_page_mailpoet-newsletters a:hover .wp-menu-image +#adminmenu #toplevel_page_mailpoet-newsletters a:hover .wp-menu-image { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAa9JREFUeNrsWO2NgkAUnGeuAErgOuAq0A7YDs4OtIPLVWCsQK8CtQJKkA6kA+lg7s+a4Mp+HLtgLnESfoDsY3gz77FPwAKSGckD71GRzBAAkorkxVi/wVCQXLIfu4C1GcmrZX3hWjtz/JZbrquALCkAtnuyoYTgCKg895RDlZkNXFe65AognJyQS7bBZGIIuR5cPotQmVqu6AyRzD1Za8YmVHsImFnbjk3oxzj/dMjV9LxAckJ747zoyKY85NMTEpEWwNEi28pDfjRTm2++0lnqfqNqEWkmISQiRwCt8c37SiFXTNmbcixTyBVDyJWBo/badIREpHaU9OlZnbovS62I7MciZFZJ2+OT1uOdNiDuHd5cXgAw7+wct2ZPIvnRMXRjZkdEapLfOg4AnIa2gxde+L8gmesJtSK5nvjZiuRZHwsAEJIXYyisdbetLX3kVuKNZxQq9GGbTuYAFsa1d3A4ziSVQWTR83/AX7CEDhyDg57lN5FxriRzJAwWg+phgtHm3iTIWCguJHc3M8dURhHgkwd/TVGya5unntnDqh5CWUzMWSQnc5O2j9m+AsDvAIQNSWYrVntNAAAAAElFTkSuQmCC'); +} diff --git a/assets/css/src/components/_importExport.scss b/assets/css/src/components/_importExport.scss new file mode 100644 index 0000000000..feedef7334 --- /dev/null +++ b/assets/css/src/components/_importExport.scss @@ -0,0 +1,139 @@ +.mailpoet_hidden, .mailpoet_validation_error { + display: none; +} + +.form-table { + th { + width: 300px; + } +} + +#paste_input { + width: 100%; +} + +input[type="radio"] { + margin-right: 0.5em !important; + & + span { + margin-right: 2.5em; + } +} + +span { + &.mailpoet_mailchimp-key-status { + &.mailpoet_mailchimp-ok { + &:before { + content: "\2713"; + color: #0e90d2; + margin-left: 15px; + } + } + &.mailpoet_mailchimp-error { + &:before { + content: "\2717"; + color: #900; + margin-left: 15px; + } + } + } +} + +#subscribers_data { + overflow: auto; + table { + width: auto; + } + td { + padding: 0.5em; + } + & > table { + & > tbody { + & > td { + padding: 0.5em; + } + & > tr { + &:nth-child(odd) { + background: #f9f9f9; + } + } + } + } + .mailpoet_header { + text-transform: uppercase; + font-weight: 600; + text-decoration: underline; + } +} + +#subscribers_data th:first-child, #subscribers_data td:first-child { + width: 10em !important; + text-align: center !important; + padding: 0 1em 0 1em !important; + vertical-align: inherit !important; +} + +#subscribers_data { + & > table { + & > thead { + & > tr { + & > th { + & > span { + width: 15em !important; + } + } + } + } + } +} + +.mailpoet_data_match { + color: #0e90d2; + margin-left: 0.25em; +} + +.mailpoet_import_error, .mailpoet_validation_error { + color: #900; +} + +tr { + &.mailpoet_segments { + & > td { + & > a { + margin-left: 15px; + } + } + } +} + +span { + &.select2-search { + &.select2-search--dropdown { + display: none !important; + } + } +} + +.mailpoet_import_validation_step { + max-width: 600px; + display: flex; + flex-direction: column; + + .mailpoet_import_step_buttons { + flex-direction: row; + margin-top: 1.5em; + } + + p { + margin-left: 2em; + } + + label { + margin-top: 1.5em; + margin-bottom: 0.3em; + padding-left: 35px; + text-indent: -35px; + input { + margin-right: 0.5em; + } + } +} diff --git a/assets/css/src/components/_inAppAnnouncements.scss b/assets/css/src/components/_inAppAnnouncements.scss new file mode 100644 index 0000000000..934132635a --- /dev/null +++ b/assets/css/src/components/_inAppAnnouncements.scss @@ -0,0 +1,141 @@ +.mailpoet_in_app_announcement_pulsing_dot { + display: inline-block; + width: 10px; + height: 10px; + border-radius: 50%; + background: #ff5301; + cursor: pointer; + box-shadow: 0 0 0 rgba(255, 83, 1, 0.4); + animation: mailpoet_in_app_dot_pulse 2s infinite; +} + +@-webkit-keyframes mailpoet_in_app_dot_pulse { + 0% { + box-shadow: 0 0 0 0 rgba(255, 83, 1, 0.4); + } + 70% { + box-shadow: 0 0 0 10px rgba(255, 83, 1, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(255, 83, 1, 0); + } +} + +@-moz-keyframes mailpoet_in_app_dot_pulse { + 0% { + box-shadow: 0 0 0 0 rgba(255, 83, 1, 0.4); + } + 70% { + box-shadow: 0 0 0 10px rgba(255, 83, 1, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(255, 83, 1, 0); + } +} + +@-ms-keyframes mailpoet_in_app_dot_pulse { + 0% { + box-shadow: 0 0 0 0 rgba(255, 83, 1, 0.4); + } + 70% { + box-shadow: 0 0 0 10px rgba(255, 83, 1, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(255, 83, 1, 0); + } +} + +@-o-keyframes mailpoet_in_app_dot_pulse { + 0% { + box-shadow: 0 0 0 0 rgba(255, 83, 1, 0.4); + } + 70% { + box-shadow: 0 0 0 10px rgba(255, 83, 1, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(255, 83, 1, 0); + } +} + +@keyframes mailpoet_in_app_dot_pulse { + 0% { + box-shadow: 0 0 0 0 rgba(255, 83, 1, 0.4); + } + 70% { + box-shadow: 0 0 0 10px rgba(255, 83, 1, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(255, 83, 1, 0); + } +} + +@-webkit-keyframes mailpoet_in_app_dot_pulse { + 0% { + box-shadow: 0 0 0 0 rgba(255, 83, 1, 0.4); + } + 70% { + box-shadow: 0 0 0 10px rgba(255, 83, 1, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(255, 83, 1, 0); + } +} + +@-moz-keyframes mailpoet_in_app_dot_pulse { + 0% { + box-shadow: 0 0 0 0 rgba(255, 83, 1, 0.4); + } + 70% { + box-shadow: 0 0 0 10px rgba(255, 83, 1, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(255, 83, 1, 0); + } +} + +@-ms-keyframes mailpoet_in_app_dot_pulse { + 0% { + box-shadow: 0 0 0 0 rgba(255, 83, 1, 0.4); + } + 70% { + box-shadow: 0 0 0 10px rgba(255, 83, 1, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(255, 83, 1, 0); + } +} + +@-o-keyframes mailpoet_in_app_dot_pulse { + 0% { + box-shadow: 0 0 0 0 rgba(255, 83, 1, 0.4); + } + 70% { + box-shadow: 0 0 0 10px rgba(255, 83, 1, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(255, 83, 1, 0); + } +} + +@keyframes mailpoet_in_app_dot_pulse { + 0% { + box-shadow: 0 0 0 0 rgba(255, 83, 1, 0.4); + } + 70% { + box-shadow: 0 0 0 10px rgba(255, 83, 1, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(255, 83, 1, 0); + } +} + +.mailpoet_drag_and_drop_tutorial { + text-align: center; +} + +.new_subscriber_notification_announcement { + h2 { + font-size: 28px; + } + text-align: center; +} diff --git a/assets/css/src/components/_intro.scss b/assets/css/src/components/_intro.scss new file mode 100644 index 0000000000..fcf431fb14 --- /dev/null +++ b/assets/css/src/components/_intro.scss @@ -0,0 +1,78 @@ +.mailpoet-intro-active #adminmenuback { + z-index: auto; +} +#adminmenuwrap.introjs-fixParent { + position: absolute; +} + +#adminmenu li.introjs-showElement { + background: inherit; +} + +.introjs-helperLayer { + border: none; + border-radius: 3px; + background-color: rgba(255, 255, 255, 0.7); +} + +.introjs-tooltip { + min-width: 240px; + &[style*="top:"] { + margin-top: -8px; + } +} + +.introjs-tooltip .introjs-tooltipbuttons { + display: flex; + justify-content: flex-end; +} + +.introjs-tooltip .button { + margin-top: 15px; + position: relative; + + &:hover, &:focus { + z-index: 1; + } + &:focus { + height: 100%; + margin-bottom: -1px; + + &:after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: #5b9dd9; + } + } + + &.introjs-hidden { + display: none; + } + + &.introjs-skipbutton:not(.introjs-donebutton) { + margin-right: auto; + + & + .button { + margin-left: 10px; + } + } + + &.introjs-donebutton { + order: 1; + } + + &.introjs-prevbutton { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &:not(.introjs-hidden) + .introjs-nextbutton, &.introjs-donebutton { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; + } +} diff --git a/assets/css/src/components/_listing.scss b/assets/css/src/components/_listing.scss new file mode 100644 index 0000000000..d33267f54a --- /dev/null +++ b/assets/css/src/components/_listing.scss @@ -0,0 +1,44 @@ +.mailpoet_listing_loading tbody tr, +.mailpoet_form_loading tbody tr { + opacity: 0.2; +} + +.mailpoet_select_all { + background-color: #f1f1f1; +} + +.mailpoet_select_all td { + text-align: center; +} + +.mailpoet_listing_table { + th span { + white-space: nowrap; + } + + thead .mailpoet-check-column, + tfoot .mailpoet-check-column { + padding: 10px 0 0 3px; + width: 2.2em; + vertical-align: top; + } + + tbody .mailpoet-check-column { + margin: 0 0 0 8px; + vertical-align: text-top; + padding: 11px 0 0 3px; + } + + thead th.column-primary, + tfoot th.column-primary { + width: 25em; + } + + + @media screen and (max-width: 782px) { + thead th.column-primary, + tfoot th.column-primary { + width: 100%; + } + } +} diff --git a/assets/css/src/components/_mixins.scss b/assets/css/src/components/_mixins.scss new file mode 100644 index 0000000000..8eb1605eb5 --- /dev/null +++ b/assets/css/src/components/_mixins.scss @@ -0,0 +1,7 @@ +@mixin clearfix { + &:after { + clear: both; + content: ''; + display: table; + } +} diff --git a/assets/css/src/components/_modal.scss b/assets/css/src/components/_modal.scss new file mode 100644 index 0000000000..cf194cd0e1 --- /dev/null +++ b/assets/css/src/components/_modal.scss @@ -0,0 +1,334 @@ +$modal_title_color: #cfcfcf; +$modal_highlight_background_color: #f1f1f1; +$modal_background_color: #fff; +$modal_popup_margin: 30px; +$modal_popup_margin_mobile: 10px; +$modal_popup_padding: 30px; +$modal_popup_padding_mobile: 12px; +$modal_close_button_size: 23px; +$overlay_background_color: rgba(0, 0, 0, 0.6); +body.mailpoet_modal_opened { + overflow: hidden; +} +.mailpoet_modal_overlay { + height: 100%; + left: 0; + overflow-y: auto; + overflow-x: hidden; + position: fixed; + top: 0; + width: 100%; + z-index: 100000; + background-color: $overlay_background_color; + display: flex; + align-items: center; + justify-content: center; + padding: $modal_popup_margin; + box-sizing: border-box; +} + +.mailpoet_modal_highlight { + pointer-events: none; + background-color: $modal_highlight_background_color; + position: relative; + z-index: 100001 !important; + box-shadow: 0px 0px 20px 2px rgba(#fff, 75%); +} +.mailpoet_modal_overlay.mailpoet_overlay_hidden { + background-color: transparent; +} +.mailpoet_modal_overlay.mailpoet_overlay_loading { + background-color: $overlay_background_color !important; + display: flex !important; +} +.mailpoet_popup { + z-index: 25; + max-width: 100%; + margin: auto; + animation: mailpoet_popup_fadein 0.5s; +} + +@-webkit-keyframes mailpoet_popup_fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@-moz-keyframes mailpoet_popup_fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@-ms-keyframes mailpoet_popup_fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@-o-keyframes mailpoet_popup_fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes mailpoet_popup_fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.mailpoet_popup_wrapper { + display: flex; + flex-flow: column; + background-color: $modal_background_color; + overflow: hidden; + position: relative; + width: 100%; + height: 100%; + z-index: 0; + border-radius: 4px; + box-shadow: 1px 2px 4px #343434; + box-sizing: border-box; + padding: $modal_popup_padding; +} + +.mailpoet_overlay_hidden .mailpoet_popup_wrapper { + border: 1px solid #333; +} + +.mailpoet_popup_title h2 { + font-size: 23px; + font-weight: 600; + line-height: 29px; + margin: 0, $modal_close_button_size + 20 0 0; +} + +.mailpoet_popup_body { + flex-grow: 1; + position: relative; + margin-top: 20px; + + .button + .button { + margin-left: 10px; + } +} + +.mailpoet_popup_has_title .mailpoet_popup_body { + margin-top: 30px; +} +.mailpoet_modal_overlay.mailpoet_panel_overlay { + top: 32px; + overflow: hidden; +} + +.mailpoet_panel { + display: none; + position: fixed; + z-index: 100002; + top: 0; + bottom: 0; + padding: 0; + margin: 0; + width: 100%; + transition: margin 350ms ease-out; +} + +.mailpoet_panel_wrapper { + background-color: #f1f1f1; + border: 1px solid #e1e1e1; + border-top: 0 none; + height: 100%; + overflow-y: auto; + overflow-x: hidden; + width: 100%; + top: 0; + z-index: 0; +} + +.mailpoet_panel_title { + margin: 0; + padding: 0; + position: relative; + height: 0; +} + +.mailpoet_panel_title h2 { + color: $modal_title_color; + border-left: 1px solid #444; + border-right: 1px solid #444; + font-size: 1em; + font-weight: normal; + margin: 0; + padding: 0 30px 0 10px; + font-family: "Lucida Grande", Verdana, Arial, sans-serif; + line-height: 32px; +} + +.mailpoet_panel_body { + padding: 10px 10px 36px 10px; +} +.mailpoet_modal_close { + cursor: pointer; + position: absolute; + overflow: hidden; + padding: 0; + z-index: 2; + outline: 0 none; + + svg { + opacity: 0.5; + stroke: #979797; + + &:hover { + stroke: #636363; + } + } +} + +.mailpoet_popup .mailpoet_modal_close { + right: $modal_popup_padding; + top: $modal_popup_padding; + width: $modal_close_button_size; + height: $modal_close_button_size; + padding: 3px 0; +} + +.mailpoet_panel .mailpoet_modal_close { + width: 16px; + height: 16px; + right: 20px; + top: 20px; + padding: 2px 0; +} + +.mailpoet_modal_close:focus { + outline: 0 none; +} +.mailpoet_align_left { + margin: 0; + text-align: left; +} + +.mailpoet_align_center { + margin: 0; + text-align: center; +} + +.mailpoet_align_right { + margin: 0; + text-align: right; +} + +@media screen and (max-width: 782px) { + .mailpoet_modal_overlay { + padding: $modal_popup_margin_mobile; + } + + .mailpoet_popup { + width: 100%; + min-width: auto !important; + } + + .mailpoet_popup_wrapper { + padding: $modal_popup_padding_mobile; + } + + .mailpoet_popup_title h2 { + margin-right: $modal_close_button_size + 10; + } + + .mailpoet_popup .mailpoet_modal_close { + top: $modal_popup_padding_mobile; + right: $modal_popup_padding_mobile; + } + + .mailpoet_modal_overlay.mailpoet_panel_overlay { + top: 46px; + } + + .mailpoet_panel_body { + padding-bottom: 52px; + } +} + +.mailpoet_loading { + height: 32px; + width: 150px; + display: flex; + flex-direction: row; +} + +.mailpoet_modal_loading { + animation-direction: linear; + animation-duration: 1.9500000000000002s; + animation-iteration-count: infinite; + animation-name: bounce_mailpoet_modal_loading; + border-radius: 21px; + background-color: #E01D4E; + height: 32px; + margin-left: 17px; + width: 32px; +} + +.mailpoet_modal_loading_1, .mailpoet_modal_loading_1 { + animation-delay: 0.39s; +} + +.mailpoet_modal_loading_2, .mailpoet_modal_loading_2 { + animation-delay: 0.9099999999999999s; +} + +.mailpoet_modal_loading_3, .mailpoet_modal_loading_3 { + animation-delay: 1.1700000000000002s; +} + +@-webkit-keyframes bounce_mailpoet_modal_loading { + 0%, + 50% { + background-color: #064E6D; + } +} + +@-moz-keyframes bounce_mailpoet_modal_loading { + 0%, + 50% { + background-color: #064E6D; + } +} + +@-ms-keyframes bounce_mailpoet_modal_loading { + 0%, + 50% { + background-color: #064E6D; + } +} + +@-o-keyframes bounce_mailpoet_modal_loading { + 0%, + 50% { + background-color: #064E6D; + } +} + +@keyframes bounce_mailpoet_modal_loading { + 0%, + 50% { + background-color: #064E6D; + } +} diff --git a/assets/css/src/components/_mp2migrator.scss b/assets/css/src/components/_mp2migrator.scss new file mode 100644 index 0000000000..6794052b45 --- /dev/null +++ b/assets/css/src/components/_mp2migrator.scss @@ -0,0 +1,38 @@ +#logger { + width: 100%; + height: 300px; + background-color: transparent; + border: 0; + border-top: 1px #aba9a9 solid; + padding: 2px; + overflow: scroll; + resize: both; + font-size: 0.85em; + margin-top: 20px; +} + +#progressbar { + width: 50%; + background-color: #d8d8d8; + border-radius: 5px; +} + +$progressbar_color: #fecf23; +$progressbar_gradient_to_color: #fd9215; + +.ui-progressbar .ui-progressbar-value { + height: 100%; + background-color: $progressbar_color; + background-image: linear-gradient(to bottom, $progressbar_color, $progressbar_gradient_to_color); + border-radius: 3px; + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; + border: 0; +} + +.mailpoet_progress_label { + font-size: 15px; +} + +.error_msg { + color: #f00; +} diff --git a/assets/css/src/components/_newsletterCongratulate.scss b/assets/css/src/components/_newsletterCongratulate.scss new file mode 100644 index 0000000000..178793ae81 --- /dev/null +++ b/assets/css/src/components/_newsletterCongratulate.scss @@ -0,0 +1,37 @@ +.newsletter_congratulate_page { + margin-top: 30px; +} + +.mailpoet_newsletter_loading { + text-align: center; + + .mailpoet_loading { + margin: 100px auto 0 auto; + } + + .mailpoet_newsletter_loading_header { + margin: 30px; + } +} + +.mailpoet_congratulate_success { + width: 100%; + + h1 { + text-align: center; + margin-bottom: 30px; + } + + img, .button { + margin-left: auto; + margin-right: auto; + display: block; + } + + .typeform-widget { + height: 350px; + margin: 0 auto 30px; + max-width: 100%; + width: 500px; + } +} diff --git a/assets/css/src/components/_newsletterTemplates.scss b/assets/css/src/components/_newsletterTemplates.scss new file mode 100644 index 0000000000..4d6e50a8bf --- /dev/null +++ b/assets/css/src/components/_newsletterTemplates.scss @@ -0,0 +1,10 @@ +@import 'newsletterEditor/variables'; + +.mailpoet_template_iframe { + position: absolute; + z-index: -9999; + top: 0; + left: 0; + width: $newsletter-width; + max-width: $newsletter-width; +} diff --git a/assets/css/src/components/_notice.scss b/assets/css/src/components/_notice.scss new file mode 100644 index 0000000000..b0008f0031 --- /dev/null +++ b/assets/css/src/components/_notice.scss @@ -0,0 +1,4 @@ +.mailpoet_notice { + position: relative; + clear: both; +} diff --git a/assets/css/src/components/_pages.scss b/assets/css/src/components/_pages.scss new file mode 100644 index 0000000000..8fdd363cd9 --- /dev/null +++ b/assets/css/src/components/_pages.scss @@ -0,0 +1,302 @@ +/* +Based on /wp-admin/css/about.css of WP 4.7. +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 { + position: relative; + margin: 25px 40px 0 20px; + max-width: 1050px; /* readability */ + font-size: 15px; + + div.updated, div.error, .notice { + display: none !important; + } + + hr { + border: 0; + height: 0; + margin: 0; + border-top: 1px solid rgba(0, 0, 0, 0.1); + } + + img { + margin: 0; + max-width: 100%; + height: auto; + vertical-align: middle; + } + + .mailpoet-logo { + position: absolute; + top: 0.2em; + right: 0; + } + + .nav-tab { + padding-right: 15px; + padding-left: 15px; + font-size: 18px; + } + + p { + line-height: 1.5; + font-size: 14px; + } + + .feature-section p { + max-width: 55em; + margin-left: auto; + margin-right: auto; + } + + h1 { + margin: 1em 0 0.5em 0; + padding: 0; + color: #32373c; + line-height: 1.2em; + font-size: 2.8em; + font-weight: 400; + text-align: center; + } + + h1.welcome { + margin-right: 200px; + text-align: left; + } + + h2 { + margin: 40px 0 0.6em; + font-size: 2.7em; + line-height: 1.3; + font-weight: 300; + text-align: center; + } + + h3 { + margin: 1.25em 0 0.6em; + font-size: 1.4em; + line-height: 1.5; + } + + h4 { + color: #23282d; + } + + .about-description, + .about-text { + margin-top: 1.4em; + font-weight: 400; + line-height: 1.6em; + font-size: 19px; + } + + .about-text { + margin: 1em 200px 1em 0; + min-height: 60px; + color: #555d66; + } + + [class$=col] { + .col { + float: left; + position: relative; + } + } + + .two-col { + .col { + margin-right: 4.799999999%; + width: 47.6%; + } + } + + .two-col { + img { + margin-bottom: 1.5em; + } + } + + .feature-section { + &.two-col { + .col { + display: inline-block; + float: none; + margin-top: 1em; + margin-right: 4.799999999%; + width: calc(47.6% - 4px); + vertical-align: top; + } + } + } + + .three-col { + .col { + margin-right: 4.999999999%; + width: 29.95%; + } + } + + .two-col .col:nth-of-type(2n), + .three-col .col:nth-of-type(3n) { + margin-right: 0; + } + + .feature-section { + &.two-col { + h3 { + margin-top: 0; + } + } + } + + .feature-section { + h4 { + margin: 1.4em 0 0.6em 0; + font-size: 1em; + } + } + + .feature-section { + p { + margin-top: 0.6em; + } + } + + .lead-description { + font-size: 1.5em; + text-align: center; + } + + .two-col-text { + column-count: 2; + column-gap: 40px; + } + + .two-col-text { + p:first-of-type { + margin-top: 0; + } + } + + .headline-feature { + &.feature-video { + position: relative; + margin: 40px 0; + padding-bottom: 56.25%; + width: 100%; + max-width: 100%; + height: 0; + text-align: center; + } + } + + .feature-video { + embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } + + .featured-image { + text-align: center; + } + + .feature-section { + overflow: hidden; + padding: 0 0 40px; + } + + .feature-section { + &.no-heading { + padding-top: 35px; + } + } + + .headline-feature { + margin: 0 auto; + max-width: 80%; + } + + .feature-section { + .media-container { + overflow: hidden; + } + } + + .feature-section { + img { + margin-bottom: 1em; + } + } + + .embed-container { + text-align: center; + } + + .embed-container { + iframe { + max-width: 100%; + } + } + + .wp-embedded-content { + max-width: 100%; + } + + .feature-section { + .col { + margin-top: 40px; + } + } + + .changelog { + margin-bottom: 40px; + } + + .changelog { + &.feature-section { + .col { + margin-top: 40px; + } + } + } + + @media screen and (max-width: 782px) { + .two-col-text { + column-count: 1; + } + .three-col img { + display: block; + margin: 0 auto; + } + } + + @media screen and (max-width: 500px) { + margin-right: 20px; + margin-left: 10px; + h1, + .about-text { + margin-right: 0; + } + .about-text { + margin-bottom: 0.25em; + } + .mailpoet-logo { + position: relative; + margin: 1em 0; + width: 100%; + text-align: center; + } + .two-col .col, + .three-col .col { + width: 100% !important; + float: none !important; + } + } +} diff --git a/assets/css/src/components/_pagesCustom.scss b/assets/css/src/components/_pagesCustom.scss new file mode 100644 index 0000000000..efd906f11e --- /dev/null +++ b/assets/css/src/components/_pagesCustom.scss @@ -0,0 +1,59 @@ +/* +Custom styles for MailPoet pages. +*/ + +.mailpoet-about-wrap { + + .videoWrapper { + position: relative; + padding-bottom: 56.25%; /* 16:9 */ + /*padding-top: 25px*/ + height: 0; + + iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } + + + .mailpoet_video { + border: 1px solid rgba(0, 0, 0, 0.1); + } + + #mailpoet-changelog ul { + list-style: disc; + padding-left: 20px; + } + + h2.mailpoet-feature-top { + margin: 50px auto; + } + + a.button.go-to-plugin { + margin-top: 2em; + } + + p.top-space-triple { + margin-top: 3em; + } + + p.mailpoet-top-text { + margin-right: 0; + } + + ul.default-list { + list-style-type: disc; + margin-left: 40px; + } + + .half-width-centered { + display: block; + max-width: 50%; + margin-left: auto; + margin-right: auto; + } +} diff --git a/assets/css/src/components/_parsley.scss b/assets/css/src/components/_parsley.scss new file mode 100644 index 0000000000..bb12d18fc9 --- /dev/null +++ b/assets/css/src/components/_parsley.scss @@ -0,0 +1,29 @@ +input.parsley-success, +select.parsley-success, +textarea.parsley-success { + color: #468847; + background-color: #DFF0D8; + border: 1px solid #D6E9C6; +} + +input.parsley-error, +select.parsley-error, +textarea.parsley-error { + color: #B94A48; + background-color: #F2DEDE; + border: 1px solid #EED3D7; +} + +.parsley-errors-list { + margin: 2px 0 3px; + padding: 0; + list-style-type: none; + font-size: 0.9em; + line-height: 0.9em; + color: #B94A48; + opacity: 0; + transition: all 0.3s ease-in; + &.filled { + opacity: 1; + } +} diff --git a/assets/css/src/components/_progressBar.scss b/assets/css/src/components/_progressBar.scss new file mode 100644 index 0000000000..8fecf8dba8 --- /dev/null +++ b/assets/css/src/components/_progressBar.scss @@ -0,0 +1,7 @@ +.mailpoet_form { + margin: 0 0 20px 0 +} + +.mailpoet_form td { + vertical-align: top !important +} diff --git a/assets/css/src/components/_public.scss b/assets/css/src/components/_public.scss new file mode 100644 index 0000000000..05892d23b0 --- /dev/null +++ b/assets/css/src/components/_public.scss @@ -0,0 +1,153 @@ +/* labels */ +.mailpoet_text_label, +.mailpoet_textarea_label, +.mailpoet_select_label, +.mailpoet_radio_label, +.mailpoet_checkbox_label, +.mailpoet_list_label, +.mailpoet_date_label { + display: block; +} + +/* form loading */ +.mailpoet_form_sending { + .mailpoet_form_loading { + display: block; + } + .mailpoet_submit { + display: none; + } +} + +.mailpoet_form_loading { + display: none; + width: 30px; + text-align: center; +} + +.mailpoet_form_loading > span { + width: 5px; + height: 5px; + background-color: #5b5b5b; + + border-radius: 100%; + display: inline-block; + -webkit-animation: mailpoet-bouncedelay 1.4s infinite ease-in-out both; + animation: mailpoet-bouncedelay 1.4s infinite ease-in-out both; +} + +.mailpoet_form_loading .mailpoet_bounce1 { + -webkit-animation-delay: -0.32s; + animation-delay: -0.32s; +} + +.mailpoet_form_loading .mailpoet_bounce2 { + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; + margin: 0 7px; +} + + +@-webkit-keyframes mailpoet-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + } + 40% { + -webkit-transform: scale(1); + } +} + + +@-moz-keyframes mailpoet-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + } + 40% { + -webkit-transform: scale(1); + } +} + + +@-ms-keyframes mailpoet-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + } + 40% { + -webkit-transform: scale(1); + } +} + + +@-o-keyframes mailpoet-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + } + 40% { + -webkit-transform: scale(1); + } +} + + +@keyframes mailpoet-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + } + 40% { + -webkit-transform: scale(1); + } +} + +@-webkit-keyframes mailpoet-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); + } + 40% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@-moz-keyframes mailpoet-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); + } + 40% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@-ms-keyframes mailpoet-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); + } + 40% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@-o-keyframes mailpoet-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); + } + 40% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes mailpoet-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); + } + 40% { + -webkit-transform: scale(1); + transform: scale(1); + } +} diff --git a/assets/css/src/components/_reviewRequest.scss b/assets/css/src/components/_reviewRequest.scss new file mode 100644 index 0000000000..9fbedaeb06 --- /dev/null +++ b/assets/css/src/components/_reviewRequest.scss @@ -0,0 +1,14 @@ +.mailpoet_review_request { + max-width: 500px; + text-align: center; + margin: auto; + + img { + margin: 20px; + } + + a { + cursor: pointer; + text-decoration: underline; + } +} diff --git a/assets/css/src/components/_settings.scss b/assets/css/src/components/_settings.scss new file mode 100644 index 0000000000..d2bdf0f65e --- /dev/null +++ b/assets/css/src/components/_settings.scss @@ -0,0 +1,135 @@ +#mailpoet_settings { + .mailpoet_tab_panel { + display: none; + } + + .form-table th { + width: 20em; + } + .mailpoet_sending_methods { + margin: 25px 0 0 0; + display: flex; + flex-direction: row; + justify-content: flex-start; + > li { + flex-grow: 1; + flex-shrink: 1; + display: flex; + flex-direction: column; + flex-basis: 0; + margin: 0 25px 25px 0; + background-color: #fff; + border: 2px solid #dcdcdc; + max-width: 500px; + .mailpoet_sending_method_description { + padding: 25px; + flex-grow: 1; + flex-shrink: 0; + } + &:hover:not(.mailpoet_active) { + border-color: #c5c5c5; + } + } + > li:last-child { + margin-right: 0; + } + h3 { + text-align: center; + height: 54px; + font-size: 1.5em; + } + .mailpoet_description { + font-size: 14px; + } + .mailpoet_status { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + background-color: #dcdcdc; + color: #fff; + text-overflow: ellipsis; + min-height: 2em; + padding: 1em; + span { + visibility: hidden; + font-weight: bold; + } + div { + margin-left: 1em; + } + } + .mailpoet_active { + border: 2px solid #088b00; + &.mailpoet_invalid_key { + border: 2px solid #dc3232; + } + .mailpoet_status { + background-color: #088b00; + &.mailpoet_invalid_key { + background-color: #dc3232; + .mailpoet_actions { + color: white; + a:not(.button-primary) { + color: white; + } + } + } + span { + visibility: visible; + } + } + #mailpoet_mta_activate { + visibility: hidden; + } + } + .mailpoet_actions { + color: initial; + } + } + + .tooltip.dashicons.dashicons-editor-help { + line-height: 1.4; + } + + ul.sending-method-benefits { + list-style-type: none; + margin-bottom: 2em; + margin-top: 2em; + } + + .sending-free-plan-button { + background: #FF5301; + border-color: #e64c03; + text-shadow: 0 -1px 1px #e64c03; + box-shadow: 0 1px 0 #e64c03; + margin: 10px 0; + strong { + text-transform: uppercase; + } + } + + .mailpoet_success_item::before { + content: '✔ '; + } + + .mailpoet_error_item::before { + content: '✗ '; + } + + + @media screen and (max-width: 782px) { + .form-table th { + width: auto; + } + + .mailpoet_sending_methods { + flex-flow: row wrap; + justify-content: space-around; + > li { + margin-right: 0; + flex-basis: auto; + } + } + } +} diff --git a/assets/css/src/components/_subscribers.scss b/assets/css/src/components/_subscribers.scss new file mode 100644 index 0000000000..a613d0343f --- /dev/null +++ b/assets/css/src/components/_subscribers.scss @@ -0,0 +1,5 @@ +#subscribers_container { + .mailpoet_segments_unsubscribed { + color: lighten(#555, 33); + } +} diff --git a/assets/css/src/components/_welcomeWizard.scss b/assets/css/src/components/_welcomeWizard.scss new file mode 100644 index 0000000000..601a4fa5bd --- /dev/null +++ b/assets/css/src/components/_welcomeWizard.scss @@ -0,0 +1,112 @@ +.mailpoet_welcome_wizard_centered_column { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.mailpoet_welcome_wizard_header img { + margin-bottom: 20px; +} + +.mailpoet_welcome_wizard_steps { + padding-top: 20px; + width: 100%; + div.updated, div.error, .notice { + display: none !important; + } +} + +.mailpoet_welcome_wizard_step_content { + margin-top: 40px; + max-width: 620px; + min-height: 30% vh; + h1 { + font-weight: 400; + padding-bottom: 10px; + text-align: center; + } + p { + font-weight: normal; + font-size: 15px; + line-height: 22px; + color: #595c65; + text-align: center; + margin: 10px 0; + } +} + +#mailpoet_sender_form { + margin-top: 30px; + width: 330px; + label { + display: inline-block; + font-size: 15px; + margin-bottom: 20px; + } + input[type="text"] { + margin-top: 10px; + font-size: 15px; + width: 328px; + height: 30px; + } + input[type="submit"] { + margin: 50px 0 25px 0; + } + a.sender_form_small { + font-size: 12px; + color: #595c65; + } +} + +.mailpoet_sender_form_loading { + opacity: 0.5; +} + +.mailpoet_welcome_wizard_course_form_box { + margin-bottom: 10px; + padding-top: 30px; + position: relative; + img { + position: absolute; + top: 0; + left: 0; + } + iframe { + margin-left: 155px; + } + + @media screen and (max-width: 520px) { + padding: 0 10px; + text-align: center; + iframe { + margin-left: 0; + } + img { + position: static; + } + } +} + +.mailpoet_welcome_wizard_step_controls { + margin-top: 50px; + .button { + margin: 0 10px; + } +} + +.mailpoet_welcome_wizard_woo_screenshot { + margin-top: 30px; + width: 400px; +} + +@media screen and (max-width: 520px) { + .mailpoet_welcome_wizard_woo_screenshot { + width: 340px; + } +} + +.welcome_wizard_video { + position: absolute; + top: -1000px; +} diff --git a/assets/css/src/components/datepicker/_datepicker.scss b/assets/css/src/components/datepicker/_datepicker.scss new file mode 100644 index 0000000000..b191e72567 --- /dev/null +++ b/assets/css/src/components/datepicker/_datepicker.scss @@ -0,0 +1,2 @@ +@import 'jquery-ui-1.10.1'; +@import 'melon.datepicker'; diff --git a/assets/css/src/datepicker/jquery-ui-1.10.1.css b/assets/css/src/components/datepicker/jquery-ui-1.10.1.css similarity index 100% rename from assets/css/src/datepicker/jquery-ui-1.10.1.css rename to assets/css/src/components/datepicker/jquery-ui-1.10.1.css diff --git a/assets/css/src/datepicker/melon.datepicker.css b/assets/css/src/components/datepicker/melon.datepicker.css similarity index 100% rename from assets/css/src/datepicker/melon.datepicker.css rename to assets/css/src/components/datepicker/melon.datepicker.css diff --git a/assets/css/src/components/listing/_newsletters.scss b/assets/css/src/components/listing/_newsletters.scss new file mode 100644 index 0000000000..26b3deb214 --- /dev/null +++ b/assets/css/src/components/listing/_newsletters.scss @@ -0,0 +1,90 @@ +$excellent-badge-color: #2993ab; +$good-badge-color: #f0b849; +$bad-badge-color: #d54e21; +$green-badge-color: #55bd56; +$video-guide-badge-color: #46b450; + +#newsletters_container { + h2.nav-tab-wrapper { + margin-bottom: 1rem; + } +} + +.mailpoet_stats_text { + font-size: 14px; + font-weight: 600; +} + +.mailpoet_stat { + + &_excellent { + color: $excellent-badge-color; + } + + &_good { + color: $good-badge-color; + } + + &_bad { + color: $bad-badge-color; + } + + &_hidden { + display: none; + } + + &_link_small { + text-decoration: underline !important; + font-size: 0.75rem; + } +} + +.mailpoet_badge { + padding: 4px 6px 3px 6px; + margin-right: 4px; + text-transform: uppercase; + cursor: pointer; + color: white; + font-size: 0.5625rem; + font-weight: 500; + border-radius: 3px; + letter-spacing: 1px; + vertical-align: middle; + + &_excellent, &_teal { + background: $excellent-badge-color; + } + + &_good, &_yellow { + background: $good-badge-color; + } + + &_bad, &_red { + background: $bad-badge-color; + } + + &_green { + background: $green-badge-color; + } + + &_video { + background: $video-guide-badge-color; + line-height: 5em; + padding: 7px 6px 7px 6px; + text-decoration: none; + + &:hover, &:active, &:focus { + color: #FFFFFF; + background: $green-badge-color; + } + + &_grey { + background: #c3c3c3; + } + + .dashicons { + font-size: 14px; + line-height: 3.4em; + } + } +} diff --git a/assets/css/src/components/newsletterEditor/_common.scss b/assets/css/src/components/newsletterEditor/_common.scss new file mode 100644 index 0000000000..069e04bf08 --- /dev/null +++ b/assets/css/src/components/newsletterEditor/_common.scss @@ -0,0 +1,319 @@ +$link-color: $primary-active-background-color; + +$select-border-color: $content-border-color; +$select-text-color: $primary-text-color; + +$button-default-border-color: $structure-border-color; +$button-default-background-color: $primary-background-color; +$button-default-text-color: $primary-inactive-color; + +$button-primary-border-color: $primary-active-color; +$button-primary-background-color: $primary-active-background-color; +$button-primary-hover-background-color: $primary-active-color-highlight; +$button-primary-text-color: $white-color; + +$range-track-background-color: $white-color; +$range-track-border-color: $structure-border-color; +$range-track-height: 12px; +$range-thumb-background-color: $primary-inactive-color; +$range-thumb-border-color: #333; +$range-thumb-width: 13px; +$range-thumb-height: 26px; +$range-border-radius: 3px; +$range-thumb-hover-background-color: $primary-active-color; + +a { + color: $link-color; + text-decoration: none; +} + +.mailpoet_hidden { + display: none !important; +} + +input.mailpoet_color { + width: 5em; +} + +select.mailpoet_font-family { + width: 8em; +} + +select.mailpoet_font-size { + width: 5em; +} + +.mailpoet_input, .mailpoet_select { + border-radius: 1px; + box-shadow: none !important; + appearance: none; + + $form-control-padding: 3px; + + padding: $form-control-padding; + line-height: 28px - $form-control-padding * 2; +} + +.mailpoet_input { + width: 283px; + border: 1px solid $select-border-color; +} + +.mailpoet_input_small { + width: 58px; +} + +.mailpoet_input_medium { + width: 150px; +} + +.mailpoet_input_full { + box-sizing: border-box; + margin: 0; + width: 100%; +} + +.mailpoet_range { + width: 283px; + -webkit-appearance: none; + padding: 0; + vertical-align: middle; + + &:focus { + outline: none; + } + &::-webkit-slider-runnable-track { + width: 100%; + height: $range-track-height; + cursor: pointer; + animate: 0.2s; + background: $range-track-background-color; + border-radius: $range-border-radius; + border: 1px solid $range-track-border-color; + } + &::-webkit-slider-thumb { + border: 1px solid $range-thumb-border-color; + height: $range-thumb-height; + width: $range-thumb-width; + border-radius: $range-border-radius; + background: $range-thumb-background-color; + cursor: pointer; + -webkit-appearance: none; + margin-top: -1 * $range-thumb-height / 3; + } + &:hover::-webkit-slider-thumb { + background: $range-thumb-hover-background-color; + } + &::-moz-range-track { + width: 100%; + height: $range-track-height; + cursor: pointer; + animate: 0.2s; + background: $range-track-background-color; + border-radius: $range-border-radius; + border: 1px solid $range-track-border-color; + } + &::-moz-range-thumb { + border: 1px solid $range-thumb-border-color; + height: $range-thumb-height; + width: $range-thumb-width; + border-radius: $range-border-radius; + background: $range-thumb-background-color; + cursor: pointer; + } + &:hover::-moz-range-thumb { + background: $range-thumb-hover-background-color; + } + &::-ms-fill-lower { + border: 1px solid $range-track-border-color; + background: $range-track-background-color; + } + &::-ms-fill-upper { + border: 1px solid $range-track-border-color; + background: $range-track-background-color; + } + &::-ms-track { + width: 100%; + height: $range-track-height; + cursor: pointer; + animate: 0.2s; + background: transparent; + border-color: transparent; + border-width: $range-track-height * 2 0; + color: transparent; + } + &::-ms-thumb { + border: 1px solid $range-thumb-border-color; + height: $range-thumb-height; + width: $range-thumb-width; + border-radius: $range-border-radius; + background: $range-thumb-background-color; + cursor: pointer; + } + &:hover::-ms-thumb { + background: $range-thumb-hover-background-color; + } + &:focus::-ms-fill-lower { + border: 1px solid $range-track-border-color; + background: $range-track-background-color; + } + &:focus::-ms-fill-upper { + border: 1px solid $range-track-border-color; + background: $range-track-background-color; + } +} + +.mailpoet_range_small { + width: 100px; +} + +.mailpoet_range_medium { + width: 180px; +} + +.mailpoet_select { + border-color: $select-border-color; + color: $select-text-color; + margin: 0; +} + +.mailpoet_select_large { + width: 139px; +} + +.mailpoet_select_medium { + width: 103px; +} + +.mailpoet_select_small { + width: 68px; +} + +.mailpoet_select_half_width { + width: 50%; +} + +#mailpoet_editor_content ol, +#mailpoet_editor_content ul { + list-style-position: inside; + margin-left: 0; +} +#mailpoet_editor_content ul { + list-style-type: disc; +} + +.mailpoet_button { + margin: 0; + border: 1px solid $button-default-border-color; + background-color: $button-default-background-color; + padding: 6px 20px; + color: $button-default-text-color; + border-radius: 3px; + line-height: normal; + vertical-align: top; +} + +.mailpoet_button_full { + width: 100%; + box-sizing: border-box; +} + +.tooltip-help-designer-subject-line div, .tooltip-help-designer-preheader div { + z-index: 100001; +} + +.tooltip-help-send-preview { + position: absolute; + right: 15px; +} + +.tooltip-help-designer-ideal-width { + color: #656565; + text-transform: none; + margin-left: 5px; + font-weight: normal; +} + +.tooltip-help-designer-full-width .dashicons { + line-height: 34px; +} +.tooltip-help-designer-full-width span { + line-height: 1.4em; +} + +.mailpoet_button_primary { + border-color: $button-primary-border-color; + background-color: $button-primary-background-color; + color: $button-primary-text-color; + + &:hover { + background-color: $button-primary-hover-background-color; + } +} + +.mailpoet_button_group { + display: inline; + + .mailpoet_button:first-child { + margin-right: 0; + padding: 6px 12px 6px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .mailpoet_button:last-child { + margin-left: 0; + padding-left: 10px; + padding-right: 10px; + border-left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } +} + +.mailpoet_text_content p { + margin: 1em 0; +} + +.mailpoet_separator { + margin: 17px 20px; +} + +.mailpoet_option_offset_left_small { + margin-left: 10px; +} +input.mailpoet_option_offset_left_small { + margin-left: 10px !important; +} + +.mailpoet_form_narrow_select2 span.select2-container { + width: 103px !important; +} + +span.select2-container--open > span.select2-dropdown { + min-width: 150px; +} + +span.select2-container--open > span.select2-dropdown li.select2-results__option { + font-size: 13px; + margin: 0px !important; + + & .select2-results__group { + font-weight: normal; + color: #bfbfbf; + } + + & .select2-results__option { + padding-left: 15px; + font-size: 13px; + + &[aria-selected=true] { + background-color: #eee; + color: #444; + } + } +} + +.mailpoet_settings_notice { + color: #999; +} diff --git a/assets/css/src/components/newsletterEditor/_layout.scss b/assets/css/src/components/newsletterEditor/_layout.scss new file mode 100644 index 0000000000..85bffc9551 --- /dev/null +++ b/assets/css/src/components/newsletterEditor/_layout.scss @@ -0,0 +1,40 @@ +$sidebar-width: 330px; +$content-border-color: $structure-border-color; + +#mailpoet_editor { + width: 100%; + clear: both; +} + +#mailpoet_editor_heading { + padding-left: 15px; + margin-left: 2px; + margin-bottom: 13px; + clear: both; +} + +#mailpoet_editor_main_wrapper { + border: 1px solid $content-border-color; + border-left: 0; + position: relative; + min-width: 1050px; +} + +#mailpoet_editor_content_container { + width: 100%; + padding-right: $sidebar-width; + box-sizing: border-box; +} + +#mailpoet_editor_sidebar { + float: right; + width: $sidebar-width; + box-sizing: border-box; +} + +.mailpoet_newsletter_wrapper { + max-width: $newsletter-width; + width: $newsletter-width; + margin: auto; + position: relative; +} diff --git a/assets/css/src/components/newsletterEditor/_libraryOverrides.scss b/assets/css/src/components/newsletterEditor/_libraryOverrides.scss new file mode 100644 index 0000000000..0fed4bcb3a --- /dev/null +++ b/assets/css/src/components/newsletterEditor/_libraryOverrides.scss @@ -0,0 +1,183 @@ +/* Fix select2 z-index to work with MailPoet.Modal */ +.select2-dropdown { + z-index: 101000 !important; +} + +/* Remove input field styles from select2 type input */ +.select2-container { + border: none; + padding: 0; +} + +/* Fix select2 input glow and margins that wordpress may insert */ +.select2 input, +.select2 input:focus { + border-color: none; + box-shadow: none; + + margin: 0; + padding: 0; +} + +/* Fix width overrides for select2 */ +.mailpoet_editor_settings .select2-container { + width: 100% !important; +} + +/* Fix inline TinyMCE toolbar to have minimal width instead of being close to 100% of the screen */ +div.mce-toolbar-grp.mce-container { + position: absolute; +} + +.mce-tinymce.mce-tinymce-inline { + border-radius: 3px; + background-color: $primary-background-color; + border: 1px solid $content-border-color; + box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.05); +} + +.mce-window { + /* Fix TinyMCE mailpoet_shortcodes window lack of hiding overflow */ + div.mce-container-body.mce-abs-layout { + overflow: hidden; + } + + /* Fix TinyMCE popup window's close button to not be covered by draggable section */ + .mce-window-head div.mce-dragh { + width: calc(100% - 36px); + } +} + +/* TinyMCE mailpoet_shortcodes toolbar icon */ +.mce-i-mailpoet_shortcodes:before { + font: 400 20px / 1 dashicons !important; + content: "\f307"; +} + +/* TinyMCE remove active border from the editor */ +.mce-edit-focus { + outline: none; +} + +/* Style "No search term specified" in TinyMCE link editor */ +#wp-link li, #wp-link div.query-notice { + clear: both; + margin-bottom: 0; + border-bottom: 1px solid #f1f1f1; + color: #333; + padding: 4px 6px; + cursor: pointer; + position: relative; +} + + +#wpbody-content > * { + margin-left: 20px; +} + +#wpbody-content > .wrap { + margin-left: 0; +} + +#wpcontent { + margin-left: 160px; + padding-left: 0; + + .folded & { + margin-left: 36px; + } +} +.wrap { + margin-left: 0; + margin-right: 0; +} + +/* Reduce WP admin bar z-index in order for TinyMCE toolbar to be visible */ +#wpadminbar { + z-index: 50000; +} + +/* Allow horizontal scrolling on smaller (tablet/phone) sized screens */ +body { + overflow-x: auto; +} + +/* Hide the "Details" section of WordPress Media manager */ +.media-sidebar { + display: none; +} + +#mailpoet-media-manager { + .attachments-browser .attachments, + .attachments-browser .uploader-inline { + margin-right: 0; + } + + .attachments-browser .attachments, + .attachments-browser .media-toolbar, + .attachments-browser .uploader-inline { + right: 0; + } +} + +/* Remove max width from date selector in WordPress Media Manager */ +#media-attachment-date-filters { + max-width: calc(100% - 12px); +} + +/* Alter Spectrum color picker to leave only the color preview, without arrows */ +.sp-replacer { + border-radius: 3px; + padding: 0; + border: 0; + box-shadow: 1px 2px darken($primary-background-color, 13%); +} + +.sp-preview { + border-width: 0; + margin-right: 0; + width: 25px; + height: 25px; +} + +.sp-dd { + display: none; +} + +/* Sidepanel overrides */ +.mailpoet_panel_body { + margin: 19px; + padding: 0; + + .mailpoet_editor_settings h3 { + margin-top: 0; + } +} + +.mailpoet_panel_wrapper { + background-color: $primary-background-color; + border: 1px solid $content-border-color; +} + +.wrap > .mailpoet_notice, +.notice, +.update-nag { + margin-left: 2px + 15px !important; + margin-right: 20px !important; +} + +/* Make a button group */ +.mailpoet_button_group { + + .button:first-child { + border-right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .button:last-child { + border-left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } +} diff --git a/assets/css/src/components/newsletterEditor/_variables.scss b/assets/css/src/components/newsletterEditor/_variables.scss new file mode 100644 index 0000000000..399595faca --- /dev/null +++ b/assets/css/src/components/newsletterEditor/_variables.scss @@ -0,0 +1,32 @@ +$transparent-color: rgba(255, 255, 255, 0); +$white-color: rgb(255, 255, 255); +$black-color: rgb(0, 0, 0); + +$structure-border-color: #dddddd; +$content-border-color: #e5e5e5; + +$primary-active-color: #0074a2; +$primary-active-color-highlight: #1e8cbe; +$primary-inactive-color: #a4a4a4; + +$primary-active-background-color: #2ea1cd; +$primary-background-color: #f8f8f8; + +$primary-text-color: #656565; + +$primary-inset-shadow-color: #025C80; + +$warning-background-color: #E64047; +$warning-text-color: $white-color; +$warning-alternate-text-color: #f4c6c8; + +$error-text-color: #d54e21; + +$editor-column-color: #7FBBD0; +$editor-content-color: #0078A2; + + +$newsletter-width: 660px; + +$text-line-height: 1.6em; +$sidebar-text-size: 13px; diff --git a/assets/css/src/components/newsletterEditor/components/_blockTools.scss b/assets/css/src/components/newsletterEditor/components/_blockTools.scss new file mode 100644 index 0000000000..a1d8f5153b --- /dev/null +++ b/assets/css/src/components/newsletterEditor/components/_blockTools.scss @@ -0,0 +1,216 @@ +$tool-inactive-color: #333333; +$tool-inactive-secondary-color: #ffffff; +$tool-hover-color: #bbbbbb; +$tool-hover-secondary-color: #ffffff; +$tool-active-color: #d2d2d4; +$tool-active-secondary-color: #ffffff; + +$content-icon-size: 14px; +$content-icon-size-with-padding: 24px; +$column-icon-size: 15px; +$column-icon-size-with-padding: 27px; + +.mailpoet_tools { + position: absolute; + bottom: 100%; + left: 50%; + z-index: 20; + text-align: right; + overflow: hidden; + text-align: center; + transform: translateX(-50%); + transition: visibility 0s linear 250ms; + visibility: hidden; + + .mailpoet_tools_slider { + background: $editor-content-color; + border-radius: 10px 10px 0 0; + display: flex; + flex-direction: row; + padding: 3px 7px; + position: relative; + transform: translateY(100%); + transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1); + } + + .mailpoet_resize_active & .mailpoet_tools_slider, + &.mailpoet_display_tools .mailpoet_tools_slider { + transform: translateY(0); + transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1), visibility 0s linear; + visibility: visible; + } + + a { + vertical-align: top; + } + + .mailpoet_container_horizontal + & { + bottom: auto; + left: 100%; + top: -2px; + transform: none; + + .mailpoet_tools_slider { + background: $editor-column-color; + border-radius: 0 10px 10px 0; + flex-direction: column; + padding: 7px 3px; + transform: translateY(0) translateX(-100%); + } + + &.mailpoet_display_tools, + .mailpoet_resize_active & { + z-index: 21; + + .mailpoet_tools_slider { + transform: translateY(0) translateX(0); + } + } + + .mailpoet_tool { + width: $column-icon-size-with-padding; + height: $column-icon-size-with-padding; + display: block; + + svg { + height: $column-icon-size; + padding: 6px; + width: $column-icon-size; + } + } + + .mailpoet_delete_block { + flex-direction: column; + } + + .mailpoet_delete_block_activate { + display: block; + max-height: $column-icon-size-with-padding; + max-width: none; + opacity: 1; + } + + .mailpoet_delete_block_confirm, + .mailpoet_delete_block_cancel { + display: block; + margin: 0; + width: 100%; + } + + .mailpoet_delete_block_activated { + width: auto; + height: auto; + padding: 0 5px 3px 5px; + + .mailpoet_delete_block_activate { + overflow: hidden; + max-height: 0; + opacity: 0; + } + + .mailpoet_delete_block_confirm, + .mailpoet_delete_block_cancel { + opacity: 1; + } + } + } +} + +.mailpoet_tool { + display: inline-block; + width: $content-icon-size-with-padding; + height: $content-icon-size-with-padding; + + svg { + fill: #fff; + height: $content-icon-size; + padding: 5px; + vertical-align: top; + width: $content-icon-size; + } + + &:hover svg, + &:focus svg { + opacity: 0.7; + } + + .mailpoet_delete_block_confirmation { + position: absolute; + top: 0; + right: 0; + width: 200px; + } +} + +.mailpoet_delete_block { + border-radius: 3px; + display: flex; + flex-direction: row-reverse; + line-height: 24px; + vertical-align: top; + white-space: nowrap; + @include animation-background-color(); + + .mailpoet_tool { + padding: 0; + } + + .mailpoet_delete_block_activate { + max-width: $content-icon-size-with-padding; + display: inline-block; + opacity: 1; + @include animation-fade-in-and-scale-horizontally(); + } + + .mailpoet_delete_block_confirm, + .mailpoet_delete_block_cancel { + max-height: 0; + max-width: 0; + opacity: 0; + overflow: hidden; + display: inline-block; + @include animation-fade-in-and-scale-horizontally(); + } +} + +.mailpoet_delete_block_activated { + height: auto; + width: auto; + background-color: $warning-background-color; + padding: 0 5px; + + .mailpoet_delete_block_activate { + overflow: hidden; + max-width: 0; + opacity: 0; + } + + .mailpoet_delete_block_confirm, + .mailpoet_delete_block_cancel { + max-height: 20px; + max-width: 90px; + opacity: 1; + } + + .mailpoet_delete_block_cancel { + margin-left: 3px; + } +} + +.mailpoet_delete_block_confirm { + color: $warning-text-color; + + &:hover { + color: $warning-text-color; + text-decoration: underline; + } +} + +.mailpoet_delete_block_cancel { + color: $warning-alternate-text-color; + + &:hover { + color: $warning-alternate-text-color; + text-decoration: underline; + } +} diff --git a/assets/css/src/components/newsletterEditor/components/_dragAndDrop.scss b/assets/css/src/components/newsletterEditor/components/_dragAndDrop.scss new file mode 100644 index 0000000000..e098bb2574 --- /dev/null +++ b/assets/css/src/components/newsletterEditor/components/_dragAndDrop.scss @@ -0,0 +1,78 @@ +$drop-active-color: $primary-active-color; + +$marker-width: 2px; +$marker-z-index: 1; + +$draggable-widget-z-index: 2; + +.mailpoet_drop_marker { + background-color: $primary-active-color; + position: absolute; + min-width: $marker-width; + min-height: $marker-width; + z-index: $marker-z-index; + + box-shadow: 0px 0px 1px 0px $primary-active-color; + + &::before, &::after { + position: absolute; + margin-top: -18px; + font: 400 40px / 1 dashicons; + color: $primary-active-color; + } + &::before { + left: -25px; + content: "\f139"; + } + &::after { + right: -23px; + content: "\f141"; + } +} +.mailpoet_drop_marker.mailpoet_drop_marker_middle, +.mailpoet_drop_marker.mailpoet_drop_marker_first.mailpoet_drop_marker_after, +.mailpoet_drop_marker.mailpoet_drop_marker_last.mailpoet_drop_marker_before { + margin-top: -1 * ($marker-width / 2); +} +.mailpoet_drop_marker.mailpoet_drop_marker_last.mailpoet_drop_marker_after { + margin-top: -1 * $marker-width; +} + +#mailpoet_editor .mailpoet_droppable_active { + z-index: 21000; +} + +.mailpoet_block.mailpoet_droppable_active { + border: 1px dashed $drop-active-color !important; + width: $newsletter-width; + + .mailpoet_tools { + display: none !important; + } +} + +.mailpoet_widget.mailpoet_droppable_active { + padding: 0; + margin: 0; + z-index: $draggable-widget-z-index; + @include animation-fade-in(); + + .mailpoet_widget_icon { + padding: 0; + margin: 0; + } +} + +.mailpoet_drop_active > .mailpoet_container > div > .mailpoet_container_empty { + background-color: $primary-active-color; + box-shadow: inset 1px 2px 1px $primary-inset-shadow-color; + color: $white-color; +} + +.mailpoet_droppable_block { + cursor: move; + + &.mailpoet_ignore_drag { + cursor: auto; + } +} diff --git a/assets/css/src/components/newsletterEditor/components/_forms.scss b/assets/css/src/components/newsletterEditor/components/_forms.scss new file mode 100644 index 0000000000..07fcf837fa --- /dev/null +++ b/assets/css/src/components/newsletterEditor/components/_forms.scss @@ -0,0 +1,52 @@ +.mailpoet_form_field { + margin-top: 15px; + margin-bottom: 15px; +} + +.mailpoet_form_field_title { + clear: both; + margin-bottom: 5px; +} + +.mailpoet_form_field_title_small { + width: 120px; +} + +.mailpoet_form_field_title_inline { + display: inline-block; + margin-bottom: 0; + margin-top: 6px; +} + +.mailpoet_form_field_optional { + font-size: 0.8em; + color: $primary-inactive-color; +} + +.mailpoet_form_field_radio_option, +.mailpoet_form_field_checkbox_option { + display: inline-block; + vertical-align: top; + margin-right: 5px; + line-height: 30px; + + &:last-child { + margin-right: 0; + } +} + +.mailpoet_form_field_input_option { + display: inline-block; + + input[type=checkbox] { + vertical-align: top; + } + + input[type=text] { + vertical-align: middle; + } +} + +.mailpoet_form_field_block { + display: block; +} diff --git a/assets/css/src/components/newsletterEditor/components/_heading.scss b/assets/css/src/components/newsletterEditor/components/_heading.scss new file mode 100644 index 0000000000..750e030aa8 --- /dev/null +++ b/assets/css/src/components/newsletterEditor/components/_heading.scss @@ -0,0 +1,27 @@ +.mailpoet_heading_form_field { + margin-top: 5px; + margin-bottom: 5px; +} + +.mailpoet_input_title, +.mailpoet_input_preheader { + width: 500px; + padding: 3px; + line-height: normal; +} + +.mailpoet_input_title { + font-size: 23px; +} + +.mailpoet_breadcrumbs { + float: left; + margin-bottom: 13px; + margin-left: 17px; + font-size: 0.9em; + text-transform: uppercase; + + p { + margin: 0; + } +} diff --git a/assets/css/src/components/newsletterEditor/components/_layers.scss b/assets/css/src/components/newsletterEditor/components/_layers.scss new file mode 100644 index 0000000000..18796baff9 --- /dev/null +++ b/assets/css/src/components/newsletterEditor/components/_layers.scss @@ -0,0 +1,39 @@ +.mailpoet_container_layer_active { + .mailpoet_block { + pointer-events: none; + opacity: 0.4; + } + + .mailpoet_container_block { + pointer-events: auto; + opacity: 1; + } + + .mailpoet_container_block > .mailpoet_tools { + display: block !important; + } + + & > .mailpoet_tools { + z-index: 100001 !important; + } +} + +.mailpoet_layer_overlay { + height: 100%; + left: 0; + overflow-y: auto; + overflow-x: hidden; + position: fixed; + top: 0; + width: 100%; + z-index: 100000; + background-color: rgba(0, 0, 0, 0.6); + margin: 0 !important; +} + +.mailpoet_layer_highlight { + pointer-events: none; + background-color: #f1f1f1; + position: relative; + z-index: 100001 !important; +} diff --git a/assets/css/src/components/newsletterEditor/components/_resize.scss b/assets/css/src/components/newsletterEditor/components/_resize.scss new file mode 100644 index 0000000000..a1e4ebdf9a --- /dev/null +++ b/assets/css/src/components/newsletterEditor/components/_resize.scss @@ -0,0 +1,107 @@ +$resize-active-color: $editor-content-color; +$resize-handle-font-color: $white-color; +$resize-handle-z-index: 2; + +.mailpoet_resize_handle_container { + left: 50%; + margin-top: -16px; + position: absolute; + top: 100%; + transform: translateX(-50%); + z-index: $resize-handle-z-index; +} + +.mailpoet_resize_handle { + align-items: center; + background: $editor-content-color; + border-radius: 10px; + cursor: ns-resize; + display: flex; + justify-content: space-between; + min-width: 60px; + padding: 7px 10px; + z-index: $resize-handle-z-index; + + .mailpoet_resize_handle_text, + .mailpoet_resize_handle_icon { + pointer-events: none; + } + + .mailpoet_resize_active & { + display: flex !important; + } +} + +.mailpoet_resize_handle_text { + line-height: 1.5em; + font-size: 11px; + font-weight: bold; + color: $resize-handle-font-color; + text-align: center; +} + +.mailpoet_resize_handle_icon { + line-height: 15px; + margin-left: 5px; + + & > svg { + fill: $resize-handle-font-color; + height: 15px; + vertical-align: top; + width: 15px; + } +} + +.mailpoet_block.mailpoet_resize_active > .mailpoet_block_highlight { + border: 2px solid $resize-active-color; + + .mailpoet_resize_handle { + display: inline-block; + } +} + + +.mailpoet_image_resize_handle_container { + position: absolute; + bottom: 0; + right: 0; + width: 24px; + height: 24px; +} + +.mailpoet_image_resize_handle { + position: relative; + background: $editor-content-color; + border-radius: 6px 0 0 0; + display: inline-block; + width: 24px; + height: 24px; + cursor: nwse-resize; + z-index: $resize-handle-z-index; + + .mailpoet_image_resize_handle_text, + .mailpoet_image_resize_handle_icon { + pointer-events: none; + } +} + +.mailpoet_image_resize_handle_icon { + display: block; + line-height: 22px; + padding: 1px; + + & > svg { + width: 22px; + height: 22px; + fill: $resize-handle-font-color; + vertical-align: top; + } +} + +.mailpoet_block.mailpoet_image_resize_active > .mailpoet_block_highlight { + border: 2px solid $resize-active-color; + + .mailpoet_image_resize_handle { + display: inline-block; + } +} diff --git a/assets/css/src/components/newsletterEditor/components/_save.scss b/assets/css/src/components/newsletterEditor/components/_save.scss new file mode 100644 index 0000000000..bd31d455d5 --- /dev/null +++ b/assets/css/src/components/newsletterEditor/components/_save.scss @@ -0,0 +1,149 @@ +#mailpoet_editor_bottom { + margin: 10px 0 120px; +} + +.mailpoet_save_wrapper { + float: right; + position: relative; + margin-right: 20px; + margin-bottom: 10px; + + .mailpoet_save_next { + margin-left: 5px; + } +} + +.mailpoet_save_options { + border-radius: 3px; + + position: absolute; + right: 0; + z-index: 1000; + overflow: hidden; + margin: 5px 0; + clear: both; + vertical-align: top; + white-space: nowrap; + + background: $white-color; + border: 1px solid $content-border-color; +} + +.mailpoet_save_option { + margin: 0; + + & > a { + display: block; + padding-left: 20px; + padding-right: 20px; + line-height: 2em; + } +} + +.mailpoet_save_option:hover { + background-color: $primary-active-background-color; + color: $white-color; + + & > a { + color: $white-color; + } +} + +.mailpoet_save_show_options { + padding: 6px 3px 4px; +} + +.mailpoet_save_show_options_icon { + vertical-align: middle; + height: 14px; + margin-top: -6px; +} + +.mailpoet_save_as_template_container, +.mailpoet_export_template_container { + border-radius: 3px; + display: inline-block; + position: absolute; + right: 0; + z-index: 1000; + clear: both; + + margin: 5px 0; + padding: 0 10px; + background-color: $white-color; + border: 1px solid $structure-border-color; +} + +.mailpoet_save_as_template_title, +.mailpoet_export_template_title { + font-size: 1.1em; +} + +.mailpoet_save_next, .mailpoet_save_button_group { + float: right; +} + +.mailpoet_editor_messages { + position: absolute; + right: 0; +} + +.mailpoet_editor_last_saved { + color: $primary-inactive-color; + font-size: 0.9em; + margin-top: 10px; + text-align: right; +} + +.mailpoet_save_error { + margin-top: 10px; + width: $sidebar-width - 20px; + color: $error-text-color; + text-align: right; +} + +.mailpoet_save_dropdown_down { + .mailpoet_save_options, + .mailpoet_save_as_template_container, + .mailpoet_export_template_container { + top: 100%; + bottom: auto; + } + + .mailpoet_save_show_options { + &.mailpoet_save_show_options_active { + .mailpoet_save_show_options_icon::before { + content: '\f142'; + } + } + } + + .mailpoet_save_show_options_icon { + &::before { + content: '\f140'; + } + } +} + +.mailpoet_save_dropdown_up { + .mailpoet_save_options, + .mailpoet_save_as_template_container, + .mailpoet_export_template_container { + top: auto; + bottom: 100%; + } + + .mailpoet_save_show_options { + &.mailpoet_save_show_options_active { + .mailpoet_save_show_options_icon::before { + content: '\f140'; + } + } + } + + .mailpoet_save_show_options_icon { + &::before { + content: '\f142'; + } + } +} diff --git a/assets/css/src/components/newsletterEditor/components/_sidebar.scss b/assets/css/src/components/newsletterEditor/components/_sidebar.scss new file mode 100644 index 0000000000..ad282529ee --- /dev/null +++ b/assets/css/src/components/newsletterEditor/components/_sidebar.scss @@ -0,0 +1,204 @@ +$select-border-color: $content-border-color; +$select-text-color: $primary-text-color; + +$sidebar-background-color: $primary-background-color; +$sidebar-active-heading-color: $primary-active-color; +$sidebar-inactive-heading-color: $primary-inactive-color; +$sidebar-text-color: $primary-text-color; + +$widget-width: 70px; +$widget-background-color: $white-color; +$widget-shadow-color: darken($primary-background-color, 13%); +$widget-icon-color: darken($primary-background-color, 31.5%); +$widget-icon-hover-color: $primary-active-color; +$widget-icon-width: 30px; + +#mailpoet_editor_sidebar { + border-left: $content-border-color; + border-bottom: $content-border-color; + color: $sidebar-text-color; + font-size: $sidebar-text-size; + + .mailpoet_sidebar_region { + margin-bottom: 0; + border-left: 1px solid $content-border-color; + border-bottom: 1px solid $content-border-color; + border-top: 0; + border-right: 0; + + &.closed .mailpoet_region_content { + display: none; + } + } + + .mailpoet_region_content { + padding: 0 20px; + margin-top: 12px; + } + + &, .postbox { + background-color: $sidebar-background-color; + } + + .postbox { + padding-bottom: 20px; + + &.closed { + padding-bottom: 0; + } + + &.closed h3 { + color: $sidebar-inactive-heading-color; + cursor: pointer; + } + + h3, + &:hover h3 { + margin: 0; + padding: 17px 20px; + text-transform: uppercase; + color: $sidebar-active-heading-color; + } + + h3, + .handlediv { + cursor: auto; + border: 0; + } + + .handlediv::before { + top: 18px; + right: 18px; + font: 400 20px / 1 dashicons; + speak: none; + display: inline-block; + position: relative; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; + content: '\f142'; + color: $sidebar-active-heading-color; + } + + &.closed .handlediv::before { + content: '\f140'; + color: $sidebar-inactive-heading-color; + } + + &.closed:hover .handlediv::before { + color: $sidebar-active-heading-color; + } + } +} + +.mailpoet_widget { + display: inline-block; + width: $widget-width; + text-align: center; + float: left; + padding: 0 13px 15px 13px; + &:nth-child(3n+1) { + clear: left; + } + + .mailpoet_widget_icon { + width: $widget-width; + height: $widget-width; + background-color: $widget-background-color; + border-radius: 3px; + box-shadow: 1px 2px $widget-shadow-color; + color: $widget-icon-color; + fill: $widget-icon-color; + text-align: center; + line-height: $widget-width; + box-sizing: border-box; + margin-bottom: 9px; + + /* Vertically align widget icon glyphs */ + & > * { + vertical-align: middle; + width: $widget-icon-width; + height: $widget-icon-width; + font-size: $widget-icon-width; + } + + &:hover { + color: $widget-icon-hover-color; + fill: $widget-icon-hover-color; + border: 1px solid $widget-icon-hover-color; + } + } + + &.mailpoet_droppable_active { + color: $widget-icon-hover-color; + fill: $widget-icon-hover-color; + + .mailpoet_widget_icon { + border: 1px solid $widget-icon-hover-color; + color: $widget-icon-hover-color; + fill: $widget-icon-hover-color; + box-shadow: none; + } + + .mailpoet_widget_title { + display: none; + } + } +} + +/* Browser preview modal */ +.mailpoet_browser_preview_wrapper { + position: absolute; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; +} + +.mailpoet_browser_preview_toggle { + flex: 0 1 auto; + height: 30px; + padding: 10px 0; + text-align: center; + position: absolute; + top: -30px; + width: 100%; +} + +.mailpoet_browser_preview_toggle > label { + display: inline-block; + margin: 0 5px; +} + +.mailpoet_browser_preview_container { + flex: 1 1 auto; + margin: 15px auto 0 auto; + transition: width 0.5s; + box-sizing: border-box; + height: 100%; + padding: 20px; + border: 1px solid #979797; + border-radius: 20px; + display: flex; + flex-direction: column; +} + +.mailpoet_browser_preview_container_desktop { + width: 100%; +} + +.mailpoet_browser_preview_container_mobile { + width: 350px; +} +.mailpoet_browser_preview_border { + width: 100%; + height: 100%; + box-sizing: border-box; + border: 1px solid #c3c3c3; +} + +.mailpoet_browser_preview_iframe { + width: calc(100% - 1px); + margin: auto; + display: block; +} diff --git a/assets/css/src/components/newsletterEditor/components/_sidepanel.scss b/assets/css/src/components/newsletterEditor/components/_sidepanel.scss new file mode 100644 index 0000000000..7c61943156 --- /dev/null +++ b/assets/css/src/components/newsletterEditor/components/_sidepanel.scss @@ -0,0 +1,67 @@ +$sidepanel-active-heading-color: $primary-active-color; + +/* Sidepanel */ +.mailpoet_editor_settings { + color: $sidebar-text-color; + font-size: $sidebar-text-size; + + p { + font-size: 1em; + } + + h3 { + font-size: 1.4em; + color: $sidepanel-active-heading-color; + text-transform: uppercase; + } +} + +.mailpoet_sidepanel_field { + margin-top: 15px; + margin-bottom: 15px; +} + +.mailpoet_sidepanel_field_title { + clear: both; + margin-bottom: 5px; +} + +.mailpoet_sidepanel_field_title_small { + width: 120px; +} + +.mailpoet_sidepanel_field_title_inline { + display: inline-block; + vertical-align: middle; + line-height: 30px; + margin-bottom: 0; +} + +.mailpoet_sidepanel_field_optional { + font-size: 0.8em; + color: $primary-inactive-color; +} + +.mailpoet_sidepanel_radio_option, +.mailpoet_sidepanel_checkbox_option { + display: inline-block; + vertical-align: top; + margin-right: 15px; + line-height: 30px; + + &:last-child { + margin-right: 0; + } +} + +.mailpoet_sidepanel_input_option { + display: inline-block; + + input[type=checkbox] { + vertical-align: top; + } + + input[type=text] { + vertical-align: middle; + } +} diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_automatedLatestContent.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_automatedLatestContent.scss new file mode 100644 index 0000000000..5b54721114 --- /dev/null +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_automatedLatestContent.scss @@ -0,0 +1,43 @@ +.mailpoet_automated_latest_content_block { + padding: 0; +} + +.mailpoet_automated_latest_content_block_overlay { + position: absolute; + z-index: 19; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0); + transition: background 0.15s ease-out; + + .mailpoet_automated_latest_content_block:hover & { + background: rgba(255, 255, 255, 0.7); + cursor: pointer; + } +} + +.mailpoet_automated_latest_content_block_posts { + overflow: hidden; + pointer-events: none; + + & > .mailpoet_block { + width: 100%; + } + + .mailpoet_container_block { + margin-bottom: 0; + } +} + + +.mailpoet_automated_latest_content_display_options { + @include animation-slide-open-downwards(); +} + +.mailpoet_automated_latest_content_show_amount { + width: 25px; +} + +.mailpoet_automated_latest_content_content_type { + width: 180px; +} diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_base.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_base.scss new file mode 100644 index 0000000000..4ae6bf306f --- /dev/null +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_base.scss @@ -0,0 +1,97 @@ +$block-text-line-height: $text-line-height; + +.mailpoet_block { + box-sizing: border-box; + position: relative; + float: left; + background-color: inherit; + box-sizing: border-box; + + margin-bottom: 20px; + + padding-left: 20px; + padding-right: 20px; + + & > .mailpoet_block_highlight { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + pointer-events: none; + border: 2px solid $transparent-color; + transition: 0.3s; + z-index: 1; + } + + &:hover > .mailpoet_block_highlight { + border: 2px solid $editor-content-color; + } + + &.mailpoet_highlight > .mailpoet_block_highlight { + border: 2px solid $editor-content-color !important; + } + + & > .mailpoet_container_horizontal ~ .mailpoet_block_highlight { + top: -2px; + right: -2px; + bottom: -2px; + left: -2px; + } + + &:hover > .mailpoet_container_horizontal ~ .mailpoet_block_highlight { + border: 2px solid $editor-column-color; + } + + &.mailpoet_highlight > .mailpoet_container_horizontal ~ .mailpoet_block_highlight { + border: 2px solid $editor-column-color !important; + } +} + +.mailpoet_content { + position: relative; + line-height: $block-text-line-height; + + h1, h2, h3, h4, h5, h6 { + line-height: $block-text-line-height; + padding: 0; + margin: 0; + font-style: normal; + font-weight: normal; + } + + h1, h2, h3, h4, h5, h6 { + margin-bottom: 0.3em; + } + + p:not(.mailpoet_wp_post) { + margin-top: 0; + margin-bottom: 0; + padding: 0; + margin: 0; + } + + p { + line-height: $block-text-line-height; + font-style: normal; + font-weight: normal; + } + + ul { + padding: 0; + margin-top: 10px; + margin-bottom: 10px; + } + + li { + margin-top: 0; + font-weight: normal; + margin-bottom: 10px; + } + + blockquote { + margin: 0 0 $block-text-line-height; + padding-left: 10px; + border-left: 2px #565656 solid; + } +} diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_button.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_button.scss new file mode 100644 index 0000000000..5c05fe5387 --- /dev/null +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_button.scss @@ -0,0 +1,15 @@ +.mailpoet_button_block { + .mailpoet_editor_button { + display: block; + margin: auto; + line-height: 2em; + text-align: center; + text-decoration: none; + box-sizing: border-box; + max-width: 100%; + + &:hover { + cursor: all-scroll; + } + } +} diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_container.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_container.scss new file mode 100644 index 0000000000..577908a7a1 --- /dev/null +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_container.scss @@ -0,0 +1,92 @@ +$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 { + width: 100%; + min-height: 15px; + position: relative; +} + +.mailpoet_container_block { + margin-left: 0; + margin-right: 0; + position: relative; + box-sizing: border-box; + border: 0; + padding-left: 0; + padding-right: 0; + + &:hover > .mailpoet_block_highlight { + border: 0; + } +} + +.mailpoet_container_vertical > * { + width: 100%; + box-sizing: border-box; +} + +.mailpoet_container_horizontal > * { + vertical-align: top; +} + + +#mailpoet_editor_content { + .mailpoet_container { + box-sizing: border-box; + float: left; + } + & > .mailpoet_container_block { + width: $newsletter-width; + border: 0; + } + + & > .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_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 { + text-align: center; + background-color: #f2f2f2; + margin: 20px; + padding: 15px; + box-shadow: inset 1px 2px 1px $primary-inactive-color; + color: #656565; + border-radius: 3px; + @include animation-background-color(); +} diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_divider.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_divider.scss new file mode 100644 index 0000000000..f1ae5ed34e --- /dev/null +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_divider.scss @@ -0,0 +1,40 @@ +$active-divider-border-color: #adadad; +$active-divider-background-color: #daebf2; +$divider-hover-border-color: $primary-active-color; + +.mailpoet_divider_block { + padding-left: 0; + padding-right: 0; + margin-bottom: 0; + cursor: all-scroll; +} + +.mailpoet_divider { + margin-left: 20px; + margin-right: 20px; +} + +.mailpoet_field_divider_style { + max-width: $newsletter-width; + margin: auto; + display: block; + width: 100%; + border: 1px solid transparent; +} + +.mailpoet_active_divider_style { + border: 1px solid $active-divider-border-color; + background: $active-divider-background-color; +} + +.mailpoet_field_divider_style:hover { + border: 1px solid $divider-hover-border-color; +} + +.mailpoet_divider_selector img { + width: 100%; +} + +.mailpoet_field_divider_style { + padding: 10px 0; +} diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_footer.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_footer.scss new file mode 100644 index 0000000000..38f3b019a6 --- /dev/null +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_footer.scss @@ -0,0 +1,13 @@ +.mailpoet_footer_block { + padding-left: 0; + padding-right: 0; + margin-bottom: 0; + + .mailpoet_content { + padding: 10px 20px; + + & > *:last-child { + margin-bottom: 0; + } + } +} diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_header.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_header.scss new file mode 100644 index 0000000000..0e5592e9ce --- /dev/null +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_header.scss @@ -0,0 +1,13 @@ +.mailpoet_header_block { + padding-left: 0; + padding-right: 0; + margin-bottom: 0; + + .mailpoet_content { + padding: 10px 20px; + + & > *:last-child { + margin-bottom: 0; + } + } +} diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_image.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_image.scss new file mode 100644 index 0000000000..c5b630a955 --- /dev/null +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_image.scss @@ -0,0 +1,25 @@ +.mailpoet_image_block { + + img { + vertical-align: bottom; + max-width: 100%; + height: auto; + } + + &.mailpoet_full_image { + padding-left: 0; + padding-right: 0; + margin: auto; + margin-bottom: 0; + } + + .mailpoet_content { + margin: auto; + max-width: 100%; + min-width: 36px; + + a:hover { + cursor: all-scroll; + } + } +} diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_posts.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_posts.scss new file mode 100644 index 0000000000..3d8dc5f9a5 --- /dev/null +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_posts.scss @@ -0,0 +1,74 @@ +.mailpoet_posts_block { + padding-left: 0; + padding-right: 0; +} + +.mailpoet_posts_block_posts { + overflow: auto; + + & > .mailpoet_block { + width: 100%; + } +} + +.mailpoet_post_selection_filter_row { + margin-top: 5px; + margin-bottom: 5px; +} + +.mailpoet_posts_categories_and_tags { + width: 100%; +} + +.mailpoet_settings_posts_display_options, +.mailpoet_settings_posts_selection { + @include animation-slide-open-downwards(); + overflow-x: hidden; +} + +.mailpoet_settings_posts_show_display_options, +.mailpoet_settings_posts_show_post_selection { + display: block; + margin-top: 10px; +} + +.mailpoet_post_selection_container { + margin-top: 20px; + margin-bottom: 0; +} + +.mailpoet_post_scroll_container { + overflow-y: scroll; + overflow-x: hidden; + max-height: 400px; +} + +.mailpoet_settings_posts_single_post { + border-radius: 1px; + box-sizing: border-box; + width: 100%; + margin-top: 5px; + margin-bottom: 5px; + height: 38px; + line-height: 38px; + overflow: hidden; + border: 1px solid $content-border-color; + background-color: $white-color; + + &:hover { + border-color: $primary-active-color; + } + + .mailpoet_select_post_checkbox { + margin-left: 10px; + margin-right: 8px; + } +} + +.mailpoet_post_selection_loading { + color: #999; +} + +.mailpoet_posts_container > .mailpoet_droppable_block { + width: 100%; +} diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_social.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_social.scss new file mode 100644 index 0000000000..2bc5e969dc --- /dev/null +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_social.scss @@ -0,0 +1,133 @@ +$social-block-vertical-padding: 0px; + +$social-icon-width: 32px; +$active-social-icon-set-border-color: #adadad; +$active-social-icon-set-background-color: #daebf2; +$social-icon-set-hover-border-color: $primary-active-color; + +$tool-inactive-color: #333333; +$tool-hover-color: #bbbbbb; +$tool-active-color: #d2d2d4; + +$tool-width: 16px; + +.mailpoet_social_block { + padding-top: $social-block-vertical-padding; + padding-bottom: $social-block-vertical-padding; + + .mailpoet_social { + text-align: center; + } +} + +.mailpoet_social { + span { + display: inline-block; + padding: 2px 3px; + } + + span, a, + img { + + vertical-align: top; + } + + a { + cursor: all-scroll; + } +} + +.mailpoet_social_icon_set { + border: 1px solid transparent; + padding: 5px; + margin-bottom: 5px; + + &:hover { + border: 1px solid $social-icon-set-hover-border-color; + } + + img { + width: $social-icon-width; + height: $social-icon-width; + vertical-align: middle; + padding: 2px 3px; + } +} + +.mailpoet_active_icon_set { + border: 1px dashed $active-social-icon-set-border-color; + background-color: $active-social-icon-set-background-color; +} + +.mailpoet_social_icon_settings { + position: relative; + + padding: 28px 9px, 18px - 10px 9px; + margin-bottom: 9px; + + background: $white-color; + border: 1px solid $content-border-color; +} + +.mailpoet_social_icon_settings_row { + clear: both; + overflow: auto; + margin-bottom: 10px; + + line-height: 30px; +} + +.mailpoet_social_icon_settings_label { + margin-right: 5px; + text-align: left; + + .mailpoet_social_icon_image { + width: 30px; + height: 30px; + } + + &.mailpoet_social_icon_image_label { + line-height: initial; + } +} + +.mailpoet_social_icon_settings_form_element { + float: left; + width: 100%; + + input, select { + width: 100%; + height: 30px; + box-sizing: border-box; + margin: 0; + vertical-align: middle; + display: inline-block; + } +} + +.mailpoet_social_icon_settings_tool { + position: absolute; + top: 10px; + + .mailpoet_tool_icon { + fill: $tool-inactive-color; + width: $tool-width; + height: $tool-width; + + &:hover { + fill: $tool-hover-color; + } + + &:active { + fill: $primary-active-color; + } + } +} + +.mailpoet_social_icon_settings_move_icon { + right: 5px; +} + +.mailpoet_social_icon_settings_delete_icon { + right: 5px + 5px + $tool-width; +} diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_spacer.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_spacer.scss new file mode 100644 index 0000000000..e039eb17af --- /dev/null +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_spacer.scss @@ -0,0 +1,10 @@ +.mailpoet_spacer { + text-align: center; +} + +.mailpoet_spacer_block { + padding-left: 0; + padding-right: 0; + margin-bottom: 0; + cursor: all-scroll; +} diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_text.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_text.scss new file mode 100644 index 0000000000..5818c6e21f --- /dev/null +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_text.scss @@ -0,0 +1,16 @@ +.mailpoet_text_block { + padding-left: 0; + padding-right: 0; + + & > .mailpoet_content { + overflow: hidden; + padding-top: 0; + padding-bottom: 0px; + padding-left: 20px; + padding-right: 20px; + + & > *:last-child { + margin-bottom: 0; + } + } +} diff --git a/assets/css/src/components/newsletterEditor/mixins/_transitions.scss b/assets/css/src/components/newsletterEditor/mixins/_transitions.scss new file mode 100644 index 0000000000..7af1a888c2 --- /dev/null +++ b/assets/css/src/components/newsletterEditor/mixins/_transitions.scss @@ -0,0 +1,76 @@ +@mixin animation-slide-open-downwards($max-height: 2000px) { + transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1); /* ease-in-out */ + max-height: $max-height; + opacity: 1; + overflow-y: inherit; + + &.mailpoet_closed { + max-height: 0px; + opacity: 0; + } +} + +@mixin animation-background-color() { + transition: background 250ms cubic-bezier(0.42, 0, 0.58, 1); /* ease-in-out */ +} + +@mixin animation-fade-in() { + animation-name: fadeIn; + animation-duration: 300ms; + animation-fill-mode: forwards; + animation-timing-function: ease-in; +} + +@mixin animation-fade-in-and-scale-horizontally() { + transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1); /* ease-in-out */ +} + +@-webkit-keyframes fadeIn { + 0% { + opacity: 0.3; + } + + 100% { + opacity: 1; + } +} + +@-moz-keyframes fadeIn { + 0% { + opacity: 0.3; + } + + 100% { + opacity: 1; + } +} + +@-ms-keyframes fadeIn { + 0% { + opacity: 0.3; + } + + 100% { + opacity: 1; + } +} + +@-o-keyframes fadeIn { + 0% { + opacity: 0.3; + } + + 100% { + opacity: 1; + } +} + +@keyframes fadeIn { + 0% { + opacity: 0.3; + } + + 100% { + opacity: 1; + } +} diff --git a/assets/css/src/components/plugins/_members.scss b/assets/css/src/components/plugins/_members.scss new file mode 100644 index 0000000000..537d8a2ee0 --- /dev/null +++ b/assets/css/src/components/plugins/_members.scss @@ -0,0 +1,30 @@ +/* +Style for Members plugin +*/ +.members-tab-title { + .mailpoet-icon-logo { + background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNTIuMDIgMTU2LjQiPjxwYXRoIGQ9Ik0zNy43MSw4OS4xYzMuNSwwLDUuOS0uOCw3LjItMi4zYTgsOCwwLDAsMCwyLTUuNFYzNS43bDE3LDQ1LjFhMTIuNjgsMTIuNjgsMCwwLDAsMy43LDUuNGMxLjYsMS4zLDQsMiw3LjIsMmExMi41NCwxMi41NCwwLDAsMCw1LjktMS40LDguNDEsOC40MSwwLDAsMCwzLjktNWwxOC4xLTUwVjgxYTguNTMsOC41MywwLDAsMCwyLjEsNi4xYzEuNCwxLjQsMy43LDIuMiw2LjksMi4yLDMuNSwwLDUuOS0uOCw3LjItMi4zYTgsOCwwLDAsMCwyLTUuNFY4LjdhNy40OCw3LjQ4LDAsMCwwLTMuMy02LjZjLTIuMS0xLjQtNS0yLjEtOC42LTIuMWExOS4zLDE5LjMsMCwwLDAtOS40LDIsMTEuNjMsMTEuNjMsMCwwLDAtNS4xLDYuOEw3NC45MSw2Ny4xLDU0LjQxLDguNGExMi40LDEyLjQsMCwwLDAtNC41LTYuMmMtMi4xLTEuNS01LTIuMi04LjgtMi4yYTE2LjUxLDE2LjUxLDAsMCwwLTguOSwyLjFjLTIuMywxLjUtMy41LDMuOS0zLjUsNy4yVjgwLjhjMCwyLjguNyw0LjgsMiw2LjJDMzIuMjEsODguNCwzNC40MSw4OS4xLDM3LjcxLDg5LjFaIiAvPjxwYXRoIGQ9Ik0xNDksMTE2LjZsLTIuNC0xLjlhNy40LDcuNCwwLDAsMC05LjQuMywxOS42NSwxOS42NSwwLDAsMS0xMi41LDQuNmgtMjEuNEEzNy4wOCwzNy4wOCwwLDAsMCw3NywxMzAuNWwtMS4xLDEuMi0xLjEtMS4xYTM3LjI1LDM3LjI1LDAsMCwwLTI2LjMtMTAuOUgyN2ExOS41OSwxOS41OSwwLDAsMS0xMi40LTQuNiw3LjI4LDcuMjgsMCwwLDAtOS40LS4zbC0yLjQsMS45QTcuNDMsNy40MywwLDAsMCwwLDEyMi4yYTcuMTQsNy4xNCwwLDAsMCwyLjQsNS43QTM3LjI4LDM3LjI4LDAsMCwwLDI3LDEzNy40aDIxLjZhMTkuNTksMTkuNTksMCwwLDEsMTguOSwxNC40di4yYy4xLjcsMS4yLDQuNCw4LjUsNC40czguNC0zLjcsOC41LTQuNHYtLjJhMTkuNTksMTkuNTksMCwwLDEsMTguOS0xNC40SDEyNWEzNy4yOCwzNy4yOCwwLDAsMCwyNC42LTkuNSw3LjQyLDcuNDIsMCwwLDAsMi40LTUuN0E3Ljg2LDcuODYsMCwwLDAsMTQ5LDExNi42WiIgLz48L3N2Zz4=') no-repeat center; + background-size: contain; + display: inline-block; + height: 20px; + margin-right: 3px; + vertical-align: top; + width: 20px; + } + + &:not([aria-selected="true"]) .mailpoet-icon-logo { + + filter: invert(24%) sepia(95%) saturate(1872%) hue-rotate(179deg) brightness(93%) contrast(101%); + } + + > a:hover .mailpoet-icon-logo, + > a:active .mailpoet-icon-logo { + + filter: invert(49%) sepia(50%) saturate(3683%) hue-rotate(163deg) brightness(94%) contrast(101%); + } + + &[aria-selected="true"] a .mailpoet-icon-logo { + + filter: invert(33%) sepia(0%) saturate(7%) hue-rotate(205deg) brightness(94%) contrast(87%); + } +} diff --git a/assets/css/src/datepicker/datepicker.styl b/assets/css/src/datepicker/datepicker.styl deleted file mode 100644 index 702e198875..0000000000 --- a/assets/css/src/datepicker/datepicker.styl +++ /dev/null @@ -1,2 +0,0 @@ -@require 'jquery-ui-1.10.1.css' -@require 'melon.datepicker.css' diff --git a/assets/css/src/discounts.styl b/assets/css/src/discounts.styl deleted file mode 100644 index ba2740dd46..0000000000 --- a/assets/css/src/discounts.styl +++ /dev/null @@ -1,17 +0,0 @@ -.mailpoet-discount-container - margin: 15px - padding: 20px - background: white - border: 1px solid #FF5301 - text-align: center - -.mailpoet-discount-container h1 - margin: 0 - line-height: 1.2em - font-size: 2.8em - font-weight: 400 - -.mailpoet-discount-container p - line-height: 1.2em - font-size: 1.2em - diff --git a/assets/css/src/feature_announcement.styl b/assets/css/src/feature_announcement.styl deleted file mode 100644 index d0f6b346d2..0000000000 --- a/assets/css/src/feature_announcement.styl +++ /dev/null @@ -1,21 +0,0 @@ -.mailpoet_feature_announcement - float: right - -.button.mailpoet_feature_announcement_button - height: 28px - padding:0 5px 1px - position: relative - -.mailpoet_feature_announcement_icon - line-height: 28px - -.mailpoet_feature_announcement_dot::before - content: "" - display: block - position: absolute - top: -4px - right: -4px - height: 10px - width: 10px - background: #d54e21 - border-radius: 10px diff --git a/assets/css/src/form.styl b/assets/css/src/form.styl deleted file mode 100644 index 999681a9ad..0000000000 --- a/assets/css/src/form.styl +++ /dev/null @@ -1,5 +0,0 @@ -.mailpoet_form - margin: 0 0 20px 0 - -.mailpoet_form td - vertical-align: top !important diff --git a/assets/css/src/form_editor.styl b/assets/css/src/form_editor.styl deleted file mode 100644 index 11accb662d..0000000000 --- a/assets/css/src/form_editor.styl +++ /dev/null @@ -1,566 +0,0 @@ -@require 'codemirror/lib/codemirror.css' -@require 'codemirror/theme/neo.css' - -icons = '../../img/form_editor_icons.png' -handle_icon = '../../img/handle.png' - -#mailpoet_form_name - font-size: 23px - -#mailpoet_form_history - display: none - -#mailpoet_form_editor - padding: 20px - width: 300px - border: 1px solid #ccc - position: relative - background-color: #fff - box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.1) - -#mailpoet_form_editor:before, -#mailpoet_form_editor:after - position: absolute - width: 40% - height: 10px - content: ' ' - left: 12px - bottom: 12px - background: transparent - -webkit-transform: skew(-5deg) rotate(-5deg) - -ms-transform: skew(-5deg) rotate(-5deg) - transform: skew(-5deg) rotate(-5deg) - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3) - z-index: -1 - -#mailpoet_form_editor:after - left: auto - right: 12px - -webkit-transform: skew(5deg) rotate(5deg) - -ms-transform: skew(5deg) rotate(5deg) - transform: skew(5deg) rotate(5deg) - -/* Warnings in blocks*/ -.mailpoet_warning - font-weight: bold - color: #900 - -.block_placeholder - font-weight: bold - height: 0 - overflow: hidden - line-height: 30px - text-align: center - border: 0 none - width: 298px - z-index: 9500 - margin: 0 auto - text-indent: -9999px - -.block_placeholder.active - text-indent: 0 - /*border:1px dashed #dfdfdf;*/ - /*background-color:#f5f5f5;*/ - background-color: #4cb7e1 - display: block - overflow: auto - height: 30px - -.block_placeholder.hover - background-color: #0074a2 - border-color: #0074a2 - color: #fff - -.mailpoet_form_block - background-color: #fff - height: 20px - border: 0 none - -.mailpoet_form_block.highlighted - border: 1px solid #5897FB - padding: 9px 17px - -.mailpoet_form_block img - max-width: 100% - -/* Widget styles */ -.mailpoet_form_block p - margin: 5px 0 - word-wrap: break-word - -/* Widget: checkbox, radio */ -.mailpoet_radio, -.mailpoet_checkbox - margin: -2px 5px 0 0 - -/* MailPoet Form wrapper */ -#mailpoet_form_wrapper - position: relative - margin: 20px 0 0 0 - -/* MailPoet Form container */ -#mailpoet_form_container - width: 340px - margin: 0 - -#mailpoet_form_editor.loading, -#mailpoet_form_toolbar.loading - background: url(loading.gif) no-repeat center center #fcfcfc - -#mailpoet_form_toolbar.loading - border: 1px solid #dfdfdf - -#mailpoet_form_toolbar.loading #mailpoet_toolbar_fields - visibility: hidden - z-index: 1 - -/* Tabs : content/images/styles/themes */ -#wysija-add-field - float: none - -#mailpoet_form_toolbar - z-index: 999 - position: absolute - width: 400px - -#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs - border-bottom: 1px solid #dfdfdf - line-height: 0 - -#mailpoet_form_toolbar .add_custom_field - text-align: center - padding: 15px 0 5px 0 - -#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs li, -#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a - margin: 0 - height: 30px - line-height: 30px - padding: 0 - display: -moz-inline-box - display: inline-block - *display: inline - *float: left - outline: 0 none - -#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a - outline: 0 none - text-decoration: none - color: #a6a6a6 - -#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs li - margin: 0 0 1px 0 - -#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a - font-family: Georgia,"Times New Roman","Bitstream Charter",Times,serif - background-color: #F5F5F5 - background linear-gradient(center top, #F9F9F9, #F5F5F5) - border: 1px solid #DFDFDF - border-radius: 3px 3px 0 0 - box-shadow: 0 1px 0 #FFFFFF inset - padding: 0 7px - -#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a:hover - background-color: #eee - -#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a.selected - color: #000 - border-bottom: 0 none - background: #fcfcfc - filter: none - padding-bottom: 1px - -#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs .last a - -.wysija_params - display: none !important - -#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs, -#mailpoet_form_toolbar #mailpoet_toolbar_fields - position: relative - z-index: 9998 - margin: 0 - -/* edit form name */ -#mailpoet_form_name_input - vertical-align: bottom - -/* wysija widgets */ -.mailpoet_form_widget - width: 298px - height: 25px - line-height: 25px - z-index: 9999 !important - -.mailpoet_toolbar_section - margin-bottom: 0 - background: none repeat scroll 0 0 #fff - border: 1px solid #e5e5e5 - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04) - min-width: 255px - position: relative - cursor: pointer - overflow: hidden - max-height: 1000px - transition: max-height 0.5s ease-in-out - -.mailpoet_toolbar_section > div - padding: 10px 20px 20px 20px - overflow: auto - height: 100% - min-width: 255px - -.mailpoet_toolbar_section h3 - margin: 10px - position: relative - -.mailpoet_toolbar_section.closed - max-height: 38px - -.mailpoet_toolbar_section .mailpoet_toggle - position: absolute - top: 0 - right: 0 - height: 38px - width: 27px - -.mailpoet_toolbar_section .mailpoet_toggle:focus - outline: 0 none !important - box-shadow: none !important - -.mailpoet_toolbar_section .mailpoet_toggle:before - right: 12px - font: 400 20px/1 dashicons - speak: none - display: inline-block - padding: 8px 10px - top: 0 - position: relative - -webkit-font-smoothing: antialiased - -moz-osx-font-smoothing: grayscale - text-decoration: none!important - content: '\f142' - -.mailpoet_toolbar_section.closed .mailpoet_toggle:before - content: '\f140' - -#mailpoet_form_styles - margin: 10px - max-width: 318px - width: 318px - min-height: 300px - resize: vertical - -#mailpoet_form_toolbar a.mailpoet_form_field, -.mailpoet_form_widget - height: 25px - line-height: 25px - background-color: #F5F5F5 - background linear-gradient(center top, #F9F9F9, #ececec) - border: 1px solid #DFDFDF - border-radius: 3px - box-shadow: 0 1px 0 #FFFFFF inset - display: block - font-size: 12px - font-weight: bold - padding: 0 7px - cursor: move - color: #222 - text-shadow: 0 1px 0 #FFFFFF - -#mailpoet_form_toolbar a.mailpoet_form_field.disabled - cursor: pointer - color: #cccccc - pointer-events: none - -.mailpoet_form_field_edit - position: absolute - right: 27px - bottom: 13px - -.mailpoet_form_field_delete - position: absolute - right: 7px - bottom: 13px - -/* toolbar: fields */ -#mailpoet_toolbar_fields li - padding: 0 0 10px 0 - position: relative - -#mailpoet_toolbar_fields li.notice - font-style: italic - font-size: 11px - margin: 0 !important - border: 0 none !important - background: none !important - -/* blocks */ -.mailpoet_form_block - position: relative - margin: 0 - padding: 10px 18px 10px 18px - display: inline-table - display: block - height: 1% - margin: 0 - z-index: 98 - -.mailpoet_form_block.dragging - z-index: 99000 - pointer-events: none - -.mailpoet_form_block:after - content: "." - display: block - height: 0 - clear: both - visibility: hidden - -.mailpoet_form_block.hover - border: 1px dashed #bbb - margin: 0 0 0 0 - padding: 9px 17px 9px 17px - -.mailpoet_form_block.static - /*padding:0; - margin:0;*/ - background-color: #999 - -/* controls*/ -.mailpoet_form_block .wysija_controls - background-color: #dfdfdf - background linear-gradient(center top, #eee, #bbb) - border-radius: 2px - border: 1px solid #ccc - position: absolute - margin: 0 - padding: 0 - width: 298px - height: 20px - left: -1px - right: 0 - top: -22px - -.mailpoet_form_block .wysija_controls li - float: left - width: 20px - height: 20px - -.mailpoet_form_block .wysija_controls a - cursor: pointer - float: left - font-size: 120% - font-weight: bold - height: 20px - line-height: 20px - text-align: center - width: 20px - color: #000 - -.mailpoet_form_block .wysija_controls a.remove - margin: 0 0 0 1px - -.mailpoet_form_block .handle_container, -.mailpoet_form_block .handle_container a - float: none - width: 40px !important - -.mailpoet_form_block .handle_container - left: 140px - top: 0 - position: absolute - -/* controls & icons */ -.wysija_controls a span, -.wysija_gallery .wysija_tools a span, -.wysija_image .wysija_tools a span, -.wysija_text .wysija_tools a span, -#mailpoet_toolbar_fields a span - display: block - height: 20px - width: 20px - -/* toolbar: full width button */ -/* color picker in control bars */ -.wysija_controls span input - margin: 2px 0 0 0 - padding: 0 - color: transparent - -/* left alignment button */ -.alignment-left span - background: url(icons) no-repeat 0 0 - -.alignment-left.active span, -.alignment-left:hover span - background: url(icons) no-repeat 0 -20px - -/* center alignment button */ -.alignment-center span - background: url(icons) no-repeat -20px 0 - -.alignment-center.active span, -.alignment-center:hover span - background: url(icons) no-repeat -20px -20px - -/* right alignment button */ -.alignment-right span - background: url(icons) no-repeat -40px 0 - -.alignment-right.active span, -.alignment-right:hover span - background: url(icons) no-repeat -40px -20px - -/* linking */ -.add-link span - background: url(icons) no-repeat -60px 0 - -.add-link.active span, -.add-link:hover span - background: url(icons) no-repeat -60px -20px - -.remove-link span - background: url(icons) no-repeat -80px 0 - -.remove-link.active span, -.remove-link:hover span - background: url(icons) no-repeat -80px -20px - -/* block controls */ -.remove span, -.delete span - background: url(icons) no-repeat -100px 0 - -.remove.active span, -.remove:hover span, -.delete.active span, -.delete:hover span - background: url(icons) no-repeat -100px -20px - -.handle span - background: url(handle_icon) no-repeat - cursor: move - width: 40px !important - -.duplicate span - background: url(icons) no-repeat -140px 0 - -.duplicate.active span, -.duplicate:hover span - background: url(icons) no-repeat -140px -20px - -.settings span - background: url(icons) no-repeat -160px 0 - -.settings.active span, -.settings:hover span - background: url(icons) no-repeat -160px -20px - -.icon-plus span - background: url(icons) no-repeat -200px 0 - -.icon-plus.active span, -.icon-plus:hover span - background: url(icons) no-repeat -200px -20px - -.icon-minus span - background: url(icons) no-repeat -220px 0 - -.icon-minus.active span, -.icon-minus:hover span - background: url(icons) no-repeat -220px -20px - -/* wysija options */ -.wysija_options - display: none - -/* wysija block settings */ -.wysija_settings - position: absolute - z-index: 1000 - -.wysija_settings a - background-color: #F5F5F5 - background linear-gradient(center top, #F9F9F9, #ececec) - border: 1px solid #DFDFDF - border-radius: 3px - box-shadow: 0 1px 0 #FFFFFF inset - font-size: 12px - font-weight: normal - cursor: pointer - color: #222 - text-shadow: 0 1px 0 #FFFFFF - text-decoration: none - display: block - padding: 5px 5px 3px 27px - -.wysija_settings a span - width: 20px - height: 20px - position: absolute - top: 3px - left: 5px - -/* labels */ -.mailpoet_form_block label - margin: 0 5px 0 0 - display: block - -/* form settings: success message */ -#mailpoet_on_success textarea, -#mailpoet_on_success select - width: 100% - -#mailpoet_on_success textarea - height: 50px - min-height: 50px - resize: vertical - -/* make sure textareas within the form editor are not resizeable */ -.mailpoet_form_block textarea - resize: none - -/* remove click events from inputs within form editor */ -.mailpoet_form_block input, -.mailpoet_form_block textarea - pointer-events: none - -/* form export */ -#mailpoet_form_export textarea - width: 340px - height: 150px - min-height: 150px - resize: vertical - font-size: 85% - display: none - -/** Styling for WP 3.8 and higher */ -.mailpoet_form_field_edit, -.mailpoet_form_field_delete - text-decoration: none - -.mailpoet_form_field_edit:hover .dashicons-admin-generic:before, -.mailpoet_form_field_delete:hover .dashicons-dismiss:before, -.settings:hover .dashicons-admin-generic:before - color: #2ea2cc - -.mailpoet_form_field_edit span, -.mailpoet_form_field_delete span - background: none !important - color: #999 - -.mailpoet_form_field_delete span:before - font-size: 21px - -/* Code Mirror */ -.CodeMirror - border: 1px solid #eee - -/* Settings */ -#mailpoet_form_segments.parsley-error + span .select2-selection - border: 1px solid #b94a48 - -.mailpoet_form_field_settings_text - width: 100% - min-height: 100px; diff --git a/assets/css/src/form_validation.styl b/assets/css/src/form_validation.styl deleted file mode 100644 index 558f2c6994..0000000000 --- a/assets/css/src/form_validation.styl +++ /dev/null @@ -1,6 +0,0 @@ -.parsley-errors-list - margin-top: 8px - -.parsley-required -.parsley-custom-error-message - color: #b94a48 \ No newline at end of file diff --git a/assets/css/src/importExport.scss b/assets/css/src/importExport.scss new file mode 100644 index 0000000000..d9d1609274 --- /dev/null +++ b/assets/css/src/importExport.scss @@ -0,0 +1 @@ +@import 'components/importExport'; diff --git a/assets/css/src/importExport.styl b/assets/css/src/importExport.styl deleted file mode 100644 index 07e0e01970..0000000000 --- a/assets/css/src/importExport.styl +++ /dev/null @@ -1,98 +0,0 @@ -.mailpoet_hidden, .mailpoet_validation_error - display none - -.form-table - th - width 300px - -#paste_input - width 100% - -input[type="radio"] - margin-right 0.5em !important - & + span - margin-right 2.5em - -span - &.mailpoet_mailchimp-key-status - &.mailpoet_mailchimp-ok - &:before - content "\2713" - color #0e90d2 - margin-left 15px - &.mailpoet_mailchimp-error - &:before - content "\2717" - color #900 - margin-left 15px - -#subscribers_data - overflow auto - table - width auto - td - padding 0.5em - & > table - & > tbody - & > td - padding 0.5em - & > tr - &:nth-child(odd) - background #f9f9f9 - .mailpoet_header - text-transform uppercase - font-weight 600 - text-decoration underline - -#subscribers_data th:first-child, #subscribers_data td:first-child - width 10em !important - text-align center !important - padding 0 1em 0 1em !important - vertical-align inherit !important - -#subscribers_data - & > table - & > thead - & > tr - & > th - & > span - width 15em !important - -.mailpoet_data_match - color #0e90d2 - margin-left 0.25em - -.mailpoet_import_error, .mailpoet_validation_error - color #900 - -tr - &.mailpoet_segments - & > td - & > a - margin-left 15px - -span - &.select2-search - &.select2-search--dropdown - display none !important - -.mailpoet_import_validation_step - max-width: 600px - display: flex - flex-direction: column - - .mailpoet_import_step_buttons - flex-direction: row - margin-top: 1.5em - - p - margin-left: 2em - - label - margin-top: 1.5em - margin-bottom: 0.3em - padding-left: 35px; - text-indent: -35px; - input - margin-right: 0.5em - diff --git a/assets/css/src/in_app_announcements.styl b/assets/css/src/in_app_announcements.styl deleted file mode 100644 index fa1179a66c..0000000000 --- a/assets/css/src/in_app_announcements.styl +++ /dev/null @@ -1,33 +0,0 @@ -.mailpoet_in_app_announcement_pulsing_dot - display: inline-block - width: 10px - height: 10px - border-radius: 50% - background: #ff5301 - cursor: pointer - box-shadow: 0 0 0 rgba(255, 83, 1, 0.4) - animation: mailpoet_in_app_dot_pulse 2s infinite - -@-webkit-keyframes mailpoet_in_app_dot_pulse - 0% - box-shadow: 0 0 0 0 rgba(255, 83, 1, 0.4) - 70% - box-shadow: 0 0 0 10px rgba(255, 83, 1, 0) - 100% - box-shadow: 0 0 0 0 rgba(255, 83, 1, 0) - -@keyframes mailpoet_in_app_dot_pulse - 0% - box-shadow: 0 0 0 0 rgba(255, 83, 1, 0.4) - 70% - box-shadow: 0 0 0 10px rgba(255, 83, 1, 0) - 100% - box-shadow: 0 0 0 0 rgba(255, 83, 1, 0) - -.mailpoet_drag_and_drop_tutorial - text-align: center - -.new_subscriber_notification_announcement - h2 - font-size: 28px - text-align: center diff --git a/assets/css/src/intro.styl b/assets/css/src/intro.styl deleted file mode 100644 index 4c2d8e3202..0000000000 --- a/assets/css/src/intro.styl +++ /dev/null @@ -1,71 +0,0 @@ -.mailpoet-intro-active #adminmenuback - z-index: auto; - -// fix for intro.js bug (https://github.com/heelhook/chardin.js/issues/26) causing -// target element appear under helper layer when parent has 'position: fixed' - this -// happens when sticky WP menu is fixed, it could cause it to scroll away, but since -// intro is shown when page is empty (= shorter than menu), it should never happen -#adminmenuwrap.introjs-fixParent - position: absolute - -#adminmenu li.introjs-showElement - background: inherit - -.introjs-helperLayer - border: none - border-radius: 3px - background-color: rgba(255, 255, 255, .7) - -.introjs-tooltip - min-width: 240px - - // fix for wrong bottom-up tooltip vertical align, bottom-up tooltips - // have (negative) 'top' set in intro.js, no other way to select them - &[style*="top:"] - margin-top: -8px - -.introjs-tooltip .introjs-tooltipbuttons - display: flex - justify-content: flex-end - -.introjs-tooltip .button - margin-top: 15px - position: relative - - &:hover, &:focus - z-index: 1 - - // fix for focused button not having 2px bottom border (as non-focused do) - &:focus - height: 100% - margin-bottom: -1px - - &:after - content: '' - position: absolute - bottom: 0 - left: 0 - right: 0 - height: 1px - background: #5b9dd9 - - &.introjs-hidden - display: none - - &.introjs-skipbutton:not(.introjs-donebutton) - margin-right: auto - - & + .button - margin-left: 10px - - &.introjs-donebutton - order: 1 - - &.introjs-prevbutton - border-top-right-radius: 0 - border-bottom-right-radius: 0 - - &:not(.introjs-hidden) + .introjs-nextbutton, &.introjs-donebutton - border-top-left-radius: 0 - border-bottom-left-radius: 0 - margin-left: -1px diff --git a/assets/css/src/listing.styl b/assets/css/src/listing.styl deleted file mode 100644 index 94329ca79b..0000000000 --- a/assets/css/src/listing.styl +++ /dev/null @@ -1,34 +0,0 @@ -.mailpoet_listing_loading tbody tr -.mailpoet_form_loading tbody tr - opacity: 0.2 - -.mailpoet_select_all - background-color: #f1f1f1 - -.mailpoet_select_all td - text-align: center - -.mailpoet_listing_table - th span - white-space: nowrap - - thead .mailpoet-check-column - tfoot .mailpoet-check-column - padding: 10px 0 0 3px - width: 2.2em; - vertical-align: top; - - tbody .mailpoet-check-column - margin: 0 0 0 8px; - vertical-align: text-top; - padding: 11px 0 0 3px; - - thead th.column-primary - tfoot th.column-primary - width: 25em - - // responsive - @media screen and (max-width: 782px) - thead th.column-primary - tfoot th.column-primary - width: 100% diff --git a/assets/css/src/listing/newsletters.styl b/assets/css/src/listing/newsletters.styl deleted file mode 100644 index 4b0f5cb802..0000000000 --- a/assets/css/src/listing/newsletters.styl +++ /dev/null @@ -1,65 +0,0 @@ -$excellent-badge-color = #2993ab -$good-badge-color = #f0b849 -$bad-badge-color = #d54e21 -$green-badge-color = #55bd56 -$video-guide-badge-color = #46b450 - -#newsletters_container - h2.nav-tab-wrapper - margin-bottom: 1rem - -.mailpoet_stats_text - font-size: 14px - font-weight: 600; - -.mailpoet_stat - - &_excellent - color: $excellent-badge-color - - &_good - color: $good-badge-color - - &_bad - color: $bad-badge-color - - &_hidden - display: none - - &_link_small - text-decoration: underline !important - font-size: 0.75rem - -.mailpoet_badge - padding: 4px 6px 3px 6px - margin-right: 4px - badge() - - &_excellent, &_teal - background: $excellent-badge-color - - &_good, &_yellow - background: $good-badge-color - - &_bad, &_red - background: $bad-badge-color - - &_green - background: $green-badge-color - - &_video - background: $video-guide-badge-color - line-height: 5em - padding: 7px 6px 7px 6px - text-decoration: none - - &:hover, &:active, &:focus - color: #FFFFFF - background: $green-badge-color - - &_grey - background: #c3c3c3 - - .dashicons - font-size: 14px; - line-height: 3.4em; diff --git a/assets/css/src/modal.styl b/assets/css/src/modal.styl deleted file mode 100644 index acb6250f97..0000000000 --- a/assets/css/src/modal.styl +++ /dev/null @@ -1,242 +0,0 @@ -modal_title_color = #cfcfcf -modal_highlight_background_color = #f1f1f1 -modal_background_color = #fff -modal_popup_margin = 30px -modal_popup_margin_mobile = 10px -modal_popup_padding = 30px -modal_popup_padding_mobile = 12px -modal_close_button_size = 23px -overlay_background_color = rgba(0, 0, 0, 0.6) - -// hide scrollbars on background when a modal window opened -body.mailpoet_modal_opened - overflow: hidden - -// overlay -.mailpoet_modal_overlay - height: 100% - left: 0 - overflow-y: auto - overflow-x: hidden - position: fixed - top: 0 - width: 100% - z-index: 100000 - background-color: overlay_background_color - display: flex - align-items: center - justify-content: center - padding: modal_popup_margin - box-sizing: border-box - -.mailpoet_modal_highlight - pointer-events: none - background-color: modal_highlight_background_color - position: relative - z-index: 100001 !important - box-shadow: 0px 0px 20px 2px alpha(#fff, 75%) - -// overlay: state -.mailpoet_modal_overlay.mailpoet_overlay_hidden - background-color: transparent - -// overlay: state -.mailpoet_modal_overlay.mailpoet_overlay_loading - background-color: overlay_background_color !important - display: flex !important - -// modal popup -.mailpoet_popup - z-index: 25 - max-width: 100% - margin: auto - animation: mailpoet_popup_fadein .5s - -@keyframes mailpoet_popup_fadein - from - opacity: 0 - to - opacity: 1 - -.mailpoet_popup_wrapper - display: flex - flex-flow: column - background-color: modal_background_color - overflow: hidden - position: relative - width: 100% - height: 100% - z-index: 0 - border-radius: 4px - box-shadow: 1px 2px 4px #343434 - box-sizing: border-box - padding: modal_popup_padding - -.mailpoet_overlay_hidden .mailpoet_popup_wrapper - border: 1px solid #333 - -.mailpoet_popup_title h2 - font-size: 23px; - font-weight: 600; - line-height: 29px; - margin: 0 (modal_close_button_size + 20) 0 0 - -.mailpoet_popup_body - flex-grow: 1 - position: relative - margin-top: 20px - - .button + .button - margin-left: 10px - -.mailpoet_popup_has_title .mailpoet_popup_body - margin-top: 30px - -// modal panel -.mailpoet_modal_overlay.mailpoet_panel_overlay - top: 32px - overflow: hidden - -.mailpoet_panel - display: none - position: fixed - z-index: 100002 - top: 0 - bottom: 0 - padding: 0 - margin: 0 - width: 100% - transition: margin 350ms ease-out - -.mailpoet_panel_wrapper - background-color: #f1f1f1 - border: 1px solid #e1e1e1 - border-top: 0 none - height: 100% - overflow-y: auto - overflow-x: hidden - width: 100% - top: 0 - z-index: 0 - -.mailpoet_panel_title - margin: 0 - padding: 0 - position: relative - height: 0 - -.mailpoet_panel_title h2 - color: modal_title_color - border-left: 1px solid #444 - border-right: 1px solid #444 - font-size: 1em - font-weight: normal - margin: 0 - padding: 0 30px 0 10px - font-family: "Lucida Grande", Verdana, Arial, sans-serif - line-height: 32px - -.mailpoet_panel_body - padding: 10px 10px 36px 10px - -// modal button -.mailpoet_modal_close - cursor: pointer - position: absolute - overflow: hidden - padding: 0 - z-index: 2 - outline: 0 none - - svg - opacity: .5 - stroke: #979797 - - &:hover - stroke: #636363 - -.mailpoet_popup .mailpoet_modal_close - right: modal_popup_padding - top: modal_popup_padding - width: modal_close_button_size - height: modal_close_button_size - padding: 3px 0 - -.mailpoet_panel .mailpoet_modal_close - width: 16px - height: 16px - right: 20px - top: 20px - padding: 2px 0 - -.mailpoet_modal_close:focus - outline: 0 none - -// buttons -.mailpoet_align_left - margin: 0 - text-align: left - -.mailpoet_align_center - margin: 0 - text-align: center - -.mailpoet_align_right - margin: 0 - text-align: right - -@media screen and (max-width: 782px) - .mailpoet_modal_overlay - padding: modal_popup_margin_mobile - - .mailpoet_popup - width: 100% - min-width: auto !important - - .mailpoet_popup_wrapper - padding: modal_popup_padding_mobile - - .mailpoet_popup_title h2 - margin-right: modal_close_button_size + 10 - - .mailpoet_popup .mailpoet_modal_close - top: modal_popup_padding_mobile - right: modal_popup_padding_mobile - - .mailpoet_modal_overlay.mailpoet_panel_overlay - top: 46px - - .mailpoet_panel_body - padding-bottom: 52px - -.mailpoet_loading - height: 32px - width: 150px - display flex - flex-direction: row - -.mailpoet_modal_loading - animation-direction(linear) - animation-duration(1.9500000000000002s) - animation-iteration-count(infinite) - animation-name(bounce_mailpoet_modal_loading) - border-radius: 21px - background-color: #E01D4E - height: 32px - margin-left: 17px - width: 32px - -.mailpoet_modal_loading_1, .mailpoet_modal_loading_1 - animation-delay(0.39s) - -.mailpoet_modal_loading_2, .mailpoet_modal_loading_2 - animation-delay(0.9099999999999999s) - -.mailpoet_modal_loading_3, .mailpoet_modal_loading_3 - animation-delay(1.1700000000000002s) - -@keyframes bounce_mailpoet_modal_loading - 0% - 50% - background-color: #064E6D - 100% diff --git a/assets/css/src/mp2migrator.styl b/assets/css/src/mp2migrator.styl deleted file mode 100644 index bddcfefb9f..0000000000 --- a/assets/css/src/mp2migrator.styl +++ /dev/null @@ -1,33 +0,0 @@ -#logger - width: 100% - height: 300px - background-color: transparent - border: 0 - border-top: 1px #aba9a9 solid - padding: 2px - overflow: scroll - resize: both - font-size: 0.85em - margin-top: 20px - -#progressbar - width: 50% - background-color: #d8d8d8 - border-radius: 5px - -progressbar_color = #fecf23 -progressbar_gradient_to_color = #fd9215 - -.ui-progressbar .ui-progressbar-value - height: 100% - background-color: progressbar_color - background-image: linear-gradient(to bottom, progressbar_color, progressbar_gradient_to_color) - border-radius: 3px - box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset - border 0 - -.mailpoet_progress_label - font-size: 15px - -.error_msg - color: #f00 diff --git a/assets/css/src/newsletterEditor.scss b/assets/css/src/newsletterEditor.scss new file mode 100644 index 0000000000..ec3949f5e4 --- /dev/null +++ b/assets/css/src/newsletterEditor.scss @@ -0,0 +1,35 @@ +@import '../../../node_modules/select2/dist/css/select2'; +@import '../../../node_modules/spectrum-colorpicker/spectrum'; + +@import 'components/newsletterEditor/mixins/transitions'; + +@import 'components/newsletterEditor/variables'; +@import 'components/newsletterEditor/common'; +@import 'components/newsletterEditor/layout'; + + +@import 'components/newsletterEditor/components/forms'; +@import 'components/newsletterEditor/components/heading'; +@import 'components/newsletterEditor/components/sidebar'; +@import 'components/newsletterEditor/components/sidepanel'; +@import 'components/newsletterEditor/components/save'; +@import 'components/newsletterEditor/components/blockTools'; +@import 'components/newsletterEditor/components/layers'; +@import 'components/newsletterEditor/components/dragAndDrop'; +@import 'components/newsletterEditor/components/resize'; + + +@import 'components/newsletterEditor/contentBlocks/base'; +@import 'components/newsletterEditor/contentBlocks/container'; +@import 'components/newsletterEditor/contentBlocks/automatedLatestContent'; +@import 'components/newsletterEditor/contentBlocks/posts'; +@import 'components/newsletterEditor/contentBlocks/button'; +@import 'components/newsletterEditor/contentBlocks/divider'; +@import 'components/newsletterEditor/contentBlocks/image'; +@import 'components/newsletterEditor/contentBlocks/social'; +@import 'components/newsletterEditor/contentBlocks/spacer'; +@import 'components/newsletterEditor/contentBlocks/text'; +@import 'components/newsletterEditor/contentBlocks/header'; +@import 'components/newsletterEditor/contentBlocks/footer'; + +@import 'components/newsletterEditor/libraryOverrides'; diff --git a/assets/css/src/newsletter_congratulate.styl b/assets/css/src/newsletter_congratulate.styl deleted file mode 100644 index ca7632ba49..0000000000 --- a/assets/css/src/newsletter_congratulate.styl +++ /dev/null @@ -1,29 +0,0 @@ -.newsletter_congratulate_page - margin-top: 30px; - -.mailpoet_newsletter_loading - text-align: center; - - .mailpoet_loading - margin: 100px auto 0 auto; - - .mailpoet_newsletter_loading_header - margin: 30px; - -.mailpoet_congratulate_success - width: 100%; - - h1 - text-align center; - margin-bottom: 30px; - - img, .button - margin-left: auto; - margin-right: auto; - display: block; - - .typeform-widget - height: 350px - margin: 0 auto 30px - max-width: 100% - width: 500px diff --git a/assets/css/src/newsletter_editor/common.styl b/assets/css/src/newsletter_editor/common.styl deleted file mode 100644 index 93b0611cea..0000000000 --- a/assets/css/src/newsletter_editor/common.styl +++ /dev/null @@ -1,260 +0,0 @@ -$link-color = $primary-active-background-color - -$select-border-color = $content-border-color -$select-text-color = $primary-text-color - -$button-default-border-color = $structure-border-color -$button-default-background-color = $primary-background-color -$button-default-text-color = $primary-inactive-color - -$button-primary-border-color = $primary-active-color -$button-primary-background-color = $primary-active-background-color -$button-primary-hover-background-color = $primary-active-color-highlight -$button-primary-text-color = $white-color - -$range-track-background-color = $white-color -$range-track-border-color = $structure-border-color -$range-track-height = 12px -$range-thumb-background-color = $primary-inactive-color -$range-thumb-border-color = #333 -$range-thumb-width = 13px -$range-thumb-height = 26px -$range-border-radius = 3px -$range-thumb-hover-background-color = $primary-active-color - -a - color: $link-color - text-decoration: none - -.mailpoet_hidden - display: none !important - -input.mailpoet_color - width: 5em - -select.mailpoet_font-family - width: 8em - -select.mailpoet_font-size - width: 5em - -.mailpoet_input, .mailpoet_select - border-radius: 1px - box-shadow: none !important - appearance: none - - padding: $form-control-padding = 3px - line-height: 28px - $form-control-padding*2 - -.mailpoet_input - width: 283px - border: 1px solid $select-border-color - -.mailpoet_input_small - width: 58px - -.mailpoet_input_medium - width: 150px - -.mailpoet_input_full - box-sizing: border-box - margin: 0 - width: 100% - -.mailpoet_range - width: 283px - -webkit-appearance: none - padding: 0 - vertical-align: middle - - &:focus - outline: none - &::-webkit-slider-runnable-track - width: 100% - height: $range-track-height - cursor: pointer - animate: 0.2s - background: $range-track-background-color - border-radius: $range-border-radius - border: 1px solid $range-track-border-color - &::-webkit-slider-thumb - border: 1px solid $range-thumb-border-color - height: $range-thumb-height - width: $range-thumb-width - border-radius: $range-border-radius - background: $range-thumb-background-color - cursor: pointer - -webkit-appearance: none - margin-top: (-1 * $range-thumb-height / 3) - &:hover::-webkit-slider-thumb - background: $range-thumb-hover-background-color - &::-moz-range-track - width: 100% - height: $range-track-height - cursor: pointer - animate: 0.2s - background: $range-track-background-color - border-radius: $range-border-radius - border: 1px solid $range-track-border-color - &::-moz-range-thumb - border: 1px solid $range-thumb-border-color - height: $range-thumb-height - width: $range-thumb-width - border-radius: $range-border-radius - background: $range-thumb-background-color - cursor: pointer - &:hover::-moz-range-thumb - background: $range-thumb-hover-background-color - &::-ms-fill-lower - border: 1px solid $range-track-border-color - background: $range-track-background-color - &::-ms-fill-upper - border: 1px solid $range-track-border-color - background: $range-track-background-color - &::-ms-track - width: 100% - height: $range-track-height - cursor: pointer - animate: 0.2s - background: transparent - border-color: transparent - border-width: ($range-track-height * 2) 0 - color: transparent - &::-ms-thumb - border: 1px solid $range-thumb-border-color - height: $range-thumb-height - width: $range-thumb-width - border-radius: $range-border-radius - background: $range-thumb-background-color - cursor: pointer - &:hover::-ms-thumb - background: $range-thumb-hover-background-color - &:focus::-ms-fill-lower - border: 1px solid $range-track-border-color - background: $range-track-background-color - &:focus::-ms-fill-upper - border: 1px solid $range-track-border-color - background: $range-track-background-color - -.mailpoet_range_small - width: 100px - -.mailpoet_range_medium - width: 180px - -.mailpoet_select - border-color: $select-border-color - color: $select-text-color - margin: 0 - -.mailpoet_select_large - width: 139px - -.mailpoet_select_medium - width: 103px - -.mailpoet_select_small - width: 68px - -.mailpoet_select_half_width - width: 50% - -#mailpoet_editor_content ol -#mailpoet_editor_content ul - list-style-position: inside - margin-left: 0 -#mailpoet_editor_content ul - list-style-type: disc - -.mailpoet_button - margin: 0 - border: 1px solid $button-default-border-color - background-color: $button-default-background-color - padding: 6px 20px - color: $button-default-text-color - border-radius: 3px - line-height: normal - vertical-align: top - -.mailpoet_button_full - width: 100% - box-sizing: border-box - -.tooltip-help-designer-subject-line div, .tooltip-help-designer-preheader div - z-index: 100001 - -.tooltip-help-send-preview - position: absolute - right: 15px - -.tooltip-help-designer-ideal-width - color: #656565 - text-transform: none - margin-left: 5px - font-weight: normal - -.tooltip-help-designer-full-width .dashicons - line-height 34px -.tooltip-help-designer-full-width span - line-height 1.4em - -.mailpoet_button_primary - border-color: $button-primary-border-color - background-color: $button-primary-background-color - color: $button-primary-text-color - - &:hover - background-color: $button-primary-hover-background-color - -.mailpoet_button_group - display: inline - - .mailpoet_button:first-child - margin-right: 0 - padding: 6px 12px 6px - border-top-right-radius: 0 - border-bottom-right-radius: 0 - - .mailpoet_button:last-child - margin-left: 0 - padding-left: 10px - padding-right: 10px - border-left: 0 - border-top-left-radius: 0 - border-bottom-left-radius: 0 - -.mailpoet_text_content p - margin: 1em 0 - -.mailpoet_separator - margin: 17px 20px - -.mailpoet_option_offset_left_small - margin-left: 10px -input.mailpoet_option_offset_left_small - margin-left: 10px !important - -.mailpoet_form_narrow_select2 span.select2-container - width: 103px !important - -span.select2-container--open > span.select2-dropdown - min-width: 150px - -span.select2-container--open > span.select2-dropdown li.select2-results__option - font-size: 13px - margin: 0px !important - - & .select2-results__group - font-weight: normal - color: #bfbfbf - - & .select2-results__option - padding-left: 15px - font-size: 13px - - &[aria-selected=true] - background-color: #eee - color: #444 - -.mailpoet_settings_notice - color: #999 diff --git a/assets/css/src/newsletter_editor/components/blockTools.styl b/assets/css/src/newsletter_editor/components/blockTools.styl deleted file mode 100644 index f8a840a5e9..0000000000 --- a/assets/css/src/newsletter_editor/components/blockTools.styl +++ /dev/null @@ -1,184 +0,0 @@ -$tool-inactive-color = #333333 -$tool-inactive-secondary-color = #ffffff -$tool-hover-color = #bbbbbb -$tool-hover-secondary-color = #ffffff -$tool-active-color = #d2d2d4 -$tool-active-secondary-color = #ffffff - -$content-icon-size = 14px -$content-icon-size-with-padding = 24px -$column-icon-size = 15px -$column-icon-size-with-padding = 27px - -.mailpoet_tools - position: absolute - bottom: 100% - left: 50% - z-index: 20 - text-align: right - overflow: hidden - text-align: center - transform: translateX(-50%) - transition: visibility 0s linear 250ms - visibility: hidden - - .mailpoet_tools_slider - background: $editor-content-color - border-radius: 10px 10px 0 0 - display: flex - flex-direction: row - padding: 3px 7px - position: relative - transform: translateY(100%) - transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) - - .mailpoet_resize_active & .mailpoet_tools_slider - &.mailpoet_display_tools .mailpoet_tools_slider - transform: translateY(0) - transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000), visibility 0s linear - visibility: visible - - a - vertical-align: top - - .mailpoet_container_horizontal + & - bottom: auto - left: 100% - top: -2px - transform: none - - .mailpoet_tools_slider - background: $editor-column-color - border-radius: 0 10px 10px 0 - flex-direction: column - padding: 7px 3px - transform: translateY(0) translateX(-100%) - - &.mailpoet_display_tools - .mailpoet_resize_active & - z-index: 21 - - .mailpoet_tools_slider - transform: translateY(0) translateX(0) - - .mailpoet_tool - width: $column-icon-size-with-padding - height: $column-icon-size-with-padding - display: block - - svg - height: $column-icon-size - padding: 6px - width: $column-icon-size - - .mailpoet_delete_block - flex-direction: column - - .mailpoet_delete_block_activate - display: block - max-height: $column-icon-size-with-padding - max-width: none - opacity: 1 - - .mailpoet_delete_block_confirm, - .mailpoet_delete_block_cancel - display: block - margin: 0 - width: 100% - - .mailpoet_delete_block_activated - width: auto - height: auto - padding: 0 5px 3px 5px - - .mailpoet_delete_block_activate - overflow: hidden - max-height: 0 - opacity: 0 - - .mailpoet_delete_block_confirm, - .mailpoet_delete_block_cancel - opacity: 1 - -.mailpoet_tool - display: inline-block - width: $content-icon-size-with-padding - height: $content-icon-size-with-padding - - svg - fill: #fff - height: $content-icon-size - padding: 5px - vertical-align: top - width: $content-icon-size - - &:hover svg, - &:focus svg - opacity: .7 - - .mailpoet_delete_block_confirmation - position: absolute - top: 0 - right: 0 - width: 200px - -.mailpoet_delete_block - border-radius: 3px - display: flex - flex-direction: row-reverse - line-height: 24px - vertical-align: top - white-space: nowrap - animation-background-color() - - .mailpoet_tool - padding: 0 - - .mailpoet_delete_block_activate - max-width: $content-icon-size-with-padding - display: inline-block - opacity: 1 - animation-fade-in-and-scale-horizontally() - - .mailpoet_delete_block_confirm, - .mailpoet_delete_block_cancel - max-height: 0 - max-width: 0 - opacity: 0 - overflow: hidden - display: inline-block - animation-fade-in-and-scale-horizontally() - -.mailpoet_delete_block_activated - height: auto - width: auto - background-color: $warning-background-color - padding: 0 5px - - .mailpoet_delete_block_activate - overflow: hidden - max-width: 0 - opacity: 0 - - .mailpoet_delete_block_confirm, - .mailpoet_delete_block_cancel - max-height: 20px - max-width: 90px - opacity: 1 - - .mailpoet_delete_block_cancel - margin-left: 3px - -.mailpoet_delete_block_confirm - color: $warning-text-color - - &:hover - color: $warning-text-color - text-decoration: underline - -.mailpoet_delete_block_cancel - color: $warning-alternate-text-color - - &:hover - color: $warning-alternate-text-color - text-decoration: underline diff --git a/assets/css/src/newsletter_editor/components/dragAndDrop.styl b/assets/css/src/newsletter_editor/components/dragAndDrop.styl deleted file mode 100644 index 96af3dcc98..0000000000 --- a/assets/css/src/newsletter_editor/components/dragAndDrop.styl +++ /dev/null @@ -1,70 +0,0 @@ -$drop-active-color = $primary-active-color - -$marker-width = 2px -$marker-z-index = 1 - -$draggable-widget-z-index = 2 - -.mailpoet_drop_marker - background-color: $primary-active-color - position: absolute - min-width: $marker-width - min-height: $marker-width - z-index: $marker-z-index - - box-shadow: 0px 0px 1px 0px $primary-active-color - - &::before, &::after - position: absolute - margin-top: -18px - font: 400 40px/1 dashicons - color: $primary-active-color - &::before - left: -25px - content: "\f139" - &::after - right: -23px - content: "\f141"; - -// Offset middle markers slightly above, so that the middle of the marker is -// right on the boundary between two adjacent content blocks -.mailpoet_drop_marker.mailpoet_drop_marker_middle -.mailpoet_drop_marker.mailpoet_drop_marker_first.mailpoet_drop_marker_after -.mailpoet_drop_marker.mailpoet_drop_marker_last.mailpoet_drop_marker_before - margin-top: -1 * ($marker-width / 2) - -// Offset the last marker up, so that the bottom of it matches the bottom of the -// container -.mailpoet_drop_marker.mailpoet_drop_marker_last.mailpoet_drop_marker_after - margin-top: -1 * $marker-width - -#mailpoet_editor .mailpoet_droppable_active - z-index: 21000 - -.mailpoet_block.mailpoet_droppable_active - border: 1px dashed $drop-active-color !important - width: $newsletter-width - - .mailpoet_tools - display: none !important - -.mailpoet_widget.mailpoet_droppable_active - padding: 0 - margin: 0 - z-index: $draggable-widget-z-index - animation-fade-in() - - .mailpoet_widget_icon - padding: 0 - margin: 0 - -.mailpoet_drop_active > .mailpoet_container > div > .mailpoet_container_empty - background-color: $primary-active-color - box-shadow: inset 1px 2px 1px $primary-inset-shadow-color - color: $white-color - -.mailpoet_droppable_block - cursor: move - - &.mailpoet_ignore_drag - cursor: auto diff --git a/assets/css/src/newsletter_editor/components/forms.styl b/assets/css/src/newsletter_editor/components/forms.styl deleted file mode 100644 index 93600a29eb..0000000000 --- a/assets/css/src/newsletter_editor/components/forms.styl +++ /dev/null @@ -1,41 +0,0 @@ -.mailpoet_form_field - margin-top: 15px - margin-bottom: 15px - -.mailpoet_form_field_title - clear: both - margin-bottom: 5px - -.mailpoet_form_field_title_small - width: 120px - -.mailpoet_form_field_title_inline - display: inline-block - margin-bottom: 0 - margin-top: 6px - -.mailpoet_form_field_optional - font-size: 0.8em - color: $primary-inactive-color - -.mailpoet_form_field_radio_option, -.mailpoet_form_field_checkbox_option - display: inline-block - vertical-align: top - margin-right: 5px - line-height: 30px - - &:last-child - margin-right: 0 - -.mailpoet_form_field_input_option - display: inline-block - - input[type=checkbox] - vertical-align:top - - input[type=text] - vertical-align: middle - -.mailpoet_form_field_block - display: block diff --git a/assets/css/src/newsletter_editor/components/heading.styl b/assets/css/src/newsletter_editor/components/heading.styl deleted file mode 100644 index af5bab969b..0000000000 --- a/assets/css/src/newsletter_editor/components/heading.styl +++ /dev/null @@ -1,22 +0,0 @@ -.mailpoet_heading_form_field - margin-top: 5px - margin-bottom: 5px - -.mailpoet_input_title, -.mailpoet_input_preheader - width: 500px - padding: 3px - line-height: normal - -.mailpoet_input_title - font-size: 23px - -.mailpoet_breadcrumbs - float: left - margin-bottom: 13px - margin-left: 17px - font-size: 0.9em - text-transform: uppercase - - p - margin: 0 diff --git a/assets/css/src/newsletter_editor/components/layers.styl b/assets/css/src/newsletter_editor/components/layers.styl deleted file mode 100644 index 51eeaa1a92..0000000000 --- a/assets/css/src/newsletter_editor/components/layers.styl +++ /dev/null @@ -1,32 +0,0 @@ -.mailpoet_container_layer_active - .mailpoet_block - pointer-events: none - opacity: 0.4 - - .mailpoet_container_block - pointer-events: auto - opacity: 1 - - .mailpoet_container_block > .mailpoet_tools - display: block !important - - & > .mailpoet_tools - z-index: 100001 !important; - -.mailpoet_layer_overlay - height: 100% - left: 0 - overflow-y: auto - overflow-x: hidden - position: fixed - top: 0 - width: 100% - z-index: 100000 - background-color: rgba(0, 0, 0, 0.6) - margin: 0 !important - -.mailpoet_layer_highlight - pointer-events:none; - background-color: #f1f1f1; - position: relative; - z-index: 100001 !important; diff --git a/assets/css/src/newsletter_editor/components/resize.styl b/assets/css/src/newsletter_editor/components/resize.styl deleted file mode 100644 index c1f92511e4..0000000000 --- a/assets/css/src/newsletter_editor/components/resize.styl +++ /dev/null @@ -1,91 +0,0 @@ -$resize-active-color = $editor-content-color -$resize-handle-font-color = $white-color -$resize-handle-z-index = 2 - -.mailpoet_resize_handle_container - left: 50% - margin-top: -16px - position: absolute - top: 100% - transform: translateX(-50%) - z-index: $resize-handle-z-index - -.mailpoet_resize_handle - align-items: center - background: $editor-content-color - border-radius: 10px - cursor: ns-resize - display: flex - justify-content: space-between - min-width: 60px - padding: 7px 10px - z-index: $resize-handle-z-index - - .mailpoet_resize_handle_text, - .mailpoet_resize_handle_icon - pointer-events: none - - .mailpoet_resize_active & - display: flex !important - -.mailpoet_resize_handle_text - line-height: 1.5em - font-size: 11px - font-weight: bold - color: $resize-handle-font-color - text-align: center - -.mailpoet_resize_handle_icon - line-height: 15px - margin-left: 5px - - & > svg - fill: $resize-handle-font-color - height: 15px - vertical-align: top - width: 15px - -.mailpoet_block.mailpoet_resize_active > .mailpoet_block_highlight - border: 2px solid $resize-active-color - - .mailpoet_resize_handle - display: inline-block - - -.mailpoet_image_resize_handle_container - position: absolute - bottom: 0 - right: 0 - width: 24px - height: 24px - -.mailpoet_image_resize_handle - position: relative - background: $editor-content-color - border-radius: 6px 0 0 0 - display: inline-block - width: 24px - height: 24px - cursor: nwse-resize - z-index: $resize-handle-z-index - - .mailpoet_image_resize_handle_text, - .mailpoet_image_resize_handle_icon - pointer-events: none - -.mailpoet_image_resize_handle_icon - display: block - line-height: 22px - padding: 1px - - & > svg - width: 22px - height: 22px - fill: $resize-handle-font-color - vertical-align: top - -.mailpoet_block.mailpoet_image_resize_active > .mailpoet_block_highlight - border: 2px solid $resize-active-color - - .mailpoet_image_resize_handle - display: inline-block diff --git a/assets/css/src/newsletter_editor/components/save.styl b/assets/css/src/newsletter_editor/components/save.styl deleted file mode 100644 index 4b52bdf3d3..0000000000 --- a/assets/css/src/newsletter_editor/components/save.styl +++ /dev/null @@ -1,119 +0,0 @@ -#mailpoet_editor_bottom - margin: 10px 0 120px - -.mailpoet_save_wrapper - float: right - position: relative - margin-right: 20px - margin-bottom: 10px - - .mailpoet_save_next - margin-left: 5px - -.mailpoet_save_options - border-radius: 3px - - position: absolute - right: 0 - z-index: 1000 - overflow: hidden - margin: 5px 0 - clear: both - vertical-align: top - white-space: nowrap - - background: $white-color - border: 1px solid $content-border-color - -.mailpoet_save_option - margin: 0 - - & > a - display: block - padding-left: 20px - padding-right: 20px - line-height: 2em - -.mailpoet_save_option:hover - background-color: $primary-active-background-color - color: $white-color - - & > a - color: $white-color - -.mailpoet_save_show_options - padding: 6px 3px 4px - -.mailpoet_save_show_options_icon - vertical-align: middle - height: 14px; - margin-top: -6px; - -.mailpoet_save_as_template_container, -.mailpoet_export_template_container - border-radius: 3px - display: inline-block - position: absolute - right: 0 - z-index: 1000 - clear: both - - margin: 5px 0 - padding: 0 10px - background-color: $white-color - border: 1px solid $structure-border-color - -.mailpoet_save_as_template_title, -.mailpoet_export_template_title - font-size: 1.1em - -.mailpoet_save_next, .mailpoet_save_button_group - float: right - -.mailpoet_editor_messages - position: absolute - right: 0 - -.mailpoet_editor_last_saved - color: $primary-inactive-color - font-size: 0.9em - margin-top: 10px - text-align: right - -.mailpoet_save_error - margin-top: 10px - width: $sidebar-width - 20px - color: $error-text-color - text-align: right - -.mailpoet_save_dropdown_down - .mailpoet_save_options, - .mailpoet_save_as_template_container, - .mailpoet_export_template_container - top: 100% - bottom: auto - - .mailpoet_save_show_options - &.mailpoet_save_show_options_active - .mailpoet_save_show_options_icon::before - content: '\f142' - - .mailpoet_save_show_options_icon - &::before - content: '\f140' - -.mailpoet_save_dropdown_up - .mailpoet_save_options, - .mailpoet_save_as_template_container, - .mailpoet_export_template_container - top: auto - bottom: 100% - - .mailpoet_save_show_options - &.mailpoet_save_show_options_active - .mailpoet_save_show_options_icon::before - content: '\f140' - - .mailpoet_save_show_options_icon - &::before - content: '\f142' diff --git a/assets/css/src/newsletter_editor/components/sidebar.styl b/assets/css/src/newsletter_editor/components/sidebar.styl deleted file mode 100644 index c6697aaf19..0000000000 --- a/assets/css/src/newsletter_editor/components/sidebar.styl +++ /dev/null @@ -1,180 +0,0 @@ -$select-border-color = $content-border-color -$select-text-color = $primary-text-color - -$sidebar-background-color = $primary-background-color -$sidebar-active-heading-color = $primary-active-color -$sidebar-inactive-heading-color = $primary-inactive-color -$sidebar-text-color = $primary-text-color - -$widget-width = 70px -$widget-background-color = $white-color -$widget-shadow-color = darken($primary-background-color, 13%) -$widget-icon-color = darken($primary-background-color, 31.5%) -$widget-icon-hover-color = $primary-active-color -$widget-icon-width = 30px - -#mailpoet_editor_sidebar - border-left: $content-border-color - border-bottom: $content-border-color - color: $sidebar-text-color - font-size: $sidebar-text-size - - .mailpoet_sidebar_region - margin-bottom: 0 - border-left: 1px solid $content-border-color - border-bottom: 1px solid $content-border-color - border-top: 0 - border-right: 0 - - &.closed .mailpoet_region_content - display: none - - .mailpoet_region_content - padding: 0 20px - margin-top: 12px - - &, .postbox - background-color: $sidebar-background-color - - .postbox - padding-bottom: 20px - - &.closed - padding-bottom: 0 - - &.closed h3 - color: $sidebar-inactive-heading-color - cursor: pointer - - h3 - &:hover h3 - margin: 0 - padding: 17px 20px - text-transform: uppercase - color: $sidebar-active-heading-color - - h3 - .handlediv - cursor: auto - border: 0 - - .handlediv::before - top: 18px - right: 18px - font: 400 20px/1 dashicons - speak: none - display: inline-block - position: relative - -webkit-font-smoothing: antialiased - -moz-osx-font-smoothing: grayscale - text-decoration: none!important - content: '\f142' - color: $sidebar-active-heading-color - - &.closed .handlediv::before - content: '\f140' - color: $sidebar-inactive-heading-color - - &.closed:hover .handlediv::before - color: $sidebar-active-heading-color - -.mailpoet_widget - display: inline-block - width: $widget-width - text-align: center - float: left - padding: 0 13px 15px 13px - - // Place 3 widgets per row - &:nth-child(3n+1) - clear: left - - .mailpoet_widget_icon - width: $widget-width - height: $widget-width - background-color: $widget-background-color - border-radius: 3px - box-shadow: 1px 2px $widget-shadow-color - color: $widget-icon-color - fill: $widget-icon-color - text-align: center - line-height: $widget-width - box-sizing: border-box - margin-bottom: 9px - - /* Vertically align widget icon glyphs */ - & > * - vertical-align: middle - width: $widget-icon-width - height: $widget-icon-width - font-size: $widget-icon-width - - &:hover - color: $widget-icon-hover-color - fill: $widget-icon-hover-color - border: 1px solid $widget-icon-hover-color - - &.mailpoet_droppable_active - color: $widget-icon-hover-color - fill: $widget-icon-hover-color - - .mailpoet_widget_icon - border: 1px solid $widget-icon-hover-color - color: $widget-icon-hover-color - fill: $widget-icon-hover-color - box-shadow: none - - .mailpoet_widget_title - display: none - -/* Browser preview modal */ -.mailpoet_browser_preview_wrapper - position: absolute - width: 100% - height: 100% - display: flex - flex-direction: column - -.mailpoet_browser_preview_toggle - flex: 0 1 auto - height: 30px - padding: 10px 0 - text-align: center - position: absolute - top: -30px - width: 100% - -.mailpoet_browser_preview_toggle > label - display: inline-block - margin: 0 5px - -.mailpoet_browser_preview_container - flex: 1 1 auto - margin: 15px auto 0 auto - transition: width 0.5s - box-sizing: border-box - height: 100% - padding: 20px - border: 1px solid #979797 - border-radius: 20px - display: flex - flex-direction: column - -.mailpoet_browser_preview_container_desktop - width: 100% - -.mailpoet_browser_preview_container_mobile - width: 350px - -// fix for https://bugs.chromium.org/p/chromium/issues/detail?id=765138 -// causing border on iframe to sometimes disappear when resizing -.mailpoet_browser_preview_border - width: 100% - height: 100% - box-sizing: border-box - border: 1px solid #c3c3c3 - -.mailpoet_browser_preview_iframe - width: calc(100% - 1px) - margin: auto - display: block diff --git a/assets/css/src/newsletter_editor/components/sidepanel.styl b/assets/css/src/newsletter_editor/components/sidepanel.styl deleted file mode 100644 index eb0b157e32..0000000000 --- a/assets/css/src/newsletter_editor/components/sidepanel.styl +++ /dev/null @@ -1,54 +0,0 @@ -$sidepanel-active-heading-color = $primary-active-color - -/* Sidepanel */ -.mailpoet_editor_settings - color: $sidebar-text-color - font-size: $sidebar-text-size - - p - font-size: 1em - - h3 - font-size: 1.4em - color: $sidepanel-active-heading-color - text-transform: uppercase - -.mailpoet_sidepanel_field - margin-top: 15px - margin-bottom: 15px - -.mailpoet_sidepanel_field_title - clear: both - margin-bottom: 5px - -.mailpoet_sidepanel_field_title_small - width: 120px - -.mailpoet_sidepanel_field_title_inline - display: inline-block - vertical-align: middle - line-height: 30px - margin-bottom: 0 - -.mailpoet_sidepanel_field_optional - font-size: 0.8em - color: $primary-inactive-color - -.mailpoet_sidepanel_radio_option, -.mailpoet_sidepanel_checkbox_option - display: inline-block - vertical-align: top - margin-right: 15px - line-height: 30px - - &:last-child - margin-right: 0 - -.mailpoet_sidepanel_input_option - display: inline-block - - input[type=checkbox] - vertical-align:top - - input[type=text] - vertical-align: middle diff --git a/assets/css/src/newsletter_editor/contentBlocks/automatedLatestContent.styl b/assets/css/src/newsletter_editor/contentBlocks/automatedLatestContent.styl deleted file mode 100644 index b02d07e02b..0000000000 --- a/assets/css/src/newsletter_editor/contentBlocks/automatedLatestContent.styl +++ /dev/null @@ -1,34 +0,0 @@ -.mailpoet_automated_latest_content_block - padding: 0 - -.mailpoet_automated_latest_content_block_overlay - position: absolute - z-index: 19 - width: 100% - height: 100% - background: rgba(255, 255, 255, 0) - transition: background .15s ease-out - - .mailpoet_automated_latest_content_block:hover & - background: rgba(255, 255, 255, 0.7) - cursor: pointer - -.mailpoet_automated_latest_content_block_posts - overflow: hidden - pointer-events: none - - & > .mailpoet_block - width: 100% - - .mailpoet_container_block - margin-bottom: 0 - - -.mailpoet_automated_latest_content_display_options - animation-slide-open-downwards() - -.mailpoet_automated_latest_content_show_amount - width: 25px - -.mailpoet_automated_latest_content_content_type - width: 180px diff --git a/assets/css/src/newsletter_editor/contentBlocks/base.styl b/assets/css/src/newsletter_editor/contentBlocks/base.styl deleted file mode 100644 index 523a260494..0000000000 --- a/assets/css/src/newsletter_editor/contentBlocks/base.styl +++ /dev/null @@ -1,82 +0,0 @@ -$block-text-line-height = $text-line-height - -.mailpoet_block - box-sizing: border-box - position: relative - float: left - background-color: inherit - box-sizing: border-box - - margin-bottom: 20px - - padding-left: 20px - padding-right: 20px - - & > .mailpoet_block_highlight - position: absolute - top: 0 - right: 0 - bottom: 0 - left: 0 - pointer-events: none - border: 2px solid $transparent-color - transition: 0.3s - z-index: 1 - - &:hover > .mailpoet_block_highlight - border: 2px solid $editor-content-color - - &.mailpoet_highlight > .mailpoet_block_highlight - border: 2px solid $editor-content-color !important - - & > .mailpoet_container_horizontal ~ .mailpoet_block_highlight - top: -2px - right: -2px - bottom: -2px - left: -2px - - &:hover > .mailpoet_container_horizontal ~ .mailpoet_block_highlight - border: 2px solid $editor-column-color - - &.mailpoet_highlight > .mailpoet_container_horizontal ~ .mailpoet_block_highlight - border: 2px solid $editor-column-color !important - -.mailpoet_content - position: relative - line-height: $block-text-line-height - - h1, h2, h3, h4, h5, h6 - line-height: $block-text-line-height - padding: 0 - margin: 0 - font-style: normal - font-weight: normal - - h1, h2, h3, h4, h5, h6 - margin-bottom: 0.3em - - p:not(.mailpoet_wp_post) - margin-top: 0 - margin-bottom: 0 - padding: 0 - margin: 0 - - p - line-height: $block-text-line-height - font-style: normal - font-weight: normal - - ul - padding: 0 - margin-top: 10px - margin-bottom: 10px - - li - margin-top: 0 - font-weight: normal - margin-bottom: 10px - - blockquote - margin: 0 0 $block-text-line-height - padding-left: 10px - border-left: 2px #565656 solid diff --git a/assets/css/src/newsletter_editor/contentBlocks/button.styl b/assets/css/src/newsletter_editor/contentBlocks/button.styl deleted file mode 100644 index a75d4e2cfb..0000000000 --- a/assets/css/src/newsletter_editor/contentBlocks/button.styl +++ /dev/null @@ -1,12 +0,0 @@ -.mailpoet_button_block - .mailpoet_editor_button - display: block - margin: auto - line-height: 2em - text-align: center - text-decoration: none - box-sizing: border-box - max-width: 100% - - &:hover - cursor: all-scroll diff --git a/assets/css/src/newsletter_editor/contentBlocks/container.styl b/assets/css/src/newsletter_editor/contentBlocks/container.styl deleted file mode 100644 index 7e2d8f6dc7..0000000000 --- a/assets/css/src/newsletter_editor/contentBlocks/container.styl +++ /dev/null @@ -1,87 +0,0 @@ -$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 - width: 100% - min-height: 15px - position: relative - -.mailpoet_container_block - margin-left: 0 - margin-right: 0 - position: relative - box-sizing: border-box - border: 0 - padding-left: 0 - padding-right: 0 - - &:hover > .mailpoet_block_highlight - border: 0 - -.mailpoet_container_vertical > * - width: 100% - box-sizing: border-box - -.mailpoet_container_horizontal > * - vertical-align: top - - -#mailpoet_editor_content - .mailpoet_container - box-sizing: border-box - float: left - - // One column - & > .mailpoet_container_block - width: $newsletter-width - border: 0 - - & > .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 - - // More than one column - & > .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 - - // Column number detection technique found here: - // http://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has - - // Two columns - & > .mailpoet_block:first-child:nth-last-child(2) - & > .mailpoet_block:first-child:nth-last-child(2) ~ .mailpoet_block - //padding-left: 20px - //padding-right: 20px - width: $column-margin + $two-column-width + $column-margin - - // Three columns - & > .mailpoet_block:first-child:nth-last-child(3) - & > .mailpoet_block:first-child:nth-last-child(3) ~ .mailpoet_block - //padding-left: 20px - //padding-right: 20px - 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 - text-align: center - background-color: #f2f2f2 - margin: 20px - padding: 15px - box-shadow: inset 1px 2px 1px $primary-inactive-color - color: #656565 - border-radius: 3px - animation-background-color() diff --git a/assets/css/src/newsletter_editor/contentBlocks/divider.styl b/assets/css/src/newsletter_editor/contentBlocks/divider.styl deleted file mode 100644 index 90dbd66d38..0000000000 --- a/assets/css/src/newsletter_editor/contentBlocks/divider.styl +++ /dev/null @@ -1,33 +0,0 @@ -$active-divider-border-color = #adadad -$active-divider-background-color = #daebf2 -$divider-hover-border-color = $primary-active-color - -.mailpoet_divider_block - padding-left: 0 - padding-right: 0 - margin-bottom: 0 - cursor: all-scroll - -.mailpoet_divider - margin-left: 20px - margin-right: 20px - -.mailpoet_field_divider_style - max-width: $newsletter-width - margin: auto - display: block - width: 100% - border: 1px solid transparent - -.mailpoet_active_divider_style - border: 1px solid $active-divider-border-color - background: $active-divider-background-color - -.mailpoet_field_divider_style:hover - border: 1px solid $divider-hover-border-color - -.mailpoet_divider_selector img - width: 100% - -.mailpoet_field_divider_style - padding: 10px 0 diff --git a/assets/css/src/newsletter_editor/contentBlocks/footer.styl b/assets/css/src/newsletter_editor/contentBlocks/footer.styl deleted file mode 100644 index 98a5107860..0000000000 --- a/assets/css/src/newsletter_editor/contentBlocks/footer.styl +++ /dev/null @@ -1,10 +0,0 @@ -.mailpoet_footer_block - padding-left: 0 - padding-right: 0 - margin-bottom: 0 - - .mailpoet_content - padding: 10px 20px - - & > *:last-child - margin-bottom: 0 diff --git a/assets/css/src/newsletter_editor/contentBlocks/header.styl b/assets/css/src/newsletter_editor/contentBlocks/header.styl deleted file mode 100644 index 70aa373f1d..0000000000 --- a/assets/css/src/newsletter_editor/contentBlocks/header.styl +++ /dev/null @@ -1,10 +0,0 @@ -.mailpoet_header_block - padding-left: 0 - padding-right: 0 - margin-bottom: 0 - - .mailpoet_content - padding: 10px 20px - - & > *:last-child - margin-bottom: 0 diff --git a/assets/css/src/newsletter_editor/contentBlocks/image.styl b/assets/css/src/newsletter_editor/contentBlocks/image.styl deleted file mode 100644 index a2eb91effd..0000000000 --- a/assets/css/src/newsletter_editor/contentBlocks/image.styl +++ /dev/null @@ -1,21 +0,0 @@ -.mailpoet_image_block - - img - vertical-align: bottom - max-width: 100% - height: auto - - &.mailpoet_full_image - padding-left: 0 - padding-right: 0 - margin: auto - margin-bottom: 0 - - .mailpoet_content - margin: auto - max-width: 100% - min-width: 36px - - a:hover - cursor: all-scroll - diff --git a/assets/css/src/newsletter_editor/contentBlocks/posts.styl b/assets/css/src/newsletter_editor/contentBlocks/posts.styl deleted file mode 100644 index 99666b91dc..0000000000 --- a/assets/css/src/newsletter_editor/contentBlocks/posts.styl +++ /dev/null @@ -1,60 +0,0 @@ -.mailpoet_posts_block - padding-left: 0 - padding-right: 0 - -.mailpoet_posts_block_posts - overflow: auto - - & > .mailpoet_block - width: 100% - -.mailpoet_post_selection_filter_row - margin-top: 5px - margin-bottom: 5px - -.mailpoet_posts_categories_and_tags - width: 100% - -.mailpoet_settings_posts_display_options -.mailpoet_settings_posts_selection - animation-slide-open-downwards() - overflow-x: hidden - -.mailpoet_settings_posts_show_display_options, -.mailpoet_settings_posts_show_post_selection - display: block - margin-top: 10px - -.mailpoet_post_selection_container - margin-top: 20px - margin-bottom: 0 - -.mailpoet_post_scroll_container - overflow-y: scroll - overflow-x: hidden - max-height: 400px - -.mailpoet_settings_posts_single_post - border-radius: 1px - box-sizing: border-box - width: 100% - margin-top: 5px - margin-bottom: 5px - height: 38px - line-height: 38px - overflow: hidden - border: 1px solid $content-border-color - background-color: $white-color - - &:hover - border-color: $primary-active-color - - .mailpoet_select_post_checkbox - margin-left: 10px - margin-right: 8px - -.mailpoet_post_selection_loading - color: #999 - -.mailpoet_posts_container > .mailpoet_droppable_block - width: 100% diff --git a/assets/css/src/newsletter_editor/contentBlocks/social.styl b/assets/css/src/newsletter_editor/contentBlocks/social.styl deleted file mode 100644 index 6e16ea7fe3..0000000000 --- a/assets/css/src/newsletter_editor/contentBlocks/social.styl +++ /dev/null @@ -1,113 +0,0 @@ -$social-block-vertical-padding = 0px - -$social-icon-width = 32px -$active-social-icon-set-border-color = #adadad -$active-social-icon-set-background-color = #daebf2 -$social-icon-set-hover-border-color = $primary-active-color - -$tool-inactive-color = #333333 -$tool-hover-color = #bbbbbb -$tool-active-color = #d2d2d4 - -$tool-width = 16px - -.mailpoet_social_block - padding-top: $social-block-vertical-padding - padding-bottom: $social-block-vertical-padding - - .mailpoet_social - text-align: center - -.mailpoet_social - span - display: inline-block - padding: 2px 3px - - span, - a, - img - vertical-align: top - - a - cursor: all-scroll - -.mailpoet_social_icon_set - border: 1px solid transparent - padding: 5px - margin-bottom: 5px - - &:hover - border: 1px solid $social-icon-set-hover-border-color - - img - width: $social-icon-width - height: $social-icon-width - vertical-align: middle - padding: 2px 3px - -.mailpoet_active_icon_set - border: 1px dashed $active-social-icon-set-border-color - background-color: $active-social-icon-set-background-color - -.mailpoet_social_icon_settings - position: relative - - padding: 28px 9px (18px - 10px) 9px - margin-bottom: 9px - - background: $white-color - border: 1px solid $content-border-color - -.mailpoet_social_icon_settings_row - clear: both - overflow: auto - margin-bottom: 10px - - line-height: 30px - -.mailpoet_social_icon_settings_label - margin-right: 5px - text-align: left - - .mailpoet_social_icon_image - width: 30px - height: 30px - - &.mailpoet_social_icon_image_label - line-height: initial - -.mailpoet_social_icon_settings_form_element - float: left - width: 100% - - input, select - width: 100% - height: 30px - box-sizing: border-box - margin: 0 - vertical-align: middle - display: inline-block - -.mailpoet_social_icon_settings_tool - position: absolute - top: 10px - - .mailpoet_tool_icon - fill: $tool-inactive-color - width: $tool-width - height: $tool-width - - &:hover - fill: $tool-hover-color - - &:active - fill: $primary-active-color - - &:active - filter-shadow(1px, 2px, 0px, $tool-active-color) - -.mailpoet_social_icon_settings_move_icon - right: 5px - -.mailpoet_social_icon_settings_delete_icon - right: 5px + 5px + $tool-width diff --git a/assets/css/src/newsletter_editor/contentBlocks/spacer.styl b/assets/css/src/newsletter_editor/contentBlocks/spacer.styl deleted file mode 100644 index 42c58b3a7f..0000000000 --- a/assets/css/src/newsletter_editor/contentBlocks/spacer.styl +++ /dev/null @@ -1,8 +0,0 @@ -.mailpoet_spacer - text-align: center - -.mailpoet_spacer_block - padding-left: 0 - padding-right: 0 - margin-bottom: 0 - cursor: all-scroll diff --git a/assets/css/src/newsletter_editor/contentBlocks/text.styl b/assets/css/src/newsletter_editor/contentBlocks/text.styl deleted file mode 100644 index 42595bdf0a..0000000000 --- a/assets/css/src/newsletter_editor/contentBlocks/text.styl +++ /dev/null @@ -1,13 +0,0 @@ -.mailpoet_text_block - padding-left: 0 - padding-right: 0 - - & > .mailpoet_content - overflow: hidden - padding-top: 0 - padding-bottom: 0px - padding-left: 20px - padding-right: 20px - - & > *:last-child - margin-bottom: 0 diff --git a/assets/css/src/newsletter_editor/layout.styl b/assets/css/src/newsletter_editor/layout.styl deleted file mode 100644 index af09732ee0..0000000000 --- a/assets/css/src/newsletter_editor/layout.styl +++ /dev/null @@ -1,34 +0,0 @@ -$sidebar-width = 330px -$content-border-color = $structure-border-color - -#mailpoet_editor - width: 100% - clear: both - -#mailpoet_editor_heading - padding-left: 15px - margin-left: 2px - margin-bottom: 13px - clear: both - -#mailpoet_editor_main_wrapper - border: 1px solid $content-border-color - border-left: 0 - position: relative - min-width: 1050px - -#mailpoet_editor_content_container - width: 100% - padding-right: $sidebar-width - box-sizing: border-box - -#mailpoet_editor_sidebar - float: right - width: $sidebar-width - box-sizing: border-box - -.mailpoet_newsletter_wrapper - max-width: $newsletter-width - width: $newsletter-width - margin: auto - position: relative diff --git a/assets/css/src/newsletter_editor/libraryOverrides.styl b/assets/css/src/newsletter_editor/libraryOverrides.styl deleted file mode 100644 index 4f7780c8ba..0000000000 --- a/assets/css/src/newsletter_editor/libraryOverrides.styl +++ /dev/null @@ -1,150 +0,0 @@ -/* Fix select2 z-index to work with MailPoet.Modal */ -.select2-dropdown - z-index: 101000 !important - -/* Remove input field styles from select2 type input */ -.select2-container - border: none - padding: 0 - -/* Fix select2 input glow and margins that wordpress may insert */ -.select2 input, -.select2 input:focus - border-color: none - box-shadow: none - - margin: 0 - padding: 0 - -/* Fix width overrides for select2 */ -.mailpoet_editor_settings .select2-container - width: 100% !important - -/* Fix inline TinyMCE toolbar to have minimal width instead of being close to 100% of the screen */ -div.mce-toolbar-grp.mce-container - position: absolute - -.mce-tinymce.mce-tinymce-inline - border-radius: 3px - background-color: $primary-background-color - border: 1px solid $content-border-color - box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.05) - -.mce-window - /* Fix TinyMCE mailpoet_shortcodes window lack of hiding overflow */ - div.mce-container-body.mce-abs-layout - overflow: hidden - - /* Fix TinyMCE popup window's close button to not be covered by draggable section */ - .mce-window-head div.mce-dragh - width: calc( 100% - 36px ) - -/* TinyMCE mailpoet_shortcodes toolbar icon */ -.mce-i-mailpoet_shortcodes:before - font: 400 20px/1 dashicons!important - content: "\f307" - -/* TinyMCE remove active border from the editor */ -.mce-edit-focus - outline: none - -/* Style "No search term specified" in TinyMCE link editor */ -#wp-link li, #wp-link div.query-notice -clear: both -margin-bottom: 0 -border-bottom: 1px solid #f1f1f1 -color: #333 -padding: 4px 6px -cursor: pointer -position: relative - -/* Remove empty space between WP admin sidebar and content */ -#wpbody-content > * - margin-left: 20px - -#wpbody-content > .wrap - margin-left: 0 - -#wpcontent - margin-left: 160px - padding-left: 0 - - .folded & - margin-left: 36px -.wrap - margin-left: 0 - margin-right: 0 - -/* Reduce WP admin bar z-index in order for TinyMCE toolbar to be visible */ -#wpadminbar - z-index: 50000 - -/* Allow horizontal scrolling on smaller (tablet/phone) sized screens */ -body - overflow-x: auto - -/* Hide the "Details" section of WordPress Media manager */ -.media-sidebar - display: none - -#mailpoet-media-manager - .attachments-browser .attachments - .attachments-browser .uploader-inline - margin-right: 0 - - .attachments-browser .attachments - .attachments-browser .media-toolbar - .attachments-browser .uploader-inline - right: 0 - -/* Remove max width from date selector in WordPress Media Manager */ -#media-attachment-date-filters - max-width: calc(100% - 12px) - -/* Alter Spectrum color picker to leave only the color preview, without arrows */ -.sp-replacer - border-radius: 3px - padding: 0 - border: 0 - box-shadow: 1px 2px darken($primary-background-color, 13%) - -.sp-preview - border-width: 0 - margin-right: 0 - width: 25px - height: 25px - -.sp-dd - display: none - -/* Sidepanel overrides */ -.mailpoet_panel_body - margin: 19px - padding: 0 - - .mailpoet_editor_settings h3 - margin-top: 0 - -.mailpoet_panel_wrapper - background-color: $primary-background-color - border: 1px solid $content-border-color - -.wrap > .mailpoet_notice, -.notice -.update-nag - margin-left: 2px + 15px !important - margin-right: 20px !important - -/* Make a button group */ -.mailpoet_button_group - - .button:first-child - border-right: 0 - border-top-right-radius: 0 - border-bottom-right-radius: 0 - - .button:last-child - border-left: 0 - border-top-left-radius: 0 - border-bottom-left-radius: 0 - diff --git a/assets/css/src/newsletter_editor/mixins/filter-shadow.styl b/assets/css/src/newsletter_editor/mixins/filter-shadow.styl deleted file mode 100644 index 837c8f7c80..0000000000 --- a/assets/css/src/newsletter_editor/mixins/filter-shadow.styl +++ /dev/null @@ -1,5 +0,0 @@ -filter-shadow(offset-x, offset-y, blur-radius=0px, color=#ff0000) - filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=%d, OffY=%d, Color='%s')" % (offset-x offset-y color) - -webkit-filter: drop-shadow(offset-x offset-y blur-radius color) - -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=%d, OffY=%d, Color='%s')" % (offset-x offset-y color) - filter: drop-shadow(offset-x offset-y blur-radius color) diff --git a/assets/css/src/newsletter_editor/mixins/transitions.styl b/assets/css/src/newsletter_editor/mixins/transitions.styl deleted file mode 100644 index 47837298db..0000000000 --- a/assets/css/src/newsletter_editor/mixins/transitions.styl +++ /dev/null @@ -1,31 +0,0 @@ -animation-slide-open-downwards($max-height = 2000px) - transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */ - max-height: $max-height - opacity: 1 - overflow-y: inherit - - &.mailpoet_closed - max-height: 0px - opacity: 0 - -animation-background-color() - transition: background 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */ - -animation-fade-in() - animation-name: fadeIn - animation-duration: 300ms - animation-fill-mode: forwards - animation-timing-function: ease-in - -animation-fade-in-and-scale-horizontally() - transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */ - -@keyframes fadeIn { - 0% { - opacity: 0.3 - } - - 100% { - opacity: 1 - } -} diff --git a/assets/css/src/newsletter_editor/newsletter_editor.styl b/assets/css/src/newsletter_editor/newsletter_editor.styl deleted file mode 100644 index ad79b458e7..0000000000 --- a/assets/css/src/newsletter_editor/newsletter_editor.styl +++ /dev/null @@ -1,38 +0,0 @@ -// Vendor CSS -@require 'select2/dist/css/select2.css' -@require 'spectrum-colorpicker/spectrum.css' - -// Bootstrapping -@require 'mixins/filter-shadow' -@require 'mixins/transitions' - -@require 'variables' -@require 'common' -@require 'layout' - -// Components -@require 'components/forms' -@require 'components/heading' -@require 'components/sidebar' -@require 'components/sidepanel' -@require 'components/save' -@require 'components/blockTools' -@require 'components/layers' -@require 'components/dragAndDrop' -@require 'components/resize' - -// Block specific styles -@require 'contentBlocks/base' -@require 'contentBlocks/container' -@require 'contentBlocks/automatedLatestContent' -@require 'contentBlocks/posts' -@require 'contentBlocks/button' -@require 'contentBlocks/divider' -@require 'contentBlocks/image' -@require 'contentBlocks/social' -@require 'contentBlocks/spacer' -@require 'contentBlocks/text' -@require 'contentBlocks/header' -@require 'contentBlocks/footer' - -@require libraryOverrides diff --git a/assets/css/src/newsletter_editor/variables.styl b/assets/css/src/newsletter_editor/variables.styl deleted file mode 100644 index 6e9128d468..0000000000 --- a/assets/css/src/newsletter_editor/variables.styl +++ /dev/null @@ -1,32 +0,0 @@ -$transparent-color = rgba(255, 255, 255, 0) -$white-color = rgb(255, 255, 255) -$black-color = rgb(0, 0, 0) - -$structure-border-color = #dddddd -$content-border-color = #e5e5e5 - -$primary-active-color = #0074a2 -$primary-active-color-highlight = #1e8cbe -$primary-inactive-color = #a4a4a4 - -$primary-active-background-color = #2ea1cd -$primary-background-color = #f8f8f8 - -$primary-text-color = #656565 - -$primary-inset-shadow-color = #025C80 - -$warning-background-color = #E64047 -$warning-text-color = $white-color -$warning-alternate-text-color = #f4c6c8 - -$error-text-color = #d54e21 - -$editor-column-color = #7FBBD0 -$editor-content-color = #0078A2 - -// Dimensions -$newsletter-width = 660px - -$text-line-height = 1.6em -$sidebar-text-size = 13px diff --git a/assets/css/src/newsletter_templates.styl b/assets/css/src/newsletter_templates.styl deleted file mode 100644 index c9031704ca..0000000000 --- a/assets/css/src/newsletter_templates.styl +++ /dev/null @@ -1,9 +0,0 @@ -@require 'newsletter_editor/variables' - -.mailpoet_template_iframe - position: absolute - z-index: -9999 - top: 0 - left: 0 - width: $newsletter-width - max-width: $newsletter-width diff --git a/assets/css/src/notice.styl b/assets/css/src/notice.styl deleted file mode 100644 index cf7fe8a574..0000000000 --- a/assets/css/src/notice.styl +++ /dev/null @@ -1,3 +0,0 @@ -.mailpoet_notice - position: relative - clear: both diff --git a/assets/css/src/pages.styl b/assets/css/src/pages.styl deleted file mode 100644 index 65a6814667..0000000000 --- a/assets/css/src/pages.styl +++ /dev/null @@ -1,233 +0,0 @@ -/* -Based on /wp-admin/css/about.css of WP 4.7. -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 - position: relative - margin: 25px 40px 0 20px - max-width: 1050px /* readability */ - font-size: 15px - - div.updated, div.error, .notice - display: none !important - - hr - border: 0 - height: 0 - margin: 0 - border-top: 1px solid rgba(0, 0, 0, 0.1) - - img - margin: 0 - max-width: 100% - height: auto - vertical-align: middle - - .mailpoet-logo - position: absolute - top: .2em - right: 0; - - .nav-tab - padding-right: 15px - padding-left: 15px - font-size: 18px - - p - line-height: 1.5 - font-size: 14px - - .feature-section p - max-width: 55em - margin-left: auto - margin-right: auto - - h1 - margin: 1em 0 0.5em 0 - padding: 0 - color: #32373c - line-height: 1.2em - font-size: 2.8em - font-weight: 400 - text-align: center - - h1.welcome - margin-right: 200px - text-align: left - - h2 - margin: 40px 0 .6em - font-size: 2.7em - line-height: 1.3 - font-weight: 300 - text-align: center - - h3 - margin: 1.25em 0 .6em - font-size: 1.4em - line-height: 1.5 - - h4 - color: #23282d - - .about-description - .about-text - margin-top: 1.4em - font-weight: 400 - line-height: 1.6em - font-size: 19px - - .about-text - margin: 1em 200px 1em 0 - min-height: 60px - color: #555d66 - - [class$=col] - .col - float: left - position: relative - - .two-col - .col - margin-right: 4.799999999% - width: 47.6% - - .two-col - img - margin-bottom: 1.5em - - .feature-section - &.two-col - .col - display: inline-block - float: none - margin-top: 1em - margin-right: 4.799999999% - width: calc( 47.6% - 4px ) - vertical-align: top - - .three-col - .col - margin-right: 4.999999999% - width: 29.95% - - .two-col .col:nth-of-type(2n) - .three-col .col:nth-of-type(3n) - margin-right: 0 - - .feature-section - &.two-col - h3 - margin-top: 0 - - .feature-section - h4 - margin: 1.4em 0 0.6em 0 - font-size: 1em - - .feature-section - p - margin-top: 0.6em - - .lead-description - font-size: 1.5em - text-align: center - - .two-col-text - column-count: 2 - column-gap: 40px - - .two-col-text - p:first-of-type - margin-top: 0 - - .headline-feature - &.feature-video - position: relative - margin: 40px 0 - padding-bottom: 56.25% - width: 100% - max-width: 100% - height: 0 - text-align: center - - .feature-video - embed - position: absolute - top: 0 - left: 0 - width: 100% - height: 100% - - .featured-image - text-align: center - - .feature-section - overflow: hidden - padding: 0 0 40px - - .feature-section - &.no-heading - padding-top: 35px - - .headline-feature - margin: 0 auto - max-width: 80% - - .feature-section - .media-container - overflow: hidden - - .feature-section - img - margin-bottom: 1em - - .embed-container - text-align: center - - .embed-container - iframe - max-width: 100% - - .wp-embedded-content - max-width: 100% - - .feature-section - .col - margin-top: 40px - - .changelog - margin-bottom: 40px - - .changelog - &.feature-section - .col - margin-top: 40px - - @media screen and (max-width: 782px) - .two-col-text - column-count: 1 - .three-col img - display: block - margin: 0 auto - - @media only screen and (max-width: 500px) - margin-right: 20px - margin-left: 10px - h1 - .about-text - margin-right: 0 - .about-text - margin-bottom: 0.25em - .mailpoet-logo - position: relative - margin: 1em 0 - width: 100% - text-align: center - .two-col .col - .three-col .col - width: 100% !important - float: none !important diff --git a/assets/css/src/pages_custom.styl b/assets/css/src/pages_custom.styl deleted file mode 100644 index d394caef14..0000000000 --- a/assets/css/src/pages_custom.styl +++ /dev/null @@ -1,49 +0,0 @@ -/* -Custom styles for MailPoet pages. -*/ - -.mailpoet-about-wrap - - .videoWrapper - position: relative - padding-bottom: 56.25% /* 16:9 */ - /*padding-top: 25px*/ - height: 0 - - iframe - position: absolute - top: 0 - left: 0 - width: 100% - height: 100% - - - .mailpoet_video - border: 1px solid rgba(0, 0, 0, 0.1) - - #mailpoet-changelog ul - list-style: disc - padding-left: 20px - - h2.mailpoet-feature-top - margin: 50px auto - - a.button.go-to-plugin - margin-top: 2em - - p.top-space-triple - margin-top: 3em - - p.mailpoet-top-text - margin-right: 0 - - ul.default-list { - list-style-type: disc - margin-left: 40px - } - - .half-width-centered - display block - max-width 50% - margin-left auto - margin-right auto diff --git a/assets/css/src/parsley.styl b/assets/css/src/parsley.styl deleted file mode 100644 index 2f19e7da1c..0000000000 --- a/assets/css/src/parsley.styl +++ /dev/null @@ -1,25 +0,0 @@ -input.parsley-success, -select.parsley-success, -textarea.parsley-success - color #468847 - background-color #DFF0D8 - border 1px solid #D6E9C6 - -input.parsley-error, -select.parsley-error, -textarea.parsley-error - color #B94A48 - background-color #F2DEDE - border 1px solid #EED3D7 - -.parsley-errors-list - margin 2px 0 3px - padding 0 - list-style-type none - font-size 0.9em - line-height 0.9em - color #B94A48 - opacity 0 - transition all .3s ease-in - &.filled - opacity 1 diff --git a/assets/css/src/progress_bar.styl b/assets/css/src/progress_bar.styl deleted file mode 100644 index 4564316abe..0000000000 --- a/assets/css/src/progress_bar.styl +++ /dev/null @@ -1,63 +0,0 @@ -.mailpoet_progress - background-color: #efefef - height: 25px - padding: 0 - width: 100% - margin: 0 - margin-bottom: 10px - border-radius: 5px - position: relative - -.mailpoet_progress_label - position: absolute - width: 100% - text-align: center - display: inline-block - margin: 2px 0 0 0 - -.mailpoet_progress_bar - position: absolute - display: inline-block - height: 100% - border-radius: 3px - box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset - background-color: #34c2e3 - background-image: linear-gradient(top, #34c2e3, darken(#34c2e3, 20%)) - -.mailpoet_progress_complete - .mailpoet_progress_bar - background-color: hsla(191, 78%, 80%, 1) - background-image: linear-gradient(top, hsla(191, 78%, 80%, 1), hsla(191, 76%, 67%, 1)) - -.mailpoet_stepped_progress_bar - margin: auto - width: 400px - &:before - position: relative - top: 9px - content: "" - display: block - height: 2px - width: 100% - border-radius: 2px - background-color: #d8d8d8 - margin: auto - -.mailpoet_stepped_progress_bar_step - display: inline-block - &:before - position: relative - content: "" - display: block - height: 14px - width: 14px - border-radius: 14px - background-color: #d8d8d8 - margin: auto - &.active - &:before - background-color: #979797 - -@media screen and (max-width 520px) - .mailpoet_stepped_progress_bar - width: 360px diff --git a/assets/css/src/public.scss b/assets/css/src/public.scss new file mode 100644 index 0000000000..bcfdf2f0a7 --- /dev/null +++ b/assets/css/src/public.scss @@ -0,0 +1,4 @@ +@import 'components/mixins'; +@import 'components/parsley'; +@import 'components/formValidation'; +@import 'components/public'; diff --git a/assets/css/src/public.styl b/assets/css/src/public.styl deleted file mode 100644 index 0b71fcac53..0000000000 --- a/assets/css/src/public.styl +++ /dev/null @@ -1,60 +0,0 @@ -@import 'nib' - -@require 'parsley' -@require 'form_validation' - -/* labels */ -.mailpoet_text_label -.mailpoet_textarea_label -.mailpoet_select_label -.mailpoet_radio_label -.mailpoet_checkbox_label -.mailpoet_list_label -.mailpoet_date_label - display:block - -/* form loading */ -.mailpoet_form_sending - .mailpoet_form_loading - display:block - .mailpoet_submit - display:none - -.mailpoet_form_loading - display:none - width: 30px - text-align: center - -.mailpoet_form_loading > span - width: 5px - height: 5px - background-color: #5b5b5b - - border-radius: 100% - display: inline-block - -webkit-animation: mailpoet-bouncedelay 1.4s infinite ease-in-out both - animation: mailpoet-bouncedelay 1.4s infinite ease-in-out both - -.mailpoet_form_loading .mailpoet_bounce1 - -webkit-animation-delay: -0.32s - animation-delay: -0.32s - -.mailpoet_form_loading .mailpoet_bounce2 { - -webkit-animation-delay: -0.16s - animation-delay: -0.16s - margin: 0 7px -} - -@-webkit-keyframes mailpoet-bouncedelay - 0%, 80%, 100% - -webkit-transform: scale(0) - 40% - -webkit-transform: scale(1.0) - -@keyframes mailpoet-bouncedelay - 0%, 80%, 100% - -webkit-transform: scale(0) - transform: scale(0) - 40% - -webkit-transform: scale(1.0) - transform: scale(1.0) diff --git a/assets/css/src/review_request.styl b/assets/css/src/review_request.styl deleted file mode 100644 index 8479d486a3..0000000000 --- a/assets/css/src/review_request.styl +++ /dev/null @@ -1,11 +0,0 @@ -.mailpoet_review_request - max-width: 500px - text-align: center - margin: auto - - img - margin: 20px - - a - cursor: pointer - text-decoration: underline diff --git a/assets/css/src/rtl.scss b/assets/css/src/rtl.scss new file mode 100644 index 0000000000..cdb21ddce3 --- /dev/null +++ b/assets/css/src/rtl.scss @@ -0,0 +1 @@ +@import '../../../node_modules/intro.js/introjs-rtl'; diff --git a/assets/css/src/rtl.styl b/assets/css/src/rtl.styl deleted file mode 100644 index b46db3344f..0000000000 --- a/assets/css/src/rtl.styl +++ /dev/null @@ -1,2 +0,0 @@ -// place RTL specific code here -@require '../../../node_modules/intro.js/introjs-rtl.css' diff --git a/assets/css/src/settings.styl b/assets/css/src/settings.styl deleted file mode 100644 index bd00275e74..0000000000 --- a/assets/css/src/settings.styl +++ /dev/null @@ -1,108 +0,0 @@ -#mailpoet_settings - // common - .mailpoet_tab_panel - display none - - .form-table th - width 20em - - // sending methods - .mailpoet_sending_methods - margin 25px 0 0 0 - display flex - flex-direction row - justify-content flex-start - > li - flex-grow 1 - flex-shrink 1 - display flex - flex-direction column - flex-basis 0 - margin 0 25px 25px 0 - background-color #fff - border 2px solid #dcdcdc - max-width 500px - .mailpoet_sending_method_description - padding: 25px - flex-grow 1 - flex-shrink 0 - &:hover:not(.mailpoet_active) - border-color #c5c5c5 - > li:last-child - margin-right 0 - h3 - text-align center - height 54px - font-size 1.5em - .mailpoet_description - font-size 14px - .mailpoet_status - display flex - flex-direction row - justify-content flex-end - align-items center - background-color #dcdcdc - color #fff - text-overflow ellipsis - min-height 2em - padding 1em - span - visibility hidden - font-weight bold - div - margin-left 1em - .mailpoet_active - border 2px solid #088b00 - &.mailpoet_invalid_key - border 2px solid #dc3232 - .mailpoet_status - background-color #088b00 - &.mailpoet_invalid_key - background-color #dc3232 - .mailpoet_actions - color white - a:not(.button-primary) - color white - span - visibility visible - #mailpoet_mta_activate - visibility hidden - .mailpoet_actions - color initial - - .tooltip.dashicons.dashicons-editor-help - line-height: 1.4 - - ul.sending-method-benefits - list-style-type: none - margin-bottom: 2em - margin-top: 2em - - .sending-free-plan-button - background: #FF5301 - border-color: #e64c03 - text-shadow: 0 -1px 1px #e64c03 - box-shadow: 0 1px 0 #e64c03 - margin: 10px 0 - strong - text-transform: uppercase - - .mailpoet_success_item::before - content '✔ ' - - .mailpoet_error_item::before - content '✗ ' - - // responsive - @media screen and (max-width: 782px) - .form-table th - width auto - - .mailpoet_sending_methods - flex-flow: row wrap - justify-content: space-around - > li - margin-right 0 - flex-basis auto - - diff --git a/assets/css/src/subscribers.styl b/assets/css/src/subscribers.styl deleted file mode 100644 index 511f7f5a57..0000000000 --- a/assets/css/src/subscribers.styl +++ /dev/null @@ -1,3 +0,0 @@ -#subscribers_container - .mailpoet_segments_unsubscribed - color: lighten(#555, 33) \ No newline at end of file diff --git a/assets/css/src/welcome_wizard.styl b/assets/css/src/welcome_wizard.styl deleted file mode 100644 index 466b3e8b9b..0000000000 --- a/assets/css/src/welcome_wizard.styl +++ /dev/null @@ -1,87 +0,0 @@ -.mailpoet_welcome_wizard_centered_column - display: flex - flex-direction: column - justify-content: center - align-items: center - -.mailpoet_welcome_wizard_header img - margin-bottom: 20px - -.mailpoet_welcome_wizard_steps - padding-top: 20px - width: 100% - div.updated, div.error, .notice - display: none !important - -.mailpoet_welcome_wizard_step_content - margin-top: 40px - max-width: 620px - min-height: 30%vh; - h1 - font-weight: 400 - padding-bottom: 10px - text-align: center - p - font-weight: normal - font-size: 15px - line-height: 22px - color: #595c65 - text-align: center - margin: 10px 0; - -#mailpoet_sender_form - margin-top: 30px - width: 330px - label - display: inline-block - font-size: 15px - margin-bottom: 20px - input[type="text"] - margin-top: 10px - font-size: 15px - width: 328px - height: 30px - input[type="submit"] - margin: 50px 0 25px 0 - a.sender_form_small - font-size: 12px - color: #595c65 - -.mailpoet_sender_form_loading - opacity: .5 - -.mailpoet_welcome_wizard_course_form_box - margin-bottom: 10px - padding-top: 30px - position: relative - img - position: absolute - top: 0 - left: 0 - iframe - margin-left:155px - - @media screen and (max-width 520px) - padding: 0 10px - text-align: center - iframe - margin-left: 0 - img - position: static - -.mailpoet_welcome_wizard_step_controls - margin-top: 50px - .button - margin:0 10px - -.mailpoet_welcome_wizard_woo_screenshot - margin-top: 30px - width: 400px - -@media screen and (max-width 520px) - .mailpoet_welcome_wizard_woo_screenshot - width: 340px - -.welcome_wizard_video - position: absolute - top: -1000px