package.components.Card.card.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
@use '../../sass-utilities' as *;

@include pf-root($card) {
  --#{$card}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
  --#{$card}--BorderColor: var(--pf-t--global--border--color--default);
  --#{$card}--BorderStyle: solid;
  --#{$card}--BorderWidth: var(--pf-t--global--border--width--box--default);
  --#{$card}--BorderRadius: var(--pf-t--global--border--radius--medium);
  --#{$card}--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
  --#{$card}--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
  --#{$card}--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
  --#{$card}--child--PaddingInlineStart: var(--pf-t--global--spacer--lg);
  --#{$card}--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
  --#{$card}__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--md);
  --#{$card}__title-text--Color: var(--pf-t--global--text--color--regular);
  --#{$card}__title-text--FontFamily: var(--pf-t--global--font--family--heading);
  --#{$card}__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
  --#{$card}__title-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
  --#{$card}__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
  --#{$card}--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
  --#{$card}__body--FontSize: var(--pf-t--global--font--size--body--default);
  --#{$card}__footer--FontSize: var(--pf-t--global--font--size--body--default);
  --#{$card}__footer--Color: var(--pf-t--global--text--color--subtle);
  --#{$card}__actions--PaddingInlineStart: var(--pf-t--global--spacer--md);
  --#{$card}__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
  --#{$card}__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
  --#{$card}__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);

  // Expandable
  --#{$card}__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
  --#{$card}__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
  --#{$card}__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
  --#{$card}__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
  --#{$card}__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
  --#{$card}__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
  --#{$card}--m-expanded__header-toggle-icon--Rotate: 90deg;

  // Selectable/Clickable
  --#{$card}--m-selectable--BorderWidth: var(--#{$card}--BorderWidth);

  // Clickable clicked
  --#{$card}--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
  --#{$card}--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);

  // Selected state (checked) of selectable card
  --#{$card}--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
  --#{$card}--m-selectable--m-selected--BorderWidth: var(--pf-t--global--border--width--box--clicked);

  // Hover on selectable card
  --#{$card}--m-selectable--hover--BorderColor: var(--pf-t--global--border--color--hover);

  // Focus on selectable card (label)
  --#{$card}--m-selectable--focus--BorderColor: var(--pf-t--global--border--color--hover);
  --#{$card}--m-selectable--focus--BorderWidth: var(--pf-t--global--border--width--box--hover);

  // Focus on a selected card (label)
  --#{$card}--m-selectable--m-selected--focus--BorderColor: var(--pf-t--global--border--color--clicked);
  --#{$card}--m-selectable--m-selected--focus--BorderWidth: var(--pf-t--global--border--width--box--clicked);

  // Disabled state
  --#{$card}--m-selectable--m-disabled__title-text--Color: var(--pf-t--global--text--color--on-disabled);
  --#{$card}--m-selectable--m-disabled__body--Color: var(--pf-t--global--text--color--on-disabled);
  --#{$card}--m-selectable--m-disabled__footer--Color: var(--pf-t--global--text--color--on-disabled);
  --#{$card}--m-selectable--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
  --#{$card}--m-selectable--m-disabled--BorderColor: transparent;

  // Selectable AND Clickable
  // Clicked (pf-m-current) selectable AND clickable card
  --#{$card}--m-selectable--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
  --#{$card}--m-selectable--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);

  // Compact
  --#{$card}--m-compact__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
  --#{$card}--m-compact__body--FontSize: var(--pf-t--global--font--size--body--default);
  --#{$card}--m-compact__footer--FontSize: var(--pf-t--global--font--size--body--sm);
  --#{$card}--m-compact--first-child--PaddingBlockStart: var(--pf-t--global--spacer--md);
  --#{$card}--m-compact--child--PaddingInlineEnd: var(--pf-t--global--spacer--md);
  --#{$card}--m-compact--child--PaddingBlockEnd: var(--pf-t--global--spacer--md);
  --#{$card}--m-compact--child--PaddingInlineStart: var(--pf-t--global--spacer--md);
  --#{$card}--m-compact--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--md);
  --#{$card}--m-compact__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--sm);

  // Display large
  --#{$card}--m-display-lg__title-text--FontSize: var(--pf-t--global--font--size--heading--md);
  --#{$card}--m-display-lg__body--FontSize: var(--pf-t--global--font--size--body--lg);
  --#{$card}--m-display-lg__footer--FontSize: var(--pf-t--global--font--size--body--default);
  --#{$card}--m-display-lg--first-child--PaddingBlockStart: var(--pf-t--global--spacer--xl);
  --#{$card}--m-display-lg--child--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
  --#{$card}--m-display-lg--child--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
  --#{$card}--m-display-lg--child--PaddingInlineStart: var(--pf-t--global--spacer--xl);
  --#{$card}--m-display-lg--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--xl);
  --#{$card}--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);

  // Secondary
  --#{$card}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
  --#{$card}--m-secondary--BorderColor: transparent;

  // Full height
  --#{$card}--m-full-height--Height: 100%;

  // Plain - no border or background color
  --#{$card}--m-plain--BorderColor: transparent;
  --#{$card}--m-plain--BackgroundColor: transparent;

  // Toggle right
  --#{$card}__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
  --#{$card}__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
}

