diff options
Diffstat (limited to 'srcs/wordpress/wp-content/themes/twentynineteen/style-editor.scss')
| -rw-r--r-- | srcs/wordpress/wp-content/themes/twentynineteen/style-editor.scss | 948 |
1 files changed, 0 insertions, 948 deletions
diff --git a/srcs/wordpress/wp-content/themes/twentynineteen/style-editor.scss b/srcs/wordpress/wp-content/themes/twentynineteen/style-editor.scss deleted file mode 100644 index 1c6c4de..0000000 --- a/srcs/wordpress/wp-content/themes/twentynineteen/style-editor.scss +++ /dev/null @@ -1,948 +0,0 @@ -/*! -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) { - background-color: $color__text-light; - height: 2px; - } - - &:not(.is-style-wide):not(.is-style-dots) { - width: $font__size-xl; - margin-left: 0; - } - - &.is-style-dots { - color: $color__text-light; - } - - &.is-style-dots:before { - 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 { - - > a { - @include font-family( $font__heading ); - font-size: calc(#{$font__size_base} * #{$font__size-ratio}); - font-weight: bold; - line-height: $font__line-height-heading; - 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 === */ -.wp-block-latest-posts { - - .wp-block-latest-posts__post-date { - @include font-family( $font__heading ); - font-size: $font__size-xs; - color: $color__text-light; - line-height: 1.2; - } - - .wp-block-latest-posts__post-full-content, - .wp-block-latest-posts__post-excerpt { - margin-top: $font__size_base; - margin-bottom: $font__size_base; - - > div > p:first-child { - margin-top: $font__size_base; - } - } - - li { - padding-bottom: ( .5 * $size__spacing-unit ); - - &.menu-item-has-children, - &:last-child { - padding-bottom: 0; - } - - :not(:last-child) .wp-block-latest-posts__post-excerpt { - padding-bottom: ( .5 * $size__spacing-unit ); - } - } - - &.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; - } - } -} - -/** === Group Block === */ - -// This matches the 22px value for 1rem that used on the front end. -// It must be specified in pixels for the editor, since the root font -// size is different here. -$group-block-background__padding: $font__size_base; - -.wp-block[data-type="core/group"] { - - // Group block base styles - > .editor-block-list__block-edit > div > .wp-block-group { - - // Child: Full alignment - > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] { - left: 0; - } - } - - // Group block with background color - > .editor-block-list__block-edit > div > .wp-block-group.has-background { - padding: $group-block-background__padding; - - // Child: Full alignment - > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] { - margin-left: -$group-block-background__padding; - width: calc(100% + #{$group-block-background__padding * 2}); - max-width: calc(100% + #{$group-block-background__padding * 2}); - } - } - - // Wide and full alignments - &[data-align="wide"] { - - // Group block base styles. - > .editor-block-list__block-edit > div > .wp-block-group { - - // Child blocks: Default alignments - > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) { - @include media(tablet) { - width: calc(8 * (100vw / 12)); - } - - @include media(desktop) { - width: calc(6 * (100vw / 12 )); - } - } - } - - // Group block with background color - > .editor-block-list__block-edit > div > .wp-block-group.has-background { - - // Child blocks: Default alignments - > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) { - @include media(tablet) { - width: calc(8 * (100vw / 12) - #{$group-block-background__padding * 2}); - } - - @include media(desktop) { - width: calc(6 * (100vw / 12 ) - #{$group-block-background__padding * 2}); - } - } - } - } - - // Full alignment - &[data-align="full"] { - - // Max-width needs to be a pixel narrower than usual to prevent horizontal scrolling. - @include media(mobile) { - max-width: calc(100% + 89px); - } - @include media(tablet) { - max-width: calc(125% + 114px); - } - - // Group block base styles - > .editor-block-list__block-edit > div > .wp-block-group { - - // Margins & padding are added to this container to mimic - // the style + spacing of the .editor-writing-flow global - // container. This way, child items sync up with the placement - // and size of other top-level blocks. - > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout { - - @include media(mobile) { - padding-left: 46px; - padding-right: 46px; - } - - // 2px of extra padding are added to each side here - // To better match up with the spacing of the whole - // document. - @include media(tablet) { - width: 80%; - margin-left: 10%; - margin-right: 10%; - padding-left: 48px; - padding-right: 48px; - } - - // Child blocks: All alignments except full - > .wp-block:not([data-align="full"]) { - max-width: calc(100vw - (2 * 1rem)); - - @include media(tablet) { - max-width: calc(8 * (100vw / 12)); - } - - @include media(desktop) { - max-width: calc(6 * (100vw / 12)); - } - } - - // Child blocks: Right alignments - > .wp-block[data-align="right"] { - - @include media(tablet) { - max-width: 125%; - } - } - - // Child blocks: Wide alignments - > .wp-block[data-align="wide"] { - - @include media(tablet) { - width: calc(100% + 4px); - max-width: calc(100% + 4px); - } - } - - // Child blocks: Full alignments - > .wp-block[data-align=full] { - max-width: calc(100vw + (2 * 1rem)); - - @include media(mobile) { - width: calc(100% + 92px); - left: -46px; - } - - @include media(tablet) { - left: calc(-12.5% - 58px); - width: calc(125% + 120px); - max-width: calc(125% + 119px); - } - } - } - } - - // Group block with background color - > .editor-block-list__block-edit > div > .wp-block-group.has-background { - - // When the Group block is full width, we can remove the left/right padding - // and let this inherit the - padding: $group-block-background__padding 0; - - @include media(mobile) { - padding-left: 0; - padding-right: 0; - } - - // Child blocks: Full alignment - > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] { - margin-left: 0; - width: 100%; - - @include media(mobile) { - width: calc(100% + 92px); - } - - @include media(tablet) { - width: calc(125% + 120px); - } - } - } - } -} |