@patternfly/patternfly/components/ModalBox/modal-box.css

Assets, source, tooling, and content for PatternFly 4

.pf-v5-c-modal-box {
  --pf-v5-c-modal-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
  --pf-v5-c-modal-box--BoxShadow: var(--pf-v5-global--BoxShadow--xl);
  --pf-v5-c-modal-box--ZIndex: var(--pf-v5-global--ZIndex--xl);
  --pf-v5-c-modal-box--Width: 100%;
  --pf-v5-c-modal-box--MaxWidth: calc(100% - var(--pf-v5-global--spacer--xl));
  --pf-v5-c-modal-box--m-sm--sm--MaxWidth: 35rem;
  --pf-v5-c-modal-box--m-md--Width: 52.5rem;
  --pf-v5-c-modal-box--m-lg--lg--MaxWidth: 70rem;
  --pf-v5-c-modal-box--MaxHeight: calc(100% - var(--pf-v5-global--spacer--2xl));
  --pf-v5-c-modal-box--m-align-top--spacer: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-modal-box--m-align-top--xl--spacer: var(--pf-v5-global--spacer--xl);
  --pf-v5-c-modal-box--m-align-top--MarginTop: var(--pf-v5-c-modal-box--m-align-top--spacer);
  --pf-v5-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-v5-c-modal-box--m-align-top--spacer), var(--pf-v5-global--spacer--2xl)) - var(--pf-v5-c-modal-box--m-align-top--spacer));
  --pf-v5-c-modal-box--m-align-top--MaxWidth: calc(100% - min(var(--pf-v5-c-modal-box--m-align-top--spacer) * 2, var(--pf-v5-global--spacer--xl)));
  --pf-v5-c-modal-box--m-danger__title-icon--Color: var(--pf-v5-global--danger-color--100);
  --pf-v5-c-modal-box--m-warning__title-icon--Color: var(--pf-v5-global--warning-color--100);
  --pf-v5-c-modal-box--m-success__title-icon--Color: var(--pf-v5-global--success-color--100);
  --pf-v5-c-modal-box--m-info__title-icon--Color: var(--pf-v5-global--info-color--100);
  --pf-v5-c-modal-box--m-custom__title-icon--Color: var(--pf-v5-global--custom-color--200);
  --pf-v5-c-modal-box__header--PaddingTop: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-modal-box__header--PaddingRight: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-modal-box__header--PaddingLeft: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-modal-box__header--last-child--PaddingBottom: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-modal-box__title--LineHeight: var(--pf-v5-global--LineHeight--sm);
  --pf-v5-c-modal-box__title--FontFamily: var(--pf-v5-global--FontFamily--heading);
  --pf-v5-c-modal-box__title--FontSize: var(--pf-v5-global--FontSize--2xl);
  --pf-v5-c-modal-box__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-global--Color--100);
  --pf-v5-c-modal-box__description--PaddingTop: var(--pf-v5-global--spacer--xs);
  --pf-v5-c-modal-box__body--MinHeight: calc(var(--pf-v5-global--FontSize--md) * var(--pf-v5-global--LineHeight--md));
  --pf-v5-c-modal-box__body--PaddingTop: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-modal-box__body--PaddingRight: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-modal-box__body--PaddingLeft: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-modal-box__body--last-child--PaddingBottom: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-modal-box__header--body--PaddingTop: var(--pf-v5-global--spacer--md);
  --pf-v5-c-modal-box__close--Top: calc(var(--pf-v5-global--spacer--lg));
  --pf-v5-c-modal-box__close--Right: var(--pf-v5-global--spacer--md);
  --pf-v5-c-modal-box__close--sibling--MarginRight: calc(var(--pf-v5-global--spacer--xl) + var(--pf-v5-global--spacer--sm));
  --pf-v5-c-modal-box__footer--PaddingTop: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-modal-box__footer--PaddingRight: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-modal-box__footer--PaddingBottom: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-modal-box__footer--PaddingLeft: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-modal-box__footer--c-button--MarginRight: var(--pf-v5-global--spacer--md);
  --pf-v5-c-modal-box__footer--c-button--sm--MarginRight: calc(var(--pf-v5-c-modal-box__footer--c-button--MarginRight) / 2);
  position: relative;
  z-index: var(--pf-v5-c-modal-box--ZIndex);
  display: flex;
  flex-direction: column;
  width: var(--pf-v5-c-modal-box--Width);
  max-width: var(--pf-v5-c-modal-box--MaxWidth);
  max-height: var(--pf-v5-c-modal-box--MaxHeight);
  background-color: var(--pf-v5-c-modal-box--BackgroundColor);
  box-shadow: var(--pf-v5-c-modal-box--BoxShadow);
}
@media (min-width: 1200px) {
  .pf-v5-c-modal-box {
    --pf-v5-c-modal-box--m-align-top--spacer: var(--pf-v5-c-modal-box--m-align-top--xl--spacer);
  }
}
.pf-v5-c-modal-box.pf-m-sm {
  --pf-v5-c-modal-box--Width: var(--pf-v5-c-modal-box--m-sm--sm--MaxWidth);
}
.pf-v5-c-modal-box.pf-m-md {
  --pf-v5-c-modal-box--Width: var(--pf-v5-c-modal-box--m-md--Width);
}
.pf-v5-c-modal-box.pf-m-lg {
  --pf-v5-c-modal-box--Width: var(--pf-v5-c-modal-box--m-lg--lg--MaxWidth);
}
.pf-v5-c-modal-box.pf-m-align-top {
  inset-block-start: var(--pf-v5-c-modal-box--m-align-top--MarginTop);
  align-self: flex-start;
  max-width: var(--pf-v5-c-modal-box--m-align-top--MaxWidth);
  max-height: var(--pf-v5-c-modal-box--m-align-top--MaxHeight);
}
.pf-v5-c-modal-box__title.pf-m-danger, .pf-v5-c-modal-box.pf-m-danger {
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-danger__title-icon--Color);
}

