Replace all .styl files with .scss, move all component files into separate folder

[MAILPOET-1813]
2019-02-20 15:06:34 +01:00
parent c9c6c0651e
commit d6e2365fb0
123 changed files with 5060 additions and 4046 deletions
--- a/assets/css/src/admin.scss
+++ 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';
--- a/assets/css/src/admin.styl
+++ b/assets/css/src/admin.styl
@ -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'
--- a/assets/css/src/adminGlobal.scss
+++ b/assets/css/src/adminGlobal.scss
@ -0,0 +1,2 @@
@import 'components/globals';
@import 'components/plugins/members';
--- a/assets/css/src/badge.styl
+++ b/assets/css/src/badge.styl
@ -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
--- a/assets/css/src/breadcrumb.styl
+++ b/assets/css/src/breadcrumb.styl
@ -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%)
--- a/assets/css/src/common.styl
+++ b/assets/css/src/common.styl
@ -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
--- a/assets/css/src/components/_box.scss
+++ b/assets/css/src/components/_box.scss
--- a/assets/css/src/components/_breadcrumb.scss
+++ 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%);
 }
--- a/assets/css/src/components/_common.scss
+++ 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;
 }
--- a/assets/css/src/components/_discounts.scss
+++ 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;
 }
--- a/assets/css/src/components/_featureAnnouncement.scss
+++ 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;
 }
--- a/assets/css/src/components/_form.scss
+++ 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;
 }
--- a/assets/css/src/components/_formEditor.scss
+++ 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;
 }
--- a/assets/css/src/components/_formValidation.scss
+++ 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;
 }
