tfw
cbb7086e09
Added various FontAwesome font assets for enhanced icon support in the project. Updated images of team members and removed an outdated JavaScript bundle."
90 lines
2.8 KiB
SCSS
90 lines
2.8 KiB
SCSS
// mixins
|
|
// --------------------------
|
|
|
|
// base rendering for an icon
|
|
@mixin fa-icon {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
display: inline-block;
|
|
font-style: normal;
|
|
font-variant: normal;
|
|
font-weight: normal;
|
|
line-height: 1;
|
|
}
|
|
|
|
// sets relative font-sizing and alignment (in _sizing)
|
|
@mixin fa-size ($font-size) {
|
|
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
|
|
line-height: fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent
|
|
vertical-align: (fa-divide(6, $font-size) - fa-divide(3, 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
|
|
}
|
|
|
|
// only display content to screen readers
|
|
// see: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
|
|
// see: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
|
|
@mixin fa-sr-only() {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
|
|
// use in conjunction with .sr-only to only display content when it's focused
|
|
@mixin fa-sr-only-focusable() {
|
|
&:not(:focus) {
|
|
@include fa-sr-only();
|
|
}
|
|
}
|
|
|
|
// sets a specific icon family to use alongside style + icon mixins
|
|
@mixin fa-family-classic() {
|
|
@extend .fa-classic;
|
|
}
|
|
@mixin fa-family-duotone() {
|
|
@extend .fa-duotone;
|
|
}
|
|
@mixin fa-family-sharp() {
|
|
@extend .fa-sharp;
|
|
}
|
|
@mixin fa-family-sharp-duotone() {
|
|
@extend .fa-sharp-duotone;
|
|
}
|
|
|
|
// convenience mixins for declaring pseudo-elements by CSS variable,
|
|
// including all style-specific font properties
|
|
@mixin fa-icon-solid($fa-var) {
|
|
@extend .fa-solid;
|
|
|
|
& { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); }
|
|
}
|
|
@mixin fa-icon-regular($fa-var) {
|
|
@extend .fa-regular;
|
|
|
|
& { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); }
|
|
}
|
|
@mixin fa-icon-light($fa-var) {
|
|
@extend .fa-light;
|
|
|
|
& { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); }
|
|
}
|
|
@mixin fa-icon-thin($fa-var) {
|
|
@extend .fa-thin;
|
|
|
|
& { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); }
|
|
}
|
|
@mixin fa-icon-duotone($fa-var) {
|
|
@extend .fa-duotone;
|
|
|
|
& { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); }
|
|
}
|
|
@mixin fa-icon-brands($fa-var) {
|
|
@extend .fa-brands;
|
|
|
|
& { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); }
|
|
}
|