font-awesome-sass 5.13.1 → 6.0.0

data/assets/stylesheets/font-awesome/_list.scss

@@ -1,18 +1,18 @@
-// List Icons
+// icons in a list
 // -------------------------
 
 .#{$fa-css-prefix}-ul {
   list-style-type: none;
-  margin-left: $fa-li-width * 5/4;
+  margin-left: var(--#{$fa-css-prefix}-li-margin, #{$fa-li-margin});
   padding-left: 0;
 
   > li { position: relative; }
 }
 
 .#{$fa-css-prefix}-li {
-  left: -$fa-li-width;
+  left: calc(var(--#{$fa-css-prefix}-li-width, #{$fa-li-width}) * -1);
   position: absolute;
   text-align: center;
-  width: $fa-li-width;
+  width: var(--#{$fa-css-prefix}-li-width, #{$fa-li-width});
   line-height: inherit;
 }

data/assets/stylesheets/font-awesome/_mixins.scss

@@ -1,6 +1,7 @@
-// Mixins
+// mixins
 // --------------------------
 
+// base rendering for an icon
 @mixin fa-icon {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -11,46 +12,62 @@
   line-height: 1;
 }
 
-@mixin fa-icon-rotate($degrees, $rotation) {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
-  transform: rotate($degrees);
+// 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
 }
 
-@mixin fa-icon-flip($horiz, $vert, $rotation) {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
-  transform: scale($horiz, $vert);
+// 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();
+  }
+}
 
-// Only display content to screen readers. A la Bootstrap 4.
-//
-// See: http://a11yproject.com/posts/how-to-hide-content/
+// convenience mixins for declaring pseudo-elements by CSS variable,
+// including all style-specific font properties, and both the ::before
+// and ::after elements in the duotone case.
+@mixin fa-icon-solid($fa-var) {
+  @extend %fa-icon;
+  @extend .fa-solid;
 
-@mixin sr-only {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
+  &::before {
+    content: unquote("\"#{ $fa-var }\"");
+  }
 }
 
-// Use in conjunction with .sr-only to only display content when it's focused.
-//
-// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
-//
-// Credit: HTML5 Boilerplate
-
-@mixin sr-only-focusable {
-  &:active,
-  &:focus {
-    clip: auto;
-    height: auto;
-    margin: 0;
-    overflow: visible;
-    position: static;
-    width: auto;
+@mixin fa-icon-regular($fa-var) {
+  @extend %fa-icon;
+  @extend .fa-regular;
+
+  &::before {
+    content: unquote("\"#{ $fa-var }\"");
   }
 }
+
+@mixin fa-icon-brands($fa-var) {
+  @extend %fa-icon;
+  @extend .fa-brands;
+
+  &::before {
+    content: unquote("\"#{ $fa-var }\"");
+  }
+}
+

data/assets/stylesheets/font-awesome/_rotated-flipped.scss

@@ -1,24 +1,31 @@
-// Rotated & Flipped Icons
+// rotating + flipping icons
 // -------------------------
 
-.#{$fa-css-prefix}-rotate-90  { @include fa-icon-rotate(90deg, 1);  }
-.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
-.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
+.#{$fa-css-prefix}-rotate-90 {
+  transform: rotate(90deg);
+}
 
-.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
-.#{$fa-css-prefix}-flip-vertical   { @include fa-icon-flip(1, -1, 2); }
-.#{$fa-css-prefix}-flip-both, .#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(-1, -1, 2); }
+.#{$fa-css-prefix}-rotate-180 {
+  transform: rotate(180deg);
+}
 
-// Hook for IE8-9
-// -------------------------
+.#{$fa-css-prefix}-rotate-270 {
+  transform: rotate(270deg);
+}
+
+.#{$fa-css-prefix}-flip-horizontal {
+  transform: scale(-1, 1);
+}
+
+.#{$fa-css-prefix}-flip-vertical {
+  transform: scale(1, -1);
+}
+
+.#{$fa-css-prefix}-flip-both,
+.#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical { 
+  transform: scale(-1, -1);
+}
 
-:root {
-  .#{$fa-css-prefix}-rotate-90,
-  .#{$fa-css-prefix}-rotate-180,
-  .#{$fa-css-prefix}-rotate-270,
-  .#{$fa-css-prefix}-flip-horizontal,
-  .#{$fa-css-prefix}-flip-vertical,
-  .#{$fa-css-prefix}-flip-both {
-    filter: none;
-  }
+.#{$fa-css-prefix}-rotate-by {
+  transform: rotate(var(--#{$fa-css-prefix}-rotate-angle, none));
 }

data/assets/stylesheets/font-awesome/_screen-reader.scss

@@ -1,5 +1,14 @@
-// Screen Readers
+// screen-reader utilities
 // -------------------------
 
-.sr-only { @include sr-only; }
-.sr-only-focusable { @include sr-only-focusable; }
+// only display content to screen readers
+.sr-only,
+.fa-sr-only {
+  @include fa-sr-only; 
+}
+
+// use in conjunction with .sr-only to only display content when it's focused
+.sr-only-focusable,
+.fa-sr-only-focusable {
+  @include fa-sr-only-focusable; 
+}