@patternfly/react-styles 3.7.6 → 3.7.8

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.7.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@3.7.7...@patternfly/react-styles@3.7.8) (2020-03-09)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+## [3.7.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@3.7.6...@patternfly/react-styles@3.7.7) (2020-03-09)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
 ## [3.7.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@3.7.5...@patternfly/react-styles@3.7.6) (2020-03-03)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/components/DataToolbar/data-toolbar.css

@@ -40,6 +40,7 @@
   --pf-c-data-toolbar__item--m-label--spacer: var(--pf-c-data-toolbar__item--spacer);
   --pf-c-data-toolbar__item--m-label--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-data-toolbar__toggle--m-expanded__c-button--m-plain--Color: var(--pf-global--Color--100);
+  --pf-c-data-toolbar--c-divider--m-vertical--spacer: var(--pf-c-data-toolbar--spacer--base);
   position: relative;
   row-gap: var(--pf-c-data-toolbar--RowGap);
   display: grid;
@@ -52,6 +53,17 @@
       --pf-c-data-toolbar__expandable-content--PaddingBottom: var(--pf-c-data-toolbar__expandable-content--lg--PaddingBottom);
       --pf-c-data-toolbar__expandable-content--PaddingLeft: var(--pf-c-data-toolbar__expandable-content--lg--PaddingLeft); } }
 
+.pf-c-data-toolbar__content-section > .pf-c-divider,
+.pf-c-data-toolbar__group > .pf-c-divider {
+  --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar--c-divider--m-vertical--spacer); }
+
+.pf-c-data-toolbar__content-section > .pf-c-divider.pf-m-vertical,
+.pf-c-data-toolbar__group > .pf-c-divider.pf-m-vertical {
+  margin-right: var(--pf-c-data-toolbar--spacer); }
+  .pf-c-data-toolbar__content-section > .pf-c-divider.pf-m-vertical:last-child,
+  .pf-c-data-toolbar__group > .pf-c-divider.pf-m-vertical:last-child {
+    --pf-c-data-toolbar--spacer: 0; }
+
 .pf-c-data-toolbar__group {
   --pf-c-data-toolbar--spacer: var(--pf-c-data-toolbar__group--spacer);
   display: flex;
@@ -80,6 +92,10 @@
     .pf-c-data-toolbar__group.pf-m-toggle-group .pf-c-data-toolbar__toggle {
       display: inline-block;
       visibility: visible; }
+  .pf-c-data-toolbar__group.pf-m-align-right ~ *,
+  .pf-c-data-toolbar__group.pf-m-align-right ~ .pf-c-data-toolbar__item,
+  .pf-c-data-toolbar__group.pf-m-align-right ~ .pf-c-data-toolbar__group {
+    margin-left: 0; }
   .pf-c-data-toolbar__group:last-child {
     --pf-c-data-toolbar--spacer: 0; }
 
@@ -107,7 +123,9 @@
     margin-left: auto; }
     .pf-c-data-toolbar__item.pf-m-pagination .pf-c-pagination {
       flex-wrap: nowrap; }
-  .pf-c-data-toolbar__item.pf-m-align-right ~ * {
+  .pf-c-data-toolbar__item.pf-m-align-right ~ *,
+  .pf-c-data-toolbar__item.pf-m-align-right ~ .pf-c-data-toolbar__item,
+  .pf-c-data-toolbar__item.pf-m-align-right ~ .pf-c-data-toolbar__group {
     margin-left: 0; }
   .pf-c-data-toolbar__item:last-child {
     --pf-c-data-toolbar--spacer: 0; }

package/css/components/DataToolbar/data-toolbar.d.ts

@@ -1,20 +1,23 @@
 import './data-toolbar.css';
 declare const _default: {
     dataToolbar: string;
+    dataToolbarContentSection: string;
+    divider: string;
     dataToolbarGroup: string;
     dataToolbarItem: string;
     dataToolbarToggle: string;
     pagination: string;
     dataToolbarContent: string;
-    dataToolbarContentSection: string;
     dataToolbarExpandableContent: string;
     chipGroup: string;
     button: string;
     modifiers: {
+        'vertical': string;
         'buttonGroup': string;
         'iconButtonGroup': string;
         'filterGroup': string;
         'toggleGroup': string;
+        'alignRight': string;
         'separator': string;
         'overflowMenu': string;
         'bulkSelect': string;
@@ -22,7 +25,6 @@ declare const _default: {
         'chipGroup': string;
         'label': string;
         'pagination': string;
-        'alignRight': string;
         'expanded': string;
         'chipContainer': string;
         'plain': string;

package/css/components/DataToolbar/data-toolbar.js

@@ -3,20 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 require("./data-toolbar.css");
 exports.default = {
     dataToolbar: 'pf-c-data-toolbar',
+    dataToolbarContentSection: 'pf-c-data-toolbar__content-section',
+    divider: 'pf-c-divider',
     dataToolbarGroup: 'pf-c-data-toolbar__group',
     dataToolbarItem: 'pf-c-data-toolbar__item',
     dataToolbarToggle: 'pf-c-data-toolbar__toggle',
     pagination: 'pf-c-pagination',
     dataToolbarContent: 'pf-c-data-toolbar__content',
-    dataToolbarContentSection: 'pf-c-data-toolbar__content-section',
     dataToolbarExpandableContent: 'pf-c-data-toolbar__expandable-content',
     chipGroup: 'pf-c-chip-group',
     button: 'pf-c-button',
     modifiers: {
+        'vertical': 'pf-m-vertical',
         'buttonGroup': 'pf-m-button-group',
         'iconButtonGroup': 'pf-m-icon-button-group',
         'filterGroup': 'pf-m-filter-group',
         'toggleGroup': 'pf-m-toggle-group',
+        'alignRight': 'pf-m-align-right',
         'separator': 'pf-m-separator',
         'overflowMenu': 'pf-m-overflow-menu',
         'bulkSelect': 'pf-m-bulk-select',
@@ -24,7 +27,6 @@ exports.default = {
         'chipGroup': 'pf-m-chip-group',
         'label': 'pf-m-label',
         'pagination': 'pf-m-pagination',
-        'alignRight': 'pf-m-align-right',
         'expanded': 'pf-m-expanded',
         'chipContainer': 'pf-m-chip-container',
         'plain': 'pf-m-plain',

package/css/components/Divider/divider.css

@@ -1,7 +1,121 @@
 .pf-c-divider {
   --pf-c-divider--Height: var(--pf-global--BorderWidth--sm);
   --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
-  height: var(--pf-c-divider--Height);
-  background-color: var(--pf-c-divider--BackgroundColor);
-  border: 0;
-  flex-shrink: 0; }
+  --pf-c-divider--after--Height: var(--pf-c-divider--Height);
+  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BackgroundColor);
+  --pf-c-divider--after--FlexBasis: 100%;
+  --pf-c-divider--after--Inset: 0%;
+  --pf-c-divider--m-vertical--after--FlexBasis: 100%;
+  --pf-c-divider--m-vertical--after--Width: var(--pf-global--BorderWidth--sm);
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  justify-content: center;
+  width: 100%;
+  border: 0; }
+  .pf-c-divider::after {
+    flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2));
+    align-self: stretch;
+    height: var(--pf-c-divider--after--Height);
+    content: "";
+    background-color: var(--pf-c-divider--after--BackgroundColor);
+    justify-self: center; }
+  .pf-c-divider.pf-m-vertical {
+    display: inline-flex;
+    flex-direction: column;
+    width: auto;
+    height: inherit;
+    min-height: 100%;
+    max-height: 100%; }
+    .pf-c-divider.pf-m-vertical::after {
+      flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
+      width: var(--pf-c-divider--m-vertical--after--Width); }
+  .pf-c-divider.pf-m-inset-none {
+    --pf-c-divider--after--Inset: 0%; }
+  .pf-c-divider.pf-m-inset-sm {
+    --pf-c-divider--after--Inset: var(--pf-global--spacer--sm); }
+  .pf-c-divider.pf-m-inset-md {
+    --pf-c-divider--after--Inset: var(--pf-global--spacer--md); }
+  .pf-c-divider.pf-m-inset-lg {
+    --pf-c-divider--after--Inset: var(--pf-global--spacer--lg); }
+  .pf-c-divider.pf-m-inset-xl {
+    --pf-c-divider--after--Inset: var(--pf-global--spacer--xl); }
+  .pf-c-divider.pf-m-inset-2xl {
+    --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl); }
+  .pf-c-divider.pf-m-inset-3xl {
+    --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl); }
+  @media (min-width: 576px) {
+    .pf-c-divider.pf-m-inset-none-on-sm {
+      --pf-c-divider--after--Inset: 0%; }
+    .pf-c-divider.pf-m-inset-sm-on-sm {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--sm); }
+    .pf-c-divider.pf-m-inset-md-on-sm {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--md); }
+    .pf-c-divider.pf-m-inset-lg-on-sm {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--lg); }
+    .pf-c-divider.pf-m-inset-xl-on-sm {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--xl); }
+    .pf-c-divider.pf-m-inset-2xl-on-sm {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl); }
+    .pf-c-divider.pf-m-inset-3xl-on-sm {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl); } }
+  @media (min-width: 768px) {
+    .pf-c-divider.pf-m-inset-none-on-md {
+      --pf-c-divider--after--Inset: 0%; }
+    .pf-c-divider.pf-m-inset-sm-on-md {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--sm); }
+    .pf-c-divider.pf-m-inset-md-on-md {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--md); }
+    .pf-c-divider.pf-m-inset-lg-on-md {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--lg); }
+    .pf-c-divider.pf-m-inset-xl-on-md {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--xl); }
+    .pf-c-divider.pf-m-inset-2xl-on-md {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl); }
+    .pf-c-divider.pf-m-inset-3xl-on-md {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl); } }
+  @media (min-width: 992px) {
+    .pf-c-divider.pf-m-inset-none-on-lg {
+      --pf-c-divider--after--Inset: 0%; }
+    .pf-c-divider.pf-m-inset-sm-on-lg {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--sm); }
+    .pf-c-divider.pf-m-inset-md-on-lg {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--md); }
+    .pf-c-divider.pf-m-inset-lg-on-lg {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--lg); }
+    .pf-c-divider.pf-m-inset-xl-on-lg {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--xl); }
+    .pf-c-divider.pf-m-inset-2xl-on-lg {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl); }
+    .pf-c-divider.pf-m-inset-3xl-on-lg {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl); } }
+  @media (min-width: 1200px) {
+    .pf-c-divider.pf-m-inset-none-on-xl {
+      --pf-c-divider--after--Inset: 0%; }
+    .pf-c-divider.pf-m-inset-sm-on-xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--sm); }
+    .pf-c-divider.pf-m-inset-md-on-xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--md); }
+    .pf-c-divider.pf-m-inset-lg-on-xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--lg); }
+    .pf-c-divider.pf-m-inset-xl-on-xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--xl); }
+    .pf-c-divider.pf-m-inset-2xl-on-xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl); }
+    .pf-c-divider.pf-m-inset-3xl-on-xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl); } }
+  @media (min-width: 1450px) {
+    .pf-c-divider.pf-m-inset-none-on-2xl {
+      --pf-c-divider--after--Inset: 0%; }
+    .pf-c-divider.pf-m-inset-sm-on-2xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--sm); }
+    .pf-c-divider.pf-m-inset-md-on-2xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--md); }
+    .pf-c-divider.pf-m-inset-lg-on-2xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--lg); }
+    .pf-c-divider.pf-m-inset-xl-on-2xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--xl); }
+    .pf-c-divider.pf-m-inset-2xl-on-2xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--2xl); }
+    .pf-c-divider.pf-m-inset-3xl-on-2xl {
+      --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl); } }

