style.css in Gutenberg 23.2.0, at build/styles/block-library/media-text/style.css

139 lines 3.4 KB Raw Download Zip

1	/**
2	* Breakpoints & Media Queries
3	*/
4	.wp-block-media-text {
5	/rtl:begin:ignore/
6	direction: ltr;
7	/rtl:end:ignore/
8	display: grid;
9	grid-template-columns: 50% 1fr;
10	grid-template-rows: auto;
11	box-sizing: border-box;
12	}
13	.wp-block-media-text.has-media-on-the-right {
14	grid-template-columns: 1fr 50%;
15	}
16
17	.wp-block-media-text.is-vertically-aligned-top > .wp-block-media-text__content,
18	.wp-block-media-text.is-vertically-aligned-top > .wp-block-media-text__media {
19	align-self: start;
20	}
21
22	.wp-block-media-text > .wp-block-media-text__content,
23	.wp-block-media-text > .wp-block-media-text__media,
24	.wp-block-media-text.is-vertically-aligned-center > .wp-block-media-text__content,
25	.wp-block-media-text.is-vertically-aligned-center > .wp-block-media-text__media {
26	align-self: center;
27	}
28
29	.wp-block-media-text.is-vertically-aligned-bottom > .wp-block-media-text__content,
30	.wp-block-media-text.is-vertically-aligned-bottom > .wp-block-media-text__media {
31	align-self: end;
32	}
33
34	.wp-block-media-text > .wp-block-media-text__media {
35	/rtl:begin:ignore/
36	grid-column: 1;
37	grid-row: 1;
38	/rtl:end:ignore/
39	margin: 0;
40	}
41
42	.wp-block-media-text > .wp-block-media-text__content {
43	direction: ltr;
44	/rtl:begin:ignore/
45	grid-column: 2;
46	grid-row: 1;
47	/rtl:end:ignore/
48	padding: 0 8% 0 8%;
49	word-break: break-word;
50	}
51
52	.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
53	/rtl:begin:ignore/
54	grid-column: 2;
55	grid-row: 1;
56	/rtl:end:ignore/
57	}
58
59	.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
60	/rtl:begin:ignore/
61	grid-column: 1;
62	grid-row: 1;
63	/rtl:end:ignore/
64	}
65
66	.wp-block-media-text__media a {
67	display: block;
68	}
69
70	.wp-block-media-text__media img,
71	.wp-block-media-text__media video {
72	height: auto;
73	max-width: unset;
74	width: 100%;
75	vertical-align: middle;
76	}
77
78	/* `is-image-fill` is deprecated and the styles are kept for backwards compatibility. */
79	.wp-block-media-text.is-image-fill > .wp-block-media-text__media {
80	height: 100%;
81	min-height: 250px;
82	background-size: cover;
83	}
84
85	.wp-block-media-text.is-image-fill > .wp-block-media-text__media > a {
86	display: block;
87	height: 100%;
88	}
89
90	.wp-block-media-text.is-image-fill > .wp-block-media-text__media img {
91	position: absolute;
92	width: 1px;
93	height: 1px;
94	padding: 0;
95	margin: -1px;
96	overflow: hidden;
97	clip: rect(0, 0, 0, 0);
98	border: 0;
99	}
100
101	/* Image fill for versions 8 and onwards */
102	.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
103	position: relative;
104	height: 100%;
105	min-height: 250px;
106	}
107
108	.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media > a {
109	display: block;
110	height: 100%;
111	}
112
113	.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
114	position: absolute;
115	width: 100%;
116	height: 100%;
117	object-fit: cover;
118	}
119
120	/*
121	* Here we here not able to use a mobile first CSS approach.
122	* Custom widths are set using inline styles, and on mobile,
123	* we need 100% width, so we use important to overwrite the inline style.
124	* If the style were set on mobile first, on desktop styles,
125	* we would have no way of setting the style again to the inline style.
126	*/
127	@media (max-width: 600px) {
128	.wp-block-media-text.is-stacked-on-mobile {
129	grid-template-columns: 100% !important;
130	}
131	.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media {
132	grid-column: 1;
133	grid-row: 1;
134	}
135	.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
136	grid-column: 1;
137	grid-row: 2;
138	}
139	}