diff --git a/packages/js/email-editor/src/components/block-editor/index.scss b/packages/js/email-editor/src/components/block-editor/index.scss index 22c2b0b729..c614777c58 100644 --- a/packages/js/email-editor/src/components/block-editor/index.scss +++ b/packages/js/email-editor/src/components/block-editor/index.scss @@ -1,185 +1,188 @@ -@import '~@wordpress/base-styles/colors'; +@import "~@wordpress/base-styles/colors"; .spinner-container { - align-items: center; - display: flex; - height: 100%; - justify-content: center; - width: 100%; + align-items: center; + display: flex; + height: 100%; + justify-content: center; + width: 100%; } // Fix editor width. We don't use resizable editor wrapper so we need to set the width manually here .editor-visual-editor > div { - width: 100%; + width: 100%; } #mailpoet-email-editor { - .editor-header__toolbar { - flex-grow: 1; - } - .editor-header__center { - flex-grow: 3; - } + .editor-header__toolbar { + flex-grow: 1; + } + .editor-header__center { + flex-grow: 3; + } } // Specific styles for the component EmailTypeInfo // Styles are based on the Block Card component from Gutenberg block editor .mailpoet-email-sidebar__email-type-info { - .components-panel__row { - align-items: flex-start; - } + .components-panel__row { + align-items: flex-start; + } - .mailpoet-email-type-info__icon { - flex: 0 0 24px; - margin-left: 0; - margin-right: 12px; - } + .mailpoet-email-type-info__icon { + flex: 0 0 24px; + margin-left: 0; + margin-right: 12px; + } - .mailpoet-email-type-info__content { - flex-grow: 1; - margin-bottom: 4px; + .mailpoet-email-type-info__content { + flex-grow: 1; + margin-bottom: 4px; - h2 { - font-size: 13px; - line-height: 24px; - margin: 0 0 4px; - } + h2 { + font-size: 13px; + line-height: 24px; + margin: 0 0 4px; + } - span { - font-size: 13px; - } + span { + font-size: 13px; + } - p:last-child { - margin-bottom: 0; - } - } + p:last-child { + margin-bottom: 0; + } + } - .mailpoet-email-type-info__content_heading { - display: flex; + .mailpoet-email-type-info__content_heading { + display: flex; - div:last-child { - margin-left: auto; - margin-right: -8px; - margin-top: -6px; - } - } + div:last-child { + margin-left: auto; + margin-right: -8px; + margin-top: -6px; + } + } } .mailpoet-settings-panel__preheader-text { - margin-top: 9px; + margin-top: 9px; } .mailpoet-email-editor__settings-panel { - .mailpoet-settings-panel__richtext { - border: 1px solid var(--wp-components-color-gray-600, #949494); - border-radius: 2px; - box-shadow: transparent 0 0 0; - display: block; - min-height: 80px; - padding: 9px 11px; - width: 100%; - } + .mailpoet-settings-panel__richtext { + border: 1px solid var(--wp-components-color-gray-600, #949494); + border-radius: 2px; + box-shadow: transparent 0 0 0; + display: block; + min-height: 80px; + padding: 9px 11px; + width: 100%; + } - .mailpoet-settings-panel__personalization-tags-button.components-button.has-icon { - display: inline-block; - height: 14px; - line-height: 14px; - padding: 0 5px; - span { - height: 11px; - } - } + .mailpoet-settings-panel__personalization-tags-button.components-button.has-icon { + display: inline-block; + height: 14px; + line-height: 14px; + padding: 0 5px; + span { + height: 11px; + } + } - .mailpoet-settings-panel__subject .components-base-control__label { - width: 100%; + .mailpoet-settings-panel__subject .components-base-control__label { + width: 100%; - .components-external-link { - float: right; - } - } + .components-external-link { + float: right; + } + } - .mailpoet-settings-panel__help { - margin-bottom: 20px; + .mailpoet-settings-panel__help { + margin-bottom: 20px; - .components-text { - color: #757575; - } - } + .components-text { + color: #757575; + } + } - .mailpoet-settings-panel__preview-text .components-base-control__label { - width: 100%; - } + .mailpoet-settings-panel__preview-text .components-base-control__label { + width: 100%; + } - .mailpoet-settings-panel__preview-text-length { - color: $black; - display: inline-block; - float: right; - padding: 3px; - } + .mailpoet-settings-panel__preview-text-length { + color: $black; + display: inline-block; + float: right; + padding: 3px; + } - .mailpoet-settings-panel__preview-text-length-warning { - color: $alert-yellow; - } + .mailpoet-settings-panel__preview-text-length-warning { + color: $alert-yellow; + } - .mailpoet-settings-panel__preview-text-length-error { - color: $alert-red; - } + .mailpoet-settings-panel__preview-text-length-error { + color: $alert-red; + } } .edit-post-visual-editor { - line-height: 1.4; /* Recommended line-height that is also used in the email editor */ - margin: 0; - min-height: 100%; - padding: 0; - -webkit-text-size-adjust: 100%; /* From MJMJ - Automatic test adjustment on mobile max to 100% */ - -ms-text-size-adjust: 100%; /* From MJMJ - Automatic test adjustment on mobile max to 100% */ - word-spacing: normal; + line-height: 1.4; /* Recommended line-height that is also used in the email editor */ + margin: 0; + min-height: 100%; + padding: 0; + -webkit-text-size-adjust: 100%; /* From MJMJ - Automatic test adjustment on mobile max to 100% */ + -ms-text-size-adjust: 100%; /* From MJMJ - Automatic test adjustment on mobile max to 100% */ + word-spacing: normal; } .visual-editor__email_layout_wrapper { - height: 100%; - margin: 0 auto; - padding: 0; - width: 100%; + height: 100%; + margin: 0 auto; + padding: 0; + width: 100%; } .visual-editor__email_content_wrapper { - display: flex; - height: 100%; - width: 100%; + display: flex; + height: 100%; + width: 100%; - > div { - width: 100%; - } + > div { + width: 100%; + } - // Fix for mobile preview height - &.is-mobile-preview { - > div { - display: block !important; - } - .editor-styles-wrapper { - height: auto !important; - } - } + // Fix for mobile preview height + &.is-mobile-preview { + > div { + display: block !important; + } + .editor-styles-wrapper { + height: auto !important; + } + } } // Hide the advanced settings in the sidebar. This panel is not used in the email editor at this moment. .block-editor-block-inspector__advanced { - display: none; + display: none; } // Temporary styles for Rich Text HTML comments from the PR: https://github.com/WordPress/gutenberg/pull/62128/files [data-rich-text-comment], [data-rich-text-format-boundary] { - border-radius: 2px; + border-radius: 2px; } [data-rich-text-comment] { - background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); + background-color: var( + --wp-components-color-accent, + var(--wp-admin-theme-color, #3858e9) + ); - span { - color: var(--wp-components-color-accent-inverted, #fff); - filter: none; - padding: 0 2px; - } + span { + color: var(--wp-components-color-accent-inverted, #fff); + filter: none; + padding: 0 2px; + } } diff --git a/packages/js/email-editor/src/components/header/index.scss b/packages/js/email-editor/src/components/header/index.scss index ddff0bd083..36f3bc92af 100644 --- a/packages/js/email-editor/src/components/header/index.scss +++ b/packages/js/email-editor/src/components/header/index.scss @@ -1,58 +1,60 @@ // Document actions - Component in header for displaying email/campaign title edit popup .mailpoet-email-editor-campaign-name { - align-items: center; - display: flex; - flex-direction: row; - justify-content: center; - min-width: 0; + align-items: center; + display: flex; + flex-direction: row; + justify-content: center; + min-width: 0; - .components-dropdown { - display: inline-flex; - } + .components-dropdown { + display: inline-flex; + } - .components-button { - min-width: 0; - padding: 0; - } + .components-button { + min-width: 0; + padding: 0; + } - .mailpoet-email-campaign-name__link { - display: inline-flex; - height: fit-content; - margin-right: 10px; - margin-top: 10px; - } + .mailpoet-email-campaign-name__link { + display: inline-flex; + height: fit-content; + margin-right: 10px; + margin-top: 10px; + } } // Document actions - Popup for editing email/campaign title .mailpoet-email-editor-campaign-name__dropdown { - .components-popover__content { - min-width: 280px; - padding: 0; - } + .components-popover__content { + min-width: 280px; + padding: 0; + } - .mailpoet-email-editor-email-title-edit { - padding: 16px; - } + .mailpoet-email-editor-email-title-edit { + padding: 16px; + } } .mailpoet-email-editor-save-button__dropdown { - .components-popover__content { - min-width: 280px; - } + .components-popover__content { + min-width: 280px; + } } // We currently don't support command palette so we hide the shortcut .editor-document-bar__shortcut { - display: none !important; + display: none !important; } // Temporarily hide text about amount of changes to save. The wording is not great for email context. .entities-saved-states__text-prompt { - p { - display: none; - } + p { + display: none; + } } // Ensure checkbox controls in save panel dropdown to span the full width -.mailpoet-email-editor-save-button__dropdown .components-panel__row .components-checkbox-control { - width: 100%; +.mailpoet-email-editor-save-button__dropdown + .components-panel__row + .components-checkbox-control { + width: 100%; } diff --git a/packages/js/email-editor/src/components/notices/index.scss b/packages/js/email-editor/src/components/notices/index.scss index 8ca9236e2e..15b2cbe4b6 100644 --- a/packages/js/email-editor/src/components/notices/index.scss +++ b/packages/js/email-editor/src/components/notices/index.scss @@ -1,19 +1,19 @@ .components-notice.mailpoet-email-editor-validation-errors { - margin: 0; + margin: 0; - ul { - list-style: disc outside; - margin: 0 0 0 20px; - } - li { - margin: 8px 0; - padding: 0; - } - li:last-child { - margin-bottom: 0; - } - button.components-button.is-link { - color: #1e1e1e; - margin: 0 4px; - } + ul { + list-style: disc outside; + margin: 0 0 0 20px; + } + li { + margin: 8px 0; + padding: 0; + } + li:last-child { + margin-bottom: 0; + } + button.components-button.is-link { + color: #1e1e1e; + margin: 0 4px; + } } diff --git a/packages/js/email-editor/src/components/personalization-tags/index.scss b/packages/js/email-editor/src/components/personalization-tags/index.scss index 655df8804f..8f0b8839dc 100644 --- a/packages/js/email-editor/src/components/personalization-tags/index.scss +++ b/packages/js/email-editor/src/components/personalization-tags/index.scss @@ -1,103 +1,103 @@ -@import '~@wordpress/base-styles/colors'; +@import "~@wordpress/base-styles/colors"; .mailpoet-personalization-tags-modal { - p:first-child { - margin-top: 0; - } - .mailpoet-personalization-tags-modal__category { - display: inline-block; - font-size: 11px; - line-height: 16px; - padding-bottom: 8px; - padding-top: 16px; - text-transform: uppercase; - } - .mailpoet-personalization-tags-modal__category-group { - display: flex; - flex-direction: column; - gap: 10px; + p:first-child { + margin-top: 0; + } + .mailpoet-personalization-tags-modal__category { + display: inline-block; + font-size: 11px; + line-height: 16px; + padding-bottom: 8px; + padding-top: 16px; + text-transform: uppercase; + } + .mailpoet-personalization-tags-modal__category-group { + display: flex; + flex-direction: column; + gap: 10px; - .mailpoet-personalization-tags-modal__category-group-item { - align-items: stretch; - border-bottom: 1px solid var(--wp-components-color-gray-300, #ddd); - display: flex; - padding: 16px 0; + .mailpoet-personalization-tags-modal__category-group-item { + align-items: stretch; + border-bottom: 1px solid var(--wp-components-color-gray-300, #ddd); + display: flex; + padding: 16px 0; - .mailpoet-personalization-tags-modal__item-text { - display: flex; - flex: 1; - flex-direction: column; - font-size: 12px; - gap: 5px; - justify-content: center; - line-height: 18px; - } + .mailpoet-personalization-tags-modal__item-text { + display: flex; + flex: 1; + flex-direction: column; + font-size: 12px; + gap: 5px; + justify-content: center; + line-height: 18px; + } - button.is-link { - flex: 0 0 auto; - font-size: 14px; - height: auto; - line-height: 2; - } - } - } + button.is-link { + flex: 0 0 auto; + font-size: 14px; + height: auto; + line-height: 2; + } + } + } - .mailpoet-personalization-tags-modal__menu { - div[role="group"] { - display: flex; - } + .mailpoet-personalization-tags-modal__menu { + div[role="group"] { + display: flex; + } - .mailpoet-personalization-tags-modal__menu-item-active { - color: black; - font-weight: bold; - } + .mailpoet-personalization-tags-modal__menu-item-active { + color: black; + font-weight: bold; + } - button { - align-items: center; - color: #0a7aff; - display: flex; - gap: 8px; - padding: 6px; - width: auto; - span { - min-width: auto; - } - } - .mailpoet-personalization-tags-modal__menu-separator { - background-color: var(--wp-components-color-gray-700, #757575); - height: 16px; - margin: 10px 4px; - width: 1px; - } - } + button { + align-items: center; + color: #0a7aff; + display: flex; + gap: 8px; + padding: 6px; + width: auto; + span { + min-width: auto; + } + } + .mailpoet-personalization-tags-modal__menu-separator { + background-color: var(--wp-components-color-gray-700, #757575); + height: 16px; + margin: 10px 4px; + width: 1px; + } + } } .mailpoet-personalization-tag-popover { - align-items: center; - display: flex; - justify-content: center; + align-items: center; + display: flex; + justify-content: center; - .mailpoet-personalization-tag-popover__content { - max-width: 350px; - min-width: auto; - width: 90vw; + .mailpoet-personalization-tag-popover__content { + max-width: 350px; + min-width: auto; + width: 90vw; - .components-base-control { - margin: 16px; - } - } - .mailpoet-personalization-tag-popover__content-buttons { - margin: 16px; - text-align: right; + .components-base-control { + margin: 16px; + } + } + .mailpoet-personalization-tag-popover__content-buttons { + margin: 16px; + text-align: right; - .components-button { - margin-left: 8px; - } - } + .components-button { + margin-left: 8px; + } + } } a.mailpoet-email-editor__personalization-tags-link { - color: LinkText; - cursor: pointer; - text-decoration: underline; + color: LinkText; + cursor: pointer; + text-decoration: underline; } diff --git a/packages/js/email-editor/src/components/preview/index.scss b/packages/js/email-editor/src/components/preview/index.scss index f8f191564d..a73158ed25 100644 --- a/packages/js/email-editor/src/components/preview/index.scss +++ b/packages/js/email-editor/src/components/preview/index.scss @@ -1,28 +1,28 @@ .components-modal__frame.mailpoet-send-preview-email { - max-width: 456px; + max-width: 456px; } .mailpoet-send-preview-modal-footer { - display: flex; - gap: 12px; - justify-content: flex-end; - padding-top: 16px; + display: flex; + gap: 12px; + justify-content: flex-end; + padding-top: 16px; } .mailpoet-send-preview-modal-notice-error { - background-color: #fcf0f1; - gap: 12px; - padding: 12px 16px; + background-color: #fcf0f1; + gap: 12px; + padding: 12px 16px; - ul { - list-style: disc; - margin: 0; - padding: 5px 0 0 20px; - } + ul { + list-style: disc; + margin: 0; + padding: 5px 0 0 20px; + } } .mailpoet-send-preview-modal-notice-success { - align-items: center; - display: flex; - padding-top: 2px; + align-items: center; + display: flex; + padding-top: 2px; } diff --git a/packages/js/email-editor/src/components/sidebar/index.scss b/packages/js/email-editor/src/components/sidebar/index.scss index 5d5158b78a..d8a60a6537 100644 --- a/packages/js/email-editor/src/components/sidebar/index.scss +++ b/packages/js/email-editor/src/components/sidebar/index.scss @@ -1,17 +1,17 @@ -@import '~@wordpress/base-styles/colors'; +@import "~@wordpress/base-styles/colors"; .background-block-support-panel .mailpoet__grid-full-width, .border-block-support-panel .mailpoet__grid-full-width { - // setting the grid to 100% width because border block contains two grid columns - grid-column: 1/3; - // resetting margin fits the notice to the full column width - margin: 0; + // setting the grid to 100% width because border block contains two grid columns + grid-column: 1/3; + // resetting margin fits the notice to the full column width + margin: 0; } // Disable focus outline for buttons in the sidebar .edit-post-sidebar { - .components-button:focus:not(:disabled) { - box-shadow: none; - outline: none; - } + .components-button:focus:not(:disabled) { + box-shadow: none; + outline: none; + } } diff --git a/packages/js/email-editor/src/components/styles-sidebar/index.scss b/packages/js/email-editor/src/components/styles-sidebar/index.scss index e777014f4b..7f3c60f295 100644 --- a/packages/js/email-editor/src/components/styles-sidebar/index.scss +++ b/packages/js/email-editor/src/components/styles-sidebar/index.scss @@ -1,55 +1,55 @@ .mailpoet-email-editor__styles-panel { - display: flex; - flex-direction: column; - height: 100%; + display: flex; + flex-direction: column; + height: 100%; - .components-panel, - .components-navigator-provider, - .components-navigator-screen { - height: 100%; - overflow: hidden; - } + .components-panel, + .components-navigator-provider, + .components-navigator-screen { + height: 100%; + overflow: hidden; + } - .components-navigator-screen { - overflow: hidden auto; - } + .components-navigator-screen { + overflow: hidden auto; + } - .components-navigator-button { - width: 100%; - } + .components-navigator-button { + width: 100%; + } - .mailpoet-email-editor__styles-header { - margin-bottom: 0; - } + .mailpoet-email-editor__styles-header { + margin-bottom: 0; + } - .mailpoet-email-editor__styles-header-description { - padding: 0 16px; - } + .mailpoet-email-editor__styles-header-description { + padding: 0 16px; + } - h3.edit-site-global-styles-subtitle { - margin-bottom: 0; - } + h3.edit-site-global-styles-subtitle { + margin-bottom: 0; + } - .single-column { - grid-column: span 1; - } + .single-column { + grid-column: span 1; + } - .edit-site-global-styles-screen-typography__indicator { - border-radius: 3px; - height: 2em; - line-height: 2em; - padding: 0; - width: 2em; - } + .edit-site-global-styles-screen-typography__indicator { + border-radius: 3px; + height: 2em; + line-height: 2em; + padding: 0; + width: 2em; + } - .edit-site-typography-preview { - align-items: center; - background: #f0f0f0; - border-radius: 2px; - display: flex; - justify-content: center; - margin-bottom: 16px; - min-height: 100px; - overflow: hidden; - } + .edit-site-typography-preview { + align-items: center; + background: #f0f0f0; + border-radius: 2px; + display: flex; + justify-content: center; + margin-bottom: 16px; + min-height: 100px; + overflow: hidden; + } } diff --git a/packages/js/email-editor/src/components/template-select/index.scss b/packages/js/email-editor/src/components/template-select/index.scss index 15370e18ca..0612e5e28d 100644 --- a/packages/js/email-editor/src/components/template-select/index.scss +++ b/packages/js/email-editor/src/components/template-select/index.scss @@ -1,44 +1,46 @@ .block-editor-block-patterns-explorer - .block-editor-block-patterns-list - .block-editor-block-preview__container { - max-height: 300px !important; + .block-editor-block-patterns-list + .block-editor-block-preview__container { + max-height: 300px !important; } .block-editor-block-patterns-list__item .block-editor-block-preview__container { - align-items: flex-start !important; + align-items: flex-start !important; } .block-editor-block-patterns-list__list-item { - overflow: hidden; + overflow: hidden; } .email-editor-recent-templates-info { - background-color: #F0F6FC; - margin-bottom: 1.5rem; - padding: 0.5rem; + background-color: #f0f6fc; + margin-bottom: 1.5rem; + padding: 0.5rem; - path { fill: #007CBA; } + path { + fill: #007cba; + } } .email-editor-pattern__list-item { - border: 1px solid #DDD; - border-radius: 4px; + border: 1px solid #ddd; + border-radius: 4px; - .block-editor-block-preview__container:after { - outline: unset !important; - outline-offset: unset !important; - } + .block-editor-block-preview__container:after { + outline: unset !important; + outline-offset: unset !important; + } - .block-editor-block-patterns-list__item-title { - font-size: unset !important; - padding-left: 1rem; - } + .block-editor-block-patterns-list__item-title { + font-size: unset !important; + padding-left: 1rem; + } } .email-editor-modal-footer { - background-color: #fff; - bottom: 0; - padding: 1rem 2rem; - position: absolute; - right: 0; + background-color: #fff; + bottom: 0; + padding: 1rem 2rem; + position: absolute; + right: 0; }