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

package/sass-utilities/functions.scss

@@ -43,19 +43,13 @@
   @if length($map-items) == 0 {
     $map: ("base": null);
     $map: map-merge($map, $pf-global--breakpoint-name-map);
-  }
-
-  @else {
+  } @else {
     @each $breakpoint in $map-items {
       @if not map-has-key($pf-global--breakpoint-name-map, $breakpoint) and $breakpoint != "base" {
         $map: map-merge($map, ("invalid breakpoint #{$breakpoint}": null));
-      }
-
-      @else if $breakpoint == "base" {
+      } @else if $breakpoint == "base" {
         $map: map-merge($map, ($breakpoint: null));
-      }
-
-      @else {
+      } @else {
         $map: map-merge($map, ($breakpoint: map-get($pf-global--breakpoint-name-map, #{$breakpoint})));
       }
     }
@@ -72,19 +66,13 @@
   @if length($map-items) == 0 {
     $map: ("base": null);
     $map: map-merge($map, $pf-global--height-breakpoint-name-map);
-  }
-
-  @else {
+  } @else {
     @each $breakpoint in $map-items {
       @if not map-has-key($pf-global--height-breakpoint-name-map, $breakpoint) and $breakpoint != "base" {
         $map: map-merge($map, ("invalid breakpoint #{$breakpoint}": null));
-      }
-
-      @else if $breakpoint == "base" {
+      } @else if $breakpoint == "base" {
         $map: map-merge($map, ($breakpoint: null));
-      }
-
-      @else {
+      } @else {
         $map: map-merge($map, ($breakpoint: map-get($pf-global--height-breakpoint-name-map, #{$breakpoint})));
       }
     }
@@ -107,13 +95,9 @@
   @each $spacer in $map-items {
     @if not map-has-key($pf-global--spacer-map, $spacer) and $spacer != "none" {
       $map: map-merge($map, ("invalid spacer #{$spacer}": null));
-    }
-
-    @else if $spacer == "none" {
+    } @else if $spacer == "none" {
       $map: map-merge($map, ($spacer: 0));
-    }
-
-    @else {
+    } @else {
       $map: map-merge($map, ($spacer: map-get($pf-global--spacer-map, #{$spacer})));
     }
   }

package/sass-utilities/mixins.scss

@@ -2,33 +2,23 @@
 @mixin pf-media-query($point) {
   @if $point == "" or not $point or $point == "base" {
     @content;
-  }
-
-  @else if $point == "sm" {
+  } @else if $point == "sm" {
     @media screen and (min-width: $pf-global--breakpoint--sm) {
       @content;
     }
-  }
-
-  @else if $point == "md" {
+  } @else if $point == "md" {
     @media screen and (min-width: $pf-global--breakpoint--md) {
       @content;
     }
-  }
-
-  @else if $point == "lg" {
+  } @else if $point == "lg" {
     @media screen and (min-width: $pf-global--breakpoint--lg) {
       @content;
     }
-  }
-
-  @else if $point == "xl" {
+  } @else if $point == "xl" {
     @media screen and (min-width: $pf-global--breakpoint--xl) {
       @content;
     }
-  }
-
-  @else if $point == "2xl" {
+  } @else if $point == "2xl" {
     @media screen and (min-width: $pf-global--breakpoint--2xl) {
       @content;
     }
@@ -39,33 +29,23 @@
 @mixin pf-height-media-query($point) {
   @if $point == "" or not $point or $point == "base" {
     @content;
-  }
-
-  @else if $point == "sm" {
+  } @else if $point == "sm" {
     @media screen and (min-height: $pf-global--height-breakpoint--sm) {
       @content;
     }
-  }
-
-  @else if $point == "md" {
+  } @else if $point == "md" {
     @media screen and (min-height: $pf-global--height-breakpoint--md) {
       @content;
     }
-  }
-
-  @else if $point == "lg" {
+  } @else if $point == "lg" {
     @media screen and (min-height: $pf-global--height-breakpoint--lg) {
       @content;
     }
-  }
-
-  @else if $point == "xl" {
+  } @else if $point == "xl" {
     @media screen and (min-height: $pf-global--height-breakpoint--xl) {
       @content;
     }
-  }
-
-  @else if $point == "2xl" {
+  } @else if $point == "2xl" {
     @media screen and (min-height: $pf-global--height-breakpoint--2xl) {
       @content;
     }
@@ -75,7 +55,7 @@
 // Create single prop / value classes, optionally add responsive suffix
 // @group mixins
 // @moduleType mixin
-// @parameter: {Suffix} xs, sm, md, lg, xl, base or null
+// @parameter: [Suffix] xs, sm, md, lg, xl, base or null
 // @usage: @include pf-utility-builder(class-name, base sm md lg xl);
 // ===============================================================================================
 
@@ -232,11 +212,9 @@
 
 // Apply media query if value is passed
 @mixin pf-apply-breakpoint($breakpoint) {
-  @if ($breakpoint == "null" or $breakpoint == "base" or $breakpoint == "") {
+  @if $breakpoint == "null" or $breakpoint == "base" or $breakpoint == "" {
     @content;
-  }
-
-  @else {
+  } @else {
     $breakpoint: pf-breakpoint-value($breakpoint);
 
     @media (min-width: $breakpoint) {
@@ -247,11 +225,9 @@
 
 // Apply height media query if value is passed
 @mixin pf-apply-height-breakpoint($breakpoint) {
-  @if ($breakpoint == "null" or $breakpoint == "base" or $breakpoint == "") {
+  @if $breakpoint == "null" or $breakpoint == "base" or $breakpoint == "" {
     @content;
-  }
-
-  @else {
+  } @else {
     $breakpoint: pf-height-breakpoint-value($breakpoint);
 
     @media (min-height: $breakpoint) {

package/sass-utilities/placeholders.scss

@@ -16,29 +16,6 @@
   --pf-global--link--Color: var(--pf-global--link--Color--light);
   --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
   --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
-
-  .pf-c-card {
-    --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
-  }
-
-  .pf-c-button {
-    --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
-    --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
-    --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
-    --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
-    --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
-    --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-    --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-    --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-    --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
-    --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
-    --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
-    --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
-    --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
-    --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
-    --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
-    --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
-  }
 }
 
 // stylelint-disable

package/sass-utilities/scss-variables.scss

@@ -8,11 +8,9 @@
 
 // Quickly modify global styling by enabling or disabling optional features.
 $pf-global--enable-reset: true !default;
+$pf-global--enable-normalize: true !default;
 $pf-global--enable-fontawesome-cdn: false !default;
 $pf-global--disable-fontawesome: false !default;
-$pf-global--load-pf-3: false !default;
-$pf-global--enable-shield: false !default;
-$pf-global--unset-root-font-size: true !default;
 
 // Patternfly uses the default root size of the browser, it assumes a 16px base
 // since most browser root size is 16. This variables is just to make the
@@ -72,9 +70,9 @@ $pf-global--disabled-color--300: $pf-color-black-200 !default;
 $pf-global--primary-color--100:         $pf-color-blue-400 !default;
 $pf-global--primary-color--200:         $pf-color-blue-500 !default;
 $pf-global--secondary-color--100:       $pf-color-black-600 !default;
-$pf-global--default-color--100:         $pf-color-cyan-200 !default;
-$pf-global--default-color--200:         $pf-color-cyan-300 !default;
-$pf-global--default-color--300:         $pf-color-cyan-500 !default;
+$pf-global--custom-color--100:         $pf-color-cyan-200 !default;
+$pf-global--custom-color--200:         $pf-color-cyan-300 !default;
+$pf-global--custom-color--300:         $pf-color-cyan-500 !default;
 $pf-global--success-color--100:         $pf-color-green-500 !default;
 $pf-global--success-color--200:         $pf-color-green-600 !default;
 $pf-global--info-color--100:            $pf-color-blue-300 !default;
@@ -125,6 +123,7 @@ $pf-global--BoxShadow--inset: inset 0 0 pf-size-prem(10) 0 rgba($pf-color-black-
 $pf-global--font-path: "./assets/fonts" !default;
 
 // Iconpath
+// stylelint-disable-next-line scss/dollar-variable-pattern
 $fa-font-path: "./assets/fonts/webfonts" !default;
 
 // FontIcon path

package/sass-utilities/themes/dark/placeholders.scss

@@ -7,26 +7,4 @@
   --pf-global--link--Color: #{$pf-global--link--Color};
   --pf-global--link--Color--hover: #{$pf-global--link--Color--hover};
   --pf-global--BackgroundColor--100: #{$pf-global--BackgroundColor--100};
-
-  .pf-c-card {
-    --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  }
-
-  .pf-c-button {
-    // primary button
-    --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
-    --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
-    --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
-    --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
-    --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
-    --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
-    --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
-    --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
-
-    // secondary button
-    --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
-    --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
-    --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
-    --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
-  }
 }

package/sass-utilities/themes/dark/scss-variables.scss

@@ -25,7 +25,7 @@ $pf-global--link--Color--hover: $pf-color-blue-200;
 $pf-global--link--Color--visited: $pf-color-purple-300;
 $pf-global--disabled-color--100: $pf-color-black-400; // disabled text on regular background color
 $pf-global--disabled-color--200: $pf-color-black-500; // disabled background color
-$pf-global--disabled-color--300: $pf-color-black-200; // disabled text on disabled background color
+$pf-global--disabled-color--300: $pf-color-black-200; // disabled text on disabled background color - except form elements
 
 // icons
 $pf-global--icon--Color--light: $pf-color-black-300;

package/utilities/Spacing/spacing.scss

@@ -1,7 +1,7 @@
 // stylelint-disable
 
 // Build spacing values
-@mixin pf-spacer-builder() {
+@mixin pf-spacer-builder {
 
   // Loop through breakpoints
   @each $breakpoint, $breakpoint-value in $pf-global--breakpoint-map {
@@ -54,4 +54,4 @@
 // stylelint-enable
 
 // Build spacing values
-@include pf-spacer-builder();
+@include pf-spacer-builder;

package/utilities/Text/text.css

@@ -315,16 +315,16 @@
   color: var(--pf-global--link--Color--visited) !important;
 }
 
-.pf-u-default-color-100 {
-  color: var(--pf-global--default-color--100) !important;
+.pf-u-custom-color-100 {
+  color: var(--pf-global--custom-color--100) !important;
 }
 
-.pf-u-default-color-200 {
-  color: var(--pf-global--default-color--200) !important;
+.pf-u-custom-color-200 {
+  color: var(--pf-global--custom-color--200) !important;
 }
 
-.pf-u-default-color-300 {
-  color: var(--pf-global--default-color--300) !important;
+.pf-u-custom-color-300 {
+  color: var(--pf-global--custom-color--300) !important;
 }
 
 .pf-u-success-color-100 {
@@ -428,14 +428,14 @@
   .pf-u-link-color-visited-on-sm {
     color: var(--pf-global--link--Color--visited) !important;
   }
-  .pf-u-default-color-100-on-sm {
-    color: var(--pf-global--default-color--100) !important;
+  .pf-u-custom-color-100-on-sm {
+    color: var(--pf-global--custom-color--100) !important;
   }
-  .pf-u-default-color-200-on-sm {
-    color: var(--pf-global--default-color--200) !important;
+  .pf-u-custom-color-200-on-sm {
+    color: var(--pf-global--custom-color--200) !important;
   }
-  .pf-u-default-color-300-on-sm {
-    color: var(--pf-global--default-color--300) !important;
+  .pf-u-custom-color-300-on-sm {
+    color: var(--pf-global--custom-color--300) !important;
   }
   .pf-u-success-color-100-on-sm {
     color: var(--pf-global--success-color--100) !important;
@@ -526,14 +526,14 @@
   .pf-u-link-color-visited-on-md {
     color: var(--pf-global--link--Color--visited) !important;
   }
-  .pf-u-default-color-100-on-md {
-    color: var(--pf-global--default-color--100) !important;
+  .pf-u-custom-color-100-on-md {
+    color: var(--pf-global--custom-color--100) !important;
   }
-  .pf-u-default-color-200-on-md {
-    color: var(--pf-global--default-color--200) !important;
+  .pf-u-custom-color-200-on-md {
+    color: var(--pf-global--custom-color--200) !important;
   }
-  .pf-u-default-color-300-on-md {
-    color: var(--pf-global--default-color--300) !important;
+  .pf-u-custom-color-300-on-md {
+    color: var(--pf-global--custom-color--300) !important;
   }
   .pf-u-success-color-100-on-md {
     color: var(--pf-global--success-color--100) !important;
@@ -624,14 +624,14 @@
   .pf-u-link-color-visited-on-lg {
     color: var(--pf-global--link--Color--visited) !important;
   }
-  .pf-u-default-color-100-on-lg {
-    color: var(--pf-global--default-color--100) !important;
+  .pf-u-custom-color-100-on-lg {
+    color: var(--pf-global--custom-color--100) !important;
   }
-  .pf-u-default-color-200-on-lg {
-    color: var(--pf-global--default-color--200) !important;
+  .pf-u-custom-color-200-on-lg {
+    color: var(--pf-global--custom-color--200) !important;
   }
-  .pf-u-default-color-300-on-lg {
-    color: var(--pf-global--default-color--300) !important;
+  .pf-u-custom-color-300-on-lg {
+    color: var(--pf-global--custom-color--300) !important;
   }
   .pf-u-success-color-100-on-lg {
     color: var(--pf-global--success-color--100) !important;
@@ -722,14 +722,14 @@
   .pf-u-link-color-visited-on-xl {
     color: var(--pf-global--link--Color--visited) !important;
   }
-  .pf-u-default-color-100-on-xl {
-    color: var(--pf-global--default-color--100) !important;
+  .pf-u-custom-color-100-on-xl {
+    color: var(--pf-global--custom-color--100) !important;
   }
-  .pf-u-default-color-200-on-xl {
-    color: var(--pf-global--default-color--200) !important;
+  .pf-u-custom-color-200-on-xl {
+    color: var(--pf-global--custom-color--200) !important;
   }
-  .pf-u-default-color-300-on-xl {
-    color: var(--pf-global--default-color--300) !important;
+  .pf-u-custom-color-300-on-xl {
+    color: var(--pf-global--custom-color--300) !important;
   }
   .pf-u-success-color-100-on-xl {
     color: var(--pf-global--success-color--100) !important;
@@ -820,14 +820,14 @@
   .pf-u-link-color-visited-on-2xl {
     color: var(--pf-global--link--Color--visited) !important;
   }
-  .pf-u-default-color-100-on-2xl {
-    color: var(--pf-global--default-color--100) !important;
+  .pf-u-custom-color-100-on-2xl {
+    color: var(--pf-global--custom-color--100) !important;
   }
-  .pf-u-default-color-200-on-2xl {
-    color: var(--pf-global--default-color--200) !important;
+  .pf-u-custom-color-200-on-2xl {
+    color: var(--pf-global--custom-color--200) !important;
   }
-  .pf-u-default-color-300-on-2xl {
-    color: var(--pf-global--default-color--300) !important;
+  .pf-u-custom-color-300-on-2xl {
+    color: var(--pf-global--custom-color--300) !important;
   }
   .pf-u-success-color-100-on-2xl {
     color: var(--pf-global--success-color--100) !important;
@@ -953,8 +953,8 @@
 :where(.pf-theme-dark) .pf-u-color-light-200 {
   color: var(--pf-global--Color-200) !important;
 }
-:where(.pf-theme-dark) .pf-u-default-color-300 {
-  color: var(--pf-global--default-color--100) !important;
+:where(.pf-theme-dark) .pf-u-custom-color-300 {
+  color: var(--pf-global--custom-color--100) !important;
 }
 :where(.pf-theme-dark) .pf-u-success-color-200 {
   color: var(--pf-global--success-color--100) !important;
@@ -978,8 +978,8 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-sm {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-default-color-300-on-sm {
-    color: var(--pf-global--default-color--100) !important;
+  :where(.pf-theme-dark) .pf-u-custom-color-300-on-sm {
+    color: var(--pf-global--custom-color--100) !important;
   }
   :where(.pf-theme-dark) .pf-u-success-color-200-on-sm {
     color: var(--pf-global--success-color--100) !important;
@@ -1004,8 +1004,8 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-md {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-default-color-300-on-md {
-    color: var(--pf-global--default-color--100) !important;
+  :where(.pf-theme-dark) .pf-u-custom-color-300-on-md {
+    color: var(--pf-global--custom-color--100) !important;
   }
   :where(.pf-theme-dark) .pf-u-success-color-200-on-md {
     color: var(--pf-global--success-color--100) !important;
@@ -1030,8 +1030,8 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-lg {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-default-color-300-on-lg {
-    color: var(--pf-global--default-color--100) !important;
+  :where(.pf-theme-dark) .pf-u-custom-color-300-on-lg {
+    color: var(--pf-global--custom-color--100) !important;
   }
   :where(.pf-theme-dark) .pf-u-success-color-200-on-lg {
     color: var(--pf-global--success-color--100) !important;
@@ -1056,8 +1056,8 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-xl {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-default-color-300-on-xl {
-    color: var(--pf-global--default-color--100) !important;
+  :where(.pf-theme-dark) .pf-u-custom-color-300-on-xl {
+    color: var(--pf-global--custom-color--100) !important;
   }
   :where(.pf-theme-dark) .pf-u-success-color-200-on-xl {
     color: var(--pf-global--success-color--100) !important;
@@ -1082,8 +1082,8 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-2xl {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-default-color-300-on-2xl {
-    color: var(--pf-global--default-color--100) !important;
+  :where(.pf-theme-dark) .pf-u-custom-color-300-on-2xl {
+    color: var(--pf-global--custom-color--100) !important;
   }
   :where(.pf-theme-dark) .pf-u-success-color-200-on-2xl {
     color: var(--pf-global--success-color--100) !important;

package/utilities/Text/text.scss

@@ -119,14 +119,14 @@ $pf-u-font-color-options: (
   link-color-visited: (
     color var(--pf-global--link--Color--visited)
   ),
-  default-color-100: (
-    color var(--pf-global--default-color--100)
+  custom-color-100: (
+    color var(--pf-global--custom-color--100)
   ),
-  default-color-200: (
-    color var(--pf-global--default-color--200)
+  custom-color-200: (
+    color var(--pf-global--custom-color--200)
   ),
-  default-color-300: (
-    color var(--pf-global--default-color--300)
+  custom-color-300: (
+    color var(--pf-global--custom-color--300)
   ),
   success-color-100: (
     color var(--pf-global--success-color--100)

package/utilities/Text/themes/dark/text.scss

@@ -12,8 +12,8 @@
     color-light-200: (
       color var(--pf-global--Color-200)
     ),
-    default-color-300: (
-      color var(--pf-global--default-color--100)
+    custom-color-300: (
+      color var(--pf-global--custom-color--100)
     ),
     success-color-200: (
       color var(--pf-global--success-color--100)

package/base/_shield-inheritable.scss

@@ -1,69 +0,0 @@
-@mixin shield-inheritable {
-  // CSS shield against PF 3
-  .pf-c-about-modal-box,
-  .pf-c-accordion,
-  .pf-c-alert,
-  .pf-c-alert-group,
-  .pf-c-app-launcher,
-  .pf-c-avatar,
-  .pf-c-backdrop,
-  .pf-c-background-image,
-  .pf-c-badge,
-  .pf-c-brand,
-  .pf-c-breadcrumb,
-  .pf-c-button,
-  .pf-c-card,
-  .pf-c-check,
-  .pf-c-chip,
-  .pf-c-chip-group,
-  .pf-c-clipboard-copy,
-  .pf-c-content,
-  .pf-c-context-selector,
-  .pf-c-data-list,
-  .pf-c-toolbar,
-  .pf-c-divider,
-  .pf-c-drawer,
-  .pf-c-dropdown,
-  .pf-c-empty-state,
-  .pf-c-expandable-section,
-  .pf-c-form,
-  .pf-c-form-control,
-  .pf-c-input-group,
-  .pf-c-label,
-  .pf-c-list,
-  .pf-c-login,
-  .pf-c-modal-box,
-  .pf-c-nav,
-  .pf-c-notification-badge,
-  .pf-c-options-menu,
-  .pf-c-overflow-menu,
-  .pf-c-page,
-  .pf-c-pagination,
-  .pf-c-popover,
-  .pf-c-progress,
-  .pf-c-radio,
-  .pf-c-select,
-  .pf-c-skip-to-content,
-  .pf-c-spinner,
-  .pf-c-switch,
-  .pf-c-tab-content,
-  .pf-c-table,
-  .pf-c-tabs,
-  .pf-c-title,
-  .pf-c-tooltip,
-  .pf-c-wizard,
-  .pf-l-bullseye,
-  .pf-l-flex,
-  .pf-l-gallery,
-  .pf-l-grid,
-  .pf-l-level,
-  .pf-l-split,
-  .pf-l-stack {
-    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);
-    color: var(--pf-global--Color--100); // this color rule is set here to be able to use themes
-    text-rendering: optimizelegibility;
-  }
-}

package/base/_shield-noninheritable.scss

@@ -1,13 +0,0 @@
-@mixin shield-noninheritable {
-  [class*="pf-c-"],
-  [class*="pf-l-"] {
-    &,
-    &::before,
-    &::after {
-      box-sizing: border-box;
-      padding: 0;
-      margin: 0;
-      background-color: transparent;
-    }
-  }
-}