package/css/components/Divider/divider.d.ts

@@ -1,6 +1,50 @@
 import './divider.css';
 declare const _default: {
     divider: string;
-    modifiers: {};
+    modifiers: {
+        'vertical': string;
+        'insetNone': string;
+        'insetSm': string;
+        'insetMd': string;
+        'insetLg': string;
+        'insetXl': string;
+        'inset_2xl': string;
+        'inset_3xl': string;
+        'insetNoneOnSm': string;
+        'insetSmOnSm': string;
+        'insetMdOnSm': string;
+        'insetLgOnSm': string;
+        'insetXlOnSm': string;
+        'inset_2xlOnSm': string;
+        'inset_3xlOnSm': string;
+        'insetNoneOnMd': string;
+        'insetSmOnMd': string;
+        'insetMdOnMd': string;
+        'insetLgOnMd': string;
+        'insetXlOnMd': string;
+        'inset_2xlOnMd': string;
+        'inset_3xlOnMd': string;
+        'insetNoneOnLg': string;
+        'insetSmOnLg': string;
+        'insetMdOnLg': string;
+        'insetLgOnLg': string;
+        'insetXlOnLg': string;
+        'inset_2xlOnLg': string;
+        'inset_3xlOnLg': string;
+        'insetNoneOnXl': string;
+        'insetSmOnXl': string;
+        'insetMdOnXl': string;
+        'insetLgOnXl': string;
+        'insetXlOnXl': string;
+        'inset_2xlOnXl': string;
+        'inset_3xlOnXl': string;
+        'insetNoneOn_2xl': string;
+        'insetSmOn_2xl': string;
+        'insetMdOn_2xl': string;
+        'insetLgOn_2xl': string;
+        'insetXlOn_2xl': string;
+        'inset_2xlOn_2xl': string;
+        'inset_3xlOn_2xl': string;
+    };
 };
 export default _default;

package/css/components/Divider/divider.js

@@ -3,5 +3,49 @@ Object.defineProperty(exports, "__esModule", { value: true });
 require("./divider.css");
 exports.default = {
     divider: 'pf-c-divider',
-    modifiers: {}
+    modifiers: {
+        'vertical': 'pf-m-vertical',
+        'insetNone': 'pf-m-inset-none',
+        'insetSm': 'pf-m-inset-sm',
+        'insetMd': 'pf-m-inset-md',
+        'insetLg': 'pf-m-inset-lg',
+        'insetXl': 'pf-m-inset-xl',
+        'inset_2xl': 'pf-m-inset-2xl',
+        'inset_3xl': 'pf-m-inset-3xl',
+        'insetNoneOnSm': 'pf-m-inset-none-on-sm',
+        'insetSmOnSm': 'pf-m-inset-sm-on-sm',
+        'insetMdOnSm': 'pf-m-inset-md-on-sm',
+        'insetLgOnSm': 'pf-m-inset-lg-on-sm',
+        'insetXlOnSm': 'pf-m-inset-xl-on-sm',
+        'inset_2xlOnSm': 'pf-m-inset-2xl-on-sm',
+        'inset_3xlOnSm': 'pf-m-inset-3xl-on-sm',
+        'insetNoneOnMd': 'pf-m-inset-none-on-md',
+        'insetSmOnMd': 'pf-m-inset-sm-on-md',
+        'insetMdOnMd': 'pf-m-inset-md-on-md',
+        'insetLgOnMd': 'pf-m-inset-lg-on-md',
+        'insetXlOnMd': 'pf-m-inset-xl-on-md',
+        'inset_2xlOnMd': 'pf-m-inset-2xl-on-md',
+        'inset_3xlOnMd': 'pf-m-inset-3xl-on-md',
+        'insetNoneOnLg': 'pf-m-inset-none-on-lg',
+        'insetSmOnLg': 'pf-m-inset-sm-on-lg',
+        'insetMdOnLg': 'pf-m-inset-md-on-lg',
+        'insetLgOnLg': 'pf-m-inset-lg-on-lg',
+        'insetXlOnLg': 'pf-m-inset-xl-on-lg',
+        'inset_2xlOnLg': 'pf-m-inset-2xl-on-lg',
+        'inset_3xlOnLg': 'pf-m-inset-3xl-on-lg',
+        'insetNoneOnXl': 'pf-m-inset-none-on-xl',
+        'insetSmOnXl': 'pf-m-inset-sm-on-xl',
+        'insetMdOnXl': 'pf-m-inset-md-on-xl',
+        'insetLgOnXl': 'pf-m-inset-lg-on-xl',
+        'insetXlOnXl': 'pf-m-inset-xl-on-xl',
+        'inset_2xlOnXl': 'pf-m-inset-2xl-on-xl',
+        'inset_3xlOnXl': 'pf-m-inset-3xl-on-xl',
+        'insetNoneOn_2xl': 'pf-m-inset-none-on-2xl',
+        'insetSmOn_2xl': 'pf-m-inset-sm-on-2xl',
+        'insetMdOn_2xl': 'pf-m-inset-md-on-2xl',
+        'insetLgOn_2xl': 'pf-m-inset-lg-on-2xl',
+        'insetXlOn_2xl': 'pf-m-inset-xl-on-2xl',
+        'inset_2xlOn_2xl': 'pf-m-inset-2xl-on-2xl',
+        'inset_3xlOn_2xl': 'pf-m-inset-3xl-on-2xl'
+    }
 };

