@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.41

package/README.md

@@ -5,7 +5,7 @@
 - This assumes an environment is already set up for npm packages - if not, please use npm init following the steps at [https://docs.npmjs.com/getting-started/using-a-package.json](https://docs.npmjs.com/getting-started/using-a-package.json).
 - run `npm install @patternfly/patternfly --save`
 
-When you install PatternFly 4, the package includes:
+When you install PatternFly 5, the package includes:
 
 - a single file for the entire compiled library: `node_modules/@patternfly/patternfly/patternfly.css`
 - individual files with each component compiled separately: `node_modules/@patternfly/patternfly/<ComponentName>/styles.css`
@@ -16,9 +16,9 @@ Any of the files above are meant for use in consuming the library. The recommend
 
 ## Development
 
-**PatternFly 5 Development requires Node v12.0.0 or greater**
+**PatternFly 5 Development requires Node v16.0.0 or greater**
 
-To setup the PatternFly 4 development environment:
+To setup the PatternFly 5 development environment:
 
 - clone the project
 - run `yarn install` from the project root
@@ -106,7 +106,7 @@ If you have any suggestions about ways that we can improve how we use this tool,
 [How do I use CSS variables to customize the library?](https://pf4.patternfly.org/guidelines#variables)
 
 #### Browser support
-PatternFly 4 is supported on the latest two major versions of the following browsers:
+PatternFly 5 is supported on the latest two major versions of the following browsers:
 
 - Chrome
 - Firefox

package/RELEASE-NOTES.md

@@ -1,8 +1,25 @@
 ---
 id: Release notes
-section: developer-resources
+section: get-started
 releaseNoteTOC: true
 ---
+## 2023.01 release notes (2023-01-25)
+Packages released:
+- [@patternfly/patternfly@v4.224.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.224.2)
+
+### Components
+- **Calendar month:** Updated year width to not truncate ([#5316](https://github.com/patternfly/patternfly/pull/5316))
+- **Card:** Removed unnecessary class from labels in demos ([#5306](https://github.com/patternfly/patternfly/pull/5306))
+- **Charts:** Removed dupe vars ([#5312](https://github.com/patternfly/patternfly/pull/5312))
+- **Content:** Added plain list variation ([#5337](https://github.com/patternfly/patternfly/pull/5337))
+- **Tabs:** Removed help action specific styling ([#5330](https://github.com/patternfly/patternfly/pull/5330))
+- **Wizard:** Fixed demo footer layout ([#5317](https://github.com/patternfly/patternfly/pull/5317))
+
+### Other
+- **Icons:** Added data-processor icon ([#5284](https://github.com/patternfly/patternfly/pull/5284))
+- **Workspace:** Cleaned up beta tags for v4 ([#5329](https://github.com/patternfly/patternfly/pull/5329))
+
+
 ## 2022.16 release notes (2022-12-09)
 Packages released:
 - [@patternfly/patternfly@v4.222.4](https://www.npmjs.com/package/@patternfly/patternfly/v/4.222.4)

package/assets/icons/iconUnicodes.json

@@ -21,6 +21,7 @@
   "pf-icon-container-node": "E621",
   "pf-icon-cpu": "E927",
   "pf-icon-critical-risk": "E976",
+  "pf-icon-data-processor": "E97B",
   "pf-icon-data-sink": "E978",
   "pf-icon-data-source": "E979",
   "pf-icon-degraded": "E91B",

package/assets/images/pfbg-icon.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.27 105.77"><defs><style>.cls-1{fill:#26292d;}</style></defs><polygon class="cls-1" points="110.27 87.87 97.53 105.77 99.28 105.77 110.27 90.32 110.27 87.87"/><path class="cls-1" d="M23.22,105.77H25L1.86,73.05,67.4,9,27,58.44,40.58,77l-4.37,9.93L49.6,105.77h1.75l-13.51-19,3.71-8.43,20.06,27.35-.32.08h2.49L74.21,4.22l.23-.54.23.53L85.1,105.77h2.49l-.32-.08,20.06-27.35L110.27,85V81.47l-2-4.46,2-2.68V71.92l-2.63,3.59L76.8,5.52l33.47,40.92V44.19L81.49,9l28.78,28.14v-2L74.61.28V.15l-.06.08,0,0,0-.21-.12.11L74.32,0l0,.21,0,0L74.26.15V.28L0,72.88Zm83.44-28.94-19.82,27L76.7,8.8ZM62,103.87l-19.83-27,30-68ZM41.24,75.51l-12.47-17,43.31-53Z"/></svg>

package/assets/pficon/pficon.scss

@@ -1,7 +1,6 @@
 @font-face {
 	font-family: 'pficon';
-	src: url('#{$pf-global--fonticon-path}/pficon.woff2') format('woff2'),
-		url('#{$pf-global--fonticon-path}/pficon.woff') format('woff');
+	src: url('#{$pf-global--fonticon-path}/pficon.woff2') format('woff2');
 }
 
 @mixin pf-icon-styles {
@@ -89,6 +88,9 @@
 	@if $filename == critical-risk {
 		$char: '\E976';
 	}
+	@if $filename == data-processor {
+		$char: '\E97B';
+	}
 	@if $filename == data-sink {
 		$char: '\E978';
 	}
@@ -485,6 +487,9 @@
 .pf-icon-critical-risk {
 	@include pf-icon(critical-risk);
 }
+.pf-icon-data-processor {
+	@include pf-icon(data-processor);
+}
 .pf-icon-data-sink {
 	@include pf-icon(data-sink);
 }

package/base/_base.scss

@@ -1,20 +1,2 @@
-// stylelint-disable no-invalid-position-at-import-rule
-
-// remove in breaking change
-@if $pf-global--load-pf-3 {
-  @import "https://fonts.googleapis.com/css?family=Open+Sans";
-  @import "https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.37.10/css/patternfly.min.css";
-  @import "https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.37.10/css/patternfly-additions.min.css";
-}
-
-// remove pf3 shield styles in breaking change
-@import "shield-inheritable";
-@import "shield-noninheritable";
-
-@if $pf-global--enable-shield {
-  @include shield-inheritable;
-  @include shield-noninheritable;
-}
-
 @import "common";
 @import "globals";

package/base/_chart-globals.scss

@@ -164,10 +164,6 @@ $pf-chart-bullet--comparative-measure--warning--Fill--Color: $pf-chart-global--w
 $pf-chart-bullet--comparative-measure--warning--stroke--Color: $pf-chart-global--warning--Color--100;
 $pf-chart-bullet--comparative-measure--warning--stroke--Width: $pf-chart-global--stroke--Width--sm;
 $pf-chart-bullet--comparative-measure--warning--Width: 30;
-$pf-chart-bullet--comparative-measure--Fill--Color: $pf-chart-global--Fill--Color--700;
-$pf-chart-bullet--comparative-measure--stroke--Color: $pf-chart-global--Fill--Color--700;
-$pf-chart-bullet--comparative-measure--stroke--Width: $pf-chart-global--stroke--Width--xs;
-$pf-chart-bullet--comparative-measure--Width: 30;
 $pf-chart-bullet--group-title--divider--Fill--Color: $pf-color-black-200;
 $pf-chart-bullet--group-title--divider--stroke--Color: $pf-color-black-200;
 $pf-chart-bullet--group-title--divider--stroke--Width: $pf-chart-global--stroke--Width--sm;

package/base/_common.scss

@@ -1,26 +1,4 @@
 // Set common reset styles for patternfly components
-// remove in breaking change. this should come from globals, and can be opted out
-[class*="pf-c-"] {
-  &,
-  &::before,
-  &::after {
-    padding: 0;
-    margin: 0;
-    background-color: transparent;
-  }
-}
-
-// remove in breaking change
-@if $pf-global--unset-root-font-size {
-  // Since PF3 sets root font size to 10px, we need to unset it.
-  // This doesn't affect PF3.
-  // https://github.com/twbs/bootstrap/blob/v3.4.0/less/scaffolding.less#L23
-  // stylelint-disable
-  html {
-    font-size: var(--pf-global--root--FontSize, unset) !important; // the important is needed because we don't know if pf3 will be loaded after pfnext
-  }
-  // stylelint-enable
-}
 
 .pf-screen-reader {
   @include pf-u-screen-reader; // for use with assistive technologies

package/base/_fa-icons.scss

@@ -15,8 +15,7 @@
       font-style: normal;
       font-weight: 900;
       src:
-        url("#{$fa-font-path}/fa-solid-900.woff2") format("woff2"),
-        url("#{$fa-font-path}/fa-solid-900.woff") format("woff");
+        url("#{$fa-font-path}/fa-solid-900.woff2") format("woff2");
     }
 
     // stylelint-disable

package/base/_fonts.scss

@@ -6,150 +6,145 @@
 
 @font-face {
   font-family: "RedHatDisplay";
-  src:
-    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2"),
-    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Regular.woff") format("woff");
   font-style: normal;
   font-weight: 300;
+  src:
+    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 
 @font-face {
   font-family: "RedHatDisplay";
-  src:
-    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2"),
-    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Medium.woff") format("woff");
   font-style: normal;
   font-weight: 400;
+  src:
+    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 
 @font-face {
   font-family: "RedHatDisplay";
-  src:
-    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Bold.woff2") format("woff2"),
-    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Bold.woff") format("woff");
   font-style: normal;
   font-weight: 700;
+  src:
+    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Bold.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 
 @font-face {
   font-family: "RedHatText";
-  src:
-    url("#{$pf-global--font-path}/RedHatText/RedHatText-Regular.woff2") format("woff2"),
-    url("#{$pf-global--font-path}/RedHatText/RedHatText-Regular.woff") format("woff");
   font-style: normal;
   font-weight: 400;
+  src:
+    url("#{$pf-global--font-path}/RedHatText/RedHatText-Regular.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 
 @font-face {
   font-family: "RedHatText";
-  src:
-    url("#{$pf-global--font-path}/RedHatText/RedHatText-Medium.woff2") format("woff2"),
-    url("#{$pf-global--font-path}/RedHatText/RedHatText-Medium.woff") format("woff");
   font-style: normal;
   font-weight: 700;
+  src:
+    url("#{$pf-global--font-path}/RedHatText/RedHatText-Medium.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 
 // RedHatFont-updated
 @font-face {
   font-family: "RedHatDisplayUpdated";
-  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Regular.woff2") format("woff2");
   font-style: normal;
   font-weight: 300;
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Regular.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 
 @font-face {
   font-family: "RedHatDisplayUpdated";
-  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Medium.woff2") format("woff2");
   font-style: normal;
   font-weight: 400;
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Medium.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 
 @font-face {
   font-family: "RedHatDisplayUpdated";
-  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Bold.woff2") format("woff2");
   font-style: normal;
   font-weight: 700;
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Bold.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 
 @font-face {
   font-family: "RedHatTextUpdated";
-  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatText/RedHatText-updated-Regular.woff2") format("woff2");
   font-style: normal;
   font-weight: 400;
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatText/RedHatText-updated-Regular.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 
 @font-face {
   font-family: "RedHatTextUpdated";
-  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatText/RedHatText-updated-Medium.woff2") format("woff2");
   font-style: normal;
   font-weight: 700;
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatText/RedHatText-updated-Medium.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 
 // RedHatMono
 @font-face {
   font-family: "RedHatMono";
-  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatMono/RedHatMono-updated-Regular.woff2") format("woff2");
   font-style: normal;
   font-weight: 400;
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatMono/RedHatMono-updated-Regular.woff2") format("woff2");
   font-display: fallback;
 }
 
 // Variable fonts
 @font-face {
   font-family: "RedHatDisplayVF";
-  src: url("#{$pf-global--font-path}/RedHatFont-updated/modified/RedHatDisplayVFModified-updated.woff2") format("woff2-variations");
   font-style: normal;
   font-weight: 300 900;
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/modified/RedHatDisplayVFModified-updated.woff2") format("woff2-variations");
   font-display: fallback;
 }
 
 @font-face {
   font-family: "RedHatDisplayVF";
-  src: url("#{$pf-global--font-path}/RedHatFont-updated/modified/RedHatDisplayVF-updated-ItalicModified.woff2") format("woff2-variations");
   font-style: italic;
   font-weight: 300 900;
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/modified/RedHatDisplayVF-updated-ItalicModified.woff2") format("woff2-variations");
   font-display: fallback;
 }
 
 @font-face {
   font-family: "RedHatTextVF";
-  src: url("#{$pf-global--font-path}/RedHatFont-updated/modified/RedHatTextVFModified-updated.woff2") format("woff2-variations");
   font-style: normal;
   font-weight: 400 500;
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/modified/RedHatTextVFModified-updated.woff2") format("woff2-variations");
   font-display: fallback;
 }
 
 @font-face {
   font-family: "RedHatTextVF";
-  src: url("#{$pf-global--font-path}/RedHatFont-updated/modified/RedHatTextVF-updated-ItalicModified.woff2") format("woff2-variations");
   font-style: italic;
   font-weight: 400 500;
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/modified/RedHatTextVF-updated-ItalicModified.woff2") format("woff2-variations");
   font-display: fallback;
 }
 
 @font-face {
   font-family: "RedHatMonoVF";
-  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated.woff2") format("woff2-variations");
   font-style: normal;
   font-weight: 300 700;
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated.woff2") format("woff2-variations");
   font-display: fallback;
 }
 
 @font-face {
   font-family: "RedHatMonoVF";
-  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated-Italic.woff2") format("woff2-variations");
   font-style: italic;
   font-weight: 300 700;
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated-Italic.woff2") format("woff2-variations");
   font-display: fallback;
 }
 

package/base/_globals.scss

@@ -1,60 +1,82 @@
-// Reset
-// Based on minireset.css v0.0.3 | MIT License github.com/jgthms/minireset.css
-
+// Reset - based on minireset.css v0.0.3 | MIT License github.com/jgthms/minireset.css
 @if $pf-global--enable-reset {
-  // stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
-
-  html,
-  body,
-  p,
-  ol,
-  ul,
-  li,
-  dl,
-  dt,
-  dd,
-  blockquote,
-  figure,
-  fieldset,
-  legend,
-  textarea,
-  pre,
-  iframe,
-  hr,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  :where(
+    html,
+    body,
+    p,
+    ol,
+    ul,
+    li,
+    dl,
+    dt,
+    dd,
+    blockquote,
+    figure,
+    fieldset,
+    legend,
+    textarea,
+    pre,
+    iframe,
+    hr,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6
+   ) {
     padding: 0;
     margin: 0;
   }
+}
 
-  html,
-  body {
+// Normalize
+@if $pf-global--enable-normalize {
+  *,
+  :where(
+    *::before,
+    *::after
+  ) {
+    box-sizing: border-box;
+  }
+
+  :where(
+    html,
+    body
+   ) {
     height: 100%;
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  :where(body) {
+    font-family: var(--pf-global--FontFamily--sans-serif);
+    font-size: var(--pf-global--FontSize--md);
+    font-weight: var(--pf-global--FontWeight--normal);
+    line-height: var(--pf-global--LineHeight--md);
+  }
+
+  :where(
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6
+   ) {
     font-size: 100%;
     font-weight: var(--pf-global--FontWeight--normal);
   }
 
-  ul {
+  :where(ul) {
     list-style: none;
   }
 
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
+  :where(
+    button,
+    input,
+    optgroup,
+    select,
+    textarea
+   ) {
     margin: 0;
     font-family: inherit;
     font-size: 100%;
@@ -62,73 +84,57 @@
     color: var(--pf-global--Color--100);
   }
 
-  img,
-  embed,
-  iframe,
-  object,
-  audio,
-  video {
+  :where(
+    img,
+    embed,
+    iframe,
+    object,
+    audio,
+    video
+   ) {
     max-width: 100%;
     height: auto;
   }
 
-  iframe {
+  :where(iframe) {
     border: 0;
   }
 
-  table {
+  :where(table) {
     border-spacing: 0;
     border-collapse: collapse;
   }
 
-  td,
-  th {
+  :where(
+    td,
+    th
+  ) {
     padding: 0;
     text-align: left;
   }
 
-  code,
-  pre {
+  :where(
+    code,
+    pre
+  ) {
     font-family: var(--pf-global--FontFamily--monospace);
   }
 
-  // Patternfly base styles
-
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  html {
-    font-family: sans-serif;
-    line-height: 1.15;
-  }
-
-  body {
-    font-family: var(--pf-global--FontFamily--sans-serif);
-    font-size: var(--pf-global--FontSize--md);
-    font-weight: var(--pf-global--FontWeight--normal);
-    line-height: var(--pf-global--LineHeight--md);
-    text-align: left;
-    background-color: var(--pf-global--BackgroundColor--100);
-  }
-
-  // Links styles
-
-  a {
+  :where(a) {
     font-weight: var(--pf-global--link--FontWeight);
     color: var(--pf-global--link--Color);
     text-decoration: var(--pf-global--link--TextDecoration);
+  }
 
-    &:hover {
-      --pf-global--link--Color: var(--pf-global--link--Color--hover);
-      --pf-global--link--TextDecoration: var(--pf-global--link--TextDecoration--hover);
-    }
+  :where(a:hover) {
+    --pf-global--link--Color: var(--pf-global--link--Color--hover);
+    --pf-global--link--TextDecoration: var(--pf-global--link--TextDecoration--hover);
   }
 
-  button,
-  a {
+  :where(
+    a,
+    button
+  ) {
     cursor: pointer;
   }
 }
@@ -137,5 +143,5 @@
 @import "./themes/dark/globals";
 
 @include pf-theme-dark($pf-theme-dark-prefix: ":root") {
-  @include globals;
+  @include pf-theme-dark-globals;
 }

package/base/_icons.scss

@@ -1,30 +1,3 @@
 @import "fa-icons";
 @import "pf-icons";
-
-.pf-svg-size-sm {
-  // Small icon size
-  width: 1em;
-  height: 1em;
-  vertical-align: -.125em;
-}
-
-.pf-svg-size-md {
-  // Medium icon size
-  width: 1.5em;
-  height: 1.5em;
-  vertical-align: -.1875em;
-}
-
-.pf-svg-size-lg {
-  // Large icon size
-  width: 2em;
-  height: 2em;
-  vertical-align: -.25em;
-}
-
-.pf-svg-size-xl {
-  // Extra large icon size
-  width: 3em;
-  height: 3em;
-  vertical-align: -.375em;
-}
+@import "svg-icons";

package/base/_svg-icons.scss

@@ -0,0 +1,6 @@
+.pf-svg {
+  // Default icon size
+  width: 1em;
+  height: 1em;
+  vertical-align: -.125em;
+}

package/base/_variables.scss

@@ -123,9 +123,9 @@
   --pf-global--primary-color--light-100: #{$pf-global--primary-color--light-100};
   --pf-global--primary-color--dark-100: #{$pf-global--primary-color--dark-100};
   --pf-global--secondary-color--100: #{$pf-global--secondary-color--100};
-  --pf-global--default-color--100: #{$pf-global--default-color--100};
-  --pf-global--default-color--200: #{$pf-global--default-color--200};
-  --pf-global--default-color--300: #{$pf-global--default-color--300};
+  --pf-global--custom-color--100: #{$pf-global--custom-color--100};
+  --pf-global--custom-color--200: #{$pf-global--custom-color--200};
+  --pf-global--custom-color--300: #{$pf-global--custom-color--300};
   --pf-global--success-color--100: #{$pf-global--success-color--100};
   --pf-global--success-color--200: #{$pf-global--success-color--200};
   --pf-global--info-color--100: #{$pf-global--info-color--100};
@@ -306,5 +306,5 @@
 @import "./themes/dark/variables";
 
 @include pf-theme-dark($pf-theme-dark-prefix: ":root") {
-  @include _variables;
+  @include pf-theme-dark-variables;
 }

package/base/patternfly-common.css

@@ -1,13 +1,3 @@
-[class*=pf-c-], [class*=pf-c-]::before, [class*=pf-c-]::after {
-  padding: 0;
-  margin: 0;
-  background-color: transparent;
-}
-
-html {
-  font-size: var(--pf-global--root--FontSize, unset) !important;
-}
-
 .pf-screen-reader {
   position: fixed;
   top: 0;

package/base/patternfly-fa-icons.css

@@ -4178,7 +4178,7 @@
   font-family: "Font Awesome 5 Free";
   font-style: normal;
   font-weight: 900;
-  src: url("./assets/fonts/webfonts/fa-solid-900.woff2") format("woff2"), url("./assets/fonts/webfonts/fa-solid-900.woff") format("woff");
+  src: url("./assets/fonts/webfonts/fa-solid-900.woff2") format("woff2");
 }
 .fa,
 .fas {