_mixins.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. // mixins
  2. // --------------------------
  3. // base rendering for an icon
  4. @mixin fa-icon {
  5. -webkit-font-smoothing: antialiased;
  6. -moz-osx-font-smoothing: grayscale;
  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. @mixin fa-size ($font-size) {
  15. font-size: fa-divide($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: fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent
  17. vertical-align: (fa-divide(6, $font-size) - fa-divide(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. @mixin 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. @mixin fa-sr-only-focusable() {
  35. &:not(:focus) {
  36. @include fa-sr-only();
  37. }
  38. }
  39. // sets a specific icon family to use alongside style + icon mixins
  40. // convenience mixins for declaring pseudo-elements by CSS variable,
  41. // including all style-specific font properties, and both the ::before
  42. // and ::after elements in the duotone case.
  43. @mixin fa-icon-solid($fa-var) {
  44. @extend %fa-icon;
  45. @extend .fa-solid;
  46. &::before {
  47. content: unquote("\"#{ $fa-var }\"");
  48. }
  49. }
  50. @mixin fa-icon-regular($fa-var) {
  51. @extend %fa-icon;
  52. @extend .fa-regular;
  53. &::before {
  54. content: unquote("\"#{ $fa-var }\"");
  55. }
  56. }
  57. @mixin fa-icon-brands($fa-var) {
  58. @extend %fa-icon;
  59. @extend .fa-brands;
  60. &::before {
  61. content: unquote("\"#{ $fa-var }\"");
  62. }
  63. }