1 /** |
1 .wp-block-navigation{ |
2 * Colors |
2 position:relative; |
3 */ |
3 --navigation-layout-justification-setting:flex-start; |
4 /** |
4 --navigation-layout-direction:row; |
5 * Breakpoints & Media Queries |
5 --navigation-layout-wrap:wrap; |
6 */ |
6 --navigation-layout-justify:flex-start; |
7 /** |
7 --navigation-layout-align:center; |
8 * SCSS Variables. |
8 } |
9 * |
9 .wp-block-navigation ul{ |
10 * Please use variables from this sheet to ensure consistency across the UI. |
10 margin-bottom:0; |
11 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. |
11 margin-right:0; |
12 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. |
12 margin-top:0; |
13 */ |
13 padding-right:0; |
14 /** |
14 } |
15 * Colors |
15 .wp-block-navigation ul,.wp-block-navigation ul li{ |
16 */ |
16 list-style:none; |
17 /** |
17 padding:0; |
18 * Fonts & basic variables. |
18 } |
19 */ |
19 .wp-block-navigation .wp-block-navigation-item{ |
20 /** |
20 align-items:center; |
21 * Grid System. |
21 background-color:inherit; |
22 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ |
22 display:flex; |
23 */ |
23 position:relative; |
24 /** |
24 } |
25 * Dimensions. |
25 .wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container:empty{ |
26 */ |
26 display:none; |
27 /** |
27 } |
28 * Shadows. |
28 .wp-block-navigation .wp-block-navigation-item__content{ |
29 */ |
29 display:block; |
30 /** |
30 } |
31 * Editor widths. |
31 .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content{ |
32 */ |
32 color:inherit; |
33 /** |
33 } |
34 * Block & Editor UI. |
34 .wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content,.wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content:active,.wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content:focus{ |
35 */ |
35 text-decoration:underline; |
36 /** |
36 } |
37 * Block paddings. |
37 .wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content,.wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:active,.wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:focus{ |
38 */ |
38 text-decoration:line-through; |
39 /** |
39 } |
40 * React Native specific. |
40 .wp-block-navigation :where(a),.wp-block-navigation :where(a:active),.wp-block-navigation :where(a:focus){ |
41 * These variables do not appear to be used anywhere else. |
41 text-decoration:none; |
42 */ |
42 } |
43 /** |
43 .wp-block-navigation .wp-block-navigation__submenu-icon{ |
44 * Converts a hex value into the rgb equivalent. |
44 align-self:center; |
45 * |
45 background-color:inherit; |
46 * @param {string} hex - the hexadecimal value to convert |
46 border:none; |
47 * @return {string} comma separated rgb values |
47 color:currentColor; |
48 */ |
48 display:inline-block; |
49 /** |
49 font-size:inherit; |
50 * Breakpoint mixins |
50 height:.6em; |
51 */ |
51 line-height:0; |
52 /** |
52 margin-right:.25em; |
53 * Long content fade mixin |
53 padding:0; |
54 * |
54 width:.6em; |
55 * Creates a fading overlay to signify that the content is longer |
55 } |
56 * than the space allows. |
56 .wp-block-navigation .wp-block-navigation__submenu-icon svg{ |
57 */ |
57 display:inline-block; |
58 /** |
58 stroke:currentColor; |
59 * Focus styles. |
59 height:inherit; |
60 */ |
60 margin-top:.075em; |
61 /** |
61 width:inherit; |
62 * Applies editor left position to the selector passed as argument |
62 } |
63 */ |
63 .wp-block-navigation.is-vertical{ |
64 /** |
64 --navigation-layout-direction:column; |
65 * Styles that are reused verbatim in a few places |
65 --navigation-layout-justify:initial; |
66 */ |
66 --navigation-layout-align:flex-start; |
67 /** |
67 } |
68 * Allows users to opt-out of animations via OS-level preferences. |
68 .wp-block-navigation.no-wrap{ |
69 */ |
69 --navigation-layout-wrap:nowrap; |
70 /** |
70 } |
71 * Reset default styles for JavaScript UI based pages. |
71 .wp-block-navigation.items-justified-center{ |
72 * This is a WP-admin agnostic reset |
72 --navigation-layout-justification-setting:center; |
73 */ |
73 --navigation-layout-justify:center; |
74 /** |
74 } |
75 * Reset the WP Admin page styles for Gutenberg-like pages. |
75 .wp-block-navigation.items-justified-center.is-vertical{ |
76 */ |
76 --navigation-layout-align:center; |
77 .wp-block-navigation { |
77 } |
78 position: relative; |
78 .wp-block-navigation.items-justified-right{ |
79 --navigation-layout-justification-setting: flex-start; |
79 --navigation-layout-justification-setting:flex-end; |
80 --navigation-layout-direction: row; |
80 --navigation-layout-justify:flex-end; |
81 --navigation-layout-wrap: wrap; |
81 } |
82 --navigation-layout-justify: flex-start; |
82 .wp-block-navigation.items-justified-right.is-vertical{ |
83 --navigation-layout-align: center; |
83 --navigation-layout-align:flex-end; |
84 } |
84 } |
85 .wp-block-navigation ul { |
85 .wp-block-navigation.items-justified-space-between{ |
86 margin-top: 0; |
86 --navigation-layout-justification-setting:space-between; |
87 margin-bottom: 0; |
87 --navigation-layout-justify:space-between; |
88 margin-right: 0; |
88 } |
89 padding-right: 0; |
89 |
90 } |
90 .wp-block-navigation .has-child .wp-block-navigation__submenu-container{ |
91 .wp-block-navigation ul, |
91 align-items:normal; |
92 .wp-block-navigation ul li { |
92 background-color:inherit; |
93 list-style: none; |
93 color:inherit; |
94 padding: 0; |
94 display:flex; |
95 } |
95 flex-direction:column; |
96 .wp-block-navigation .wp-block-navigation-item { |
96 height:0; |
97 display: flex; |
97 opacity:0; |
98 align-items: center; |
98 overflow:hidden; |
99 position: relative; |
99 position:absolute; |
100 } |
100 right:-1px; |
101 .wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container:empty { |
101 top:100%; |
102 display: none; |
102 transition:opacity .1s linear; |
103 } |
103 visibility:hidden; |
104 .wp-block-navigation .wp-block-navigation-item__content { |
104 width:0; |
105 color: inherit; |
105 z-index:2; |
106 display: block; |
106 } |
107 padding: 0; |
107 .wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content{ |
108 } |
108 display:flex; |
109 .wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content { |
109 flex-grow:1; |
110 text-decoration: underline; |
110 } |
111 } |
111 .wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content .wp-block-navigation__submenu-icon{ |
112 .wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content:focus, .wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content:active { |
112 margin-left:0; |
113 text-decoration: underline; |
113 margin-right:auto; |
114 } |
114 } |
115 .wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content { |
115 .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content{ |
116 text-decoration: line-through; |
116 margin:0; |
117 } |
117 } |
118 .wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:focus, .wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:active { |
118 @media (min-width:782px){ |
119 text-decoration: line-through; |
119 .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{ |
120 } |
120 right:100%; |
121 .wp-block-navigation:where(:not([class*="has-text-decoration"])) a { |
121 top:-1px; |
122 text-decoration: none; |
122 } |
123 } |
123 .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container:before{ |
124 .wp-block-navigation:where(:not([class*="has-text-decoration"])) a:focus, .wp-block-navigation:where(:not([class*="has-text-decoration"])) a:active { |
124 background:#0000; |
125 text-decoration: none; |
125 content:""; |
126 } |
126 display:block; |
127 .wp-block-navigation .wp-block-navigation__submenu-icon { |
127 height:100%; |
128 align-self: center; |
128 left:100%; |
129 line-height: 0; |
129 position:absolute; |
130 display: inline-block; |
130 width:.5em; |
131 font-size: inherit; |
131 } |
132 padding: 0; |
132 .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon{ |
133 background-color: inherit; |
133 margin-left:.25em; |
134 color: currentColor; |
134 } |
135 border: none; |
135 .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg{ |
136 width: 0.6em; |
136 transform:rotate(90deg); |
137 height: 0.6em; |
137 } |
138 margin-right: 0.25em; |
138 } |
139 } |
139 .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container,.wp-block-navigation .has-child:not(.open-on-click):hover>.wp-block-navigation__submenu-container,.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within>.wp-block-navigation__submenu-container{ |
140 .wp-block-navigation .wp-block-navigation__submenu-icon svg { |
140 height:auto; |
141 display: inline-block; |
141 min-width:200px; |
142 stroke: currentColor; |
142 opacity:1; |
143 width: inherit; |
143 overflow:visible; |
144 height: inherit; |
144 visibility:visible; |
145 margin-top: 0.075em; |
145 width:auto; |
146 } |
146 } |
147 .wp-block-navigation.is-vertical { |
147 |
148 --navigation-layout-direction: column; |
148 .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container{ |
149 --navigation-layout-justify: initial; |
149 right:0; |
150 --navigation-layout-align: flex-start; |
150 top:100%; |
151 } |
151 } |
152 .wp-block-navigation.no-wrap { |
152 @media (min-width:782px){ |
153 --navigation-layout-wrap: nowrap; |
153 .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{ |
154 } |
154 right:100%; |
155 .wp-block-navigation.items-justified-center { |
155 top:0; |
156 --navigation-layout-justification-setting: center; |
156 } |
157 --navigation-layout-justify: center; |
157 } |
158 } |
158 |
159 .wp-block-navigation.items-justified-center.is-vertical { |
159 .wp-block-navigation-submenu{ |
160 --navigation-layout-align: center; |
160 display:flex; |
161 } |
161 position:relative; |
162 .wp-block-navigation.items-justified-right { |
162 } |
163 --navigation-layout-justification-setting: flex-end; |
163 .wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg{ |
164 --navigation-layout-justify: flex-end; |
164 stroke:currentColor; |
165 } |
165 } |
166 .wp-block-navigation.items-justified-right.is-vertical { |
166 |
167 --navigation-layout-align: flex-end; |
167 button.wp-block-navigation-item__content{ |
168 } |
168 background-color:initial; |
169 .wp-block-navigation.items-justified-space-between { |
169 border:none; |
170 --navigation-layout-justification-setting: space-between; |
170 color:currentColor; |
171 --navigation-layout-justify: space-between; |
171 font-family:inherit; |
172 } |
172 font-size:inherit; |
173 |
173 font-style:inherit; |
174 .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) { |
174 font-weight:inherit; |
175 background-color: inherit; |
175 letter-spacing:inherit; |
176 color: inherit; |
176 line-height:inherit; |
177 position: absolute; |
177 text-align:right; |
178 z-index: 2; |
178 text-transform:inherit; |
179 display: flex; |
179 } |
180 flex-direction: column; |
180 |
181 align-items: normal; |
181 .wp-block-navigation-submenu__toggle{ |
182 opacity: 0; |
182 cursor:pointer; |
183 transition: opacity 0.1s linear; |
183 } |
184 visibility: hidden; |
184 |
185 width: 0; |
185 .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle{ |
186 height: 0; |
186 padding-left:.85em; |
187 overflow: hidden; |
187 padding-right:0; |
188 right: -1px; |
188 } |
189 top: 100%; |
189 .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle+.wp-block-navigation__submenu-icon{ |
190 } |
190 margin-right:-.6em; |
191 .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) > .wp-block-navigation-item > .wp-block-navigation-item__content { |
191 pointer-events:none; |
192 display: flex; |
192 } |
193 flex-grow: 1; |
193 |
194 } |
194 .wp-block-navigation-item.open-on-click button.wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle){ |
195 .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon { |
195 padding:0; |
196 margin-left: 0; |
196 } |
197 margin-right: auto; |
197 .wp-block-navigation .wp-block-page-list,.wp-block-navigation__container,.wp-block-navigation__responsive-close,.wp-block-navigation__responsive-container,.wp-block-navigation__responsive-container-content,.wp-block-navigation__responsive-dialog{ |
198 } |
198 gap:inherit; |
199 .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content { |
199 } |
200 margin: 0; |
200 :where(.wp-block-navigation.has-background .wp-block-navigation-item a:not(.wp-element-button)),:where(.wp-block-navigation.has-background .wp-block-navigation-submenu a:not(.wp-element-button)){ |
201 } |
201 padding:.5em 1em; |
202 @media (min-width: 782px) { |
202 } |
203 .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-container { |
203 |
204 right: 100%; |
204 :where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:not(.wp-element-button)),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu button.wp-block-navigation-item__content),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-pages-list__item button.wp-block-navigation-item__content){ |
205 top: -1px; |
205 padding:.5em 1em; |
206 } |
206 } |
207 .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-container::before { |
207 .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container{ |
208 content: ""; |
208 left:0; |
209 position: absolute; |
209 right:auto; |
210 left: 100%; |
210 } |
211 height: 100%; |
211 .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{ |
212 display: block; |
212 left:-1px; |
213 width: 0.5em; |
213 right:-1px; |
214 background: transparent; |
214 } |
215 } |
215 @media (min-width:782px){ |
216 .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-icon { |
216 .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{ |
217 margin-left: 0.25em; |
217 left:100%; |
218 } |
218 right:auto; |
219 .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-icon svg { |
219 } |
220 transform: rotate(90deg); |
220 } |
221 } |
221 |
222 } |
222 .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{ |
223 .wp-block-navigation .has-child:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container { |
223 background-color:#fff; |
224 visibility: visible; |
224 border:1px solid #00000026; |
225 overflow: visible; |
225 } |
226 opacity: 1; |
226 |
227 width: auto; |
227 .wp-block-navigation.has-background .wp-block-navigation__submenu-container{ |
228 height: auto; |
228 background-color:inherit; |
229 min-width: 200px; |
229 } |
230 } |
230 |
231 .wp-block-navigation .has-child:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within > .wp-block-navigation__submenu-container { |
231 .wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container{ |
232 visibility: visible; |
232 color:#000; |
233 overflow: visible; |
233 } |
234 opacity: 1; |
234 |
235 width: auto; |
235 .wp-block-navigation__container{ |
236 height: auto; |
236 align-items:var(--navigation-layout-align, initial); |
237 min-width: 200px; |
237 display:flex; |
238 } |
238 flex-direction:var(--navigation-layout-direction, initial); |
239 .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container { |
239 flex-wrap:var(--navigation-layout-wrap, wrap); |
240 visibility: visible; |
240 justify-content:var(--navigation-layout-justify, initial); |
241 overflow: visible; |
241 list-style:none; |
242 opacity: 1; |
242 margin:0; |
243 width: auto; |
243 padding-right:0; |
244 height: auto; |
244 } |
245 min-width: 200px; |
245 .wp-block-navigation__container .is-responsive{ |
246 } |
246 display:none; |
247 |
247 } |
248 .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container { |
248 |
249 right: 0; |
249 .wp-block-navigation__container:only-child,.wp-block-page-list:only-child{ |
250 top: 100%; |
250 flex-grow:1; |
251 } |
251 } |
252 @media (min-width: 782px) { |
252 @keyframes overlay-menu__fade-in-animation{ |
253 .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { |
253 0%{ |
254 right: 100%; |
254 opacity:0; |
255 top: 0; |
255 transform:translateY(.5em); |
256 } |
256 } |
257 } |
257 to{ |
258 |
258 opacity:1; |
259 .wp-block-navigation-submenu { |
259 transform:translateY(0); |
260 position: relative; |
260 } |
261 display: flex; |
261 } |
262 } |
262 .wp-block-navigation__responsive-container{ |
263 .wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg { |
263 bottom:0; |
264 stroke: currentColor; |
264 display:none; |
265 } |
265 left:0; |
266 |
266 position:fixed; |
267 button.wp-block-navigation-item__content { |
267 right:0; |
268 background-color: transparent; |
268 top:0; |
269 border: none; |
269 } |
270 color: currentColor; |
270 .wp-block-navigation__responsive-container :where(.wp-block-navigation-item a){ |
271 font-size: inherit; |
271 color:inherit; |
272 font-family: inherit; |
272 } |
273 line-height: inherit; |
273 .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content{ |
274 font-style: inherit; |
274 align-items:var(--navigation-layout-align, initial); |
275 font-weight: inherit; |
275 display:flex; |
276 text-transform: inherit; |
276 flex-direction:var(--navigation-layout-direction, initial); |
277 text-align: right; |
277 flex-wrap:var(--navigation-layout-wrap, wrap); |
278 } |
278 justify-content:var(--navigation-layout-justify, initial); |
279 |
279 } |
280 .wp-block-navigation-submenu__toggle { |
280 .wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open){ |
281 cursor: pointer; |
281 background-color:inherit !important; |
282 } |
282 color:inherit !important; |
283 |
283 } |
284 .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle { |
284 .wp-block-navigation__responsive-container.is-menu-open{ |
285 padding-left: 0.85em; |
285 animation:overlay-menu__fade-in-animation .1s ease-out; |
286 } |
286 animation-fill-mode:forwards; |
287 .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon { |
287 background-color:inherit; |
288 margin-right: -0.6em; |
288 display:flex; |
289 pointer-events: none; |
289 flex-direction:column; |
290 } |
290 overflow:auto; |
291 |
291 padding:clamp(1rem, var(--wp--style--root--padding-top), 20rem) clamp(1rem, var(--wp--style--root--padding-left), 20em) clamp(1rem, var(--wp--style--root--padding-bottom), 20rem) clamp(1rem, var(--wp--style--root--padding-right), 20rem); |
292 /** |
292 z-index:100000; |
293 * Margins |
293 } |
294 */ |
294 @media (prefers-reduced-motion:reduce){ |
295 .wp-block-navigation__responsive-container, |
295 .wp-block-navigation__responsive-container.is-menu-open{ |
296 .wp-block-navigation__responsive-close, |
296 animation-delay:0s; |
297 .wp-block-navigation__responsive-dialog, |
297 animation-duration:1ms; |
298 .wp-block-navigation, |
298 } |
299 .wp-block-navigation .wp-block-page-list, |
299 } |
300 .wp-block-navigation__container, |
300 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{ |
301 .wp-block-navigation__responsive-container-content { |
301 align-items:var(--navigation-layout-justification-setting, inherit); |
302 gap: inherit; |
302 display:flex; |
303 } |
303 flex-direction:column; |
304 |
304 flex-wrap:nowrap; |
305 .wp-block-navigation:where(.has-background), |
305 overflow:visible; |
306 .wp-block-navigation:where(.has-background) .wp-block-navigation .wp-block-page-list, |
306 padding-top:calc(2rem + 24px); |
307 .wp-block-navigation:where(.has-background) .wp-block-navigation__container { |
307 } |
308 gap: inherit; |
308 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list{ |
309 } |
309 justify-content:flex-start; |
310 |
310 } |
311 /** |
311 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon{ |
312 * Paddings |
312 display:none; |
313 */ |
313 } |
314 .wp-block-navigation:where(.has-background) .wp-block-navigation-item__content { |
314 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container{ |
315 padding: 0.5em 1em; |
315 border:none; |
316 } |
316 height:auto; |
317 |
317 min-width:200px; |
318 .wp-block-navigation :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content { |
318 opacity:1; |
319 padding: 0.5em 1em; |
319 overflow:initial; |
320 } |
320 padding-left:2rem; |
321 |
321 padding-right:2rem; |
322 /** |
322 position:static; |
323 * Justifications. |
323 visibility:visible; |
324 */ |
324 width:auto; |
325 .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container, |
325 } |
326 .wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container, |
326 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container{ |
327 .wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container, |
327 gap:inherit; |
328 .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container { |
328 } |
329 right: auto; |
329 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container{ |
330 left: 0; |
330 padding-top:var(--wp--style--block-gap, 2em); |
331 } |
331 } |
332 .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, |
332 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content{ |
333 .wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, |
333 padding:0; |
334 .wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, |
334 } |
335 .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { |
335 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list{ |
336 right: -1px; |
336 align-items:var(--navigation-layout-justification-setting, initial); |
337 left: -1px; |
337 display:flex; |
338 } |
338 flex-direction:column; |
339 @media (min-width: 782px) { |
339 } |
340 .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, |
340 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list{ |
341 .wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, |
341 background:#0000 !important; |
342 .wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, |
342 color:inherit !important; |
343 .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { |
343 } |
344 right: auto; |
344 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container{ |
345 left: 100%; |
345 left:auto; |
346 } |
346 right:auto; |
347 } |
347 } |
348 |
348 @media (min-width:600px){ |
349 .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { |
349 .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){ |
350 background-color: #fff; |
350 background-color:inherit; |
351 color: #000; |
351 display:block; |
352 border: 1px solid rgba(0, 0, 0, 0.15); |
352 position:relative; |
353 } |
353 width:100%; |
354 |
354 z-index:auto; |
355 .wp-block-navigation__container { |
355 } |
356 display: flex; |
356 .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close{ |
357 flex-wrap: var(--navigation-layout-wrap, wrap); |
357 display:none; |
358 flex-direction: var(--navigation-layout-direction, initial); |
358 } |
359 justify-content: var(--navigation-layout-justify, initial); |
359 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container{ |
360 align-items: var(--navigation-layout-align, initial); |
360 right:0; |
361 list-style: none; |
361 } |
362 margin: 0; |
362 } |
363 padding-right: 0; |
363 |
364 } |
364 .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open{ |
365 .wp-block-navigation__container .is-responsive { |
365 background-color:#fff; |
366 display: none; |
366 } |
367 } |
367 |
368 |
368 .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open{ |
369 .wp-block-navigation__container:only-child, |
369 color:#000; |
370 .wp-block-page-list:only-child { |
370 } |
371 flex-grow: 1; |
371 |
372 } |
372 .wp-block-navigation__toggle_button_label{ |
373 |
373 font-size:1rem; |
374 /** |
374 font-weight:700; |
375 * Mobile menu. |
375 } |
376 */ |
376 |
377 .wp-block-navigation__responsive-container { |
377 .wp-block-navigation__responsive-container-close,.wp-block-navigation__responsive-container-open{ |
378 display: none; |
378 background:#0000; |
379 position: fixed; |
379 border:none; |
380 top: 0; |
380 color:currentColor; |
381 right: 0; |
381 cursor:pointer; |
382 left: 0; |
382 margin:0; |
383 bottom: 0; |
383 padding:0; |
384 } |
384 text-transform:inherit; |
385 .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content { |
385 vertical-align:middle; |
386 display: flex; |
386 } |
387 flex-wrap: var(--navigation-layout-wrap, wrap); |
387 .wp-block-navigation__responsive-container-close svg,.wp-block-navigation__responsive-container-open svg{ |
388 flex-direction: var(--navigation-layout-direction, initial); |
388 fill:currentColor; |
389 justify-content: var(--navigation-layout-justify, initial); |
389 display:block; |
390 align-items: var(--navigation-layout-align, initial); |
390 height:24px; |
391 } |
391 pointer-events:none; |
392 .wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) { |
392 width:24px; |
393 color: inherit !important; |
393 } |
394 background-color: inherit !important; |
394 |
395 } |
395 .wp-block-navigation__responsive-container-open{ |
396 .wp-block-navigation__responsive-container.is-menu-open { |
396 display:flex; |
397 display: flex; |
397 } |
398 flex-direction: column; |
398 .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open{ |
399 background-color: inherit; |
399 font-family:inherit; |
400 padding: 2rem; |
400 font-size:inherit; |
401 overflow: auto; |
401 font-weight:inherit; |
402 z-index: 100000; |
402 } |
403 } |
403 @media (min-width:600px){ |
404 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { |
404 .wp-block-navigation__responsive-container-open:not(.always-shown){ |
405 padding-top: calc(2rem + 24px); |
405 display:none; |
406 overflow: visible; |
406 } |
407 display: flex; |
407 } |
408 flex-direction: column; |
408 |
409 flex-wrap: nowrap; |
409 .wp-block-navigation__responsive-container-close{ |
410 align-items: var(--navigation-layout-justification-setting, inherit); |
410 left:0; |
411 } |
411 position:absolute; |
412 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, |
412 top:0; |
413 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list, |
413 z-index:2; |
414 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { |
414 } |
415 justify-content: flex-start; |
415 .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close{ |
416 } |
416 font-family:inherit; |
417 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon { |
417 font-size:inherit; |
418 display: none; |
418 font-weight:inherit; |
419 } |
419 } |
420 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .submenu-container, |
420 |
421 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container { |
421 .wp-block-navigation__responsive-close{ |
422 opacity: 1; |
422 width:100%; |
423 visibility: visible; |
423 } |
424 height: auto; |
424 .has-modal-open .wp-block-navigation__responsive-close{ |
425 width: auto; |
425 margin-left:auto; |
426 overflow: initial; |
426 margin-right:auto; |
427 min-width: 200px; |
427 max-width:var(--wp--style--global--wide-size, 100%); |
428 position: static; |
428 } |
429 border: none; |
429 .wp-block-navigation__responsive-close:focus{ |
430 padding-right: 2rem; |
430 outline:none; |
431 padding-left: 2rem; |
431 } |
432 } |
432 |
433 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container, |
433 .is-menu-open .wp-block-navigation__responsive-close,.is-menu-open .wp-block-navigation__responsive-container-content,.is-menu-open .wp-block-navigation__responsive-dialog{ |
434 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { |
434 box-sizing:border-box; |
435 gap: inherit; |
435 } |
436 } |
436 |
437 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container { |
437 .wp-block-navigation__responsive-dialog{ |
438 padding-top: var(--wp--style--block-gap, 2em); |
438 position:relative; |
439 } |
439 } |
440 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content { |
440 |
441 padding: 0; |
441 .has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog{ |
442 } |
442 margin-top:46px; |
443 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, |
443 } |
444 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item, |
444 @media (min-width:782px){ |
445 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list { |
445 .has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog{ |
446 display: flex; |
446 margin-top:32px; |
447 flex-direction: column; |
447 } |
448 align-items: var(--navigation-layout-justification-setting, initial); |
448 } |
449 } |
449 |
450 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container, |
450 html.has-modal-open{ |
451 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item, |
451 overflow:hidden; |
452 .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list { |
452 } |
453 color: inherit !important; |
|
454 background: transparent !important; |
|
455 } |
|
456 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { |
|
457 left: auto; |
|
458 right: auto; |
|
459 } |
|
460 @media (min-width: 600px) { |
|
461 .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { |
|
462 display: block; |
|
463 width: 100%; |
|
464 position: relative; |
|
465 z-index: auto; |
|
466 background-color: inherit; |
|
467 } |
|
468 .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close { |
|
469 display: none; |
|
470 } |
|
471 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { |
|
472 right: 0; |
|
473 } |
|
474 } |
|
475 |
|
476 .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { |
|
477 background-color: #fff; |
|
478 color: #000; |
|
479 } |
|
480 |
|
481 .wp-block-navigation__toggle_button_label { |
|
482 font-size: 1rem; |
|
483 font-weight: bold; |
|
484 } |
|
485 |
|
486 .wp-block-navigation__responsive-container-open, |
|
487 .wp-block-navigation__responsive-container-close { |
|
488 vertical-align: middle; |
|
489 cursor: pointer; |
|
490 color: currentColor; |
|
491 background: transparent; |
|
492 border: none; |
|
493 margin: 0; |
|
494 padding: 0; |
|
495 } |
|
496 .wp-block-navigation__responsive-container-open svg, |
|
497 .wp-block-navigation__responsive-container-close svg { |
|
498 fill: currentColor; |
|
499 pointer-events: none; |
|
500 display: block; |
|
501 width: 24px; |
|
502 height: 24px; |
|
503 } |
|
504 |
|
505 .wp-block-navigation__responsive-container-open { |
|
506 display: flex; |
|
507 } |
|
508 @media (min-width: 600px) { |
|
509 .wp-block-navigation__responsive-container-open:not(.always-shown) { |
|
510 display: none; |
|
511 } |
|
512 } |
|
513 |
|
514 .wp-block-navigation__responsive-container-close { |
|
515 position: absolute; |
|
516 top: 0; |
|
517 left: 0; |
|
518 z-index: 2; |
|
519 } |
|
520 |
|
521 .wp-block-navigation__responsive-close { |
|
522 width: 100%; |
|
523 } |
|
524 .wp-block-navigation__responsive-close:focus { |
|
525 outline: none; |
|
526 } |
|
527 |
|
528 .is-menu-open .wp-block-navigation__responsive-close, |
|
529 .is-menu-open .wp-block-navigation__responsive-dialog, |
|
530 .is-menu-open .wp-block-navigation__responsive-container-content { |
|
531 box-sizing: border-box; |
|
532 } |
|
533 |
|
534 .wp-block-navigation__responsive-dialog { |
|
535 position: relative; |
|
536 } |
|
537 |
|
538 html.has-modal-open { |
|
539 overflow: hidden; |
|
540 } |
|