1 /** |
1 .wp-block-media-text{ |
2 * Colors |
2 box-sizing:border-box; |
3 */ |
3 direction:ltr; |
4 /** |
4 display:grid; |
5 * Breakpoints & Media Queries |
5 grid-template-columns:50% 1fr; |
6 */ |
6 grid-template-rows:auto; |
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 * Converts a hex value into the rgb equivalent. |
|
45 * |
|
46 * @param {string} hex - the hexadecimal value to convert |
|
47 * @return {string} comma separated rgb values |
|
48 */ |
|
49 /** |
|
50 * Breakpoint mixins |
|
51 */ |
|
52 /** |
|
53 * Long content fade mixin |
|
54 * |
|
55 * Creates a fading overlay to signify that the content is longer |
|
56 * than the space allows. |
|
57 */ |
|
58 /** |
|
59 * Focus styles. |
|
60 */ |
|
61 /** |
|
62 * Applies editor left position to the selector passed as argument |
|
63 */ |
|
64 /** |
|
65 * Styles that are reused verbatim in a few places |
|
66 */ |
|
67 /** |
|
68 * Allows users to opt-out of animations via OS-level preferences. |
|
69 */ |
|
70 /** |
|
71 * Reset default styles for JavaScript UI based pages. |
|
72 * This is a WP-admin agnostic reset |
|
73 */ |
|
74 /** |
|
75 * Reset the WP Admin page styles for Gutenberg-like pages. |
|
76 */ |
|
77 .wp-block-media-text { |
|
78 /*!rtl:begin:ignore*/ |
|
79 direction: ltr; |
|
80 /*!rtl:end:ignore*/ |
|
81 display: grid; |
|
82 grid-template-columns: 50% 1fr; |
|
83 grid-template-rows: auto; |
|
84 } |
7 } |
85 .wp-block-media-text.has-media-on-the-right { |
8 .wp-block-media-text.has-media-on-the-right{ |
86 grid-template-columns: 1fr 50%; |
9 grid-template-columns:1fr 50%; |
87 } |
10 } |
88 |
11 |
89 .wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__content, |
12 .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{ |
90 .wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__media { |
13 align-self:start; |
91 align-self: start; |
|
92 } |
14 } |
93 |
15 |
94 .wp-block-media-text .wp-block-media-text__content, |
16 .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{ |
95 .wp-block-media-text .wp-block-media-text__media, |
17 align-self:center; |
96 .wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__content, |
|
97 .wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__media { |
|
98 align-self: center; |
|
99 } |
18 } |
100 |
19 |
101 .wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__content, |
20 .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{ |
102 .wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__media { |
21 align-self:end; |
103 align-self: end; |
|
104 } |
22 } |
105 |
23 |
106 .wp-block-media-text .wp-block-media-text__media { |
24 .wp-block-media-text>.wp-block-media-text__media{ |
107 /*!rtl:begin:ignore*/ |
25 grid-column:1; |
108 grid-column: 1; |
26 grid-row:1; |
109 grid-row: 1; |
27 margin:0; |
110 /*!rtl:end:ignore*/ |
|
111 margin: 0; |
|
112 } |
28 } |
113 |
29 |
114 .wp-block-media-text .wp-block-media-text__content { |
30 .wp-block-media-text>.wp-block-media-text__content{ |
115 direction: ltr; |
31 direction:ltr; |
116 /*!rtl:begin:ignore*/ |
32 grid-column:2; |
117 grid-column: 2; |
33 grid-row:1; |
118 grid-row: 1; |
34 padding:0 8%; |
119 /*!rtl:end:ignore*/ |
35 word-break:break-word; |
120 padding: 0 8% 0 8%; |
|
121 word-break: break-word; |
|
122 } |
36 } |
123 |
37 |
124 .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { |
38 .wp-block-media-text.has-media-on-the-right>.wp-block-media-text__media{ |
125 /*!rtl:begin:ignore*/ |
39 grid-column:2; |
126 grid-column: 2; |
40 grid-row:1; |
127 grid-row: 1; |
|
128 /*!rtl:end:ignore*/ |
|
129 } |
41 } |
130 |
42 |
131 .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { |
43 .wp-block-media-text.has-media-on-the-right>.wp-block-media-text__content{ |
132 /*!rtl:begin:ignore*/ |
44 grid-column:1; |
133 grid-column: 1; |
45 grid-row:1; |
134 grid-row: 1; |
|
135 /*!rtl:end:ignore*/ |
|
136 } |
46 } |
137 |
47 |
138 .wp-block-media-text__media img, |
48 .wp-block-media-text__media img,.wp-block-media-text__media video{ |
139 .wp-block-media-text__media video { |
49 height:auto; |
140 height: auto; |
50 max-width:unset; |
141 max-width: unset; |
51 vertical-align:middle; |
142 width: 100%; |
52 width:100%; |
143 vertical-align: middle; |
|
144 } |
53 } |
145 |
54 |
146 .wp-block-media-text.is-image-fill .wp-block-media-text__media { |
55 .wp-block-media-text.is-image-fill>.wp-block-media-text__media{ |
147 height: 100%; |
56 background-size:cover; |
148 min-height: 250px; |
57 height:100%; |
149 background-size: cover; |
58 min-height:250px; |
150 } |
59 } |
151 |
60 |
152 .wp-block-media-text.is-image-fill .wp-block-media-text__media > a { |
61 .wp-block-media-text.is-image-fill>.wp-block-media-text__media>a{ |
153 display: block; |
62 display:block; |
154 height: 100%; |
63 height:100%; |
155 } |
64 } |
156 |
65 |
157 .wp-block-media-text.is-image-fill .wp-block-media-text__media img { |
66 .wp-block-media-text.is-image-fill>.wp-block-media-text__media img{ |
158 position: absolute; |
67 height:1px; |
159 width: 1px; |
68 margin:-1px; |
160 height: 1px; |
69 overflow:hidden; |
161 padding: 0; |
70 padding:0; |
162 margin: -1px; |
71 position:absolute; |
163 overflow: hidden; |
72 width:1px; |
164 clip: rect(0, 0, 0, 0); |
73 clip:rect(0, 0, 0, 0); |
165 border: 0; |
74 border:0; |
166 } |
75 } |
167 |
76 @media (max-width:600px){ |
168 /* |
77 .wp-block-media-text.is-stacked-on-mobile{ |
169 * Here we here not able to use a mobile first CSS approach. |
78 grid-template-columns:100% !important; |
170 * Custom widths are set using inline styles, and on mobile, |
|
171 * we need 100% width, so we use important to overwrite the inline style. |
|
172 * If the style were set on mobile first, on desktop styles, |
|
173 * we would have no way of setting the style again to the inline style. |
|
174 */ |
|
175 @media (max-width: 600px) { |
|
176 .wp-block-media-text.is-stacked-on-mobile { |
|
177 grid-template-columns: 100% !important; |
|
178 } |
79 } |
179 .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media { |
80 .wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__media{ |
180 grid-column: 1; |
81 grid-column:1; |
181 grid-row: 1; |
82 grid-row:1; |
182 } |
83 } |
183 .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { |
84 .wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__content{ |
184 grid-column: 1; |
85 grid-column:1; |
185 grid-row: 2; |
86 grid-row:2; |
186 } |
87 } |
187 } |
88 } |