diff --git a/assets/css/src/generic/_forms-select2.scss b/assets/css/src/generic/_forms-select2.scss new file mode 100644 index 0000000000..c43f5804fb --- /dev/null +++ b/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 += `${option.tag}`; + } + tpl += `${option.text}`; + if (option.count !== undefined) { + tpl += `${option.count}`; + } + 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; +} diff --git a/assets/css/src/mailpoet-plugin.scss b/assets/css/src/mailpoet-plugin.scss index 8f632d10a2..36eb3cecb1 100644 --- a/assets/css/src/mailpoet-plugin.scss +++ b/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