_navigation.scss 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. // See https://github.com/WordPress/gutenberg/issues/39052
  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. padding-left: var(--wp--custom--gap--horizontal);
  16. padding-right: var(--wp--custom--gap--horizontal);
  17. }
  18. ul.wp-block-social-links {
  19. margin: 0;
  20. gap: var(--wp--custom--gap--baseline);
  21. }
  22. }
  23. &.is-responsive .is-menu-open {
  24. font-size: var(--wp--preset--font-size--medium);
  25. .wp-block-navigation__responsive-container-content {
  26. align-items: var(--navigation-layout-justification-setting, flex-start);
  27. justify-content: space-between;
  28. flex-wrap: nowrap;
  29. }
  30. .wp-block-navigation__container {
  31. row-gap: 0.5rem;
  32. align-items: var(--navigation-layout-justification-setting, flex-start);
  33. flex: unset;
  34. padding-bottom: 0;
  35. }
  36. .wp-block-navigation-item {
  37. align-items: var(--navigation-layout-justification-setting, flex-start);
  38. }
  39. .wp-block-navigation__responsive-container-content .has-child { // Needed for specificity to beat the navigation block CSS
  40. .wp-block-navigation__submenu-container {
  41. font-size: var(--wp--custom--font-sizes--normal);
  42. padding-bottom: 0;
  43. padding-left: var(--wp--custom--gap--horizontal);
  44. padding-top: 0.5rem;
  45. row-gap: 0.5rem;
  46. }
  47. }
  48. ul.wp-block-social-links {
  49. justify-content: flex-start;
  50. }
  51. }
  52. }
  53. /* Additional styling for header-minimal */
  54. .wp-block-navigation.blockbase-responsive-navigation-minimal {
  55. &.is-responsive .is-menu-open.wp-block-navigation__responsive-container {
  56. font-size: var(--wp--preset--font-size--large);
  57. font-weight: 200;
  58. .wp-block-navigation__container {
  59. row-gap: 1rem;
  60. }
  61. .wp-block-navigation__responsive-container-content { // Needed for specificity to beat the navigation block CSS
  62. align-items: flex-start;
  63. margin: 0 auto;
  64. max-width: 800px; // This should match the content width
  65. flex-wrap: nowrap;
  66. .wp-block-navigation-item {
  67. row-gap: 0;
  68. > a:hover {
  69. text-decoration-line: underline;
  70. }
  71. &.current-menu-item > a {
  72. text-decoration: underline;
  73. }
  74. }
  75. .wp-block-navigation__container {
  76. flex-grow: 1;
  77. justify-content: center;
  78. }
  79. }
  80. ul.wp-block-social-links {
  81. padding-bottom: calc(var(--wp--custom--gap--vertical) * 2);
  82. }
  83. .wp-block-navigation__responsive-container-content .has-child { // Needed for specificity to beat the navigation block CSS
  84. .wp-block-navigation__submenu-container {
  85. font-size: var(--wp--preset--font-size--medium);
  86. }
  87. }
  88. }
  89. }
  90. /* Additional Styling for header-linear */
  91. .wp-block-navigation.blockbase-responsive-navigation-linear {
  92. .wp-block-navigation-link a:hover {
  93. background: transparent;
  94. }
  95. .wp-block-pages-list__item .wp-block-pages-list__item__link,
  96. .wp-block-navigation-link__content {
  97. color: var(--wp--custom--color--foreground);
  98. &:hover {
  99. text-decoration: underline;
  100. }
  101. }
  102. &:not(.has-background) {
  103. .wp-block-navigation__submenu-container {
  104. background-color: var(--wp--custom--color--background);
  105. border-color: var(--wp--custom--color--tertiary);
  106. }
  107. }
  108. .wp-block-navigation__mobile-menu-open-button {
  109. color: var(--wp--custom--color--primary);
  110. }
  111. &.is-responsive .wp-block-navigation__responsive-container.is-menu-open {
  112. background-color: var(--wp--custom--color--tertiary);
  113. &.has-modal-open {
  114. .wp-block-pages-list__item,
  115. .wp-block-navigation-item {
  116. font-size: var(--wp--custom--font-sizes--normal);
  117. line-height: 50px;
  118. margin: 0;
  119. align-items: flex-end;
  120. &.has-child {
  121. .wp-block-pages-list__item__link,
  122. .wp-block-navigation-link__content {
  123. margin-right: 0;
  124. }
  125. .wp-block-navigation__submenu-container {
  126. gap: 0;
  127. padding: 0 19px 0 0;
  128. border-right: 1px solid var(--wp--custom--color--foreground);
  129. .wp-block-pages-list__item__link,
  130. .wp-block-navigation-item__content {
  131. padding: 0;
  132. font-size: var(--wp--custom--font-sizes--x-small);
  133. line-height: 40px;
  134. }
  135. }
  136. }
  137. }
  138. .wp-block-navigation__container {
  139. align-items: flex-end;
  140. }
  141. .wp-block-navigation__responsive-container-content {
  142. flex-direction: row-reverse;
  143. }
  144. }
  145. .wp-block-social-links {
  146. flex-direction: column;
  147. }
  148. }
  149. }