Move CSS to new settings

[MAILPOET-2679]

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

@@ -7,116 +7,10 @@
     width: 20em;
   }
 
-  .mailpoet_sending_methods {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    margin: 25px 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;

assets/css/src/settings.scss

@@ -21,25 +21,28 @@
     vertical-align: inherit;
   }
 
-  .mailpoet_error_item:before {
-    content: '✗ ';
-  }
-
   .mailpoet_subitem {
     margin-left: 2em;
   }
 
-  .mailpoet_success_item:before {
+}
-    content: '✔ ';
-  }
 
-  .mailpoet_error_item:before {
+.mailpoet_woocommerce_editor_button {
-    content: '✗ ';
+  margin-top: 10px;
-  }
+}
 
-  .mailpoet_woocommerce_editor_button {
+.mailpoet_success_item:before {
-    margin-top: 10px;
+  content: '✔ ';
-  }
+}
+
+.mailpoet_error_item:before {
+  content: '✗ ';
+}
+
+ul.sending-method-benefits {
+  list-style-type: none;
+  margin-bottom: 2em;
+  margin-top: 2em;
 }
 
 .mailpoet-settings-label {
@@ -78,3 +81,103 @@
 .mailpoet-settings-inputs p {
   font-size: 14px;
 }
+
+.mailpoet_sending_methods {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  margin: 25px 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;
+  }
+}