1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
@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);
}
|