package/css/components/Drawer/drawer.css

@@ -1,76 +1,162 @@
 .pf-c-drawer {
+  --pf-c-drawer__section--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-drawer__content--FlexBasis: 100%;
-  --pf-c-drawer__content-body--m-padding--PaddingTop: var(--pf-global--spacer--lg);
-  --pf-c-drawer__content-body--m-padding--PaddingRight: var(--pf-global--spacer--lg);
-  --pf-c-drawer__content-body--m-padding--PaddingBottom: var(--pf-global--spacer--lg);
-  --pf-c-drawer__content-body--m-padding--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-drawer__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-drawer__content--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-drawer__panel--FlexBasis: 100%;
-  --pf-c-drawer__panel--md--FlexBasis: 28.125rem;
+  --pf-c-drawer__panel--md--FlexBasis: 50%;
+  --pf-c-drawer__panel--MinWidth: 50%;
+  --pf-c-drawer__panel--xl--MinWidth: 28.125rem;
+  --pf-c-drawer__panel--xl--FlexBasis: 28.125rem;
+  --pf-c-drawer__panel--ZIndex: var(--pf-global--ZIndex--sm);
   --pf-c-drawer__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-drawer__panel--TransitionDuration: .25s;
-  --pf-c-drawer__panel--TransitionProperty: margin, transform;
-  --pf-c-drawer__panel-body--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-drawer__panel-body--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-drawer__panel-body--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-drawer__panel-body--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-drawer__panel-body--md--PaddingTop: var(--pf-global--spacer--lg);
-  --pf-c-drawer__panel-body--md--PaddingRight: var(--pf-global--spacer--lg);
-  --pf-c-drawer__panel-body--md--PaddingBottom: var(--pf-global--spacer--lg);
-  --pf-c-drawer__panel-body--md--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-drawer__panel--TransitionProperty: margin, transform, box-shadow;
+  --pf-c-drawer--child--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-drawer--child--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-drawer--child--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-drawer--child--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-drawer--child--md--PaddingTop: var(--pf-global--spacer--lg);
+  --pf-c-drawer--child--md--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-drawer--child--md--PaddingBottom: var(--pf-global--spacer--lg);
+  --pf-c-drawer--child--md--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-drawer--child--m-padding--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-drawer--child--m-padding--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-drawer--child--m-padding--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-drawer--child--m-padding--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-drawer--child--m-padding--md--PaddingTop: var(--pf-global--spacer--lg);
+  --pf-c-drawer--child--m-padding--md--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-drawer--child--m-padding--md--PaddingBottom: var(--pf-global--spacer--lg);
+  --pf-c-drawer--child--m-padding--md--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-drawer__content--child--PaddingTop: 0;
+  --pf-c-drawer__content--child--PaddingRight: 0;
+  --pf-c-drawer__content--child--PaddingBottom: 0;
+  --pf-c-drawer__content--child--PaddingLeft: 0;
+  --pf-c-drawer__actions--MarginTop: calc(0.375rem * -1);
+  --pf-c-drawer__actions--MarginRight: calc(0.375rem * -1);
   --pf-c-drawer__panel--BoxShadow: none;
-  --pf-c-drawer--m-expanded__panel--BoxShadow: var(--pf-global--BoxShadow--md-left);
-  --pf-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-global--BoxShadow--md-right);
-  --pf-c-drawer--m-divider__panel--after--Width: var(--pf-global--BorderWidth--sm);
-  --pf-c-drawer--m-divider--m-expanded__panel--after--BackgroundColor: var(--pf-global--BorderColor--100);
+  --pf-c-drawer--m-expanded__panel--BoxShadow: var(--pf-global--BoxShadow--lg-left);
+  --pf-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-global--BoxShadow--lg-right);
+  --pf-c-drawer__panel--after--Width: var(--pf-global--BorderWidth--sm);
+  --pf-c-drawer__panel--after--BackgroundColor: transparent;
+  --pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-global--BorderColor--100);
   display: flex;
+  flex-direction: column;
   height: 100%;
   overflow-x: hidden; }
   @media screen and (min-width: 768px) {
     .pf-c-drawer {
-      --pf-c-drawer__panel--FlexBasis: var(--pf-c-drawer__panel--md--FlexBasis); } }
+      --pf-c-drawer__panel--FlexBasis: var(--pf-c-drawer__panel--md--FlexBasis);
+      --pf-c-drawer--child--PaddingTop: var(--pf-c-drawer--child--md--PaddingTop);
+      --pf-c-drawer--child--PaddingRight: var(--pf-c-drawer--child--md--PaddingRight);
+      --pf-c-drawer--child--PaddingBottom: var(--pf-c-drawer--child--md--PaddingBottom);
+      --pf-c-drawer--child--PaddingLeft: var(--pf-c-drawer--child--md--PaddingLeft);
+      --pf-c-drawer--child--m-padding--PaddingTop: var(--pf-c-drawer--child--m-padding--md--PaddingTop);
+      --pf-c-drawer--child--m-padding--PaddingRight: var(--pf-c-drawer--child--m-padding--md--PaddingRight);
+      --pf-c-drawer--child--m-padding--PaddingBottom: var(--pf-c-drawer--child--m-padding--md--PaddingBottom);
+      --pf-c-drawer--child--m-padding--PaddingLeft: var(--pf-c-drawer--child--m-padding--md--PaddingLeft); } }
+  @media screen and (min-width: 1200px) {
+    .pf-c-drawer {
+      --pf-c-drawer__panel--FlexBasis: var(--pf-c-drawer__panel--xl--FlexBasis);
+      --pf-c-drawer__panel--MinWidth: var(--pf-c-drawer__panel--xl--MinWidth); } }
   @media screen and (min-width: 768px) {
     .pf-c-drawer {
-      --pf-c-drawer__panel-body--PaddingTop: var(--pf-c-drawer__panel-body--md--PaddingTop);
-      --pf-c-drawer__panel-body--PaddingRight: var(--pf-c-drawer__panel-body--md--PaddingRight);
-      --pf-c-drawer__panel-body--PaddingBottom: var(--pf-c-drawer__panel-body--md--PaddingBottom);
-      --pf-c-drawer__panel-body--PaddingLeft: var(--pf-c-drawer__panel-body--md--PaddingLeft); } }
+      min-width: var(--pf-c-drawer__panel--MinWidth); } }
+
+.pf-c-drawer__section {
+  flex-grow: 0;
+  background-color: var(--pf-c-drawer__section--BackgroundColor); }
+  .pf-c-drawer__section.pf-m-no-background {
+    --pf-c-drawer__section--BackgroundColor: transparent; }
+
+.pf-c-drawer__main {
+  display: flex;
+  flex-grow: 1;
+  overflow: hidden; }
 
 .pf-c-drawer__content,
 .pf-c-drawer__panel {
+  display: flex;
+  flex-direction: column;
   flex-shrink: 0;
   overflow: auto; }
 
 .pf-c-drawer__content {
+  --pf-c-drawer--child--PaddingTop: var(--pf-c-drawer__content--child--PaddingTop);
+  --pf-c-drawer--child--PaddingRight: var(--pf-c-drawer__content--child--PaddingRight);
+  --pf-c-drawer--child--PaddingBottom: var(--pf-c-drawer__content--child--PaddingBottom);
+  --pf-c-drawer--child--PaddingLeft: var(--pf-c-drawer__content--child--PaddingLeft);
+  z-index: var(--pf-c-drawer__content--ZIndex);
   flex-basis: var(--pf-c-drawer__content--FlexBasis);
-  order: 0; }
+  order: 0;
+  background-color: var(--pf-c-drawer__content--BackgroundColor); }
+  .pf-c-drawer__content.pf-m-no-background {
+    --pf-c-drawer__content--BackgroundColor: transparent; }
 
 .pf-c-drawer__panel {
   position: relative;
+  z-index: var(--pf-c-drawer__panel--ZIndex);
   flex-basis: var(--pf-c-drawer__panel--FlexBasis);
   order: 1;
+  overflow: auto;
   background-color: var(--pf-c-drawer__panel--BackgroundColor);
+  box-shadow: var(--pf-c-drawer__panel--BoxShadow);
   transition-duration: var(--pf-c-drawer__panel--TransitionDuration);
   transition-property: var(--pf-c-drawer__panel--TransitionProperty);
   -webkit-overflow-scrolling: touch; }
