package.components.BackgroundImage.background-image.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($background-image) {
  --#{$background-image}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
  --#{$background-image}--BackgroundImage: none;
  --#{$background-image}--BackgroundSize--min-width: 200px;
  --#{$background-image}--BackgroundSize--width: 60%;
  --#{$background-image}--BackgroundSize--max-width: 600px;
  --#{$background-image}--BackgroundSize: clamp(var(--#{$background-image}--BackgroundSize--min-width), var(--#{$background-image}--BackgroundSize--width), var(--#{$background-image}--BackgroundSize--max-width));

}

.#{$background-image} {
  @include pf-v6-bidirectional-style(
    $prop: --#{$background-image}--BackgroundPosition,
    $ltr-val: bottom right,
    $rtl-val: bottom left
  );

  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: var(--#{$background-image}--BackgroundColor);
  background-image: var(--#{$background-image}--BackgroundImage);
  background-repeat: no-repeat;
  background-position: var(--#{$background-image}--BackgroundPosition);
  background-size: var(--#{$background-image}--BackgroundSize);
}