.#{$card} {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background-color: var(--#{$card}--BackgroundColor);
  border: 0;
  border-radius: var(--#{$card}--BorderRadius);

  &::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    border: var(--#{$card}--BorderColor) var(--#{$card}--BorderStyle) var(--#{$card}--BorderWidth);
    border-radius: inherit;
  }

  // SELECTABLE CARDS
  &.pf-m-selectable {
    // disables the gap since these have an empty label
    .#{$card}__selectable-actions :is(.#{$check}, .#{$radio}) {
      gap: 0;
    }
  }

  // SELECTABLE or CLICKABLE CARDS
  &.pf-m-selectable,
  &.pf-m-clickable {
    isolation: isolate;

    &::before {
      border: none; // border will come from the input's ::before instead of the card so remove this so there's isn't a double border
    }
  }

  // CLICKABLE is clicked
  &.pf-m-current {
    --#{$card}--BorderColor: var(--#{$card}--m-clickable--m-current--BorderColor);
    --#{$card}--BorderWidth: var(--#{$card}--m-clickable--m-current--BorderWidth);
    --#{$card}--m-selectable--hover--BorderColor: var(--#{$card}--m-clickable--m-current--BorderColor);
    --#{$card}--m-selectable--focus--BorderColor: var(--#{$card}--m-clickable--m-current--BorderColor);
  }

  // stylelint-disable selector-max-class
  // Cards that are BOTH SELECTABLE AND CLICKABLE
  &.pf-m-selectable.pf-m-clickable {
    .#{$card}__selectable-actions :is(.#{$check}__label, .#{$radio}__label) {
      position: unset;

      &::before {
        position: absolute;
        inset: 0;
        cursor: pointer;
      }
    }

    // When SELECTABLE and CLICKABLE card is focused, don't show change of background or border on the card
    .#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input):where(:focus-visible) ~ :is(.#{$check}__label, .#{$radio}__label) {
      --#{$card}--BackgroundColor: revert;
      --#{$card}--BorderColor: revert;
    }

    // SELECTABLE and CLICKABLE card is selected (Check box checked or marked .pf-m-selected)
    .#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input):where(:checked) ~ :is(.#{$check}__label, .#{$radio}__label),
    &.pf-m-selected {
      --#{$card}--BorderColor: revert;
      --#{$card}--m-selectable--BorderWidth: revert;
    }

    // SELECTABLE and CLICKABLE card is clicked
    &.pf-m-current {
      --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-clickable--m-current--BorderColor);
      --#{$card}--BorderWidth: var(--#{$card}--m-selectable--m-clickable--m-current--BorderWidth);
    }

    // SELECTABLE and CLICKABLE but DISABLED card
    .#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input):where(:disabled) ~ :is(.#{$check}__label, .#{$radio}__label),
    &.pf-m-disabled {
      --#{$card}--BackgroundColor: var(--#{$card}--m-selectable--m-disabled--BackgroundColor);
    }
  }
  // stylelint-enable selector-max-class

  &.pf-m-compact {
    --#{$card}__title-text--FontSize: var(--#{$card}--m-compact__title-text--FontSize);
    --#{$card}__body--FontSize: var(--#{$card}--m-compact__body--FontSize);
    --#{$card}__footer--FontSize: var(--#{$card}--m-compact__footer--FontSize);
    --#{$card}--first-child--PaddingBlockStart: var(--#{$card}--m-compact--first-child--PaddingBlockStart);
    --#{$card}--child--PaddingInlineEnd: var(--#{$card}--m-compact--child--PaddingInlineEnd);
    --#{$card}--child--PaddingBlockEnd: var(--#{$card}--m-compact--child--PaddingBlockEnd);
    --#{$card}--child--PaddingInlineStart: var(--#{$card}--m-compact--child--PaddingInlineStart);
    --#{$card}--c-divider--child--PaddingBlockStart: var(--#{$card}--m-compact--c-divider--child--PaddingBlockStart);
    --#{$card}__title--not--last-child--PaddingBlockEnd: var(--#{$card}--m-compact__title--not--last-child--PaddingBlockEnd);
  }

  &.pf-m-display-lg {
    --#{$card}__title-text--FontSize: var(--#{$card}--m-display-lg__title-text--FontSize);
    --#{$card}__body--FontSize: var(--#{$card}--m-display-lg__body--FontSize);
    --#{$card}__footer--FontSize: var(--#{$card}--m-display-lg__footer--FontSize);
    --#{$card}--first-child--PaddingBlockStart: var(--#{$card}--m-display-lg--first-child--PaddingBlockStart);
    --#{$card}--child--PaddingInlineEnd: var(--#{$card}--m-display-lg--child--PaddingInlineEnd);
    --#{$card}--child--PaddingBlockEnd: var(--#{$card}--m-display-lg--child--PaddingBlockEnd);
    --#{$card}--child--PaddingInlineStart: var(--#{$card}--m-display-lg--child--PaddingInlineStart);
    --#{$card}--c-divider--child--PaddingBlockStart: var(--#{$card}--m-display-lg--c-divider--child--PaddingBlockStart);
    --#{$card}__title--not--last-child--PaddingBlockEnd: var(--#{$card}--m-display-lg__title--not--last-child--PaddingBlockEnd);
  }

  &.pf-m-secondary {
    --#{$card}--BorderColor: var(--#{$card}--m-secondary--BorderColor);
    --#{$card}--BackgroundColor: var(--#{$card}--m-secondary--BackgroundColor);
  }

  &.pf-m-plain {
    --#{$card}--BorderColor: var(--#{$card}--m-plain--BorderColor);
    --#{$card}--BackgroundColor: var(--#{$card}--m-plain--BackgroundColor);
  }

  &.pf-m-expanded {
    .#{$card}__header-toggle-icon {
      transform: rotate(var(--#{$card}--m-expanded__header-toggle-icon--Rotate));
    }
  }

  &.pf-m-full-height {
    height: var(--#{$card}--m-full-height--Height);
  }

  > .#{$divider} {
    & + .#{$card}__header,
    & + .#{$card}__title,
    & + .#{$card}__body,
    & + .#{$card}__footer {
      padding-block-start: var(--#{$card}--c-divider--child--PaddingBlockStart);
    }
  }
}

