1 /**

     2  * Colors

     3  */

     4 /**

     5  * Breakpoints & Media Queries

     6  */

     7 /**

     8  * SCSS Variables.

     9  *

    10  * Please use variables from this sheet to ensure consistency across the UI.

    11  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.

    12  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.

    13  */

    14 /**

    15  * Colors

    16  */

    17 /**

    18  * Fonts & basic variables.

    19  */

    20 /**

    21  * Grid System.

    22  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/

    23  */

    24 /**

    25  * Dimensions.

    26  */

    27 /**

    28  * Shadows.

    29  */

    30 /**

    31  * Editor widths.

    32  */

    33 /**

    34  * Block & Editor UI.

    35  */

    36 /**

    37  * Block paddings.

    38  */

    39 /**

    40  * React Native specific.

    41  * These variables do not appear to be used anywhere else.

    42  */

    43 /**

    44  * Breakpoint mixins

    45  */

    46 /**

    47  * Long content fade mixin

    48  *

    49  * Creates a fading overlay to signify that the content is longer

    50  * than the space allows.

    51  */

    52 /**

    53  * Focus styles.

    54  */

    55 /**

    56  * Applies editor left position to the selector passed as argument

    57  */

    58 /**

    59  * Styles that are reused verbatim in a few places

    60  */

    61 /**

    62  * Allows users to opt-out of animations via OS-level preferences.

    63  */

    64 /**

    65  * Reset default styles for JavaScript UI based pages.

    66  * This is a WP-admin agnostic reset

    67  */

    68 /**

    69  * Reset the WP Admin page styles for Gutenberg-like pages.

    70  */

    71 .wp-block-media-text {

    72   /*!rtl:begin:ignore*/

    73   direction: ltr;

    74   /*!rtl:end:ignore*/

    75   display: grid;

    76   grid-template-columns: 50% 1fr;

    77   grid-template-rows: auto;

    78 }

    79 .wp-block-media-text.has-media-on-the-right {

    80   grid-template-columns: 1fr 50%;

    81 }

    82 

    83 .wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__content,

    84 .wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__media {

    85   align-self: start;

    86 }

    87 

    88 .wp-block-media-text .wp-block-media-text__content,

    89 .wp-block-media-text .wp-block-media-text__media,

    90 .wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__content,

    91 .wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__media {

    92   align-self: center;

    93 }

    94 

    95 .wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__content,

    96 .wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__media {

    97   align-self: end;

    98 }

    99 

   100 .wp-block-media-text .wp-block-media-text__media {

   101   /*!rtl:begin:ignore*/

   102   grid-column: 1;

   103   grid-row: 1;

   104   /*!rtl:end:ignore*/

   105   margin: 0;

   106 }

   107 

   108 .wp-block-media-text .wp-block-media-text__content {

   109   direction: ltr;

   110   /*!rtl:begin:ignore*/

   111   grid-column: 2;

   112   grid-row: 1;

   113   /*!rtl:end:ignore*/

   114   padding: 0 8% 0 8%;

   115   word-break: break-word;

   116 }

   117 

   118 .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {

   119   /*!rtl:begin:ignore*/

   120   grid-column: 2;

   121   grid-row: 1;

   122   /*!rtl:end:ignore*/

   123 }

   124 

   125 .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {

   126   /*!rtl:begin:ignore*/

   127   grid-column: 1;

   128   grid-row: 1;

   129   /*!rtl:end:ignore*/

   130 }

   131 

   132 .wp-block-media-text__media img,

   133 .wp-block-media-text__media video {

   134   max-width: unset;

   135   width: 100%;

   136   vertical-align: middle;

   137 }

   138 

   139 .wp-block-media-text.is-image-fill .wp-block-media-text__media {

   140   height: 100%;

   141   min-height: 250px;

   142   background-size: cover;

   143 }

   144 

   145 .wp-block-media-text.is-image-fill .wp-block-media-text__media > a {

   146   display: block;

   147   height: 100%;

   148 }

   149 

   150 .wp-block-media-text.is-image-fill .wp-block-media-text__media img {

   151   position: absolute;

   152   width: 1px;

   153   height: 1px;

   154   padding: 0;

   155   margin: -1px;

   156   overflow: hidden;

   157   clip: rect(0, 0, 0, 0);

   158   border: 0;

   159 }

   160 

   161 /*

   162 * Here we here not able to use a mobile first CSS approach.

   163 * Custom widths are set using inline styles, and on mobile,

   164 * we need 100% width, so we use important to overwrite the inline style.

   165 * If the style were set on mobile first, on desktop styles,

   166 * we would have no way of setting the style again to the inline style.

   167 */

   168 @media (max-width: 600px) {

   169   .wp-block-media-text.is-stacked-on-mobile {

   170     grid-template-columns: 100% !important;

   171   }

   172   .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {

   173     grid-column: 1;

   174     grid-row: 1;

   175   }

   176   .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {

   177     grid-column: 1;

   178     grid-row: 2;

   179   }

   180 }