You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

464 lines
17 KiB

1 year ago
  1. .wp-block-navigation{
  2. --navigation-layout-justification-setting:flex-start;
  3. --navigation-layout-direction:row;
  4. --navigation-layout-wrap:wrap;
  5. --navigation-layout-justify:flex-start;
  6. --navigation-layout-align:center;
  7. position:relative;
  8. }
  9. .wp-block-navigation ul{
  10. margin-bottom:0;
  11. margin-right:0;
  12. margin-top:0;
  13. padding-right:0;
  14. }
  15. .wp-block-navigation ul,.wp-block-navigation ul li{
  16. list-style:none;
  17. padding:0;
  18. }
  19. .wp-block-navigation .wp-block-navigation-item{
  20. align-items:center;
  21. background-color:inherit;
  22. display:flex;
  23. position:relative;
  24. }
  25. .wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container:empty{
  26. display:none;
  27. }
  28. .wp-block-navigation .wp-block-navigation-item__content{
  29. display:block;
  30. }
  31. .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content{
  32. color:inherit;
  33. }
  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. text-decoration:underline;
  36. }
  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. text-decoration:line-through;
  39. }
  40. .wp-block-navigation:where(:not([class*=has-text-decoration])) a{
  41. text-decoration:none;
  42. }
  43. .wp-block-navigation:where(:not([class*=has-text-decoration])) a:active,.wp-block-navigation:where(:not([class*=has-text-decoration])) a:focus{
  44. text-decoration:none;
  45. }
  46. .wp-block-navigation .wp-block-navigation__submenu-icon{
  47. align-self:center;
  48. background-color:inherit;
  49. border:none;
  50. color:currentColor;
  51. display:inline-block;
  52. font-size:inherit;
  53. height:.6em;
  54. line-height:0;
  55. margin-right:.25em;
  56. padding:0;
  57. width:.6em;
  58. }
  59. .wp-block-navigation .wp-block-navigation__submenu-icon svg{
  60. stroke:currentColor;
  61. display:inline-block;
  62. height:inherit;
  63. margin-top:.075em;
  64. width:inherit;
  65. }
  66. .wp-block-navigation.is-vertical{
  67. --navigation-layout-direction:column;
  68. --navigation-layout-justify:initial;
  69. --navigation-layout-align:flex-start;
  70. }
  71. .wp-block-navigation.no-wrap{
  72. --navigation-layout-wrap:nowrap;
  73. }
  74. .wp-block-navigation.items-justified-center{
  75. --navigation-layout-justification-setting:center;
  76. --navigation-layout-justify:center;
  77. }
  78. .wp-block-navigation.items-justified-center.is-vertical{
  79. --navigation-layout-align:center;
  80. }
  81. .wp-block-navigation.items-justified-right{
  82. --navigation-layout-justification-setting:flex-end;
  83. --navigation-layout-justify:flex-end;
  84. }
  85. .wp-block-navigation.items-justified-right.is-vertical{
  86. --navigation-layout-align:flex-end;
  87. }
  88. .wp-block-navigation.items-justified-space-between{
  89. --navigation-layout-justification-setting:space-between;
  90. --navigation-layout-justify:space-between;
  91. }
  92. .wp-block-navigation .has-child .wp-block-navigation__submenu-container{
  93. align-items:normal;
  94. background-color:inherit;
  95. color:inherit;
  96. display:flex;
  97. flex-direction:column;
  98. height:0;
  99. opacity:0;
  100. overflow:hidden;
  101. position:absolute;
  102. right:-1px;
  103. top:100%;
  104. transition:opacity .1s linear;
  105. visibility:hidden;
  106. width:0;
  107. z-index:2;
  108. }
  109. .wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content{
  110. display:flex;
  111. flex-grow:1;
  112. }
  113. .wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content .wp-block-navigation__submenu-icon{
  114. margin-left:0;
  115. margin-right:auto;
  116. }
  117. .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  118. margin:0;
  119. }
  120. @media (min-width:782px){
  121. .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{
  122. right:100%;
  123. top:-1px;
  124. }
  125. .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container:before{
  126. background:transparent;
  127. content:"";
  128. display:block;
  129. height:100%;
  130. left:100%;
  131. position:absolute;
  132. width:.5em;
  133. }
  134. .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon{
  135. margin-left:.25em;
  136. }
  137. .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg{
  138. transform:rotate(90deg);
  139. }
  140. }
  141. .wp-block-navigation .has-child:not(.open-on-click):hover>.wp-block-navigation__submenu-container{
  142. height:auto;
  143. min-width:200px;
  144. opacity:1;
  145. overflow:visible;
  146. visibility:visible;
  147. width:auto;
  148. }
  149. .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within>.wp-block-navigation__submenu-container{
  150. height:auto;
  151. min-width:200px;
  152. opacity:1;
  153. overflow:visible;
  154. visibility:visible;
  155. width:auto;
  156. }
  157. .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container{
  158. height:auto;
  159. min-width:200px;
  160. opacity:1;
  161. overflow:visible;
  162. visibility:visible;
  163. width:auto;
  164. }
  165. .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container{
  166. right:0;
  167. top:100%;
  168. }
  169. @media (min-width:782px){
  170. .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{
  171. right:100%;
  172. top:0;
  173. }
  174. }
  175. .wp-block-navigation-submenu{
  176. display:flex;
  177. position:relative;
  178. }
  179. .wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg{
  180. stroke:currentColor;
  181. }
  182. button.wp-block-navigation-item__content{
  183. background-color:transparent;
  184. border:none;
  185. color:currentColor;
  186. font-family:inherit;
  187. font-size:inherit;
  188. font-style:inherit;
  189. font-weight:inherit;
  190. line-height:inherit;
  191. text-align:right;
  192. text-transform:inherit;
  193. }
  194. .wp-block-navigation-submenu__toggle{
  195. cursor:pointer;
  196. }
  197. .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle{
  198. padding-left:.85em;
  199. }
  200. .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle+.wp-block-navigation__submenu-icon{
  201. margin-right:-.6em;
  202. pointer-events:none;
  203. }
  204. .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{
  205. gap:inherit;
  206. }
  207. :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)){
  208. padding:.5em 1em;
  209. }
  210. :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){
  211. padding:.5em 1em;
  212. }
  213. .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{
  214. left:0;
  215. right:auto;
  216. }
  217. .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{
  218. left:-1px;
  219. right:-1px;
  220. }
  221. @media (min-width:782px){
  222. .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{
  223. left:100%;
  224. right:auto;
  225. }
  226. }
  227. .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{
  228. background-color:#fff;
  229. border:1px solid rgba(0,0,0,.15);
  230. }
  231. .wp-block-navigation.has-background .wp-block-navigation__submenu-container{
  232. background-color:inherit;
  233. }
  234. .wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container{
  235. color:#000;
  236. }
  237. .wp-block-navigation__container{
  238. align-items:var(--navigation-layout-align, initial);
  239. display:flex;
  240. flex-direction:var(--navigation-layout-direction, initial);
  241. flex-wrap:var(--navigation-layout-wrap, wrap);
  242. justify-content:var(--navigation-layout-justify, initial);
  243. list-style:none;
  244. margin:0;
  245. padding-right:0;
  246. }
  247. .wp-block-navigation__container .is-responsive{
  248. display:none;
  249. }
  250. .wp-block-navigation__container:only-child,.wp-block-page-list:only-child{
  251. flex-grow:1;
  252. }
  253. @keyframes overlay-menu__fade-in-animation{
  254. 0%{
  255. opacity:0;
  256. transform:translateY(.5em);
  257. }
  258. to{
  259. opacity:1;
  260. transform:translateY(0);
  261. }
  262. }
  263. .wp-block-navigation__responsive-container{
  264. bottom:0;
  265. display:none;
  266. left:0;
  267. position:fixed;
  268. right:0;
  269. top:0;
  270. }
  271. .wp-block-navigation__responsive-container :where(.wp-block-navigation-item a){
  272. color:inherit;
  273. }
  274. .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content{
  275. align-items:var(--navigation-layout-align, initial);
  276. display:flex;
  277. flex-direction:var(--navigation-layout-direction, initial);
  278. flex-wrap:var(--navigation-layout-wrap, wrap);
  279. justify-content:var(--navigation-layout-justify, initial);
  280. }
  281. .wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open){
  282. background-color:inherit !important;
  283. color:inherit !important;
  284. }
  285. .wp-block-navigation__responsive-container.is-menu-open{
  286. animation:overlay-menu__fade-in-animation .1s ease-out;
  287. animation-fill-mode:forwards;
  288. background-color:inherit;
  289. display:flex;
  290. flex-direction:column;
  291. overflow:auto;
  292. 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);
  293. z-index:100000;
  294. }
  295. @media (prefers-reduced-motion:reduce){
  296. .wp-block-navigation__responsive-container.is-menu-open{
  297. animation-delay:0s;
  298. animation-duration:1ms;
  299. }
  300. }
  301. .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  302. align-items:var(--navigation-layout-justification-setting, inherit);
  303. display:flex;
  304. flex-direction:column;
  305. flex-wrap:nowrap;
  306. overflow:visible;
  307. padding-top:calc(2rem + 24px);
  308. }
  309. .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{
  310. justify-content:flex-start;
  311. }
  312. .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon{
  313. display:none;
  314. }
  315. .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container{
  316. border:none;
  317. height:auto;
  318. min-width:200px;
  319. opacity:1;
  320. overflow:initial;
  321. padding-left:2rem;
  322. padding-right:2rem;
  323. position:static;
  324. visibility:visible;
  325. width:auto;
  326. }
  327. .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{
  328. gap:inherit;
  329. }
  330. .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container{
  331. padding-top:var(--wp--style--block-gap, 2em);
  332. }
  333. .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content{
  334. padding:0;
  335. }
  336. .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{
  337. align-items:var(--navigation-layout-justification-setting, initial);
  338. display:flex;
  339. flex-direction:column;
  340. }
  341. .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{
  342. background:transparent !important;
  343. color:inherit !important;
  344. }
  345. .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{
  346. left:auto;
  347. right:auto;
  348. }
  349. @media (min-width:600px){
  350. .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){
  351. background-color:inherit;
  352. display:block;
  353. position:relative;
  354. width:100%;
  355. z-index:auto;
  356. }
  357. .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close{
  358. display:none;
  359. }
  360. .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{
  361. right:0;
  362. }
  363. }
  364. .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open{
  365. background-color:#fff;
  366. }
  367. .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open{
  368. color:#000;
  369. }
  370. .wp-block-navigation__toggle_button_label{
  371. font-size:1rem;
  372. font-weight:700;
  373. }
  374. .wp-block-navigation__responsive-container-close,.wp-block-navigation__responsive-container-open{
  375. background:transparent;
  376. border:none;
  377. color:currentColor;
  378. cursor:pointer;
  379. margin:0;
  380. padding:0;
  381. text-transform:inherit;
  382. vertical-align:middle;
  383. }
  384. .wp-block-navigation__responsive-container-close svg,.wp-block-navigation__responsive-container-open svg{
  385. fill:currentColor;
  386. display:block;
  387. height:24px;
  388. pointer-events:none;
  389. width:24px;
  390. }
  391. .wp-block-navigation__responsive-container-open{
  392. display:flex;
  393. }
  394. .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open{
  395. font-family:inherit;
  396. font-size:inherit;
  397. font-weight:inherit;
  398. }
  399. @media (min-width:600px){
  400. .wp-block-navigation__responsive-container-open:not(.always-shown){
  401. display:none;
  402. }
  403. }
  404. .wp-block-navigation__responsive-container-close{
  405. left:0;
  406. position:absolute;
  407. top:0;
  408. z-index:2;
  409. }
  410. .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close{
  411. font-family:inherit;
  412. font-size:inherit;
  413. font-weight:inherit;
  414. }
  415. .wp-block-navigation__responsive-close{
  416. width:100%;
  417. }
  418. .has-modal-open .wp-block-navigation__responsive-close{
  419. margin-left:auto;
  420. margin-right:auto;
  421. max-width:var(--wp--style--global--wide-size, 100%);
  422. }
  423. .wp-block-navigation__responsive-close:focus{
  424. outline:none;
  425. }
  426. .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{
  427. box-sizing:border-box;
  428. }
  429. .wp-block-navigation__responsive-dialog{
  430. position:relative;
  431. }
  432. .has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog{
  433. margin-top:46px;
  434. }
  435. @media (min-width:782px){
  436. .has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog{
  437. margin-top:32px;
  438. }
  439. }
  440. html.has-modal-open{
  441. overflow:hidden;
  442. }