@patternfly/patternfly 6.0.0-alpha.19 → 6.0.0-alpha.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/images/PF-Backdrop.svg +1 -0
- package/assets/images/PF-IconLogo-Reverse.svg +14 -0
- package/assets/images/PF-IconLogo.svg +17 -0
- package/components/AboutModalBox/about-modal-box.css +59 -98
- package/components/AboutModalBox/about-modal-box.scss +39 -66
- package/components/ModalBox/modal-box.css +59 -52
- package/components/ModalBox/modal-box.scss +57 -53
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
- package/docs/demos/AboutModal/examples/AboutModal.md +2 -2
- package/package.json +1 -1
- package/patternfly-no-globals.css +163 -184
- package/patternfly-theme-dark-unversioned.css +163 -184
- package/patternfly.css +163 -184
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
- package/components/ModalBox/themes/dark/modal-box.scss +0 -7
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540.01 1080.07"><defs><style>.cls-1{fill:#a3a3a3;opacity:.15;}</style></defs><g id="Layer_1-2"><g><polygon class="cls-1" points="416.8 369.95 0 1079.99 539.85 1080.07 539.94 430.1 539.98 160.12 416.8 369.95"/><path class="cls-1" d="M42.06,0c91.81,151.28,221,277.36,374.75,365.44,39.5,22.63,80.62,42.76,123.14,60.15l.04-269.99,.02-155.53L42.06,0Z"/></g></g></svg>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g id="PF-IconLogo-Reverse">
|
|
3
|
+
<g id="Group">
|
|
4
|
+
<path id="Rectangle-Copy-15" opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M15.6369 0H39.9611V24.3241C26.5272 24.3241 15.6369 13.4338 15.6369 0Z" fill="white"/>
|
|
5
|
+
<path id="Combined-Shape-Copy-4" fill-rule="evenodd" clip-rule="evenodd" d="M40 0.46779V34.9367C40 37.7331 37.7331 40 34.9367 40H16.8014L40 0.46779ZM39.5322 0L0 23.1986V5.06329C0 2.26691 2.26691 0 5.06329 0L39.5322 0Z" fill="url(#paint0_linear_6460_7778)"/>
|
|
6
|
+
</g>
|
|
7
|
+
</g>
|
|
8
|
+
<defs>
|
|
9
|
+
<linearGradient id="paint0_linear_6460_7778" x1="4000" y1="-4.42245e-05" x2="1616.09" y2="2377.89" gradientUnits="userSpaceOnUse">
|
|
10
|
+
<stop stop-color="white"/>
|
|
11
|
+
<stop offset="1" stop-color="white" stop-opacity="0.498498"/>
|
|
12
|
+
</linearGradient>
|
|
13
|
+
</defs>
|
|
14
|
+
</svg>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g id="Logo">
|
|
3
|
+
<path id="Rectangle-Copy-17" fill-rule="evenodd" clip-rule="evenodd" d="M15.6522 0H40V24.3478H37.3913C25.3851 24.3478 15.6522 14.6149 15.6522 2.6087V0Z" fill="#0066CC"/>
|
|
4
|
+
<path id="Path-2" fill-rule="evenodd" clip-rule="evenodd" d="M40 0.869568L16.5217 40H34.9367C37.7331 40 40 37.7331 40 34.9367V0.869568Z" fill="url(#paint0_linear_6460_7774)"/>
|
|
5
|
+
<path id="Path-2_2" fill-rule="evenodd" clip-rule="evenodd" d="M39.1304 9.53674e-06L-3.8147e-06 23.4783V5.0633C-3.8147e-06 2.26692 2.26691 9.53674e-06 5.06329 9.53674e-06L39.1304 9.53674e-06Z" fill="url(#paint1_linear_6460_7774)"/>
|
|
6
|
+
</g>
|
|
7
|
+
<defs>
|
|
8
|
+
<linearGradient id="paint0_linear_6460_7774" x1="1613.04" y1="0.869504" x2="-337.034" y2="3251" gradientUnits="userSpaceOnUse">
|
|
9
|
+
<stop stop-color="#2B9AF3"/>
|
|
10
|
+
<stop offset="1" stop-color="#73BCF7" stop-opacity="0.502213"/>
|
|
11
|
+
</linearGradient>
|
|
12
|
+
<linearGradient id="paint1_linear_6460_7774" x1="39.1305" y1="-1573.04" x2="-3211" y2="377.033" gradientUnits="userSpaceOnUse">
|
|
13
|
+
<stop stop-color="#2B9AF3"/>
|
|
14
|
+
<stop offset="1" stop-color="#73BCF7" stop-opacity="0.502213"/>
|
|
15
|
+
</linearGradient>
|
|
16
|
+
</defs>
|
|
17
|
+
</svg>
|
|
@@ -1,124 +1,104 @@
|
|
|
1
|
-
|
|
2
|
-
--pf-v5-global--Color--100: var(--pf-v5-global--Color--light-100);
|
|
3
|
-
--pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200);
|
|
4
|
-
--pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--light-100);
|
|
5
|
-
--pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--light-100);
|
|
6
|
-
--pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
|
|
7
|
-
--pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
|
|
8
|
-
--pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
|
|
9
|
-
--pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
|
|
10
|
-
--pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
|
|
11
|
-
}
|
|
12
|
-
.pf-v5-c-about-modal-box .pf-v5-c-button {
|
|
13
|
-
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.pf-v5-c-about-modal-box {
|
|
1
|
+
:root {
|
|
17
2
|
--pf-v5-c-about-modal-box--BackgroundImage: none;
|
|
18
|
-
--pf-v5-c-about-modal-box--BackgroundColor: var(--pf-
|
|
3
|
+
--pf-v5-c-about-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
19
4
|
--pf-v5-c-about-modal-box--BackgroundPosition: bottom right;
|
|
20
|
-
--pf-v5-c-about-modal-box--BackgroundSize--
|
|
21
|
-
--pf-v5-c-about-modal-box--BackgroundSize
|
|
22
|
-
--pf-v5-c-about-modal-box--BackgroundSize--max-width: 600px;
|
|
23
|
-
--pf-v5-c-about-modal-box--BackgroundSize: clamp(var(--pf-v5-c-about-modal-box--BackgroundSize--min-width), var(--pf-v5-c-about-modal-box--BackgroundSize--width), var(--pf-v5-c-about-modal-box--BackgroundSize--max-width));
|
|
5
|
+
--pf-v5-c-about-modal-box--BackgroundSize--width: 100%;
|
|
6
|
+
--pf-v5-c-about-modal-box--BackgroundSize: contain;
|
|
24
7
|
--pf-v5-c-about-modal-box--Height: 100%;
|
|
25
8
|
--pf-v5-c-about-modal-box--lg--Height: 47.625rem;
|
|
26
9
|
--pf-v5-c-about-modal-box--Width: 100%;
|
|
27
10
|
--pf-v5-c-about-modal-box--sm--GridTemplateColumns: 5fr 1fr;
|
|
28
11
|
--pf-v5-c-about-modal-box--lg--GridTemplateColumns: 1fr .6fr;
|
|
29
12
|
--pf-v5-c-about-modal-box--BackgroundPosition: bottom right;
|
|
30
|
-
--pf-v5-c-about-modal-box__brand--PaddingTop: var(--pf-
|
|
31
|
-
--pf-v5-c-about-modal-box__brand--PaddingRight: var(--pf-
|
|
32
|
-
--pf-v5-c-about-modal-box__brand--PaddingLeft: var(--pf-
|
|
33
|
-
--pf-v5-c-about-modal-box__brand--PaddingBottom: var(--pf-
|
|
34
|
-
--pf-v5-c-about-modal-box__brand--sm--PaddingRight: var(--pf-
|
|
35
|
-
--pf-v5-c-about-modal-box__brand--sm--PaddingLeft: var(--pf-
|
|
36
|
-
--pf-v5-c-about-modal-box__brand--sm--PaddingBottom: var(--pf-
|
|
13
|
+
--pf-v5-c-about-modal-box__brand--PaddingTop: var(--pf-t--global--spacer--2xl);
|
|
14
|
+
--pf-v5-c-about-modal-box__brand--PaddingRight: var(--pf-t--global--spacer--xl);
|
|
15
|
+
--pf-v5-c-about-modal-box__brand--PaddingLeft: var(--pf-t--global--spacer--xl);
|
|
16
|
+
--pf-v5-c-about-modal-box__brand--PaddingBottom: var(--pf-t--global--spacer--xl);
|
|
17
|
+
--pf-v5-c-about-modal-box__brand--sm--PaddingRight: var(--pf-t--global--spacer--3xl);
|
|
18
|
+
--pf-v5-c-about-modal-box__brand--sm--PaddingLeft: var(--pf-t--global--spacer--3xl);
|
|
19
|
+
--pf-v5-c-about-modal-box__brand--sm--PaddingBottom: var(--pf-t--global--spacer--3xl);
|
|
37
20
|
--pf-v5-c-about-modal-box__close--ZIndex: var(--pf-v5-global--ZIndex--2xl);
|
|
38
|
-
--pf-v5-c-about-modal-box__close--PaddingTop: var(--pf-
|
|
39
|
-
--pf-v5-c-about-modal-box__close--PaddingRight: var(--pf-
|
|
40
|
-
--pf-v5-c-about-modal-box__close--PaddingBottom: var(--pf-
|
|
41
|
-
--pf-v5-c-about-modal-box__close--sm--PaddingBottom: var(--pf-
|
|
42
|
-
--pf-v5-c-about-modal-box__close--lg--PaddingRight: var(--pf-
|
|
43
|
-
--pf-v5-c-about-modal-box__close--c-button--
|
|
44
|
-
--pf-v5-c-about-modal-box__close--c-button--FontSize: var(--pf-v5-global--FontSize--xl);
|
|
45
|
-
--pf-v5-c-about-modal-box__close--c-button--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
|
|
46
|
-
--pf-v5-c-about-modal-box__close--c-button--Width: calc(var(--pf-v5-c-about-modal-box__close--c-button--FontSize) * 2);
|
|
47
|
-
--pf-v5-c-about-modal-box__close--c-button--Height: calc(var(--pf-v5-c-about-modal-box__close--c-button--FontSize) * 2);
|
|
48
|
-
--pf-v5-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-v5-global--palette--black-1000);
|
|
49
|
-
--pf-v5-c-about-modal-box__close--c-button--hover--BackgroundColor: rgba(3, 3, 3, 0.4);
|
|
21
|
+
--pf-v5-c-about-modal-box__close--PaddingTop: var(--pf-t--global--spacer--2xl);
|
|
22
|
+
--pf-v5-c-about-modal-box__close--PaddingRight: var(--pf-t--global--spacer--xl);
|
|
23
|
+
--pf-v5-c-about-modal-box__close--PaddingBottom: var(--pf-t--global--spacer--xl);
|
|
24
|
+
--pf-v5-c-about-modal-box__close--sm--PaddingBottom: var(--pf-t--global--spacer--3xl);
|
|
25
|
+
--pf-v5-c-about-modal-box__close--lg--PaddingRight: var(--pf-t--global--spacer--3xl);
|
|
26
|
+
--pf-v5-c-about-modal-box__close--c-button--FontSize: var(--pf-t--global--icon--size--lg);
|
|
50
27
|
--pf-v5-c-about-modal-box__brand-image--Height: 2.5rem;
|
|
51
|
-
--pf-v5-c-about-modal-box__header--PaddingRight: var(--pf-
|
|
52
|
-
--pf-v5-c-about-modal-box__header--PaddingBottom: var(--pf-
|
|
53
|
-
--pf-v5-c-about-modal-box__header--PaddingLeft: var(--pf-
|
|
54
|
-
--pf-v5-c-about-modal-box__header--sm--PaddingRight: var(--pf-
|
|
55
|
-
--pf-v5-c-about-modal-box__header--sm--PaddingLeft: var(--pf-
|
|
56
|
-
--pf-v5-c-about-modal-box__strapline--PaddingTop: var(--pf-
|
|
57
|
-
--pf-v5-c-about-modal-box__strapline--FontSize: var(--pf-
|
|
58
|
-
--pf-v5-c-about-modal-box__strapline--
|
|
59
|
-
--pf-v5-c-about-modal-
|
|
60
|
-
--pf-v5-c-about-modal-box__content--
|
|
61
|
-
--pf-v5-c-about-modal-box__content--
|
|
62
|
-
--pf-v5-c-about-modal-box__content--
|
|
63
|
-
--pf-v5-c-about-modal-box__content--
|
|
64
|
-
--pf-v5-c-about-modal-box__content--sm--
|
|
65
|
-
--pf-v5-c-about-modal-box__content--sm--
|
|
66
|
-
--pf-v5-c-about-modal-box__content--sm--
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
grid-template-areas: "brand close" "header header" "content content";
|
|
71
|
-
grid-template-rows: max-content max-content auto;
|
|
72
|
-
width: var(--pf-v5-c-about-modal-box--Width);
|
|
73
|
-
height: var(--pf-v5-c-about-modal-box--Height);
|
|
74
|
-
overflow-x: hidden;
|
|
75
|
-
overflow-y: auto;
|
|
76
|
-
background-color: var(--pf-v5-c-about-modal-box--BackgroundColor);
|
|
77
|
-
background-image: var(--pf-v5-c-about-modal-box--BackgroundImage);
|
|
78
|
-
background-repeat: no-repeat;
|
|
79
|
-
background-position: var(--pf-v5-c-about-modal-box--BackgroundPosition);
|
|
80
|
-
background-size: var(--pf-v5-c-about-modal-box--BackgroundSize);
|
|
81
|
-
}
|
|
82
|
-
:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-about-modal-box {
|
|
28
|
+
--pf-v5-c-about-modal-box__header--PaddingRight: var(--pf-t--global--spacer--xl);
|
|
29
|
+
--pf-v5-c-about-modal-box__header--PaddingBottom: var(--pf-t--global--spacer--sm);
|
|
30
|
+
--pf-v5-c-about-modal-box__header--PaddingLeft: var(--pf-t--global--spacer--xl);
|
|
31
|
+
--pf-v5-c-about-modal-box__header--sm--PaddingRight: var(--pf-t--global--spacer--3xl);
|
|
32
|
+
--pf-v5-c-about-modal-box__header--sm--PaddingLeft: var(--pf-t--global--spacer--3xl);
|
|
33
|
+
--pf-v5-c-about-modal-box__strapline--PaddingTop: var(--pf-t--global--spacer--xl);
|
|
34
|
+
--pf-v5-c-about-modal-box__strapline--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
35
|
+
--pf-v5-c-about-modal-box__strapline--Color: var(--pf-t--global--text--color--subtle);
|
|
36
|
+
--pf-v5-c-about-modal-box__strapline--sm--PaddingTop: var(--pf-t--global--spacer--2xl);
|
|
37
|
+
--pf-v5-c-about-modal-box__content--MarginTop: var(--pf-t--global--spacer--xl);
|
|
38
|
+
--pf-v5-c-about-modal-box__content--MarginRight: var(--pf-t--global--spacer--xl);
|
|
39
|
+
--pf-v5-c-about-modal-box__content--MarginBottom: var(--pf-t--global--spacer--xl);
|
|
40
|
+
--pf-v5-c-about-modal-box__content--MarginLeft: var(--pf-t--global--spacer--xl);
|
|
41
|
+
--pf-v5-c-about-modal-box__content--sm--MarginTop: var(--pf-t--global--spacer--2xl);
|
|
42
|
+
--pf-v5-c-about-modal-box__content--sm--MarginRight: var(--pf-t--global--spacer--3xl);
|
|
43
|
+
--pf-v5-c-about-modal-box__content--sm--MarginBottom: var(--pf-t--global--spacer--2xl);
|
|
44
|
+
--pf-v5-c-about-modal-box__content--sm--MarginLeft: var(--pf-t--global--spacer--3xl);
|
|
45
|
+
}
|
|
46
|
+
:where(.pf-v5-m-dir-rtl, [dir=rtl]) :root {
|
|
83
47
|
--pf-v5-c-about-modal-box--BackgroundPosition: bottom left;
|
|
84
48
|
}
|
|
85
49
|
|
|
86
50
|
@media screen and (min-width: 576px) {
|
|
87
|
-
|
|
51
|
+
:root {
|
|
88
52
|
--pf-v5-c-about-modal-box__brand--PaddingRight: var(--pf-v5-c-about-modal-box__brand--sm--PaddingRight);
|
|
89
53
|
--pf-v5-c-about-modal-box__brand--PaddingLeft: var(--pf-v5-c-about-modal-box__brand--sm--PaddingLeft);
|
|
90
54
|
--pf-v5-c-about-modal-box__brand--PaddingBottom: var(--pf-v5-c-about-modal-box__brand--sm--PaddingBottom);
|
|
91
55
|
}
|
|
92
56
|
}
|
|
93
57
|
@media only screen and (min-width: 576px) {
|
|
94
|
-
|
|
58
|
+
:root {
|
|
95
59
|
--pf-v5-c-about-modal-box__close--PaddingBottom: var(--pf-v5-c-about-modal-box__close--sm--PaddingBottom);
|
|
96
60
|
}
|
|
97
61
|
}
|
|
98
62
|
@media only screen and (min-width: 992px) {
|
|
99
|
-
|
|
63
|
+
:root {
|
|
100
64
|
--pf-v5-c-about-modal-box__close--PaddingRight: var(--pf-v5-c-about-modal-box__close--lg--PaddingRight);
|
|
101
65
|
}
|
|
102
66
|
}
|
|
103
67
|
@media only screen and (min-width: 576px) {
|
|
104
|
-
|
|
68
|
+
:root {
|
|
105
69
|
--pf-v5-c-about-modal-box__header--PaddingRight: var(--pf-v5-c-about-modal-box__header--sm--PaddingRight);
|
|
106
70
|
--pf-v5-c-about-modal-box__header--PaddingLeft: var(--pf-v5-c-about-modal-box__header--sm--PaddingLeft);
|
|
107
71
|
}
|
|
108
72
|
}
|
|
109
73
|
@media only screen and (min-width: 576px) {
|
|
110
|
-
|
|
74
|
+
:root {
|
|
111
75
|
--pf-v5-c-about-modal-box__strapline--PaddingTop: var(--pf-v5-c-about-modal-box__strapline--sm--PaddingTop);
|
|
112
76
|
}
|
|
113
77
|
}
|
|
114
78
|
@media only screen and (min-width: 576px) {
|
|
115
|
-
|
|
79
|
+
:root {
|
|
116
80
|
--pf-v5-c-about-modal-box__content--MarginTop: var(--pf-v5-c-about-modal-box__content--sm--MarginTop);
|
|
117
81
|
--pf-v5-c-about-modal-box__content--MarginRight: var(--pf-v5-c-about-modal-box__content--sm--MarginRight);
|
|
118
82
|
--pf-v5-c-about-modal-box__content--MarginBottom: var(--pf-v5-c-about-modal-box__content--sm--MarginBottom);
|
|
119
83
|
--pf-v5-c-about-modal-box__content--MarginLeft: var(--pf-v5-c-about-modal-box__content--sm--MarginLeft);
|
|
120
84
|
}
|
|
121
85
|
}
|
|
86
|
+
|
|
87
|
+
.pf-v5-c-about-modal-box {
|
|
88
|
+
position: relative;
|
|
89
|
+
display: grid;
|
|
90
|
+
grid-template-areas: "brand close" "header header" "content content";
|
|
91
|
+
grid-template-rows: max-content max-content auto;
|
|
92
|
+
width: var(--pf-v5-c-about-modal-box--Width);
|
|
93
|
+
height: var(--pf-v5-c-about-modal-box--Height);
|
|
94
|
+
overflow-x: hidden;
|
|
95
|
+
overflow-y: auto;
|
|
96
|
+
background-color: var(--pf-v5-c-about-modal-box--BackgroundColor);
|
|
97
|
+
background-image: var(--pf-v5-c-about-modal-box--BackgroundImage);
|
|
98
|
+
background-repeat: no-repeat;
|
|
99
|
+
background-position: var(--pf-v5-c-about-modal-box--BackgroundPosition);
|
|
100
|
+
background-size: var(--pf-v5-c-about-modal-box--BackgroundSize);
|
|
101
|
+
}
|
|
122
102
|
@media only screen and (min-width: 576px) {
|
|
123
103
|
.pf-v5-c-about-modal-box {
|
|
124
104
|
grid-template-areas: "brand close" "header close" "content close";
|
|
@@ -160,6 +140,7 @@
|
|
|
160
140
|
padding-block-start: var(--pf-v5-c-about-modal-box__strapline--PaddingTop);
|
|
161
141
|
margin-block-start: auto;
|
|
162
142
|
font-size: var(--pf-v5-c-about-modal-box__strapline--FontSize);
|
|
143
|
+
color: var(--pf-v5-c-about-modal-box__strapline--Color);
|
|
163
144
|
}
|
|
164
145
|
|
|
165
146
|
.pf-v5-c-about-modal-box__content {
|
|
@@ -206,25 +187,5 @@
|
|
|
206
187
|
}
|
|
207
188
|
}
|
|
208
189
|
.pf-v5-c-about-modal-box__close .pf-v5-c-button.pf-m-plain {
|
|
209
|
-
display: flex;
|
|
210
|
-
align-items: center;
|
|
211
|
-
justify-content: center;
|
|
212
|
-
width: var(--pf-v5-c-about-modal-box__close--c-button--Width);
|
|
213
|
-
height: var(--pf-v5-c-about-modal-box__close--c-button--Height);
|
|
214
|
-
padding: 0;
|
|
215
190
|
font-size: var(--pf-v5-c-about-modal-box__close--c-button--FontSize);
|
|
216
|
-
color: var(--pf-v5-c-about-modal-box__close--c-button--Color);
|
|
217
|
-
background-color: var(--pf-v5-c-about-modal-box__close--c-button--BackgroundColor);
|
|
218
|
-
border-radius: var(--pf-v5-c-about-modal-box__close--c-button--BorderRadius);
|
|
219
|
-
}
|
|
220
|
-
.pf-v5-c-about-modal-box__close .pf-v5-c-button.pf-m-plain:hover {
|
|
221
|
-
--pf-v5-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-v5-c-about-modal-box__close--c-button--hover--BackgroundColor);
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button {
|
|
225
|
-
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box {
|
|
229
|
-
color: var(--pf-v5-global--Color--100);
|
|
230
191
|
}
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
// @debug $about-modal-box; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
:root {
|
|
4
4
|
// Component variables
|
|
5
5
|
--#{$about-modal-box}--BackgroundImage: none;
|
|
6
|
-
--#{$about-modal-box}--BackgroundColor: var(
|
|
6
|
+
--#{$about-modal-box}--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
7
7
|
--#{$about-modal-box}--BackgroundPosition: bottom right;
|
|
8
|
-
--#{$about-modal-box}--BackgroundSize--
|
|
9
|
-
--#{$about-modal-box}--BackgroundSize
|
|
10
|
-
--#{$about-modal-box}--BackgroundSize--max-width: 600px;
|
|
11
|
-
--#{$about-modal-box}--BackgroundSize: clamp(var(--#{$about-modal-box}--BackgroundSize--min-width), var(--#{$about-modal-box}--BackgroundSize--width), var(--#{$about-modal-box}--BackgroundSize--max-width));
|
|
8
|
+
--#{$about-modal-box}--BackgroundSize--width: 100%;
|
|
9
|
+
--#{$about-modal-box}--BackgroundSize: contain;
|
|
12
10
|
--#{$about-modal-box}--Height: 100%;
|
|
13
11
|
--#{$about-modal-box}--lg--Height: #{pf-size-prem(762px)}; // Height is optimized for the exact height desired
|
|
14
12
|
--#{$about-modal-box}--Width: 100%;
|
|
@@ -23,13 +21,13 @@
|
|
|
23
21
|
|
|
24
22
|
|
|
25
23
|
// Brand
|
|
26
|
-
--#{$about-modal-box}__brand--PaddingTop: var(
|
|
27
|
-
--#{$about-modal-box}__brand--PaddingRight: var(
|
|
28
|
-
--#{$about-modal-box}__brand--PaddingLeft: var(
|
|
29
|
-
--#{$about-modal-box}__brand--PaddingBottom: var(
|
|
30
|
-
--#{$about-modal-box}__brand--sm--PaddingRight: var(
|
|
31
|
-
--#{$about-modal-box}__brand--sm--PaddingLeft: var(
|
|
32
|
-
--#{$about-modal-box}__brand--sm--PaddingBottom: var(
|
|
24
|
+
--#{$about-modal-box}__brand--PaddingTop: var(--pf-t--global--spacer--2xl);
|
|
25
|
+
--#{$about-modal-box}__brand--PaddingRight: var(--pf-t--global--spacer--xl);
|
|
26
|
+
--#{$about-modal-box}__brand--PaddingLeft: var(--pf-t--global--spacer--xl);
|
|
27
|
+
--#{$about-modal-box}__brand--PaddingBottom: var(--pf-t--global--spacer--xl);
|
|
28
|
+
--#{$about-modal-box}__brand--sm--PaddingRight: var(--pf-t--global--spacer--3xl);
|
|
29
|
+
--#{$about-modal-box}__brand--sm--PaddingLeft: var(--pf-t--global--spacer--3xl);
|
|
30
|
+
--#{$about-modal-box}__brand--sm--PaddingBottom: var(--pf-t--global--spacer--3xl);
|
|
33
31
|
|
|
34
32
|
@media screen and (min-width: $pf-v5-global--breakpoint--sm) {
|
|
35
33
|
--#{$about-modal-box}__brand--PaddingRight: var(--#{$about-modal-box}__brand--sm--PaddingRight);
|
|
@@ -38,12 +36,12 @@
|
|
|
38
36
|
}
|
|
39
37
|
|
|
40
38
|
// Close
|
|
41
|
-
--#{$about-modal-box}__close--ZIndex: var(--#{$pf-global}--ZIndex--2xl);
|
|
42
|
-
--#{$about-modal-box}__close--PaddingTop: var(
|
|
43
|
-
--#{$about-modal-box}__close--PaddingRight: var(
|
|
44
|
-
--#{$about-modal-box}__close--PaddingBottom: var(
|
|
45
|
-
--#{$about-modal-box}__close--sm--PaddingBottom: var(
|
|
46
|
-
--#{$about-modal-box}__close--lg--PaddingRight: var(
|
|
39
|
+
--#{$about-modal-box}__close--ZIndex: var(--#{$pf-global}--ZIndex--2xl); // TODO zindex token
|
|
40
|
+
--#{$about-modal-box}__close--PaddingTop: var(--pf-t--global--spacer--2xl);
|
|
41
|
+
--#{$about-modal-box}__close--PaddingRight: var(--pf-t--global--spacer--xl);
|
|
42
|
+
--#{$about-modal-box}__close--PaddingBottom: var(--pf-t--global--spacer--xl);
|
|
43
|
+
--#{$about-modal-box}__close--sm--PaddingBottom: var(--pf-t--global--spacer--3xl);
|
|
44
|
+
--#{$about-modal-box}__close--lg--PaddingRight: var(--pf-t--global--spacer--3xl);
|
|
47
45
|
|
|
48
46
|
@media only screen and (min-width: $pf-v5-global--breakpoint--sm) {
|
|
49
47
|
--#{$about-modal-box}__close--PaddingBottom: var(--#{$about-modal-box}__close--sm--PaddingBottom);
|
|
@@ -54,23 +52,17 @@
|
|
|
54
52
|
}
|
|
55
53
|
|
|
56
54
|
// Close Button
|
|
57
|
-
--#{$about-modal-box}__close--c-button--
|
|
58
|
-
--#{$about-modal-box}__close--c-button--FontSize: var(--#{$pf-global}--FontSize--xl);
|
|
59
|
-
--#{$about-modal-box}__close--c-button--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
|
|
60
|
-
--#{$about-modal-box}__close--c-button--Width: calc(var(--#{$about-modal-box}__close--c-button--FontSize) * 2); // Height and width are 2x font-size
|
|
61
|
-
--#{$about-modal-box}__close--c-button--Height: calc(var(--#{$about-modal-box}__close--c-button--FontSize) * 2);
|
|
62
|
-
--#{$about-modal-box}__close--c-button--BackgroundColor: var(--#{$pf-global}--palette--black-1000); // Close button uses a non-standard background color
|
|
63
|
-
--#{$about-modal-box}__close--c-button--hover--BackgroundColor: #{rgba($pf-v5-color-black-1000, .4)};
|
|
55
|
+
--#{$about-modal-box}__close--c-button--FontSize: var(--pf-t--global--icon--size--lg);
|
|
64
56
|
|
|
65
57
|
// Brand img
|
|
66
58
|
--#{$about-modal-box}__brand-image--Height: #{pf-size-prem(40px)};
|
|
67
59
|
|
|
68
60
|
// Header
|
|
69
|
-
--#{$about-modal-box}__header--PaddingRight: var(
|
|
70
|
-
--#{$about-modal-box}__header--PaddingBottom: var(
|
|
71
|
-
--#{$about-modal-box}__header--PaddingLeft: var(
|
|
72
|
-
--#{$about-modal-box}__header--sm--PaddingRight: var(
|
|
73
|
-
--#{$about-modal-box}__header--sm--PaddingLeft: var(
|
|
61
|
+
--#{$about-modal-box}__header--PaddingRight: var(--pf-t--global--spacer--xl);
|
|
62
|
+
--#{$about-modal-box}__header--PaddingBottom: var(--pf-t--global--spacer--sm);
|
|
63
|
+
--#{$about-modal-box}__header--PaddingLeft: var(--pf-t--global--spacer--xl);
|
|
64
|
+
--#{$about-modal-box}__header--sm--PaddingRight: var(--pf-t--global--spacer--3xl);
|
|
65
|
+
--#{$about-modal-box}__header--sm--PaddingLeft: var(--pf-t--global--spacer--3xl);
|
|
74
66
|
|
|
75
67
|
@media only screen and (min-width: $pf-v5-global--breakpoint--sm) {
|
|
76
68
|
--#{$about-modal-box}__header--PaddingRight: var(--#{$about-modal-box}__header--sm--PaddingRight);
|
|
@@ -78,23 +70,24 @@
|
|
|
78
70
|
}
|
|
79
71
|
|
|
80
72
|
// Strapline
|
|
81
|
-
--#{$about-modal-box}__strapline--PaddingTop: var(
|
|
82
|
-
--#{$about-modal-box}__strapline--FontSize: var(
|
|
83
|
-
--#{$about-modal-box}__strapline--
|
|
73
|
+
--#{$about-modal-box}__strapline--PaddingTop: var(--pf-t--global--spacer--xl);
|
|
74
|
+
--#{$about-modal-box}__strapline--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
75
|
+
--#{$about-modal-box}__strapline--Color: var(--pf-t--global--text--color--subtle);
|
|
76
|
+
--#{$about-modal-box}__strapline--sm--PaddingTop: var(--pf-t--global--spacer--2xl);
|
|
84
77
|
|
|
85
78
|
@media only screen and (min-width: $pf-v5-global--breakpoint--sm) {
|
|
86
79
|
--#{$about-modal-box}__strapline--PaddingTop: var(--#{$about-modal-box}__strapline--sm--PaddingTop);
|
|
87
80
|
}
|
|
88
81
|
|
|
89
82
|
// Content
|
|
90
|
-
--#{$about-modal-box}__content--MarginTop: var(
|
|
91
|
-
--#{$about-modal-box}__content--MarginRight: var(
|
|
92
|
-
--#{$about-modal-box}__content--MarginBottom: var(
|
|
93
|
-
--#{$about-modal-box}__content--MarginLeft: var(
|
|
94
|
-
--#{$about-modal-box}__content--sm--MarginTop: var(
|
|
95
|
-
--#{$about-modal-box}__content--sm--MarginRight: var(
|
|
96
|
-
--#{$about-modal-box}__content--sm--MarginBottom: var(
|
|
97
|
-
--#{$about-modal-box}__content--sm--MarginLeft: var(
|
|
83
|
+
--#{$about-modal-box}__content--MarginTop: var(--pf-t--global--spacer--xl);
|
|
84
|
+
--#{$about-modal-box}__content--MarginRight: var(--pf-t--global--spacer--xl);
|
|
85
|
+
--#{$about-modal-box}__content--MarginBottom: var(--pf-t--global--spacer--xl);
|
|
86
|
+
--#{$about-modal-box}__content--MarginLeft: var(--pf-t--global--spacer--xl);
|
|
87
|
+
--#{$about-modal-box}__content--sm--MarginTop: var(--pf-t--global--spacer--2xl);
|
|
88
|
+
--#{$about-modal-box}__content--sm--MarginRight: var(--pf-t--global--spacer--3xl);
|
|
89
|
+
--#{$about-modal-box}__content--sm--MarginBottom: var(--pf-t--global--spacer--2xl);
|
|
90
|
+
--#{$about-modal-box}__content--sm--MarginLeft: var(--pf-t--global--spacer--3xl);
|
|
98
91
|
|
|
99
92
|
@media only screen and (min-width: $pf-v5-global--breakpoint--sm) {
|
|
100
93
|
--#{$about-modal-box}__content--MarginTop: var(--#{$about-modal-box}__content--sm--MarginTop);
|
|
@@ -102,10 +95,9 @@
|
|
|
102
95
|
--#{$about-modal-box}__content--MarginBottom: var(--#{$about-modal-box}__content--sm--MarginBottom);
|
|
103
96
|
--#{$about-modal-box}__content--MarginLeft: var(--#{$about-modal-box}__content--sm--MarginLeft);
|
|
104
97
|
}
|
|
98
|
+
}
|
|
105
99
|
|
|
106
|
-
|
|
107
|
-
@include pf-v5-t-dark;
|
|
108
|
-
|
|
100
|
+
.#{$about-modal-box} {
|
|
109
101
|
position: relative;
|
|
110
102
|
display: grid;
|
|
111
103
|
grid-template-areas:
|
|
@@ -117,7 +109,7 @@
|
|
|
117
109
|
height: var(--#{$about-modal-box}--Height);
|
|
118
110
|
overflow-x: hidden;
|
|
119
111
|
overflow-y: auto;
|
|
120
|
-
background-color: var(--#{$about-modal-box}--BackgroundColor);
|
|
112
|
+
background-color: var(--#{$about-modal-box}--BackgroundColor);
|
|
121
113
|
background-image: var(--#{$about-modal-box}--BackgroundImage);
|
|
122
114
|
background-repeat: no-repeat;
|
|
123
115
|
background-position: var(--#{$about-modal-box}--BackgroundPosition);
|
|
@@ -169,6 +161,7 @@
|
|
|
169
161
|
padding-block-start: var(--#{$about-modal-box}__strapline--PaddingTop);
|
|
170
162
|
margin-block-start: auto;
|
|
171
163
|
font-size: var(--#{$about-modal-box}__strapline--FontSize);
|
|
164
|
+
color: var(--#{$about-modal-box}__strapline--Color);
|
|
172
165
|
}
|
|
173
166
|
|
|
174
167
|
// Content
|
|
@@ -216,26 +209,6 @@
|
|
|
216
209
|
// Close button
|
|
217
210
|
// Since this btn is unique to the about modal, use contextual selectors in this specific instance
|
|
218
211
|
.#{$button}.pf-m-plain {
|
|
219
|
-
display: flex;
|
|
220
|
-
align-items: center;
|
|
221
|
-
justify-content: center;
|
|
222
|
-
width: var(--#{$about-modal-box}__close--c-button--Width);
|
|
223
|
-
height: var(--#{$about-modal-box}__close--c-button--Height);
|
|
224
|
-
padding: 0;
|
|
225
212
|
font-size: var(--#{$about-modal-box}__close--c-button--FontSize);
|
|
226
|
-
color: var(--#{$about-modal-box}__close--c-button--Color);
|
|
227
|
-
background-color: var(--#{$about-modal-box}__close--c-button--BackgroundColor);
|
|
228
|
-
border-radius: var(--#{$about-modal-box}__close--c-button--BorderRadius);
|
|
229
|
-
|
|
230
|
-
&:hover {
|
|
231
|
-
--#{$about-modal-box}__close--c-button--BackgroundColor: var(--#{$about-modal-box}__close--c-button--hover--BackgroundColor);
|
|
232
|
-
}
|
|
233
213
|
}
|
|
234
214
|
}
|
|
235
|
-
|
|
236
|
-
// stylelint-disable no-invalid-position-at-import-rule
|
|
237
|
-
@import "themes/dark/about-modal-box";
|
|
238
|
-
|
|
239
|
-
@include pf-v5-theme-dark {
|
|
240
|
-
@include pf-v5-theme-dark-about-modal-box;
|
|
241
|
-
}
|
|
@@ -1,48 +1,59 @@
|
|
|
1
|
-
|
|
2
|
-
--pf-v5-c-modal-box--BackgroundColor: var(--pf-
|
|
3
|
-
--pf-v5-c-modal-box--
|
|
1
|
+
:root {
|
|
2
|
+
--pf-v5-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
3
|
+
--pf-v5-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--large);
|
|
4
|
+
--pf-v5-c-modal-box--BoxShadow: var(--pf-t--global--box-shadow--lg);
|
|
4
5
|
--pf-v5-c-modal-box--ZIndex: var(--pf-v5-global--ZIndex--xl);
|
|
5
6
|
--pf-v5-c-modal-box--Width: 100%;
|
|
6
|
-
--pf-v5-c-modal-box--MaxWidth: calc(100% - var(--pf-
|
|
7
|
+
--pf-v5-c-modal-box--MaxWidth: calc(100% - var(--pf-t--global--spacer--xl));
|
|
7
8
|
--pf-v5-c-modal-box--m-sm--sm--MaxWidth: 35rem;
|
|
8
9
|
--pf-v5-c-modal-box--m-md--Width: 52.5rem;
|
|
9
10
|
--pf-v5-c-modal-box--m-lg--lg--MaxWidth: 70rem;
|
|
10
|
-
--pf-v5-c-modal-box--MaxHeight: calc(100% - var(--pf-
|
|
11
|
-
--pf-v5-c-modal-box--m-align-top--spacer: var(--pf-
|
|
12
|
-
--pf-v5-c-modal-box--m-align-top--xl--spacer: var(--pf-
|
|
13
|
-
--pf-v5-c-modal-box--m-align-top--
|
|
14
|
-
--pf-v5-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-v5-c-modal-box--m-align-top--spacer), var(--pf-
|
|
15
|
-
--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-
|
|
16
|
-
--pf-v5-c-modal-box--m-danger__title-icon--Color: var(--pf-
|
|
17
|
-
--pf-v5-c-modal-box--m-warning__title-icon--Color: var(--pf-
|
|
18
|
-
--pf-v5-c-modal-box--m-success__title-icon--Color: var(--pf-
|
|
19
|
-
--pf-v5-c-modal-box--m-info__title-icon--Color: var(--pf-
|
|
20
|
-
--pf-v5-c-modal-box--m-custom__title-icon--Color: var(--pf-
|
|
21
|
-
--pf-v5-c-modal-box__header--PaddingTop: var(--pf-
|
|
22
|
-
--pf-v5-c-modal-box__header--PaddingRight: var(--pf-
|
|
23
|
-
--pf-v5-c-modal-box__header--PaddingLeft: var(--pf-
|
|
24
|
-
--pf-v5-c-modal-box__header--
|
|
25
|
-
--pf-v5-c-modal-
|
|
26
|
-
--pf-v5-c-modal-box__title--
|
|
27
|
-
--pf-v5-c-modal-box__title--
|
|
28
|
-
--pf-v5-c-modal-box__title
|
|
29
|
-
--pf-v5-c-modal-box__title-icon--
|
|
30
|
-
--pf-v5-c-modal-
|
|
31
|
-
--pf-v5-c-modal-
|
|
32
|
-
--pf-v5-c-modal-
|
|
33
|
-
--pf-v5-c-modal-box__body--
|
|
34
|
-
--pf-v5-c-modal-box__body--
|
|
35
|
-
--pf-v5-c-modal-box__body--
|
|
36
|
-
--pf-v5-c-modal-
|
|
37
|
-
--pf-v5-c-modal-
|
|
38
|
-
--pf-v5-c-modal-
|
|
39
|
-
--pf-v5-c-modal-box__close--
|
|
40
|
-
--pf-v5-c-modal-
|
|
41
|
-
--pf-v5-c-modal-
|
|
42
|
-
--pf-v5-c-modal-box__footer--
|
|
43
|
-
--pf-v5-c-modal-box__footer--
|
|
44
|
-
--pf-v5-c-modal-box__footer--
|
|
11
|
+
--pf-v5-c-modal-box--MaxHeight: calc(100% - var(--pf-t--global--spacer--2xl));
|
|
12
|
+
--pf-v5-c-modal-box--m-align-top--spacer: var(--pf-t--global--spacer--sm);
|
|
13
|
+
--pf-v5-c-modal-box--m-align-top--xl--spacer: var(--pf-t--global--spacer--xl);
|
|
14
|
+
--pf-v5-c-modal-box--m-align-top--Top: var(--pf-v5-c-modal-box--m-align-top--spacer);
|
|
15
|
+
--pf-v5-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-v5-c-modal-box--m-align-top--spacer), var(--pf-t--global--spacer--2xl)) - var(--pf-v5-c-modal-box--m-align-top--spacer));
|
|
16
|
+
--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-t--global--spacer--xl)));
|
|
17
|
+
--pf-v5-c-modal-box--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
18
|
+
--pf-v5-c-modal-box--m-warning__title-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
|
|
19
|
+
--pf-v5-c-modal-box--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
|
|
20
|
+
--pf-v5-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
|
|
21
|
+
--pf-v5-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
|
|
22
|
+
--pf-v5-c-modal-box__header--PaddingTop: var(--pf-t--global--spacer--lg);
|
|
23
|
+
--pf-v5-c-modal-box__header--PaddingRight: var(--pf-t--global--spacer--lg);
|
|
24
|
+
--pf-v5-c-modal-box__header--PaddingLeft: var(--pf-t--global--spacer--lg);
|
|
25
|
+
--pf-v5-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
|
|
26
|
+
--pf-v5-c-modal-box__header-main--Gap: var(--pf-t--global--spacer--md);
|
|
27
|
+
--pf-v5-c-modal-box__title--LineHeight: var(--pf-t--global--font--line-height--heading);
|
|
28
|
+
--pf-v5-c-modal-box__title--FontFamily: var(--pf-t--global--font--family--heading);
|
|
29
|
+
--pf-v5-c-modal-box__title--FontSize: var(--pf-t--global--font--size--heading--md);
|
|
30
|
+
--pf-v5-c-modal-box__title-icon--MarginRight: var(--pf-t--global--spacer--sm);
|
|
31
|
+
--pf-v5-c-modal-box__title-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
32
|
+
--pf-v5-c-modal-box__description--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
33
|
+
--pf-v5-c-modal-box__description--Color: var(--pf-t--global--text--color--subtle);
|
|
34
|
+
--pf-v5-c-modal-box__body--MinHeight: calc(var(--pf-t--global--font--size--body) * var(--pf-t--global--font--line-height--body));
|
|
35
|
+
--pf-v5-c-modal-box__body--PaddingTop: var(--pf-t--global--spacer--lg);
|
|
36
|
+
--pf-v5-c-modal-box__body--PaddingRight: var(--pf-t--global--spacer--lg);
|
|
37
|
+
--pf-v5-c-modal-box__body--PaddingLeft: var(--pf-t--global--spacer--lg);
|
|
38
|
+
--pf-v5-c-modal-box__body--last-child--PaddingBottom: var(--pf-t--global--spacer--lg);
|
|
39
|
+
--pf-v5-c-modal-box__header--body--PaddingTop: var(--pf-t--global--spacer--md);
|
|
40
|
+
--pf-v5-c-modal-box__close--Top: var(--pf-v5-c-modal-box__header--PaddingTop);
|
|
41
|
+
--pf-v5-c-modal-box__close--Right: var(--pf-v5-c-modal-box__header--PaddingRight);
|
|
42
|
+
--pf-v5-c-modal-box__close--sibling--MarginRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
|
|
43
|
+
--pf-v5-c-modal-box__footer--PaddingTop: var(--pf-t--global--spacer--lg);
|
|
44
|
+
--pf-v5-c-modal-box__footer--PaddingRight: var(--pf-t--global--spacer--lg);
|
|
45
|
+
--pf-v5-c-modal-box__footer--PaddingBottom: var(--pf-t--global--spacer--lg);
|
|
46
|
+
--pf-v5-c-modal-box__footer--PaddingLeft: var(--pf-t--global--spacer--lg);
|
|
47
|
+
--pf-v5-c-modal-box__footer--c-button--MarginRight: var(--pf-t--global--spacer--md);
|
|
45
48
|
--pf-v5-c-modal-box__footer--c-button--sm--MarginRight: calc(var(--pf-v5-c-modal-box__footer--c-button--MarginRight) / 2);
|
|
49
|
+
}
|
|
50
|
+
@media (min-width: 1200px) {
|
|
51
|
+
:root {
|
|
52
|
+
--pf-v5-c-modal-box--m-align-top--spacer: var(--pf-v5-c-modal-box--m-align-top--xl--spacer);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.pf-v5-c-modal-box {
|
|
46
57
|
position: relative;
|
|
47
58
|
z-index: var(--pf-v5-c-modal-box--ZIndex);
|
|
48
59
|
display: flex;
|
|
@@ -50,14 +61,11 @@
|
|
|
50
61
|
width: var(--pf-v5-c-modal-box--Width);
|
|
51
62
|
max-width: var(--pf-v5-c-modal-box--MaxWidth);
|
|
52
63
|
max-height: var(--pf-v5-c-modal-box--MaxHeight);
|
|
64
|
+
overflow: auto;
|
|
53
65
|
background-color: var(--pf-v5-c-modal-box--BackgroundColor);
|
|
66
|
+
border-radius: var(--pf-v5-c-modal-box--BorderRadius);
|
|
54
67
|
box-shadow: var(--pf-v5-c-modal-box--BoxShadow);
|
|
55
68
|
}
|
|
56
|
-
@media (min-width: 1200px) {
|
|
57
|
-
.pf-v5-c-modal-box {
|
|
58
|
-
--pf-v5-c-modal-box--m-align-top--spacer: var(--pf-v5-c-modal-box--m-align-top--xl--spacer);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
69
|
.pf-v5-c-modal-box.pf-m-sm {
|
|
62
70
|
--pf-v5-c-modal-box--Width: var(--pf-v5-c-modal-box--m-sm--sm--MaxWidth);
|
|
63
71
|
}
|
|
@@ -68,7 +76,7 @@
|
|
|
68
76
|
--pf-v5-c-modal-box--Width: var(--pf-v5-c-modal-box--m-lg--lg--MaxWidth);
|
|
69
77
|
}
|
|
70
78
|
.pf-v5-c-modal-box.pf-m-align-top {
|
|
71
|
-
inset-block-start: var(--pf-v5-c-modal-box--m-align-top--
|
|
79
|
+
inset-block-start: var(--pf-v5-c-modal-box--m-align-top--Top);
|
|
72
80
|
align-self: flex-start;
|
|
73
81
|
max-width: var(--pf-v5-c-modal-box--m-align-top--MaxWidth);
|
|
74
82
|
max-height: var(--pf-v5-c-modal-box--m-align-top--MaxHeight);
|
|
@@ -102,6 +110,7 @@
|
|
|
102
110
|
display: flex;
|
|
103
111
|
flex-direction: column;
|
|
104
112
|
flex-shrink: 0;
|
|
113
|
+
gap: var(--pf-v5-c-modal-box__header--Gap);
|
|
105
114
|
padding-block-start: var(--pf-v5-c-modal-box__header--PaddingTop);
|
|
106
115
|
padding-inline-start: var(--pf-v5-c-modal-box__header--PaddingLeft);
|
|
107
116
|
padding-inline-end: var(--pf-v5-c-modal-box__header--PaddingRight);
|
|
@@ -110,15 +119,15 @@
|
|
|
110
119
|
display: flex;
|
|
111
120
|
flex-direction: row;
|
|
112
121
|
}
|
|
113
|
-
.pf-v5-c-modal-box__header:last-child {
|
|
114
|
-
padding-block-end: var(--pf-v5-c-modal-box__header--last-child--PaddingBottom);
|
|
115
|
-
}
|
|
116
122
|
.pf-v5-c-modal-box__header + .pf-v5-c-modal-box__body {
|
|
117
123
|
--pf-v5-c-modal-box__body--PaddingTop: var(--pf-v5-c-modal-box__header--body--PaddingTop);
|
|
118
124
|
}
|
|
119
125
|
|
|
120
126
|
.pf-v5-c-modal-box__header-main {
|
|
127
|
+
display: flex;
|
|
128
|
+
flex-direction: column;
|
|
121
129
|
flex-grow: 1;
|
|
130
|
+
gap: var(--pf-v5-c-modal-box__header-main--Gap);
|
|
122
131
|
min-width: 0;
|
|
123
132
|
}
|
|
124
133
|
|
|
@@ -146,6 +155,8 @@
|
|
|
146
155
|
|
|
147
156
|
.pf-v5-c-modal-box__description {
|
|
148
157
|
padding-block-start: var(--pf-v5-c-modal-box__description--PaddingTop);
|
|
158
|
+
font-size: var(--pf-v5-c-modal-box__description--FontSize);
|
|
159
|
+
color: var(--pf-v5-c-modal-box__description--Color);
|
|
149
160
|
}
|
|
150
161
|
|
|
151
162
|
.pf-v5-c-modal-box__body {
|
|
@@ -180,8 +191,4 @@
|
|
|
180
191
|
.pf-v5-c-modal-box__footer > .pf-v5-c-button:not(:last-child) {
|
|
181
192
|
--pf-v5-c-modal-box__footer--c-button--MarginRight: var(--pf-v5-c-modal-box__footer--c-button--sm--MarginRight);
|
|
182
193
|
}
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-modal-box {
|
|
186
|
-
--pf-v5-c-modal-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
|
187
194
|
}
|