diff -r 34716fd837a4 -r be944660c56a wp/wp-includes/blocks/media-text/style-rtl.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/wp/wp-includes/blocks/media-text/style-rtl.css Wed Sep 21 18:19:35 2022 +0200 @@ -0,0 +1,170 @@ +/** + * Colors + */ +/** + * Breakpoints & Media Queries + */ +/** + * SCSS Variables. + * + * Please use variables from this sheet to ensure consistency across the UI. + * Don't add to this sheet unless you're pretty sure the value will be reused in many places. + * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. + */ +/** + * Colors + */ +/** + * Fonts & basic variables. + */ +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ +/** + * Dimensions. + */ +/** + * Shadows. + */ +/** + * Editor widths. + */ +/** + * Block & Editor UI. + */ +/** + * Block paddings. + */ +/** + * React Native specific. + * These variables do not appear to be used anywhere else. + */ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +.wp-block-media-text { + direction: ltr; + display: grid; + grid-template-columns: 50% 1fr; + grid-template-rows: auto; +} +.wp-block-media-text.has-media-on-the-right { + grid-template-columns: 1fr 50%; +} + +.wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__content, +.wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__media { + align-self: start; +} + +.wp-block-media-text .wp-block-media-text__content, +.wp-block-media-text .wp-block-media-text__media, +.wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__content, +.wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__media { + align-self: center; +} + +.wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__content, +.wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__media { + align-self: end; +} + +.wp-block-media-text .wp-block-media-text__media { + grid-column: 1; + grid-row: 1; + margin: 0; +} + +.wp-block-media-text .wp-block-media-text__content { + direction: rtl; + grid-column: 2; + grid-row: 1; + padding: 0 8% 0 8%; + word-break: break-word; +} + +.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { + grid-column: 2; + grid-row: 1; +} + +.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { + grid-column: 1; + grid-row: 1; +} + +.wp-block-media-text__media img, +.wp-block-media-text__media video { + max-width: unset; + width: 100%; + vertical-align: middle; +} + +.wp-block-media-text.is-image-fill .wp-block-media-text__media { + height: 100%; + min-height: 250px; + background-size: cover; +} + +.wp-block-media-text.is-image-fill .wp-block-media-text__media > a { + display: block; + height: 100%; +} + +.wp-block-media-text.is-image-fill .wp-block-media-text__media img { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + +/* +* Here we here not able to use a mobile first CSS approach. +* Custom widths are set using inline styles, and on mobile, +* we need 100% width, so we use important to overwrite the inline style. +* If the style were set on mobile first, on desktop styles, +* we would have no way of setting the style again to the inline style. +*/ +@media (max-width: 600px) { + .wp-block-media-text.is-stacked-on-mobile { + grid-template-columns: 100% !important; + } + .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media { + grid-column: 1; + grid-row: 1; + } + .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { + grid-column: 1; + grid-row: 2; + } +} \ No newline at end of file