+  .pf-c-drawer__panel::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--pf-c-drawer__panel--after--Width);
+    height: 100%;
+    content: "";
+    background-color: var(--pf-c-drawer__panel--after--BackgroundColor); }
+  .pf-c-drawer__panel.pf-m-no-background {
+    --pf-c-drawer__content--BackgroundColor: transparent; }
 
-.pf-c-drawer__content-body.pf-m-padding {
-  padding: var(--pf-c-drawer__content-body--m-padding--PaddingTop) var(--pf-c-drawer__content-body--m-padding--PaddingRight) var(--pf-c-drawer__content-body--m-padding--PaddingBottom) var(--pf-c-drawer__content-body--m-padding--PaddingLeft); }
+.pf-c-drawer__head {
+  display: grid;
+  grid-template-columns: auto;
+  grid-auto-columns: max-content; }
+  .pf-c-drawer__head > * {
+    grid-column: 1; }
 
-.pf-c-drawer__panel-body {
-  padding: var(--pf-c-drawer__panel-body--PaddingTop) var(--pf-c-drawer__panel-body--PaddingRight) var(--pf-c-drawer__panel-body--PaddingBottom) var(--pf-c-drawer__panel-body--PaddingLeft); }
+.pf-c-drawer__actions {
+  grid-column: 2;
+  grid-row: 1;
+  display: flex;
+  align-self: baseline;
+  margin-top: var(--pf-c-drawer__actions--MarginTop);
+  margin-right: var(--pf-c-drawer__actions--MarginRight); }
 
-.pf-c-drawer__panel-body.pf-m-no-padding {
-  --pf-c-drawer__panel-body--PaddingTop: 0;
-  --pf-c-drawer__panel-body--PaddingRight: 0;
-  --pf-c-drawer__panel-body--PaddingBottom: 0;
-  --pf-c-drawer__panel-body--PaddingLeft: 0; }
+.pf-c-drawer__body {
+  padding: var(--pf-c-drawer--child--PaddingTop) var(--pf-c-drawer--child--PaddingRight) var(--pf-c-drawer--child--PaddingBottom) var(--pf-c-drawer--child--PaddingLeft); }
+  .pf-c-drawer__body.pf-m-no-padding {
+    --pf-c-drawer__actions--MarginTop: 0;
+    --pf-c-drawer__actions--MarginRight: 0;
+    --pf-c-drawer--child--PaddingTop: 0;
+    --pf-c-drawer--child--PaddingRight: 0;
+    --pf-c-drawer--child--PaddingBottom: 0;
+    --pf-c-drawer--child--PaddingLeft: 0; }
+  .pf-c-drawer__body.pf-m-padding {
+    --pf-c-drawer--child--PaddingTop: var(--pf-c-drawer--child--m-padding--PaddingTop);
+    --pf-c-drawer--child--PaddingRight: var(--pf-c-drawer--child--m-padding--PaddingRight);
+    --pf-c-drawer--child--PaddingBottom: var(--pf-c-drawer--child--m-padding--PaddingBottom);
+    --pf-c-drawer--child--PaddingLeft: var(--pf-c-drawer--child--m-padding--PaddingLeft); }
+  .pf-c-drawer__body:not(.pf-m-no-padding) + * {
+    --pf-c-drawer--child--PaddingTop: 0; }
+
+.pf-c-drawer__body:last-of-type {
+  flex: 1 0 auto; }
 
 .pf-c-drawer.pf-m-expanded .pf-c-drawer__panel {
   transform: translateX(-100%); }
 
