@patternfly/patternfly 4.222.4 → 5.0.0-alpha.2

package/docs/demos/Toolbar/examples/Toolbar.md

@@ -1772,10 +1772,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="toolbar-pagination-management-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-toolbar-pagination-management-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-toolbar-pagination-management-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="toolbar-pagination-management-example-masthead"

package/docs/demos/Wizard/examples/Wizard.md

@@ -8,10 +8,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="wizard-basic-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-wizard-basic-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-wizard-basic-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="wizard-basic-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -1120,8 +1122,8 @@ wrapperTag: div
             </main>
           </div>
           <footer class="pf-c-wizard__footer">
-            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
             <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
             <div class="pf-c-wizard__footer-cancel">
               <button class="pf-c-button pf-m-link" type="button">Cancel</button>
             </div>
@@ -1138,10 +1140,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="wizard-nav-expanded-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-wizard-nav-expanded-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-wizard-nav-expanded-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="wizard-nav-expanded-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -2250,8 +2254,8 @@ wrapperTag: div
             </main>
           </div>
           <footer class="pf-c-wizard__footer">
-            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
             <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
             <div class="pf-c-wizard__footer-cancel">
               <button class="pf-c-button pf-m-link" type="button">Cancel</button>
             </div>
@@ -2268,10 +2272,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="wizard-with-drawer-closed-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-wizard-with-drawer-closed-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-wizard-with-drawer-closed-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="wizard-with-drawer-closed-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -3452,8 +3458,8 @@ wrapperTag: div
                   </div>
                 </div>
                 <footer class="pf-c-wizard__footer">
-                  <button class="pf-c-button pf-m-primary" type="submit">Next</button>
                   <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+                  <button class="pf-c-button pf-m-primary" type="submit">Next</button>
                   <div class="pf-c-wizard__footer-cancel">
                     <button class="pf-c-button pf-m-link" type="button">Cancel</button>
                   </div>
@@ -3473,10 +3479,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="wizard-with-drawer-expanded-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-wizard-with-drawer-expanded-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-wizard-with-drawer-expanded-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="wizard-with-drawer-expanded-example-masthead"
@@ -4657,8 +4665,8 @@ wrapperTag: div
                   </div>
                 </div>
                 <footer class="pf-c-wizard__footer">
-                  <button class="pf-c-button pf-m-primary" type="submit">Next</button>
                   <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+                  <button class="pf-c-button pf-m-primary" type="submit">Next</button>
                   <div class="pf-c-wizard__footer-cancel">
                     <button class="pf-c-button pf-m-link" type="button">Cancel</button>
                   </div>
@@ -4678,10 +4686,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="wizard-with-drawer-info-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-wizard-with-drawer-info-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-wizard-with-drawer-info-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="wizard-with-drawer-info-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -5732,8 +5742,8 @@ wrapperTag: div
                   </div>
                 </div>
                 <footer class="pf-c-wizard__footer">
-                  <button class="pf-c-button pf-m-primary" type="submit">Next</button>
                   <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+                  <button class="pf-c-button pf-m-primary" type="submit">Next</button>
                   <div class="pf-c-wizard__footer-cancel">
                     <button class="pf-c-button pf-m-link" type="button">Cancel</button>
                   </div>
@@ -5753,10 +5763,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="wizard-in-page-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-wizard-in-page-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-wizard-in-page-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="wizard-in-page-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -6619,6 +6631,7 @@ wrapperTag: div
         </div>
       </div>
     </section>
+
     <section class="pf-c-page__main-wizard">
       <div class="pf-c-wizard">
         <button
@@ -6827,8 +6840,8 @@ wrapperTag: div
             </div>
           </div>
           <footer class="pf-c-wizard__footer">
-            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
             <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
             <div class="pf-c-wizard__footer-cancel">
               <button class="pf-c-button pf-m-link" type="button">Cancel</button>
             </div>
@@ -6845,10 +6858,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="in-page-nav-expanded-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-in-page-nav-expanded-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-in-page-nav-expanded-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="in-page-nav-expanded-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -7711,6 +7726,7 @@ wrapperTag: div
         </div>
       </div>
     </section>
+
     <section class="pf-c-page__main-wizard">
       <div class="pf-c-wizard">
         <button
@@ -7898,8 +7914,8 @@ wrapperTag: div
             </div>
           </div>
           <footer class="pf-c-wizard__footer">
-            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
             <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
             <div class="pf-c-wizard__footer-cancel">
               <button class="pf-c-button pf-m-link" type="button">Cancel</button>
             </div>
@@ -7916,10 +7932,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="wizard-with-drawer-in-page-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-wizard-with-drawer-in-page-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-wizard-with-drawer-in-page-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="wizard-with-drawer-in-page-example-masthead"
@@ -8785,6 +8803,7 @@ wrapperTag: div
         </div>
       </div>
     </section>
+
     <section class="pf-c-page__main-wizard pf-m-light-200">
       <div class="pf-c-wizard">
         <button
@@ -9039,8 +9058,8 @@ wrapperTag: div
           </div>
         </div>
         <footer class="pf-c-wizard__footer">
