diff --git a/.stylelintrc b/.stylelintrc index 567b945f2c..eb3511ffad 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -4,5 +4,6 @@ "stylelint-scss" ], "rules": { + "order/properties-alphabetical-order": true, }, } diff --git a/assets/css/src/components/_box.scss b/assets/css/src/components/_box.scss index e356b26d17..b9013e6058 100644 --- a/assets/css/src/components/_box.scss +++ b/assets/css/src/components/_box.scss @@ -16,13 +16,13 @@ $box-description-font-size: $box-description-line-height; } .mailpoet_boxes li { - float: left; - position: relative; - padding: 15px; - margin: 15px 25px 0 0; - width: $box-width; - border: 1px solid #dedede; background-color: #fff; + border: 1px solid #dedede; + float: left; + margin: 15px 25px 0 0; + padding: 15px; + position: relative; + width: $box-width; } .mailpoet_boxes .mailpoet_template_boxes { @@ -77,16 +77,16 @@ $box-description-font-size: $box-description-line-height; font-weight: 600; line-height: 20px; margin: 0; - white-space: nowrap; max-width: 100%; + white-space: nowrap; } .mailpoet_boxes .mailpoet_template_boxes .mailpoet_actions { background: #f5f5f5; - border-top: 1px solid #d6d6d6; border-left: 1px solid #e8e8e8; - padding: 8px 16px; + border-top: 1px solid #d6d6d6; bottom: 0px; + padding: 8px 16px; right: 0px; @media screen and (max-width: 782px) { @@ -95,19 +95,19 @@ $box-description-font-size: $box-description-line-height; } .mailpoet_boxes .mailpoet_thumbnail { - background-size: 50% 50%; - background-repeat: no-repeat; background-position: center; + background-repeat: no-repeat; + background-size: 50% 50%; border: 0; - width: 100%; - height: $thumbnail-height; float: left; + height: $thumbnail-height; overflow: hidden; position: relative; + width: 100%; img { - min-width: $thumbnail-height; height: auto; + min-width: $thumbnail-height; width: 100%; } } @@ -115,31 +115,31 @@ $box-description-font-size: $box-description-line-height; .woocommerce .mailpoet_thumbnail, .mailpoet_boxes .mailpoet_newsletter_types .mailpoet_thumbnail { border: 1px solid #ccc; - width: $box-height; + float: left; height: $box-height; margin-right: 15px; - float: left; overflow: hidden; position: relative; + width: $box-height; img { + left: 50%; min-width: $box-height; - width: 110%; position: relative; top: 50%; - left: 50%; transform: translate(-50%, -50%); + width: 110%; } } .mailpoet_overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; background-color: rgba(255, 255, 255, 0); + bottom: 0; + left: 0; opacity: 0; + position: absolute; + right: 0; + top: 0; transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1); /* ease-in-out */ &:hover { @@ -149,22 +149,22 @@ $box-description-font-size: $box-description-line-height; } .mailpoet_overlay .mailpoet_more_details { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - /* opacity: 0; */ - position: absolute; - top: 35%; - right: 20%; - left: 20%; background: #23282d; background: rgba(0, 0, 0, 0.7); + border-radius: 3px; color: #fff; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; font-size: 15px; - text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); -webkit-font-smoothing: antialiased; font-weight: 600; + left: 20%; padding: 15px 12px; + /* opacity: 0; */ + position: absolute; + right: 20%; text-align: center; - border-radius: 3px; + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); + top: 35%; transition: opacity 0.1s ease-in-out; } @@ -177,17 +177,17 @@ $box-description-font-size: $box-description-line-height; .mailpoet_boxes .mailpoet_description { float: left; - width: 258px; - padding-bottom: 0; - word-wrap: break-word; overflow-wrap: break-word; + padding-bottom: 0; + width: 258px; + word-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; + line-height: $box-heading-line-height; + margin: 0 0 $box-description-space-between-heading-and-paragraph 0; + max-width: 223px; + overflow: hidden; } p { @@ -198,8 +198,8 @@ $box-description-font-size: $box-description-line-height; } .mailpoet_boxes .mailpoet_actions { - position: absolute; bottom: 15px; + position: absolute; right: 15px; } @@ -263,8 +263,8 @@ $box-description-font-size: $box-description-line-height; .mailpoet_badge { margin: 0 0 0 10px; - padding: 0 6px 0 6px; max-height: 21px; + padding: 0 6px 0 6px; white-space: nowrap; } } diff --git a/assets/css/src/components/_breadcrumb.scss b/assets/css/src/components/_breadcrumb.scss index 1c787def85..9b5b3ea434 100644 --- a/assets/css/src/components/_breadcrumb.scss +++ b/assets/css/src/components/_breadcrumb.scss @@ -1,7 +1,7 @@ .mailpoet_breadcrumb { + color: #444; font-size: 0.9em; text-transform: uppercase; - color: #444; } .mailpoet_breadcrumb .mailpoet_current { @@ -9,8 +9,8 @@ } .mailpoet_breadcrumb a { - text-decoration: none; color: #444; + text-decoration: none; } .mailpoet_breadcrumb a:hover { diff --git a/assets/css/src/components/_common.scss b/assets/css/src/components/_common.scss index cc0758c887..6ddc459aba 100644 --- a/assets/css/src/components/_common.scss +++ b/assets/css/src/components/_common.scss @@ -60,8 +60,8 @@ $progress-foreground: #69b1e9; progress { background-color: $progress-background; - height: 2em; border: 0; + height: 2em; width: 100%; } @@ -83,9 +83,9 @@ progress::-moz-progress-bar { 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 { + align-self: flex-start; color: #990000; text-align: left; - align-self: flex-start; } p.sender_email_address_warning:first-child { diff --git a/assets/css/src/components/_discounts.scss b/assets/css/src/components/_discounts.scss index 3b3a6cb255..9738088ac8 100644 --- a/assets/css/src/components/_discounts.scss +++ b/assets/css/src/components/_discounts.scss @@ -1,19 +1,19 @@ .mailpoet-discount-container { - margin: 15px; - padding: 20px; background: white; border: 1px solid #FF5301; + margin: 15px; + padding: 20px; text-align: center; } .mailpoet-discount-container h1 { - margin: 0; - line-height: 1.2em; font-size: 2.8em; font-weight: 400; + line-height: 1.2em; + margin: 0; } .mailpoet-discount-container p { - line-height: 1.2em; font-size: 1.2em; + line-height: 1.2em; } diff --git a/assets/css/src/components/_featureAnnouncement.scss b/assets/css/src/components/_featureAnnouncement.scss index 793eb26e6e..878b6b1913 100644 --- a/assets/css/src/components/_featureAnnouncement.scss +++ b/assets/css/src/components/_featureAnnouncement.scss @@ -13,13 +13,13 @@ } .mailpoet_feature_announcement_dot::before { - content: ""; - display: block; - position: absolute; - top: -4px; - right: -4px; - height: 10px; - width: 10px; background: #d54e21; border-radius: 10px; + content: ""; + display: block; + height: 10px; + position: absolute; + right: -4px; + top: -4px; + width: 10px; } diff --git a/assets/css/src/components/_formEditor.scss b/assets/css/src/components/_formEditor.scss index 1589cefd16..e58868673f 100644 --- a/assets/css/src/components/_formEditor.scss +++ b/assets/css/src/components/_formEditor.scss @@ -13,25 +13,25 @@ $handle_icon: '../../img/handle.png'; } #mailpoet_form_editor { - padding: 20px; - width: 300px; - border: 1px solid #ccc; - position: relative; background-color: #fff; + border: 1px solid #ccc; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.1); + padding: 20px; + position: relative; + width: 300px; } #mailpoet_form_editor:before, #mailpoet_form_editor:after { + background: transparent; + bottom: 12px; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); + content: ' '; + height: 10px; + left: 12px; position: absolute; - width: 40%; - height: 10px; - content: ' '; - left: 12px; - bottom: 12px; - background: transparent; transform: skew(-5deg) rotate(-5deg); - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); + width: 40%; z-index: -1; } @@ -43,31 +43,31 @@ $handle_icon: '../../img/handle.png'; /* Warnings in blocks*/ .mailpoet_warning { - font-weight: bold; color: #900; + font-weight: bold; } .block_placeholder { + border: 0 none; font-weight: bold; height: 0; - overflow: hidden; line-height: 30px; + margin: 0 auto; + overflow: hidden; text-align: center; - border: 0 none; + text-indent: -9999px; 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; + overflow: auto; + text-indent: 0; } .block_placeholder.hover { @@ -78,8 +78,8 @@ $handle_icon: '../../img/handle.png'; .mailpoet_form_block { background-color: #fff; - height: 20px; border: 0 none; + height: 20px; } .mailpoet_form_block.highlighted { @@ -105,14 +105,14 @@ $handle_icon: '../../img/handle.png'; /* MailPoet Form wrapper */ #mailpoet_form_wrapper { - position: relative; margin: 20px 0 0 0; + position: relative; } /* MailPoet Form container */ #mailpoet_form_container { - width: 340px; margin: 0; + width: 340px; } #mailpoet_form_editor.loading, #mailpoet_form_toolbar.loading { @@ -135,9 +135,9 @@ $handle_icon: '../../img/handle.png'; } #mailpoet_form_toolbar { - z-index: 999; position: absolute; width: 400px; + z-index: 999; } #mailpoet_form_toolbar .mailpoet_form_toolbar_tabs { @@ -146,26 +146,26 @@ $handle_icon: '../../img/handle.png'; } #mailpoet_form_toolbar .add_custom_field { - text-align: center; padding: 15px 0 5px 0; + text-align: center; } #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: inline-block; *display: inline; *float: left; + height: 30px; + line-height: 30px; + + margin: 0; outline: 0 none; + padding: 0; } #mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a { + color: #a6a6a6; outline: 0 none; text-decoration: none; - color: #a6a6a6; } #mailpoet_form_toolbar .mailpoet_form_toolbar_tabs li { @@ -173,12 +173,12 @@ $handle_icon: '../../img/handle.png'; } #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); + background-color: #F5F5F5; border: 1px solid #DFDFDF; border-radius: 3px 3px 0 0; box-shadow: 0 1px 0 #FFFFFF inset; + font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif; padding: 0 7px; } @@ -187,9 +187,9 @@ $handle_icon: '../../img/handle.png'; } #mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a.selected { - color: #000; - border-bottom: 0 none; background: #fcfcfc; + border-bottom: 0 none; + color: #000; filter: none; padding-bottom: 1px; } @@ -201,10 +201,10 @@ $handle_icon: '../../img/handle.png'; } #mailpoet_form_toolbar .mailpoet_form_toolbar_tabs, #mailpoet_form_toolbar #mailpoet_toolbar_fields { + margin: 0; position: relative; z-index: 9998; - margin: 0; } /* edit form name */ @@ -214,30 +214,30 @@ $handle_icon: '../../img/handle.png'; /* wysija widgets */ .mailpoet_form_widget { - width: 298px; height: 25px; line-height: 25px; + width: 298px; 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; + margin-bottom: 0; max-height: 1000px; + min-width: 255px; + overflow: hidden; + position: relative; transition: max-height 0.5s ease-in-out; } .mailpoet_toolbar_section > div { - padding: 10px 20px 20px 20px; - overflow: auto; height: 100%; min-width: 255px; + overflow: auto; + padding: 10px 20px 20px 20px; } .mailpoet_toolbar_section h3 { @@ -250,28 +250,28 @@ $handle_icon: '../../img/handle.png'; } .mailpoet_toolbar_section .mailpoet_toggle { - position: absolute; - top: 0; - right: 0; height: 38px; + position: absolute; + right: 0; + top: 0; width: 27px; } .mailpoet_toolbar_section .mailpoet_toggle:focus { - outline: 0 none !important; box-shadow: none !important; + outline: 0 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; - text-decoration: none !important; content: '\f142'; + display: inline-block; + font: 400 20px / 1 dashicons; + padding: 8px 10px; + position: relative; + right: 12px; + speak: none; + text-decoration: none !important; + top: 0; } .mailpoet_toolbar_section.closed .mailpoet_toggle:before { @@ -281,45 +281,45 @@ $handle_icon: '../../img/handle.png'; #mailpoet_form_styles { margin: 10px; max-width: 318px; - width: 318px; min-height: 300px; resize: vertical; + width: 318px; } #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); + background-color: #F5F5F5; border: 1px solid #DFDFDF; border-radius: 3px; box-shadow: 0 1px 0 #FFFFFF inset; + color: #222; + cursor: move; display: block; font-size: 12px; font-weight: bold; + height: 25px; + line-height: 25px; 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; + cursor: pointer; pointer-events: none; } .mailpoet_form_field_edit { + bottom: 13px; position: absolute; right: 27px; - bottom: 13px; } .mailpoet_form_field_delete { + bottom: 13px; position: absolute; right: 7px; - bottom: 13px; } /* toolbar: fields */ @@ -329,35 +329,35 @@ $handle_icon: '../../img/handle.png'; } #mailpoet_toolbar_fields li.notice { - font-style: italic; - font-size: 11px; - margin: 0 !important; - border: 0 none !important; background: none !important; + border: 0 none !important; + font-size: 11px; + font-style: italic; + margin: 0 !important; } /* blocks */ .mailpoet_form_block { - position: relative; - margin: 0; - padding: 10px 18px 10px 18px; display: inline-table; display: block; height: 1%; margin: 0; + margin: 0; + padding: 10px 18px 10px 18px; + position: relative; z-index: 98; } .mailpoet_form_block.dragging { - z-index: 99000; pointer-events: none; + z-index: 99000; } .mailpoet_form_block:after { + clear: both; content: "."; display: block; height: 0; - clear: both; visibility: hidden; } @@ -375,27 +375,28 @@ $handle_icon: '../../img/handle.png'; /* controls*/ .mailpoet_form_block .wysija_controls { - background-color: #dfdfdf; background: linear-gradient(center 0, #eee, #bbb); - border-radius: 2px; + background-color: #dfdfdf; border: 1px solid #ccc; - position: absolute; - margin: 0; - padding: 0; - width: 298px; + border-radius: 2px; height: 20px; left: -1px; + margin: 0; + padding: 0; + position: absolute; right: 0; top: -22px; + width: 298px; } .mailpoet_form_block .wysija_controls li { float: left; - width: 20px; height: 20px; + width: 20px; } .mailpoet_form_block .wysija_controls a { + color: #000; cursor: pointer; float: left; font-size: 120%; @@ -404,7 +405,6 @@ $handle_icon: '../../img/handle.png'; line-height: 20px; text-align: center; width: 20px; - color: #000; } .mailpoet_form_block .wysija_controls a.remove { @@ -419,8 +419,8 @@ $handle_icon: '../../img/handle.png'; .mailpoet_form_block .handle_container { left: 140px; - top: 0; position: absolute; + top: 0; } /* controls & icons */ @@ -437,9 +437,9 @@ $handle_icon: '../../img/handle.png'; /* toolbar: full width button */ /* color picker in control bars */ .wysija_controls span input { + color: transparent; margin: 2px 0 0 0; padding: 0; - color: transparent; } /* left alignment button */ @@ -558,33 +558,33 @@ $handle_icon: '../../img/handle.png'; } .wysija_settings a { - background-color: #F5F5F5; background: linear-gradient(center 0, #F9F9F9, #ececec); + background-color: #F5F5F5; border: 1px solid #DFDFDF; border-radius: 3px; box-shadow: 0 1px 0 #FFFFFF inset; + color: #222; + cursor: pointer; + display: block; 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; + text-decoration: none; + text-shadow: 0 1px 0 #FFFFFF; } .wysija_settings a span { - width: 20px; height: 20px; + left: 5px; position: absolute; top: 3px; - left: 5px; + width: 20px; } /* labels */ .mailpoet_form_block label { - margin: 0 5px 0 0; display: block; + margin: 0 5px 0 0; } /* form settings: success message */ @@ -612,12 +612,12 @@ $handle_icon: '../../img/handle.png'; /* form export */ #mailpoet_form_export textarea { - width: 340px; + display: none; + font-size: 85%; height: 150px; min-height: 150px; resize: vertical; - font-size: 85%; - display: none; + width: 340px; } /** Styling for WP 3.8 and higher */ @@ -653,6 +653,6 @@ $handle_icon: '../../img/handle.png'; } .mailpoet_form_field_settings_text { - width: 100%; min-height: 100px; + width: 100%; } diff --git a/assets/css/src/components/_globals.scss b/assets/css/src/components/_globals.scss index eab0288fb0..131a584b5f 100644 --- a/assets/css/src/components/_globals.scss +++ b/assets/css/src/components/_globals.scss @@ -4,9 +4,9 @@ /* menu icon */ #adminmenu #toplevel_page_mailpoet-newsletters .wp-menu-image { - background-size: 18px 18px; - background-repeat: no-repeat; background-position: center; + background-repeat: no-repeat; + background-size: 18px 18px; } #adminmenu #toplevel_page_mailpoet-newsletters.wp-not-current-submenu .wp-menu-image { diff --git a/assets/css/src/components/_importExport.scss b/assets/css/src/components/_importExport.scss index feedef7334..35f1d5a61c 100644 --- a/assets/css/src/components/_importExport.scss +++ b/assets/css/src/components/_importExport.scss @@ -23,15 +23,15 @@ span { &.mailpoet_mailchimp-key-status { &.mailpoet_mailchimp-ok { &:before { - content: "\2713"; color: #0e90d2; + content: "\2713"; margin-left: 15px; } } &.mailpoet_mailchimp-error { &:before { - content: "\2717"; color: #900; + content: "\2717"; margin-left: 15px; } } @@ -59,17 +59,17 @@ span { } } .mailpoet_header { - text-transform: uppercase; font-weight: 600; text-decoration: underline; + text-transform: uppercase; } } #subscribers_data th:first-child, #subscribers_data td:first-child { - width: 10em !important; - text-align: center !important; padding: 0 1em 0 1em !important; + text-align: center !important; vertical-align: inherit !important; + width: 10em !important; } #subscribers_data { @@ -114,9 +114,9 @@ span { } .mailpoet_import_validation_step { - max-width: 600px; display: flex; flex-direction: column; + max-width: 600px; .mailpoet_import_step_buttons { flex-direction: row; @@ -128,8 +128,8 @@ span { } label { - margin-top: 1.5em; margin-bottom: 0.3em; + margin-top: 1.5em; padding-left: 35px; text-indent: -35px; input { diff --git a/assets/css/src/components/_intro.scss b/assets/css/src/components/_intro.scss index fcf431fb14..dd5e021beb 100644 --- a/assets/css/src/components/_intro.scss +++ b/assets/css/src/components/_intro.scss @@ -10,9 +10,9 @@ } .introjs-helperLayer { + background-color: rgba(255, 255, 255, 0.7); border: none; border-radius: 3px; - background-color: rgba(255, 255, 255, 0.7); } .introjs-tooltip { @@ -39,13 +39,13 @@ margin-bottom: -1px; &:after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 1px; background: #5b9dd9; + bottom: 0; + content: ''; + height: 1px; + left: 0; + position: absolute; + right: 0; } } @@ -66,13 +66,13 @@ } &.introjs-prevbutton { - border-top-right-radius: 0; border-bottom-right-radius: 0; + border-top-right-radius: 0; } &:not(.introjs-hidden) + .introjs-nextbutton, &.introjs-donebutton { - border-top-left-radius: 0; border-bottom-left-radius: 0; + border-top-left-radius: 0; margin-left: -1px; } } diff --git a/assets/css/src/components/_listing.scss b/assets/css/src/components/_listing.scss index 4615b3748f..65eebaf961 100644 --- a/assets/css/src/components/_listing.scss +++ b/assets/css/src/components/_listing.scss @@ -19,14 +19,14 @@ thead .mailpoet-check-column, tfoot .mailpoet-check-column { padding: 10px 0 0 3px; - width: 2.2em; vertical-align: top; + width: 2.2em; } tbody .mailpoet-check-column { margin: 0 0 0 8px; - vertical-align: text-top; padding: 11px 0 0 3px; + vertical-align: text-top; } thead th.column-primary, diff --git a/assets/css/src/components/_modal.scss b/assets/css/src/components/_modal.scss index 22dd148a9f..aa6d773f38 100644 --- a/assets/css/src/components/_modal.scss +++ b/assets/css/src/components/_modal.scss @@ -11,28 +11,28 @@ body.mailpoet_modal_opened { overflow: hidden; } .mailpoet_modal_overlay { + align-items: center; + background-color: $overlay_background_color; + box-sizing: border-box; + display: flex; height: 100%; + justify-content: center; left: 0; - overflow-y: auto; overflow-x: hidden; + overflow-y: auto; + padding: $modal_popup_margin; 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; + box-shadow: 0px 0px 20px 2px rgba(#fff, 75%); + pointer-events: none; position: relative; z-index: 100001 !important; - box-shadow: 0px 0px 20px 2px rgba(#fff, 75%); } .mailpoet_modal_overlay.mailpoet_overlay_hidden { background-color: transparent; @@ -42,10 +42,10 @@ body.mailpoet_modal_opened { display: flex !important; } .mailpoet_popup { - z-index: 25; - max-width: 100%; - margin: auto; animation: mailpoet_popup_fadein 0.5s; + margin: auto; + max-width: 100%; + z-index: 25; } @keyframes mailpoet_popup_fadein { @@ -54,18 +54,18 @@ body.mailpoet_modal_opened { } .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; + display: flex; + flex-flow: column; + height: 100%; + overflow: hidden; padding: $modal_popup_padding; + position: relative; + width: 100%; + z-index: 0; } .mailpoet_overlay_hidden .mailpoet_popup_wrapper { @@ -81,8 +81,8 @@ body.mailpoet_modal_opened { .mailpoet_popup_body { flex-grow: 1; - position: relative; margin-top: 20px; + position: relative; .button + .button { margin-left: 10px; @@ -93,20 +93,20 @@ body.mailpoet_modal_opened { margin-top: 30px; } .mailpoet_modal_overlay.mailpoet_panel_overlay { - top: 32px; overflow: hidden; + top: 32px; } .mailpoet_panel { - display: none; - position: fixed; - z-index: 100002; - top: 0; bottom: 0; - padding: 0; + display: none; margin: 0; - width: 100%; + padding: 0; + position: fixed; + top: 0; transition: margin 350ms ease-out; + width: 100%; + z-index: 100002; } .mailpoet_panel_wrapper { @@ -114,30 +114,30 @@ body.mailpoet_modal_opened { border: 1px solid #e1e1e1; border-top: 0 none; height: 100%; - overflow-y: auto; overflow-x: hidden; - width: 100%; + overflow-y: auto; top: 0; + width: 100%; z-index: 0; } .mailpoet_panel_title { + height: 0; 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; + color: $modal_title_color; + font-family: "Lucida Grande", Verdana, Arial, sans-serif; font-size: 1em; font-weight: normal; + line-height: 32px; margin: 0; padding: 0 30px 0 10px; - font-family: "Lucida Grande", Verdana, Arial, sans-serif; - line-height: 32px; } .mailpoet_panel_body { @@ -145,11 +145,11 @@ body.mailpoet_modal_opened { } .mailpoet_modal_close { cursor: pointer; - position: absolute; + outline: 0 none; overflow: hidden; padding: 0; + position: absolute; z-index: 2; - outline: 0 none; svg { opacity: 0.5; @@ -162,19 +162,19 @@ body.mailpoet_modal_opened { } .mailpoet_popup .mailpoet_modal_close { + height: $modal_close_button_size; + padding: 3px 0; 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; + padding: 2px 0; right: 20px; top: 20px; - padding: 2px 0; + width: 16px; } .mailpoet_modal_close:focus { @@ -201,8 +201,8 @@ body.mailpoet_modal_opened { } .mailpoet_popup { - width: 100%; min-width: auto !important; + width: 100%; } .mailpoet_popup_wrapper { @@ -214,8 +214,8 @@ body.mailpoet_modal_opened { } .mailpoet_popup .mailpoet_modal_close { - top: $modal_popup_padding_mobile; right: $modal_popup_padding_mobile; + top: $modal_popup_padding_mobile; } .mailpoet_modal_overlay.mailpoet_panel_overlay { @@ -228,10 +228,10 @@ body.mailpoet_modal_opened { } .mailpoet_loading { - height: 32px; - width: 150px; display: flex; flex-direction: row; + height: 32px; + width: 150px; } .mailpoet_modal_loading { @@ -239,8 +239,8 @@ body.mailpoet_modal_opened { animation-duration: 1.9500000000000002s; animation-iteration-count: infinite; animation-name: bounce_mailpoet_modal_loading; - border-radius: 21px; background-color: #E01D4E; + border-radius: 21px; height: 32px; margin-left: 17px; width: 32px; diff --git a/assets/css/src/components/_mp2migrator.scss b/assets/css/src/components/_mp2migrator.scss index 6794052b45..abeb07304d 100644 --- a/assets/css/src/components/_mp2migrator.scss +++ b/assets/css/src/components/_mp2migrator.scss @@ -1,32 +1,32 @@ #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; + height: 300px; margin-top: 20px; + overflow: scroll; + padding: 2px; + resize: both; + width: 100%; } #progressbar { - width: 50%; background-color: #d8d8d8; border-radius: 5px; + width: 50%; } $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: 0; border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; - border: 0; + height: 100%; } .mailpoet_progress_label { diff --git a/assets/css/src/components/_newsletterCongratulate.scss b/assets/css/src/components/_newsletterCongratulate.scss index 178793ae81..79dcead51c 100644 --- a/assets/css/src/components/_newsletterCongratulate.scss +++ b/assets/css/src/components/_newsletterCongratulate.scss @@ -18,14 +18,14 @@ width: 100%; h1 { - text-align: center; margin-bottom: 30px; + text-align: center; } img, .button { + display: block; margin-left: auto; margin-right: auto; - display: block; } .typeform-widget { diff --git a/assets/css/src/components/_newsletterTemplates.scss b/assets/css/src/components/_newsletterTemplates.scss index 4d6e50a8bf..0b6d5e5e38 100644 --- a/assets/css/src/components/_newsletterTemplates.scss +++ b/assets/css/src/components/_newsletterTemplates.scss @@ -1,10 +1,10 @@ @import 'newsletterEditor/variables'; .mailpoet_template_iframe { - position: absolute; - z-index: -9999; - top: 0; left: 0; - width: $newsletter-width; max-width: $newsletter-width; + position: absolute; + top: 0; + width: $newsletter-width; + z-index: -9999; } diff --git a/assets/css/src/components/_notice.scss b/assets/css/src/components/_notice.scss index 2872c29402..5810d8765d 100644 --- a/assets/css/src/components/_notice.scss +++ b/assets/css/src/components/_notice.scss @@ -1,6 +1,6 @@ .mailpoet_notice { - position: relative; clear: both; + position: relative; p:empty { display: none; } } diff --git a/assets/css/src/components/_pages.scss b/assets/css/src/components/_pages.scss index 54fe513ca6..318fb0a705 100644 --- a/assets/css/src/components/_pages.scss +++ b/assets/css/src/components/_pages.scss @@ -6,10 +6,10 @@ Please add custom styles to pages_custom.styl */ .mailpoet-about-wrap { - position: relative; + font-size: 15px; margin: 25px 40px 0 20px; max-width: 1050px; /* readability */ - font-size: 15px; + position: relative; div.updated, div.error, .notice { display: none !important; @@ -17,48 +17,48 @@ Please add custom styles to pages_custom.styl hr { border: 0; + border-top: 1px solid rgba(0, 0, 0, 0.1); height: 0; margin: 0; - border-top: 1px solid rgba(0, 0, 0, 0.1); } img { + height: auto; margin: 0; max-width: 100%; - height: auto; vertical-align: middle; } .mailpoet-logo { position: absolute; - top: 0.2em; right: 0; + top: 0.2em; } .nav-tab { - padding-right: 15px; - padding-left: 15px; font-size: 18px; + padding-left: 15px; + padding-right: 15px; } p { - line-height: 1.5; font-size: 14px; + line-height: 1.5; } .feature-section p { - max-width: 55em; margin-left: auto; margin-right: auto; + max-width: 55em; } h1 { - margin: 1em 0 0.5em 0; - padding: 0; color: #32373c; - line-height: 1.2em; font-size: 2.8em; font-weight: 400; + line-height: 1.2em; + margin: 1em 0 0.5em 0; + padding: 0; text-align: center; } @@ -68,17 +68,17 @@ Please add custom styles to pages_custom.styl } h2 { - margin: 40px 0 0.6em; font-size: 2.7em; - line-height: 1.3; font-weight: 300; + line-height: 1.3; + margin: 40px 0 0.6em; text-align: center; } h3 { - margin: 1.25em 0 0.6em; font-size: 1.4em; line-height: 1.5; + margin: 1.25em 0 0.6em; } h4 { @@ -87,16 +87,16 @@ Please add custom styles to pages_custom.styl .about-description, .about-text { - margin-top: 1.4em; + font-size: 19px; font-weight: 400; line-height: 1.6em; - font-size: 19px; + margin-top: 1.4em; } .about-text { + color: #555d66; margin: 1em 200px 1em 0; min-height: 60px; - color: #555d66; } [class$=col] { @@ -124,10 +124,10 @@ Please add custom styles to pages_custom.styl .col { display: inline-block; float: none; - margin-top: 1em; margin-right: 4.799999999%; - width: calc(47.6% - 4px); + margin-top: 1em; vertical-align: top; + width: calc(47.6% - 4px); } } } @@ -154,8 +154,8 @@ Please add custom styles to pages_custom.styl .feature-section { h4 { - margin: 1.4em 0 0.6em 0; font-size: 1em; + margin: 1.4em 0 0.6em 0; } } @@ -183,23 +183,23 @@ Please add custom styles to pages_custom.styl .headline-feature { &.feature-video { - position: relative; - margin: 40px 0; - padding-bottom: 56.25%; - width: 100%; - max-width: 100%; height: 0; + margin: 40px 0; + max-width: 100%; + padding-bottom: 56.25%; + position: relative; text-align: center; + width: 100%; } } .feature-video { embed { + height: 100%; + left: 0; position: absolute; top: 0; - left: 0; width: 100%; - height: 100%; } } @@ -278,8 +278,8 @@ Please add custom styles to pages_custom.styl } @media screen and (max-width: 500px) { - margin-right: 20px; margin-left: 10px; + margin-right: 20px; h1, .about-text { margin-right: 0; @@ -288,15 +288,15 @@ Please add custom styles to pages_custom.styl margin-bottom: 0.25em; } .mailpoet-logo { - position: relative; margin: 1em 0; - width: 100%; + position: relative; text-align: center; + width: 100%; } .two-col .col, .three-col .col { - width: 100% !important; float: none !important; + width: 100% !important; } } } diff --git a/assets/css/src/components/_pagesCustom.scss b/assets/css/src/components/_pagesCustom.scss index efd906f11e..3071b6b175 100644 --- a/assets/css/src/components/_pagesCustom.scss +++ b/assets/css/src/components/_pagesCustom.scss @@ -5,17 +5,17 @@ Custom styles for MailPoet pages. .mailpoet-about-wrap { .videoWrapper { - position: relative; - padding-bottom: 56.25%; /* 16:9 */ /*padding-top: 25px*/ height: 0; + padding-bottom: 56.25%; /* 16:9 */ + position: relative; iframe { + height: 100%; + left: 0; position: absolute; top: 0; - left: 0; width: 100%; - height: 100%; } } @@ -52,8 +52,8 @@ Custom styles for MailPoet pages. .half-width-centered { display: block; - max-width: 50%; margin-left: auto; margin-right: auto; + max-width: 50%; } } diff --git a/assets/css/src/components/_parsley.scss b/assets/css/src/components/_parsley.scss index b9a0021de8..4fc4f485f6 100644 --- a/assets/css/src/components/_parsley.scss +++ b/assets/css/src/components/_parsley.scss @@ -1,27 +1,27 @@ input.parsley-success, select.parsley-success, textarea.parsley-success { - color: #468847; background-color: #DFF0D8; border: 1px solid #D6E9C6; + color: #468847; } input.parsley-error, select.parsley-error, textarea.parsley-error { - color: #B94A48; background-color: #F2DEDE; border: 1px solid #EED3D7; + color: #B94A48; } .parsley-errors-list { - margin: 2px 0 3px; - padding: 0; - list-style-type: none; + color: #B94A48; font-size: 0.9em; line-height: 0.9em; - color: #B94A48; + list-style-type: none; + margin: 2px 0 3px; opacity: 0; + padding: 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 index 3e73634301..2295689b8e 100644 --- a/assets/css/src/components/_progressBar.scss +++ b/assets/css/src/components/_progressBar.scss @@ -1,30 +1,30 @@ .mailpoet_progress { background-color: #efefef; + border-radius: 5px; height: 25px; - padding: 0; - width: 100%; margin: 0; margin-bottom: 10px; - border-radius: 5px; + padding: 0; position: relative; + width: 100%; } .mailpoet_progress_label { - position: absolute; - width: 100%; - text-align: center; display: inline-block; margin: 2px 0 0 0; + position: absolute; + text-align: center; + width: 100%; } .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(to bottom, #34c2e3, darken(#34c2e3, 20%)); + border-radius: 3px; + box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; + display: inline-block; + height: 100%; + position: absolute; } .mailpoet_progress_complete { @@ -39,15 +39,15 @@ width: 400px; &:before { - position: relative; - top: 9px; + background-color: #d8d8d8; + border-radius: 2px; content: ""; display: block; height: 2px; - width: 100%; - border-radius: 2px; - background-color: #d8d8d8; margin: auto; + position: relative; + top: 9px; + width: 100%; } } @@ -55,14 +55,14 @@ display: inline-block; &:before { - position: relative; + background-color: #d8d8d8; + border-radius: 14px; content: ""; display: block; height: 14px; - width: 14px; - border-radius: 14px; - background-color: #d8d8d8; margin: auto; + position: relative; + width: 14px; } &.active { diff --git a/assets/css/src/components/_public.scss b/assets/css/src/components/_public.scss index 42fd514243..369dd402e2 100644 --- a/assets/css/src/components/_public.scss +++ b/assets/css/src/components/_public.scss @@ -21,18 +21,18 @@ .mailpoet_form_loading { display: none; - width: 30px; text-align: center; + width: 30px; } .mailpoet_form_loading > span { - width: 5px; - height: 5px; + animation: mailpoet-bouncedelay 1.4s infinite ease-in-out both; background-color: #5b5b5b; border-radius: 100%; display: inline-block; - animation: mailpoet-bouncedelay 1.4s infinite ease-in-out both; + height: 5px; + width: 5px; } .mailpoet_form_loading .mailpoet_bounce1 { diff --git a/assets/css/src/components/_reviewRequest.scss b/assets/css/src/components/_reviewRequest.scss index 9fbedaeb06..7f045ce118 100644 --- a/assets/css/src/components/_reviewRequest.scss +++ b/assets/css/src/components/_reviewRequest.scss @@ -1,7 +1,7 @@ .mailpoet_review_request { + margin: auto; max-width: 500px; text-align: center; - margin: auto; img { margin: 20px; diff --git a/assets/css/src/components/_settings.scss b/assets/css/src/components/_settings.scss index d2bdf0f65e..1af1d5b276 100644 --- a/assets/css/src/components/_settings.scss +++ b/assets/css/src/components/_settings.scss @@ -7,24 +7,24 @@ width: 20em; } .mailpoet_sending_methods { - margin: 25px 0 0 0; display: flex; flex-direction: row; justify-content: flex-start; + margin: 25px 0 0 0; > 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; + display: flex; + flex-basis: 0; + flex-direction: column; + flex-grow: 1; + flex-shrink: 1; + margin: 0 25px 25px 0; max-width: 500px; .mailpoet_sending_method_description { - padding: 25px; flex-grow: 1; flex-shrink: 0; + padding: 25px; } &:hover:not(.mailpoet_active) { border-color: #c5c5c5; @@ -34,26 +34,26 @@ margin-right: 0; } h3 { - text-align: center; - height: 54px; font-size: 1.5em; + height: 54px; + text-align: center; } .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; + display: flex; + flex-direction: row; + justify-content: flex-end; min-height: 2em; padding: 1em; + text-overflow: ellipsis; span { - visibility: hidden; font-weight: bold; + visibility: hidden; } div { margin-left: 1em; @@ -101,9 +101,9 @@ .sending-free-plan-button { background: #FF5301; border-color: #e64c03; - text-shadow: 0 -1px 1px #e64c03; box-shadow: 0 1px 0 #e64c03; margin: 10px 0; + text-shadow: 0 -1px 1px #e64c03; strong { text-transform: uppercase; } @@ -127,8 +127,8 @@ flex-flow: row wrap; justify-content: space-around; > li { - margin-right: 0; flex-basis: auto; + margin-right: 0; } } } diff --git a/assets/css/src/components/_welcomeWizard.scss b/assets/css/src/components/_welcomeWizard.scss index 9850b47cd9..df1778f2d1 100644 --- a/assets/css/src/components/_welcomeWizard.scss +++ b/assets/css/src/components/_welcomeWizard.scss @@ -1,8 +1,8 @@ .mailpoet_welcome_wizard_centered_column { + align-items: center; display: flex; flex-direction: column; justify-content: center; - align-items: center; } .mailpoet_welcome_wizard_header img { @@ -27,12 +27,12 @@ text-align: center; } p { - font-weight: normal; - font-size: 15px; - line-height: 22px; color: #595c65; - text-align: center; + font-size: 15px; + font-weight: normal; + line-height: 22px; margin: 10px 0; + text-align: center; } } @@ -45,17 +45,17 @@ margin-bottom: 20px; } input[type="text"] { - margin-top: 10px; font-size: 15px; - width: 328px; height: 30px; + margin-top: 10px; + width: 328px; } input[type="submit"] { margin: 50px 0 25px 0; } a.sender_form_small { - font-size: 12px; color: #595c65; + font-size: 12px; } } @@ -68,9 +68,9 @@ padding-top: 30px; position: relative; img { + left: 0; position: absolute; top: 0; - left: 0; } iframe { margin-left: 155px; diff --git a/assets/css/src/components/listing/_newsletters.scss b/assets/css/src/components/listing/_newsletters.scss index a0c433cae2..e9964461bb 100644 --- a/assets/css/src/components/listing/_newsletters.scss +++ b/assets/css/src/components/listing/_newsletters.scss @@ -34,21 +34,21 @@ $video-guide-badge-color: #46b450; } &_link_small { - text-decoration: underline !important; font-size: 0.75rem; + text-decoration: underline !important; } } .mailpoet_badge { - padding: 4px 6px 3px 6px; - margin-right: 4px; - text-transform: uppercase; - cursor: pointer; + border-radius: 3px; color: white; + cursor: pointer; font-size: 0.5625rem; font-weight: 500; - border-radius: 3px; letter-spacing: 1px; + margin-right: 4px; + padding: 4px 6px 3px 6px; + text-transform: uppercase; vertical-align: middle; &_excellent, &_teal { @@ -76,8 +76,8 @@ $video-guide-badge-color: #46b450; vertical-align: top; &:hover, &:active, &:focus { - color: #FFFFFF; background: $green-badge-color; + color: #FFFFFF; } &_grey { diff --git a/assets/css/src/components/newsletterEditor/_common.scss b/assets/css/src/components/newsletterEditor/_common.scss index 069e04bf08..5ce3866d64 100644 --- a/assets/css/src/components/newsletterEditor/_common.scss +++ b/assets/css/src/components/newsletterEditor/_common.scss @@ -44,19 +44,19 @@ select.mailpoet_font-size { } .mailpoet_input, .mailpoet_select { + appearance: none; border-radius: 1px; box-shadow: none !important; - appearance: none; - - $form-control-padding: 3px; + line-height: 28px - $form-control-padding * 2; padding: $form-control-padding; - line-height: 28px - $form-control-padding * 2; + + $form-control-padding: 3px; } .mailpoet_input { - width: 283px; border: 1px solid $select-border-color; + width: 283px; } .mailpoet_input_small { @@ -74,92 +74,92 @@ select.mailpoet_font-size { } .mailpoet_range { - width: 283px; -webkit-appearance: none; padding: 0; vertical-align: middle; + width: 283px; &: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; + border-radius: $range-border-radius; + cursor: pointer; + height: $range-track-height; + width: 100%; } &::-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; + background: $range-thumb-background-color; + border: 1px solid $range-thumb-border-color; + border-radius: $range-border-radius; + cursor: pointer; + height: $range-thumb-height; margin-top: -1 * $range-thumb-height / 3; + width: $range-thumb-width; } &: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; + border-radius: $range-border-radius; + cursor: pointer; + height: $range-track-height; + width: 100%; } &::-moz-range-thumb { + background: $range-thumb-background-color; border: 1px solid $range-thumb-border-color; + border-radius: $range-border-radius; + cursor: pointer; 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; + border: 1px solid $range-track-border-color; } &::-ms-fill-upper { - border: 1px solid $range-track-border-color; background: $range-track-background-color; + border: 1px solid $range-track-border-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; + cursor: pointer; + height: $range-track-height; + width: 100%; } &::-ms-thumb { + background: $range-thumb-background-color; border: 1px solid $range-thumb-border-color; + border-radius: $range-border-radius; + cursor: pointer; 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; + border: 1px solid $range-track-border-color; } &:focus::-ms-fill-upper { - border: 1px solid $range-track-border-color; background: $range-track-background-color; + border: 1px solid $range-track-border-color; } } @@ -203,19 +203,19 @@ select.mailpoet_font-size { } .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: 1px solid $button-default-border-color; border-radius: 3px; + color: $button-default-text-color; line-height: normal; + margin: 0; + padding: 6px 20px; vertical-align: top; } .mailpoet_button_full { - width: 100%; box-sizing: border-box; + width: 100%; } .tooltip-help-designer-subject-line div, .tooltip-help-designer-preheader div { @@ -229,9 +229,9 @@ select.mailpoet_font-size { .tooltip-help-designer-ideal-width { color: #656565; - text-transform: none; - margin-left: 5px; font-weight: normal; + margin-left: 5px; + text-transform: none; } .tooltip-help-designer-full-width .dashicons { @@ -242,8 +242,8 @@ select.mailpoet_font-size { } .mailpoet_button_primary { - border-color: $button-primary-border-color; background-color: $button-primary-background-color; + border-color: $button-primary-border-color; color: $button-primary-text-color; &:hover { @@ -255,19 +255,19 @@ select.mailpoet_font-size { display: inline; .mailpoet_button:first-child { + border-bottom-right-radius: 0; + border-top-right-radius: 0; margin-right: 0; padding: 6px 12px 6px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; } .mailpoet_button:last-child { + border-bottom-left-radius: 0; + border-left: 0; + border-top-left-radius: 0; margin-left: 0; padding-left: 10px; padding-right: 10px; - border-left: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; } } @@ -299,13 +299,13 @@ span.select2-container--open > span.select2-dropdown li.select2-results__option margin: 0px !important; & .select2-results__group { - font-weight: normal; color: #bfbfbf; + font-weight: normal; } & .select2-results__option { - padding-left: 15px; font-size: 13px; + padding-left: 15px; &[aria-selected=true] { background-color: #eee; diff --git a/assets/css/src/components/newsletterEditor/_layout.scss b/assets/css/src/components/newsletterEditor/_layout.scss index 85bffc9551..5d1f30cf40 100644 --- a/assets/css/src/components/newsletterEditor/_layout.scss +++ b/assets/css/src/components/newsletterEditor/_layout.scss @@ -2,39 +2,39 @@ $sidebar-width: 330px; $content-border-color: $structure-border-color; #mailpoet_editor { - width: 100%; clear: both; + width: 100%; } #mailpoet_editor_heading { - padding-left: 15px; - margin-left: 2px; - margin-bottom: 13px; clear: both; + margin-bottom: 13px; + margin-left: 2px; + padding-left: 15px; } #mailpoet_editor_main_wrapper { border: 1px solid $content-border-color; border-left: 0; - position: relative; min-width: 1050px; + position: relative; } #mailpoet_editor_content_container { - width: 100%; - padding-right: $sidebar-width; box-sizing: border-box; + padding-right: $sidebar-width; + width: 100%; } #mailpoet_editor_sidebar { + box-sizing: border-box; float: right; width: $sidebar-width; - box-sizing: border-box; } .mailpoet_newsletter_wrapper { - max-width: $newsletter-width; - width: $newsletter-width; margin: auto; + max-width: $newsletter-width; position: relative; + width: $newsletter-width; } diff --git a/assets/css/src/components/newsletterEditor/_libraryOverrides.scss b/assets/css/src/components/newsletterEditor/_libraryOverrides.scss index 0fed4bcb3a..9717d22cdc 100644 --- a/assets/css/src/components/newsletterEditor/_libraryOverrides.scss +++ b/assets/css/src/components/newsletterEditor/_libraryOverrides.scss @@ -30,9 +30,9 @@ div.mce-toolbar-grp.mce-container { } .mce-tinymce.mce-tinymce-inline { - border-radius: 3px; background-color: $primary-background-color; border: 1px solid $content-border-color; + border-radius: 3px; box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.05); } @@ -50,8 +50,8 @@ div.mce-toolbar-grp.mce-container { /* TinyMCE mailpoet_shortcodes toolbar icon */ .mce-i-mailpoet_shortcodes:before { - font: 400 20px / 1 dashicons !important; content: "\f307"; + font: 400 20px / 1 dashicons !important; } /* TinyMCE remove active border from the editor */ @@ -61,12 +61,12 @@ div.mce-toolbar-grp.mce-container { /* 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; + clear: both; color: #333; - padding: 4px 6px; cursor: pointer; + margin-bottom: 0; + padding: 4px 6px; position: relative; } @@ -127,17 +127,17 @@ body { /* Alter Spectrum color picker to leave only the color preview, without arrows */ .sp-replacer { - border-radius: 3px; - padding: 0; border: 0; + border-radius: 3px; box-shadow: 1px 2px darken($primary-background-color, 13%); + padding: 0; } .sp-preview { border-width: 0; + height: 25px; margin-right: 0; width: 25px; - height: 25px; } .sp-dd { @@ -170,14 +170,14 @@ body { .mailpoet_button_group { .button:first-child { + border-bottom-right-radius: 0; border-right: 0; border-top-right-radius: 0; - border-bottom-right-radius: 0; } .button:last-child { + border-bottom-left-radius: 0; border-left: 0; border-top-left-radius: 0; - border-bottom-left-radius: 0; } } diff --git a/assets/css/src/components/newsletterEditor/components/_blockTools.scss b/assets/css/src/components/newsletterEditor/components/_blockTools.scss index a1d8f5153b..4cda0f93d9 100644 --- a/assets/css/src/components/newsletterEditor/components/_blockTools.scss +++ b/assets/css/src/components/newsletterEditor/components/_blockTools.scss @@ -11,16 +11,16 @@ $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; + position: absolute; + text-align: right; text-align: center; transform: translateX(-50%); transition: visibility 0s linear 250ms; visibility: hidden; + z-index: 20; .mailpoet_tools_slider { background: $editor-content-color; @@ -68,9 +68,9 @@ $column-icon-size-with-padding: 27px; } .mailpoet_tool { - width: $column-icon-size-with-padding; - height: $column-icon-size-with-padding; display: block; + height: $column-icon-size-with-padding; + width: $column-icon-size-with-padding; svg { height: $column-icon-size; @@ -98,14 +98,14 @@ $column-icon-size-with-padding: 27px; } .mailpoet_delete_block_activated { - width: auto; height: auto; padding: 0 5px 3px 5px; + width: auto; .mailpoet_delete_block_activate { - overflow: hidden; max-height: 0; opacity: 0; + overflow: hidden; } .mailpoet_delete_block_confirm, @@ -118,8 +118,8 @@ $column-icon-size-with-padding: 27px; .mailpoet_tool { display: inline-block; - width: $content-icon-size-with-padding; height: $content-icon-size-with-padding; + width: $content-icon-size-with-padding; svg { fill: #fff; @@ -136,8 +136,8 @@ $column-icon-size-with-padding: 27px; .mailpoet_delete_block_confirmation { position: absolute; - top: 0; right: 0; + top: 0; width: 200px; } } @@ -156,33 +156,33 @@ $column-icon-size-with-padding: 27px; } .mailpoet_delete_block_activate { - max-width: $content-icon-size-with-padding; display: inline-block; + max-width: $content-icon-size-with-padding; opacity: 1; @include animation-fade-in-and-scale-horizontally(); } .mailpoet_delete_block_confirm, .mailpoet_delete_block_cancel { + display: inline-block; 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; + height: auto; padding: 0 5px; + width: auto; .mailpoet_delete_block_activate { - overflow: hidden; max-width: 0; opacity: 0; + overflow: hidden; } .mailpoet_delete_block_confirm, diff --git a/assets/css/src/components/newsletterEditor/components/_dragAndDrop.scss b/assets/css/src/components/newsletterEditor/components/_dragAndDrop.scss index 8ea5f16764..756428291a 100644 --- a/assets/css/src/components/newsletterEditor/components/_dragAndDrop.scss +++ b/assets/css/src/components/newsletterEditor/components/_dragAndDrop.scss @@ -7,26 +7,26 @@ $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; + min-height: $marker-width; + min-width: $marker-width; + position: absolute; + z-index: $marker-z-index; &::before, &::after { - position: absolute; - margin-top: -18px; - font: 400 40px / 1 dashicons; color: $primary-active-color; + font: 400 40px / 1 dashicons; + margin-top: -18px; + position: absolute; } &::before { - left: -25px; content: "\f139"; + left: -25px; } &::after { - right: -23px; content: "\f141"; + right: -23px; } } .mailpoet_drop_marker.mailpoet_drop_marker_middle, @@ -52,14 +52,14 @@ $draggable-widget-z-index: 2; } .mailpoet_widget.mailpoet_droppable_active { - padding: 0; margin: 0; + padding: 0; z-index: $draggable-widget-z-index; @include animation-fade-in(); .mailpoet_widget_icon { - padding: 0; margin: 0; + padding: 0; } } diff --git a/assets/css/src/components/newsletterEditor/components/_forms.scss b/assets/css/src/components/newsletterEditor/components/_forms.scss index 9191a89bc4..f33f666db8 100644 --- a/assets/css/src/components/newsletterEditor/components/_forms.scss +++ b/assets/css/src/components/newsletterEditor/components/_forms.scss @@ -1,6 +1,6 @@ .mailpoet_form_field { - margin-top: 15px; margin-bottom: 15px; + margin-top: 15px; } .mailpoet_form_field_title { @@ -19,16 +19,16 @@ } .mailpoet_form_field_optional { - font-size: 0.8em; color: $primary-inactive-color; + font-size: 0.8em; } .mailpoet_form_field_radio_option, .mailpoet_form_field_checkbox_option { display: inline-block; - vertical-align: top; - margin-right: 5px; line-height: 30px; + margin-right: 5px; + vertical-align: top; &:last-child { margin-right: 0; diff --git a/assets/css/src/components/newsletterEditor/components/_heading.scss b/assets/css/src/components/newsletterEditor/components/_heading.scss index f9d1b376c5..0b7cee08ab 100644 --- a/assets/css/src/components/newsletterEditor/components/_heading.scss +++ b/assets/css/src/components/newsletterEditor/components/_heading.scss @@ -1,13 +1,13 @@ .mailpoet_heading_form_field { - margin-top: 5px; margin-bottom: 5px; + margin-top: 5px; } .mailpoet_input_title, .mailpoet_input_preheader { - width: 500px; - padding: 3px; line-height: normal; + padding: 3px; + width: 500px; } .mailpoet_input_title { @@ -16,9 +16,9 @@ .mailpoet_breadcrumbs { float: left; + font-size: 0.9em; margin-bottom: 13px; margin-left: 17px; - font-size: 0.9em; text-transform: uppercase; p { diff --git a/assets/css/src/components/newsletterEditor/components/_layers.scss b/assets/css/src/components/newsletterEditor/components/_layers.scss index 18796baff9..f8cdcb0241 100644 --- a/assets/css/src/components/newsletterEditor/components/_layers.scss +++ b/assets/css/src/components/newsletterEditor/components/_layers.scss @@ -1,12 +1,12 @@ .mailpoet_container_layer_active { .mailpoet_block { - pointer-events: none; opacity: 0.4; + pointer-events: none; } .mailpoet_container_block { - pointer-events: auto; opacity: 1; + pointer-events: auto; } .mailpoet_container_block > .mailpoet_tools { @@ -19,21 +19,21 @@ } .mailpoet_layer_overlay { + background-color: rgba(0, 0, 0, 0.6); height: 100%; left: 0; - overflow-y: auto; + margin: 0 !important; overflow-x: hidden; + overflow-y: auto; 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; + pointer-events: none; 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 index a1e4ebdf9a..ac86e5b76f 100644 --- a/assets/css/src/components/newsletterEditor/components/_resize.scss +++ b/assets/css/src/components/newsletterEditor/components/_resize.scss @@ -33,10 +33,10 @@ $resize-handle-z-index: 2; } .mailpoet_resize_handle_text { - line-height: 1.5em; + color: $resize-handle-font-color; font-size: 11px; font-weight: bold; - color: $resize-handle-font-color; + line-height: 1.5em; text-align: center; } @@ -62,21 +62,21 @@ $resize-handle-z-index: 2; .mailpoet_image_resize_handle_container { - position: absolute; bottom: 0; + height: 24px; + position: absolute; 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; + display: inline-block; + height: 24px; + position: relative; + width: 24px; z-index: $resize-handle-z-index; .mailpoet_image_resize_handle_text, @@ -91,10 +91,10 @@ $resize-handle-z-index: 2; padding: 1px; & > svg { - width: 22px; - height: 22px; fill: $resize-handle-font-color; + height: 22px; vertical-align: top; + width: 22px; } } diff --git a/assets/css/src/components/newsletterEditor/components/_save.scss b/assets/css/src/components/newsletterEditor/components/_save.scss index d528443e2e..d590257a6b 100644 --- a/assets/css/src/components/newsletterEditor/components/_save.scss +++ b/assets/css/src/components/newsletterEditor/components/_save.scss @@ -4,9 +4,9 @@ .mailpoet_save_wrapper { float: right; - position: relative; - margin-right: 20px; margin-bottom: 10px; + margin-right: 20px; + position: relative; .mailpoet_save_next { margin-left: 5px; @@ -14,19 +14,19 @@ } .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; + border-radius: 3px; + clear: both; + margin: 5px 0; + overflow: hidden; + + position: absolute; + right: 0; + vertical-align: top; + white-space: nowrap; + z-index: 1000; } .mailpoet_save_option { @@ -34,9 +34,9 @@ & > a { display: block; + line-height: 2em; padding-left: 20px; padding-right: 20px; - line-height: 2em; } } @@ -54,24 +54,24 @@ } .mailpoet_save_show_options_icon { - vertical-align: middle; height: 14px; margin-top: -6px; + vertical-align: middle; } .mailpoet_save_as_template_container, .mailpoet_export_template_container { + background-color: $white-color; + border: 1px solid $structure-border-color; border-radius: 3px; - display: inline-block; - position: absolute; - right: 0; - z-index: 1000; clear: both; + display: inline-block; margin: 5px 0; padding: 0 10px; - background-color: $white-color; - border: 1px solid $structure-border-color; + position: absolute; + right: 0; + z-index: 1000; } .mailpoet_save_as_template_title, @@ -96,18 +96,18 @@ } .mailpoet_save_error { - margin-top: 10px; - width: $sidebar-width - 20px; color: $error-text-color; + margin-top: 10px; text-align: right; + width: $sidebar-width - 20px; } .mailpoet_save_dropdown_down { .mailpoet_save_options, .mailpoet_save_as_template_container, .mailpoet_export_template_container { - top: 100%; bottom: auto; + top: 100%; } .mailpoet_save_show_options { @@ -129,8 +129,8 @@ .mailpoet_save_options, .mailpoet_save_as_template_container, .mailpoet_export_template_container { - top: auto; bottom: 100%; + top: auto; } .mailpoet_save_show_options { diff --git a/assets/css/src/components/newsletterEditor/components/_sidebar.scss b/assets/css/src/components/newsletterEditor/components/_sidebar.scss index 2e8d2c5ad5..aad6ce393c 100644 --- a/assets/css/src/components/newsletterEditor/components/_sidebar.scss +++ b/assets/css/src/components/newsletterEditor/components/_sidebar.scss @@ -14,17 +14,17 @@ $widget-icon-hover-color: $primary-active-color; $widget-icon-width: 30px; #mailpoet_editor_sidebar { - border-left: $content-border-color; border-bottom: $content-border-color; + border-left: $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-left: 1px solid $content-border-color; border-right: 0; + border-top: 0; + margin-bottom: 0; &.closed .mailpoet_region_content { display: none; @@ -32,8 +32,8 @@ $widget-icon-width: 30px; } .mailpoet_region_content { - padding: 0 20px; margin-top: 12px; + padding: 0 20px; } &, .postbox { @@ -54,35 +54,35 @@ $widget-icon-width: 30px; h3, &:hover h3 { + color: $sidebar-active-heading-color; margin: 0; padding: 17px 20px; text-transform: uppercase; - color: $sidebar-active-heading-color; } h3, .handlediv { - cursor: auto; border: 0; + cursor: auto; } .handlediv::before { - top: 18px; - right: 18px; - font: 400 20px / 1 dashicons; - speak: none; + color: $sidebar-active-heading-color; + content: '\f142'; display: inline-block; - position: relative; + font: 400 20px / 1 dashicons; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + position: relative; + right: 18px; + speak: none; text-decoration: none !important; - content: '\f142'; - color: $sidebar-active-heading-color; + top: 18px; } &.closed .handlediv::before { - content: '\f140'; color: $sidebar-inactive-heading-color; + content: '\f140'; } &.closed:hover .handlediv::before { @@ -93,39 +93,39 @@ $widget-icon-width: 30px; .mailpoet_widget { display: inline-block; - width: $widget-width; - text-align: center; float: left; padding: 0 13px 15px 13px; + text-align: center; + width: $widget-width; &: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; + box-sizing: border-box; color: $widget-icon-color; fill: $widget-icon-color; - text-align: center; + height: $widget-width; line-height: $widget-width; - box-sizing: border-box; margin-bottom: 9px; + text-align: center; + width: $widget-width; /* Vertically align widget icon glyphs */ & > * { + font-size: $widget-icon-width; + height: $widget-icon-width; vertical-align: middle; width: $widget-icon-width; - height: $widget-icon-width; - font-size: $widget-icon-width; } &:hover { + border: 1px solid $widget-icon-hover-color; color: $widget-icon-hover-color; fill: $widget-icon-hover-color; - border: 1px solid $widget-icon-hover-color; } } @@ -135,9 +135,9 @@ $widget-icon-width: 30px; .mailpoet_widget_icon { border: 1px solid $widget-icon-hover-color; + box-shadow: none; color: $widget-icon-hover-color; fill: $widget-icon-hover-color; - box-shadow: none; } .mailpoet_widget_title { @@ -148,19 +148,19 @@ $widget-icon-width: 30px; /* Browser preview modal */ .mailpoet_browser_preview_wrapper { - position: absolute; - width: 100%; - height: 100%; display: flex; flex-direction: column; + height: 100%; + position: absolute; + width: 100%; } .mailpoet_browser_preview_toggle { flex: 0 1 auto; height: 30px; padding: 10px 0; - text-align: center; position: absolute; + text-align: center; top: -30px; width: 100%; } @@ -171,16 +171,16 @@ $widget-icon-width: 30px; } .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; + box-sizing: border-box; display: flex; + flex: 1 1 auto; flex-direction: column; + height: 100%; + margin: 15px auto 0 auto; + padding: 20px; + transition: width 0.5s; } .mailpoet_browser_preview_container_desktop { @@ -191,14 +191,14 @@ $widget-icon-width: 30px; width: 350px; } .mailpoet_browser_preview_border { - width: 100%; - height: 100%; - box-sizing: border-box; border: 1px solid #c3c3c3; + box-sizing: border-box; + height: 100%; + width: 100%; } .mailpoet_browser_preview_iframe { - width: calc(100% - 1px); - margin: auto; display: block; + margin: auto; + width: calc(100% - 1px); } diff --git a/assets/css/src/components/newsletterEditor/components/_sidepanel.scss b/assets/css/src/components/newsletterEditor/components/_sidepanel.scss index d928060465..e315304edb 100644 --- a/assets/css/src/components/newsletterEditor/components/_sidepanel.scss +++ b/assets/css/src/components/newsletterEditor/components/_sidepanel.scss @@ -10,15 +10,15 @@ $sidepanel-active-heading-color: $primary-active-color; } h3 { - font-size: 1.4em; color: $sidepanel-active-heading-color; + font-size: 1.4em; text-transform: uppercase; } } .mailpoet_sidepanel_field { - margin-top: 15px; margin-bottom: 15px; + margin-top: 15px; } .mailpoet_sidepanel_field_title { @@ -32,22 +32,22 @@ $sidepanel-active-heading-color: $primary-active-color; .mailpoet_sidepanel_field_title_inline { display: inline-block; - vertical-align: middle; line-height: 30px; margin-bottom: 0; + vertical-align: middle; } .mailpoet_sidepanel_field_optional { - font-size: 0.8em; color: $primary-inactive-color; + font-size: 0.8em; } .mailpoet_sidepanel_radio_option, .mailpoet_sidepanel_checkbox_option { display: inline-block; - vertical-align: top; - margin-right: 15px; line-height: 30px; + margin-right: 15px; + vertical-align: top; &:last-child { margin-right: 0; diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_automatedLatestContent.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_automatedLatestContent.scss index 5b54721114..3dd9cc4bed 100644 --- a/assets/css/src/components/newsletterEditor/contentBlocks/_automatedLatestContent.scss +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_automatedLatestContent.scss @@ -3,12 +3,12 @@ } .mailpoet_automated_latest_content_block_overlay { - position: absolute; - z-index: 19; - width: 100%; - height: 100%; background: rgba(255, 255, 255, 0); + height: 100%; + position: absolute; transition: background 0.15s ease-out; + width: 100%; + z-index: 19; .mailpoet_automated_latest_content_block:hover & { background: rgba(255, 255, 255, 0.7); diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_base.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_base.scss index 638006faf5..8f889d1508 100644 --- a/assets/css/src/components/newsletterEditor/contentBlocks/_base.scss +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_base.scss @@ -1,25 +1,25 @@ $block-text-line-height: $text-line-height; .mailpoet_block { - box-sizing: border-box; - position: relative; - float: left; background-color: inherit; box-sizing: border-box; + box-sizing: border-box; + float: left; margin-bottom: 20px; padding-left: 20px; padding-right: 20px; + position: relative; & > .mailpoet_block_highlight { - position: absolute; - top: 0; - right: 0; + border: 2px solid $transparent-color; bottom: 0; left: 0; pointer-events: none; - border: 2px solid $transparent-color; + position: absolute; + right: 0; + top: 0; transition: 0.3s; z-index: 1; } @@ -29,10 +29,10 @@ $block-text-line-height: $text-line-height; } & > .mailpoet_container_horizontal ~ .mailpoet_block_highlight { - top: -2px; - right: -2px; bottom: -2px; left: -2px; + right: -2px; + top: -2px; } &.mailpoet_highlight > .mailpoet_container_horizontal ~ .mailpoet_block_highlight { @@ -41,15 +41,15 @@ $block-text-line-height: $text-line-height; } .mailpoet_content { - position: relative; line-height: $block-text-line-height; + position: relative; h1, h2, h3, h4, h5, h6 { - line-height: $block-text-line-height; - padding: 0; - margin: 0; font-style: normal; font-weight: normal; + line-height: $block-text-line-height; + margin: 0; + padding: 0; } h1, h2, h3, h4, h5, h6 { @@ -57,33 +57,33 @@ $block-text-line-height: $text-line-height; } p:not(.mailpoet_wp_post) { - margin-top: 0; - margin-bottom: 0; - padding: 0; margin: 0; + margin-bottom: 0; + margin-top: 0; + padding: 0; } p { - line-height: $block-text-line-height; font-style: normal; font-weight: normal; + line-height: $block-text-line-height; } ul { - padding: 0; - margin-top: 10px; margin-bottom: 10px; + margin-top: 10px; + padding: 0; } li { - margin-top: 0; font-weight: normal; margin-bottom: 10px; + margin-top: 0; } blockquote { + border-left: 2px #565656 solid; 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 index 5c05fe5387..38eb2e0626 100644 --- a/assets/css/src/components/newsletterEditor/contentBlocks/_button.scss +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_button.scss @@ -1,12 +1,12 @@ .mailpoet_button_block { .mailpoet_editor_button { + box-sizing: border-box; display: block; - margin: auto; line-height: 2em; + margin: auto; + max-width: 100%; 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 index 7aaaa3edd8..516965d549 100644 --- a/assets/css/src/components/newsletterEditor/contentBlocks/_container.scss +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_container.scss @@ -5,24 +5,24 @@ $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; + width: 100%; } .mailpoet_container_block { + border: 0; + box-sizing: border-box; margin-left: 0; margin-right: 0; - position: relative; - box-sizing: border-box; - border: 0; padding-left: 0; padding-right: 0; + position: relative; } .mailpoet_container_vertical > * { - width: 100%; box-sizing: border-box; + width: 100%; } .mailpoet_container_horizontal > * { @@ -36,8 +36,8 @@ $two-column-wider-column-width: (($newsletter-width / 3) - $column-margin) * 2; float: left; } & > .mailpoet_container_block { - width: $newsletter-width; border: 0; + width: $newsletter-width; } & > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block { @@ -79,12 +79,12 @@ $two-column-wider-column-width: (($newsletter-width / 3) - $column-margin) * 2; } .mailpoet_container_empty { - text-align: center; background-color: #f2f2f2; - margin: 20px; - padding: 15px; + border-radius: 3px; box-shadow: inset 1px 2px 1px $primary-inactive-color; color: #656565; - border-radius: 3px; + margin: 20px; + padding: 15px; + text-align: center; @include animation-background-color(); } diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_divider.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_divider.scss index f1ae5ed34e..db103cbccf 100644 --- a/assets/css/src/components/newsletterEditor/contentBlocks/_divider.scss +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_divider.scss @@ -3,10 +3,10 @@ $active-divider-background-color: #daebf2; $divider-hover-border-color: $primary-active-color; .mailpoet_divider_block { + cursor: all-scroll; + margin-bottom: 0; padding-left: 0; padding-right: 0; - margin-bottom: 0; - cursor: all-scroll; } .mailpoet_divider { @@ -15,16 +15,16 @@ $divider-hover-border-color: $primary-active-color; } .mailpoet_field_divider_style { - max-width: $newsletter-width; - margin: auto; - display: block; - width: 100%; border: 1px solid transparent; + display: block; + margin: auto; + max-width: $newsletter-width; + width: 100%; } .mailpoet_active_divider_style { - border: 1px solid $active-divider-border-color; background: $active-divider-background-color; + border: 1px solid $active-divider-border-color; } .mailpoet_field_divider_style:hover { diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_footer.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_footer.scss index 38f3b019a6..713ff9bee4 100644 --- a/assets/css/src/components/newsletterEditor/contentBlocks/_footer.scss +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_footer.scss @@ -1,7 +1,7 @@ .mailpoet_footer_block { + margin-bottom: 0; padding-left: 0; padding-right: 0; - margin-bottom: 0; .mailpoet_content { padding: 10px 20px; diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_header.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_header.scss index 0e5592e9ce..4ec36a1718 100644 --- a/assets/css/src/components/newsletterEditor/contentBlocks/_header.scss +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_header.scss @@ -1,7 +1,7 @@ .mailpoet_header_block { + margin-bottom: 0; padding-left: 0; padding-right: 0; - margin-bottom: 0; .mailpoet_content { padding: 10px 20px; diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_image.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_image.scss index c5b630a955..dbbc3b4b16 100644 --- a/assets/css/src/components/newsletterEditor/contentBlocks/_image.scss +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_image.scss @@ -1,16 +1,16 @@ .mailpoet_image_block { img { - vertical-align: bottom; - max-width: 100%; height: auto; + max-width: 100%; + vertical-align: bottom; } &.mailpoet_full_image { - padding-left: 0; - padding-right: 0; margin: auto; margin-bottom: 0; + padding-left: 0; + padding-right: 0; } .mailpoet_content { diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_posts.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_posts.scss index c28f6e0705..6fdb233a07 100644 --- a/assets/css/src/components/newsletterEditor/contentBlocks/_posts.scss +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_posts.scss @@ -12,8 +12,8 @@ } .mailpoet_post_selection_filter_row { - margin-top: 5px; margin-bottom: 5px; + margin-top: 5px; } .mailpoet_posts_categories_and_tags { @@ -33,27 +33,27 @@ } .mailpoet_post_selection_container { - margin-top: 20px; margin-bottom: 0; + margin-top: 20px; } .mailpoet_post_scroll_container { - overflow-y: scroll; - overflow-x: hidden; max-height: 400px; + overflow-x: hidden; + overflow-y: scroll; } .mailpoet_settings_posts_single_post { + background-color: $white-color; + border: 1px solid $content-border-color; border-radius: 1px; box-sizing: border-box; - width: 100%; - margin-top: 5px; - margin-bottom: 5px; height: 38px; line-height: 38px; + margin-bottom: 5px; + margin-top: 5px; overflow: hidden; - border: 1px solid $content-border-color; - background-color: $white-color; + width: 100%; &:hover { border-color: $primary-active-color; diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_products.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_products.scss index 52524dccab..c7f9f910b0 100644 --- a/assets/css/src/components/newsletterEditor/contentBlocks/_products.scss +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_products.scss @@ -12,8 +12,8 @@ } .mailpoet_product_selection_filter_row { - margin-top: 5px; margin-bottom: 5px; + margin-top: 5px; } .mailpoet_products_categories_and_tags { @@ -33,27 +33,27 @@ } .mailpoet_product_selection_container { - margin-top: 20px; margin-bottom: 0; + margin-top: 20px; } .mailpoet_product_scroll_container { - overflow-y: scroll; - overflow-x: hidden; max-height: 400px; + overflow-x: hidden; + overflow-y: scroll; } .mailpoet_settings_products_single_product { + background-color: $white-color; + border: 1px solid $content-border-color; border-radius: 1px; box-sizing: border-box; - width: 100%; - margin-top: 5px; - margin-bottom: 5px; height: 38px; line-height: 38px; + margin-bottom: 5px; + margin-top: 5px; overflow: hidden; - border: 1px solid $content-border-color; - background-color: $white-color; + width: 100%; &:hover { border-color: $primary-active-color; diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_social.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_social.scss index 54d1ffff9c..e3a2276153 100644 --- a/assets/css/src/components/newsletterEditor/contentBlocks/_social.scss +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_social.scss @@ -12,8 +12,8 @@ $tool-active-color: #d2d2d4; $tool-width: 16px; .mailpoet_social_block { - padding-top: $social-block-vertical-padding; padding-bottom: $social-block-vertical-padding; + padding-top: $social-block-vertical-padding; .mailpoet_social { text-align: center; @@ -39,42 +39,42 @@ $tool-width: 16px; .mailpoet_social_icon_set { border: 1px solid transparent; - padding: 5px; margin-bottom: 5px; + padding: 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; + vertical-align: middle; + width: $social-icon-width; } } .mailpoet_active_icon_set { - border: 1px dashed $active-social-icon-set-border-color; background-color: $active-social-icon-set-background-color; + border: 1px dashed $active-social-icon-set-border-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; + margin-bottom: 9px; + + padding: 28px 9px (18px - 10px) 9px; + position: relative; } .mailpoet_social_icon_settings_row { clear: both; - overflow: auto; - margin-bottom: 10px; line-height: 30px; + margin-bottom: 10px; + overflow: auto; } .mailpoet_social_icon_settings_label { @@ -82,8 +82,8 @@ $tool-width: 16px; text-align: left; .mailpoet_social_icon_image { - width: 30px; height: 30px; + width: 30px; } &.mailpoet_social_icon_image_label { @@ -96,12 +96,12 @@ $tool-width: 16px; width: 100%; input, select { - width: 100%; - height: 30px; box-sizing: border-box; + display: inline-block; + height: 30px; margin: 0; vertical-align: middle; - display: inline-block; + width: 100%; } } @@ -111,8 +111,8 @@ $tool-width: 16px; .mailpoet_tool_icon { fill: $tool-inactive-color; - width: $tool-width; height: $tool-width; + width: $tool-width; &:hover { fill: $tool-hover-color; diff --git a/assets/css/src/components/newsletterEditor/contentBlocks/_spacer.scss b/assets/css/src/components/newsletterEditor/contentBlocks/_spacer.scss index e039eb17af..6b4aef4a70 100644 --- a/assets/css/src/components/newsletterEditor/contentBlocks/_spacer.scss +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_spacer.scss @@ -3,8 +3,8 @@ } .mailpoet_spacer_block { + cursor: all-scroll; + margin-bottom: 0; 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 index 5818c6e21f..68c2c13492 100644 --- a/assets/css/src/components/newsletterEditor/contentBlocks/_text.scss +++ b/assets/css/src/components/newsletterEditor/contentBlocks/_text.scss @@ -4,10 +4,10 @@ & > .mailpoet_content { overflow: hidden; - padding-top: 0; padding-bottom: 0px; padding-left: 20px; padding-right: 20px; + padding-top: 0; & > *: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 index 39546ef8c9..9cd8158fa3 100644 --- a/assets/css/src/components/newsletterEditor/mixins/_transitions.scss +++ b/assets/css/src/components/newsletterEditor/mixins/_transitions.scss @@ -1,8 +1,8 @@ @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; + transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1); /* ease-in-out */ &.mailpoet_closed { max-height: 0px; @@ -15,9 +15,9 @@ } @mixin animation-fade-in() { - animation-name: fadeIn; animation-duration: 300ms; animation-fill-mode: forwards; + animation-name: fadeIn; animation-timing-function: ease-in; }