diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/markdown/editor.scss')
-rw-r--r-- | plugins/jetpack/extensions/blocks/markdown/editor.scss | 144 |
1 files changed, 144 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/markdown/editor.scss b/plugins/jetpack/extensions/blocks/markdown/editor.scss new file mode 100644 index 00000000..0cb11581 --- /dev/null +++ b/plugins/jetpack/extensions/blocks/markdown/editor.scss @@ -0,0 +1,144 @@ +@import '../../shared/styles/gutenberg-colors.scss'; +@import '../../shared/styles/gutenberg-variables.scss'; + +.wp-block-jetpack-markdown__placeholder { + opacity: 0.62; // See https://github.com/WordPress/gutenberg/blob/db7decd27f7c476684bc8edde381ffab4c916cb2/packages/block-editor/src/components/rich-text/style.scss#L72 + pointer-events: none; +} + +// @TODO: Remove all these specific styles when related Gutenberg core styles become more generic +.editor-block-list__block { + .wp-block-jetpack-markdown__preview { + min-height: 1.8em; + line-height: 1.8; + + & > * { + margin-top: 32px; + margin-bottom: 32px; + } + + // See https://github.com/WordPress/gutenberg/blob/db7decd27f7c476684bc8edde381ffab4c916cb2/packages/block-library/src/heading/editor.scss#L12-L35 + h1, + h2, + h3 { + line-height: 1.4; + } + + h1 { + font-size: 2.44em; + } + + h2 { + font-size: 1.95em; + } + + h3 { + font-size: 1.56em; + } + + h4 { + font-size: 1.25em; + line-height: 1.5; + } + + h5 { + font-size: 1em; + } + + h6 { + font-size: 0.8em; + } + + hr { + border: none; + border-bottom: 2px solid $dark-gray-100; + margin: 2em auto; + max-width: 100px; + } + + p { + line-height: 1.8; + } + + blockquote { + border-left: 4px solid $black; + margin-left: 0; + margin-right: 0; + padding-left: 1em; + + p { + line-height: 1.5; + margin: 1em 0; + } + } + + ul, + ol { + margin-left: 1.3em; + padding-left: 1.3em; + } + + li { + p { + margin: 0; + } + } + + // See https://github.com/WordPress/gutenberg/blob/db7decd27f7c476684bc8edde381ffab4c916cb2/packages/block-editor/src/components/rich-text/style.scss#L28-L39 + code, + pre { + color: $dark-gray-800; + font-family: $editor-html-font; + } + + code { + background: $light-gray-200; + border-radius: 2px; + font-size: inherit; // This is necessary to override upstream CSS. + padding: 2px; + } + + pre { + border-radius: 4px; + border: 1px solid $light-gray-500; + font-size: $text-editor-font-size; + padding: 0.8em 1em; + + code { + background: transparent; + padding: 0; + } + } + + table { + overflow-x: auto; + border-collapse: collapse; + width: 100%; + } + + thead, + tbody, + tfoot { + width: 100%; + min-width: 240px; + } + + td, + th { + padding: 0.5em; + border: 1px solid currentColor; + } + } +} + +.wp-block-jetpack-markdown { + .wp-block-jetpack-markdown__editor { + font-family: $editor-html-font; + font-size: $text-editor-font-size; + + &:focus { + border-color: transparent; + box-shadow: 0 0 0 transparent; + } + } +} |