gutenberg / build / styles / block-library / post-featured-image / editor.css

editor.css in Gutenberg trunk, at build/styles/block-library/post-featured-image/editor.css

167 lines 5.9 KB

Raw Download Zip

1	/**
2	* Colors
3	*/
4	/**
5	* SCSS Variables.
6	*
7	* Please use variables from this sheet to ensure consistency across the UI.
8	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
9	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
10	*/
11	/**
12	* Fonts & basic variables.
13	*/
14	/**
15	* Typography
16	*/
17	/**
18	* Grid System.
19	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
20	*/
21	/**
22	* Radius scale.
23	*/
24	/**
25	* Elevation scale.
26	*/
27	/**
28	* Dimensions.
29	*/
30	/**
31	* Mobile specific styles
32	*/
33	/**
34	* Editor styles.
35	*/
36	/**
37	* Block & Editor UI.
38	*/
39	/**
40	* Block paddings.
41	*/
42	/**
43	* React Native specific.
44	* These variables do not appear to be used anywhere else.
45	*/
46	.wp-block-post-featured-image .block-editor-media-placeholder {
47	z-index: 1;
48	backdrop-filter: none;
49	}
50	.wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
51	.wp-block-post-featured-image .components-placeholder {
52	justify-content: center;
53	align-items: center;
54	padding: 0;
55	display: flex;
56	}
57	.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-form-file-upload,
58	.wp-block-post-featured-image .components-placeholder .components-form-file-upload {
59	display: none;
60	}
61	.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button,
62	.wp-block-post-featured-image .components-placeholder .components-button {
63	margin: auto;
64	padding: 0;
65	display: flex;
66	justify-content: center;
67	align-items: center;
68	width: 48px;
69	height: 48px;
70	border-radius: 50%;
71	position: relative;
72	background: var(--wp-admin-theme-color);
73	border-color: var(--wp-admin-theme-color);
74	border-style: solid;
75	color: #fff;
76	}
77	.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button > svg,
78	.wp-block-post-featured-image .components-placeholder .components-button > svg {
79	color: inherit;
80	}
81	.wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
82	.wp-block-post-featured-image .components-placeholder {
83	min-height: 200px;
84	}
85	.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where(.has-border-color),
86	.wp-block-post-featured-image .components-placeholder:where(.has-border-color),
87	.wp-block-post-featured-image img:where(.has-border-color) {
88	border-style: solid;
89	}
90	.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-top-color]),
91	.wp-block-post-featured-image .components-placeholder:where([style*=border-top-color]),
92	.wp-block-post-featured-image img:where([style*=border-top-color]) {
93	border-top-style: solid;
94	}
95	.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-right-color]),
96	.wp-block-post-featured-image .components-placeholder:where([style*=border-right-color]),
97	.wp-block-post-featured-image img:where([style*=border-right-color]) {
98	border-right-style: solid;
99	}
100	.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-bottom-color]),
101	.wp-block-post-featured-image .components-placeholder:where([style*=border-bottom-color]),
102	.wp-block-post-featured-image img:where([style*=border-bottom-color]) {
103	border-bottom-style: solid;
104	}
105	.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-left-color]),
106	.wp-block-post-featured-image .components-placeholder:where([style*=border-left-color]),
107	.wp-block-post-featured-image img:where([style*=border-left-color]) {
108	border-left-style: solid;
109	}
110	.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-width]),
111	.wp-block-post-featured-image .components-placeholder:where([style*=border-width]),
112	.wp-block-post-featured-image img:where([style*=border-width]) {
113	border-style: solid;
114	}
115	.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-top-width]),
116	.wp-block-post-featured-image .components-placeholder:where([style*=border-top-width]),
117	.wp-block-post-featured-image img:where([style*=border-top-width]) {
118	border-top-style: solid;
119	}
120	.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-right-width]),
121	.wp-block-post-featured-image .components-placeholder:where([style*=border-right-width]),
122	.wp-block-post-featured-image img:where([style*=border-right-width]) {
123	border-right-style: solid;
124	}
125	.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-bottom-width]),
126	.wp-block-post-featured-image .components-placeholder:where([style*=border-bottom-width]),
127	.wp-block-post-featured-image img:where([style*=border-bottom-width]) {
128	border-bottom-style: solid;
129	}
130	.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-left-width]),
131	.wp-block-post-featured-image .components-placeholder:where([style*=border-left-width]),
132	.wp-block-post-featured-image img:where([style*=border-left-width]) {
133	border-left-style: solid;
134	}
135	.wp-block-post-featured-image[style*=height] .components-placeholder {
136	min-height: 48px;
137	min-width: 48px;
138	height: 100%;
139	width: 100%;
140	}
141	.wp-block-post-featured-image > a {
142	pointer-events: none;
143	}
144	.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-button,
145	.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__instructions,
146	.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__label {
147	opacity: 1;
148	pointer-events: auto;
149	}
150	.wp-block-post-featured-image.is-transient {
151	position: relative;
152	}
153	.wp-block-post-featured-image.is-transient img {
154	opacity: 0.3;
155	}
156	.wp-block-post-featured-image.is-transient .components-spinner {
157	position: absolute;
158	top: 50%;
159	left: 50%;
160	transform: translate(-50%, -50%);
161	}
162
163	div[data-type="core/post-featured-image"] img {
164	max-width: 100%;
165	height: auto;
166	display: block;
167	}