Release 3.23.0

[MAILPOET-1931]

.babelrc

@@ -1,5 +1,28 @@
 {
   "presets": [
-    "es2015", "react", "stage-2"
+    "@babel/preset-react",
+    "@babel/preset-env"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    [
+      "@babel/plugin-transform-runtime", {
+        "sourceType": "unambiguous",
+        "corejs": 2
+      }
+    ],
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-import-meta",
+    "@babel/plugin-proposal-json-strings",
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    "@babel/plugin-proposal-function-sent",
+    "@babel/plugin-proposal-export-namespace-from",
+    "@babel/plugin-proposal-numeric-separator",
+    "@babel/plugin-proposal-throw-expressions"
   ]
 }

.circleci/config.yml

@@ -3,7 +3,7 @@ jobs:
   build_and_code_qa:
     working_directory: /home/circleci/mailpoet
     docker:
-      - image: mailpoet/wordpress:7.1_20181009.1
+      - image: mailpoet/wordpress:7.3_20190306.1
     environment:
       TZ: /usr/share/zoneinfo/Etc/UTC
     steps:
@@ -11,15 +11,19 @@ jobs:
       - restore_cache:
           key: composer-{{ checksum "composer.json" }}-{{ checksum "composer.lock" }}
       - restore_cache:
-          key: npm-{{ checksum "package.json" }}
+          keys:
+            - npm-{{ checksum "package-lock.json" }}
+            - npm- # fallback to most recent npm-* if not found by checksum
       - run:
           name: "Set up test environment"
           command: |
-            # Install NodeJS+NPM
-            curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
-            sudo apt-get install nodejs build-essential
             # install plugin dependencies
+            curl -sL https://github.com/humbug/php-scoper/releases/download/0.11.4/php-scoper.phar --output php-scoper.phar
+            chmod 755 php-scoper.phar
+            mkdir -p vendor-prefixed
             curl -sS https://getcomposer.org/installer | php
+            ./composer.phar validate --no-check-all --no-check-publish
+            ./composer.phar validate --no-check-all --no-check-publish --working-dir=prefixer
             ./composer.phar install
             ./do install
             ./do compile:all --env production
@@ -28,13 +32,21 @@ jobs:
           paths:
             - vendor
       - save_cache:
-          key: npm-{{ checksum "package.json" }}
+          key: npm-{{ checksum "package-lock.json" }}
           paths:
-            - node_modules
+            - ~/.npm
       - run:
           name: "Composer security check"
           command: |
             ./do s:composer
+      - run:
+          name: Group acceptance tests to run in parallel
+          command: |
+            ./do test:acceptance-group-tests
+      - run:
+          name: Dump tests ENV variables for acceptance tests
+          command: |
+            printenv | grep WP_TEST_ > .env
       - run:
           name: "QA Scripts"
           command: ./do qa
@@ -42,11 +54,29 @@ jobs:
           root: /home/circleci/mailpoet
           paths:
             - .
+  static_analysis:
+    working_directory: /home/circleci/mailpoet
+    docker:
+    - image: mailpoet/wordpress:7.3_20190306.1
+    - image: circleci/mysql:5.7-ram
+    environment:
+      TZ: /usr/share/zoneinfo/Etc/UTC
+    steps:
+    - attach_workspace:
+        at: /home/circleci/mailpoet
+    - run:
+        name: "Set up environment"
+        command: |
+          source ./.circleci/setup.bash && setup php7
+          wget https://github.com/phpstan/phpstan/releases/download/0.11.4/phpstan.phar
+    - run:
+        name: "Static analysis"
+        command: ./do qa:phpstan
   php5_unit:
     working_directory: /home/circleci/mailpoet
     docker:
     - image: mailpoet/wordpress:5.6.30_20180417.1
-    - image: circleci/mysql:5.7
+    - image: circleci/mysql:5.7-ram
     environment:
       TZ: /usr/share/zoneinfo/Etc/UTC
     steps:
@@ -74,7 +104,7 @@ jobs:
     working_directory: /home/circleci/mailpoet
     docker:
     - image: mailpoet/wordpress:5.6.30_20180417.1
-    - image: circleci/mysql:5.7
+    - image: circleci/mysql:5.7-ram
     environment:
       TZ: /usr/share/zoneinfo/Etc/UTC
     steps:
@@ -111,7 +141,7 @@ jobs:
     - store_artifacts:
         path: /tmp/fake-mailer/
         destination: fake-mailer
-  acceptance_tests:
+  acceptance_tests_1:
     working_directory: /home/circleci/mailpoet
     machine: true
     steps:
@@ -120,22 +150,16 @@ jobs:
       - run:
           name: "Set up virtual host"
           command: echo 127.0.0.1 mailpoet.loc | sudo tee -a /etc/hosts
-      - run:
-          name: "Set up test environment"
-          command: |
-              sudo apt-get update
-              sudo apt-get install circleci-php-5.6.23
-              sudo rm /usr/bin/php
-              sudo ln -s /opt/circleci/php/5.6.23/bin/php /usr/bin/php
       - run:
           name: Run acceptance tests
           command: |
-              docker-compose run -e SKIP_DEPS=1 codeception --steps --debug -vvv --html --xml
+              cd tests/docker
+              docker-compose run -e SKIP_DEPS=1 codeception -g acceptance_group_1 --steps --debug -vvv --html --xml
       - store_artifacts:
           path: tests/_output
       - store_test_results:
           path: tests/_output
-  acceptance_tests_multisite:
+  acceptance_tests_2:
     working_directory: /home/circleci/mailpoet
     machine: true
     steps:
@@ -145,16 +169,118 @@ jobs:
           name: "Set up virtual host"
           command: echo 127.0.0.1 mailpoet.loc | sudo tee -a /etc/hosts
       - run:
-          name: "Set up test environment"
+          name: Run acceptance tests
           command: |
-              sudo apt-get update
-              sudo apt-get install circleci-php-5.6.23
-              sudo rm /usr/bin/php
-              sudo ln -s /opt/circleci/php/5.6.23/bin/php /usr/bin/php
+              cd tests/docker
+              docker-compose run -e SKIP_DEPS=1 codeception -g acceptance_group_2 --steps --debug -vvv --html --xml
+      - store_artifacts:
+          path: tests/_output
+      - store_test_results:
+          path: tests/_output
+  acceptance_tests_3:
+    working_directory: /home/circleci/mailpoet
+    machine: true
+    steps:
+      - attach_workspace:
+          at: /home/circleci/mailpoet
+      - run:
+          name: "Set up virtual host"
+          command: echo 127.0.0.1 mailpoet.loc | sudo tee -a /etc/hosts
       - run:
           name: Run acceptance tests
           command: |
-              docker-compose run -e SKIP_DEPS=1 -e MULTISITE=1 codeception --steps --debug -vvv --html --xml
+              cd tests/docker
+              docker-compose run -e SKIP_DEPS=1 codeception -g acceptance_group_3 --steps --debug -vvv --html --xml
+      - store_artifacts:
+          path: tests/_output
+      - store_test_results:
+          path: tests/_output
+  acceptance_tests_4:
+    working_directory: /home/circleci/mailpoet
+    machine: true
+    steps:
+      - attach_workspace:
+          at: /home/circleci/mailpoet
+      - run:
+          name: "Set up virtual host"
+          command: echo 127.0.0.1 mailpoet.loc | sudo tee -a /etc/hosts
+      - run:
+          name: Run acceptance tests
+          command: |
+              cd tests/docker
+              docker-compose run -e SKIP_DEPS=1 codeception -g acceptance_group_4 --steps --debug -vvv --html --xml
+      - store_artifacts:
+          path: tests/_output
+      - store_test_results:
+          path: tests/_output
+  acceptance_tests_multisite_1:
+    working_directory: /home/circleci/mailpoet
+    machine: true
+    steps:
+      - attach_workspace:
+          at: /home/circleci/mailpoet
+      - run:
+          name: "Set up virtual host"
+          command: echo 127.0.0.1 mailpoet.loc | sudo tee -a /etc/hosts
+      - run:
+          name: Run acceptance tests
+          command: |
+              cd tests/docker
+              docker-compose run -e SKIP_DEPS=1 -e MULTISITE=1 codeception -g acceptance_group_1 --steps --debug -vvv --html --xml
+      - store_artifacts:
+          path: tests/_output
+      - store_test_results:
+          path: tests/_output
+  acceptance_tests_multisite_2:
+    working_directory: /home/circleci/mailpoet
+    machine: true
+    steps:
+      - attach_workspace:
+          at: /home/circleci/mailpoet
+      - run:
+          name: "Set up virtual host"
+          command: echo 127.0.0.1 mailpoet.loc | sudo tee -a /etc/hosts
+      - run:
+          name: Run acceptance tests
+          command: |
+              cd tests/docker
+              docker-compose run -e SKIP_DEPS=1 -e MULTISITE=1 codeception -g acceptance_group_2 --steps --debug -vvv --html --xml
+      - store_artifacts:
+          path: tests/_output
+      - store_test_results:
+          path: tests/_output
+  acceptance_tests_multisite_3:
+    working_directory: /home/circleci/mailpoet
+    machine: true
+    steps:
+      - attach_workspace:
+          at: /home/circleci/mailpoet
+      - run:
+          name: "Set up virtual host"
+          command: echo 127.0.0.1 mailpoet.loc | sudo tee -a /etc/hosts
+      - run:
+          name: Run acceptance tests
+          command: |
+              cd tests/docker
+              docker-compose run -e SKIP_DEPS=1 -e MULTISITE=1 codeception -g acceptance_group_3 --steps --debug -vvv --html --xml
+      - store_artifacts:
+          path: tests/_output
+      - store_test_results:
+          path: tests/_output
+  acceptance_tests_multisite_4:
+    working_directory: /home/circleci/mailpoet
+    machine: true
+    steps:
+      - attach_workspace:
+          at: /home/circleci/mailpoet
+      - run:
+          name: "Set up virtual host"
+          command: echo 127.0.0.1 mailpoet.loc | sudo tee -a /etc/hosts
+      - run:
+          name: Run acceptance tests
+          command: |
+              cd tests/docker
+              docker-compose run -e SKIP_DEPS=1 -e MULTISITE=1 codeception -g acceptance_group_4 --steps --debug -vvv --html --xml
       - store_artifacts:
           path: tests/_output
       - store_test_results:
@@ -162,8 +288,8 @@ jobs:
   php7_unit:
     working_directory: /home/circleci/mailpoet
     docker:
-      - image: mailpoet/wordpress:7.1_20181009.1
-      - image: circleci/mysql:5.7
+      - image: mailpoet/wordpress:7.3_20190306.1
+      - image: circleci/mysql:5.7-ram
     environment:
       TZ: /usr/share/zoneinfo/Etc/UTC
     steps:
@@ -193,8 +319,8 @@ jobs:
   php7_integration:
     working_directory: /home/circleci/mailpoet
     docker:
-      - image: mailpoet/wordpress:7.1_20181009.1
-      - image: circleci/mysql:5.7
+      - image: mailpoet/wordpress:7.3_20190306.1
+      - image: circleci/mysql:5.7-ram
     environment:
       TZ: /usr/share/zoneinfo/Etc/UTC
     steps:
@@ -224,8 +350,8 @@ jobs:
   php7_integration_multisite:
     working_directory: /home/circleci/mailpoet
     docker:
-      - image: mailpoet/wordpress:7.1_20181009.1
-      - image: circleci/mysql:5.7
+      - image: mailpoet/wordpress:7.3_20190306.1
+      - image: circleci/mysql:5.7-ram
     environment:
       TZ: /usr/share/zoneinfo/Etc/UTC
     steps:
@@ -252,6 +378,52 @@ jobs:
       - store_artifacts:
           path: /tmp/fake-mailer/
           destination: fake-mailer
+  build_release_zip:
+    working_directory: /home/circleci/mailpoet
+    docker:
+      - image: mailpoet/wordpress:7.3_20190306.1
+      - image: circleci/mysql:5.7-ram
+    environment:
+      TZ: /usr/share/zoneinfo/Etc/UTC
+    steps:
+      - attach_workspace:
+          at: /home/circleci/mailpoet
+      - run:
+          name: "Set up environment"
+          command: |
+            source ./.circleci/setup.bash && setup php7
+            sudo apt-get update
+            sudo apt-get install python-pip gettext
+            sudo pip install transifex-client
+            mv wordpress ..
+            sed -i 's/^WP_ROOT=.*$/WP_ROOT=\/home\/circleci\/wordpress/g' .env
+            echo ${CIRCLE_BUILD_NUM} > release_zip_build_number.txt
+      - run:
+          name: "Build"
+          command: ./build.sh
+      - store_artifacts:
+          path: /home/circleci/mailpoet/mailpoet.zip
+      - persist_to_workspace:
+          root: /home/circleci/mailpoet
+          paths:
+          - release_zip_build_number.txt
+  test_deployment:
+    working_directory: /home/circleci/mailpoet
+    docker:
+      - image: mailpoet/wordpress:7.1_20181009.1
+    environment:
+      TZ: /usr/share/zoneinfo/Etc/UTC
+    steps:
+      - attach_workspace:
+          at: /home/circleci/mailpoet
+      - run:
+          name: "Deploy"
+          command: |
+            RELEASE_ZIP_BUILD_NUMBER=`cat release_zip_build_number.txt`
+            curl "${MAILPOET_TEST_DEPLOY_HOST}/wp-admin/admin-ajax.php?action=mailpoet_test_deploy&key=${MAILPOET_TEST_DEPLOY_KEY}&build=${RELEASE_ZIP_BUILD_NUMBER}&plugin_name=${CIRCLE_PROJECT_REPONAME}" | tee deploy.log | grep "Done! Installed successfully"
+      - store_artifacts:
+          path: deploy.log
+
 workflows:
   version: 2
   build_and_test:
@@ -263,18 +435,69 @@ workflows:
       - php7_unit:
           requires:
             - build_and_code_qa
+      - static_analysis:
+          requires:
+            - build_and_code_qa
+      - acceptance_tests_1:
+          requires:
+            - php5_unit
+      - acceptance_tests_2:
+          requires:
+            - php5_unit
+      - acceptance_tests_3:
+          requires:
+            - php5_unit
+      - acceptance_tests_4:
+          requires:
+            - php5_unit
       - php5_integration_and_js:
           requires:
             - php5_unit
       - php7_integration:
           requires:
             - php7_unit
+      - acceptance_tests_multisite_1:
+          requires:
+            - php5_unit
+          filters:
+            branches:
+              only: master
+      - acceptance_tests_multisite_2:
+          requires:
+            - php5_unit
+          filters:
+            branches:
+              only: master
+      - acceptance_tests_multisite_3:
+          requires:
+            - php5_unit
+          filters:
+            branches:
+              only: master
+      - acceptance_tests_multisite_4:
+          requires:
+            - php5_unit
+          filters:
+            branches:
+              only: master
       - php7_integration_multisite:
           requires:
             - php7_unit
-      - acceptance_tests:
+          filters:
+            branches:
+              only: master
+      - build_release_zip:
           requires:
-            - php5_unit
-      - acceptance_tests_multisite:
+            - build_and_code_qa
+            - acceptance_tests_1
+            - acceptance_tests_2
+            - acceptance_tests_3
+            - acceptance_tests_4
+            - php5_integration_and_js
+            - php7_integration
+      - test_deployment:
           requires:
-            - php5_unit
+            - build_release_zip
+          filters:
+            branches:
+              only: master

.circleci/fake-sendmail.php

@@ -1,7 +1,7 @@
 #!/usr/local/bin/php
 <?php
 $path = "/tmp/fake-mailer";
