da5e90a429
This approach is used in the Gutenberg repository. Our original approach, where we imported styles in index files in subdirectories, was a bit fragile because such a file might be skipped in case a component is imported directly. [MAILPOET-6320]
132 lines
2.6 KiB
SCSS
132 lines
2.6 KiB
SCSS
@import '~@wordpress/base-styles/colors';
|
|
|
|
.spinner-container {
|
|
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%;
|
|
}
|
|
|
|
#mailpoet-email-editor {
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
|
|
h2 {
|
|
font-size: 13px;
|
|
line-height: 24px;
|
|
margin: 0 0 4px;
|
|
}
|
|
|
|
span {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mailpoet-email-editor__settings-panel {
|
|
.mailpoet-settings-panel__subject .components-base-control__label {
|
|
width: 100%;
|
|
|
|
.components-external-link {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.mailpoet-settings-panel__help {
|
|
margin-bottom: 20px;
|
|
|
|
.components-text {
|
|
color: #757575;
|
|
}
|
|
}
|
|
|
|
.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-warning {
|
|
color: $alert-yellow;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.visual-editor__email_layout_wrapper {
|
|
height: 100%;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.visual-editor__email_content_wrapper {
|
|
display: flex;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
> div {
|
|
width: 100%;
|
|
}
|
|
|
|
// 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;
|
|
}
|