+.pf-c-drawer .pf-c-page__main {
+  min-height: 100%; }
+
 @media screen and (min-width: 768px) {
-  .pf-c-drawer:not(.pf-m-divider) .pf-c-drawer__panel {
-    box-shadow: var(--pf-c-drawer__panel--BoxShadow); }
   .pf-c-drawer .pf-c-drawer__content {
     order: 0; }
   .pf-c-drawer .pf-c-drawer__panel {
@@ -87,39 +173,17 @@
     transform: translateX(-100%); }
   .pf-c-drawer.pf-m-panel-left.pf-m-expanded .pf-c-drawer__panel {
     --pf-c-drawer__panel--BoxShadow: var(--pf-c-drawer--m-expanded--m-panel-left__panel--BoxShadow);
-    transform: translateX(0); } }
-
-@media screen and (min-width: 768px) {
-  .pf-c-drawer.pf-m-inline .pf-c-drawer__content {
-    flex-shrink: 1; }
-  .pf-c-drawer.pf-m-inline .pf-c-drawer__panel {
-    margin-left: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
-    transform: translateX(100%); }
-  .pf-c-drawer.pf-m-inline.pf-m-expanded .pf-c-drawer__panel {
-    margin-left: 0;
     transform: translateX(0); }
-  .pf-c-drawer.pf-m-inline.pf-m-panel-left .pf-c-drawer__panel {
-    margin-right: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
-    margin-left: 0;
-    transform: translateX(-100%); }
-  .pf-c-drawer.pf-m-inline.pf-m-panel-left.pf-m-expanded .pf-c-drawer__panel {
-    margin-right: 0;
-    transform: translateX(0); } }
-
-@media screen and (min-width: 768px) {
-  .pf-c-drawer.pf-m-divider .pf-c-drawer__panel::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: var(--pf-c-drawer--m-divider__panel--after--Width);
-    height: 100%;
-    content: "";
-    background-color: transparent; }
-  .pf-c-drawer.pf-m-divider.pf-m-expanded .pf-c-drawer__panel::after {
-    background-color: var(--pf-c-drawer--m-divider--m-expanded__panel--after--BackgroundColor); }
-  .pf-c-drawer.pf-m-divider.pf-m-panel-left.pf-m-expanded .pf-c-drawer__panel::after {
+  .pf-c-drawer.pf-m-panel-left.pf-m-expanded .pf-c-drawer__panel::after {
     right: 0;
-    left: auto; } }
+    left: auto; }
+  .pf-c-drawer .pf-c-drawer__panel.pf-m-border,
+  .pf-c-drawer.pf-m-panel-left .pf-c-drawer__panel.pf-m-border,
+  .pf-c-drawer .pf-c-drawer__panel.pf-m-no-border,
+  .pf-c-drawer.pf-m-panel-left .pf-c-drawer__panel.pf-m-no-border {
+    --pf-c-drawer__panel--BoxShadow: transparent; }
+  .pf-c-drawer.pf-m-expanded .pf-c-drawer__panel.pf-m-border::after {
+    --pf-c-drawer__panel--after--BackgroundColor: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor); } }
 
 @media (min-width: 768px) {
   .pf-c-drawer__panel.pf-m-width-25 {
@@ -131,7 +195,9 @@
   .pf-c-drawer__panel.pf-m-width-66 {
     --pf-c-drawer__panel--FlexBasis: 66%; }
   .pf-c-drawer__panel.pf-m-width-75 {
-    --pf-c-drawer__panel--FlexBasis: 75%; } }
+    --pf-c-drawer__panel--FlexBasis: 75%; }
+  .pf-c-drawer__panel.pf-m-width-100 {
+    --pf-c-drawer__panel--FlexBasis: 100%; } }
 
 @media (min-width: 992px) {
   .pf-c-drawer__panel.pf-m-width-25-on-lg {
@@ -143,7 +209,9 @@
   .pf-c-drawer__panel.pf-m-width-66-on-lg {
     --pf-c-drawer__panel--FlexBasis: 66%; }
   .pf-c-drawer__panel.pf-m-width-75-on-lg {
-    --pf-c-drawer__panel--FlexBasis: 75%; } }
+    --pf-c-drawer__panel--FlexBasis: 75%; }
+  .pf-c-drawer__panel.pf-m-width-100-on-lg {
+    --pf-c-drawer__panel--FlexBasis: 100%; } }
 
 @media (min-width: 1200px) {
   .pf-c-drawer__panel.pf-m-width-25-on-xl {
@@ -155,7 +223,9 @@
   .pf-c-drawer__panel.pf-m-width-66-on-xl {
     --pf-c-drawer__panel--FlexBasis: 66%; }
   .pf-c-drawer__panel.pf-m-width-75-on-xl {
-    --pf-c-drawer__panel--FlexBasis: 75%; } }
+    --pf-c-drawer__panel--FlexBasis: 75%; }
+  .pf-c-drawer__panel.pf-m-width-100-on-xl {
+    --pf-c-drawer__panel--FlexBasis: 100%; } }
 
 @media (min-width: 1450px) {
   .pf-c-drawer__panel.pf-m-width-25-on-2xl {
@@ -167,4 +237,186 @@
   .pf-c-drawer__panel.pf-m-width-66-on-2xl {
     --pf-c-drawer__panel--FlexBasis: 66%; }
   .pf-c-drawer__panel.pf-m-width-75-on-2xl {
-    --pf-c-drawer__panel--FlexBasis: 75%; } }
+    --pf-c-drawer__panel--FlexBasis: 75%; }
+  .pf-c-drawer__panel.pf-m-width-100-on-2xl {
+    --pf-c-drawer__panel--FlexBasis: 100%; } }
+
+@media (min-width: 768px) {
+  .pf-c-drawer.pf-m-inline .pf-c-drawer__content,
+  .pf-c-drawer.pf-m-static .pf-c-drawer__content {
+    flex-shrink: 1; }
+  .pf-c-drawer.pf-m-inline .pf-c-drawer__panel,
+  .pf-c-drawer.pf-m-static .pf-c-drawer__panel {
+    --pf-c-drawer__panel--BoxShadow: transparent; }
+    .pf-c-drawer.pf-m-inline .pf-c-drawer__panel::after,
+    .pf-c-drawer.pf-m-static .pf-c-drawer__panel::after {
+      --pf-c-drawer__panel--after--BackgroundColor: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor); }
+  .pf-c-drawer.pf-m-inline .pf-c-drawer__content {
+    overflow-x: auto; }
+  .pf-c-drawer.pf-m-inline .pf-c-drawer__panel {
+    margin-left: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
+    transform: translateX(100%); }
+  .pf-c-drawer.pf-m-inline.pf-m-expanded .pf-c-drawer__panel {
+    margin-left: 0;
+    transform: translateX(0); }
+  .pf-c-drawer.pf-m-static .pf-c-drawer__panel {
+    margin-left: 0;
+    transform: translateX(0); }
+  .pf-c-drawer.pf-m-static.pf-m-panel-left .pf-c-drawer__panel {
+    margin-right: 0;
+    margin-left: 0;
+    transform: translateX(0); }
+    .pf-c-drawer.pf-m-static.pf-m-panel-left .pf-c-drawer__panel::after {
+      right: 0;
+      left: auto; }
+  .pf-c-drawer.pf-m-static .pf-c-drawer__close {
+    display: none;
+    visibility: hidden; } }
+
+@media (min-width: 768px) {
+  .pf-c-drawer.pf-m-panel-left.pf-m-inline .pf-c-drawer__panel {
+    --pf-c-drawer__panel--BoxShadow: transparent;
+    margin-right: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
+    margin-left: 0;
+    transform: translateX(-100%); }
+  .pf-c-drawer.pf-m-panel-left.pf-m-inline.pf-m-expanded .pf-c-drawer__panel {
+    margin-right: 0;
+    transform: translateX(0); }
+  .pf-c-drawer.pf-m-panel-left.pf-m-inline .pf-c-drawer__close {
+    display: unset;
+    visibility: visible; } }
+
+@media (min-width: 992px) {
+  .pf-c-drawer.pf-m-inline-on-lg .pf-c-drawer__content,
+  .pf-c-drawer.pf-m-static-on-lg .pf-c-drawer__content {
+    flex-shrink: 1; }
+  .pf-c-drawer.pf-m-inline-on-lg .pf-c-drawer__panel,
+  .pf-c-drawer.pf-m-static-on-lg .pf-c-drawer__panel {
+    --pf-c-drawer__panel--BoxShadow: transparent; }
+    .pf-c-drawer.pf-m-inline-on-lg .pf-c-drawer__panel::after,
+    .pf-c-drawer.pf-m-static-on-lg .pf-c-drawer__panel::after {
+      --pf-c-drawer__panel--after--BackgroundColor: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor); }
+  .pf-c-drawer.pf-m-inline-on-lg .pf-c-drawer__content {
+    overflow-x: auto; }
+  .pf-c-drawer.pf-m-inline-on-lg .pf-c-drawer__panel {
+    margin-left: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
+    transform: translateX(100%); }
+  .pf-c-drawer.pf-m-inline-on-lg.pf-m-expanded .pf-c-drawer__panel {
+    margin-left: 0;
+    transform: translateX(0); }
+  .pf-c-drawer.pf-m-static-on-lg .pf-c-drawer__panel {
+    margin-left: 0;
+    transform: translateX(0); }
+  .pf-c-drawer.pf-m-static-on-lg.pf-m-panel-left .pf-c-drawer__panel {
+    margin-right: 0;
+    margin-left: 0;
+    transform: translateX(0); }
+    .pf-c-drawer.pf-m-static-on-lg.pf-m-panel-left .pf-c-drawer__panel::after {
+      right: 0;
+      left: auto; }
+  .pf-c-drawer.pf-m-static-on-lg .pf-c-drawer__close {
+    display: none;
+    visibility: hidden; } }
+
+@media (min-width: 992px) {
+  .pf-c-drawer.pf-m-panel-left.pf-m-inline-on-lg .pf-c-drawer__panel {
+    --pf-c-drawer__panel--BoxShadow: transparent;
+    margin-right: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
+    margin-left: 0;
+    transform: translateX(-100%); }
+  .pf-c-drawer.pf-m-panel-left.pf-m-inline-on-lg.pf-m-expanded .pf-c-drawer__panel {
+    margin-right: 0;
+    transform: translateX(0); }
+  .pf-c-drawer.pf-m-panel-left.pf-m-inline-on-lg .pf-c-drawer__close {
+    display: unset;
+    visibility: visible; } }
+
+@media (min-width: 1200px) {
+  .pf-c-drawer.pf-m-inline-on-xl .pf-c-drawer__content,
+  .pf-c-drawer.pf-m-static-on-xl .pf-c-drawer__content {
+    flex-shrink: 1; }
+  .pf-c-drawer.pf-m-inline-on-xl .pf-c-drawer__panel,
+  .pf-c-drawer.pf-m-static-on-xl .pf-c-drawer__panel {
+    --pf-c-drawer__panel--BoxShadow: transparent; }
+    .pf-c-drawer.pf-m-inline-on-xl .pf-c-drawer__panel::after,
+    .pf-c-drawer.pf-m-static-on-xl .pf-c-drawer__panel::after {
+      --pf-c-drawer__panel--after--BackgroundColor: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor); }
+  .pf-c-drawer.pf-m-inline-on-xl .pf-c-drawer__content {
+    overflow-x: auto; }
+  .pf-c-drawer.pf-m-inline-on-xl .pf-c-drawer__panel {
+    margin-left: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
+    transform: translateX(100%); }
+  .pf-c-drawer.pf-m-inline-on-xl.pf-m-expanded .pf-c-drawer__panel {
+    margin-left: 0;
+    transform: translateX(0); }
+  .pf-c-drawer.pf-m-static-on-xl .pf-c-drawer__panel {
+    margin-left: 0;
+    transform: translateX(0); }
+  .pf-c-drawer.pf-m-static-on-xl.pf-m-panel-left .pf-c-drawer__panel {
+    margin-right: 0;
+    margin-left: 0;
+    transform: translateX(0); }
+    .pf-c-drawer.pf-m-static-on-xl.pf-m-panel-left .pf-c-drawer__panel::after {
+      right: 0;
+      left: auto; }
+  .pf-c-drawer.pf-m-static-on-xl .pf-c-drawer__close {
+    display: none;
+    visibility: hidden; } }
+
+@media (min-width: 1200px) {
+  .pf-c-drawer.pf-m-panel-left.pf-m-inline-on-xl .pf-c-drawer__panel {
+    --pf-c-drawer__panel--BoxShadow: transparent;
+    margin-right: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
+    margin-left: 0;
+    transform: translateX(-100%); }
+  .pf-c-drawer.pf-m-panel-left.pf-m-inline-on-xl.pf-m-expanded .pf-c-drawer__panel {
+    margin-right: 0;
+    transform: translateX(0); }
+  .pf-c-drawer.pf-m-panel-left.pf-m-inline-on-xl .pf-c-drawer__close {
+    display: unset;
+    visibility: visible; } }
+
+@media (min-width: 1450px) {
+  .pf-c-drawer.pf-m-inline-on-2xl .pf-c-drawer__content,
+  .pf-c-drawer.pf-m-static-on-2xl .pf-c-drawer__content {
+    flex-shrink: 1; }
+  .pf-c-drawer.pf-m-inline-on-2xl .pf-c-drawer__panel,
+  .pf-c-drawer.pf-m-static-on-2xl .pf-c-drawer__panel {
+    --pf-c-drawer__panel--BoxShadow: transparent; }
+    .pf-c-drawer.pf-m-inline-on-2xl .pf-c-drawer__panel::after,
+    .pf-c-drawer.pf-m-static-on-2xl .pf-c-drawer__panel::after {
+      --pf-c-drawer__panel--after--BackgroundColor: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor); }
+  .pf-c-drawer.pf-m-inline-on-2xl .pf-c-drawer__content {
+    overflow-x: auto; }
+  .pf-c-drawer.pf-m-inline-on-2xl .pf-c-drawer__panel {
+    margin-left: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
+    transform: translateX(100%); }
+  .pf-c-drawer.pf-m-inline-on-2xl.pf-m-expanded .pf-c-drawer__panel {
+    margin-left: 0;
+    transform: translateX(0); }
+  .pf-c-drawer.pf-m-static-on-2xl .pf-c-drawer__panel {
+    margin-left: 0;
+    transform: translateX(0); }
+  .pf-c-drawer.pf-m-static-on-2xl.pf-m-panel-left .pf-c-drawer__panel {
+    margin-right: 0;
+    margin-left: 0;
+    transform: translateX(0); }
+    .pf-c-drawer.pf-m-static-on-2xl.pf-m-panel-left .pf-c-drawer__panel::after {
+      right: 0;
+      left: auto; }
+  .pf-c-drawer.pf-m-static-on-2xl .pf-c-drawer__close {
+    display: none;
+    visibility: hidden; } }
+
+@media (min-width: 1450px) {
+  .pf-c-drawer.pf-m-panel-left.pf-m-inline-on-2xl .pf-c-drawer__panel {
+    --pf-c-drawer__panel--BoxShadow: transparent;
+    margin-right: calc(var(--pf-c-drawer__panel--FlexBasis) * -1);
+    margin-left: 0;
+    transform: translateX(-100%); }
+  .pf-c-drawer.pf-m-panel-left.pf-m-inline-on-2xl.pf-m-expanded .pf-c-drawer__panel {
+    margin-right: 0;
+    transform: translateX(0); }
+  .pf-c-drawer.pf-m-panel-left.pf-m-inline-on-2xl .pf-c-drawer__close {
+    display: unset;
+    visibility: visible; } }