.pf-v5-c-modal-box__title.pf-m-warning, .pf-v5-c-modal-box.pf-m-warning {
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-warning__title-icon--Color);
}

.pf-v5-c-modal-box__title.pf-m-success, .pf-v5-c-modal-box.pf-m-success {
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-success__title-icon--Color);
}

.pf-v5-c-modal-box__title.pf-m-custom, .pf-v5-c-modal-box.pf-m-custom {
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-custom__title-icon--Color);
}

.pf-v5-c-modal-box__title.pf-m-info, .pf-v5-c-modal-box.pf-m-info {
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-info__title-icon--Color);
}

.pf-v5-c-modal-box__close {
  position: absolute;
  inset-block-start: var(--pf-v5-c-modal-box__close--Top);
  inset-inline-end: var(--pf-v5-c-modal-box__close--Right);
}
.pf-v5-c-modal-box__close + * {
  margin-inline-end: var(--pf-v5-c-modal-box__close--sibling--MarginRight);
}

.pf-v5-c-modal-box__header {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding-block-start: var(--pf-v5-c-modal-box__header--PaddingTop);
  padding-inline-start: var(--pf-v5-c-modal-box__header--PaddingLeft);
  padding-inline-end: var(--pf-v5-c-modal-box__header--PaddingRight);
}
.pf-v5-c-modal-box__header.pf-m-help {
  display: flex;
  flex-direction: row;
}
.pf-v5-c-modal-box__header:last-child {
  padding-block-end: var(--pf-v5-c-modal-box__header--last-child--PaddingBottom);
}
.pf-v5-c-modal-box__header + .pf-v5-c-modal-box__body {
  --pf-v5-c-modal-box__body--PaddingTop: var(--pf-v5-c-modal-box__header--body--PaddingTop);
}

.pf-v5-c-modal-box__header-main {
  flex-grow: 1;
  min-width: 0;
}

.pf-v5-c-modal-box__title,
.pf-v5-c-modal-box__title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-v5-c-modal-box__title {
  flex: 0 0 auto;
  font-family: var(--pf-v5-c-modal-box__title--FontFamily);
  font-size: var(--pf-v5-c-modal-box__title--FontSize);
  line-height: var(--pf-v5-c-modal-box__title--LineHeight);
}
.pf-v5-c-modal-box__title.pf-m-icon {
  display: flex;
}

.pf-v5-c-modal-box__title-icon {
  margin-inline-end: var(--pf-v5-c-modal-box__title-icon--MarginRight);
  color: var(--pf-v5-c-modal-box__title-icon--Color);
}

.pf-v5-c-modal-box__description {
  padding-block-start: var(--pf-v5-c-modal-box__description--PaddingTop);
}

.pf-v5-c-modal-box__body {
  flex: 1 1 auto;
  min-height: var(--pf-v5-c-modal-box__body--MinHeight);
  padding-block-start: var(--pf-v5-c-modal-box__body--PaddingTop);
  padding-inline-start: var(--pf-v5-c-modal-box__body--PaddingLeft);
  padding-inline-end: var(--pf-v5-c-modal-box__body--PaddingRight);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  word-break: break-word;
  -webkit-overflow-scrolling: touch;
}
.pf-v5-c-modal-box__body:last-child {
  padding-block-end: var(--pf-v5-c-modal-box__body--last-child--PaddingBottom);
}

.pf-v5-c-modal-box__footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding-block-start: var(--pf-v5-c-modal-box__footer--PaddingTop);
  padding-block-end: var(--pf-v5-c-modal-box__footer--PaddingBottom);
  padding-inline-start: var(--pf-v5-c-modal-box__footer--PaddingLeft);
  padding-inline-end: var(--pf-v5-c-modal-box__footer--PaddingRight);
}
.pf-v5-c-modal-box__footer > .pf-v5-c-button:not(:last-child) {
  margin-inline-end: var(--pf-v5-c-modal-box__footer--c-button--MarginRight);
}
@media screen and (min-width: 576px) {
  .pf-v5-c-modal-box__footer > .pf-v5-c-button:not(:last-child) {
    --pf-v5-c-modal-box__footer--c-button--MarginRight: var(--pf-v5-c-modal-box__footer--c-button--sm--MarginRight);
  }
}

:where(.pf-v5-theme-dark) .pf-v5-c-modal-box {
  --pf-v5-c-modal-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
}