--- a/assets/css/src/components/_globals.scss
+++ b/assets/css/src/components/_globals.scss
@ -1,46 +1,22 @@
-@import 'nib'
+#wpbody {
 /*
 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
  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,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');
 }
-#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,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');
 }
--- a/assets/css/src/components/_importExport.scss
+++ 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;
    }
  }
 }
--- a/assets/css/src/components/_inAppAnnouncements.scss
+++ 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;
 }
--- a/assets/css/src/components/_intro.scss
+++ 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;
  }
 }
--- a/assets/css/src/components/_listing.scss
+++ 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%;
    }
  }
 }
--- a/assets/css/src/components/_mixins.scss
+++ b/assets/css/src/components/_mixins.scss
@ -0,0 +1,7 @@
@mixin clearfix {
 	&:after {
 		clear: both;
 		content: '';
 		display: table;
 	}
 }
--- a/assets/css/src/components/_modal.scss
+++ 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;
  }
 }
--- a/assets/css/src/components/_mp2migrator.scss
+++ 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;
 }
--- a/assets/css/src/components/_newsletterCongratulate.scss
+++ 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;
  }
 }
--- a/assets/css/src/components/_newsletterTemplates.scss
+++ 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;
 }
--- a/assets/css/src/components/_notice.scss
+++ b/assets/css/src/components/_notice.scss
@ -0,0 +1,4 @@
 .mailpoet_notice {
  position: relative;
  clear: both;
 }
--- a/assets/css/src/components/_pages.scss
+++ 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;
    }
  }
 }
--- a/assets/css/src/components/_pagesCustom.scss
+++ 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;
  }
 }
--- a/assets/css/src/components/_parsley.scss
+++ 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;
  }
 }
--- a/assets/css/src/components/_progressBar.scss
+++ 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
 }
--- a/assets/css/src/components/_public.scss
+++ 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);
  }
 }
--- a/assets/css/src/components/_reviewRequest.scss
+++ 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;
  }
 }
--- a/assets/css/src/components/_settings.scss
+++ 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;
      }
    }
  }
 }
--- a/assets/css/src/components/_subscribers.scss
+++ b/assets/css/src/components/_subscribers.scss
@ -0,0 +1,5 @@
 #subscribers_container {
  .mailpoet_segments_unsubscribed {
    color: lighten(#555, 33);
  }
 }
--- a/assets/css/src/components/_welcomeWizard.scss
+++ 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;
 }
--- a/assets/css/src/components/datepicker/_datepicker.scss
+++ b/assets/css/src/components/datepicker/_datepicker.scss
@ -0,0 +1,2 @@
@import 'jquery-ui-1.10.1';
@import 'melon.datepicker';
--- a/assets/css/src/components/datepicker/jquery-ui-1.10.1.css
+++ b/assets/css/src/components/datepicker/jquery-ui-1.10.1.css
--- a/assets/css/src/components/datepicker/melon.datepicker.css
+++ b/assets/css/src/components/datepicker/melon.datepicker.css
--- a/assets/css/src/components/listing/_newsletters.scss
+++ 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;
    }
  }
 }
--- a/assets/css/src/components/newsletterEditor/_common.scss
+++ 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;
 }
--- a/assets/css/src/components/newsletterEditor/_layout.scss
+++ 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;
 }
--- a/assets/css/src/components/newsletterEditor/_libraryOverrides.scss
+++ 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;
  }
 }
--- a/assets/css/src/components/newsletterEditor/_variables.scss
+++ 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;
--- a/assets/css/src/components/newsletterEditor/components/_blockTools.scss
+++ 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;
  }
 }
--- a/assets/css/src/components/newsletterEditor/components/_dragAndDrop.scss
+++ 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;
  }
 }
--- a/assets/css/src/components/newsletterEditor/components/_forms.scss
+++ 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;
 }
--- a/assets/css/src/components/newsletterEditor/components/_heading.scss
+++ 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;
  }
 }
--- a/assets/css/src/components/newsletterEditor/components/_layers.scss
+++ 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;
 }
--- a/assets/css/src/components/newsletterEditor/components/_resize.scss
+++ 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;
  }
 }
--- a/assets/css/src/components/newsletterEditor/components/_save.scss
+++ 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';
    }
  }
 }
--- a/assets/css/src/components/newsletterEditor/components/_sidebar.scss
+++ 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;
 }
--- a/assets/css/src/components/newsletterEditor/components/_sidepanel.scss
+++ 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;
  }
 }
--- a/assets/css/src/components/newsletterEditor/contentBlocks/_automatedLatestContent.scss
+++ 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;
 }
--- a/assets/css/src/components/newsletterEditor/contentBlocks/_base.scss
+++ 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;
  }
 }
--- a/assets/css/src/components/newsletterEditor/contentBlocks/_button.scss
+++ 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;
    }
  }
 }
--- a/assets/css/src/components/newsletterEditor/contentBlocks/_container.scss
+++ 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();
 }
--- a/assets/css/src/components/newsletterEditor/contentBlocks/_divider.scss
+++ 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;
 }
--- a/assets/css/src/components/newsletterEditor/contentBlocks/_footer.scss
+++ 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;
    }
  }
 }
--- a/assets/css/src/components/newsletterEditor/contentBlocks/_header.scss
+++ 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;
    }
  }
 }
--- a/assets/css/src/components/newsletterEditor/contentBlocks/_image.scss
+++ 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;
    }
  }
 }
--- a/assets/css/src/components/newsletterEditor/contentBlocks/_posts.scss
+++ 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%;
 }
--- a/assets/css/src/components/newsletterEditor/contentBlocks/_social.scss
+++ 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;
 }
--- a/assets/css/src/components/newsletterEditor/contentBlocks/_spacer.scss
+++ 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;
 }
--- a/assets/css/src/components/newsletterEditor/contentBlocks/_text.scss
+++ 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;
    }
  }
 }
--- a/assets/css/src/components/newsletterEditor/mixins/_transitions.scss
+++ 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;
  }
 }
--- a/assets/css/src/components/plugins/_members.scss
+++ 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%);
  }
 }
--- a/assets/css/src/datepicker/datepicker.styl
+++ b/assets/css/src/datepicker/datepicker.styl
@ -1,2 +0,0 @@
@require 'jquery-ui-1.10.1.css'
@require 'melon.datepicker.css'
--- a/assets/css/src/discounts.styl
+++ b/assets/css/src/discounts.styl
@ -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
--- a/assets/css/src/feature_announcement.styl
+++ b/assets/css/src/feature_announcement.styl
@ -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
--- a/assets/css/src/form.styl
+++ b/assets/css/src/form.styl
@ -1,5 +0,0 @@
 .mailpoet_form
  margin: 0 0 20px 0
 .mailpoet_form td
  vertical-align: top !important
--- a/assets/css/src/form_editor.styl
+++ b/assets/css/src/form_editor.styl
@ -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;
--- a/assets/css/src/form_validation.styl
+++ b/assets/css/src/form_validation.styl
@ -1,6 +0,0 @@
 .parsley-errors-list
  margin-top: 8px
 .parsley-required
 .parsley-custom-error-message
  color: #b94a48
--- a/assets/css/src/importExport.scss
+++ b/assets/css/src/importExport.scss
@ -0,0 +1 @@
@import 'components/importExport';
--- a/assets/css/src/importExport.styl
+++ b/assets/css/src/importExport.styl
@ -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
--- a/assets/css/src/in_app_announcements.styl
+++ b/assets/css/src/in_app_announcements.styl
@ -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
--- a/assets/css/src/intro.styl
+++ b/assets/css/src/intro.styl
@ -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
--- a/assets/css/src/listing.styl
+++ b/assets/css/src/listing.styl
@ -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%
--- a/assets/css/src/listing/newsletters.styl
+++ b/assets/css/src/listing/newsletters.styl
@ -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;
--- a/assets/css/src/modal.styl
+++ b/assets/css/src/modal.styl
@ -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%
--- a/assets/css/src/mp2migrator.styl
+++ b/assets/css/src/mp2migrator.styl
@ -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
--- a/assets/css/src/newsletterEditor.scss
+++ 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';
--- a/assets/css/src/newsletter_congratulate.styl
+++ b/assets/css/src/newsletter_congratulate.styl
@ -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
--- a/assets/css/src/newsletter_editor/common.styl
+++ b/assets/css/src/newsletter_editor/common.styl
@ -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
--- a/assets/css/src/newsletter_editor/components/blockTools.styl
+++ b/assets/css/src/newsletter_editor/components/blockTools.styl
@ -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
--- a/assets/css/src/newsletter_editor/components/dragAndDrop.styl
+++ b/assets/css/src/newsletter_editor/components/dragAndDrop.styl
@ -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
--- a/assets/css/src/newsletter_editor/components/forms.styl
+++ b/assets/css/src/newsletter_editor/components/forms.styl
@ -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
--- a/assets/css/src/newsletter_editor/components/heading.styl
+++ b/assets/css/src/newsletter_editor/components/heading.styl
@ -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
--- a/assets/css/src/newsletter_editor/components/layers.styl
+++ b/assets/css/src/newsletter_editor/components/layers.styl
@ -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;
--- a/assets/css/src/newsletter_editor/components/resize.styl
+++ b/assets/css/src/newsletter_editor/components/resize.styl
@ -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
--- a/assets/css/src/newsletter_editor/components/save.styl
+++ b/assets/css/src/newsletter_editor/components/save.styl
@ -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'
--- a/assets/css/src/newsletter_editor/components/sidebar.styl
+++ b/assets/css/src/newsletter_editor/components/sidebar.styl
@ -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
--- a/assets/css/src/newsletter_editor/components/sidepanel.styl
+++ b/assets/css/src/newsletter_editor/components/sidepanel.styl
@ -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
--- a/assets/css/src/newsletter_editor/contentBlocks/automatedLatestContent.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/automatedLatestContent.styl
@ -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
--- a/assets/css/src/newsletter_editor/contentBlocks/base.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/base.styl
@ -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
--- a/assets/css/src/newsletter_editor/contentBlocks/button.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/button.styl
@ -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
--- a/assets/css/src/newsletter_editor/contentBlocks/container.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/container.styl
@ -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()
--- a/assets/css/src/newsletter_editor/contentBlocks/divider.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/divider.styl
@ -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
--- a/assets/css/src/newsletter_editor/contentBlocks/footer.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/footer.styl
@ -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
--- a/assets/css/src/newsletter_editor/contentBlocks/header.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/header.styl
@ -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
--- a/assets/css/src/newsletter_editor/contentBlocks/image.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/image.styl
@ -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
--- a/assets/css/src/newsletter_editor/contentBlocks/posts.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/posts.styl
@ -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%
--- a/Show More
+++ b/Show More
		`@ -0,0 +1,2 @@`
							`@import 'components/globals';`
							`@import 'components/plugins/members';`
		`@ -0,0 +1,2 @@`
							`@import 'jquery-ui-1.10.1';`
							`@import 'melon.datepicker';`
		`@ -1,2 +0,0 @@`
			`@require 'jquery-ui-1.10.1.css'`
			`@require 'melon.datepicker.css'`