package/css/components/Drawer/drawer.d.ts

@@ -1,37 +1,55 @@
 import './drawer.css';
 declare const _default: {
     drawer: string;
+    drawerSection: string;
+    drawerMain: string;
     drawerContent: string;
     drawerPanel: string;
-    drawerContentBody: string;
-    drawerPanelBody: string;
+    drawerHead: string;
+    drawerActions: string;
+    drawerBody: string;
+    pageMain: string;
+    drawerClose: string;
     modifiers: {
-        'padding': string;
+        'noBackground': string;
         'noPadding': string;
+        'padding': string;
         'expanded': string;
-        'divider': string;
         'panelLeft': string;
-        'inline': string;
+        'border': string;
+        'noBorder': string;
         'width_25': string;
         'width_33': string;
         'width_50': string;
         'width_66': string;
         'width_75': string;
+        'width_100': string;
         'width_25OnLg': string;
         'width_33OnLg': string;
         'width_50OnLg': string;
         'width_66OnLg': string;
         'width_75OnLg': string;
+        'width_100OnLg': string;
         'width_25OnXl': string;
         'width_33OnXl': string;
         'width_50OnXl': string;
         'width_66OnXl': string;
         'width_75OnXl': string;
+        'width_100OnXl': string;
         'width_25On_2xl': string;
         'width_33On_2xl': string;
         'width_50On_2xl': string;
         'width_66On_2xl': string;
         'width_75On_2xl': string;
+        'width_100On_2xl': string;
+        'inline': string;
+        'static': string;
+        'inlineOnLg': string;
+        'staticOnLg': string;
+        'inlineOnXl': string;
+        'staticOnXl': string;
+        'inlineOn_2xl': string;
+        'staticOn_2xl': string;
     };
 };
 export default _default;

package/css/components/Drawer/drawer.js

