diff options
Diffstat (limited to 'themes/twentynineteen/style-editor.scss')
| -rw-r--r-- | themes/twentynineteen/style-editor.scss | 741 |
1 files changed, 741 insertions, 0 deletions
diff --git a/themes/twentynineteen/style-editor.scss b/themes/twentynineteen/style-editor.scss new file mode 100644 index 00000000..43ce4a94 --- /dev/null +++ b/themes/twentynineteen/style-editor.scss @@ -0,0 +1,741 @@ +/*! +Twenty Nineteen Editor Styles +*/ + +/** === Includes === */ + +@import "sass/variables-site/variables-site"; +@import "sass/mixins/mixins-master"; + +/** === Editor Frame === */ + +body { + + .wp-block[data-align="full"] { + width: 100%; + } + + @include media(mobile) { + + .wp-block[data-align="full"] { + width: calc( 100% + 90px ); + max-width: calc( 100% + 90px ); + } + } + + @include media(tablet) { + + .editor-writing-flow { + max-width: 80%; + margin: 0 10%; + } + + .editor-post-title__block, + .editor-default-block-appender, + .editor-block-list__block { + margin-left: 0; + margin-right: 0; + } + + .wp-block[data-align="wide"] { + width: 100%; + } + + .wp-block[data-align="full"] { + position: relative; + left: calc( -12.5% - 14px ); + width: calc( 125% + 116px ); + max-width: calc( 125% + 115px ); // Subtract 1px here to avoid the rounding errors that happen due to the usage of percentages. + } + + .wp-block[data-align="right"] { + max-width: 125%; + } + } +} + +/** === Content Width === */ + +.wp-block { + width: calc(100vw - (2 * #{$size__spacing-unit})); + max-width: 100%; + + @include media(tablet) { + width: calc(8 * (100vw / 12)); + } + + @include media(desktop) { + width: calc(6 * (100vw / 12 )); + } + + // Only the top level blocks need specific widths, therefore override for every nested block. + .wp-block { + width: 100%; + } +} + +/** === Base Typography === */ + +body { + font-size: $font__size_base; + @include font-family( $font__body ); + line-height: $font__line-height-body; + color: $color__text-main; +} + +p { + font-size: $font__size_base; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + @include font-family( $font__heading ); + font-weight: 700; +} + +h1 { + font-size: $font__size-xl; + @include post-section-dash; + + @include media(tablet) { + font-size: $font__size-xxl; + } +} + +h2 { + font-size: $font__size-lg; + @include post-section-dash; + + @include media(tablet) { + font-size: $font__size-xl; + } +} + +h3 { + font-size: $font__size-lg; +} + +h4 { + font-size: $font__size-md; +} + +h5 { + font-size: $font__size-sm; +} + +h6 { + font-size: $font__size-xs; +} + +a { + @include link-transition; + color: $color__link; + + *:visited { + + } + + &:hover, + &:active { + color: $color__link-hover; + outline: 0; + text-decoration: none; + } + + &:focus { + outline: 0; + text-decoration: underline; + } +} + +// Use white text against these backgrounds by default. +.has-primary-background-color, +.has-secondary-background-color, +.has-dark-gray-background-color, +.has-light-gray-background-color { + color: $color__background-body; + + p, + h1, + h2, + h3, + h4, + h5, + h6, + a { + color: $color__background-body; + } +} + +// Use dark gray text against this background by default. +.has-white-background-color { + color: $color__text-main; + + p, + h1, + h2, + h3, + h4, + h5, + h6, + a { + color: $color__text-main; + } +} + +figcaption, +.gallery-caption { + @include font-family( $font__heading ); + font-size: $font__size-xs; + line-height: 1.6; + color: $color__text-light; +} + +/** === Post Title === */ + +.editor-post-title__block { + @include post-section-dash; + + &:before { + width: $font__size-xxl; + margin-top: 0; + margin-bottom: 0; + margin-left: 1em; + position: relative; + top: 0.5em; + } + + .editor-post-title__input { + @include font-family( $font__heading ); + font-size: $font__size-xxl; + font-weight: 700; + } +} + +/** === Default Appender === */ + +.editor-default-block-appender .editor-default-block-appender__content { + @include font-family( $font__body ); + font-size: $font__size_base; +} + +/** === Heading === */ + +.wp-block-heading { + strong { + font-weight: bolder; + } +} +/** === Paragraph === */ + +.wp-block-paragraph { + + &.has-drop-cap:not(:focus)::first-letter { + @include font-family( $font__heading ); + font-size: $font__size-xxxl; + line-height: 1; + font-weight: bold; + margin: 0 0.25em 0 0; + } +} + +/** === Table === */ + +.wp-block-table { + @include font-family( $font__heading ); +} + +/** === Cover === */ + +.wp-block-cover { + + h2, + .wp-block-cover-text { + @include font-family( $font__heading ); + font-size: $font__size-lg; + font-weight: bold; + line-height: 1.4; + padding-left: $size__spacing-unit; + padding-right: $size__spacing-unit; + + strong { + font-weight: bolder; + } + + @include media(tablet) { + margin-left: auto; + margin-right: auto; + padding: 0; + } + } + + @include media(tablet) { + padding-left: 10%; + padding-right: 10%; + + h2, + .wp-block-cover-text { + font-size: $font__size-xl; + } + } +} + +.wp-block[data-type="core/cover"][data-align="left"], +.wp-block[data-type="core/cover"][data-align="right"] { + + .editor-block-list__block-edit { + width: calc(4 * (100vw / 12)); + } + + .wp-block-cover { + width: 100%; + max-width: 100%; + padding: calc(1.375 * #{$size__spacing-unit}); + + p { + padding-left: 0; + padding-right: 0; + } + + @include media(tablet) { + padding: calc(2.75 * #{$size__spacing-unit}) calc(2.75 * #{$size__spacing-unit}) calc(3.125 * #{$size__spacing-unit}); + } + } +} + +.wp-block[data-type="core/cover"][data-align="wide"], +.wp-block[data-type="core/cover"][data-align="full"] { + + @include media(tablet) { + + h2, + .wp-block-cover-text { + max-width: calc(8 * (100vw / 12)); + } + } + + @include media(desktop) { + + h2, + .wp-block-cover-text { + max-width: calc(6 * (100vw / 12)); + } + } +} + +.wp-block[data-type="core/cover"][data-align="full"] { + + @include media(tablet) { + + .wp-block-cover { + padding-left: calc(10% + 64px); + padding-right: calc(10% + 64px); + } + } +} + +/** === Gallery === */ + +.wp-block-gallery { + + .blocks-gallery-image figcaption, + .blocks-gallery-item figcaption, + .gallery-item .gallery-caption { + font-size: $font__size-xs; + line-height: 1.6; + } +} + +/** === Button === */ + +.wp-block-button { + + .wp-block-button__link { + line-height: 1.8; + @include font-family( $font__heading ); + font-size: $font__size-sm; + font-weight: bold; + } + + &:not(.is-style-outline) .wp-block-button__link { + background: $color__background-button; + } + + &:not(.is-style-squared) .wp-block-button__link { + border-radius: 5px; + } + + &.is-style-outline, + &.is-style-outline:hover, + &.is-style-outline:focus, + &.is-style-outline:active { + background: transparent; + color: $color__background-button; + + .wp-block-button__link { + background: transparent; + + &:not(.has-text-color) { + color: $color__background-button; + } + } + } +} + +/** === Blockquote === */ + +.wp-block-quote { + + &:not(.is-large):not(.is-style-large) { + border-width: 2px; + border-color: $color__link; + } + + &.is-large, + &.is-style-large { + margin-top: $font__size-xxl; + margin-bottom: $font__size-xxl; + } + + &.is-large p, + &.is-style-large p { + font-size: $font__size-lg; + line-height: 1.3; + margin-bottom: 0.5em; + margin-top: 0.5em; + } + + cite, + footer, + .wp-block-quote__citation { + @include font-family( $font__heading ); + font-size: $font__size-xs; + line-height: 1.6; + color: $color__text-light; + } +} + +/** === Pullquote === */ + +.wp-block-pullquote { + border-color: transparent; + border-width: 2px; + color: #000; + + blockquote { + margin-top: calc(3 * #{ $size__spacing-unit}); + margin-bottom: calc(3.33 * #{ $size__spacing-unit}); + hyphens: auto; + word-break: break-word; + } + + &:not(.is-style-solid-color) .wp-block-pullquote__citation { + color: $color__text-light; + } + + &.is-style-solid-color { + + blockquote { + width: calc(100% - (2 * #{ $size__spacing-unit})); + max-width: calc( 100% - (2 * #{ $size__spacing-unit})); + + a, + &.has-text-color p, + &.has-text-color a { + color: inherit; + } + + &:not(.has-text-color) { + color: $color__background-body; + } + + @include media(tablet) { + max-width: 80%; + } + } + + &:not(.has-background-color) { + background-color: $color__link; + } + } +} + +.wp-block[data-type="core/pullquote"], +.wp-block[data-type="core/pullquote"][data-align="left"], +.wp-block[data-type="core/pullquote"][data-align="right"] { + + blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, + blockquote > .editor-rich-text p, + p { + font-size: $font__size-lg; + font-style: italic; + line-height: 1.3; + margin-bottom: 0.5em; + margin-top: 0.5em; + + @include media(tablet) { + font-size: $font__size-xl; + } + } + + .wp-block-pullquote__citation { + @include font-family( $font__heading ); + font-size: $font__size-xs; + line-height: 1.6; + text-transform: none; + } + + em { + font-style: normal; + } +} + +.wp-block[data-type="core/pullquote"][data-align="left"], +.wp-block[data-type="core/pullquote"][data-align="right"] { + + .editor-block-list__block-edit { + width: calc(4 * (100vw / 12)); + max-width: 50%; + + .wp-block-pullquote:not(.is-style-solid-color) { + padding: 0; + } + + .wp-block-pullquote.is-style-solid-color { + padding: 1em; + } + } + + blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, + blockquote > .editor-rich-text p, + p, + .wp-block-pullquote__citation { + text-align: left; + } +} + +.wp-block[data-type="core/pullquote"][data-align="full"] { + + @include media(tablet) { + + .wp-block-pullquote blockquote { + max-width: calc(80% - 128px); + } + } +} + + +/** === File === */ + +.wp-block-file { + @include font-family( $font__heading ); + + .wp-block-file__textlink { + text-decoration: underline; + color: $color__link; + + &:hover { + color: $color__link-hover; + text-decoration: none; + } + } + + .wp-block-file__button { + display: table; + line-height: 1.8; + font-size: $font__size-sm; + font-weight: bold; + background-color: $color__link; + border-radius: 5px; + } + + .wp-block-file__button-richtext-wrapper { + display: block; + margin-top: calc(0.75 * #{$size__spacing-unit}); + margin-left: 0; + } + +} + +/** === Verse === */ + +.wp-block-verse, +.wp-block-verse pre { + padding: 0; +} + +/** === Code === */ + +.wp-block-code { + border-radius: 0; +} + +/** === Table === */ + +.wp-block-table { + + td, th { + border-color: $color__text-light; + } +} + +/** === Separator === */ + +.wp-block-separator { + + &:not(.is-style-dots) { + border-bottom: 2px solid $color__text-light; + } + + &:not(.is-style-wide):not(.is-style-dots) { + width: $font__size-xl; + margin-left: 0; + } + + &.is-style-dots:before { + color: $color__text-light; + font-size: $font__size-lg; + letter-spacing: calc(2 * #{$size__spacing-unit}); + padding-left: calc(2 * #{$size__spacing-unit}); + } +} + +/* Remove duplicate rule-line when a separator + * is followed by an H1, or H2 */ +.wp-block[data-type="core/separator"] + .wp-block[data-type="core/heading"] h1:before, +.wp-block[data-type="core/separator"] + .wp-block[data-type="core/heading"] h2:before { + display: none; +} + +/** === Latest Posts, Archives, Categories === */ + +ul.wp-block-archives, +.wp-block-categories, +.wp-block-latest-posts { + padding: 0; + list-style-type: none; + + ul { + padding: 0; + list-style-type: none; + } + + li { + color: $color__text-light; + @include font-family( $font__heading ); + font-size: calc(#{$font__size_base} * #{$font__size-ratio}); + font-weight: bold; + line-height: $font__line-height-heading; + padding-bottom: ( .75 * $size__spacing-unit ); + + &.menu-item-has-children, + &:last-child { + padding-bottom: 0; + } + + a { + text-decoration: none; + } + + ul { + padding-left: $size__spacing-unit; + } + } +} + +.wp-block-categories { + + ul { + padding-top: ( .75 * $size__spacing-unit ); + @include nestedSubMenuPadding(); + } + + li ul { + list-style: none; + padding-left: 0; + margin-bottom: ( -.75 * $size__spacing-unit ); + } + +} + +/** === Latest Posts grid view === */ +.wp-block-latest-posts.is-grid { + li { + border-top: 2px solid $color__border; + padding-top: (1 * $size__spacing-unit); + margin-bottom: (2 * $size__spacing-unit); + a { + &:after { + content: ''; + } + } + &:last-child { + margin-bottom: auto; + a:after { + content: ''; + } + } + } + } + +/** === Latest Comments === */ + +.wp-block-latest-comments { + + .wp-block-latest-comments__comment-meta { + @include font-family( $font__heading ); + font-weight: bold; + + .wp-block-latest-comments__comment-date { + font-weight: normal; + } + } + + .wp-block-latest-comments__comment, + .wp-block-latest-comments__comment-date, + .wp-block-latest-comments__comment-excerpt p { + font-size: inherit; + } + + .wp-block-latest-comments__comment-date { + font-size: $font__size-xs; + } +} + +/** === Classic Editor === */ + +/* Properly center-align captions in the classic-editor block */ +.wp-caption { + dd { + color: $color__text-light; + font-size: $font__size-xs; + @include font-family( $font__heading ); + line-height: $font__line-height-pre; + margin: 0; + padding: ( $size__spacing-unit * .5 ); + text-align: left; + text-align: center; + -webkit-margin-start: 0px; + margin-inline-start: 0px; + } +} + +.wp-block-freeform { + + /* Add style for galleries in classic-editor block */ + blockquote { + border-left: 2px solid $color__link; + + cite { + @include font-family( $font__heading ); + font-size: $font__size-xs; + font-style: normal; + line-height: 1.6; + color: $color__text-light; + } + } +} |