Keine Beschreibung

footer-navigation.scss 1.4KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. .footer-navigation {
  2. margin-top: calc(2 * var(--global--spacing-vertical));
  3. margin-bottom: var(--global--spacing-vertical);
  4. color: var(--footer--color-text);
  5. font-size: var(--global--font-size-xs);
  6. font-family: var(--footer--font-family);
  7. }
  8. .footer-navigation-wrapper {
  9. display: flex;
  10. justify-content: center;
  11. flex-wrap: wrap;
  12. list-style: none;
  13. padding-left: 0;
  14. li {
  15. display: inline;
  16. // This is to prevent hover styles from overlapping when the menu wraps.
  17. line-height: 3;
  18. a {
  19. padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding);
  20. transition: transform 0.1s ease;
  21. color: var(--footer--color-link);
  22. &:link,
  23. &:visited,
  24. &:active {
  25. color: var(--footer--color-link);
  26. }
  27. &:hover {
  28. text-decoration: underline;
  29. text-decoration-style: dotted;
  30. text-decoration-skip-ink: none;
  31. color: var(--footer--color-link-hover);
  32. }
  33. &:focus {
  34. .is-dark-theme & {
  35. .svg-icon {
  36. fill: var(--wp--style--color--link, var(--global--color-background));
  37. }
  38. }
  39. // Change colors when the body background is white.
  40. .has-background-white & {
  41. .svg-icon {
  42. fill: var(--wp--style--color--link, var(--global--color-white));
  43. }
  44. }
  45. }
  46. }
  47. .svg-icon {
  48. vertical-align: middle;
  49. fill: var(--footer--color-link);
  50. &:hover {
  51. transform: scale(1.1);
  52. }
  53. }
  54. }
  55. .sub-menu-toggle,
  56. .menu-item-description {
  57. display: none;
  58. }
  59. }