Sin descripción

footer.scss 1.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. // Footer
  2. .site-footer {
  3. padding-top: 0;
  4. padding-bottom: calc(1.7 * var(--global--spacing-vertical));
  5. @extend %responsive-alignwide-width;
  6. // Increase the top vertical spacing when there is no widget area.
  7. .no-widgets & {
  8. margin-top: calc(6 * var(--global--spacing-vertical));
  9. }
  10. @include media(mobile-only) {
  11. .no-widgets & {
  12. margin-top: calc(3 * var(--global--spacing-vertical));
  13. }
  14. }
  15. }
  16. // Footer Branding
  17. .site-footer > .site-info {
  18. padding-top: var(--global--spacing-vertical);
  19. color: var(--footer--color-text);
  20. font-family: var(--footer--font-family);
  21. font-size: var(--footer--font-size);
  22. line-height: var(--global--line-height-body);
  23. border-top: 3px solid var(--global--color-border);
  24. .site-name {
  25. text-transform: var(--branding--title--text-transform);
  26. font-size: var(--branding--title--font-size);
  27. }
  28. .powered-by {
  29. margin-top: calc(0.5 * var(--global--spacing-vertical));
  30. }
  31. @include media(desktop) {
  32. display: flex;
  33. align-items: center;
  34. .powered-by {
  35. margin-top: initial;
  36. margin-left: auto;
  37. }
  38. }
  39. a {
  40. color: var(--footer--color-link);
  41. &:link,
  42. &:visited,
  43. &:active {
  44. color: var(--footer--color-link);
  45. }
  46. &:hover {
  47. color: var(--footer--color-link-hover);
  48. }
  49. &:focus {
  50. color: var(--footer--color-link-hover);
  51. .is-dark-theme & {
  52. color: var(--wp--style--color--link, var(--global--color-background));
  53. }
  54. // Change colors when the body background is white.
  55. .has-background-white & {
  56. color: var(--wp--style--color--link, var(--global--color-white));
  57. }
  58. }
  59. }
  60. }