← All changes | build/styles/block-library/latest-posts/style.css +26 -15 23.3.1 → trunk View file →

		@@ -1,5 +1,8 @@
1	1	/**
	2	+ * Breakpoints & Media Queries
	3	+ */
	4	+/**
2	5	* Typography
3	6	*/
4	7	/**
5	8	* SCSS Variables.
		@@ -46,11 +49,8 @@
46	49	* React Native specific.
47	50	* These variables do not appear to be used anywhere else.
48	51	*/
49	52	/**
50		- * Breakpoints & Media Queries
51		- */
52		-/**
53	53	* Converts a hex value into the rgb equivalent.
54	54	*
55	55	* @param {string} hex - the hexadecimal value to convert
56	56	* @return {string} comma separated rgb values
		@@ -67,8 +67,14 @@
67	67	/**
68	68	* Focus styles.
69	69	*/
70	70	/**
	71	+ * Standard focus rings for the WordPress Design System.
	72	+ *
	73	+ * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
	74	+ * e.g. `&:focus { @include outset-ring__focus(); }`.
	75	+ */
	76	+/**
71	77	* Applies editor left position to the selector passed as argument
72	78	*/
73	79	/**
74	80	* Styles that are reused verbatim in a few places
		@@ -104,49 +110,54 @@
104	110	.wp-block-latest-posts.wp-block-latest-posts__list li {
105	111	clear: both;
106	112	overflow-wrap: break-word;
107	113	}
108		-.wp-block-latest-posts.is-grid {
	114	+.wp-block-latest-posts.is-grid:not(.is-layout-grid) {
109	115	display: flex;
110	116	flex-wrap: wrap;
111	117	}
112		-.wp-block-latest-posts.is-grid li {
	118	+.wp-block-latest-posts.is-grid:not(.is-layout-grid) li {
113	119	margin: 0 1.25em 1.25em 0;
114	120	width: 100%;
115	121	}
116	122	@media (min-width: 600px) {
117		- .wp-block-latest-posts.columns-2 li {
	123	+ .wp-block-latest-posts.columns-2:not(.is-layout-grid) li {
118	124	width: calc(100% / 2 - 1.25em + 1.25em / 2);
119	125	}
120		- .wp-block-latest-posts.columns-2 li:nth-child(2n) {
	126	+ .wp-block-latest-posts.columns-2:not(.is-layout-grid) li:nth-child(2n) {
121	127	margin-right: 0;
122	128	}
123		- .wp-block-latest-posts.columns-3 li {
	129	+ .wp-block-latest-posts.columns-3:not(.is-layout-grid) li {
124	130	width: calc(100% / 3 - 1.25em + 1.25em / 3);
125	131	}
126		- .wp-block-latest-posts.columns-3 li:nth-child(3n) {
	132	+ .wp-block-latest-posts.columns-3:not(.is-layout-grid) li:nth-child(3n) {
127	133	margin-right: 0;
128	134	}
129		- .wp-block-latest-posts.columns-4 li {
	135	+ .wp-block-latest-posts.columns-4:not(.is-layout-grid) li {
130	136	width: calc(100% / 4 - 1.25em + 1.25em / 4);
131	137	}
132		- .wp-block-latest-posts.columns-4 li:nth-child(4n) {
	138	+ .wp-block-latest-posts.columns-4:not(.is-layout-grid) li:nth-child(4n) {
133	139	margin-right: 0;
134	140	}
135		- .wp-block-latest-posts.columns-5 li {
	141	+ .wp-block-latest-posts.columns-5:not(.is-layout-grid) li {
136	142	width: calc(100% / 5 - 1.25em + 1.25em / 5);
137	143	}
138		- .wp-block-latest-posts.columns-5 li:nth-child(5n) {
	144	+ .wp-block-latest-posts.columns-5:not(.is-layout-grid) li:nth-child(5n) {
139	145	margin-right: 0;
140	146	}
141		- .wp-block-latest-posts.columns-6 li {
	147	+ .wp-block-latest-posts.columns-6:not(.is-layout-grid) li {
142	148	width: calc(100% / 6 - 1.25em + 1.25em / 6);
143	149	}
144		- .wp-block-latest-posts.columns-6 li:nth-child(6n) {
	150	+ .wp-block-latest-posts.columns-6:not(.is-layout-grid) li:nth-child(6n) {
145	151	margin-right: 0;
146	152	}
147	153	}
148	154
	155	+@media (max-width: 600px) {
	156	+ .wp-block-latest-posts-is-layout-grid[class*=columns-]:not(.has-native-responsive-grid) {
	157	+ grid-template-columns: 1fr;
	158	+ }
	159	+}
149	160	:root :where(.wp-block-latest-posts.is-grid) {
150	161	padding: 0;
151	162	}
152	163	:root :where(.wp-block-latest-posts.wp-block-latest-posts__list) {