Reduce plugin's common styles lenght

[MAILPOET-2487]

assets/css/src/components-plugin/_browser-preview.scss

@@ -0,0 +1,47 @@
+.mailpoet_browser_preview_toggle {
+  flex: 0 1 auto;
+  height: 30px;
+  padding-bottom: 10px;
+  text-align: center;
+  width: 100%;
+}
+
+.mailpoet_browser_preview_toggle > label {
+  display: inline-block;
+  margin: 0 5px;
+}
+
+.mailpoet_browser_preview_container {
+  border: 1px solid #979797;
+  border-radius: 20px;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  height: 100%;
+  margin: auto;
+  padding: 20px;
+  transition: width .5s;
+}
+
+.mailpoet_browser_preview_container_desktop {
+  width: 100%;
+}
+
+.mailpoet_browser_preview_container_mobile {
+  width: 350px;
+}
+
+.mailpoet_browser_preview_border {
+  border: 1px solid #c3c3c3;
+  box-sizing: border-box;
+  height: 100%;
+  padding: 30px;
+  width: 100%;
+}
+
+.mailpoet_browser_preview_iframe {
+  display: block;
+  margin: auto;
+  width: calc(100% - 1px);
+}

assets/css/src/components-plugin/_common.scss

@@ -30,63 +30,6 @@ a:focus {
   text-align: center;
 }
 
-.select2-container {
-  width: 25em !important;
-}
-
-$placeholder-color: #999; /* default Select2 placeholder color for single dropdown */
-
-input.select2-search__field::-webkit-input-placeholder {
-  color: $placeholder-color;
-}
-
-input.select2-search__field:-moz-placeholder {
-  color: $placeholder-color;
-}
-
-input.select2-search__field::-moz-placeholder {
-  color: $placeholder-color;
-}
-
-input.select2-search__field:-ms-input-placeholder {
-  color: $placeholder-color;
-}
-
-.select2-container--default.select2-container--focus .select2-selection--multiple {
-  border: 1px solid #aaa; /* default Select2 border for single dropdown */
-}
-
-textarea.regular-text {
-  width: 25em !important;
-}
-
-@include breakpoint-max-width(782px) {
-  .select2-container {
-    width: 100% !important;
-  }
-}
-
-progress {
-  background-color: $progress-background;
-  border: 0;
-  height: 2em;
-  width: 100%;
-}
-
-progress::-webkit-progress-bar {
-  background-color: $progress-background;
-}
-
-progress::-webkit-progress-value {
-  background-color: $progress-foreground;
-  border-radius: $progress-border-radius;
-}
-
-progress::-moz-progress-bar {
-  background-color: $progress-foreground;
-  border-radius: $progress-border-radius;
-}
-
 /* double class is intentional here, we need to be very specific here to
    something wrapping our warning message could override its style */
 p.sender_email_address_warning.sender_email_address_warning,
@@ -105,51 +48,3 @@ p.sender_email_address_warning:first-child {
   height: 46px;
   padding: 10px 18px;
 }
-
-.mailpoet_browser_preview_toggle {
-  flex: 0 1 auto;
-  height: 30px;
-  padding-bottom: 10px;
-  text-align: center;
-  width: 100%;
-}
-
-.mailpoet_browser_preview_toggle > label {
-  display: inline-block;
-  margin: 0 5px;
-}
-
-.mailpoet_browser_preview_container {
-  border: 1px solid #979797;
-  border-radius: 20px;
-  box-sizing: border-box;
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  height: 100%;
-  margin: auto;
-  padding: 20px;
-  transition: width .5s;
-}
-
-.mailpoet_browser_preview_container_desktop {
-  width: 100%;
-}
-
-.mailpoet_browser_preview_container_mobile {
-  width: 350px;
-}
-
-.mailpoet_browser_preview_border {
-  border: 1px solid #c3c3c3;
-  box-sizing: border-box;
-  height: 100%;
-  padding: 30px;
-  width: 100%;
-}
-
-.mailpoet_browser_preview_iframe {
-  display: block;
-  margin: auto;
-  width: calc(100% - 1px);
-}

assets/css/src/components-plugin/_form.scss

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

assets/css/src/components-plugin/_forms.scss

@@ -0,0 +1,62 @@
+.mailpoet_form {
+  margin: 0 0 20px;
+}
+
+.mailpoet_form td {
+  vertical-align: top !important;
+}
+
+.select2-container {
+  width: 25em !important;
+}
+
+input.select2-search__field::-webkit-input-placeholder {
+  color: $color-placeholder-select2;
+}
+
+input.select2-search__field:-moz-placeholder {
+  color: $color-placeholder-select2;
+}
+
+input.select2-search__field::-moz-placeholder {
+  color: $color-placeholder-select2;
+}
+
+input.select2-search__field:-ms-input-placeholder {
+  color: $color-placeholder-select2;
+}
+
+.select2-container--default.select2-container--focus .select2-selection--multiple {
+  border: 1px solid #aaa; /* default Select2 border for single dropdown */
+}
+
+textarea.regular-text {
+  width: 25em !important;
+}
+
+@include breakpoint-max-width(782px) {
+  .select2-container {
+    width: 100% !important;
+  }
+}
+
+progress {
+  background-color: $progress-background;
+  border: 0;
+  height: 2em;
+  width: 100%;
+}
+
+progress::-webkit-progress-bar {
+  background-color: $progress-background;
+}
+
+progress::-webkit-progress-value {
+  background-color: $progress-foreground;
+  border-radius: $progress-border-radius;
+}
+
+progress::-moz-progress-bar {
+  background-color: $progress-foreground;
+  border-radius: $progress-border-radius;
+}

assets/css/src/components-plugin/_pages-custom.scss

@@ -1,7 +1,6 @@
 /*
 Custom styles for MailPoet pages.
 */
-
 .mailpoet-about-wrap {
   .videoWrapper {
     /* padding-top: 25px */

assets/css/src/components-plugin/_pages.scss

@@ -4,7 +4,6 @@ This is to make MailPoet pages independent of the WordPress
 About page styles that may differ across WP versions.
 Please add custom styles to pages_custom.styl
 */
-
 .mailpoet-about-wrap {
   font-size: 15px;
   margin: 25px 40px 0 20px;

assets/css/src/components-plugin/_premium-page.scss

@@ -1,4 +1,3 @@
-
 .mailpoet-about-wrap.mailpoet-premium-page {
   display: flex;
   flex-direction: column;

assets/css/src/mailpoet-plugin.scss

@@ -22,6 +22,7 @@
 // Actual UI components.
 @import 'components/parsley';
 @import 'components-plugin/automatic-emails';
+@import 'components-plugin/browser-preview';
 @import 'components-plugin/dynamic-segments';
 @import 'components-plugin/common';
 @import 'components-plugin/legacy-modal';
@@ -30,7 +31,7 @@
 @import 'components-plugin/listing';
 @import 'components-plugin/box';
 @import 'components-plugin/breadcrumb';
-@import 'components-plugin/form';
+@import 'components-plugin/forms';
 @import 'components-plugin/settings';
 @import 'components-plugin/progress-bar';
 @import 'components-plugin/subscribers';

assets/css/src/settings/_colors.scss

@@ -1,4 +1,5 @@
 // General colors
+$color-placeholder-select2: #999; /* default Select2 placeholder color for single dropdown */
 $color-transparent: rgba(#fff, 0);
 $color-white: rgb(255, 255, 255);