@patternfly/patternfly 6.5.0-prerelease.11 → 6.5.0-prerelease.12

package/patternfly.css

@@ -14813,6 +14813,7 @@ ul) {
 }
 
 .pf-v6-c-drawer {
+  --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-drawer__content--FlexBasis: 100%;
@@ -14843,6 +14844,7 @@ ul) {
   --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
   --pf-v6-c-drawer__panel--Opacity: 0;
   --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
+  --pf-v6-c-drawer--m-expanded__panel--inset: 0px;
   --pf-v6-c-drawer__panel--FlexBasis: 100%;
   --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
   --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -14858,6 +14860,13 @@ ul) {
   --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
   --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
   --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
+  --pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
+  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -14974,6 +14983,8 @@ ul) {
 .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
   --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
   --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
+  --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
+  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0;
 }
 .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
   padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -14997,7 +15008,7 @@ ul) {
   --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
 }
 .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
-  transform: translateX(-100%);
+  transform: translateX(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
   visibility: visible;
 }
@@ -15009,7 +15020,7 @@ ul) {
   transform: translateX(0);
 }
 .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
-  transform: translate(0, -100%);
+  transform: translate(0, calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
 }
 .pf-v6-c-drawer.pf-m-resizing {
   --pf-v6-c-drawer__panel--TransitionProperty: none;
@@ -15018,6 +15029,21 @@ ul) {
 .pf-v6-c-drawer.pf-m-resizing .pf-v6-c-drawer__splitter {
   pointer-events: auto;
 }
+@media screen and (min-width: 48rem) {
+  .pf-v6-c-drawer.pf-m-pill {
+    --pf-v6-c-drawer__main--Gap: var(--pf-v6-c-drawer--m-pill__main--Gap, revert);
+    --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer--m-pill__panel--BorderColor);
+    --pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
+    --pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
+    --pf-v6-c-drawer__panel--MarginBlock: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
+  }
+  .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+    border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
+    border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
+    border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
+    border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
+  }
+}
 
 .pf-v6-c-drawer__section {
   flex-grow: 0;
@@ -15033,6 +15059,7 @@ ul) {
 .pf-v6-c-drawer__main {
   display: flex;
   flex: 1;
+  gap: var(--pf-v6-c-drawer__main--Gap, 0);
   overflow: hidden;
 }
 
@@ -15071,6 +15098,8 @@ ul) {
   row-gap: var(--pf-v6-c-drawer__panel--RowGap);
   order: 1;
   max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
+  margin-block: var(--pf-v6-c-drawer__panel--MarginBlock, revert);
+  margin-inline: var(--pf-v6-c-drawer__panel--MarginInline, revert);
   overflow: auto;
   visibility: hidden;
   background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
@@ -15079,6 +15108,7 @@ ul) {
   border-block-end-width: var(--pf-v6-c-drawer__panel--BorderBlockEndWidth);
   border-inline-start-width: var(--pf-v6-c-drawer__panel--BorderInlineStartWidth);
   border-inline-end-width: var(--pf-v6-c-drawer__panel--BorderInlineEndWidth);
+  border-radius: var(--pf-v6-c-drawer__panel--BorderRadius, revert);
   box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
   opacity: var(--pf-v6-c-drawer__panel--Opacity);
   transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
@@ -15266,7 +15296,7 @@ ul) {
     padding-inline-end: var(--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd);
   }
   .pf-v6-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
-    transform: translateX(0);
+    transform: translateX(var(--pf-v6-c-drawer--m-expanded__panel--inset));
   }
   .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
     --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart);
@@ -15278,6 +15308,8 @@ ul) {
     --pf-v6-c-drawer__panel--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--FlexBasis--min);
     --pf-v6-c-drawer__panel--BorderInlineStartWidth: 0;
     --pf-v6-c-drawer__panel--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-panel-bottom__panel--after--Height);
+    --pf-v6-c-drawer__panel--MarginBlock: initial;
+    --pf-v6-c-drawer__panel--MarginInline: var(--pf-v6-c-drawer--m-expanded__panel--inset);
     min-width: auto;
     min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight);
   }