| @@ -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 |
| @@ -161,9 +167,16 @@ | ||
| 161 | 167 | .wp-block-navigation.is-vertical { |
| 162 | 168 | --navigation-layout-direction: column; |
| 163 | 169 | --navigation-layout-justify: initial; |
| 164 | 170 | --navigation-layout-align: flex-start; |
| 171 | + text-align: var(--navigation-layout-text-align, inherit); | |
| 165 | 172 | } |
| 173 | +.wp-block-navigation.is-vertical .wp-block-navigation-item__content { | |
| 174 | + text-align: inherit; | |
| 175 | +} | |
| 176 | +.wp-block-navigation.is-vertical .wp-block-navigation-item:not(.open-always) > .wp-block-navigation__submenu-container { | |
| 177 | + text-align: initial; | |
| 178 | +} | |
| 166 | 179 | .wp-block-navigation.no-wrap { |
| 167 | 180 | --navigation-layout-wrap: nowrap; |
| 168 | 181 | } |
| 169 | 182 | .wp-block-navigation.items-justified-center { |
| @@ -168,8 +181,9 @@ | ||
| 168 | 181 | } |
| 169 | 182 | .wp-block-navigation.items-justified-center { |
| 170 | 183 | --navigation-layout-justification-setting: center; |
| 171 | 184 | --navigation-layout-justify: center; |
| 185 | + --navigation-layout-text-align: center; | |
| 172 | 186 | } |
| 173 | 187 | .wp-block-navigation.items-justified-center.is-vertical { |
| 174 | 188 | --navigation-layout-align: center; |
| 175 | 189 | } |
| @@ -175,8 +189,9 @@ | ||
| 175 | 189 | } |
| 176 | 190 | .wp-block-navigation.items-justified-right { |
| 177 | 191 | --navigation-layout-justification-setting: flex-end; |
| 178 | 192 | --navigation-layout-justify: flex-end; |
| 193 | + --navigation-layout-text-align: end; | |
| 179 | 194 | } |
| 180 | 195 | .wp-block-navigation.items-justified-right.is-vertical { |
| 181 | 196 | --navigation-layout-align: flex-end; |
| 182 | 197 | } |
| @@ -247,9 +262,9 @@ | ||
| 247 | 262 | transform: rotate(-90deg); |
| 248 | 263 | } |
| 249 | 264 | } |
| 250 | 265 | @media (hover: hover) { |
| 251 | - .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container { | |
| 266 | + .wp-block-navigation .has-child:not(.open-on-click):not(.open-always):hover > .wp-block-navigation__submenu-container { | |
| 252 | 267 | visibility: visible; |
| 253 | 268 | overflow: visible; |
| 254 | 269 | opacity: 1; |
| 255 | 270 | width: auto; |
| @@ -256,10 +271,9 @@ | ||
| 256 | 271 | height: auto; |
| 257 | 272 | min-width: 200px; |
| 258 | 273 | } |
| 259 | 274 | } |
| 260 | -.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container, | |
| 261 | -.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container { | |
| 275 | +.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):not(.open-always):focus-within > .wp-block-navigation__submenu-container, .wp-block-navigation .has-child:not(.open-always) .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container { | |
| 262 | 276 | visibility: visible; |
| 263 | 277 | overflow: visible; |
| 264 | 278 | opacity: 1; |
| 265 | 279 | width: auto; |
| @@ -307,8 +321,9 @@ | ||
| 307 | 321 | position: static; |
| 308 | 322 | border: none; |
| 309 | 323 | background-color: transparent; |
| 310 | 324 | color: inherit; |
| 325 | + box-shadow: none !important; | |
| 311 | 326 | } |
| 312 | 327 | |
| 313 | 328 | .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container { |
| 314 | 329 | left: 0; |
| @@ -514,8 +529,9 @@ | ||
| 514 | 529 | display: flex; |
| 515 | 530 | flex-direction: column; |
| 516 | 531 | flex-wrap: nowrap; |
| 517 | 532 | align-items: var(--navigation-layout-justification-setting, inherit); |
| 533 | + text-align: var(--navigation-layout-text-align, inherit); | |
| 518 | 534 | } |
| 519 | 535 | .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content, |
| 520 | 536 | .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-page-list, |
| 521 | 537 | .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container { |
| @@ -541,11 +557,13 @@ | ||
| 541 | 557 | gap: inherit; |
| 542 | 558 | } |
| 543 | 559 | .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container { |
| 544 | 560 | padding-top: var(--wp--style--block-gap, 2em); |
| 561 | + text-align: inherit; | |
| 545 | 562 | } |
| 546 | 563 | .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content { |
| 547 | 564 | padding: 0; |
| 565 | + text-align: inherit; | |
| 548 | 566 | } |
| 549 | 567 | .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container, |
| 550 | 568 | .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation-item, |
| 551 | 569 | .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-page-list { |
| @@ -559,8 +577,11 @@ | ||
| 559 | 577 | .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-page-list { |
| 560 | 578 | color: inherit !important; |
| 561 | 579 | background: transparent !important; |
| 562 | 580 | } |
| 581 | +.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation-item .wp-block-navigation__submenu-container { | |
| 582 | + box-shadow: none !important; | |
| 583 | +} | |
| 563 | 584 | .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { |
| 564 | 585 | right: auto; |
| 565 | 586 | left: auto; |
| 566 | 587 | } |
| @@ -606,9 +627,9 @@ | ||
| 606 | 627 | } |
| 607 | 628 | |
| 608 | 629 | .wp-block-navigation__toggle_button_label { |
| 609 | 630 | font-size: 1rem; |
| 610 | - font-weight: bold; | |
| 631 | + font-weight: 700; | |
| 611 | 632 | } |
| 612 | 633 | |
| 613 | 634 | .wp-block-navigation__responsive-container-open, |
| 614 | 635 | .wp-block-navigation__responsive-container-close { |
