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 direction: ltr; |
|
79 display: grid; |
|
80 grid-template-columns: 50% 1fr; |
|
81 grid-template-rows: auto; |
|
82 } |
7 } |
83 .wp-block-media-text.has-media-on-the-right { |
8 .wp-block-media-text.has-media-on-the-right{ |
84 grid-template-columns: 1fr 50%; |
9 grid-template-columns:1fr 50%; |
85 } |
10 } |
86 |
11 |
87 .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{ |
88 .wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__media { |
13 align-self:start; |
89 align-self: start; |
|
90 } |
14 } |
91 |
15 |
92 .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{ |
93 .wp-block-media-text .wp-block-media-text__media, |
17 align-self:center; |
94 .wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__content, |
|
95 .wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__media { |
|
96 align-self: center; |
|
97 } |
18 } |
98 |
19 |
99 .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{ |
100 .wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__media { |
21 align-self:end; |
101 align-self: end; |
|
102 } |
22 } |
103 |
23 |
104 .wp-block-media-text .wp-block-media-text__media { |
24 .wp-block-media-text>.wp-block-media-text__media{ |
105 grid-column: 1; |
25 grid-column:1; |
106 grid-row: 1; |
26 grid-row:1; |
107 margin: 0; |
27 margin:0; |
108 } |
28 } |
109 |
29 |
110 .wp-block-media-text .wp-block-media-text__content { |
30 .wp-block-media-text>.wp-block-media-text__content{ |
111 direction: rtl; |
31 direction:rtl; |
112 grid-column: 2; |
32 grid-column:2; |
113 grid-row: 1; |
33 grid-row:1; |
114 padding: 0 8% 0 8%; |
34 padding:0 8%; |
115 word-break: break-word; |
35 word-break:break-word; |
116 } |
36 } |
117 |
37 |
118 .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{ |
119 grid-column: 2; |
39 grid-column:2; |
120 grid-row: 1; |
40 grid-row:1; |
121 } |
41 } |
122 |
42 |
123 .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{ |
124 grid-column: 1; |
44 grid-column:1; |
125 grid-row: 1; |
45 grid-row:1; |
126 } |
46 } |
127 |
47 |
128 .wp-block-media-text__media img, |
48 .wp-block-media-text__media img,.wp-block-media-text__media video{ |
129 .wp-block-media-text__media video { |
49 height:auto; |
130 height: auto; |
50 max-width:unset; |
131 max-width: unset; |
51 vertical-align:middle; |
132 width: 100%; |
52 width:100%; |
133 vertical-align: middle; |
|
134 } |
53 } |
135 |
54 |
136 .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{ |
137 height: 100%; |
56 background-size:cover; |
138 min-height: 250px; |
57 height:100%; |
139 background-size: cover; |
58 min-height:250px; |
140 } |
59 } |
141 |
60 |
142 .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{ |
143 display: block; |
62 display:block; |
144 height: 100%; |
63 height:100%; |
145 } |
64 } |
146 |
65 |
147 .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{ |
148 position: absolute; |
67 height:1px; |
149 width: 1px; |
68 margin:-1px; |
150 height: 1px; |
69 overflow:hidden; |
151 padding: 0; |
70 padding:0; |
152 margin: -1px; |
71 position:absolute; |
153 overflow: hidden; |
72 width:1px; |
154 clip: rect(0, 0, 0, 0); |
73 clip:rect(0, 0, 0, 0); |
155 border: 0; |
74 border:0; |
156 } |
75 } |
157 |
76 @media (max-width:600px){ |
158 /* |
77 .wp-block-media-text.is-stacked-on-mobile{ |
159 * Here we here not able to use a mobile first CSS approach. |
78 grid-template-columns:100% !important; |
160 * Custom widths are set using inline styles, and on mobile, |
|
161 * we need 100% width, so we use important to overwrite the inline style. |
|
162 * If the style were set on mobile first, on desktop styles, |
|
163 * we would have no way of setting the style again to the inline style. |
|
164 */ |
|
165 @media (max-width: 600px) { |
|
166 .wp-block-media-text.is-stacked-on-mobile { |
|
167 grid-template-columns: 100% !important; |
|
168 } |
79 } |
169 .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{ |
170 grid-column: 1; |
81 grid-column:1; |
171 grid-row: 1; |
82 grid-row:1; |
172 } |
83 } |
173 .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{ |
174 grid-column: 1; |
85 grid-column:1; |
175 grid-row: 2; |
86 grid-row:2; |
176 } |
87 } |
177 } |
88 } |