initial commit
This commit is contained in:
99
hamrokhaanpaan/wp-includes/blocks/media-text/block.json
Normal file
99
hamrokhaanpaan/wp-includes/blocks/media-text/block.json
Normal file
@ -0,0 +1,99 @@
|
||||
{
|
||||
"apiVersion": 2,
|
||||
"name": "core/media-text",
|
||||
"title": "Media & Text",
|
||||
"category": "media",
|
||||
"description": "Set media and words side-by-side for a richer layout.",
|
||||
"keywords": [ "image", "video" ],
|
||||
"textdomain": "default",
|
||||
"attributes": {
|
||||
"align": {
|
||||
"type": "string",
|
||||
"default": "wide"
|
||||
},
|
||||
"mediaAlt": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"selector": "figure img",
|
||||
"attribute": "alt",
|
||||
"default": ""
|
||||
},
|
||||
"mediaPosition": {
|
||||
"type": "string",
|
||||
"default": "left"
|
||||
},
|
||||
"mediaId": {
|
||||
"type": "number"
|
||||
},
|
||||
"mediaUrl": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"selector": "figure video,figure img",
|
||||
"attribute": "src"
|
||||
},
|
||||
"mediaLink": {
|
||||
"type": "string"
|
||||
},
|
||||
"linkDestination": {
|
||||
"type": "string"
|
||||
},
|
||||
"linkTarget": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"selector": "figure a",
|
||||
"attribute": "target"
|
||||
},
|
||||
"href": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"selector": "figure a",
|
||||
"attribute": "href"
|
||||
},
|
||||
"rel": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"selector": "figure a",
|
||||
"attribute": "rel"
|
||||
},
|
||||
"linkClass": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"selector": "figure a",
|
||||
"attribute": "class"
|
||||
},
|
||||
"mediaType": {
|
||||
"type": "string"
|
||||
},
|
||||
"mediaWidth": {
|
||||
"type": "number",
|
||||
"default": 50
|
||||
},
|
||||
"mediaSizeSlug": {
|
||||
"type": "string"
|
||||
},
|
||||
"isStackedOnMobile": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"verticalAlignment": {
|
||||
"type": "string"
|
||||
},
|
||||
"imageFill": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"focalPoint": {
|
||||
"type": "object"
|
||||
}
|
||||
},
|
||||
"supports": {
|
||||
"anchor": true,
|
||||
"align": [ "wide", "full" ],
|
||||
"html": false,
|
||||
"color": {
|
||||
"gradients": true,
|
||||
"link": true
|
||||
}
|
||||
},
|
||||
"editorStyle": "wp-block-media-text-editor",
|
||||
"style": "wp-block-media-text"
|
||||
}
|
||||
86
hamrokhaanpaan/wp-includes/blocks/media-text/editor-rtl.css
Normal file
86
hamrokhaanpaan/wp-includes/blocks/media-text/editor-rtl.css
Normal file
@ -0,0 +1,86 @@
|
||||
/**
|
||||
* 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 .__resizable_base__ {
|
||||
grid-column: 1/span 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.wp-block-media-text .editor-media-container__resizer {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.wp-block-media-text.is-image-fill .editor-media-container__resizer {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.wp-block-media-text > .block-editor-block-list__layout > .block-editor-block-list__block {
|
||||
max-width: unset;
|
||||
}
|
||||
1
hamrokhaanpaan/wp-includes/blocks/media-text/editor-rtl.min.css
vendored
Normal file
1
hamrokhaanpaan/wp-includes/blocks/media-text/editor-rtl.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.wp-block-media-text .__resizable_base__{grid-column:1/span 2;grid-row:2}.wp-block-media-text .editor-media-container__resizer{width:100%!important}.wp-block-media-text.is-image-fill .editor-media-container__resizer{height:100%!important}.wp-block-media-text>.block-editor-block-list__layout>.block-editor-block-list__block{max-width:unset}
|
||||
86
hamrokhaanpaan/wp-includes/blocks/media-text/editor.css
Normal file
86
hamrokhaanpaan/wp-includes/blocks/media-text/editor.css
Normal file
@ -0,0 +1,86 @@
|
||||
/**
|
||||
* 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 .__resizable_base__ {
|
||||
grid-column: 1/span 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.wp-block-media-text .editor-media-container__resizer {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.wp-block-media-text.is-image-fill .editor-media-container__resizer {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.wp-block-media-text > .block-editor-block-list__layout > .block-editor-block-list__block {
|
||||
max-width: unset;
|
||||
}
|
||||
1
hamrokhaanpaan/wp-includes/blocks/media-text/editor.min.css
vendored
Normal file
1
hamrokhaanpaan/wp-includes/blocks/media-text/editor.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.wp-block-media-text .__resizable_base__{grid-column:1/span 2;grid-row:2}.wp-block-media-text .editor-media-container__resizer{width:100%!important}.wp-block-media-text.is-image-fill .editor-media-container__resizer{height:100%!important}.wp-block-media-text>.block-editor-block-list__layout>.block-editor-block-list__block{max-width:unset}
|
||||
170
hamrokhaanpaan/wp-includes/blocks/media-text/style-rtl.css
Normal file
170
hamrokhaanpaan/wp-includes/blocks/media-text/style-rtl.css
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
1
hamrokhaanpaan/wp-includes/blocks/media-text/style-rtl.min.css
vendored
Normal file
1
hamrokhaanpaan/wp-includes/blocks/media-text/style-rtl.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.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.is-vertically-aligned-center .wp-block-media-text__content,.wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__media,.wp-block-media-text .wp-block-media-text__content,.wp-block-media-text .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%;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}@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}}
|
||||
180
hamrokhaanpaan/wp-includes/blocks/media-text/style.css
Normal file
180
hamrokhaanpaan/wp-includes/blocks/media-text/style.css
Normal file
@ -0,0 +1,180 @@
|
||||
/**
|
||||
* 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 {
|
||||
/*!rtl:begin:ignore*/
|
||||
direction: ltr;
|
||||
/*!rtl:end:ignore*/
|
||||
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 {
|
||||
/*!rtl:begin:ignore*/
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
/*!rtl:end:ignore*/
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-block-media-text .wp-block-media-text__content {
|
||||
direction: ltr;
|
||||
/*!rtl:begin:ignore*/
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
/*!rtl:end:ignore*/
|
||||
padding: 0 8% 0 8%;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
|
||||
/*!rtl:begin:ignore*/
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
/*!rtl:end:ignore*/
|
||||
}
|
||||
|
||||
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
|
||||
/*!rtl:begin:ignore*/
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
/*!rtl:end:ignore*/
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
11
hamrokhaanpaan/wp-includes/blocks/media-text/style.min.css
vendored
Normal file
11
hamrokhaanpaan/wp-includes/blocks/media-text/style.min.css
vendored
Normal file
@ -0,0 +1,11 @@
|
||||
.wp-block-media-text{
|
||||
/*!rtl:begin:ignore*/direction:ltr;
|
||||
/*!rtl:end:ignore*/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.is-vertically-aligned-center .wp-block-media-text__content,.wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__media,.wp-block-media-text .wp-block-media-text__content,.wp-block-media-text .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{
|
||||
/*!rtl:begin:ignore*/grid-column:1;grid-row:1;
|
||||
/*!rtl:end:ignore*/margin:0}.wp-block-media-text .wp-block-media-text__content{direction:ltr;
|
||||
/*!rtl:begin:ignore*/grid-column:2;grid-row:1;
|
||||
/*!rtl:end:ignore*/padding:0 8%;word-break:break-word}.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media{
|
||||
/*!rtl:begin:ignore*/grid-column:2;grid-row:1
|
||||
/*!rtl:end:ignore*/}.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content{
|
||||
/*!rtl:begin:ignore*/grid-column:1;grid-row:1
|
||||
/*!rtl:end:ignore*/}.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}@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}}
|
||||
Reference in New Issue
Block a user