icon-link.css

Icon link component.

File

core/themes/claro/css/components/icon-link.css

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Icon link component.
  10. */
  11. :root {
  12. /* default */
  13. --icon-link-bg-color: var(--color-white);
  14. --icon-link-border-color: var(--color-gray-200);
  15. /* active */
  16. --icon-link--active-bg-color: var(--color-absolutezero);
  17. --icon-link--active-border-color: var(--color-absolutezero);
  18. /* hover */
  19. --icon-link--hover-bg-color: var(--color-bgblue-hover);
  20. --icon-link--hover-border-color: var(--color-gray-200-o-80);
  21. }
  22. .icon-link {
  23. display: flex;
  24. padding: 0;
  25. border: 1px solid var(--icon-link-border-color);
  26. border-radius: 50%;
  27. background-color: var(--icon-link-bg-color);
  28. &:hover {
  29. border-color: var(--icon-link--hover-border-color);
  30. background-color: var(--icon-link--hover-bg-color);
  31. }
  32. &:focus {
  33. box-shadow:
  34. 0 0 0 1.5px var(--color-white),
  35. 0 0 0 3.5px var(--color-focus);
  36. }
  37. &:active,
  38. .open >
  39. }
  40. .icon-link--small {
  41. &:focus {
  42. box-shadow:
  43. 0 0 0 1px var(--color-white),
  44. 0 0 0 3px var(--color-focus);
  45. }
  46. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.