@patternfly/patternfly 6.5.0-prerelease.20 → 6.5.0-prerelease.22
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/README.md +1 -1
- package/components/Compass/compass.css +11 -34
- package/components/Compass/compass.scss +11 -41
- package/components/Hero/hero.css +74 -0
- package/components/Hero/hero.scss +86 -0
- package/components/_index.css +161 -109
- package/components/_index.scss +2 -1
- package/docs/components/Compass/examples/Compass.md +12 -6
- package/docs/components/Drawer/examples/Drawer.md +1 -1
- package/docs/components/Hero/examples/Hero.md +25 -0
- package/docs/demos/Compass/examples/Compass.md +36 -34
- package/package.json +1 -1
- package/patternfly-no-globals.css +161 -109
- package/patternfly.css +161 -109
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/namespaces-components.scss +3 -0
package/README.md
CHANGED
|
@@ -8,6 +8,8 @@
|
|
|
8
8
|
--pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
|
|
9
9
|
--pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
|
|
10
10
|
--pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
|
|
11
|
+
--pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
|
|
12
|
+
--pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
|
|
11
13
|
--pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
|
|
12
14
|
--pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
|
|
13
15
|
--pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
|
|
@@ -19,17 +21,6 @@
|
|
|
19
21
|
--pf-v6-c-compass__message-bar--Width: 450px;
|
|
20
22
|
--pf-v6-c-compass__message-bar--MinWidth: 300px;
|
|
21
23
|
--pf-v6-c-compass__message-bar--MaxWidth: 600px;
|
|
22
|
-
--pf-v6-c-compass__hero--gradient--angle: 109deg;
|
|
23
|
-
--pf-v6-c-compass__hero--gradient--stop-1--light: transparent;
|
|
24
|
-
--pf-v6-c-compass__hero--gradient--stop-2--light: transparent;
|
|
25
|
-
--pf-v6-c-compass__hero--gradient--stop-3--light: transparent;
|
|
26
|
-
--pf-v6-c-compass__hero--gradient--stop-1--dark: transparent;
|
|
27
|
-
--pf-v6-c-compass__hero--gradient--stop-2--dark: transparent;
|
|
28
|
-
--pf-v6-c-compass__hero--gradient--stop-3--dark: transparent;
|
|
29
|
-
--pf-v6-c-compass__hero--BackgroundImage--light: none;
|
|
30
|
-
--pf-v6-c-compass__hero--BackgroundImage--dark: none;
|
|
31
|
-
--pf-v6-c-compass__hero-body--Width: 800px;
|
|
32
|
-
--pf-v6-c-compass__hero-body--MaxWidth: 80%;
|
|
33
24
|
}
|
|
34
25
|
|
|
35
26
|
.pf-v6-c-compass {
|
|
@@ -90,6 +81,15 @@
|
|
|
90
81
|
min-height: 0;
|
|
91
82
|
}
|
|
92
83
|
|
|
84
|
+
.pf-v6-c-compass__main-header-content {
|
|
85
|
+
display: flex;
|
|
86
|
+
gap: var(--pf-v6-c-compass__main-header-content--RowGap) var(--pf-v6-c-compass__main-header-content--ColumnGap);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.pf-v6-c-compass__main-header-title {
|
|
90
|
+
flex-grow: 1;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
93
|
.pf-v6-c-compass__content {
|
|
94
94
|
display: flex;
|
|
95
95
|
flex: 1 0 0;
|
|
@@ -143,29 +143,6 @@
|
|
|
143
143
|
overflow: auto;
|
|
144
144
|
}
|
|
145
145
|
|
|
146
|
-
.pf-v6-c-compass__hero {
|
|
147
|
-
display: flex;
|
|
148
|
-
padding-block-start: 32px;
|
|
149
|
-
padding-block-end: 32px;
|
|
150
|
-
padding-inline-start: 72px;
|
|
151
|
-
padding-inline-end: 0;
|
|
152
|
-
background-image: var(--pf-v6-c-compass__hero--BackgroundImage, var(--pf-v6-c-compass__hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-compass__hero--gradient--angle), var(--pf-v6-c-compass__hero--gradient--stop-1, var(--pf-v6-c-compass__hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-compass__hero--gradient--stop-2, var(--pf-v6-c-compass__hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-compass__hero--gradient--stop-3, var(--pf-v6-c-compass__hero--gradient--stop-3--light)) 100%);
|
|
153
|
-
background-repeat: no-repeat;
|
|
154
|
-
background-position: right center;
|
|
155
|
-
background-size: contain;
|
|
156
|
-
border-radius: 24px 72px;
|
|
157
|
-
}
|
|
158
|
-
:root:where(.pf-v6-theme-dark) .pf-v6-c-compass__hero {
|
|
159
|
-
--pf-v6-c-compass__hero--BackgroundImage: var(--pf-v6-c-compass__hero--BackgroundImage--dark);
|
|
160
|
-
--pf-v6-c-compass__hero--gradient--stop-1: var(--pf-v6-c-compass__hero--gradient--stop-1--dark);
|
|
161
|
-
--pf-v6-c-compass__hero--gradient--stop-2: var(--pf-v6-c-compass__hero--gradient--stop-2--dark);
|
|
162
|
-
--pf-v6-c-compass__hero--gradient--stop-3: var(--pf-v6-c-compass__hero--gradient--stop-3--dark);
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
.pf-v6-c-compass__hero-body {
|
|
166
|
-
width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
|
|
167
|
-
}
|
|
168
|
-
|
|
169
146
|
/* stylelint-disable */
|
|
170
147
|
@media (max-width: 1200px) {
|
|
171
148
|
.pf-v6-c-compass * {
|
|
@@ -10,6 +10,8 @@
|
|
|
10
10
|
--#{$compass}__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
|
|
11
11
|
--#{$compass}__sidebar--Padding: var(--pf-t--global--spacer--sm);
|
|
12
12
|
--#{$compass}__main--RowGap: var(--pf-t--global--spacer--md);
|
|
13
|
+
--#{$compass}__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
|
|
14
|
+
--#{$compass}__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
|
|
13
15
|
--#{$compass}__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
|
|
14
16
|
--#{$compass}__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
|
|
15
17
|
--#{$compass}__panel--BorderRadius: var(--pf-t--global--border--radius--large);
|
|
@@ -21,17 +23,6 @@
|
|
|
21
23
|
--#{$compass}__message-bar--Width: 450px;
|
|
22
24
|
--#{$compass}__message-bar--MinWidth: 300px;
|
|
23
25
|
--#{$compass}__message-bar--MaxWidth: 600px;
|
|
24
|
-
--#{$compass}__hero--gradient--angle: 109deg;
|
|
25
|
-
--#{$compass}__hero--gradient--stop-1--light: transparent;
|
|
26
|
-
--#{$compass}__hero--gradient--stop-2--light: transparent;
|
|
27
|
-
--#{$compass}__hero--gradient--stop-3--light: transparent;
|
|
28
|
-
--#{$compass}__hero--gradient--stop-1--dark: transparent;
|
|
29
|
-
--#{$compass}__hero--gradient--stop-2--dark: transparent;
|
|
30
|
-
--#{$compass}__hero--gradient--stop-3--dark: transparent;
|
|
31
|
-
--#{$compass}__hero--BackgroundImage--light: none;
|
|
32
|
-
--#{$compass}__hero--BackgroundImage--dark: none;
|
|
33
|
-
--#{$compass}__hero-body--Width: 800px;
|
|
34
|
-
--#{$compass}__hero-body--MaxWidth: 80%;
|
|
35
26
|
}
|
|
36
27
|
|
|
37
28
|
.#{$compass} {
|
|
@@ -103,6 +94,15 @@
|
|
|
103
94
|
min-height: 0;
|
|
104
95
|
}
|
|
105
96
|
|
|
97
|
+
.#{$compass}__main-header-content {
|
|
98
|
+
display: flex;
|
|
99
|
+
gap: var(--#{$compass}__main-header-content--RowGap) var(--#{$compass}__main-header-content--ColumnGap);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.#{$compass}__main-header-title {
|
|
103
|
+
flex-grow: 1;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
106
|
.#{$compass}__content {
|
|
107
107
|
display: flex;
|
|
108
108
|
flex: 1 0 0;
|
|
@@ -170,36 +170,6 @@
|
|
|
170
170
|
}
|
|
171
171
|
}
|
|
172
172
|
|
|
173
|
-
.#{$compass}__hero {
|
|
174
|
-
display: flex;
|
|
175
|
-
padding-block-start: 32px;
|
|
176
|
-
padding-block-end: 32px;
|
|
177
|
-
padding-inline-start: 72px;
|
|
178
|
-
padding-inline-end: 0;
|
|
179
|
-
background-image: var(--#{$compass}__hero--BackgroundImage, var(--#{$compass}__hero--BackgroundImage--light)),
|
|
180
|
-
linear-gradient(
|
|
181
|
-
var(--#{$compass}__hero--gradient--angle),
|
|
182
|
-
var(--#{$compass}__hero--gradient--stop-1, var(--#{$compass}__hero--gradient--stop-1--light)) 0%,
|
|
183
|
-
var(--#{$compass}__hero--gradient--stop-2, var(--#{$compass}__hero--gradient--stop-2--light)) 50%,
|
|
184
|
-
var(--#{$compass}__hero--gradient--stop-3, var(--#{$compass}__hero--gradient--stop-3--light)) 100%
|
|
185
|
-
);
|
|
186
|
-
background-repeat: no-repeat;
|
|
187
|
-
background-position: right center;
|
|
188
|
-
background-size: contain;
|
|
189
|
-
border-radius: 24px 72px;
|
|
190
|
-
|
|
191
|
-
:root:where(.pf-v6-theme-dark) & {
|
|
192
|
-
--#{$compass}__hero--BackgroundImage: var(--#{$compass}__hero--BackgroundImage--dark);
|
|
193
|
-
--#{$compass}__hero--gradient--stop-1: var(--#{$compass}__hero--gradient--stop-1--dark);
|
|
194
|
-
--#{$compass}__hero--gradient--stop-2: var(--#{$compass}__hero--gradient--stop-2--dark);
|
|
195
|
-
--#{$compass}__hero--gradient--stop-3: var(--#{$compass}__hero--gradient--stop-3--dark);
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
.#{$compass}__hero-body {
|
|
200
|
-
width: min(var(--#{$compass}__hero-body--Width), var(--#{$compass}__hero-body--MaxWidth));
|
|
201
|
-
}
|
|
202
|
-
|
|
203
173
|
:where(.pf-v6-theme-dark) .#{$compass} {
|
|
204
174
|
// dark theme goes here
|
|
205
175
|
}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
.pf-v6-c-hero {
|
|
2
|
+
--pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--xl);
|
|
3
|
+
--pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
|
|
4
|
+
--pf-v6-c-hero--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
|
|
5
|
+
--pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
|
|
6
|
+
--pf-v6-c-hero--gradient--angle: 109deg;
|
|
7
|
+
--pf-v6-c-hero--gradient--stop-1--light: transparent;
|
|
8
|
+
--pf-v6-c-hero--gradient--stop-2--light: transparent;
|
|
9
|
+
--pf-v6-c-hero--gradient--stop-3--light: transparent;
|
|
10
|
+
--pf-v6-c-hero--gradient--stop-1--dark: transparent;
|
|
11
|
+
--pf-v6-c-hero--gradient--stop-2--dark: transparent;
|
|
12
|
+
--pf-v6-c-hero--gradient--stop-3--dark: transparent;
|
|
13
|
+
--pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--default);
|
|
14
|
+
--pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
|
|
15
|
+
--pf-v6-c-hero--BackgroundImage--light: none;
|
|
16
|
+
--pf-v6-c-hero--BackgroundImage--dark: none;
|
|
17
|
+
--pf-v6-c-hero--BackgroundRepeat: no-repeat;
|
|
18
|
+
--pf-v6-c-hero--BackgroundPosition: right center;
|
|
19
|
+
--pf-v6-c-hero--BackgroundSize: contain;
|
|
20
|
+
--pf-v6-c-hero--BorderStyle: solid;
|
|
21
|
+
--pf-v6-c-hero--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
|
|
22
|
+
--pf-v6-c-hero--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
|
|
23
|
+
--pf-v6-c-hero--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
|
|
24
|
+
--pf-v6-c-hero--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
|
|
25
|
+
--pf-v6-c-hero--BorderColor: var(--pf-t--global--border--color--default);
|
|
26
|
+
--pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
|
|
27
|
+
--pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
|
|
28
|
+
--pf-v6-c-hero--BorderStartStartRadius: 24px;
|
|
29
|
+
--pf-v6-c-hero--BorderStartEndRadius: 72px;
|
|
30
|
+
--pf-v6-c-hero--BorderEndEndRadius: 24px;
|
|
31
|
+
--pf-v6-c-hero--BorderEndStartRadius: 72px;
|
|
32
|
+
--pf-v6-c-hero__body--Width: 800px;
|
|
33
|
+
--pf-v6-c-hero__body--MaxWidth: 80%;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.pf-v6-c-hero {
|
|
37
|
+
display: flex;
|
|
38
|
+
padding-block-start: var(--pf-v6-c-hero--PaddingBlockStart);
|
|
39
|
+
padding-block-end: var(--pf-v6-c-hero--PaddingBlockEnd);
|
|
40
|
+
padding-inline-start: var(--pf-v6-c-hero--PaddingInlineStart);
|
|
41
|
+
padding-inline-end: var(--pf-v6-c-hero--PaddingInlineEnd);
|
|
42
|
+
background-image: var(--pf-v6-c-hero--BackgroundImage, var(--pf-v6-c-hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-hero--gradient--angle), var(--pf-v6-c-hero--gradient--stop-1, var(--pf-v6-c-hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-hero--gradient--stop-2, var(--pf-v6-c-hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-hero--gradient--stop-3, var(--pf-v6-c-hero--gradient--stop-3--light)) 100%);
|
|
43
|
+
background-repeat: var(--pf-v6-c-hero--BackgroundRepeat);
|
|
44
|
+
background-position: var(--pf-v6-c-hero--BackgroundPosition);
|
|
45
|
+
background-size: var(--pf-v6-c-hero--BackgroundSize);
|
|
46
|
+
border-color: var(--pf-v6-c-hero--BorderColor);
|
|
47
|
+
border-style: var(--pf-v6-c-hero--BorderStyle);
|
|
48
|
+
border-block-start-width: var(--pf-v6-c-hero--BorderBlockStartWidth);
|
|
49
|
+
border-block-end-width: var(--pf-v6-c-hero--BorderBlockEndWidth);
|
|
50
|
+
border-inline-start-width: var(--pf-v6-c-hero--BorderInlineStartWidth);
|
|
51
|
+
border-inline-end-width: var(--pf-v6-c-hero--BorderInlineEndWidth);
|
|
52
|
+
border-start-start-radius: var(--pf-v6-c-hero--BorderStartStartRadius);
|
|
53
|
+
border-start-end-radius: var(--pf-v6-c-hero--BorderStartEndRadius);
|
|
54
|
+
border-end-start-radius: var(--pf-v6-c-hero--BorderEndStartRadius);
|
|
55
|
+
border-end-end-radius: var(--pf-v6-c-hero--BorderEndEndRadius);
|
|
56
|
+
}
|
|
57
|
+
:root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
|
|
58
|
+
--pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);
|
|
59
|
+
--pf-v6-c-hero--gradient--stop-1: var(--pf-v6-c-hero--gradient--stop-1--dark);
|
|
60
|
+
--pf-v6-c-hero--gradient--stop-2: var(--pf-v6-c-hero--gradient--stop-2--dark);
|
|
61
|
+
--pf-v6-c-hero--gradient--stop-3: var(--pf-v6-c-hero--gradient--stop-3--dark);
|
|
62
|
+
}
|
|
63
|
+
:root:where(.pf-v6-theme-glass) .pf-v6-c-hero {
|
|
64
|
+
--pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
|
|
65
|
+
box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
|
|
66
|
+
}
|
|
67
|
+
.pf-v6-c-hero:not(.pf-m-no-glass) {
|
|
68
|
+
background-color: var(--pf-v6-c-hero--BackgroundColor);
|
|
69
|
+
backdrop-filter: var(--pf-v6-c-hero--BackdropFilter);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.pf-v6-c-hero__body {
|
|
73
|
+
width: min(var(--pf-v6-c-hero__body--Width), var(--pf-v6-c-hero__body--MaxWidth));
|
|
74
|
+
}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
@use '../../sass-utilities' as *;
|
|
2
|
+
|
|
3
|
+
@include pf-root($hero) {
|
|
4
|
+
--#{$hero}--PaddingBlockStart: var(--pf-t--global--spacer--xl);
|
|
5
|
+
--#{$hero}--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
|
|
6
|
+
--#{$hero}--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
|
|
7
|
+
--#{$hero}--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
|
|
8
|
+
--#{$hero}--gradient--angle: 109deg;
|
|
9
|
+
--#{$hero}--gradient--stop-1--light: transparent;
|
|
10
|
+
--#{$hero}--gradient--stop-2--light: transparent;
|
|
11
|
+
--#{$hero}--gradient--stop-3--light: transparent;
|
|
12
|
+
--#{$hero}--gradient--stop-1--dark: transparent;
|
|
13
|
+
--#{$hero}--gradient--stop-2--dark: transparent;
|
|
14
|
+
--#{$hero}--gradient--stop-3--dark: transparent;
|
|
15
|
+
--#{$hero}--BackgroundColor: var(--pf-t--global--background--color--glass--default);
|
|
16
|
+
--#{$hero}--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
|
|
17
|
+
--#{$hero}--BackgroundImage--light: none;
|
|
18
|
+
--#{$hero}--BackgroundImage--dark: none;
|
|
19
|
+
--#{$hero}--BackgroundRepeat: no-repeat;
|
|
20
|
+
--#{$hero}--BackgroundPosition: right center;
|
|
21
|
+
--#{$hero}--BackgroundSize: contain;
|
|
22
|
+
--#{$hero}--BorderStyle: solid;
|
|
23
|
+
--#{$hero}--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
|
|
24
|
+
--#{$hero}--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
|
|
25
|
+
--#{$hero}--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
|
|
26
|
+
--#{$hero}--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
|
|
27
|
+
--#{$hero}--BorderColor: var(--pf-t--global--border--color--default);
|
|
28
|
+
--#{$hero}--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
|
|
29
|
+
--#{$hero}--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
|
|
30
|
+
--#{$hero}--BorderStartStartRadius: 24px;
|
|
31
|
+
--#{$hero}--BorderStartEndRadius: 72px;
|
|
32
|
+
--#{$hero}--BorderEndEndRadius: 24px;
|
|
33
|
+
--#{$hero}--BorderEndStartRadius: 72px;
|
|
34
|
+
--#{$hero}__body--Width: 800px;
|
|
35
|
+
--#{$hero}__body--MaxWidth: 80%;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.#{$hero} {
|
|
39
|
+
display: flex;
|
|
40
|
+
padding-block-start: var(--#{$hero}--PaddingBlockStart);
|
|
41
|
+
padding-block-end: var(--#{$hero}--PaddingBlockEnd);
|
|
42
|
+
padding-inline-start: var(--#{$hero}--PaddingInlineStart);
|
|
43
|
+
padding-inline-end: var(--#{$hero}--PaddingInlineEnd);
|
|
44
|
+
background-image: var(--#{$hero}--BackgroundImage, var(--#{$hero}--BackgroundImage--light)),
|
|
45
|
+
linear-gradient(
|
|
46
|
+
var(--#{$hero}--gradient--angle),
|
|
47
|
+
var(--#{$hero}--gradient--stop-1, var(--#{$hero}--gradient--stop-1--light)) 0%,
|
|
48
|
+
var(--#{$hero}--gradient--stop-2, var(--#{$hero}--gradient--stop-2--light)) 50%,
|
|
49
|
+
var(--#{$hero}--gradient--stop-3, var(--#{$hero}--gradient--stop-3--light)) 100%
|
|
50
|
+
);
|
|
51
|
+
background-repeat: var(--#{$hero}--BackgroundRepeat);
|
|
52
|
+
background-position: var(--#{$hero}--BackgroundPosition);
|
|
53
|
+
background-size: var(--#{$hero}--BackgroundSize);
|
|
54
|
+
border-color: var(--#{$hero}--BorderColor);
|
|
55
|
+
border-style: var(--#{$hero}--BorderStyle);
|
|
56
|
+
border-block-start-width: var(--#{$hero}--BorderBlockStartWidth);
|
|
57
|
+
border-block-end-width: var(--#{$hero}--BorderBlockEndWidth);
|
|
58
|
+
border-inline-start-width: var(--#{$hero}--BorderInlineStartWidth);
|
|
59
|
+
border-inline-end-width: var(--#{$hero}--BorderInlineEndWidth);
|
|
60
|
+
border-start-start-radius: var(--#{$hero}--BorderStartStartRadius);
|
|
61
|
+
border-start-end-radius: var(--#{$hero}--BorderStartEndRadius);
|
|
62
|
+
border-end-start-radius: var(--#{$hero}--BorderEndStartRadius);
|
|
63
|
+
border-end-end-radius: var(--#{$hero}--BorderEndEndRadius);
|
|
64
|
+
|
|
65
|
+
:root:where(.#{$pf-prefix}theme-dark) & {
|
|
66
|
+
--#{$hero}--BackgroundImage: var(--#{$hero}--BackgroundImage--dark);
|
|
67
|
+
--#{$hero}--gradient--stop-1: var(--#{$hero}--gradient--stop-1--dark);
|
|
68
|
+
--#{$hero}--gradient--stop-2: var(--#{$hero}--gradient--stop-2--dark);
|
|
69
|
+
--#{$hero}--gradient--stop-3: var(--#{$hero}--gradient--stop-3--dark);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
:root:where(.#{$pf-prefix}theme-glass) & {
|
|
73
|
+
--#{$hero}--BorderColor: var(--#{$hero}--m-glass--BorderColor);
|
|
74
|
+
|
|
75
|
+
box-shadow: var(--#{$hero}--m-glass--BoxShadow);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&:not(.pf-m-no-glass) {
|
|
79
|
+
background-color: var(--#{$hero}--BackgroundColor);
|
|
80
|
+
backdrop-filter: var(--#{$hero}--BackdropFilter);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.#{$hero}__body {
|
|
85
|
+
width: min(var(--#{$hero}__body--Width), var(--#{$hero}__body--MaxWidth));
|
|
86
|
+
}
|
package/components/_index.css
CHANGED
|
@@ -3517,6 +3517,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
3517
3517
|
--pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
|
|
3518
3518
|
--pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
|
|
3519
3519
|
--pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
|
|
3520
|
+
--pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
|
|
3521
|
+
--pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
|
|
3520
3522
|
--pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
|
|
3521
3523
|
--pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
|
|
3522
3524
|
--pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
|
|
@@ -3528,17 +3530,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
3528
3530
|
--pf-v6-c-compass__message-bar--Width: 450px;
|
|
3529
3531
|
--pf-v6-c-compass__message-bar--MinWidth: 300px;
|
|
3530
3532
|
--pf-v6-c-compass__message-bar--MaxWidth: 600px;
|
|
3531
|
-
--pf-v6-c-compass__hero--gradient--angle: 109deg;
|
|
3532
|
-
--pf-v6-c-compass__hero--gradient--stop-1--light: transparent;
|
|
3533
|
-
--pf-v6-c-compass__hero--gradient--stop-2--light: transparent;
|
|
3534
|
-
--pf-v6-c-compass__hero--gradient--stop-3--light: transparent;
|
|
3535
|
-
--pf-v6-c-compass__hero--gradient--stop-1--dark: transparent;
|
|
3536
|
-
--pf-v6-c-compass__hero--gradient--stop-2--dark: transparent;
|
|
3537
|
-
--pf-v6-c-compass__hero--gradient--stop-3--dark: transparent;
|
|
3538
|
-
--pf-v6-c-compass__hero--BackgroundImage--light: none;
|
|
3539
|
-
--pf-v6-c-compass__hero--BackgroundImage--dark: none;
|
|
3540
|
-
--pf-v6-c-compass__hero-body--Width: 800px;
|
|
3541
|
-
--pf-v6-c-compass__hero-body--MaxWidth: 80%;
|
|
3542
3533
|
}
|
|
3543
3534
|
|
|
3544
3535
|
.pf-v6-c-compass {
|
|
@@ -3599,6 +3590,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
3599
3590
|
min-height: 0;
|
|
3600
3591
|
}
|
|
3601
3592
|
|
|
3593
|
+
.pf-v6-c-compass__main-header-content {
|
|
3594
|
+
display: flex;
|
|
3595
|
+
gap: var(--pf-v6-c-compass__main-header-content--RowGap) var(--pf-v6-c-compass__main-header-content--ColumnGap);
|
|
3596
|
+
}
|
|
3597
|
+
|
|
3598
|
+
.pf-v6-c-compass__main-header-title {
|
|
3599
|
+
flex-grow: 1;
|
|
3600
|
+
}
|
|
3601
|
+
|
|
3602
3602
|
.pf-v6-c-compass__content {
|
|
3603
3603
|
display: flex;
|
|
3604
3604
|
flex: 1 0 0;
|
|
@@ -3652,29 +3652,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
3652
3652
|
overflow: auto;
|
|
3653
3653
|
}
|
|
3654
3654
|
|
|
3655
|
-
.pf-v6-c-compass__hero {
|
|
3656
|
-
display: flex;
|
|
3657
|
-
padding-block-start: 32px;
|
|
3658
|
-
padding-block-end: 32px;
|
|
3659
|
-
padding-inline-start: 72px;
|
|
3660
|
-
padding-inline-end: 0;
|
|
3661
|
-
background-image: var(--pf-v6-c-compass__hero--BackgroundImage, var(--pf-v6-c-compass__hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-compass__hero--gradient--angle), var(--pf-v6-c-compass__hero--gradient--stop-1, var(--pf-v6-c-compass__hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-compass__hero--gradient--stop-2, var(--pf-v6-c-compass__hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-compass__hero--gradient--stop-3, var(--pf-v6-c-compass__hero--gradient--stop-3--light)) 100%);
|
|
3662
|
-
background-repeat: no-repeat;
|
|
3663
|
-
background-position: right center;
|
|
3664
|
-
background-size: contain;
|
|
3665
|
-
border-radius: 24px 72px;
|
|
3666
|
-
}
|
|
3667
|
-
:root:where(.pf-v6-theme-dark) .pf-v6-c-compass__hero {
|
|
3668
|
-
--pf-v6-c-compass__hero--BackgroundImage: var(--pf-v6-c-compass__hero--BackgroundImage--dark);
|
|
3669
|
-
--pf-v6-c-compass__hero--gradient--stop-1: var(--pf-v6-c-compass__hero--gradient--stop-1--dark);
|
|
3670
|
-
--pf-v6-c-compass__hero--gradient--stop-2: var(--pf-v6-c-compass__hero--gradient--stop-2--dark);
|
|
3671
|
-
--pf-v6-c-compass__hero--gradient--stop-3: var(--pf-v6-c-compass__hero--gradient--stop-3--dark);
|
|
3672
|
-
}
|
|
3673
|
-
|
|
3674
|
-
.pf-v6-c-compass__hero-body {
|
|
3675
|
-
width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
|
|
3676
|
-
}
|
|
3677
|
-
|
|
3678
3655
|
/* stylelint-disable */
|
|
3679
3656
|
@media (max-width: 1200px) {
|
|
3680
3657
|
.pf-v6-c-compass * {
|
|
@@ -8129,81 +8106,6 @@ ul) {
|
|
|
8129
8106
|
pointer-events: none;
|
|
8130
8107
|
}
|
|
8131
8108
|
|
|
8132
|
-
.pf-v6-c-hint {
|
|
8133
|
-
--pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
|
|
8134
|
-
--pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
|
|
8135
|
-
--pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
|
8136
|
-
--pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
|
|
8137
|
-
--pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
|
|
8138
|
-
--pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
8139
|
-
--pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
|
|
8140
|
-
--pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
|
|
8141
|
-
--pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
8142
|
-
--pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
|
|
8143
|
-
--pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
8144
|
-
--pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
|
|
8145
|
-
--pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
|
|
8146
|
-
--pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
|
|
8147
|
-
--pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
|
|
8148
|
-
--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
|
|
8149
|
-
--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
|
|
8150
|
-
}
|
|
8151
|
-
|
|
8152
|
-
.pf-v6-c-hint {
|
|
8153
|
-
display: grid;
|
|
8154
|
-
grid-template-columns: 1fr auto;
|
|
8155
|
-
grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
|
|
8156
|
-
padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
|
|
8157
|
-
padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
|
|
8158
|
-
padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
|
|
8159
|
-
padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
|
|
8160
|
-
color: var(--pf-v6-c-hint--Color);
|
|
8161
|
-
background-color: var(--pf-v6-c-hint--BackgroundColor);
|
|
8162
|
-
border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
|
|
8163
|
-
border-radius: var(--pf-v6-c-hint--BorderRadius);
|
|
8164
|
-
}
|
|
8165
|
-
.pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
8166
|
-
text-align: start;
|
|
8167
|
-
white-space: normal;
|
|
8168
|
-
}
|
|
8169
|
-
|
|
8170
|
-
.pf-v6-c-hint__actions {
|
|
8171
|
-
display: inline-grid;
|
|
8172
|
-
grid-row: 1;
|
|
8173
|
-
grid-column: 2;
|
|
8174
|
-
grid-auto-flow: column;
|
|
8175
|
-
align-self: start;
|
|
8176
|
-
margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
|
|
8177
|
-
margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
|
|
8178
|
-
margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
|
|
8179
|
-
text-align: end;
|
|
8180
|
-
}
|
|
8181
|
-
.pf-v6-c-hint__actions.pf-m-no-offset {
|
|
8182
|
-
--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
|
|
8183
|
-
--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
|
|
8184
|
-
}
|
|
8185
|
-
.pf-v6-c-hint__actions + .pf-v6-c-hint__body {
|
|
8186
|
-
grid-column: 1;
|
|
8187
|
-
}
|
|
8188
|
-
|
|
8189
|
-
.pf-v6-c-hint__title {
|
|
8190
|
-
align-self: center;
|
|
8191
|
-
font-weight: var(--pf-v6-c-hint__title--FontWeight);
|
|
8192
|
-
}
|
|
8193
|
-
|
|
8194
|
-
.pf-v6-c-hint__body {
|
|
8195
|
-
grid-column: 1/-1;
|
|
8196
|
-
font-size: var(--pf-v6-c-hint__body--FontSize);
|
|
8197
|
-
}
|
|
8198
|
-
|
|
8199
|
-
.pf-v6-c-hint__footer {
|
|
8200
|
-
grid-column: 1/-1;
|
|
8201
|
-
margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
|
|
8202
|
-
}
|
|
8203
|
-
.pf-v6-c-hint__footer > :not(:last-child) {
|
|
8204
|
-
margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
|
|
8205
|
-
}
|
|
8206
|
-
|
|
8207
8109
|
.pf-v6-c-helper-text {
|
|
8208
8110
|
--pf-v6-c-helper-text--Gap: var(--pf-t--global--spacer--xs);
|
|
8209
8111
|
--pf-v6-c-helper-text--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
@@ -8289,6 +8191,156 @@ ul) {
|
|
|
8289
8191
|
color: var(--pf-v6-c-helper-text__item-text--Color);
|
|
8290
8192
|
}
|
|
8291
8193
|
|
|
8194
|
+
.pf-v6-c-hero {
|
|
8195
|
+
--pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--xl);
|
|
8196
|
+
--pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
|
|
8197
|
+
--pf-v6-c-hero--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
|
|
8198
|
+
--pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
|
|
8199
|
+
--pf-v6-c-hero--gradient--angle: 109deg;
|
|
8200
|
+
--pf-v6-c-hero--gradient--stop-1--light: transparent;
|
|
8201
|
+
--pf-v6-c-hero--gradient--stop-2--light: transparent;
|
|
8202
|
+
--pf-v6-c-hero--gradient--stop-3--light: transparent;
|
|
8203
|
+
--pf-v6-c-hero--gradient--stop-1--dark: transparent;
|
|
8204
|
+
--pf-v6-c-hero--gradient--stop-2--dark: transparent;
|
|
8205
|
+
--pf-v6-c-hero--gradient--stop-3--dark: transparent;
|
|
8206
|
+
--pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--default);
|
|
8207
|
+
--pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
|
|
8208
|
+
--pf-v6-c-hero--BackgroundImage--light: none;
|
|
8209
|
+
--pf-v6-c-hero--BackgroundImage--dark: none;
|
|
8210
|
+
--pf-v6-c-hero--BackgroundRepeat: no-repeat;
|
|
8211
|
+
--pf-v6-c-hero--BackgroundPosition: right center;
|
|
8212
|
+
--pf-v6-c-hero--BackgroundSize: contain;
|
|
8213
|
+
--pf-v6-c-hero--BorderStyle: solid;
|
|
8214
|
+
--pf-v6-c-hero--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
|
|
8215
|
+
--pf-v6-c-hero--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
|
|
8216
|
+
--pf-v6-c-hero--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
|
|
8217
|
+
--pf-v6-c-hero--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
|
|
8218
|
+
--pf-v6-c-hero--BorderColor: var(--pf-t--global--border--color--default);
|
|
8219
|
+
--pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
|
|
8220
|
+
--pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
|
|
8221
|
+
--pf-v6-c-hero--BorderStartStartRadius: 24px;
|
|
8222
|
+
--pf-v6-c-hero--BorderStartEndRadius: 72px;
|
|
8223
|
+
--pf-v6-c-hero--BorderEndEndRadius: 24px;
|
|
8224
|
+
--pf-v6-c-hero--BorderEndStartRadius: 72px;
|
|
8225
|
+
--pf-v6-c-hero__body--Width: 800px;
|
|
8226
|
+
--pf-v6-c-hero__body--MaxWidth: 80%;
|
|
8227
|
+
}
|
|
8228
|
+
|
|
8229
|
+
.pf-v6-c-hero {
|
|
8230
|
+
display: flex;
|
|
8231
|
+
padding-block-start: var(--pf-v6-c-hero--PaddingBlockStart);
|
|
8232
|
+
padding-block-end: var(--pf-v6-c-hero--PaddingBlockEnd);
|
|
8233
|
+
padding-inline-start: var(--pf-v6-c-hero--PaddingInlineStart);
|
|
8234
|
+
padding-inline-end: var(--pf-v6-c-hero--PaddingInlineEnd);
|
|
8235
|
+
background-image: var(--pf-v6-c-hero--BackgroundImage, var(--pf-v6-c-hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-hero--gradient--angle), var(--pf-v6-c-hero--gradient--stop-1, var(--pf-v6-c-hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-hero--gradient--stop-2, var(--pf-v6-c-hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-hero--gradient--stop-3, var(--pf-v6-c-hero--gradient--stop-3--light)) 100%);
|
|
8236
|
+
background-repeat: var(--pf-v6-c-hero--BackgroundRepeat);
|
|
8237
|
+
background-position: var(--pf-v6-c-hero--BackgroundPosition);
|
|
8238
|
+
background-size: var(--pf-v6-c-hero--BackgroundSize);
|
|
8239
|
+
border-color: var(--pf-v6-c-hero--BorderColor);
|
|
8240
|
+
border-style: var(--pf-v6-c-hero--BorderStyle);
|
|
8241
|
+
border-block-start-width: var(--pf-v6-c-hero--BorderBlockStartWidth);
|
|
8242
|
+
border-block-end-width: var(--pf-v6-c-hero--BorderBlockEndWidth);
|
|
8243
|
+
border-inline-start-width: var(--pf-v6-c-hero--BorderInlineStartWidth);
|
|
8244
|
+
border-inline-end-width: var(--pf-v6-c-hero--BorderInlineEndWidth);
|
|
8245
|
+
border-start-start-radius: var(--pf-v6-c-hero--BorderStartStartRadius);
|
|
8246
|
+
border-start-end-radius: var(--pf-v6-c-hero--BorderStartEndRadius);
|
|
8247
|
+
border-end-start-radius: var(--pf-v6-c-hero--BorderEndStartRadius);
|
|
8248
|
+
border-end-end-radius: var(--pf-v6-c-hero--BorderEndEndRadius);
|
|
8249
|
+
}
|
|
8250
|
+
:root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
|
|
8251
|
+
--pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);
|
|
8252
|
+
--pf-v6-c-hero--gradient--stop-1: var(--pf-v6-c-hero--gradient--stop-1--dark);
|
|
8253
|
+
--pf-v6-c-hero--gradient--stop-2: var(--pf-v6-c-hero--gradient--stop-2--dark);
|
|
8254
|
+
--pf-v6-c-hero--gradient--stop-3: var(--pf-v6-c-hero--gradient--stop-3--dark);
|
|
8255
|
+
}
|
|
8256
|
+
:root:where(.pf-v6-theme-glass) .pf-v6-c-hero {
|
|
8257
|
+
--pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
|
|
8258
|
+
box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
|
|
8259
|
+
}
|
|
8260
|
+
.pf-v6-c-hero:not(.pf-m-no-glass) {
|
|
8261
|
+
background-color: var(--pf-v6-c-hero--BackgroundColor);
|
|
8262
|
+
backdrop-filter: var(--pf-v6-c-hero--BackdropFilter);
|
|
8263
|
+
}
|
|
8264
|
+
|
|
8265
|
+
.pf-v6-c-hero__body {
|
|
8266
|
+
width: min(var(--pf-v6-c-hero__body--Width), var(--pf-v6-c-hero__body--MaxWidth));
|
|
8267
|
+
}
|
|
8268
|
+
|
|
8269
|
+
.pf-v6-c-hint {
|
|
8270
|
+
--pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
|
|
8271
|
+
--pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
|
|
8272
|
+
--pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
|
8273
|
+
--pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
|
|
8274
|
+
--pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
|
|
8275
|
+
--pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
8276
|
+
--pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
|
|
8277
|
+
--pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
|
|
8278
|
+
--pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
8279
|
+
--pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
|
|
8280
|
+
--pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
8281
|
+
--pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
|
|
8282
|
+
--pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
|
|
8283
|
+
--pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
|
|
8284
|
+
--pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
|
|
8285
|
+
--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
|
|
8286
|
+
--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
|
|
8287
|
+
}
|
|
8288
|
+
|
|
8289
|
+
.pf-v6-c-hint {
|
|
8290
|
+
display: grid;
|
|
8291
|
+
grid-template-columns: 1fr auto;
|
|
8292
|
+
grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
|
|
8293
|
+
padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
|
|
8294
|
+
padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
|
|
8295
|
+
padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
|
|
8296
|
+
padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
|
|
8297
|
+
color: var(--pf-v6-c-hint--Color);
|
|
8298
|
+
background-color: var(--pf-v6-c-hint--BackgroundColor);
|
|
8299
|
+
border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
|
|
8300
|
+
border-radius: var(--pf-v6-c-hint--BorderRadius);
|
|
8301
|
+
}
|
|
8302
|
+
.pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
8303
|
+
text-align: start;
|
|
8304
|
+
white-space: normal;
|
|
8305
|
+
}
|
|
8306
|
+
|
|
8307
|
+
.pf-v6-c-hint__actions {
|
|
8308
|
+
display: inline-grid;
|
|
8309
|
+
grid-row: 1;
|
|
8310
|
+
grid-column: 2;
|
|
8311
|
+
grid-auto-flow: column;
|
|
8312
|
+
align-self: start;
|
|
8313
|
+
margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
|
|
8314
|
+
margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
|
|
8315
|
+
margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
|
|
8316
|
+
text-align: end;
|
|
8317
|
+
}
|
|
8318
|
+
.pf-v6-c-hint__actions.pf-m-no-offset {
|
|
8319
|
+
--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
|
|
8320
|
+
--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
|
|
8321
|
+
}
|
|
8322
|
+
.pf-v6-c-hint__actions + .pf-v6-c-hint__body {
|
|
8323
|
+
grid-column: 1;
|
|
8324
|
+
}
|
|
8325
|
+
|
|
8326
|
+
.pf-v6-c-hint__title {
|
|
8327
|
+
align-self: center;
|
|
8328
|
+
font-weight: var(--pf-v6-c-hint__title--FontWeight);
|
|
8329
|
+
}
|
|
8330
|
+
|
|
8331
|
+
.pf-v6-c-hint__body {
|
|
8332
|
+
grid-column: 1/-1;
|
|
8333
|
+
font-size: var(--pf-v6-c-hint__body--FontSize);
|
|
8334
|
+
}
|
|
8335
|
+
|
|
8336
|
+
.pf-v6-c-hint__footer {
|
|
8337
|
+
grid-column: 1/-1;
|
|
8338
|
+
margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
|
|
8339
|
+
}
|
|
8340
|
+
.pf-v6-c-hint__footer > :not(:last-child) {
|
|
8341
|
+
margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
|
|
8342
|
+
}
|
|
8343
|
+
|
|
8292
8344
|
.pf-v6-c-icon {
|
|
8293
8345
|
--pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
|
|
8294
8346
|
--pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);
|
package/components/_index.scss
CHANGED
|
@@ -32,8 +32,9 @@
|
|
|
32
32
|
@use "./FileUpload/file-upload";
|
|
33
33
|
@use "./Form/form";
|
|
34
34
|
@use "./FormControl/form-control";
|
|
35
|
-
@use "./Hint/hint";
|
|
36
35
|
@use "./HelperText/helper-text";
|
|
36
|
+
@use "./Hero/hero";
|
|
37
|
+
@use "./Hint/hint";
|
|
37
38
|
@use "./Icon/icon";
|
|
38
39
|
@use "./InlineEdit/inline-edit";
|
|
39
40
|
@use "./InputGroup/input-group";
|
|
@@ -21,10 +21,14 @@ cssPrefix: pf-v6-c-compass
|
|
|
21
21
|
<div class="pf-v6-c-compass__sidebar pf-m-start">sidebar (start)</div>
|
|
22
22
|
|
|
23
23
|
<div class="pf-v6-c-compass__main">
|
|
24
|
-
<div class="pf-v6-c-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
<div class="pf-v6-c-compass__hero">
|
|
25
|
+
<div class="pf-v6-c-hero">hero</div>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="pf-v6-c-compass__main-header">
|
|
28
|
+
<div class="pf-v6-c-compass__panel">
|
|
29
|
+
<div class="pf-v6-c-compass__main-header-content">main header</div>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
28
32
|
<div class="pf-v6-c-compass__content">content</div>
|
|
29
33
|
</div>
|
|
30
34
|
<div class="pf-v6-c-compass__sidebar pf-m-end">sidebar (end)</div>
|
|
@@ -49,11 +53,13 @@ cssPrefix: pf-v6-c-compass
|
|
|
49
53
|
| `.pf-v6-c-compass__profile` | `<div>` | Initiates the compass profile. |
|
|
50
54
|
| `.pf-v6-c-compass__sidebar` | `<div>` | Initiates a compass sidebar. **Required** |
|
|
51
55
|
| `.pf-v6-c-compass__main` | `<div>` | Initiates the compass main wrapper. **Required** |
|
|
52
|
-
| `.pf-v6-c-compass__hero` | `<div>` | Initiates the compass logo hero. |
|
|
53
|
-
| `.pf-v6-c-compass__hero-body` | `<div>` | Initiates the compass hero body. |
|
|
54
56
|
| `.pf-v6-c-compass__main-header` | `<div>` | Initiates the compass main header. |
|
|
57
|
+
| `.pf-v6-c-compass__main-header-content` | `<div>` | Initiates the compass main header content. This should be passed into a `.pf-v6-c-compass__panel` component. |
|
|
58
|
+
| `.pf-v6-c-compass__main-header-title` | `<div>` | Initiates a title within the compass main header content. |
|
|
59
|
+
| `.pf-v6-c-compass__main-header-toolbar` | `<div>` | Initiates a toolbar of actions within the compass main header content. |
|
|
55
60
|
| `.pf-v6-c-compass__content` | `<div>` | Initiates the compass content. **Required** |
|
|
56
61
|
| `.pf-v6-c-compass__panel` | `<div>` | Initiates a compass panel. |
|
|
62
|
+
| `.pf-v6-c-compass__hero` | `<div>` | Initiates a compass hero. |
|
|
57
63
|
| `.pf-v6-c-compass__footer` | `<div>` | Initiates the compass footer. **Required** |
|
|
58
64
|
| `.pf-v6-c-compass__message-bar` | `<div>` | Initiates the compass message bar. |
|
|
59
65
|
| `.pf-m-no-glass` | `.pf-v6-c-compass`, `.pf-v6-c-compass__panel` | Modifies all elements or individual panels to remove the glass styles. |
|