_style.scss 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. .wp-block-navigation {
  2. .wp-block-navigation-link {
  3. padding: 0;
  4. .wp-block-navigation-link__content {
  5. padding: var(--primary-nav--padding);
  6. }
  7. .wp-block-navigation-link__label {
  8. font-family: var(--primary-nav--font-family);
  9. font-size: var(--primary-nav--font-size);
  10. font-weight: var(--primary-nav--font-weight);
  11. }
  12. }
  13. .wp-block-navigation-link__submenu-icon {
  14. padding: 0;
  15. }
  16. // Top level navigation container.
  17. > .wp-block-navigation__container {
  18. .has-child {
  19. .wp-block-navigation-link {
  20. display: inherit;
  21. }
  22. .wp-block-navigation__container {
  23. border: none;
  24. left: 0;
  25. margin-left: var(--primary-nav--padding);
  26. //min-width: max-content;
  27. opacity: 0;
  28. padding: 0;
  29. position: inherit;
  30. top: inherit;
  31. .wp-block-navigation-link {
  32. .wp-block-navigation-link__content {
  33. display: inline-block;
  34. padding: calc( 0.5 * var(--primary-nav--padding) ) var(--primary-nav--padding);
  35. }
  36. }
  37. .wp-block-navigation-link__submenu-icon {
  38. display: none;
  39. }
  40. }
  41. &:hover, &:focus-within {
  42. .wp-block-navigation__container {
  43. display: block;
  44. opacity: 1;
  45. visibility: visible;
  46. }
  47. }
  48. }
  49. }
  50. > .wp-block-navigation__container {
  51. > .has-child {
  52. > .wp-block-navigation__container {
  53. background: var(--global--color-background);
  54. box-shadow: var(--global--elevation);
  55. margin: 0;
  56. padding: 0;
  57. position: absolute;
  58. top: 100%;
  59. }
  60. }
  61. }
  62. &:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link:not(.has-text-color) {
  63. color: var(--primary-nav--color-link);
  64. }
  65. &:not(.has-text-color){
  66. .wp-block-navigation-link {
  67. > a {
  68. &:hover, &:focus {
  69. color: var(--primary-nav--color-link-hover);
  70. }
  71. }
  72. }
  73. .wp-block-navigation-link__content {
  74. color: currentColor;
  75. }
  76. }
  77. }