.#{$card}__header {
  display: flex;
  flex-direction: row;
  align-items: center;

  .#{$card}__title {
    --#{$card}--first-child--PaddingBlockStart: 0;
    --#{$card}__title--not--last-child--PaddingBlockEnd: 0;

    padding: 0;
  }

  &.pf-m-toggle-right {
    --#{$card}__header-toggle--MarginInlineEnd: var(--#{$card}__header--m-toggle-right--toggle--MarginInlineEnd);
    --#{$card}__header-toggle--MarginInlineStart: var(--#{$card}__header--m-toggle-right--toggle--MarginInlineStart);

    .#{$card}__header-toggle {
      order: 2;
    }
  }
}

.#{$card}__header-main {
  flex-grow: 1;
}

.#{$card}__header-toggle {
  align-self: flex-start;
  margin-block-start: var(--#{$card}__header-toggle--MarginBlockStart);
  margin-block-end: var(--#{$card}__header-toggle--MarginBlockEnd);
  margin-inline-start: var(--#{$card}__header-toggle--MarginInlineStart);
  margin-inline-end: var(--#{$card}__header-toggle--MarginInlineEnd);
}

.#{$card}__header-toggle-icon {
  @include pf-v6-mirror-inline-on-rtl;

  display: inline-block;
  transition: transform var(--#{$card}__header-toggle-icon--TransitionDuration) var(--#{$card}__header-toggle-icon--TransitionTimingFunction);
}

.#{$card}__title-text {
  font-family: var(--#{$card}__title-text--FontFamily);
  font-size: var(--#{$card}__title-text--FontSize);
  font-weight: var(--#{$card}__title-text--FontWeight);
  line-height: var(--#{$card}__title-text--LineHeight);
  color: var(--#{$card}__title-text--Color);
}

.#{$card}__actions {
  display: flex;
  gap: var(--#{$card}__actions--Gap);
  align-items: center;
  align-self: flex-start;
  order: 1;
  padding-inline-start: var(--#{$card}__actions--PaddingInlineStart);
  margin-block-start: var(--#{$card}__actions--MarginBlockStart);
  margin-block-end: var(--#{$card}__actions--MarginBlockEnd);
  margin-inline-start: auto;

  + .#{$card}__title,
  + .#{$card}__body,
  + .#{$card}__footer {
    padding: 0;
  }

  &.pf-m-no-offset {
    --#{$card}__actions--MarginBlockStart: 0;
    --#{$card}__actions--MarginBlockEnd: 0;
  }
}

// Labels are used to handle states of selectable and clickable cards
.#{$card}__selectable-actions :is(.#{$check}__label, .#{$radio}__label, .#{$card}__clickable-action) {
  position: absolute;
  inset: 0;
  justify-self: auto;
  cursor: pointer;

  &::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: '';
    background-color: var(--#{$card}--BackgroundColor, transparent);
    border: var(--#{$card}--m-selectable--BorderWidth) solid var(--#{$card}--BorderColor, transparent);
    border-radius: var(--#{$card}--BorderRadius);
  }

  &:hover {
    --#{$card}--BorderColor: var(--#{$card}--m-selectable--hover--BorderColor);
  }
}

// Selected card (checked)
.#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input):where(:checked) ~ :is(.#{$radio}__label, .#{$check}__label),
.#{$card}.pf-m-selected {
  --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-selected--BorderColor);
  --#{$card}--m-selectable--BorderWidth: var(--#{$card}--m-selectable--m-selected--BorderWidth); // this line used to be just BorderWidth, not m-selectable
}

// Focus on the card (focus on label but not checked)
.#{$card}__selectable-actions .#{$card}__clickable-action:where(:focus-visible),
.#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input, .#{$card}__clickable-action):where(:focus-visible) ~ :is(.#{$check}__label, .#{$radio}__label) {
  --#{$card}--BorderColor: var(--#{$card}--m-selectable--focus--BorderColor);
  --#{$card}--BorderWidth: var(--#{$card}--m-selectable--focus--BorderWidth);
}

// Focus on a selected card (focus + checked)
.#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input):where(:focus-visible):where(:checked) ~ :is(.#{$check}__label, .#{$radio}__label) {
  --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-selected--focus--BorderColor);
  --#{$card}--BorderWidth: var(--#{$card}--m-selectable--m-selected--focus--BorderWidth);
}

// Disabled card
.#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input):where(:disabled) ~ :is(.#{$check}__label, .#{$radio}__label),
.#{$card}.pf-m-disabled {
  --#{$card}__title-text--Color: var(--#{$card}--m-selectable--m-disabled__title-text--Color);
  --#{$card}__body--Color: var(--#{$card}--m-selectable--m-disabled__body--Color);
  --#{$card}__footer--Color: var(--#{$card}--m-selectable--m-disabled__footer--Color);
  --#{$card}--BackgroundColor: var(--#{$card}--m-selectable--m-disabled--BackgroundColor);
  --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-disabled--BorderColor);
}

.#{$card}__clickable-action {
  background: none;
  border: 0;
  outline: 0;

  &:disabled,
  &.pf-m-disabled {
    pointer-events: none;
  }
}

.#{$card}__header,
.#{$card}__title,
.#{$card}__body,
.#{$card}__footer {
  padding-block-end: var(--#{$card}--child--PaddingBlockEnd);
  padding-inline-start: var(--#{$card}--child--PaddingInlineStart);
  padding-inline-end: var(--#{$card}--child--PaddingInlineEnd);

  &:first-child {
    padding-block-start: var(--#{$card}--first-child--PaddingBlockStart);
  }
}

.#{$card}__header,
.#{$card}__title {
  &:not(:last-child) {
    padding-block-end: var(--#{$card}__title--not--last-child--PaddingBlockEnd);
  }

  // Normal disabled button color won't show on the disabled card
  .#{$button}.pf-m-inline:disabled {
    --#{$button}--disabled--Color: var(--#{$card}--c-button--disabled--Color);
  }
}

.#{$card}__expandable-content {
  --#{$card}--first-child--PaddingBlockStart: 0;
}

.#{$card}__body:not(.pf-m-no-fill) {
  flex: 1 1 auto;
}

.#{$card}__body {
  font-size: var(--#{$card}__body--FontSize);
  color: var(--#{$card}__body--Color);
}

.#{$card}__footer {
  font-size: var(--#{$card}__footer--FontSize);
  color: var(--#{$card}__footer--Color);
}