-          <button class="pf-c-button pf-m-primary" type="submit">Next</button>
           <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+          <button class="pf-c-button pf-m-primary" type="submit">Next</button>
           <div class="pf-c-wizard__footer-cancel">
             <button class="pf-c-button pf-m-link" type="button">Cancel</button>
           </div>
@@ -9056,10 +9075,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="wizard-with-drawer-in-page-expanded-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-wizard-with-drawer-in-page-expanded-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-wizard-with-drawer-in-page-expanded-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="wizard-with-drawer-in-page-expanded-example-masthead"
@@ -9925,6 +9946,7 @@ wrapperTag: div
         </div>
       </div>
     </section>
+
     <section class="pf-c-page__main-wizard pf-m-light-200">
       <div class="pf-c-wizard">
         <button
@@ -10174,8 +10196,8 @@ wrapperTag: div
           </div>
         </div>
         <footer class="pf-c-wizard__footer">
-          <button class="pf-c-button pf-m-primary" type="submit">Next</button>
           <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+          <button class="pf-c-button pf-m-primary" type="submit">Next</button>
           <div class="pf-c-wizard__footer-cancel">
             <button class="pf-c-button pf-m-link" type="button">Cancel</button>
           </div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "4.222.4",
+  "version": "5.0.0-alpha.2",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -34,9 +34,9 @@
     "@fortawesome/fontawesome": "^1.1.8",
     "@octokit/rest": "^16.40.1",
     "@patternfly/patternfly-a11y": "4.3.1",
-    "@patternfly/react-code-editor": "4.82.67",
-    "@patternfly/react-core": "4.264.0",
-    "@patternfly/react-table": "4.111.45",
+    "@patternfly/react-code-editor": "4.82.55",
+    "@patternfly/react-core": "4.250.1",
+    "@patternfly/react-table": "4.111.33",
     "@starptech/prettyhtml": "^0.10.0",
     "babel-eslint": "^8.2.3",
     "cheerio": "^1.0.0-rc.3",
@@ -79,7 +79,7 @@
     "stylelint-scss": "^4.3.0",
     "stylelint-value-no-unknown-custom-properties": "^4.0.0",
     "surge": "^0.21.3",
-    "@patternfly/documentation-framework": "1.2.67",
+    "@patternfly/documentation-framework": "1.2.61",
     "unified": "^9.2.0",
     "webpack": "^4.43.0"
   },
@@ -93,7 +93,8 @@
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
-    "tag": "prerelease"
+    "tag": "alpha",
+    "access": "public"
   },
   "husky": {
     "hooks": {

package/patternfly-base-no-reset.css

@@ -243,17 +243,15 @@
   --pf-global--icon--FontSize--md: 1.125rem;
   --pf-global--icon--FontSize--lg: 1.5rem;
   --pf-global--icon--FontSize--xl: 3.375rem;
-  --pf-global--FontFamily--sans-serif: "RedHatText", "Overpass", overpass, helvetica, arial, sans-serif;
-  --pf-global--FontFamily--heading--sans-serif: "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif;
+  --pf-global--FontFamily--sans-serif: "RedHatText", helvetica, arial, sans-serif;
+  --pf-global--FontFamily--heading--sans-serif: "RedHatDisplay", helvetica, arial, sans-serif;
   --pf-global--FontFamily--monospace: "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
-  --pf-global--FontFamily--redhat-updated--sans-serif: "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif;
-  --pf-global--FontFamily--redhat-updated--heading--sans-serif: "RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif;
+  --pf-global--FontFamily--redhat-updated--sans-serif: "RedHatTextUpdated", helvetica, arial, sans-serif;
+  --pf-global--FontFamily--redhat-updated--heading--sans-serif: "RedHatDisplayUpdated", helvetica, arial, sans-serif;
   --pf-global--FontFamily--redhat--monospace: "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
-  --pf-global--FontFamily--redhatVF--sans-serif: "RedHatTextVF", "RedHatText", "Overpass", overpass, helvetica, arial, sans-serif;
-  --pf-global--FontFamily--redhatVF--heading--sans-serif: "RedHatDisplayVF", "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif;
+  --pf-global--FontFamily--redhatVF--sans-serif: "RedHatTextVF", "RedHatText", helvetica, arial, sans-serif;
+  --pf-global--FontFamily--redhatVF--heading--sans-serif: "RedHatDisplayVF", "RedHatDisplay", helvetica, arial, sans-serif;
   --pf-global--FontFamily--redhatVF--monospace: "RedHatMonoVF", "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
-  --pf-global--FontFamily--overpass--sans-serif: "overpass", overpass, "open sans", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  --pf-global--FontFamily--overpass--monospace: "overpass-mono", overpass-mono, "SFMono-Regular", menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
   --pf-global--FontSize--4xl: 2.25rem;
   --pf-global--FontSize--3xl: 1.75rem;
   --pf-global--FontSize--2xl: 1.5rem;
@@ -264,10 +262,7 @@
   --pf-global--FontSize--xs: 0.75rem;
   --pf-global--FontWeight--light: 300;
   --pf-global--FontWeight--normal: 400;
-  --pf-global--FontWeight--semi-bold: 700;
-  --pf-global--FontWeight--overpass--semi-bold: 500;
   --pf-global--FontWeight--bold: 700;
-  --pf-global--FontWeight--overpass--bold: 600;
   --pf-global--LineHeight--sm: 1.3;
   --pf-global--LineHeight--md: 1.5;
   --pf-global--ListStyle: disc outside;
@@ -280,14 +275,6 @@
   --pf-global--target-size--MinHeight: 44px;
 }
 
-.pf-m-overpass-font {
-  --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--overpass--sans-serif);
-  --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--sans-serif);
-  --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--overpass--monospace);
-  --pf-global--FontWeight--semi-bold: var(--pf-global--FontWeight--overpass--semi-bold);
-  --pf-global--FontWeight--bold: var(--pf-global--FontWeight--overpass--bold);
-}
-
 .pf-m-redhat-updated-font {
   --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--redhat-updated--sans-serif);
   --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--redhat-updated--heading--sans-serif);
