← All changes | build/styles/customize-widgets/style.css +47 -15 23.2.2 → trunk View file →

		@@ -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
		@@ -123,8 +129,25 @@
123	129	#customize-theme-controls .customize-pane-child.control-section-sidebar.is-sub-section-open {
124	130	transform: translateX(-100%);
125	131	}
126	132
	133	+.customize-widgets-error-boundary {
	134	+ font-family: var(--wpds-typography-font-family-body, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
	135	+ padding: var(--wpds-dimension-padding-md, 12px);
	136	+}
	137	+
	138	+.customize-widgets-error-boundary__report {
	139	+ max-height: 420px;
	140	+ overflow: auto;
	141	+ overflow-anchor: none;
	142	+}
	143	+
	144	+.customize-widgets-error-boundary__report-section {
	145	+ margin: 0;
	146	+ white-space: pre-wrap;
	147	+ overflow-wrap: break-word;
	148	+}
	149	+
127	150	@media (min-width: 600px) {
128	151	.customize-widgets-header {
129	152	margin-bottom: 44px;
130	153	}
		@@ -145,34 +168,43 @@
145	168	display: flex;
146	169	border: none;
147	170	width: 100%;
148	171	align-items: center;
	172	+ gap: 8px;
	173	+ padding: 0 12px;
149	174	}
	175	+.customize-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon,
	176	+.customize-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon {
	177	+ height: 32px;
	178	+ min-width: 32px;
	179	+ padding: 4px;
	180	+}
	181	+.customize-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon.is-pressed,
	182	+.customize-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon.is-pressed {
	183	+ background: #1e1e1e;
	184	+}
	185	+.customize-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon:focus:not(:active),
	186	+.customize-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon:focus:not(:active) {
	187	+ outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
	188	+ outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
	189	+}
	190	+.customize-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon::before,
	191	+.customize-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon::before {
	192	+ display: none;
	193	+}
150	194	.customize-widgets-header-toolbar .customize-widgets-header-toolbar__inserter-toggle.components-button.has-icon {
151	195	border-radius: 2px;
152	196	color: #fff;
153		- padding: 0;
154		- min-width: 32px;
155		- height: 32px;
156	197	margin: 12px 0 12px auto;
157	198	}
158		-.customize-widgets-header-toolbar .customize-widgets-header-toolbar__inserter-toggle.components-button.has-icon::before {
159		- content: none;
160		-}
161	199	@media not (prefers-reduced-motion) {
162	200	.customize-widgets-header-toolbar .customize-widgets-header-toolbar__inserter-toggle.components-button.has-icon svg {
163	201	transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
164	202	}
165	203	}
166		-.customize-widgets-header-toolbar .customize-widgets-header-toolbar__inserter-toggle.components-button.has-icon.is-pressed {
167		- background: #1e1e1e;
168		-}
169	204	.customize-widgets-header-toolbar .customize-widgets-header-toolbar__inserter-toggle.components-button.has-icon.is-pressed svg {
170	205	transform: rotate(45deg);
171	206	}
172		-.customize-widgets-header-toolbar .components-button.has-icon.customize-widgets-editor-history-button.redo-button {
173		- margin-left: -12px;
174		-}
175	207
176	208	#customize-sidebar-outer-content {
177	209	width: auto;
178	210	min-width: 100%;
		@@ -210,9 +242,9 @@
210	242	margin: 0 0 2rem 0;
211	243	}
212	244	.customize-widgets-keyboard-shortcut-help-modal__section-title {
213	245	font-size: 0.9rem;
214		- font-weight: 600;
	246	+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
215	247	}
216	248	.customize-widgets-keyboard-shortcut-help-modal__shortcut {
217	249	display: flex;
218	250	align-items: baseline;
		@@ -226,9 +258,9 @@
226	258	.customize-widgets-keyboard-shortcut-help-modal__shortcut:empty {
227	259	display: none;
228	260	}
229	261	.customize-widgets-keyboard-shortcut-help-modal__shortcut-term {
230		- font-weight: 600;
	262	+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
231	263	margin: 0 0 0 1rem;
232	264	text-align: right;
233	265	}
234	266	.customize-widgets-keyboard-shortcut-help-modal__shortcut-description {
		@@ -276,9 +308,9 @@
276	308	height: auto;
277	309	}
278	310	.wrap .customize-widgets-welcome-guide__heading {
279	311	font-size: 18px;
280		- font-weight: 600;
	312	+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
281	313	}
282	314	.customize-widgets-welcome-guide__text {
283	315	line-height: 1.7;
284	316	}