@@ -3,36 +3,54 @@ Object.defineProperty(exports, "__esModule", { value: true });
 require("./drawer.css");
 exports.default = {
     drawer: 'pf-c-drawer',
+    drawerSection: 'pf-c-drawer__section',
+    drawerMain: 'pf-c-drawer__main',
     drawerContent: 'pf-c-drawer__content',
     drawerPanel: 'pf-c-drawer__panel',
-    drawerContentBody: 'pf-c-drawer__content-body',
-    drawerPanelBody: 'pf-c-drawer__panel-body',
+    drawerHead: 'pf-c-drawer__head',
+    drawerActions: 'pf-c-drawer__actions',
+    drawerBody: 'pf-c-drawer__body',
+    pageMain: 'pf-c-page__main',
+    drawerClose: 'pf-c-drawer__close',
     modifiers: {
-        'padding': 'pf-m-padding',
+        'noBackground': 'pf-m-no-background',
         'noPadding': 'pf-m-no-padding',
+        'padding': 'pf-m-padding',
         'expanded': 'pf-m-expanded',
-        'divider': 'pf-m-divider',
         'panelLeft': 'pf-m-panel-left',
-        'inline': 'pf-m-inline',
+        'border': 'pf-m-border',
+        'noBorder': 'pf-m-no-border',
         'width_25': 'pf-m-width-25',
         'width_33': 'pf-m-width-33',
         'width_50': 'pf-m-width-50',
         'width_66': 'pf-m-width-66',
         'width_75': 'pf-m-width-75',
+        'width_100': 'pf-m-width-100',
         'width_25OnLg': 'pf-m-width-25-on-lg',
         'width_33OnLg': 'pf-m-width-33-on-lg',
         'width_50OnLg': 'pf-m-width-50-on-lg',
         'width_66OnLg': 'pf-m-width-66-on-lg',
         'width_75OnLg': 'pf-m-width-75-on-lg',
+        'width_100OnLg': 'pf-m-width-100-on-lg',
         'width_25OnXl': 'pf-m-width-25-on-xl',
         'width_33OnXl': 'pf-m-width-33-on-xl',
         'width_50OnXl': 'pf-m-width-50-on-xl',
         'width_66OnXl': 'pf-m-width-66-on-xl',
         'width_75OnXl': 'pf-m-width-75-on-xl',
+        'width_100OnXl': 'pf-m-width-100-on-xl',
         'width_25On_2xl': 'pf-m-width-25-on-2xl',
         'width_33On_2xl': 'pf-m-width-33-on-2xl',
         'width_50On_2xl': 'pf-m-width-50-on-2xl',
         'width_66On_2xl': 'pf-m-width-66-on-2xl',
-        'width_75On_2xl': 'pf-m-width-75-on-2xl'
+        'width_75On_2xl': 'pf-m-width-75-on-2xl',
+        'width_100On_2xl': 'pf-m-width-100-on-2xl',
+        'inline': 'pf-m-inline',
+        'static': 'pf-m-static',
+        'inlineOnLg': 'pf-m-inline-on-lg',
+        'staticOnLg': 'pf-m-static-on-lg',
+        'inlineOnXl': 'pf-m-inline-on-xl',
+        'staticOnXl': 'pf-m-static-on-xl',
+        'inlineOn_2xl': 'pf-m-inline-on-2xl',
+        'staticOn_2xl': 'pf-m-static-on-2xl'
     }
 };

package/css/components/FileUpload/file-upload.css

@@ -3,8 +3,9 @@
   --pf-c-file-upload--m-loading__file-details--before--Left: var(--pf-global--BorderWidth--sm);
   --pf-c-file-upload--m-loading__file-details--before--Right: var(--pf-global--BorderWidth--sm);
   --pf-c-file-upload--m-loading__file-details--before--Bottom: var(--pf-global--BorderWidth--sm);
-  --pf-c-file-upload--m-drag-hover--after--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-file-upload--m-drag-hover--after--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-file-upload--m-drag-hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-file-upload--m-drag-hover--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-file-upload--m-drag-hover--before--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-file-upload--m-drag-hover--after--BackgroundColor: var(--pf-global--primary-color--100);
   --pf-c-file-upload--m-drag-hover--after--Opacity: .1;
   --pf-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-global--spacer--3xl) * 2);
@@ -19,20 +20,27 @@
   --pf-c-file-upload__message--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-file-upload__message--Color: var(--pf-global--Color--100);
   --pf-c-file-upload__message--m-error--Color: var(--pf-global--danger-color--100);
+  position: relative;
   display: flex;
   flex-direction: column; }
