_navigation.scss 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. // See https://github.com/WordPress/gutenberg/issues/34648
  2. .wp-block-navigation {
  3. // See https://github.com/WordPress/gutenberg/issues/34648
  4. .has-child .wp-block-navigation__submenu-container {
  5. background-color: var(--wp--custom--navigation--submenu--color--background);
  6. border: var(--wp--custom--navigation--submenu--border--width) var(--wp--custom--navigation--submenu--border--style) var(--wp--custom--navigation--submenu--border--color);
  7. a {
  8. color: var(--wp--custom--navigation--submenu--color--text);
  9. }
  10. }
  11. &.is-responsive {
  12. &:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
  13. background-color: var(--wp--custom--color--background);
  14. color: var(--wp--custom--color--foreground);
  15. }
  16. ul.wp-block-social-links {
  17. margin: 0;
  18. gap: var(--wp--custom--gap--baseline);
  19. }
  20. }
  21. }
  22. .wp-block-navigation.is-style-blockbase-navigation-improved-responsive {
  23. &.is-responsive .is-menu-open {
  24. font-size: var(--wp--preset--font-size--medium);
  25. .wp-block-navigation__container {
  26. row-gap: 0.5rem;
  27. align-items: flex-start;
  28. flex: unset;
  29. padding-bottom: 0;
  30. }
  31. .wp-block-navigation-item {
  32. align-items: flex-start;
  33. }
  34. .wp-block-navigation__responsive-container-content .has-child { // Needed for specificity to beat the navigation block CSS
  35. .wp-block-navigation__submenu-container {
  36. font-size: var(--wp--preset--font-size--normal);
  37. padding-bottom: 0;
  38. padding-left: var(--wp--custom--gap--horizontal);
  39. padding-top: 0.5rem;
  40. row-gap: 0.5rem;
  41. }
  42. }
  43. ul.wp-block-social-links {
  44. justify-content: flex-start;
  45. }
  46. }
  47. }