@patternfly/patternfly 5.0.0-alpha.3 → 5.0.0-alpha.30

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/scss-variables.scss

@@ -12,7 +12,6 @@ $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
@@ -125,6 +124,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/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/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;
-    }
-  }
-}

package/base/patternfly-shield-inheritable.css

@@ -1,66 +0,0 @@
-.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);
-  text-rendering: optimizelegibility;
-}

package/base/patternfly-shield-inheritable.scss

@@ -1,4 +0,0 @@
-@import "../sass-utilities/all";
-@import "shield-inheritable";
-
-@include shield-inheritable;

package/base/patternfly-shield-noninheritable.css

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

package/base/patternfly-shield-noninheritable.scss

@@ -1,4 +0,0 @@
-@import "../sass-utilities/all";
-@import "shield-noninheritable";
-
-@include shield-noninheritable;