_base.scss 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. // Links styles
  2. a {
  3. border-bottom: 1px solid var(--global--color-secondary);
  4. color: var( --wp--style--color--link, var(--global--color-primary) );
  5. text-decoration: none;
  6. transition: border-color 0.1s ease-out;
  7. &:hover,
  8. &:focus {
  9. border-bottom-color: transparent;
  10. }
  11. &:hover {
  12. color: var(--global--color-primary-hover);
  13. }
  14. &:focus {
  15. color: var(--global--color-secondary);
  16. }
  17. &:active {
  18. color: var( --wp--style--color--link, var(--global--color-primary) );
  19. }
  20. // If a custom link color has been assigned,
  21. // switch the color of the bottom border too.
  22. .has-link-color & {
  23. border-bottom: 1px solid var( --wp--style--color--link, var(--global--color-primary) );
  24. &:hover,
  25. &:focus {
  26. border-bottom-color: transparent;
  27. }
  28. }
  29. }
  30. // Enforce the custom link color even if a custom background color has been set.
  31. // The extra specificity here is required to override the background color styles.
  32. .has-background:not(.has-background-background-color) {
  33. // Target both current level and nested block.
  34. .has-link-color a,
  35. &.has-link-color a {
  36. color: var( --wp--style--color--link, var(--global--color-primary) );
  37. }
  38. }
  39. button,
  40. a {
  41. cursor: pointer;
  42. }