_mixins.scss 1.2 KB

12345678910111213141516171819202122232425262728
  1. // mixins
  2. // --------------------------
  3. @use 'variables' as v;
  4. // base rendering for an icon
  5. @mixin fa-icon($family: v.$family) {
  6. --_#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family, var(--#{v.$css-prefix}-style-family, '#{$family}'));
  7. -webkit-font-smoothing: antialiased;
  8. -moz-osx-font-smoothing: grayscale;
  9. display: var(--#{v.$css-prefix}-display, #{v.$display});
  10. font-family: var(--_#{v.$css-prefix}-family);
  11. font-feature-settings: normal;
  12. font-style: normal;
  13. font-synthesis: none;
  14. font-variant: normal;
  15. font-weight: var(--#{v.$css-prefix}-style, #{v.$style});
  16. line-height: 1;
  17. text-align: center;
  18. text-rendering: auto;
  19. width: var(--#{v.$css-prefix}-width, #{v.$fw-width});
  20. }
  21. // sets relative font-sizing and alignment (in _sizing)
  22. @mixin fa-size ($font-size) {
  23. font-size: calc(#{$font-size} / #{v.$size-scale-base} * 1em); /* converts a #{$font-size}px size into an em-based value that's relative to the scale's #{v.$size-scale-base}px base */
  24. line-height: calc(1 / #{$font-size} * 1em); /* sets the line-height of the icon back to that of it's parent */
  25. vertical-align: calc(((6 / #{$font-size}) - (3 / 8)) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
  26. }