123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187 |
- // See https://github.com/WordPress/gutenberg/issues/39052
- .wp-block-navigation {
- // See https://github.com/WordPress/gutenberg/issues/34648
- .has-child .wp-block-navigation__submenu-container {
- background-color: var(--wp--custom--navigation--submenu--color--background);
- border: var(--wp--custom--navigation--submenu--border--width) var(--wp--custom--navigation--submenu--border--style) var(--wp--custom--navigation--submenu--border--color);
- a {
- color: var(--wp--custom--navigation--submenu--color--text);
- }
- }
- &.is-responsive {
- &:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
- background-color: var(--wp--custom--color--background);
- color: var(--wp--custom--color--foreground);
- padding-left: var(--wp--custom--gap--horizontal);
- padding-right: var(--wp--custom--gap--horizontal);
- }
- ul.wp-block-social-links {
- margin: 0;
- gap: var(--wp--custom--gap--baseline);
- }
- }
- &.is-responsive .is-menu-open {
- font-size: var(--wp--preset--font-size--medium);
- .wp-block-navigation__responsive-container-content {
- align-items: var(--navigation-layout-justification-setting, flex-start);
- justify-content: space-between;
- flex-wrap: nowrap;
- }
- .wp-block-navigation__container {
- row-gap: 0.5rem;
- align-items: var(--navigation-layout-justification-setting, flex-start);
- flex: unset;
- padding-bottom: 0;
- }
- .wp-block-navigation-item {
- align-items: var(--navigation-layout-justification-setting, flex-start);
- }
- .wp-block-navigation__responsive-container-content .has-child { // Needed for specificity to beat the navigation block CSS
- .wp-block-navigation__submenu-container {
- font-size: var(--wp--custom--font-sizes--normal);
- padding-bottom: 0;
- padding-left: var(--wp--custom--gap--horizontal);
- padding-top: 0.5rem;
- row-gap: 0.5rem;
- }
- }
- ul.wp-block-social-links {
- justify-content: flex-start;
- }
- }
- }
- /* Additional styling for header-minimal */
- .wp-block-navigation.blockbase-responsive-navigation-minimal {
- &.is-responsive .is-menu-open.wp-block-navigation__responsive-container {
- font-size: var(--wp--preset--font-size--large);
- font-weight: 200;
- .wp-block-navigation__container {
- row-gap: 1rem;
- }
- .wp-block-navigation__responsive-container-content { // Needed for specificity to beat the navigation block CSS
- align-items: flex-start;
- margin: 0 auto;
- max-width: 800px; // This should match the content width
- flex-wrap: nowrap;
- .wp-block-navigation-item {
- row-gap: 0;
- > a:hover {
- text-decoration-line: underline;
- }
- &.current-menu-item > a {
- text-decoration: underline;
- }
- }
- .wp-block-navigation__container {
- flex-grow: 1;
- justify-content: center;
- }
- }
- ul.wp-block-social-links {
- padding-bottom: calc(var(--wp--custom--gap--vertical) * 2);
- }
- .wp-block-navigation__responsive-container-content .has-child { // Needed for specificity to beat the navigation block CSS
- .wp-block-navigation__submenu-container {
- font-size: var(--wp--preset--font-size--medium);
- }
- }
- }
- }
- /* Additional Styling for header-linear */
- .wp-block-navigation.blockbase-responsive-navigation-linear {
- .wp-block-navigation-link a:hover {
- background: transparent;
- }
- .wp-block-pages-list__item .wp-block-pages-list__item__link,
- .wp-block-navigation-link__content {
- color: var(--wp--custom--color--foreground);
- &:hover {
- text-decoration: underline;
- }
- }
- &:not(.has-background) {
- .wp-block-navigation__submenu-container {
- background-color: var(--wp--custom--color--background);
- border-color: var(--wp--custom--color--tertiary);
- }
- }
- .wp-block-navigation__mobile-menu-open-button {
- color: var(--wp--custom--color--primary);
- }
- &.is-responsive .wp-block-navigation__responsive-container.is-menu-open {
- background-color: var(--wp--custom--color--tertiary);
- &.has-modal-open {
- .wp-block-pages-list__item,
- .wp-block-navigation-item {
- font-size: var(--wp--custom--font-sizes--normal);
- line-height: 50px;
- margin: 0;
- align-items: flex-end;
- &.has-child {
- .wp-block-pages-list__item__link,
- .wp-block-navigation-link__content {
- margin-right: 0;
- }
- .wp-block-navigation__submenu-container {
- gap: 0;
- padding: 0 19px 0 0;
- border-right: 1px solid var(--wp--custom--color--foreground);
- .wp-block-pages-list__item__link,
- .wp-block-navigation-item__content {
- padding: 0;
- font-size: var(--wp--custom--font-sizes--x-small);
- line-height: 40px;
- }
- }
- }
- }
- .wp-block-navigation__container {
- align-items: flex-end;
- }
- .wp-block-navigation__responsive-container-content {
- flex-direction: row-reverse;
- }
- }
- .wp-block-social-links {
- flex-direction: column;
- }
- }
- }
|