_mixins.less 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. // mixins
  2. // --------------------------
  3. // base rendering for an icon
  4. .fa-icon() {
  5. -moz-osx-font-smoothing: grayscale;
  6. -webkit-font-smoothing: antialiased;
  7. display: inline-block;
  8. font-style: normal;
  9. font-variant: normal;
  10. font-weight: normal;
  11. line-height: 1;
  12. }
  13. // sets relative font-sizing and alignment (in _sizing)
  14. .fa-size(@font-size) {
  15. font-size: (@font-size / @fa-size-scale-base) * 1em; // converts step in sizing scale into an em-based value that's relative to the scale's base
  16. line-height: (1 / @font-size) * 1em; // sets the line-height of the icon back to that of it's parent
  17. vertical-align: ((6 / @font-size) - (3 / 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
  18. }
  19. // only display content to screen readers
  20. // see: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
  21. // see: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
  22. .fa-sr-only() {
  23. position: absolute;
  24. width: 1px;
  25. height: 1px;
  26. padding: 0;
  27. margin: -1px;
  28. overflow: hidden;
  29. clip: rect(0, 0, 0, 0);
  30. white-space: nowrap;
  31. border-width: 0;
  32. }
  33. // use in conjunction with .sr-only to only display content when it's focused
  34. .fa-sr-only-focusable() {
  35. &:not(:focus) {
  36. .fa-sr-only();
  37. }
  38. }
  39. // sets a specific icon family to use alongside style + icon mixins
  40. .fa-family-classic() {
  41. font-family: 'Font Awesome 6 Free';
  42. }
  43. // convenience mixins for declaring pseudo-elements by CSS variable,
  44. // including all style-specific font properties, and both the ::before
  45. // and ::after elements in the duotone case.
  46. .fa-icon-solid(@fa-var) {
  47. .fa-icon;
  48. .fa-solid;
  49. &::before {
  50. content: @fa-var;
  51. }
  52. }
  53. .fa-icon-regular(@fa-var) {
  54. .fa-icon;
  55. .fa-regular;
  56. &::before {
  57. content: @fa-var;
  58. }
  59. }
  60. .fa-icon-brands(@fa-var) {
  61. .fa-icon;
  62. .fa-brands;
  63. &::before {
  64. content: @fa-var;
  65. }
  66. }