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