1 /** |
1 .editor-styles-wrapper .wp-block-navigation ul{ |
2 * Colors |
2 margin-bottom:0; |
3 */ |
3 margin-left:0; |
4 /** |
4 margin-top:0; |
5 * Breakpoints & Media Queries |
5 padding-left:0; |
6 */ |
6 } |
7 /** |
7 .editor-styles-wrapper .wp-block-navigation .wp-block-navigation-item.wp-block{ |
8 * SCSS Variables. |
8 margin:revert; |
9 * |
9 } |
10 * Please use variables from this sheet to ensure consistency across the UI. |
10 |
11 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. |
11 .wp-block-navigation-item__label{ |
12 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. |
12 display:inline; |
13 */ |
13 } |
14 /** |
14 .wp-block-navigation-item,.wp-block-navigation__container{ |
15 * Colors |
15 background-color:inherit; |
16 */ |
16 } |
17 /** |
17 |
18 * Fonts & basic variables. |
18 .wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover>.wp-block-navigation__submenu-container{ |
19 */ |
19 opacity:0; |
20 /** |
20 visibility:hidden; |
21 * Grid System. |
21 } |
22 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ |
22 |
23 */ |
23 .has-child.has-child-selected>.wp-block-navigation__submenu-container,.has-child.is-selected>.wp-block-navigation__submenu-container{ |
24 /** |
24 display:flex; |
25 * Dimensions. |
25 opacity:1; |
26 */ |
26 visibility:visible; |
27 /** |
27 } |
28 * Shadows. |
28 |
29 */ |
29 .is-dragging-components-draggable .has-child.is-dragging-within>.wp-block-navigation__submenu-container{ |
30 /** |
30 opacity:1; |
31 * Editor widths. |
31 visibility:visible; |
32 */ |
32 } |
33 /** |
33 |
34 * Block & Editor UI. |
34 .is-editing>.wp-block-navigation__container{ |
35 */ |
35 display:flex; |
36 /** |
36 flex-direction:column; |
37 * Block paddings. |
37 opacity:1; |
38 */ |
38 visibility:visible; |
39 /** |
39 } |
40 * React Native specific. |
40 |
41 * These variables do not appear to be used anywhere else. |
41 .is-dragging-components-draggable .wp-block-navigation-link>.wp-block-navigation__container{ |
42 */ |
42 opacity:1; |
43 /** |
43 visibility:hidden; |
44 * Converts a hex value into the rgb equivalent. |
44 } |
45 * |
45 .is-dragging-components-draggable .wp-block-navigation-link>.wp-block-navigation__container .block-editor-block-draggable-chip-wrapper{ |
46 * @param {string} hex - the hexadecimal value to convert |
46 visibility:visible; |
47 * @return {string} comma separated rgb values |
47 } |
48 */ |
48 |
49 /** |
49 .is-editing>.wp-block-navigation__submenu-container>.block-list-appender{ |
50 * Breakpoint mixins |
50 display:block; |
51 */ |
51 position:static; |
52 /** |
52 width:100%; |
53 * Long content fade mixin |
53 } |
54 * |
54 .is-editing>.wp-block-navigation__submenu-container>.block-list-appender .block-editor-button-block-appender{ |
55 * Creates a fading overlay to signify that the content is longer |
55 background:#1e1e1e; |
56 * than the space allows. |
56 border-radius:2px; |
57 */ |
57 color:#fff; |
58 /** |
58 margin-left:auto; |
59 * Focus styles. |
59 margin-right:0; |
60 */ |
60 padding:0; |
61 /** |
61 width:24px; |
62 * Applies editor left position to the selector passed as argument |
62 } |
63 */ |
63 |
64 /** |
64 .wp-block-navigation__submenu-container .block-list-appender{ |
65 * Styles that are reused verbatim in a few places |
65 display:none; |
66 */ |
66 } |
67 /** |
67 .block-library-colors-selector{ |
68 * Allows users to opt-out of animations via OS-level preferences. |
68 width:auto; |
69 */ |
69 } |
70 /** |
70 .block-library-colors-selector .block-library-colors-selector__toggle{ |
71 * Reset default styles for JavaScript UI based pages. |
71 display:block; |
72 * This is a WP-admin agnostic reset |
72 margin:0 auto; |
73 */ |
73 padding:3px; |
74 /** |
74 width:auto; |
75 * Reset the WP Admin page styles for Gutenberg-like pages. |
75 } |
76 */ |
76 .block-library-colors-selector .block-library-colors-selector__icon-container{ |
77 /** |
77 align-items:center; |
78 * Editor only CSS. |
78 border-radius:4px; |
79 */ |
79 display:flex; |
80 .editor-styles-wrapper .wp-block-navigation ul { |
80 height:30px; |
81 margin-top: 0; |
81 margin:0 auto; |
82 margin-bottom: 0; |
82 padding:3px; |
83 margin-left: 0; |
83 position:relative; |
84 padding-left: 0; |
84 } |
85 } |
85 .block-library-colors-selector .block-library-colors-selector__state-selection{ |
86 .editor-styles-wrapper .wp-block-navigation .wp-block-navigation-item.wp-block { |
86 border-radius:11px; |
87 margin: revert; |
87 box-shadow:inset 0 0 0 1px #0003; |
88 } |
88 height:22px; |
89 |
89 line-height:20px; |
90 .wp-block-navigation-item__label { |
90 margin-left:auto; |
91 display: inline; |
91 margin-right:auto; |
92 } |
92 min-height:22px; |
93 |
93 min-width:22px; |
94 /** |
94 padding:2px; |
95 * Submenus. |
95 width:22px; |
96 */ |
96 } |
97 .wp-block-navigation__container.is-parent-of-selected-block { |
97 .block-library-colors-selector .block-library-colors-selector__state-selection>svg{ |
98 visibility: visible; |
98 min-width:auto !important; |
99 opacity: 1; |
99 } |
100 overflow: visible; |
100 .block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color>svg,.block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color>svg path{ |
101 } |
101 color:inherit; |
102 |
102 } |
103 .wp-block-navigation__container, |
103 |
104 .wp-block-navigation-item { |
104 .block-library-colors-selector__popover .color-palette-controller-container{ |
105 background-color: inherit; |
105 padding:16px; |
106 } |
106 } |
107 |
107 .block-library-colors-selector__popover .components-base-control__label{ |
108 .wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover > .wp-block-navigation__submenu-container { |
108 height:20px; |
109 opacity: 0; |
109 line-height:20px; |
110 visibility: hidden; |
110 } |
111 } |
111 .block-library-colors-selector__popover .component-color-indicator{ |
112 |
112 float:right; |
113 .has-child.is-selected > .wp-block-navigation__submenu-container, .has-child.has-child-selected > .wp-block-navigation__submenu-container { |
113 margin-top:2px; |
114 display: flex; |
114 } |
115 opacity: 1; |
115 .block-library-colors-selector__popover .components-panel__body-title{ |
116 visibility: visible; |
116 display:none; |
117 } |
117 } |
118 |
118 |
119 .is-dragging-components-draggable .has-child.is-dragging-within > .wp-block-navigation__submenu-container { |
119 .wp-block-navigation .wp-block+.block-list-appender .block-editor-button-block-appender{ |
120 opacity: 1; |
120 background-color:#1e1e1e; |
121 visibility: visible; |
121 color:#fff; |
122 } |
122 } |
123 |
123 .wp-block-navigation .wp-block+.block-list-appender .block-editor-button-block-appender.block-editor-button-block-appender.block-editor-button-block-appender{ |
124 .is-editing > .wp-block-navigation__container { |
124 padding:0; |
125 visibility: visible; |
125 } |
126 opacity: 1; |
126 |
127 display: flex; |
127 .wp-block-navigation .wp-block .wp-block .block-editor-button-block-appender{ |
128 flex-direction: column; |
128 background-color:initial; |
129 } |
129 color:#1e1e1e; |
130 |
130 } |
131 .is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container { |
131 @keyframes loadingpulse{ |
132 opacity: 1; |
132 0%{ |
133 visibility: hidden; |
133 opacity:1; |
134 } |
134 } |
135 .is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container .block-editor-block-draggable-chip-wrapper { |
135 50%{ |
136 visibility: visible; |
136 opacity:.5; |
137 } |
137 } |
138 |
138 to{ |
139 .is-editing > .wp-block-navigation__submenu-container > .block-list-appender { |
139 opacity:1; |
140 display: block; |
140 } |
141 position: static; |
141 } |
142 width: 100%; |
142 .components-placeholder.wp-block-navigation-placeholder{ |
143 } |
143 background:none; |
144 .is-editing > .wp-block-navigation__submenu-container > .block-list-appender .block-editor-button-block-appender { |
144 box-shadow:none; |
145 color: #fff; |
145 color:inherit; |
146 background: #1e1e1e; |
146 min-height:0; |
147 padding: 0; |
147 outline:none; |
148 width: 24px; |
148 padding:0; |
149 border-radius: 2px; |
149 } |
150 margin-right: 0; |
150 .components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset{ |
151 margin-left: auto; |
151 font-size:inherit; |
152 } |
152 } |
153 |
153 .components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset .components-button{ |
154 .wp-block-navigation__submenu-container .block-list-appender { |
154 margin-bottom:0; |
155 display: none; |
155 } |
156 } |
156 .wp-block-navigation.is-selected .components-placeholder.wp-block-navigation-placeholder{ |
157 |
157 color:#1e1e1e; |
158 /** |
158 } |
159 * Colors Selector component |
159 |
160 */ |
160 .wp-block-navigation-placeholder__preview{ |
161 .block-library-colors-selector { |
161 align-items:center; |
162 width: auto; |
162 background:#0000; |
163 } |
163 color:currentColor; |
164 .block-library-colors-selector .block-library-colors-selector__toggle { |
164 display:flex; |
165 display: block; |
165 font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; |
166 margin: 0 auto; |
166 font-size:13px; |
167 padding: 3px; |
167 min-width:96px; |
168 width: auto; |
168 } |
169 } |
169 .wp-block-navigation.is-selected .wp-block-navigation-placeholder__preview{ |
170 .block-library-colors-selector .block-library-colors-selector__icon-container { |
170 display:none; |
171 height: 30px; |
171 } |
172 position: relative; |
172 .wp-block-navigation-placeholder__preview:before{ |
173 margin: 0 auto; |
173 border:1px dashed; |
174 padding: 3px; |
174 border-radius:2px; |
175 display: flex; |
175 border-radius:inherit; |
176 align-items: center; |
176 bottom:0; |
177 border-radius: 4px; |
177 content:""; |
178 } |
178 display:block; |
179 .block-library-colors-selector .block-library-colors-selector__state-selection { |
179 left:0; |
180 margin-left: auto; |
180 pointer-events:none; |
181 margin-right: auto; |
181 position:absolute; |
182 border-radius: 11px; |
182 right:0; |
183 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); |
183 top:0; |
184 width: 22px; |
184 } |
185 min-width: 22px; |
185 .wp-block-navigation-placeholder__preview:before:before{ |
186 height: 22px; |
186 background:currentColor; |
187 min-height: 22px; |
187 bottom:0; |
188 line-height: 20px; |
188 content:""; |
189 padding: 2px; |
189 left:0; |
190 } |
190 opacity:.1; |
191 .block-library-colors-selector .block-library-colors-selector__state-selection > svg { |
191 pointer-events:none; |
192 min-width: auto !important; |
192 position:absolute; |
193 } |
193 right:0; |
194 .block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color > svg, |
194 top:0; |
195 .block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color > svg path { |
195 } |
196 color: inherit; |
196 .wp-block-navigation-placeholder__preview>svg{ |
197 } |
197 fill:currentColor; |
198 |
198 } |
199 .block-library-colors-selector__popover .color-palette-controller-container { |
199 |
200 padding: 16px; |
200 .wp-block-navigation.is-vertical .is-medium .components-placeholder__fieldset,.wp-block-navigation.is-vertical .is-small .components-placeholder__fieldset{ |
201 } |
201 min-height:90px; |
202 .block-library-colors-selector__popover .components-base-control__label { |
202 } |
203 height: 20px; |
203 |
204 line-height: 20px; |
204 .wp-block-navigation.is-vertical .is-large .components-placeholder__fieldset{ |
205 } |
205 min-height:132px; |
206 .block-library-colors-selector__popover .component-color-indicator { |
206 } |
207 float: right; |
207 |
208 margin-top: 2px; |
208 .wp-block-navigation-placeholder__controls,.wp-block-navigation-placeholder__preview{ |
209 } |
209 align-items:flex-start; |
210 .block-library-colors-selector__popover .components-panel__body-title { |
210 flex-direction:row; |
211 display: none; |
211 padding:6px 8px; |
212 } |
212 } |
213 |
213 |
214 .wp-block-navigation .block-editor-button-block-appender { |
214 .wp-block-navigation-placeholder__controls{ |
215 background-color: #1e1e1e; |
215 background-color:#fff; |
216 color: #fff; |
216 border-radius:2px; |
217 } |
217 box-shadow:inset 0 0 0 1px #1e1e1e; |
218 .wp-block-navigation .block-editor-button-block-appender.block-editor-button-block-appender.block-editor-button-block-appender { |
218 display:none; |
219 padding: 0; |
219 float:left; |
220 } |
220 position:relative; |
221 |
221 width:100%; |
222 .wp-block-navigation .wp-block .wp-block .block-editor-button-block-appender { |
222 z-index:1; |
223 background-color: transparent; |
223 } |
224 color: #1e1e1e; |
224 .wp-block-navigation.is-selected .wp-block-navigation-placeholder__controls{ |
225 } |
225 display:flex; |
226 |
226 } |
227 /** |
227 .is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator,.is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator+hr,.is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator,.is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator+hr{ |
228 * Setup state |
228 display:none; |
229 */ |
229 } |
230 @keyframes loadingpulse { |
230 .is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions,.wp-block-navigation.is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions{ |
231 0% { |
231 align-items:flex-start; |
232 opacity: 1; |
232 flex-direction:column; |
233 } |
233 } |
234 50% { |
234 .is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions hr,.wp-block-navigation.is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions hr{ |
235 opacity: 0.5; |
235 display:none; |
236 } |
236 } |
237 100% { |
237 .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__icon{ |
238 opacity: 1; |
238 height:36px; |
239 } |
239 margin-right:12px; |
240 } |
240 } |
241 .components-placeholder.wp-block-navigation-placeholder { |
241 |
242 outline: none; |
242 .wp-block-navigation-placeholder__actions__indicator{ |
243 padding: 0; |
243 align-items:center; |
244 box-shadow: none; |
244 display:flex; |
245 background: none; |
245 height:36px; |
246 min-height: 0; |
246 justify-content:flex-start; |
247 color: inherit; |
247 line-height:0; |
248 } |
248 margin-left:4px; |
249 .components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset { |
249 padding:0 6px 0 0; |
250 font-size: inherit; |
250 } |
251 } |
251 .wp-block-navigation-placeholder__actions__indicator svg{ |
252 .components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset .components-button { |
252 margin-right:4px; |
253 margin-bottom: 0; |
253 fill:currentColor; |
254 } |
254 } |
255 .wp-block-navigation.is-selected .components-placeholder.wp-block-navigation-placeholder { |
255 |
256 color: #1e1e1e; |
256 .wp-block-navigation .components-placeholder.is-medium .components-placeholder__fieldset{ |
257 } |
257 flex-direction:row !important; |
258 |
258 } |
259 .wp-block-navigation-placeholder .components-spinner { |
259 |
260 margin-top: 0; |
260 .wp-block-navigation-placeholder__actions{ |
261 } |
261 align-items:center; |
262 |
262 display:flex; |
263 .wp-block-navigation-placeholder__preview { |
263 font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; |
264 display: flex; |
264 font-size:13px; |
265 align-items: center; |
265 gap:6px; |
266 min-width: 96px; |
266 height:100%; |
267 font-size: 13px; |
267 } |
268 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
268 .wp-block-navigation-placeholder__actions .components-dropdown,.wp-block-navigation-placeholder__actions>.components-button{ |
269 color: currentColor; |
269 margin-right:0; |
270 background: transparent; |
270 } |
271 } |
271 .wp-block-navigation-placeholder__actions.wp-block-navigation-placeholder__actions hr{ |
272 .wp-block-navigation.is-selected .wp-block-navigation-placeholder__preview { |
272 background-color:#1e1e1e; |
273 display: none; |
273 border:0; |
274 } |
274 height:100%; |
275 .wp-block-navigation-placeholder__preview::before { |
275 margin:auto 0; |
276 content: ""; |
276 max-height:16px; |
277 display: block; |
277 min-height:1px; |
278 position: absolute; |
278 min-width:1px; |
279 top: 0; |
279 } |
280 right: 0; |
280 @media (min-width:600px){ |
281 bottom: 0; |
281 .wp-block-navigation__responsive-container:not(.is-menu-open) .components-button.wp-block-navigation__responsive-container-close{ |
282 left: 0; |
282 display:none; |
283 border: 1px dashed currentColor; |
283 } |
284 opacity: 0.4; |
284 } |
285 pointer-events: none; |
285 |
286 border-radius: inherit; |
286 .wp-block-navigation__responsive-container.is-menu-open{ |
287 } |
287 position:fixed; |
288 .wp-block-navigation-placeholder__preview > svg { |
288 top:155px; |
289 fill: currentColor; |
289 } |
290 opacity: 0.4; |
290 @media (min-width:782px){ |
291 } |
291 .wp-block-navigation__responsive-container.is-menu-open{ |
292 |
292 left:36px; |
293 .wp-block-navigation.is-vertical .is-small .components-placeholder__fieldset, |
293 top:93px; |
294 .wp-block-navigation.is-vertical .is-medium .components-placeholder__fieldset { |
294 } |
295 min-height: 90px; |
295 } |
296 } |
296 @media (min-width:960px){ |
297 |
297 .wp-block-navigation__responsive-container.is-menu-open{ |
298 .wp-block-navigation.is-vertical .is-large .components-placeholder__fieldset { |
298 left:160px; |
299 min-height: 132px; |
299 } |
300 } |
300 } |
301 |
301 |
302 .wp-block-navigation-placeholder__preview, |
302 @media (min-width:782px){ |
303 .wp-block-navigation-placeholder__controls { |
303 .has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open{ |
304 padding: 6px 8px; |
304 top:141px; |
305 flex-direction: row; |
305 } |
306 align-items: flex-start; |
306 } |
307 } |
307 |
308 |
308 .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,.is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open{ |
309 .wp-block-navigation-placeholder__controls { |
309 top:141px; |
310 border-radius: 2px; |
310 } |
311 background-color: #fff; |
311 |
312 box-shadow: inset 0 0 0 1px #1e1e1e; |
312 .is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open{ |
313 display: none; |
313 left:0; |
314 position: relative; |
314 top:155px; |
315 z-index: 1; |
315 } |
316 float: left; |
316 @media (min-width:782px){ |
317 width: 100%; |
317 .is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open{ |
318 } |
318 top:61px; |
319 .wp-block-navigation.is-selected .wp-block-navigation-placeholder__controls { |
319 } |
320 display: flex; |
320 .is-fullscreen-mode .has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open{ |
321 } |
321 top:109px; |
322 .is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator, |
322 } |
323 .is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator + hr, .is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator, |
323 } |
324 .is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator + hr { |
324 .is-fullscreen-mode .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,.is-fullscreen-mode .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open{ |
325 display: none; |
325 top:109px; |
326 } |
326 } |
327 .is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions, .wp-block-navigation.is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions { |
327 |
328 flex-direction: column; |
328 body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-open{ |
329 align-items: flex-start; |
329 bottom:0; |
330 } |
330 left:0; |
331 .is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions hr, .wp-block-navigation.is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions hr { |
331 right:0; |
332 display: none; |
332 top:0; |
333 } |
333 } |
334 .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__icon { |
334 |
335 margin-right: 12px; |
335 .components-button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close,.components-button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open{ |
336 height: 36px; |
336 color:inherit; |
337 } |
337 height:auto; |
338 |
338 padding:0; |
339 .wp-block-navigation-placeholder__actions__indicator { |
339 } |
340 display: flex; |
340 |
341 padding: 0 6px 0 0; |
341 .components-heading.wp-block-navigation-off-canvas-editor__title{ |
342 align-items: center; |
342 margin:0; |
343 justify-content: flex-start; |
343 } |
344 line-height: 0; |
344 |
345 height: 36px; |
345 .wp-block-navigation-off-canvas-editor__header{ |
346 margin-left: 4px; |
346 margin-bottom:8px; |
347 } |
347 } |
348 .wp-block-navigation-placeholder__actions__indicator svg { |
348 |
349 margin-right: 4px; |
349 .is-menu-open .wp-block-navigation__responsive-container-content * .block-list-appender{ |
350 fill: currentColor; |
350 margin-top:16px; |
351 } |
351 } |
352 |
352 |
353 .wp-block-navigation .components-placeholder.is-medium .components-placeholder__fieldset { |
353 @keyframes fadein{ |
354 flex-direction: row !important; |
354 0%{ |
355 } |
355 opacity:0; |
356 |
356 } |
357 .wp-block-navigation-placeholder__actions { |
357 to{ |
358 display: flex; |
358 opacity:1; |
359 font-size: 13px; |
359 } |
360 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
360 } |
361 gap: 6px; |
361 .wp-block-navigation__loading-indicator-container{ |
362 align-items: center; |
362 padding:8px 12px; |
363 height: 100%; |
363 } |
364 } |
364 |
365 .wp-block-navigation-placeholder__actions .components-dropdown, |
365 .wp-block-navigation .wp-block-navigation__uncontrolled-inner-blocks-loading-indicator{ |
366 .wp-block-navigation-placeholder__actions > .components-button { |
366 margin-top:0; |
367 margin-right: 0; |
367 } |
368 } |
368 |
369 .wp-block-navigation-placeholder__actions.wp-block-navigation-placeholder__actions hr { |
369 @keyframes fadeouthalf{ |
370 border: 0; |
370 0%{ |
371 min-height: 1px; |
371 opacity:1; |
372 min-width: 1px; |
372 } |
373 background-color: #1e1e1e; |
373 to{ |
374 margin: auto 0; |
374 opacity:.5; |
375 height: 100%; |
375 } |
376 max-height: 16px; |
376 } |
377 } |
377 .wp-block-navigation-delete-menu-button{ |
378 |
378 justify-content:center; |
379 /** |
379 margin-bottom:16px; |
380 * Mobile menu. |
380 width:100%; |
381 */ |
381 } |
382 @media (min-width: 600px) { |
382 |
383 .wp-block-navigation__responsive-container:not(.is-menu-open) .components-button.wp-block-navigation__responsive-container-close { |
383 .components-button.is-link.wp-block-navigation-manage-menus-button{ |
384 display: none; |
384 margin-bottom:16px; |
385 } |
385 } |
386 } |
386 |
387 |
387 .wp-block-navigation__overlay-menu-preview{ |
388 .wp-block-navigation__responsive-container.is-menu-open { |
388 align-items:center; |
389 position: fixed; |
389 background-color:#f0f0f0; |
390 top: 155px; |
390 display:flex; |
391 } |
391 height:64px; |
392 @media (min-width: 782px) { |
392 justify-content:space-between; |
393 .wp-block-navigation__responsive-container.is-menu-open { |
393 margin-bottom:12px; |
394 top: 93px; |
394 padding:0 24px; |
395 } |
395 width:100%; |
396 } |
396 } |
397 @media (min-width: 782px) { |
397 .wp-block-navigation__overlay-menu-preview.open{ |
398 .wp-block-navigation__responsive-container.is-menu-open { |
398 background-color:#fff; |
399 left: 36px; |
399 box-shadow:inset 0 0 0 1px #e0e0e0; |
400 } |
400 outline:1px solid #0000; |
401 } |
401 } |
402 @media (min-width: 960px) { |
402 |
403 .wp-block-navigation__responsive-container.is-menu-open { |
403 .wp-block-navigation-placeholder__actions hr+hr,.wp-block-navigation__toolbar-menu-selector.components-toolbar-group:empty{ |
404 left: 160px; |
404 display:none; |
405 } |
405 } |
406 } |
406 .wp-block-navigation__navigation-selector{ |
407 |
407 margin-bottom:16px; |
408 @media (min-width: 782px) { |
408 width:100%; |
409 .has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open { |
409 } |
410 top: 141px; |
410 |
411 } |
411 .wp-block-navigation__navigation-selector-button{ |
412 } |
412 border:1px solid; |
413 |
413 justify-content:space-between; |
414 .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open, |
414 width:100%; |
415 .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open { |
415 } |
416 top: 141px; |
416 |
417 } |
417 .wp-block-navigation__navigation-selector-button__icon{ |
418 |
418 flex:0 0 auto; |
419 .is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open { |
419 } |
420 right: 280px; |
420 |
421 } |
421 .wp-block-navigation__navigation-selector-button__label{ |
422 |
422 flex:0 1 auto; |
423 .is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open { |
423 overflow:hidden; |
424 left: 0; |
424 text-overflow:ellipsis; |
425 top: 155px; |
425 white-space:nowrap; |
426 } |
426 } |
427 @media (min-width: 782px) { |
427 |
428 .is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open { |
428 .wp-block-navigation__navigation-selector-button--createnew{ |
429 top: 61px; |
429 border:1px solid; |
430 } |
430 margin-bottom:16px; |
431 } |
431 width:100%; |
432 @media (min-width: 782px) { |
432 } |
433 .is-fullscreen-mode .has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open { |
433 |
434 top: 109px; |
434 .wp-block-navigation__responsive-container-open.components-button{ |
435 } |
435 opacity:1; |
436 } |
436 } |
437 .is-fullscreen-mode .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open, |
437 |
438 .is-fullscreen-mode .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open { |
438 .wp-block-navigation__menu-inspector-controls{ |
439 top: 109px; |
439 overflow-x:auto; |
440 } |
440 scrollbar-color:#0000 #0000; |
441 |
441 scrollbar-gutter:stable both-edges; |
442 body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-open { |
442 scrollbar-width:thin; |
443 top: 0; |
443 will-change:transform; |
444 right: 0; |
444 } |
445 bottom: 0; |
445 .wp-block-navigation__menu-inspector-controls::-webkit-scrollbar{ |
446 left: 0; |
446 height:12px; |
447 } |
447 width:12px; |
448 |
448 } |
449 @media (min-width: 600px) { |
449 .wp-block-navigation__menu-inspector-controls::-webkit-scrollbar-track{ |
450 .wp-block-navigation__responsive-close { |
450 background-color:initial; |
451 pointer-events: none; |
451 } |
452 } |
452 .wp-block-navigation__menu-inspector-controls::-webkit-scrollbar-thumb{ |
453 .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-close, |
453 background-clip:padding-box; |
454 .wp-block-navigation__responsive-close .block-editor-block-list__layout * { |
454 background-color:initial; |
455 pointer-events: all; |
455 border:3px solid #0000; |
456 } |
456 border-radius:8px; |
457 } |
457 } |
458 .wp-block-navigation__responsive-close .wp-block-pages-list__item__link { |
458 .wp-block-navigation__menu-inspector-controls:focus-within::-webkit-scrollbar-thumb,.wp-block-navigation__menu-inspector-controls:focus::-webkit-scrollbar-thumb,.wp-block-navigation__menu-inspector-controls:hover::-webkit-scrollbar-thumb{ |
459 pointer-events: none; |
459 background-color:#949494; |
460 } |
460 } |
461 |
461 .wp-block-navigation__menu-inspector-controls:focus,.wp-block-navigation__menu-inspector-controls:focus-within,.wp-block-navigation__menu-inspector-controls:hover{ |
462 .components-button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open, |
462 scrollbar-color:#949494 #0000; |
463 .components-button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close { |
463 } |
464 padding: 0; |
464 @media (hover:none){ |
465 height: auto; |
465 .wp-block-navigation__menu-inspector-controls{ |
466 color: inherit; |
466 scrollbar-color:#949494 #0000; |
467 } |
467 } |
468 |
468 } |
469 .is-menu-open .wp-block-navigation__responsive-container-content * .block-list-appender { |
469 |
470 margin-top: 16px; |
470 .wp-block-navigation__menu-inspector-controls__empty-message{ |
471 } |
471 margin-left:24px; |
472 |
472 } |
473 @keyframes fadein { |
|
474 0% { |
|
475 opacity: 0; |
|
476 } |
|
477 100% { |
|
478 opacity: 1; |
|
479 } |
|
480 } |
|
481 .wp-block-navigation .components-spinner { |
|
482 padding: 8px 12px; |
|
483 } |
|
484 |
|
485 .wp-block-navigation__unsaved-changes { |
|
486 position: relative; |
|
487 } |
|
488 .wp-block-navigation__unsaved-changes .components-spinner { |
|
489 position: absolute; |
|
490 top: calc(50% - 16px / 2); |
|
491 left: calc(50% - 16px / 2); |
|
492 opacity: 0; |
|
493 animation: 0.5s linear 2s normal forwards fadein; |
|
494 } |
|
495 |
|
496 @keyframes fadeouthalf { |
|
497 0% { |
|
498 opacity: 1; |
|
499 } |
|
500 100% { |
|
501 opacity: 0.5; |
|
502 } |
|
503 } |
|
504 .wp-block-navigation__unsaved-changes-overlay.is-saving { |
|
505 opacity: 1; |
|
506 animation: 0.5s linear 2s normal forwards fadeouthalf; |
|
507 } |
|
508 |
|
509 .wp-block-navigation-delete-menu-button { |
|
510 width: 100%; |
|
511 justify-content: center; |
|
512 margin-bottom: 16px; |
|
513 } |
|
514 |
|
515 .wp-block-navigation__overlay-menu-preview { |
|
516 display: flex; |
|
517 align-items: center; |
|
518 width: 100%; |
|
519 background-color: #f0f0f0; |
|
520 padding: 0 24px; |
|
521 height: 64px; |
|
522 margin-bottom: 12px; |
|
523 } |
|
524 .wp-block-navigation__overlay-menu-preview.open { |
|
525 box-shadow: inset 0 0 0 1px #e0e0e0; |
|
526 outline: 1px solid transparent; |
|
527 background-color: #fff; |
|
528 } |
|
529 |
|
530 .wp-block-navigation__toolbar-menu-selector.components-toolbar-group:empty { |
|
531 display: none; |
|
532 } |
|
533 |
|
534 .wp-block-navigation-placeholder__actions hr + hr { |
|
535 display: none; |
|
536 } |
|