-if(!file_exists($path)) {
+if (!file_exists($path)) {
   mkdir($path);
 }
 $filename = $path . '/mailpoet-' . microtime(true) . '.txt';
@@ -10,7 +10,7 @@ $file_handle = fopen($filename, "w");
 $call_arguments = print_r($argv, true) . "\n";
 fwrite($file_handle, $call_arguments);
 
-while($line = fgets(STDIN)) {
+while ($line = fgets(STDIN)) {
   fwrite($file_handle, $line);
 }
 

.env.sample

@@ -25,3 +25,5 @@ WP_TEST_MAILER_SMTP_PASSWORD=""
 WP_SVN_USERNAME=""
 WP_SVN_PASSWORD=""
 WP_TRANSIFEX_API_TOKEN=""
+WP_JIRA_USER="" // Jira username/email
+WP_JIRA_TOKEN="" // Jira token (https://confluence.atlassian.com/cloud/api-tokens-938839638.html) or password

.eslintignore

@@ -1,3 +1,4 @@
 **/vendor/**
+**/vendor-prefixed/**
 **/testBundles/**
 assets/js/src/newsletter_editor/tinymce/wplink/plugin.js

.eslintrc.es5.json

@@ -5,9 +5,11 @@
     "browser": true
   },
   "parserOptions": {
-    "ecmaVersion": 5
+    "ecmaVersion": 6,
+    "sourceType": "module"
   },
   "rules": {
-    "no-underscore-dangle": 0 // Backbone uses underscores, we cannot remove them
+    "no-underscore-dangle": 0, // Backbone uses underscores, we cannot remove them
+    "comma-dangle": ["error", "always-multiline"]
   }
 }

.eslintrc.es6.json

@@ -11,13 +11,26 @@
       "jsx": true
     }
   },
+  "plugins": [
+    "react-hooks"
+  ],
   "settings": {
     "import/resolver": "webpack"
   },
   "rules": {
+    // Hooks
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
     // Exceptions
     "comma-dangle": ["error", "always-multiline"],
     "no-script-url": 0,
-    "import/extensions": 0 // we wouldn't be able to import jQuery without this line
+    "import/extensions": 0, // we wouldn't be able to import jQuery without this line
+    "react/destructuring-assignment": 0, // that would be too many changes to fix this one
+    "prefer-destructuring": 0, // that would be too many changes to fix this one
+    "jsx-a11y/label-has-for": [2, {
+      "required": {"some": ["nesting", "id"]} // some of our labels are hidden and we cannot nest those
+    }],
+    "jsx-a11y/anchor-is-valid": 0 // cannot fix this one, it would break wprdpress themes
   }
 }
+

.eslintrc.tests.json

@@ -5,12 +5,16 @@
     "mocha": true
   },
   "parserOptions": {
-    "ecmaVersion": 6
+    "ecmaVersion": 6,
+    "sourceType": "module"
   },
   "rules": {
+    "no-only-tests/no-only-tests": 2,
     // Exceptions
     "func-names": 0,
+    "comma-dangle": ["error", "always-multiline"],
     // Temporary
     "no-underscore-dangle": 0
-  }
+  },
+  "plugins": ["no-only-tests"]
 }

.gitignore

@@ -1,7 +1,10 @@
 .DS_Store
 TODO
 composer.phar
+php-scoper.phar
+phpstan.phar
 /vendor
+/vendor-prefixed
 /vendor_backup
 tests/_output/*
 tests/_support/_generated/*
@@ -14,17 +17,13 @@ temp
 .idea
 mailpoet.zip
 tests/javascript/testBundles
-assets/css/*.css
-assets/css/*.json
-assets/js/*.js
-assets/js/*.json
+assets/dist
 .vagrant
 lang
 .mp_svn
 /nbproject/
 tests/_data/acceptanceGenerated.sql
-lib/Dependencies
 lib/DI/CachedContainer.php
-mozart/Dependencies
-mozart/Classes
-mozart/vendor
+prefixer/vendor
+prefixer/build
+docker-compose.override.yml

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.stylelintrc

@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    "stylelint-order",
+    "stylelint-scss"
+  ],
+  "rules": {
+    "order/properties-alphabetical-order": true,
+  },
+}

CONTRIBUTING.md

@@ -2,6 +2,7 @@
 
 ## PHP Code
 - Two spaces indentation.
+- Space between keyword (if, for, switch...) and left bracket
 - CamelCase for classes.
 - camelCase for methods.
 - snake_case for variables and class properties.
@@ -13,6 +14,10 @@
 - Ensure compatibility with PHP 5.5 and newer versions.
 - Cover your code in tests.
 
+## SCSS Code
+- camelCase for file name
+- Components files are prefixed with underscore, to indicate, that they aren't compiled separately.
+
 ## JS Code
 - Javascript code should follow the [Airbnb style guide](https://github.com/airbnb/javascript).
 

README.md

@@ -30,6 +30,11 @@ $ cp .env.sample .env
 # download composer
 $ curl -sS https://getcomposer.org/installer | php
 $ chmod +x ./composer.phar
+# download a PHP-Scoper
+$ curl -sL https://github.com/humbug/php-scoper/releases/download/0.11.4/php-scoper.phar --output php-scoper.phar
+# needed for installation.
+$ mkdir -p vendor-prefixed
+$ chmod +x ./php-scoper.phar
 # install PHP dependencies
 $ ./composer.phar install
 # install all dependencies (PHP and JS)
@@ -42,7 +47,7 @@ $ ./do compile:all
 
 - [Paris ORM](https://github.com/j4mie/paris).
 - [Symfony/dependency-injection](https://github.com/symfony/dependency-injection) ([docs for 3.4](https://symfony.com/doc/3.4/components/dependency_injection.html)).
-- [Mozart](https://github.com/coenjacobs/mozart) for moving dependencies into MP namespace
+- [PHP-Scoper](https://github.com/humbug/php-scoper) for moving dependencies into MP namespace
 - [Twig](https://twig.symfony.com/) and [Handlebars](https://handlebarsjs.com/) are used for templates rendering.
 - [Monolog](https://seldaek.github.io/monolog/) is used for logging.
 - [Robo](https://robo.li/) is used to write and run workflow commands.
@@ -50,7 +55,7 @@ $ ./do compile:all
 - [Docker](https://www.docker.com/), [Docker Compose](https://docs.docker.com/compose/) and [Selenium](https://www.seleniumhq.org/) to run acceptance tests.
 - [React](https://reactjs.org/) is used to create most of UIs.
 - [Marionette](https://marionettejs.com/) is used to build the newsletters editor.
-- [Stylus](http://stylus-lang.com/) is used to write styles.
+- [SCSS](http://sass-lang.com/) is used to write styles.
 - [Mocha](https://mochajs.org/), [Chai](https://www.chaijs.com/) and [Sinon](https://sinonjs.org/) are used to write Javascript tests.
 - [ESLint](https://eslint.org/) is used to lint JS files.
 - [Webpack](https://webpack.js.org/) is used to bundle assets.
@@ -61,7 +66,7 @@ $ ./do compile:all
 $ ./do install             # install PHP and JS dependencies
 $ ./do update              # update PHP and JS dependencies
 
-$ ./do compile:css         # compiles Stylus files into CSS.
+$ ./do compile:css         # compiles SCSS files into CSS.
 $ ./do compile:js          # bundles JS files for the browser.
 $ ./do compile:all         # compiles CSS and JS files.
 
@@ -95,8 +100,12 @@ $ ./do delete:docker      # stop and remove all running docker containers.
 
 $ ./do qa:lint             # PHP code linter.
 $ ./do qa:lint:javascript  # JS code linter.
+$ ./do qa:phpstan          # PHP code static analysis using PHPStan.
 $ ./do qa                  # PHP and JS linters.
 
+$ ./do changelog:get  [--version-name=...]     # Prints out changelog and release notes for given version or for newest version.
+$ ./do changelog:update  [--version-name=...] [--quiet] # Updates changelog in readme.txt for given version or for newest version.
+
 $ ./do container:dump      # Generates DI container cache.
 ```
 
@@ -108,10 +117,10 @@ We use Symfony/dependency-injection container. Container configuration can be fo
 The container is configured and used with minimum sub-dependencies to keep final package size small.
 You can check [the docs](https://symfony.com/doc/3.4/components/dependency_injection.html) to learn more about Symfony Container.
 
-## Mozart
+## PHP-Scoper
 
-We use Mozart plugin for composer to prevent plugin libraries conflicts in PHP. Two plugins may be using different versions of a library. Mozart prefix dependencies namespaces and moves them into `libs\Dependencies` directory.
-Dependencies handled by Mozart are configured in extra configuration file `mozart/composer.json`. Installation and processing is triggered in post scripts of the main `composer.json` file.
+We use PHP-Scoper package to prevent plugin libraries conflicts in PHP. Two plugins may be using different versions of a library. PHP-Scoper prefix dependencies namespaces and they are then moved into `vendor-prefixed` directory.
+Dependencies handled by PHP-Scoper are configured in extra configuration files `prefixer/composer.json` and `prefixer/scoper.inc.php`. Installation and processing is triggered in post scripts of the main `composer.json` file.
 
 ## i18n
 

RoboFile.php

@@ -1,11 +1,14 @@
 <?php
 
 class RoboFile extends \Robo\Tasks {
+
+  use \Codeception\Task\SplitTestsByGroups;
+
   function install() {
     return $this->taskExecStack()
       ->stopOnFail()
       ->exec('./composer.phar install')
-      ->exec('npm install')
+      ->exec('npm ci --prefer-offline')
       ->run();
   }
 
@@ -32,7 +35,7 @@ class RoboFile extends \Robo\Tasks {
     );
 
     $list = array();
-    foreach($files as $file) {
+    foreach ($files as $file) {
       $list[] = $file[0];
     }
 
@@ -40,7 +43,8 @@ class RoboFile extends \Robo\Tasks {
   }
 
   function watch() {
-    $css_files = $this->rsearch('assets/css/src/', array('styl'));
+    $this->say('Warning: this lints and compiles all files, not just the changed one. Use separate tasks watch:js and watch:css for faster and more efficient watching.');
+    $css_files = $this->rsearch('assets/css/src/', array('scss'));
     $js_files = $this->rsearch('assets/js/src/', array('js', 'jsx'));
 
     $this->taskWatch()
@@ -54,10 +58,16 @@ class RoboFile extends \Robo\Tasks {
   }
 
   function watchCss() {
-    $css_files = $this->rsearch('assets/css/src/', array('styl'));
+    $css_files = $this->rsearch('assets/css/src/', array('scss'));
     $this->taskWatch()
-      ->monitor($css_files, function() {
-        $this->compileCss();
+      ->monitor($css_files, function($changedFile) {
+        $file = $changedFile->getResource()->getResource();
+        $this->taskExecStack()
+          ->stopOnFail()
+          ->exec('npm run stylelint -- "' . $file . '"')
+          ->exec('npm run scss')
+          ->exec('npm run autoprefixer')
+          ->run();
       })
       ->run();
   }
@@ -78,6 +88,9 @@ class RoboFile extends \Robo\Tasks {
   }
 
   function compileJs($opts = ['env' => null]) {
+    if (!is_dir('assets/dist/js')) {
+      mkdir('assets/dist/js', 0777, true);
+    }
     $env = ($opts['env']) ?
       sprintf('./node_modules/cross-env/dist/bin/cross-env.js NODE_ENV="%s"', $opts['env']) :
       null;
@@ -85,32 +98,21 @@ class RoboFile extends \Robo\Tasks {
   }
 
   function compileCss($opts = ['env' => null]) {
+    if (!is_dir('assets/dist/css')) {
+      mkdir('assets/dist/css', 0777, true);
+    }
     // Clean up folder from previous files
-    array_map('unlink', glob("assets/css/*.*"));
+    array_map('unlink', glob("assets/dist/css/*.*"));
 
-    $css_files = array(
-      'assets/css/src/admin.styl',
-      'assets/css/src/admin-global.styl',
-      'assets/css/src/newsletter_editor/newsletter_editor.styl',
-      'assets/css/src/public.styl',
-      'assets/css/src/rtl.styl',
-      'assets/css/src/importExport.styl'
-    );
-
-    $compilation_result = $this->_exec(join(' ', array(
-      './node_modules/stylus/bin/stylus',
-      '--include ./node_modules',
-      '--include-css',
-      '-u nib',
-      join(' ', $css_files),
-      '-o assets/css/'
-    )));
+    $this->_exec('npm run stylelint -- "assets/css/src/components/**/*.scss"');
+    $this->_exec('npm run scss');
+    $compilation_result = $this->_exec('npm run autoprefixer');
 
     // Create manifest file
     $manifest = [];
-    foreach(glob('assets/css/*.css') as $style) {
+    foreach (glob('assets/dist/css/*.css') as $style) {
       // Hash and rename styles if production environment
-      if($opts['env'] === 'production') {
+      if ($opts['env'] === 'production') {
         $hashed_style = sprintf(
           '%s.%s.css',
           pathinfo($style)['filename'],
@@ -122,7 +124,7 @@ class RoboFile extends \Robo\Tasks {
         $manifest[basename($style)] = basename($style);
       }
     }
-    file_put_contents('assets/css/manifest.json', json_encode($manifest, JSON_PRETTY_PRINT));
+    file_put_contents('assets/dist/css/manifest.json', json_encode($manifest, JSON_PRETTY_PRINT));
     return $compilation_result;
   }
 
@@ -158,15 +160,15 @@ class RoboFile extends \Robo\Tasks {
 
     $command = 'vendor/bin/codecept run unit';
 
-    if($opts['file']) {
+    if ($opts['file']) {
       $command .= ' -f ' . $opts['file'];
     }
 
-    if($opts['xml']) {
+    if ($opts['xml']) {
       $command .= ' --xml';
     }
 
-    if($opts['debug']) {
+    if ($opts['debug']) {
       $command .= ' --debug';
     }
 
@@ -178,19 +180,19 @@ class RoboFile extends \Robo\Tasks {
 
     $command = 'vendor/bin/codecept run integration';
 
-    if($opts['multisite']) {
+    if ($opts['multisite']) {
       $command = 'MULTISITE=true ' . $command;
     }
 
-    if($opts['file']) {
+    if ($opts['file']) {
       $command .= ' -f ' . $opts['file'];
     }
 
-    if($opts['xml']) {
+    if ($opts['xml']) {
       $command .= ' --xml';
     }
 
-    if($opts['debug']) {
+    if ($opts['debug']) {
       $command .= ' --debug';
     }
 
@@ -210,7 +212,7 @@ class RoboFile extends \Robo\Tasks {
       ($opts['xml']) ? '--coverage-xml' : '--coverage-html'
     ));
 
-    if($opts['xml']) {
+    if ($opts['xml']) {
       $command .= ' --xml';
     }
     return $this->_exec($command);
@@ -225,7 +227,7 @@ class RoboFile extends \Robo\Tasks {
       'tests/javascript/testBundles/**/*.js'
     ));
 
-    if(!empty($xml_output_file)) {
+    if (!empty($xml_output_file)) {
       $command .= sprintf(
         ' --reporter xunit --reporter-options output="%s"',
         $xml_output_file
@@ -247,27 +249,31 @@ class RoboFile extends \Robo\Tasks {
     return $this->testIntegration($opts);
   }
 
-  function testAcceptance($opts=['file' => null, 'skip-deps' => false]) {
-    return $this->_exec(
+  function testAcceptance($opts=['file' => null, 'skip-deps' => false, 'timeout' => null]) {
+    return $this->taskExec(
       'COMPOSE_HTTP_TIMEOUT=200 docker-compose run ' .
       ($opts['skip-deps'] ? '-e SKIP_DEPS=1 ' : '') .
+      ($opts['timeout'] ? '-e WAIT_TIMEOUT=' . (int)$opts['timeout'] . ' ' : '') .
       'codeception --steps --debug -vvv ' .
       '-f ' . ($opts['file'] ? $opts['file'] : '')
-    );
+    )->dir(__DIR__ . '/tests/docker')->run();
   }
 
-  function testAcceptanceMultisite($opts=['file' => null, 'skip-deps' => false]) {
-    return $this->_exec(
+  function testAcceptanceMultisite($opts=['file' => null, 'skip-deps' => false, 'timeout' => null]) {
+    return $this->taskExec(
       'COMPOSE_HTTP_TIMEOUT=200 docker-compose run ' .
       ($opts['skip-deps'] ? '-e SKIP_DEPS=1 ' : '') .
+      ($opts['timeout'] ? '-e WAIT_TIMEOUT=' . (int)$opts['timeout'] . ' ' : '') .
       '-e MULTISITE=1 ' .
       'codeception --steps --debug -vvv' .
       '-f ' . ($opts['file'] ? $opts['file'] : '')
-    );
+    )->dir(__DIR__ . '/tests/docker')->run();
   }
 
   function deleteDocker() {
-    return $this->_exec('docker-compose down -v --remove-orphans --rmi all');
+    return $this->taskExec(
+      'docker-compose down -v --remove-orphans --rmi all'
+    )->dir(__DIR__ . '/tests/docker')->run();
   }
 
   function testFailedUnit() {
@@ -283,9 +289,6 @@ class RoboFile extends \Robo\Tasks {
   }
 
   function containerDump() {
-    $this->say('Deleting DI Container');
-    $this->_exec('rm -f ./lib/DI/CachedContainer.php');
-    $this->say('Generating DI container cache');
     $this->loadEnv();
     define('ABSPATH', getenv('WP_ROOT') . '/');
     if (!file_exists(ABSPATH . 'wp-config.php')) {
@@ -293,8 +296,22 @@ class RoboFile extends \Robo\Tasks {
       exit(1);
     }
     require_once __DIR__ . '/vendor/autoload.php';
-    $container_factory = new \MailPoet\DI\ContainerFactory();
-    $container_factory->dumpContainer();
+    $configurator = new \MailPoet\DI\ContainerConfigurator();
+    $dump_file = __DIR__ .  '/generated/' . $configurator->getDumpClassname() . '.php';
+    $this->say('Deleting DI Container');
+    $this->_exec("rm -f $dump_file");
+    $this->say('Generating DI container cache');
+    $container_factory = new \MailPoet\DI\ContainerFactory($configurator);
+    $container = $container_factory->getConfiguredContainer();
+    $container->compile();
+    $dumper = new \MailPoetVendor\Symfony\Component\DependencyInjection\Dumper\PhpDumper($container);
+    file_put_contents(
+      $dump_file,
+      $dumper->dump([
+        'class' => $configurator->getDumpClassname(),
+        'namespace' => $configurator->getDumpNamespace()
+      ])
+    );
   }
 
   function qa() {
@@ -304,6 +321,7 @@ class RoboFile extends \Robo\Tasks {
       return $this->qaCodeSniffer('all');
     });
     $collection->addCode(array($this, 'qaLintJavascript'));
+    $collection->addCode(array($this, 'qaLintCss'));
     return $collection->run();
   }
 
@@ -315,6 +333,10 @@ class RoboFile extends \Robo\Tasks {
     return $this->_exec('npm run lint');
   }
 
+  function qaLintCss() {
+    return $this->_exec('npm run stylelint -- "assets/css/src/components/**/*.scss"');
+  }
+
   function qaCodeSniffer($severity='errors') {
     if ($severity === 'all') {
       $severityFlag = '-w';
@@ -325,8 +347,8 @@ class RoboFile extends \Robo\Tasks {
       ->taskExec(
         './vendor/bin/phpcs '.
         '--standard=./tasks/code_sniffer/MailPoet '.
-        '--runtime-set testVersion 5.6-7.2 '.
-        '--ignore=./lib/Util/Sudzy/*,./lib/Util/CSS.php,./lib/Util/XLSXWriter.php,./lib/Dependencies/*,'.
+        '--runtime-set testVersion 5.6-7.3 '.
+        '--ignore=./lib/Util/Sudzy/*,./lib/Util/CSS.php,./lib/Util/XLSXWriter.php,'.
         './lib/Util/pQuery/*,./lib/Config/PopulatorData/Templates/* '.
         'lib/ '.
         $severityFlag
@@ -334,7 +356,7 @@ class RoboFile extends \Robo\Tasks {
       ->taskExec(
         './vendor/bin/phpcs '.
         '--standard=./tasks/code_sniffer/MailPoet '.
-        '--runtime-set testVersion 5.6-7.2 '.
+        '--runtime-set testVersion 5.6-7.3 '.
         '--ignore=./tests/unit/_bootstrap.php,./tests/unit/_fixtures.php,./tests/integration/_bootstrap.php,./tests/integration/_fixtures.php '.
         'tests/unit tests/integration tests/acceptance tests/DataFactories '.
         $severityFlag
@@ -342,13 +364,35 @@ class RoboFile extends \Robo\Tasks {
       ->run();
   }
 
+  function qaPhpstan() {
+    // PHPStan must be run out of main plugin directory to avoid its autoloading
+    // from vendor/autoload.php where some dev dependencies cause conflicts.
+    $dir = __DIR__;
+    $this->loadEnv();
+    return $this->collectionBuilder()
+      ->taskExec('rm -rf ' . __DIR__ . '/vendor/goaop')
+      ->taskExec('rm -rf ' . __DIR__ . '/vendor/nikic')
+      ->taskExec('cd ' . __DIR__ . ' && ./composer.phar dump-autoload')
+      ->taskExec(
+        'WP_ROOT="'.getenv('WP_ROOT').'" '.
+        'php -d memory_limit=2G '.
+        "$dir/phpstan.phar analyse ".
+        "--configuration $dir/tasks/phpstan/phpstan.neon ".
+        '--level 4 '.
+        "$dir/lib"
+      )
+      ->dir(__DIR__ . '/tasks/phpstan')
+      ->taskExec('cd ' . __DIR__ . ' && ./composer.phar install')
+      ->run();
+  }
+
   function svnCheckout() {
     $svn_dir = ".mp_svn";
 
     $collection = $this->collectionBuilder();
 
     // Clean up the SVN dir for faster shallow checkout
-    if(file_exists($svn_dir)) {
+    if (file_exists($svn_dir)) {
       $collection->taskExecStack()
         ->exec('rm -rf ' . $svn_dir);
     }
@@ -365,6 +409,21 @@ class RoboFile extends \Robo\Tasks {
       ->run();
   }
 
+  function svnPushTemplates() {
+    $collection = $this->collectionBuilder();
+    $this->svnCheckout();
+    $awkCmd = '{print " --force \""$2"\""}';
+    $xargsFlag = (stripos(PHP_OS, 'Darwin') !== false) ? '' : '-r';
+    return $collection->taskExecStack()
+      ->stopOnFail()
+      ->dir('.mp_svn')
+      ->exec('cp -R ../plugin_repository/assets/newsletter-templates/* assets/newsletter-templates')
+      ->exec("svn st | grep ^! | awk '$awkCmd' | xargs $xargsFlag svn rm")
+      ->exec('svn add --force * --auto-props --parents --depth infinity -q')
+      ->exec('svn commit -m "Push Templates for test"')
+      ->run();
+  }
+
   function svnPublish($opts = ['force' => false]) {
     $this->loadEnv();
 
@@ -373,19 +432,19 @@ class RoboFile extends \Robo\Tasks {
     $plugin_dist_name = 'mailpoet';
     $plugin_dist_file = $plugin_dist_name . '.zip';
 
-    if(!$plugin_version) {
+    if (!$plugin_version) {
       throw new \Exception('Could not parse plugin version, check the plugin header');
     }
     $this->say('Publishing version: ' . $plugin_version);
 
     // Sanity checks
-    if(!is_readable($plugin_dist_file)) {
+    if (!is_readable($plugin_dist_file)) {
       $this->say("Failed to access " . $plugin_dist_file);
       return;
-    } elseif(!file_exists($svn_dir . "/.svn/")) {
+    } elseif (!file_exists($svn_dir . "/.svn/")) {
       $this->say("$svn_dir/.svn/ dir not found, is it a SVN repository?");
       return;
-    } elseif(file_exists($svn_dir . "/tags/" . $plugin_version)) {
+    } elseif (file_exists($svn_dir . "/tags/" . $plugin_version)) {
       $this->say("A SVN tag already exists: " . $plugin_version);
       return;
     }
@@ -393,7 +452,7 @@ class RoboFile extends \Robo\Tasks {
     $collection = $this->collectionBuilder();
 
     // Clean up tmp dirs if the previous run was halted
-    if(file_exists("$svn_dir/trunk_new") || file_exists("$svn_dir/trunk_old")) {
+    if (file_exists("$svn_dir/trunk_new") || file_exists("$svn_dir/trunk_old")) {
       $collection->taskFileSystemStack()
         ->stopOnFail()
         ->remove(array("$svn_dir/trunk_new", "$svn_dir/trunk_old"));
@@ -405,7 +464,7 @@ class RoboFile extends \Robo\Tasks {
       ->preserveTopDirectory(false);
 
     // Rename current trunk
-    if(file_exists("$svn_dir/trunk")) {
+    if (file_exists("$svn_dir/trunk")) {
       $collection->taskFileSystemStack()
         ->rename("$svn_dir/trunk", "$svn_dir/trunk_old");
     }
@@ -421,7 +480,7 @@ class RoboFile extends \Robo\Tasks {
       ->mirror('./plugin_repository/assets', "$svn_dir/assets_new");
 
     // Rename current assets folder
-    if(file_exists("$svn_dir/assets")) {
+    if (file_exists("$svn_dir/assets")) {
       $collection->taskFileSystemStack()
         ->rename("$svn_dir/assets", "$svn_dir/assets_old");
     }
@@ -448,12 +507,12 @@ class RoboFile extends \Robo\Tasks {
 
     $result = $collection->run();
 
-    if($result->wasSuccessful()) {
+    if ($result->wasSuccessful()) {
       // Run or suggest release command depending on a flag
       $repo_url = "https://plugins.svn.wordpress.org/$plugin_dist_name";
       $release_cmd = "svn ci -m \"Release $plugin_version\"";
       $tag_cmd = "svn copy $repo_url/trunk $repo_url/tags/$plugin_version -m \"Tag $plugin_version\"";
-      if(!empty($opts['force'])) {
+      if (!empty($opts['force'])) {
         $svn_login = getenv('WP_SVN_USERNAME');
         $svn_password = getenv('WP_SVN_PASSWORD');
         if ($svn_login && $svn_password) {
@@ -483,12 +542,26 @@ class RoboFile extends \Robo\Tasks {
   public function publish($opts = ['force' => false]) {
     return $this->collectionBuilder()
       ->addCode(array($this, 'pushpot'))
+      ->addCode(array($this, 'svnCheckout'))
       ->addCode(function () use ($opts) {
         return $this->svnPublish($opts);
       })
       ->run();
   }
 
+  function changelogUpdate($opts = ['version-name' => null]) {
+    $this->say("Updating changelog");
+    $outputs = $this->getChangelogController()->update($opts['version-name']);
+    $this->say("Changelog \n{$outputs[0]} \n{$outputs[1]}\n\n");
+    $this->say("IMPORTANT NOTES \n" . ($outputs[2] ?: 'none'));
+  }
+
+  function changelogGet($opts = ['version-name' => null]) {
+    $outputs = $this->getChangelogController()->get($opts['version-name']);
+    $this->say("Changelog \n{$outputs[0]} \n{$outputs[1]}\n");
+    $this->say("IMPORTANT NOTES \n" . ($outputs[2] ?: 'none'));
+  }
+
   protected function loadEnv() {
     $dotenv = new Dotenv\Dotenv(__DIR__);
     $dotenv->load();
@@ -499,4 +572,90 @@ class RoboFile extends \Robo\Tasks {
     preg_match('/^[ \t*]*Version:(.*)$/mi', $data, $m);
     return !empty($m[1]) ? trim($m[1]) : false;
   }
+
+  protected function getChangelogController() {
+    require_once './tasks/release/ChangelogController.php';
+    $this->loadEnv();
+    return \MailPoetTasks\Release\ChangelogController::createWithJiraCredentials(
+      getenv('WP_JIRA_TOKEN'),
+      getenv('WP_JIRA_USER'),
+      \MailPoetTasks\Release\Jira::PROJECT_MAILPOET,
+      __DIR__ . '/readme.txt'
+    );
+  }
+
+  protected function getReleaseVersionController() {
+    require_once './tasks/release/ReleaseVersionController.php';
+    $this->loadEnv();
+    return \MailPoetTasks\Release\ReleaseVersionController::createWithJiraCredentials(
+      getenv('WP_JIRA_TOKEN'),
+      getenv('WP_JIRA_USER'),
+      \MailPoetTasks\Release\Jira::PROJECT_MAILPOET
+    );
+  }
+
+  public function testAcceptanceGroupTests() {
+    return $this->taskSplitTestFilesByGroups(4)
+      ->projectRoot('.')
+      ->testsFrom('tests/acceptance')
+      ->groupsTo('tests/acceptance/_groups/group_')
+      ->run();
+  }
+
+  public function writeReleaseVersion($version) {
+    $version = trim($version);
+    $this->validateVersion($version);
+
+    $this->taskReplaceInFile(__DIR__ . '/readme.txt')
+      ->regex('/Stable tag:\s*\d+\.\d+\.\d+/i')
+      ->to('Stable tag: ' . $version)
+      ->run();
+
+    $this->taskReplaceInFile(__DIR__ . '/mailpoet.php')
+      ->regex('/Version:\s*\d+\.\d+\.\d+/i')
+      ->to('Version: ' . $version)
+      ->run();
+
+    $this->taskReplaceInFile(__DIR__ . '/mailpoet.php')
+      ->regex("/['\"]version['\"]\s*=>\s*['\"]\d+\.\d+\.\d+['\"],/i")
+      ->to(sprintf("'version' => '%s',", $version))
+      ->run();
+  }
+
+  public function jiraReleaseVersion($version = null, $opts = []) {
+    if ($version) {
+      $this->validateVersion($version);
+    }
+    try {
+      list($version, $output) = $this->getReleaseVersionController()
+        ->assignVersionToCompletedTickets($version);
+    } catch (\Exception $e) {
+      $this->yell($e->getMessage(), 40, 'red');
+      exit(1);
+    }
+    $this->say($output);
+    if (!empty($opts['return'])) {
+      return $version;
+    }
+  }
+
+  public function prepareRelease($version = null) {
+    $version = $this->jiraReleaseVersion($version, ['return' => true]);
+
+    return $this->collectionBuilder()
+      ->addCode(function () use ($version) {
+        return $this->writeReleaseVersion($version);
+      })
+      ->addCode(function () use ($version) {
+        return $this->changelogUpdate(['version-name' => $version]);
+      })
+      ->run();
+  }
+
+  protected function validateVersion($version) {
+    if (!preg_match('/\d+\.\d+\.\d+/', $version)) {
+      $this->yell('Incorrect version format', 40, 'red');
+      exit(1);
+    }
+  }
 }

assets/css/src/admin.scss

@@ -0,0 +1,39 @@
+@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/newsletterCongratulate.scss';
+@import 'components/discounts';
+@import 'components/reviewRequest';

assets/css/src/admin.styl

@@ -1,40 +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/react-confirm-alert/src/react-confirm-alert.css'
-@require '../../../node_modules/intro.js/introjs.css'
-
-@require 'newsletter_templates'
-@require 'welcome_wizard'
-@require 'intro'
-@require 'in_app_announcements'
-@require 'newsletter_congratulate.styl'
-@require 'discounts'

assets/css/src/adminGlobal.scss

@@ -0,0 +1,2 @@
+@import 'components/globals';
+@import 'components/plugins/members';

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

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%)

assets/css/src/common.styl

@@ -1,80 +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
-
-span.feedback-tooltip
-  badge()
-  display inline-block
-  padding 0 4px
-  background-color #ca4a1f
-

assets/css/src/components/_breadcrumb.scss

@@ -0,0 +1,18 @@
+.mailpoet_breadcrumb {
+  color: #444;
+  font-size: 0.9em;
+  text-transform: uppercase;
+}
+
+.mailpoet_breadcrumb .mailpoet_current {
+  font-weight: bold;
+}
+
+.mailpoet_breadcrumb a {
+  color: #444;
+  text-decoration: none;
+}
+
+.mailpoet_breadcrumb a:hover {
+  color: darken(#444, 50%);
+}

assets/css/src/components/_common.scss

@@ -0,0 +1,93 @@
+.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;
+  border: 0;
+  height: 2em;
+  width: 100%;
+}
+
+progress::-webkit-progress-bar {
+  background-color: $progress-background;
+}
+
+progress::-webkit-progress-value {
+  background-color: $progress-foreground;
+  border-radius: $progress-border-radius;
+}
+
+progress::-moz-progress-bar {
+  background-color: $progress-foreground;
+  border-radius: $progress-border-radius;
+}
+
+/* double class is intentional here, we need to be very specific here to
+   something wrapping our warning message could override its style */
+p.sender_email_address_warning.sender_email_address_warning,
+p.sender_email_address_warning.sender_email_address_warning a {
+  align-self: flex-start;
+  color: #990000;
+  text-align: left;
+}
+
+p.sender_email_address_warning:first-child {
+  margin-top: 1em;
+}

assets/css/src/components/_discounts.scss

@@ -0,0 +1,19 @@
+.mailpoet-discount-container {
+  background: white;
+  border: 1px solid #FF5301;
+  margin: 15px;
+  padding: 20px;
+  text-align: center;
+}
+
+.mailpoet-discount-container h1 {
+  font-size: 2.8em;
+  font-weight: 400;
+  line-height: 1.2em;
+  margin: 0;
+}
+
+.mailpoet-discount-container p {
+  font-size: 1.2em;
+  line-height: 1.2em;
+}

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 {
+  background: #d54e21;
+  border-radius: 10px;
+  content: "";
+  display: block;
+  height: 10px;
+  position: absolute;
+  right: -4px;
+  top: -4px;
+  width: 10px;
+}

assets/css/src/components/_form.scss

@@ -0,0 +1,7 @@
+.mailpoet_form {
+  margin: 0 0 20px 0;
+}
+
+.mailpoet_form td {
+  vertical-align: top !important;
+}

assets/css/src/components/_formEditor.scss

@@ -0,0 +1,658 @@
+@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 {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  position: relative;
+  width: 300px;
+}
+
+#mailpoet_form_editor:before, #mailpoet_form_editor:after {
+  background: transparent;
+  bottom: 12px;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
+  content: ' ';
+  height: 10px;
+  left: 12px;
+
+  position: absolute;
+  transform: skew(-5deg) rotate(-5deg);
+  width: 40%;
+  z-index: -1;
+}
+
+#mailpoet_form_editor:after {
+  left: auto;
+  right: 12px;
+  transform: skew(5deg) rotate(5deg);
+}
+
+/* Warnings in blocks*/
+.mailpoet_warning {
+  color: #900;
+  font-weight: bold;
+}
+
+.block_placeholder {
+  border: 0 none;
+  font-weight: bold;
+  height: 0;
+  line-height: 30px;
+  margin: 0 auto;
+  overflow: hidden;
+  text-align: center;
+  text-indent: -9999px;
+  width: 298px;
+  z-index: 9500;
+}
+
+.block_placeholder.active {
+  /*border:1px dashed #dfdfdf;*/
+  /*background-color:#f5f5f5;*/
+  background-color: #4cb7e1;
+  display: block;
+  height: 30px;
+  overflow: auto;
+  text-indent: 0;
+}
+
+.block_placeholder.hover {
+  background-color: #0074a2;
+  border-color: #0074a2;
+  color: #fff;
+}
+
+.mailpoet_form_block {
+  background-color: #fff;
+  border: 0 none;
+  height: 20px;
+}
+
+.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 {
+  margin: 20px 0 0 0;
+  position: relative;
+}
+
+/* MailPoet Form container */
+#mailpoet_form_container {
+  margin: 0;
+  width: 340px;
+}
+
+#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 {
+  position: absolute;
+  width: 400px;
+  z-index: 999;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs {
+  border-bottom: 1px solid #dfdfdf;
+  line-height: 0;
+}
+
+#mailpoet_form_toolbar .add_custom_field {
+  padding: 15px 0 5px 0;
+  text-align: center;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs li, #mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a {
+  display: inline-block;
+  *display: inline;
+  *float: left;
+  height: 30px;
+  line-height: 30px;
+
+  margin: 0;
+  outline: 0 none;
+  padding: 0;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a {
+  color: #a6a6a6;
+  outline: 0 none;
+  text-decoration: none;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs li {
+  margin: 0 0 1px 0;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a {
+  background: linear-gradient(center top, #F9F9F9, #F5F5F5);
+  background-color: #F5F5F5;
+  border: 1px solid #DFDFDF;
+  border-radius: 3px 3px 0 0;
+  box-shadow: 0 1px 0 #FFFFFF inset;
+  font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
+  padding: 0 7px;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a:hover {
+  background-color: #eee;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a.selected {
+  background: #fcfcfc;
+  border-bottom: 0 none;
+  color: #000;
+  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 {
+  margin: 0;
+
+  position: relative;
+  z-index: 9998;
+}
+
+/* edit form name */
+#mailpoet_form_name_input {
+  vertical-align: bottom;
+}
+
+/* wysija widgets */
+.mailpoet_form_widget {
+  height: 25px;
+  line-height: 25px;
+  width: 298px;
+  z-index: 9999 !important;
+}
+
+.mailpoet_toolbar_section {
+  background: none repeat scroll 0 0 #fff;
+  border: 1px solid #e5e5e5;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
+  cursor: pointer;
+  margin-bottom: 0;
+  max-height: 2000px;
+  min-width: 255px;
+  overflow: hidden;
+  position: relative;
+  transition: max-height 0.5s ease-in-out;
+}
+
+.mailpoet_toolbar_section > div {
+  height: 100%;
+  min-width: 255px;
+  overflow: auto;
+  padding: 10px 20px 20px 20px;
+}
+
+.mailpoet_toolbar_section h3 {
+  margin: 10px;
+  position: relative;
+}
+
+.mailpoet_toolbar_section.closed {
+  max-height: 38px;
+}
+
+.mailpoet_toolbar_section .mailpoet_toggle {
+  height: 38px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 27px;
+}
+
+.mailpoet_toolbar_section .mailpoet_toggle:focus {
+  box-shadow: none !important;
+  outline: 0 none !important;
+}
+
+.mailpoet_toolbar_section .mailpoet_toggle:before {
+  content: '\f142';
+  display: inline-block;
+  font: 400 20px / 1 dashicons;
+  padding: 8px 10px;
+  position: relative;
+  right: 12px;
+  speak: none;
+  text-decoration: none !important;
+  top: 0;
+}
+
+.mailpoet_toolbar_section.closed .mailpoet_toggle:before {
+  content: '\f140';
+}
+
+#mailpoet_form_styles {
+  margin: 10px;
+  max-width: 318px;
+  min-height: 300px;
+  resize: vertical;
+  width: 318px;
+}
+
+#mailpoet_form_toolbar a.mailpoet_form_field,
+.mailpoet_form_widget {
+  background: linear-gradient(center 0, #F9F9F9, #ececec);
+  background-color: #F5F5F5;
+  border: 1px solid #DFDFDF;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 #FFFFFF inset;
+  color: #222;
+  cursor: move;
+  display: block;
+  font-size: 12px;
+  font-weight: bold;
+  height: 25px;
+  line-height: 25px;
+  padding: 0 7px;
+  text-shadow: 0 1px 0 #FFFFFF;
+}
+
+#mailpoet_form_toolbar a.mailpoet_form_field.disabled {
+  color: #cccccc;
+  cursor: pointer;
+  pointer-events: none;
+}
+
+.mailpoet_form_field_edit {
+  bottom: 13px;
+  position: absolute;
+  right: 27px;
+}
+
+.mailpoet_form_field_delete {
+  bottom: 13px;
+  position: absolute;
+  right: 7px;
+}
+
+/* toolbar: fields */
+#mailpoet_toolbar_fields li {
+  padding: 0 0 10px 0;
+  position: relative;
+}
+
+#mailpoet_toolbar_fields li.notice {
+  background: none !important;
+  border: 0 none !important;
+  font-size: 11px;
+  font-style: italic;
+  margin: 0 !important;
+}
+
+/* blocks */
+.mailpoet_form_block {
+  display: inline-table;
+  display: block;
+  height: 1%;
+  margin: 0;
+  margin: 0;
+  padding: 10px 18px 10px 18px;
+  position: relative;
+  z-index: 98;
+}
+
+.mailpoet_form_block.dragging {
+  pointer-events: none;
+  z-index: 99000;
+}
+
+.mailpoet_form_block:after {
+  clear: both;
+  content: ".";
+  display: block;
+  height: 0;
+  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: linear-gradient(center 0, #eee, #bbb);
+  background-color: #dfdfdf;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  height: 20px;
+  left: -1px;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  top: -22px;
+  width: 298px;
+}
+
+.mailpoet_form_block .wysija_controls li {
+  float: left;
+  height: 20px;
+  width: 20px;
+}
+
+.mailpoet_form_block .wysija_controls a {
+  color: #000;
+  cursor: pointer;
+  float: left;
+  font-size: 120%;
+  font-weight: bold;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  width: 20px;
+}
+
+.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;
+  position: absolute;
+  top: 0;
+}
+
+/* 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 {
+  color: transparent;
+  margin: 2px 0 0 0;
+  padding: 0;
+}
+
+/* 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: linear-gradient(center 0, #F9F9F9, #ececec);
+  background-color: #F5F5F5;
+  border: 1px solid #DFDFDF;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 #FFFFFF inset;
+  color: #222;
+  cursor: pointer;
+  display: block;
+  font-size: 12px;
+  font-weight: normal;
+  padding: 5px 5px 3px 27px;
+  text-decoration: none;
+  text-shadow: 0 1px 0 #FFFFFF;
+}
+
+.wysija_settings a span {
+  height: 20px;
+  left: 5px;
+  position: absolute;
+  top: 3px;
+  width: 20px;
+}
+
+/* labels */
+.mailpoet_form_block label {
+  display: block;
+  margin: 0 5px 0 0;
+}
+
+/* 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 {
+  display: none;
+  font-size: 85%;
+  height: 150px;
+  min-height: 150px;
+  resize: vertical;
+  width: 340px;
+}
+
+/** 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 {
+  min-height: 100px;
+  width: 100%;
+}

assets/css/src/components/_formValidation.scss

@@ -0,0 +1,8 @@
+.parsley-errors-list {
+  margin-top: 8px;
+}
+
+.parsley-required,
+.parsley-custom-error-message {
+  color: #b94a48;
+}

assets/css/src/components/_globals.scss

@@ -1,33 +1,22 @@
-@import 'nib'
-
-@require 'icons'
-
-/*
-Style for Members plugin
-*/
-
-.members-tab-title
-  .mailpoet-icon-logo
-    vertical-align: middle;
-    height: 20px;
-    width: 20px;
-    font-size: 20px;
-    margin-right: 3px;
-
-#wpbody
+#wpbody {
   padding-bottom: 20px;
+}
 
 /* menu icon */
-#adminmenu #toplevel_page_mailpoet-newsletters .wp-menu-image
-  background-size: 18px 18px;
-  background-repeat: no-repeat;
+#adminmenu #toplevel_page_mailpoet-newsletters .wp-menu-image {
   background-position: center;
+  background-repeat: no-repeat;
+  background-size: 18px 18px;
+}
 
-#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,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');
+}
 
-#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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');
+}

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 {
+        color: #0e90d2;
+        content: "\2713";
+        margin-left: 15px;
+      }
+    }
+    &.mailpoet_mailchimp-error {
+      &:before {
+        color: #900;
+        content: "\2717";
+        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 {
+    font-weight: 600;
+    text-decoration: underline;
+    text-transform: uppercase;
+  }
+}
+
+#subscribers_data th:first-child, #subscribers_data td:first-child {
+  padding: 0 1em 0 1em !important;
+  text-align: center !important;
+  vertical-align: inherit !important;
+  width: 10em !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 {
+  display: flex;
+  flex-direction: column;
+  max-width: 600px;
+
+  .mailpoet_import_step_buttons {
+    flex-direction: row;
+    margin-top: 1.5em;
+  }
+
+  p {
+    margin-left: 2em;
+  }
+
+  label {
+    margin-bottom: 0.3em;
+    margin-top: 1.5em;
+    padding-left: 35px;
+    text-indent: -35px;
+    input {
+      margin-right: 0.5em;
+    }
+  }
+}

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 {
+  background-color: rgba(255, 255, 255, 0.7);
+  border: none;
+  border-radius: 3px;
+}
+
+.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 {
+      background: #5b9dd9;
+      bottom: 0;
+      content: '';
+      height: 1px;
+      left: 0;
+      position: absolute;
+      right: 0;
+    }
+  }
+
+  &.introjs-hidden {
+    display: none;
+  }
+
+  &.introjs-skipbutton:not(.introjs-donebutton) {
+    margin-right: auto;
+
+    & + .button {
+      margin-left: 10px;
+    }
+  }
+
+  &.introjs-donebutton {
+    order: 1;
+  }
+
+  &.introjs-prevbutton {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  &:not(.introjs-hidden) + .introjs-nextbutton, &.introjs-donebutton {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    margin-left: -1px;
+  }
+}

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;
+    vertical-align: top;
+    width: 2.2em;
+  }
+
+  tbody .mailpoet-check-column {
+    margin: 0 0 0 8px;
+    padding: 11px 0 0 3px;
+    vertical-align: text-top;
+  }
+
+  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%;
+    }
+  }
+}

assets/css/src/components/_mixins.scss

@@ -0,0 +1,7 @@
+@mixin clearfix {
+	&:after {
+		clear: both;
+		content: '';
+		display: table;
+	}
+}

assets/css/src/components/_modal.scss

@@ -0,0 +1,263 @@
+$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 {
+  align-items: center;
+  background-color: $overlay_background_color;
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: $modal_popup_margin;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 100000;
+}
+
+.mailpoet_modal_highlight {
+  background-color: $modal_highlight_background_color;
+  box-shadow: 0px 0px 20px 2px rgba(#fff, 75%);
+  pointer-events: none;
+  position: relative;
+  z-index: 100001 !important;
+}
+.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 {
+  animation: mailpoet_popup_fadein 0.5s;
+  margin: auto;
+  max-width: 100%;
+  z-index: 25;
+}
+
+@keyframes mailpoet_popup_fadein {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.mailpoet_popup_wrapper {
+  background-color: $modal_background_color;
+  border-radius: 4px;
+  box-shadow: 1px 2px 4px #343434;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+  overflow: hidden;
+  padding: $modal_popup_padding;
+  position: relative;
+  width: 100%;
+  z-index: 0;
+}
+
+.mailpoet_overlay_hidden .mailpoet_popup_wrapper {
+  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;
+  margin-top: 20px;
+  position: relative;
+
+  .button + .button {
+    margin-left: 10px;
+  }
+}
+
+.mailpoet_popup_has_title .mailpoet_popup_body {
+  margin-top: 30px;
+}
+.mailpoet_modal_overlay.mailpoet_panel_overlay {
+  overflow: hidden;
+  top: 32px;
+}
+
+.mailpoet_panel {
+  bottom: 0;
+  display: none;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  top: 0;
+  transition: margin 350ms ease-out;
+  width: 100%;
+  z-index: 100002;
+}
+
+.mailpoet_panel_wrapper {
+  background-color: #f1f1f1;
+  border: 1px solid #e1e1e1;
+  border-top: 0 none;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  top: 0;
+  width: 100%;
+  z-index: 0;
+}
+
+.mailpoet_panel_title {
+  height: 0;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+
+.mailpoet_panel_title h2 {
+  border-left: 1px solid #444;
+  border-right: 1px solid #444;
+  color: $modal_title_color;
+  font-family: "Lucida Grande", Verdana, Arial, sans-serif;
+  font-size: 1em;
+  font-weight: normal;
+  line-height: 32px;
+  margin: 0;
+  padding: 0 30px 0 10px;
+}
+
+.mailpoet_panel_body {
+  padding: 10px 10px 36px 10px;
+}
+.mailpoet_modal_close {
+  cursor: pointer;
+  outline: 0 none;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  z-index: 2;
+
+  svg {
+    opacity: 0.5;
+    stroke: #979797;
+
+    &:hover {
+      stroke: #636363;
+    }
+  }
+}
+
+.mailpoet_popup .mailpoet_modal_close {
+  height: $modal_close_button_size;
+  padding: 3px 0;
+  right: $modal_popup_padding;
+  top: $modal_popup_padding;
+  width: $modal_close_button_size;
+}
+
+.mailpoet_panel .mailpoet_modal_close {
+  height: 16px;
+  padding: 2px 0;
+  right: 20px;
+  top: 20px;
+  width: 16px;
+}
+
+.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 {
+    min-width: auto !important;
+    width: 100%;
+  }
+
+  .mailpoet_popup_wrapper {
+    padding: $modal_popup_padding_mobile;
+  }
+
+  .mailpoet_popup_title h2 {
+    margin-right: $modal_close_button_size + 10;
+  }
+
+  .mailpoet_popup .mailpoet_modal_close {
+    right: $modal_popup_padding_mobile;
+    top: $modal_popup_padding_mobile;
+  }
+
+  .mailpoet_modal_overlay.mailpoet_panel_overlay {
+    top: 46px;
+  }
+
+  .mailpoet_panel_body {
+    padding-bottom: 52px;
+  }
+}
+
+.mailpoet_loading {
+  display: flex;
+  flex-direction: row;
+  height: 32px;
+  width: 150px;
+}
+
+.mailpoet_modal_loading {
+  animation-direction: linear;
+  animation-duration: 1.9500000000000002s;
+  animation-iteration-count: infinite;
+  animation-name: bounce_mailpoet_modal_loading;
+  background-color: #E01D4E;
+  border-radius: 21px;
+  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; }
+}

assets/css/src/components/_mp2migrator.scss

@@ -0,0 +1,38 @@
+#logger {
+  background-color: transparent;
+  border: 0;
+  border-top: 1px #aba9a9 solid;
+  font-size: 0.85em;
+  height: 300px;
+  margin-top: 20px;
+  overflow: scroll;
+  padding: 2px;
+  resize: both;
+  width: 100%;
+}
+
+#progressbar {
+  background-color: #d8d8d8;
+  border-radius: 5px;
+  width: 50%;
+}
+
+$progressbar_color: #fecf23;
+$progressbar_gradient_to_color: #fd9215;
+
+.ui-progressbar .ui-progressbar-value {
+  background-color: $progressbar_color;
+  background-image: linear-gradient(to bottom, $progressbar_color, $progressbar_gradient_to_color);
+  border: 0;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
+  height: 100%;
+}
+
+.mailpoet_progress_label {
+  font-size: 15px;
+}
+
+.error_msg {
+  color: #f00;
+}

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 {
+    margin-bottom: 30px;
+    text-align: center;
+  }
+
+  img, .button {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .typeform-widget {
+    height: 350px;
+    margin: 0 auto 30px;
+    max-width: 100%;
+    width: 500px;
+  }
+}

assets/css/src/components/_newsletterTemplates.scss

@@ -0,0 +1,10 @@
+@import 'newsletterEditor/variables';
+
+.mailpoet_template_iframe {
+  left: 0;
+  max-width: $newsletter-width;
+  position: absolute;
+  top: 0;
+  width: $newsletter-width;
+  z-index: -9999;
+}

assets/css/src/components/_notice.scss

@@ -0,0 +1,6 @@
+.mailpoet_notice {
+  clear: both;
+  position: relative;
+
+  p:empty { display: none; }
+}

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 {
+  font-size: 15px;
+  margin: 25px 40px 0 20px;
+  max-width: 1050px; /* readability */
+  position: relative;
+
+  div.updated, div.error, .notice {
+    display: none !important;
+  }
+
+  hr {
+    border: 0;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    height: 0;
+    margin: 0;
+  }
+
+  img {
+    height: auto;
+    margin: 0;
+    max-width: 100%;
+    vertical-align: middle;
+  }
+
+  .mailpoet-logo {
+    position: absolute;
+    right: 0;
+    top: 0.2em;
+  }
+
+  .nav-tab {
+    font-size: 18px;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+  p {
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  .feature-section p {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 55em;
+  }
+
+  h1 {
+    color: #32373c;
+    font-size: 2.8em;
+    font-weight: 400;
+    line-height: 1.2em;
+    margin: 1em 0 0.5em 0;
+    padding: 0;
+    text-align: center;
+  }
+
+  h1.welcome {
+    margin-right: 200px;
+    text-align: left;
+  }
+
+  h2 {
+    font-size: 2.7em;
+    font-weight: 300;
+    line-height: 1.3;
+    margin: 40px 0 0.6em;
+    text-align: center;
+  }
+
+  h3 {
+    font-size: 1.4em;
+    line-height: 1.5;
+    margin: 1.25em 0 0.6em;
+  }
+
+  h4 {
+    color: #23282d;
+  }
+
+  .about-description,
+  .about-text {
+    font-size: 19px;
+    font-weight: 400;
+    line-height: 1.6em;
+    margin-top: 1.4em;
+  }
+
+  .about-text {
+    color: #555d66;
+    margin: 1em 200px 1em 0;
+    min-height: 60px;
+  }
+
+  [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-right: 4.799999999%;
+        margin-top: 1em;
+        vertical-align: top;
+        width: calc(47.6% - 4px);
+      }
+    }
+  }
+
+  .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 {
+      font-size: 1em;
+      margin: 1.4em 0 0.6em 0;
+    }
+  }
+
+  .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 {
+      height: 0;
+      margin: 40px 0;
+      max-width: 100%;
+      padding-bottom: 56.25%;
+      position: relative;
+      text-align: center;
+      width: 100%;
+    }
+  }
+
+  .feature-video {
+    embed {
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 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-left: 10px;
+    margin-right: 20px;
+    h1,
+    .about-text {
+      margin-right: 0;
+    }
+    .about-text {
+      margin-bottom: 0.25em;
+    }
+    .mailpoet-logo {
+      margin: 1em 0;
+      position: relative;
+      text-align: center;
+      width: 100%;
+    }
+    .two-col .col,
+    .three-col .col {
+      float: none !important;
+      width: 100% !important;
+    }
+  }
+}

assets/css/src/components/_pagesCustom.scss

@@ -0,0 +1,59 @@
+/*
+Custom styles for MailPoet pages.
+*/
+
+.mailpoet-about-wrap {
+
+  .videoWrapper {
+    /*padding-top: 25px*/
+    height: 0;
+    padding-bottom: 56.25%; /* 16:9 */
+    position: relative;
+
+    iframe {
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 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;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 50%;
+  }
+}

assets/css/src/components/_parsley.scss

@@ -0,0 +1,29 @@
+input.parsley-success,
+select.parsley-success,
+textarea.parsley-success {
+  background-color: #DFF0D8;
+  border: 1px solid #D6E9C6;
+  color: #468847;
+}
+
+input.parsley-error,
+select.parsley-error,
+textarea.parsley-error {
+  background-color: #F2DEDE;
+  border: 1px solid #EED3D7;
+  color: #B94A48;
+}
+
+.parsley-errors-list {
+  color: #B94A48;
+  font-size: 0.9em;
+  line-height: 0.9em;
+  list-style-type: none;
+  margin: 2px 0 3px;
+  opacity: 0;
+  padding: 0;
+  transition: all 0.3s ease-in;
+  &.filled {
+    opacity: 1;
+  }
+}

assets/css/src/components/_progressBar.scss

@@ -0,0 +1,79 @@
+.mailpoet_progress {
+  background-color: #efefef;
+  border-radius: 5px;
+  height: 25px;
+  margin: 0;
+  margin-bottom: 10px;
+  padding: 0;
+  position: relative;
+  width: 100%;
+}
+
+.mailpoet_progress_label {
+  display: inline-block;
+  margin: 2px 0 0 0;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+}
+
+.mailpoet_progress_bar {
+  background-color: #34c2e3;
+  background-image: linear-gradient(to bottom, #34c2e3, darken(#34c2e3, 20%));
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
+  display: inline-block;
+  height: 100%;
+  position: absolute;
+}
+
+.mailpoet_progress_complete {
+  .mailpoet_progress_bar {
+    background-color: hsla(191, 78%, 80%, 1);
+    background-image: linear-gradient(to bottom,  hsla(191, 78%, 80%, 1), hsla(191, 76%, 67%, 1));
+  }
+}
+
+.mailpoet_stepped_progress_bar {
+  margin: auto;
+  width: 400px;
+
+  &:before {
+    background-color: #d8d8d8;
+    border-radius: 2px;
+    content: "";
+    display: block;
+    height: 2px;
+    margin: auto;
+    position: relative;
+    top: 9px;
+    width: 100%;
+  }
+}
+
+.mailpoet_stepped_progress_bar_step {
+  display: inline-block;
+
+  &:before {
+    background-color: #d8d8d8;
+    border-radius: 14px;
+    content: "";
+    display: block;
+    height: 14px;
+    margin: auto;
+    position: relative;
+    width: 14px;
+  }
+
+  &.active {
+    &:before {
+      background-color: #979797;
+    }
+  }
+}
+
+@media screen and (max-width: 520px) {
+  .mailpoet_stepped_progress_bar {
+    width: 360px;
+  }
+}

assets/css/src/components/_public.scss

@@ -0,0 +1,50 @@
+/* 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;
+  text-align: center;
+  width: 30px;
+}
+
+.mailpoet_form_loading > span {
+  animation: mailpoet-bouncedelay 1.4s infinite ease-in-out both;
+  background-color: #5b5b5b;
+
+  border-radius: 100%;
+  display: inline-block;
+  height: 5px;
+  width: 5px;
+}
+
+.mailpoet_form_loading .mailpoet_bounce1 {
+  animation-delay: -0.32s;
+}
+
+.mailpoet_form_loading .mailpoet_bounce2  {
+  animation-delay: -0.16s;
+  margin: 0 7px;
+}
+
+@keyframes mailpoet-bouncedelay {
+  0%, 80%, 100% { transform: scale(0); }
+  40% { transform: scale(1); }
+}

assets/css/src/components/_reviewRequest.scss

@@ -0,0 +1,14 @@
+.mailpoet_review_request {
+  margin: auto;
+  max-width: 500px;
+  text-align: center;
+
+  img {
+    margin: 20px;
+  }
+
+  a {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+}

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 {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    margin: 25px 0 0 0;
+    > li {
+      background-color: #fff;
+      border: 2px solid #dcdcdc;
+      display: flex;
+      flex-basis: 0;
+      flex-direction: column;
+      flex-grow: 1;
+      flex-shrink: 1;
+      margin: 0 25px 25px 0;
+      max-width: 500px;
+      .mailpoet_sending_method_description {
+        flex-grow: 1;
+        flex-shrink: 0;
+        padding: 25px;
+      }
+      &:hover:not(.mailpoet_active) {
+        border-color: #c5c5c5;
+      }
+    }
+    > li:last-child {
+      margin-right: 0;
+    }
+    h3 {
+      font-size: 1.5em;
+      height: 54px;
+      text-align: center;
+    }
+    .mailpoet_description {
+      font-size: 14px;
+    }
+    .mailpoet_status {
+      align-items: center;
+      background-color: #dcdcdc;
+      color: #fff;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      min-height: 2em;
+      padding: 1em;
+      text-overflow: ellipsis;
+      span {
+        font-weight: bold;
+        visibility: hidden;
+      }
+      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;
+    box-shadow: 0 1px 0 #e64c03;
+    margin: 10px 0;
+    text-shadow: 0 -1px 1px #e64c03;
+    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 {
+        flex-basis: auto;
+        margin-right: 0;
+      }
+    }
+  }
+}

assets/css/src/components/_subscribers.scss

@@ -0,0 +1,5 @@
+#subscribers_container {
+  .mailpoet_segments_unsubscribed {
+    color: lighten(#555, 33);
+  }
+}

assets/css/src/components/_welcomeWizard.scss

@@ -0,0 +1,112 @@
+.mailpoet_welcome_wizard_centered_column {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: 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: 30vh;
+  h1 {
+    font-weight: 400;
+    padding-bottom: 10px;
+    text-align: center;
+  }
+  p {
+    color: #595c65;
+    font-size: 15px;
+    font-weight: normal;
+    line-height: 22px;
+    margin: 10px 0;
+    text-align: center;
+  }
+}
+
+#mailpoet_sender_form {
+  margin-top: 30px;
+  width: 330px;
+  label {
+    display: inline-block;
+    font-size: 15px;
+    margin-bottom: 20px;
+  }
+  input[type="text"] {
+    font-size: 15px;
+    height: 30px;
+    margin-top: 10px;
+    width: 328px;
+  }
+  input[type="submit"] {
+    margin: 50px 0 25px 0;
+  }
+  a.sender_form_small {
+    color: #595c65;
+    font-size: 12px;
+  }
+}
+
+.mailpoet_sender_form_loading {
+  opacity: 0.5;
+}
+
+.mailpoet_welcome_wizard_course_form_box {
+  margin-bottom: 10px;
+  padding-top: 30px;
+  position: relative;
+  img {
+    left: 0;
+    position: absolute;
+    top: 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;
+}

assets/css/src/components/datepicker/_datepicker.scss

@@ -0,0 +1,2 @@
+@import 'jquery-ui-1.10.1';
+@import 'melon.datepicker';

assets/css/src/components/datepicker/jquery-ui-1.10.1.css

@@ -273,7 +273,7 @@
 }
 .ui-widget-content {
 	border: 1px solid #dddddd;
-	background: #eeeeee url(../img/datepicker/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x;
+	background: #eeeeee url(../../img/datepicker/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x;
 	color: #333333;
 }
 .ui-widget-content a {
@@ -281,7 +281,7 @@
 }
 .ui-widget-header {
 	border: 1px solid #e78f08;
-	background: #f6a828 url(../img/datepicker/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x;
+	background: #f6a828 url(../../img/datepicker/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x;
 	color: #ffffff;
 	font-weight: bold;
 }
@@ -295,7 +295,7 @@
 .ui-widget-content .ui-state-default,
 .ui-widget-header .ui-state-default {
 	border: 1px solid #cccccc;
-	background: #f6f6f6 url(../img/datepicker/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;
+	background: #f6f6f6 url(../../img/datepicker/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;
 	font-weight: bold;
 	color: #1c94c4;
 }
@@ -312,7 +312,7 @@
 .ui-widget-content .ui-state-focus,
 .ui-widget-header .ui-state-focus {
 	border: 1px solid #fbcb09;
-	background: #fdf5ce url(../img/datepicker/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x;
+	background: #fdf5ce url(../../img/datepicker/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x;
 	font-weight: bold;
 	color: #c77405;
 }
@@ -327,7 +327,7 @@
 .ui-widget-content .ui-state-active,
 .ui-widget-header .ui-state-active {
 	border: 1px solid #fbd850;
-	background: #ffffff url(../img/datepicker/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
+	background: #ffffff url(../../img/datepicker/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
 	font-weight: bold;
 	color: #eb8f00;
 }
@@ -344,7 +344,7 @@
 .ui-widget-content .ui-state-highlight,
 .ui-widget-header .ui-state-highlight {
 	border: 1px solid #fed22f;
-	background: #ffe45c url(../img/datepicker/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x;
+	background: #ffe45c url(../../img/datepicker/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x;
 	color: #363636;
 }
 .ui-state-highlight a,
@@ -356,7 +356,7 @@
 .ui-widget-content .ui-state-error,
 .ui-widget-header .ui-state-error {
 	border: 1px solid #cd0a0a;
-	background: #b81900 url(../img/datepicker/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat;
+	background: #b81900 url(../../img/datepicker/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat;
 	color: #ffffff;
 }
 .ui-state-error a,
@@ -403,27 +403,27 @@
 }
 .ui-icon,
 .ui-widget-content .ui-icon {
-	background-image: url(../img/datepicker/ui-icons_222222_256x240.png);
+	background-image: url(../../img/datepicker/ui-icons_222222_256x240.png);
 }
 .ui-widget-header .ui-icon {
-	background-image: url(../img/datepicker/ui-icons_ffffff_256x240.png);
+	background-image: url(../../img/datepicker/ui-icons_ffffff_256x240.png);
 }
 .ui-state-default .ui-icon {
-	background-image: url(../img/datepicker/ui-icons_ef8c08_256x240.png);
+	background-image: url(../../img/datepicker/ui-icons_ef8c08_256x240.png);
 }
 .ui-state-hover .ui-icon,
 .ui-state-focus .ui-icon {
-	background-image: url(../img/datepicker/ui-icons_ef8c08_256x240.png);
+	background-image: url(../../img/datepicker/ui-icons_ef8c08_256x240.png);
 }
 .ui-state-active .ui-icon {
-	background-image: url(../img/datepicker/ui-icons_ef8c08_256x240.png);
+	background-image: url(../../img/datepicker/ui-icons_ef8c08_256x240.png);
 }
 .ui-state-highlight .ui-icon {
-	background-image: url(../img/datepicker/ui-icons_228ef1_256x240.png);
+	background-image: url(../../img/datepicker/ui-icons_228ef1_256x240.png);
 }
 .ui-state-error .ui-icon,
 .ui-state-error-text .ui-icon {
-	background-image: url(../img/datepicker/ui-icons_ffd27a_256x240.png);
+	background-image: url(../../img/datepicker/ui-icons_ffd27a_256x240.png);
 }
 
 /* positioning */
@@ -635,14 +635,14 @@
 
 /* Overlays */
 .ui-widget-overlay {
-	background: #666666 url(../img/datepicker/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
+	background: #666666 url(../../img/datepicker/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
 	opacity: .5;
 	filter: Alpha(Opacity=50);
 }
 .ui-widget-shadow {
 	margin: -5px 0 0 -5px;
 	padding: 5px;
-	background: #000000 url(../img/datepicker/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x;
+	background: #000000 url(../../img/datepicker/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x;
 	opacity: .2;
 	filter: Alpha(Opacity=20);
 	border-radius: 5px;

assets/css/src/components/datepicker/melon.datepicker.css

@@ -59,7 +59,7 @@
 
 .wp-admin .ui-datepicker .ui-datepicker-next span,
 .wp-admin .ui-datepicker .ui-datepicker-prev span {
-	background-image: url(../img/datepicker/ui-icons_ffffff_256x240.png);
+	background-image: url(../../img/datepicker/ui-icons_ffffff_256x240.png);
 	background-position: -32px 0;
 	margin-top: 0;
 	top: 0;

assets/css/src/components/listing/_newsletters.scss

@@ -0,0 +1,92 @@
+$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 {
+    font-size: 0.75rem;
+    text-decoration: underline !important;
+  }
+}
+
+.mailpoet_badge {
+  border-radius: 3px;
+  color: white;
+  cursor: pointer;
+  font-size: 0.5625rem;
+  font-weight: 500;
+  letter-spacing: 1px;
+  margin-right: 4px;
+  padding: 4px 6px 3px 6px;
+  text-transform: uppercase;
+  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;
+    display: inline-block;
+    line-height: 20px;
+    padding: 3px 6px;
+    text-decoration: none;
+    vertical-align: top;
+
+    &:hover, &:active, &:focus {
+      background: $green-badge-color;
+      color: #FFFFFF;
+    }
+
+    &_grey {
+      background: #c3c3c3;
+    }
+
+    .dashicons {
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+}

assets/css/src/components/newsletterEditor/_common.scss

@@ -0,0 +1,318 @@
+$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 {
+  $form-control-padding: 3px;
+  appearance: none;
+  border-radius: 1px;
+  box-shadow: none !important;
+  line-height: 28px - $form-control-padding * 2;
+
+  padding: $form-control-padding;
+}
+
+.mailpoet_input {
+  border: 1px solid $select-border-color;
+  width: 283px;
+}
+
+.mailpoet_input_small {
+  width: 58px;
+}
+
+.mailpoet_input_medium {
+  width: 150px;
+}
+
+.mailpoet_input_full {
+  box-sizing: border-box;
+  margin: 0;
+  width: 100%;
+}
+
+.mailpoet_range {
+  -webkit-appearance: none;
+  padding: 0;
+  vertical-align: middle;
+  width: 283px;
+
+  &:focus {
+    outline: none;
+  }
+  &::-webkit-slider-runnable-track {
+    animate: 0.2s;
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+    border-radius: $range-border-radius;
+    cursor: pointer;
+    height: $range-track-height;
+    width: 100%;
+  }
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    background: $range-thumb-background-color;
+    border: 1px solid $range-thumb-border-color;
+    border-radius: $range-border-radius;
+    cursor: pointer;
+    height: $range-thumb-height;
+    margin-top: -1 * $range-thumb-height / 3;
+    width: $range-thumb-width;
+  }
+  &:hover::-webkit-slider-thumb {
+    background: $range-thumb-hover-background-color;
+  }
+  &::-moz-range-track {
+    animate: 0.2s;
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+    border-radius: $range-border-radius;
+    cursor: pointer;
+    height: $range-track-height;
+    width: 100%;
+  }
+  &::-moz-range-thumb {
+    background: $range-thumb-background-color;
+    border: 1px solid $range-thumb-border-color;
+    border-radius: $range-border-radius;
+    cursor: pointer;
+    height: $range-thumb-height;
+    width: $range-thumb-width;
+  }
+  &:hover::-moz-range-thumb {
+    background: $range-thumb-hover-background-color;
+  }
+  &::-ms-fill-lower {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+  }
+  &::-ms-fill-upper {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+  }
+  &::-ms-track {
+    animate: 0.2s;
+    background: transparent;
+    border-color: transparent;
+    border-width: $range-track-height * 2 0;
+    color: transparent;
+    cursor: pointer;
+    height: $range-track-height;
+    width: 100%;
+  }
+  &::-ms-thumb {
+    background: $range-thumb-background-color;
+    border: 1px solid $range-thumb-border-color;
+    border-radius: $range-border-radius;
+    cursor: pointer;
+    height: $range-thumb-height;
+    width: $range-thumb-width;
+  }
+  &:hover::-ms-thumb {
+    background: $range-thumb-hover-background-color;
+  }
+  &:focus::-ms-fill-lower {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+  }
+  &:focus::-ms-fill-upper {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-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 {
+  background-color: $button-default-background-color;
+  border: 1px solid $button-default-border-color;
+  border-radius: 3px;
+  color: $button-default-text-color;
+  line-height: normal;
+  margin: 0;
+  padding: 6px 20px;
+  vertical-align: top;
+}
+
+.mailpoet_button_full {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.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;
+  font-weight: normal;
+  margin-left: 5px;
+  text-transform: none;
+}
+
+.tooltip-help-designer-full-width .dashicons {
+  line-height: 34px;
+}
+.tooltip-help-designer-full-width span {
+  line-height: 1.4em;
+}
+
+.mailpoet_button_primary {
+  background-color: $button-primary-background-color;
+  border-color: $button-primary-border-color;
+  color: $button-primary-text-color;
+
+  &:hover {
+    background-color: $button-primary-hover-background-color;
+  }
+}
+
+.mailpoet_button_group {
+  display: inline;
+
+  .mailpoet_button:first-child {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    margin-right: 0;
+    padding: 6px 12px 6px;
+  }
+
+  .mailpoet_button:last-child {
+    border-bottom-left-radius: 0;
+    border-left: 0;
+    border-top-left-radius: 0;
+    margin-left: 0;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+
+.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 {
+    color: #bfbfbf;
+    font-weight: normal;
+  }
+
+  & .select2-results__option {
+    font-size: 13px;
+    padding-left: 15px;
+
+    &[aria-selected=true] {
+      background-color: #eee;
+      color: #444;
+    }
+  }
+}
+
+.mailpoet_settings_notice {
+  color: #999;
+}

assets/css/src/components/newsletterEditor/_layout.scss

@@ -0,0 +1,40 @@
+$sidebar-width: 330px;
+$content-border-color: $structure-border-color;
+
+#mailpoet_editor {
+  clear: both;
+  width: 100%;
+}
+
+#mailpoet_editor_heading {
+  clear: both;
+  margin-bottom: 13px;
+  margin-left: 2px;
+  padding-left: 15px;
+}
+
+#mailpoet_editor_main_wrapper {
+  border: 1px solid $content-border-color;
+  border-left: 0;
+  min-width: 1050px;
+  position: relative;
+}
+
+#mailpoet_editor_content_container {
+  box-sizing: border-box;
+  padding-right: $sidebar-width;
+  width: 100%;
+}
+
+#mailpoet_editor_sidebar {
+  box-sizing: border-box;
+  float: right;
+  width: $sidebar-width;
+}
+
+.mailpoet_newsletter_wrapper {
+  margin: auto;
+  max-width: $newsletter-width;
+  position: relative;
+  width: $newsletter-width;
+}

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 {
+  background-color: $primary-background-color;
+  border: 1px solid $content-border-color;
+  border-radius: 3px;
+  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.05);
+}
+
+.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 {
+  content: "\f307";
+  font: 400 20px / 1 dashicons !important;
+}
+
+/* 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 {
+  border-bottom: 1px solid #f1f1f1;
+  clear: both;
+  color: #333;
+  cursor: pointer;
+  margin-bottom: 0;
+  padding: 4px 6px;
+  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: 0;
+  border-radius: 3px;
+  box-shadow: 1px 2px darken($primary-background-color, 13%);
+  padding: 0;
+}
+
+.sp-preview {
+  border-width: 0;
+  height: 25px;
+  margin-right: 0;
+  width: 25px;
+}
+
+.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-bottom-right-radius: 0;
+    border-right: 0;
+    border-top-right-radius: 0;
+  }
+
+  .button:last-child {
+    border-bottom-left-radius: 0;
+    border-left: 0;
+    border-top-left-radius: 0;
+  }
+}

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;

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 {
+  bottom: 100%;
+  left: 50%;
+  overflow: hidden;
+  position: absolute;
+  text-align: right;
+  text-align: center;
+  transform: translateX(-50%);
+  transition: visibility 0s linear 250ms;
+  visibility: hidden;
+  z-index: 20;
+
+  .mailpoet_tools_slider {
+    background: $editor-content-color;
+    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 {
+      display: block;
+      height: $column-icon-size-with-padding;
+      width: $column-icon-size-with-padding;
+
+      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 {
+      height: auto;
+      padding: 0 5px 3px 5px;
+      width: auto;
+
+      .mailpoet_delete_block_activate {
+        max-height: 0;
+        opacity: 0;
+        overflow: hidden;
+      }
+
+      .mailpoet_delete_block_confirm,
+      .mailpoet_delete_block_cancel {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.mailpoet_tool {
+  display: inline-block;
+  height: $content-icon-size-with-padding;
+  width: $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;
+    right: 0;
+    top: 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 {
+    display: inline-block;
+    max-width: $content-icon-size-with-padding;
+    opacity: 1;
+    @include animation-fade-in-and-scale-horizontally();
+  }
+
+  .mailpoet_delete_block_confirm,
+  .mailpoet_delete_block_cancel {
+    display: inline-block;
+    max-height: 0;
+    max-width: 0;
+    opacity: 0;
+    overflow: hidden;
+    @include animation-fade-in-and-scale-horizontally();
+  }
+}
+
+.mailpoet_delete_block_activated {
+  background-color: $warning-background-color;
+  height: auto;
+  padding: 0 5px;
+  width: auto;
+
+  .mailpoet_delete_block_activate {
+    max-width: 0;
+    opacity: 0;
+    overflow: hidden;
+  }
+
+  .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;
+  }
+}

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;
+
+  box-shadow: 0px 0px 1px 0px $primary-active-color;
+  min-height: $marker-width;
+  min-width: $marker-width;
+  position: absolute;
+  z-index: $marker-z-index;
+
+  &::before, &::after {
+    color: $primary-active-color;
+    font: 400 40px / 1 dashicons;
+    margin-top: -18px;
+    position: absolute;
+  }
+  &::before {
+    content: "\f139";
+    left: -25px;
+  }
+  &::after {
+    content: "\f141";
+    right: -23px;
+  }
+}
+.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 {
+  margin: 0;
+  padding: 0;
+  z-index: $draggable-widget-z-index;
+  @include animation-fade-in();
+
+  .mailpoet_widget_icon {
+    margin: 0;
+    padding: 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;
+  }
+}

assets/css/src/components/newsletterEditor/components/_forms.scss

@@ -0,0 +1,52 @@
+.mailpoet_form_field {
+  margin-bottom: 15px;
+  margin-top: 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 {
+  color: $primary-inactive-color;
+  font-size: 0.8em;
+}
+
+.mailpoet_form_field_radio_option,
+.mailpoet_form_field_checkbox_option {
+  display: inline-block;
+  line-height: 30px;
+  margin-right: 5px;
+  vertical-align: top;
+
+  &: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;
+}

assets/css/src/components/newsletterEditor/components/_heading.scss

@@ -0,0 +1,27 @@
+.mailpoet_heading_form_field {
+  margin-bottom: 5px;
+  margin-top: 5px;
+}
+
+.mailpoet_input_title,
+.mailpoet_input_preheader {
+  line-height: normal;
+  padding: 3px;
+  width: 500px;
+}
+
+.mailpoet_input_title {
+  font-size: 23px;
+}
+
+.mailpoet_breadcrumbs {
+  float: left;
+  font-size: 0.9em;
+  margin-bottom: 13px;
+  margin-left: 17px;
+  text-transform: uppercase;
+
+  p {
+    margin: 0;
+  }
+}

assets/css/src/components/newsletterEditor/components/_layers.scss

@@ -0,0 +1,39 @@
+.mailpoet_container_layer_active {
+  .mailpoet_block {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  .mailpoet_container_block {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .mailpoet_container_block > .mailpoet_tools {
+    display: block !important;
+  }
+
+  & > .mailpoet_tools {
+    z-index: 100001 !important;
+  }
+}
+
+.mailpoet_layer_overlay {
+  background-color: rgba(0, 0, 0, 0.6);
+  height: 100%;
+  left: 0;
+  margin: 0 !important;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 100000;
+}
+
+.mailpoet_layer_highlight {
+  background-color: #f1f1f1;
+  pointer-events: none;
+  position: relative;
+  z-index: 100001 !important;
+}

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 {
+  color: $resize-handle-font-color;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 1.5em;
+  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 {
+  bottom: 0;
+  height: 24px;
+  position: absolute;
+  right: 0;
+  width: 24px;
+}
+
+.mailpoet_image_resize_handle {
+  background: $editor-content-color;
+  border-radius: 6px 0 0 0;
+  cursor: nwse-resize;
+  display: inline-block;
+  height: 24px;
+  position: relative;
+  width: 24px;
+  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 {
+    fill: $resize-handle-font-color;
+    height: 22px;
+    vertical-align: top;
+    width: 22px;
+  }
+}
+
+.mailpoet_block.mailpoet_image_resize_active > .mailpoet_block_highlight {
+  border: 2px solid $resize-active-color;
+
+  .mailpoet_image_resize_handle {
+    display: inline-block;
+  }
+}

assets/css/src/components/newsletterEditor/components/_save.scss

@@ -0,0 +1,149 @@
+#mailpoet_editor_bottom {
+  margin: 10px 0 120px;
+}
+
+.mailpoet_save_wrapper {
+  float: right;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  position: relative;
+
+  .mailpoet_save_next {
+    margin-left: 5px;
+  }
+}
+
+.mailpoet_save_options {
+
+  background: $white-color;
+  border: 1px solid $content-border-color;
+  border-radius: 3px;
+  clear: both;
+  margin: 5px 0;
+  overflow: hidden;
+
+  position: absolute;
+  right: 0;
+  vertical-align: top;
+  white-space: nowrap;
+  z-index: 1000;
+}
+
+.mailpoet_save_option {
+  margin: 0;
+
+  & > a {
+    display: block;
+    line-height: 2em;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+
+.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 {
+  height: 14px;
+  margin-top: -6px;
+  vertical-align: middle;
+}
+
+.mailpoet_save_as_template_container,
+.mailpoet_export_template_container {
+  background-color: $white-color;
+  border: 1px solid $structure-border-color;
+  border-radius: 3px;
+  clear: both;
+  display: inline-block;
+
+  margin: 5px 0;
+  padding: 0 10px;
+  position: absolute;
+  right: 0;
+  z-index: 1000;
+}
+
+.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 {
+  color: $error-text-color;
+  margin-top: 10px;
+  text-align: right;
+  width: $sidebar-width - 20px;
+}
+
+.mailpoet_save_dropdown_down {
+  .mailpoet_save_options,
+  .mailpoet_save_as_template_container,
+  .mailpoet_export_template_container {
+    bottom: auto;
+    top: 100%;
+  }
+
+  .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 {
+    bottom: 100%;
+    top: auto;
+  }
+
+  .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';
+    }
+  }
+}

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-bottom: $content-border-color;
+  border-left: $content-border-color;
+  color: $sidebar-text-color;
+  font-size: $sidebar-text-size;
+
+  .mailpoet_sidebar_region {
+    border-bottom: 1px solid $content-border-color;
+    border-left: 1px solid $content-border-color;
+    border-right: 0;
+    border-top: 0;
+    margin-bottom: 0;
+
+    &.closed .mailpoet_region_content {
+      display: none;
+    }
+  }
+
+  .mailpoet_region_content {
+    margin-top: 12px;
+    padding: 0 20px;
+  }
+
+  &, .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 {
+      color: $sidebar-active-heading-color;
+      margin: 0;
+      padding: 17px 20px;
+      text-transform: uppercase;
+    }
+
+    h3,
+    .handlediv {
+      border: 0;
+      cursor: auto;
+    }
+
+    .handlediv::before {
+      color: $sidebar-active-heading-color;
+      content: '\f142';
+      display: inline-block;
+      font: 400 20px / 1 dashicons;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      position: relative;
+      right: 18px;
+      speak: none;
+      text-decoration: none !important;
+      top: 18px;
+    }
+
+    &.closed .handlediv::before {
+      color: $sidebar-inactive-heading-color;
+      content: '\f140';
+    }
+
+    &.closed:hover .handlediv::before {
+      color: $sidebar-active-heading-color;
+    }
+  }
+}
+
+.mailpoet_widget {
+  display: inline-block;
+  float: left;
+  padding: 0 13px 15px 13px;
+  text-align: center;
+  width: $widget-width;
+  &:nth-child(3n+1) {
+    clear: left;
+  }
+
+  .mailpoet_widget_icon {
+    background-color: $widget-background-color;
+    border-radius: 3px;
+    box-shadow: 1px 2px $widget-shadow-color;
+    box-sizing: border-box;
+    color: $widget-icon-color;
+    fill: $widget-icon-color;
+    height: $widget-width;
+    line-height: $widget-width;
+    margin-bottom: 9px;
+    text-align: center;
+    width: $widget-width;
+
+    /* Vertically align widget icon glyphs */
+    & > * {
+      font-size: $widget-icon-width;
+      height: $widget-icon-width;
+      vertical-align: middle;
+      width: $widget-icon-width;
+    }
+
+    &:hover {
+      border: 1px solid $widget-icon-hover-color;
+      color: $widget-icon-hover-color;
+      fill: $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;
+      box-shadow: none;
+      color: $widget-icon-hover-color;
+      fill: $widget-icon-hover-color;
+    }
+
+    .mailpoet_widget_title {
+      display: none;
+    }
+  }
+}
+
+/* Browser preview modal */
+.mailpoet_browser_preview_wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+.mailpoet_browser_preview_toggle {
+  flex: 0 1 auto;
+  height: 30px;
+  padding: 10px 0;
+  position: absolute;
+  text-align: center;
+  top: -30px;
+  width: 100%;
+}
+
+.mailpoet_browser_preview_toggle > label {
+  display: inline-block;
+  margin: 0 5px;
+}
+
+.mailpoet_browser_preview_container {
+  border: 1px solid #979797;
+  border-radius: 20px;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  height: 100%;
+  margin: 15px auto 0 auto;
+  padding: 20px;
+  transition: width 0.5s;
+}
+
+.mailpoet_browser_preview_container_desktop {
+  width: 100%;
+}
+
+.mailpoet_browser_preview_container_mobile {
+  width: 350px;
+}
+.mailpoet_browser_preview_border {
+  border: 1px solid #c3c3c3;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+}
+
+.mailpoet_browser_preview_iframe {
+  display: block;
+  margin: auto;
+  width: calc(100% - 1px);
+}

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 {
+    color: $sidepanel-active-heading-color;
+    font-size: 1.4em;
+    text-transform: uppercase;
+  }
+}
+
+.mailpoet_sidepanel_field {
+  margin-bottom: 15px;
+  margin-top: 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;
+  line-height: 30px;
+  margin-bottom: 0;
+  vertical-align: middle;
+}
+
+.mailpoet_sidepanel_field_optional {
+  color: $primary-inactive-color;
+  font-size: 0.8em;
+}
+
+.mailpoet_sidepanel_radio_option,
+.mailpoet_sidepanel_checkbox_option {
+  display: inline-block;
+  line-height: 30px;
+  margin-right: 15px;
+  vertical-align: top;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.mailpoet_sidepanel_input_option {
+  display: inline-block;
+
+  input[type=checkbox] {
+    vertical-align: top;
+  }
+
+  input[type=text] {
+    vertical-align: middle;
+  }
+}

assets/css/src/components/newsletterEditor/contentBlocks/_automatedLatestContent.scss

@@ -0,0 +1,44 @@
+.mailpoet_automated_latest_content_block {
+  padding: 0;
+}
+
+.mailpoet_automated_latest_content_block_overlay {
+  background: rgba(255, 255, 255, 0);
+  height: 100%;
+  position: absolute;
+  transition: background 0.15s ease-out;
+  width: 100%;
+  z-index: 19;
+
+  .mailpoet_automated_latest_content_block:hover & {
+    background: rgba(255, 255, 255, 0.7);
+    cursor: pointer;
+  }
+}
+
+.mailpoet_automated_latest_content_block_posts {
+  overflow: hidden;
+  pointer-events: none;
+
+  & > .mailpoet_block {
+    width: 100%;
+  }
+
+  .mailpoet_container_block {
+    padding-bottom: 0;
+    padding-top: 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;
+}

assets/css/src/components/newsletterEditor/contentBlocks/_base.scss

@@ -0,0 +1,85 @@
+$block-text-line-height: $text-line-height;
+
+.mailpoet_block {
+  background-color: inherit;
+  box-sizing: border-box;
+  box-sizing: border-box;
+  float: left;
+  padding: 10px 20px;
+  position: relative;
+
+  & > .mailpoet_block_highlight {
+    border: 2px solid $transparent-color;
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: 0.3s;
+    z-index: 1;
+  }
+
+  &.mailpoet_highlight > .mailpoet_block_highlight {
+    border: 2px solid $editor-content-color !important;
+  }
+
+  & > .mailpoet_container_horizontal ~ .mailpoet_block_highlight {
+    bottom: -2px;
+    left: -2px;
+    right: -2px;
+    top: -2px;
+  }
+
+  &.mailpoet_highlight > .mailpoet_container_horizontal ~ .mailpoet_block_highlight {
+    border: 2px solid $editor-column-color !important;
+  }
+}
+
+.mailpoet_content {
+  line-height: $block-text-line-height;
+  position: relative;
+
+  h1, h2, h3, h4, h5, h6 {
+    font-style: normal;
+    font-weight: normal;
+    line-height: $block-text-line-height;
+    margin: 0;
+    padding: 0;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    margin-bottom: 0.3em;
+  }
+
+  p:not(.mailpoet_wp_post) {
+    margin: 0;
+    margin-bottom: 0;
+    margin-top: 0;
+    padding: 0;
+  }
+
+  p {
+    font-style: normal;
+    font-weight: normal;
+    line-height: $block-text-line-height;
+  }
+
+  ul {
+    margin-bottom: 10px;
+    margin-top: 10px;
+    padding: 0;
+  }
+
+  li {
+    font-weight: normal;
+    margin-bottom: 10px;
+    margin-top: 0;
+  }
+
+  blockquote {
+    border-left: 2px #565656 solid;
+    margin: 0 0 $block-text-line-height;
+    padding-left: 10px;
+  }
+}

assets/css/src/components/newsletterEditor/contentBlocks/_button.scss

@@ -0,0 +1,15 @@
+.mailpoet_button_block {
+  .mailpoet_editor_button {
+    box-sizing: border-box;
+    display: block;
+    line-height: 2em;
+    margin: auto;
+    max-width: 100%;
+    text-align: center;
+    text-decoration: none;
+
+    &:hover {
+      cursor: all-scroll;
+    }
+  }
+}

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 {
+  min-height: 15px;
+  position: relative;
+  width: 100%;
+}
+
+.mailpoet_container_block {
+  border: 0;
+  box-sizing: border-box;
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 0;
+  padding-right: 0;
+  position: relative;
+}
+
+.mailpoet_container_vertical > * {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.mailpoet_container_horizontal > * {
+  vertical-align: top;
+}
+
+
+#mailpoet_editor_content {
+  .mailpoet_container {
+    box-sizing: border-box;
+    float: left;
+  }
+  & > .mailpoet_container_block {
+    border: 0;
+    width: $newsletter-width;
+  }
+
+  & > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block {
+    padding-bottom: 0;
+    padding-top: 0;
+  }
+
+  .mailpoet_container_horizontal > .mailpoet_container_block {
+    padding-bottom: 0;
+    padding-top: 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_container_block > .mailpoet_container > .mailpoet_products_block > .mailpoet_products_container > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal,
+  & > .mailpoet_container_block > .mailpoet_container .mailpoet_automated_latest_content_block_products .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 {
+  background-color: #f2f2f2;
+  border-radius: 3px;
+  box-shadow: inset 1px 2px 1px $primary-inactive-color;
+  color: #656565;
+  margin: 20px;
+  padding: 15px;
+  text-align: center;
+  @include animation-background-color();
+}

assets/css/src/components/newsletterEditor/contentBlocks/_divider.scss

@@ -0,0 +1,38 @@
+$active-divider-border-color: #adadad;
+$active-divider-background-color: #daebf2;
+$divider-hover-border-color: $primary-active-color;
+
+.mailpoet_divider_block {
+  cursor: all-scroll;
+  padding: 0;
+}
+
+.mailpoet_divider {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.mailpoet_field_divider_style {
+  border: 1px solid transparent;
+  display: block;
+  margin: auto;
+  max-width: $newsletter-width;
+  width: 100%;
+}
+
+.mailpoet_active_divider_style {
+  background: $active-divider-background-color;
+  border: 1px solid $active-divider-border-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;
+}

assets/css/src/components/newsletterEditor/contentBlocks/_footer.scss

@@ -0,0 +1,11 @@
+.mailpoet_footer_block {
+  padding: 0;
+
+  .mailpoet_content {
+    padding: 10px 20px;
+
+    & > *:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

assets/css/src/components/newsletterEditor/contentBlocks/_header.scss

@@ -0,0 +1,11 @@
+.mailpoet_header_block {
+  padding: 0;
+
+  .mailpoet_content {
+    padding: 10px 20px;
+
+    & > *:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

assets/css/src/components/newsletterEditor/contentBlocks/_image.scss

@@ -0,0 +1,23 @@
+.mailpoet_image_block {
+
+  img {
+    height: auto;
+    max-width: 100%;
+    vertical-align: bottom;
+  }
+
+  &.mailpoet_full_image {
+    margin: auto;
+    padding: 0;
+  }
+
+  .mailpoet_content  {
+    margin: auto;
+    max-width: 100%;
+    min-width: 36px;
+
+    a:hover {
+      cursor: all-scroll;
+    }
+  }
+}

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-bottom: 5px;
+  margin-top: 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-bottom: 0;
+  margin-top: 20px;
+}
+
+.mailpoet_post_scroll_container {
+  max-height: 400px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+.mailpoet_settings_posts_single_post {
+  background-color: $white-color;
+  border: 1px solid $content-border-color;
+  border-radius: 1px;
+  box-sizing: border-box;
+  height: 38px;
+  line-height: 38px;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  overflow: hidden;
+  width: 100%;
+
+  &: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%;
+}

assets/css/src/components/newsletterEditor/contentBlocks/_products.scss

@@ -0,0 +1,74 @@
+.mailpoet_products_block {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.mailpoet_products_block_products {
+  overflow: auto;
+
+  & > .mailpoet_block {
+    width: 100%;
+  }
+}
+
+.mailpoet_product_selection_filter_row {
+  margin-bottom: 5px;
+  margin-top: 5px;
+}
+
+.mailpoet_products_categories_and_tags {
+  width: 100%;
+}
+
+.mailpoet_settings_products_display_options,
+.mailpoet_settings_products_selection {
+  @include animation-slide-open-downwards();
+  overflow-x: hidden;
+}
+
+.mailpoet_settings_products_show_display_options,
+.mailpoet_settings_products_show_product_selection {
+  display: block;
+  margin-top: 10px;
+}
+
+.mailpoet_product_selection_container {
+  margin-bottom: 0;
+  margin-top: 20px;
+}
+
+.mailpoet_product_scroll_container {
+  max-height: 400px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+.mailpoet_settings_products_single_product {
+  background-color: $white-color;
+  border: 1px solid $content-border-color;
+  border-radius: 1px;
+  box-sizing: border-box;
+  height: 38px;
+  line-height: 38px;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  overflow: hidden;
+  width: 100%;
+
+  &:hover {
+    border-color: $primary-active-color;
+  }
+
+  .mailpoet_select_product_checkbox {
+    margin-left: 10px;
+    margin-right: 8px;
+  }
+}
+
+.mailpoet_product_selection_loading {
+  color: #999;
+}
+
+.mailpoet_products_container > .mailpoet_droppable_block {
+  width: 100%;
+}

assets/css/src/components/newsletterEditor/contentBlocks/_social.scss

@@ -0,0 +1,128 @@
+$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 {
+  .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;
+  margin-bottom: 5px;
+  padding: 5px;
+
+  &:hover {
+    border: 1px solid $social-icon-set-hover-border-color;
+  }
+
+  img {
+    height: $social-icon-width;
+    padding: 2px 3px;
+    vertical-align: middle;
+    width: $social-icon-width;
+  }
+}
+
+.mailpoet_active_icon_set {
+  background-color: $active-social-icon-set-background-color;
+  border: 1px dashed $active-social-icon-set-border-color;
+}
+
+.mailpoet_social_icon_settings {
+
+  background: $white-color;
+  border: 1px solid $content-border-color;
+  margin-bottom: 9px;
+
+  padding: 28px 9px (18px - 10px) 9px;
+  position: relative;
+}
+
+.mailpoet_social_icon_settings_row {
+  clear: both;
+
+  line-height: 30px;
+  margin-bottom: 10px;
+  overflow: auto;
+}
+
+.mailpoet_social_icon_settings_label {
+  margin-right: 5px;
+  text-align: left;
+
+  .mailpoet_social_icon_image {
+    height: 30px;
+    width: 30px;
+  }
+
+  &.mailpoet_social_icon_image_label {
+    line-height: initial;
+  }
+}
+
+.mailpoet_social_icon_settings_form_element {
+  float: left;
+  width: 100%;
+
+  input, select {
+    box-sizing: border-box;
+    display: inline-block;
+    height: 30px;
+    margin: 0;
+    vertical-align: middle;
+    width: 100%;
+  }
+}
+
+.mailpoet_social_icon_settings_tool {
+  position: absolute;
+  top: 10px;
+
+  .mailpoet_tool_icon {
+    fill: $tool-inactive-color;
+    height: $tool-width;
+    width: $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;
+}

assets/css/src/components/newsletterEditor/contentBlocks/_spacer.scss

@@ -0,0 +1,8 @@
+.mailpoet_spacer {
+  text-align: center;
+}
+
+.mailpoet_spacer_block {
+  cursor: all-scroll;
+  padding: 0;
+}

assets/css/src/components/newsletterEditor/contentBlocks/_text.scss

@@ -0,0 +1,13 @@
+.mailpoet_text_block {
+  padding-left: 0;
+  padding-right: 0;
+
+  & > .mailpoet_content {
+    overflow: hidden;
+    padding: 0 20px;
+
+    & > *:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

assets/css/src/components/newsletterEditor/mixins/_transitions.scss

@@ -0,0 +1,31 @@
+@mixin animation-slide-open-downwards($max-height: 2000px) {
+  max-height: $max-height;
+  opacity: 1;
+  overflow-y: inherit;
+  transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1); /* ease-in-out */
+
+  &.mailpoet_closed {
+    max-height: 0px;
+    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-duration: 300ms;
+  animation-fill-mode: forwards;
+  animation-name: fadeIn;
+  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 */
+}
+
+@keyframes fadeIn  {
+  0%  { opacity: 0.3; }
+  100%  { opacity: 1; }
+}

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%);
+  }
+}

assets/css/src/datepicker/datepicker.styl

@@ -1,2 +0,0 @@
-@require 'jquery-ui-1.10.1.css'
-@require 'melon.datepicker.css'

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
-

assets/css/src/form.styl

@@ -1,5 +0,0 @@
-.mailpoet_form
-  margin: 0 0 20px 0
-
-.mailpoet_form td
-  vertical-align: top !important

assets/css/src/form_editor.styl

@@ -1,568 +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)
-  -moz-transform: skew(-5deg) rotate(-5deg)
-  -ms-transform: skew(-5deg) rotate(-5deg)
-  -o-transform: skew(-5deg) rotate(-5deg)
-  transform: skew(-5deg) rotate(-5deg)
-  -webkit-box-shadow(0 6px 12px rgba(0, 0, 0, 0.3))
-  -moz-box-shadow(0 6px 12px rgba(0, 0, 0, 0.3))
-  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)
-  -moz-transform: skew(5deg) rotate(5deg)
-  -ms-transform: skew(5deg) rotate(5deg)
-  -o-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

assets/css/src/form_validation.styl

@@ -1,6 +0,0 @@
-.parsley-errors-list
-  margin-top: 8px
-
-.parsley-required
-.parsley-custom-error-message
-  color: #b94a48

assets/css/src/icons.styl

@@ -1,24 +0,0 @@
-icon-font-path ?= "../fonts"
-
-@font-face
-  font-family 'mailpoet'
-  src url(icon-font-path + '/mailpoet.ttf?mx0b6n') format('truetype'), url(icon-font-path + '/mailpoet.woff?mx0b6n') format('woff'), url(icon-font-path + '/mailpoet.svg?mx0b6n#mailpoet') format('svg')
-  font-weight normal
-  font-style normal
-
-[class^="mailpoet-icon-"], [class*=" mailpoet-icon-"]
-  font-family 'mailpoet' !important
-  speak none
-  font-style normal
-  font-weight normal
-  font-variant normal
-  text-transform none
-  line-height 1
-
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing antialiased
-  -moz-osx-font-smoothing grayscale
-
-.mailpoet-icon-logo
-  &:before
-    content "\e900"

assets/css/src/importExport.scss

@@ -0,0 +1 @@
+@import 'components/importExport';

assets/css/src/importExport.styl

@@ -1,78 +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
-

assets/css/src/in_app_announcements.styl

@@ -1,53 +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%
-    -webkit-box-shadow: 0 0 0 0 rgba(255, 83, 1, 0.4)
-  70%
-    -webkit-box-shadow: 0 0 0 10px rgba(255, 83, 1, 0)
-  100%
-    -webkit-box-shadow: 0 0 0 0 rgba(255, 83, 1, 0)
-
-@keyframes mailpoet_in_app_dot_pulse
-  0%
-    -moz-box-shadow: 0 0 0 0 rgba(255, 83, 1, 0.4)
-    box-shadow: 0 0 0 0 rgba(255, 83, 1, 0.4)
-  70%
-    -moz-box-shadow: 0 0 0 10px rgba(255, 83, 1, 0)
-    box-shadow: 0 0 0 10px rgba(255, 83, 1, 0)
-  100%
-    -moz-box-shadow: 0 0 0 0 rgba(255, 83, 1, 0)
-    box-shadow: 0 0 0 0 rgba(255, 83, 1, 0)
-
-.mailpoet_in_app_announcement_free_welcome_emails
-  text-align: center
-  h2
-    font-size: 28px
-  img
-    width: 640px
-    margin-top: -20px
-
-.mailpoet_in_app_announcement_free_welcome_emails_dot
-  position: relative
-  top: -3px
-  left: 8px
-
-.mailpoet_in_app_announcement_background_videos, .mailpoet_drag_and_drop_tutorial
-  text-align: center
-  h2
-    font-size: 28px
-  video
-    margin-top: 20px
-
-.new_subscriber_notification_announcement
-  h2
-    font-size: 28px
-  text-align: center

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

assets/css/src/listing.styl

@@ -1,27 +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 .check-column
-  tfoot .check-column
-    padding: 10px 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%

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;

assets/css/src/modal.styl

@@ -1,207 +0,0 @@
-modal_title_color = #cfcfcf
-modal_title_background_color = #222
-modal_highlight_background_color = #f1f1f1
-modal_content_background_color = #f0f0f0
-overlay_background_color = alpha(#000, 60%)
-
-// 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
-
-.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: block !important
-
-.mailpoet_modal_opened #mailpoet_modal_overlay
-  display: block
-
-// modal popup
-#mailpoet_popup
-  display: none
-  position: absolute
-  z-index: 25
-  top: 48px
-  margin: 0
-
-.mailpoet_popup_wrapper
-  background-color: modal_content_background_color
-  overflow: hidden
-  position: relative
-  width: 100%
-  z-index: 0
-  height: 96%
-
-.mailpoet_overlay_hidden .mailpoet_popup_wrapper
-  border: 1px solid #333
-
-#mailpoet_popup_title
-  background-color: modal_title_background_color
-  border: 1px solid #333
-  height: 27px
-  margin: 0
-  padding: 0 30px 0 0
-
-#mailpoet_popup_title h2
-  color: modal_title_color
-  font-size: 12px
-  font-weight: normal
-  margin: 6px 0 0 10px
-  padding: 0
-  font-family: "Lucida Grande", Verdana, Arial, sans-serif
-
-.mailpoet_popup_body
-  padding: 10px 10px 10px 10px
-  height: 92%
-
-// 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
-  background-color: modal_title_background_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
-  background: url(../img/modal_close_button.png) 7px 7px no-repeat
-  height: 30px
-  overflow: hidden
-  padding: 0
-  position: absolute
-  width: 30px
-  z-index: 2
-  outline: 0 none
-
-#mailpoet_popup #mailpoet_modal_close
-  right: 0
-  top: 0
-
-#mailpoet_panel #mailpoet_modal_close
-  right: 10px
-  top: 7px
-
-#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.mailpoet_panel_overlay
-    top: 46px
-
-  .mailpoet_panel_body
-    padding-bottom: 52px
-
-#mailpoet_loading
-  position: relative
-  left: 50%
-  top: 50%
-  margin-left: -75px
-  margin-top: -16px
-
-.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%

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

assets/css/src/newsletterEditor.scss

@@ -0,0 +1,36 @@
+@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/products';
+@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';

assets/css/src/newsletter_congratulate.styl

@@ -1,23 +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;

assets/css/src/newsletter_editor/common.styl

@@ -1,263 +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: 48px
-
-.mailpoet_input_medium
-  width: 150px
-
-.mailpoet_input_full
-  width: 100%
-  box-sizing: border-box
-
-.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-styles
-  position: absolute
-  top: 40px
-
-.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_field span.select2-container
-  width: 103px !important
-
-span.select2-container--open > span.select2-dropdown
-  width: 150px !important
-  
-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-fonts-notice
-  color: #999

assets/css/src/newsletter_editor/components/blockTools.styl

@@ -1,189 +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
-
-$tool-width = 20px
-$master-column-tool-width = 24px
-
-.mailpoet_tools
-  position: absolute
-  top: 0
-  right: 0
-  z-index: 20
-  padding: 2px
-  text-align: right
-  overflow: hidden
-
-  .mailpoet_tool_slider
-    position: relative
-    right: -100%
-    transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000)
-    opacity: 0
-
-  &.mailpoet_display_tools
-    .mailpoet_tool_slider
-      right: 0
-      opacity: 1
-
-  a
-    vertical-align: top
-
-  .mailpoet_container_horizontal + &
-    left: 100%
-    right: initial
-    padding-left: 5px
-
-    .mailpoet_tool_slider
-      left: -100%
-      right: initial
-
-    &.mailpoet_display_tools
-      z-index: 21
-
-      .mailpoet_tool_slider
-        left: 0
-
-    .mailpoet_tool
-      width: $master-column-tool-width
-      height: $master-column-tool-width
-      display: block
-
-      .mailpoet_tool_icon
-        width: $master-column-tool-width
-        height: $master-column-tool-width
-
-
-    .mailpoet_delete_block_activate
-      max-width: 100%
-      max-height: $master-column-tool-width
-      opacity: 1
-      display: block
-
-    .mailpoet_delete_block_confirm,
-    .mailpoet_delete_block_cancel
-      max-width: 100%
-      max-height: 0
-      opacity: 0
-      overflow: hidden
-      display: block
-      margin: 0
-
-    .mailpoet_delete_block_activated
-      width: auto
-      height: auto
-
-      .mailpoet_delete_block_activate
-        overflow: hidden
-        max-height: 0
-        opacity: 0
-
-      .mailpoet_delete_block_confirm,
-      .mailpoet_delete_block_cancel
-        max-height: $master-column-tool-width*2
-        opacity: 1
-
-.mailpoet_tool
-  display: inline-block
-  width: $tool-width
-  height: $tool-width
-  padding: 2px
-
-  &:hover
-    filter-shadow(1px, 2px, 0px, $tool-active-color)
-
-  .mailpoet_tool_icon
-    fill: $tool-inactive-color
-    width: $tool-width
-    height: $tool-width
-
-    .mailpoet_tool_icon_foreground
-      fill: $tool-inactive-secondary-color
-
-    &:hover
-      fill: $tool-hover-color
-
-      .mailpoet_tool_icon_foreground
-        fill: $tool-hover-secondary-color
-
-    &:active
-      fill: $primary-active-color
-
-      .mailpoet_tool_icon_foreground
-        fill: $tool-active-secondary-color
-
-  .mailpoet_delete_block_confirmation
-    position: absolute
-    top: 0
-    right: 0
-    width: 200px
-
-.mailpoet_delete_block
-  display: inline-block
-  padding: 2px
-  vertical-align: top
-  animation-background-color()
-
-  .mailpoet_tool
-    padding: 0
-
-  .mailpoet_delete_block_activate
-    max-width: $tool-width
-    display: inline-block
-    opacity: 1
-    animation-fade-in-and-scale-horizontally()
-
-  .mailpoet_delete_block_confirm,
-  .mailpoet_delete_block_cancel
-    max-width: 0
-    opacity: 0
-    overflow: hidden
-    display: inline-block
-    animation-fade-in-and-scale-horizontally()
-
-.mailpoet_delete_block_activated
-  height: auto
-  width: auto
-  border-radius(3px)
-  background-color: $warning-background-color
-  padding: 3px 5px
-
-  .mailpoet_delete_block_activate
-    overflow: hidden
-    max-width: 0
-    opacity: 0
-
-  .mailpoet_delete_block_confirm,
-  .mailpoet_delete_block_cancel
-    max-width: 100%
-    opacity: 1
-
-  .mailpoet_delete_block_cancel
-    margin-left: 3px
-
-.mailpoet_delete_block_confirm
-  color: $warning-text-color
-  float: right
-
-  &:hover
-    color: $warning-text-color
-    text-decoration: underline
-
-.mailpoet_delete_block_cancel
-  color: $warning-alternate-text-color
-  float: right
-
-  &:hover
-    color: $warning-alternate-text-color
-    text-decoration: underline
-
-.mailpoet_newsletter_layer_selector
-  &.mailpoet_container_layer_active
-    .mailpoet_tool_icon
-      fill: $primary-active-color
-      z-index: 100001 !important
-
-      .mailpoet_tool_icon_foreground
-        fill: $white-color

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

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

assets/css/src/newsletter_editor/components/heading.styl

@@ -1,27 +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
-
-.mailpoet_editor_announcement
-  position: absolute
-  right: 20px
-  top: 90px