@@ -506,126 +493,6 @@
   font-weight: 300 700;
   font-display: fallback;
 }
-@font-face {
-  font-family: "overpass";
-  font-style: normal;
-  font-weight: 200;
-  src: url("./assets/fonts/overpass-webfont/overpass-thin.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-thin.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: italic;
-  font-weight: 200;
-  src: url("./assets/fonts/overpass-webfont/overpass-thin-italic.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-thin-italic.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: normal;
-  font-weight: 300;
-  src: url("./assets/fonts/overpass-webfont/overpass-extralight.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-extralight.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: italic;
-  font-weight: 300;
-  src: url("./assets/fonts/overpass-webfont/overpass-extralight-italic.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-extralight-italic.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: normal;
-  font-weight: 400;
-  src: url("./assets/fonts/overpass-webfont/overpass-light.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-light.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: italic;
-  font-weight: 400;
-  src: url("./assets/fonts/overpass-webfont/overpass-light-italic.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-light-italic.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: normal;
-  font-weight: 500;
-  src: url("./assets/fonts/overpass-webfont/overpass-regular.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-regular.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: italic;
-  font-weight: 500;
-  src: url("./assets/fonts/overpass-webfont/overpass-italic.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-italic.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: normal;
-  font-weight: 600;
-  src: url("./assets/fonts/overpass-webfont/overpass-semibold.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-semibold.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: italic;
-  font-weight: 600;
-  src: url("./assets/fonts/overpass-webfont/overpass-semibold-italic.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-semibold-italic.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: normal;
-  font-weight: 700;
-  src: url("./assets/fonts/overpass-webfont/overpass-bold.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-bold.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: italic;
-  font-weight: 700;
-  src: url("./assets/fonts/overpass-webfont/overpass-bold-italic.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-bold-italic.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: normal;
-  font-weight: 800;
-  src: url("./assets/fonts/overpass-webfont/overpass-extrabold.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-extrabold.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: italic;
-  font-weight: 800;
-  src: url("./assets/fonts/overpass-webfont/overpass-extrabold-italic.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-extrabold-italic.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: normal;
-  font-weight: 900;
-  src: url("./assets/fonts/overpass-webfont/overpass-heavy.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-heavy.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: italic;
-  font-weight: 900;
-  src: url("./assets/fonts/overpass-webfont/overpass-heavy-italic.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-heavy-italic.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass-mono";
-  font-style: normal;
-  font-weight: 300;
-  src: url("./assets/fonts/overpass-mono-webfont/overpass-mono-light.woff2") format("woff2"), url("./assets/fonts/overpass-mono-webfont/overpass-mono-light.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass-mono";
-  font-style: normal;
-  font-weight: 400;
-  src: url("./assets/fonts/overpass-mono-webfont/overpass-mono-regular.woff2") format("woff2"), url("./assets/fonts/overpass-mono-webfont/overpass-mono-regular.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass-mono";
-  font-style: normal;
-  font-weight: 500;
-  src: url("./assets/fonts/overpass-mono-webfont/overpass-mono-semibold.woff2") format("woff2"), url("./assets/fonts/overpass-mono-webfont/overpass-mono-semibold.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass-mono";
-  font-style: normal;
-  font-weight: 600;
-  src: url("./assets/fonts/overpass-mono-webfont/overpass-mono-bold.woff2") format("woff2"), url("./assets/fonts/overpass-mono-webfont/overpass-mono-bold.woff") format("woff");
-}
 [class*=pf-c-], [class*=pf-c-]::before, [class*=pf-c-]::after {
   padding: 0;
   margin: 0;
@@ -5399,4 +5266,28 @@ html {
 
 .pf-icon-zone:before {
   content: "\e911";
+}
+
+.pf-svg-size-sm {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.125em;
+}
+
+.pf-svg-size-md {
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: -0.1875em;
+}
+
+.pf-svg-size-lg {
+  width: 2em;
+  height: 2em;
+  vertical-align: -0.25em;
+}
+
+.pf-svg-size-xl {
+  width: 3em;
+  height: 3em;
+  vertical-align: -0.375em;
 }