-  .pf-c-file-upload.pf-m-drag-hover {
-    position: relative; }
-    .pf-c-file-upload.pf-m-drag-hover::after {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      content: "";
-      background-color: var(--pf-c-file-upload--m-drag-hover--after--BackgroundColor);
-      border: var(--pf-c-file-upload--m-drag-hover--after--BorderWidth) solid var(--pf-c-file-upload--m-drag-hover--after--BorderColor);
-      opacity: var(--pf-c-file-upload--m-drag-hover--after--Opacity); }
+  .pf-c-file-upload.pf-m-drag-hover::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: var(--pf-c-file-upload--m-drag-hover--before--ZIndex);
+    content: "";
+    border: var(--pf-c-file-upload--m-drag-hover--before--BorderWidth) solid var(--pf-c-file-upload--m-drag-hover--before--BorderColor); }
+  .pf-c-file-upload.pf-m-drag-hover::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    content: "";
+    background-color: var(--pf-c-file-upload--m-drag-hover--after--BackgroundColor);
+    opacity: var(--pf-c-file-upload--m-drag-hover--after--Opacity); }
   .pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details {
     position: relative; }
     .pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details::before {

package/css/components/Login/login.css

@@ -29,7 +29,7 @@
 .pf-c-login {
   --pf-c-login--PaddingTop: var(--pf-global--spacer--lg);
   --pf-c-login--PaddingBottom: var(--pf-global--spacer--lg);
-  --pf-c-login--xl--BackgroundImage: linear-gradient(to right, var(--pf-global--BackgroundColor--dark-transparent-200), var(--pf-global--BackgroundColor--dark-transparent-200) calc((98px - var(--pf-c-login__container--xl--GridColumnGap)) + var(--pf-c-login__container--xl--GridColumnGap) + 272px), transparent calc((98px - var(--pf-c-login__container--xl--GridColumnGap)) + var(--pf-c-login__container--xl--GridColumnGap) + 272px));
+  --pf-c-login--xl--BackgroundImage: none;
   --pf-c-login__container--xl--GridColumnGap: var(--pf-global--spacer--3xl);
   --pf-c-login__container--MaxWidth: 31.25rem;
   --pf-c-login__container--xl--MaxWidth: none;
@@ -112,14 +112,12 @@
       --pf-c-login__footer--c-list--PaddingTop: var(--pf-c-login__footer--c-list--xl--PaddingTop); } }
   @media (min-width: 1200px) {
     .pf-c-login {
-      justify-content: flex-start;
       background-image: var(--pf-c-login--xl--BackgroundImage); } }
   @media (min-width: 576px) {
     .pf-c-login {
       align-items: center; } }
 
 .pf-c-login__container {
-  width: 100%;
   max-width: var(--pf-c-login__container--MaxWidth); }
   @media (min-width: 1200px) {
     .pf-c-login__container {

package/css/components/Nav/nav.css

@@ -177,9 +177,10 @@
     display: block;
     visibility: visible; }
   .pf-c-nav .pf-c-divider {
+    padding-left: var(--pf-c-nav__c-divider--MarginLeft);
     margin-top: var(--pf-c-nav__c-divider--MarginTop);
     margin-bottom: var(--pf-c-nav__c-divider--MarginBottom);
-    margin-left: var(--pf-c-nav__c-divider--MarginLeft); }
+    margin-left: 0; }
   .pf-c-nav.pf-m-dark {
     --pf-c-nav__list-link--PaddingTop: var(--pf-c-nav--m-dark__list-link--PaddingTop);
     --pf-c-nav__list-link--PaddingBottom: var(--pf-c-nav--m-dark__list-link--PaddingBottom);
@@ -207,13 +208,13 @@
     --pf-c-nav__subnav--MarginTop: var(--pf-c-nav--m-dark__subnav--MarginTop);
     --pf-c-nav__list-link--after--Width: var(--pf-c-nav--m-dark__list-link--after--Width); }
     .pf-c-nav.pf-m-dark .pf-c-divider {
-      background-color: var(--pf-c-nav--m-dark__c-divider--BackgroundColor); }
+      --pf-c-divider--after--BackgroundColor: var(--pf-c-nav--m-dark__c-divider--BackgroundColor); }
     .pf-c-nav.pf-m-dark .pf-c-nav__item.pf-m-current {
       --pf-c-nav__simple-list-link--Color: var(--pf-c-nav--m-dark__item--m-current__simple-list-link--Color);
       --pf-c-nav__list-link--Color: var(--pf-c-nav--m-dark__item--m-current__list-link--Color);
       --pf-c-nav__separator--BackgroundColor: var(--pf-c-nav--m-dark__item--m-current__separator--BackgroundColor); }
       .pf-c-nav.pf-m-dark .pf-c-nav__item.pf-m-current .pf-c-divider {
-        background-color: var(--pf-c-nav--m-dark__item--m-current__c-divider--BackgroundColor); }
+        --pf-c-divider--after--BackgroundColor: var(--pf-c-nav--m-dark__item--m-current__c-divider--BackgroundColor); }
     .pf-c-nav.pf-m-dark .pf-c-nav__item.pf-m-expanded {
       padding-bottom: var(--pf-c-nav--m-dark__item--m-expanded--PaddingBottom); }
       .pf-c-nav.pf-m-dark .pf-c-nav__item.pf-m-expanded > .pf-c-nav__link {

package/css/components/OverflowMenu/overflow-menu.css

@@ -3,6 +3,7 @@
   --pf-c-overflow-menu--spacer: var(--pf-global--spacer--sm);
   --pf-c-overflow-menu__group--spacer: var(--pf-c-overflow-menu--spacer--base);
   --pf-c-overflow-menu__item--spacer: var(--pf-c-overflow-menu--spacer--base);
+  --pf-c-overflow-menu--c-divider--m-vertical--spacer: var(--pf-c-overflow-menu--spacer--base);
   --pf-c-overflow-menu__group--m-button-group--spacer: var(--pf-c-overflow-menu--spacer--base);
   --pf-c-overflow-menu__group--m-button-group--space-items: var(--pf-global--spacer--sm);
   --pf-c-overflow-menu__group--m-icon-button-group--spacer: var(--pf-c-overflow-menu--spacer--base);
@@ -40,3 +41,14 @@
   .pf-c-overflow-menu__group:last-child,
   .pf-c-overflow-menu__item:last-child {
     --pf-c-overflow-menu--spacer: 0; }
+
+.pf-c-overflow-menu > .pf-c-divider,
+.pf-c-overflow-menu__group > .pf-c-divider {
+  --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu--c-divider--m-vertical--spacer); }
+
+.pf-c-overflow-menu > .pf-c-divider.pf-m-vertical,
+.pf-c-overflow-menu__group > .pf-c-divider.pf-m-vertical {
+  margin-right: var(--pf-c-overflow-menu--spacer); }
+  .pf-c-overflow-menu > .pf-c-divider.pf-m-vertical:last-child,
+  .pf-c-overflow-menu__group > .pf-c-divider.pf-m-vertical:last-child {
+    --pf-c-overflow-menu--spacer: 0; }

package/css/components/OverflowMenu/overflow-menu.d.ts

@@ -5,9 +5,11 @@ declare const _default: {
     overflowMenuGroup: string;
     overflowMenuItem: string;
     overflowMenuControl: string;
+    divider: string;
     modifiers: {
         'buttonGroup': string;
         'iconButtonGroup': string;
+        'vertical': string;
     };
 };
 export default _default;

package/css/components/OverflowMenu/overflow-menu.js

@@ -7,8 +7,10 @@ exports.default = {
     overflowMenuGroup: 'pf-c-overflow-menu__group',
     overflowMenuItem: 'pf-c-overflow-menu__item',
     overflowMenuControl: 'pf-c-overflow-menu__control',
+    divider: 'pf-c-divider',
     modifiers: {
         'buttonGroup': 'pf-m-button-group',
-        'iconButtonGroup': 'pf-m-icon-button-group'
+        'iconButtonGroup': 'pf-m-icon-button-group',
+        'vertical': 'pf-m-vertical'
     }
 };

package/css/components/Page/page.css

@@ -343,7 +343,7 @@
   padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
   background-color: var(--pf-c-page__main-section--BackgroundColor); }
   .pf-c-page__main-section:last-of-type, .pf-c-page__main-section:only-child, .pf-c-page__main-section.pf-m-fill {
-    flex: 1 0 auto; }
+    flex: 1; }
   .pf-c-page__main-section.pf-m-no-fill {
     flex: 0 0 auto; }
   .pf-c-page__main-section.pf-m-light {
@@ -367,17 +367,7 @@
   flex: 1 0 0;
   border-top: var(--pf-c-page__main-wizard--BorderTopWidth) solid var(--pf-c-page__main-wizard--BorderTopColor); }
 
-.pf-c-page__drawer > .pf-c-drawer {
-  flex: 1 0 auto; }
-
-.pf-c-page__drawer > .pf-c-drawer > .pf-c-drawer__content {
-  display: flex;
-  flex-direction: column; }
-
-.pf-c-page__drawer > .pf-c-drawer > .pf-c-drawer__content > .pf-c-drawer__content-body {
-  display: flex;
-  flex: 1 0; }
-  .pf-c-page__drawer > .pf-c-drawer > .pf-c-drawer__content > .pf-c-drawer__content-body .pf-c-page__main {
-    --pf-c-page__main--ZIndex: auto;
-    grid-area: auto;
+.pf-c-page__drawer {
+  grid-area: main; }
+  .pf-c-page__drawer > .pf-c-drawer {
     flex: 1 0 auto; }

package/css/components/Page/page.d.ts

@@ -24,8 +24,6 @@ declare const _default: {
     pageMainBreadcrumb: string;
     pageMainWizard: string;
     drawer: string;
-    drawerContent: string;
-    drawerContentBody: string;
     modifiers: {
         'dark': string;
         'icons': string;

package/css/components/Page/page.js

@@ -26,8 +26,6 @@ exports.default = {
     pageMainBreadcrumb: 'pf-c-page__main-breadcrumb',
     pageMainWizard: 'pf-c-page__main-wizard',
     drawer: 'pf-c-drawer',
-    drawerContent: 'pf-c-drawer__content',
-    drawerContentBody: 'pf-c-drawer__content-body',
     modifiers: {
         'dark': 'pf-m-dark',
         'icons': 'pf-m-icons',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "3.7.6",
+  "version": "3.7.8",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/js/index.d.ts",
@@ -42,7 +42,7 @@
     "@babel/plugin-transform-typescript": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@patternfly/patternfly": "2.65.3",
+    "@patternfly/patternfly": "2.68.3",
     "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
     "babel-plugin-typescript-to-proptypes": "^0.17.1",
     "fbjs-scripts": "^0.8.3",
@@ -54,5 +54,5 @@
     "typescript": "3.4.5"
   },
   "license": "MIT",
-  "gitHead": "34098e96e3938a076f29392332a3e1caaa240d62"
+  "gitHead": "14f9e799350f309410f15996af36435af0c7e6c4"
 }