Reduce editor's common styles lenght

[MAILPOET-2487]

assets/css/src/components-editor/_buttons.scss

@@ -0,0 +1,45 @@
+.mailpoet_button {
+  background-color: $color-primary-background;
+  border: 1px solid $color-editor-border-structure;
+  border-radius: 3px;
+  color: $color-primary-inactive;
+  line-height: normal;
+  margin: 0;
+  padding: 6px 20px;
+  vertical-align: top;
+}
+
+.mailpoet_button_full {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.mailpoet_button_primary {
+  background-color: $color-primary-button;
+  border-color: $color-primary;
+  color: $color-white;
+
+  &:hover {
+    background-color: $color-primary-highlight;
+  }
+}
+
+.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;
+  }
+
+  .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;
+  }
+}

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

@@ -41,177 +41,6 @@
   }
 }
 
-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 $color-editor-border-content;
-  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 {
-    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 {
-    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 {
-    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: $color-editor-border-content;
-  color: $color-primary-text;
-  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 {
   padding-left: 40px;
@@ -227,22 +56,6 @@ select.mailpoet_font-size {
   }
 }
 
-.mailpoet_button {
-  background-color: $color-primary-background;
-  border: 1px solid $color-editor-border-structure;
-  border-radius: 3px;
-  color: $color-primary-inactive;
-  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;
@@ -271,36 +84,6 @@ select.mailpoet_font-size {
   line-height: 1.4em;
 }
 
-.mailpoet_button_primary {
-  background-color: $color-primary-button;
-  border-color: $color-primary;
-  color: $color-white;
-
-  &:hover {
-    background-color: $color-primary-highlight;
-  }
-}
-
-.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;
-  }
-
-  .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;
 }

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

@@ -0,0 +1,170 @@
+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 $color-editor-border-content;
+  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 {
+    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 {
+    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 {
+    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: $color-editor-border-content;
+  color: $color-primary-text;
+  margin: 0;
+}
+
+.mailpoet_select_large {
+  width: 139px;
+}
+
+.mailpoet_select_medium {
+  width: 103px;
+}
+
+.mailpoet_select_small {
+  width: 68px;
+}
+
+.mailpoet_select_half_width {
+  width: 50%;
+}

assets/css/src/mailpoet-editor.scss

@@ -16,7 +16,9 @@
 
 // Components
 // Actual UI components.
+@import 'components-editor/buttons';
 @import 'components-editor/common';
+@import 'components-editor/forms';
 @import 'components-editor/layout';
 @import 'components-editor/components/forms';
 @import 'components-editor/components/heading';
@@ -46,4 +48,4 @@
 
 // Utilities
 // Helpers and overrides.
-@import 'components-editor/library-overrides';
+@import 'components-editor/3rd-party-overrides/overrides';

assets/css/src/mailpoet-post-editor-block.scss

@@ -1 +1,3 @@
+// Components
+// Actual UI components.
 @import 'components-post-editor-block/post-editor-block';

assets/css/src/mailpoet-public.scss

@@ -3,5 +3,7 @@
 @import 'mixins/breakpoints';
 @import 'mixins/clearfix';
 
+// Components
+// Actual UI components.
 @import 'components/parsley';
 @import 'components-public/public';