Add temporary select2 styles, until we get rid of it

[MAILPOET-2772]

assets/css/src/generic/_forms-select2.scss

@@ -0,0 +1,200 @@
+/*
+ * These are temporary styles until we get rid of select2
+ *
+ * Usage:
+
+  const data = [{
+    id: '1',
+    count: 1,
+    tag: 'Tag',
+    text: 'Option',
+  }];
+
+  const templateRendered = (option) => {
+    let tpl = '';
+    if (option.tag !== undefined) {
+      tpl += `<span class="mailpoet-form-select2-tag">${option.tag}</span>`;
+    }
+    tpl += `<span class="mailpoet-form-select2-text"><span>${option.text}</span></span>`;
+    if (option.count !== undefined) {
+      tpl += `<span class="mailpoet-form-select2-count">${option.count}</span>`;
+    }
+    return tpl;
+  };
+
+  element.select2({
+    data,
+    dropdownCssClass: 'mailpoet-form-select2-dropdown',
+    escapeMarkup: (markup) => markup,
+    templateResult: templateRendered,
+    templateSelection: templateRendered,
+  });
+
+ *
+ */
+.mailpoet-form-select {
+  svg {
+    ~ .select2 .select2-selection__rendered { padding-left: 32px !important; }
+  }
+
+  &.mailpoet-form-input-small svg {
+    ~ .select2 .select2-selection__rendered { padding-left: 28px !important; }
+  }
+
+  .select2-container {
+    width: 100% !important;
+  }
+
+  .select2-selection {
+    background: transparent !important;
+    border: 0 !important;
+    height: auto !important;
+    outline: none;
+  }
+
+  .select2-selection__arrow {
+    display: none !important;
+  }
+
+  .select2-selection__rendered {
+    color: $color-text !important;
+    line-height: 22px !important;
+    padding: 7px 24px 9px 16px !important;
+    vertical-align: top;
+  }
+
+  .select2-selection--multiple .select2-selection__rendered {
+    padding-bottom: 0 !important;
+  }
+
+  .select2-selection__choice {
+    background: $color-tertiary-light !important;
+    border: 0 !important;
+    font-size: 14px;
+    height: 24px !important;
+    margin: 0 7px 7px 0 !important;
+    padding: 1px 24px 1px 6px !important;
+  }
+
+  .select2-selection__choice__remove {
+    color: rgba($color-text, .4) !important;
+    font-size: 22px;
+    line-height: 24px;
+    margin-right: 0 !important;
+    padding-top: 2px;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    top: 0;
+    width: 24px;
+  }
+
+  .select2-search--inline {
+    margin-bottom: 7px;
+  }
+
+  .select2-search__field {
+    line-height: 24px;
+    margin-top: 0 !important;
+
+    &::placeholder {
+      color: $color-text-light;
+    }
+  }
+}
+
+.mailpoet-form-select2-dropdown {
+  border-color: $color-input-border;
+  border-radius: 4px;
+  box-sizing: content-box;
+  color: $color-text;
+  font-family: $font-family;
+  font-size: $font-size;
+  margin-left: -1px;
+
+  &.select2-dropdown--below { margin-top: -4px; }
+  &.select2-dropdown--above { margin-bottom: -4px; }
+
+  .select2-search--dropdown {
+    padding: 6px 8px;
+
+    .select2-search__field {
+      background: #fff;
+      border: 1px solid $color-input-border;
+      border-radius: 4px;
+      font-size: 14px;
+      padding: 8px;
+
+      &::placeholder {
+        color: $color-text-light;
+      }
+    }
+  }
+
+  .select2-results__options {
+    padding: 4px 0;
+  }
+
+  .select2-results__option {
+    align-items: center;
+    display: flex;
+    padding: 12px 16px;
+
+    &[aria-selected=true] {
+      background-color: $color-secondary-light;
+      color: $color-text;
+    }
+  }
+
+  .select2-results__option--highlighted {
+    background-color: $color-tertiary-light;
+
+    &[aria-selected=true] {
+      background-color: $color-secondary-light-hover;
+    }
+  }
+}
+
+.mailpoet-form-select .select2-selection__choice,
+.mailpoet-form-select2-dropdown .select2-results__option {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  max-width: 100%;
+  position: relative;
+}
+
+.mailpoet-form-select2-text {
+  min-width: 0; // required for ellipsis to work
+
+  span {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.mailpoet-form-select2-tag {
+  background: $color-tertiary;
+  border-radius: 2px;
+  box-sizing: border-box;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 14px;
+  margin-right: 6px;
+  padding: 2px 5px;
+}
+
+.mailpoet-form-select2-count {
+  background: rgba($color-text-light, .5);
+  border-radius: 10px;
+  box-sizing: border-box;
+  color: $color-text;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 14px;
+  margin-left: 6px;
+  padding: 1px 5px;
+}

assets/css/src/mailpoet-plugin.scss

@@ -28,6 +28,7 @@
 @import 'generic/buttons-spinners';
 @import 'generic/forms-input';
 @import 'generic/forms-select';
+@import 'generic/forms-select2';
 @import 'generic/helpers';
 
 // Components