@patternfly/react-styles 6.0.0-alpha.11 → 6.0.0-alpha.12
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +6 -0
- package/css/components/Alert/alert.css +2 -0
- package/css/components/Breadcrumb/breadcrumb.css +9 -1
- package/css/components/Button/button.css +44 -24
- package/css/components/CalendarMonth/calendar-month.css +61 -92
- package/css/components/CalendarMonth/calendar-month.d.ts +2 -4
- package/css/components/CalendarMonth/calendar-month.js +2 -4
- package/css/components/CalendarMonth/calendar-month.mjs +2 -4
- package/css/components/CodeBlock/code-block.css +4 -0
- package/css/components/CodeEditor/code-editor.css +94 -72
- package/css/components/CodeEditor/code-editor.d.ts +4 -4
- package/css/components/CodeEditor/code-editor.js +4 -4
- package/css/components/CodeEditor/code-editor.mjs +4 -4
- package/css/components/DatePicker/date-picker.css +13 -14
- package/css/components/DatePicker/date-picker.d.ts +1 -2
- package/css/components/DatePicker/date-picker.js +1 -2
- package/css/components/DatePicker/date-picker.mjs +1 -2
- package/css/components/Divider/divider.css +8 -6
- package/css/components/DualListSelector/dual-list-selector.css +56 -48
- package/css/components/DualListSelector/dual-list-selector.d.ts +1 -2
- package/css/components/DualListSelector/dual-list-selector.js +1 -2
- package/css/components/DualListSelector/dual-list-selector.mjs +1 -2
- package/css/components/FormControl/form-control.css +3 -3
- package/css/components/Icon/icon.css +27 -27
- package/css/components/Label/label-group.css +1 -1
- package/css/components/Label/label.css +13 -7
- package/css/components/Menu/menu.css +388 -419
- package/css/components/Menu/menu.d.ts +5 -8
- package/css/components/Menu/menu.js +5 -8
- package/css/components/Menu/menu.mjs +5 -8
- package/css/components/MenuToggle/menu-toggle.css +229 -265
- package/css/components/MenuToggle/menu-toggle.d.ts +7 -8
- package/css/components/MenuToggle/menu-toggle.js +7 -8
- package/css/components/MenuToggle/menu-toggle.mjs +7 -8
- package/css/components/Pagination/pagination.css +2 -12
- package/css/components/ProgressStepper/progress-stepper.css +72 -69
- package/css/components/ProgressStepper/progress-stepper.d.ts +1 -0
- package/css/components/ProgressStepper/progress-stepper.js +1 -0
- package/css/components/ProgressStepper/progress-stepper.mjs +1 -0
- package/css/components/Table/table-grid.css +29 -45
- package/css/components/Table/table-scrollable.css +6 -6
- package/css/components/Table/table-tree-view.css +76 -74
- package/css/components/Table/table.css +54 -74
- package/css/components/TextInputGroup/text-input-group.css +0 -14
- package/css/components/TextInputGroup/text-input-group.d.ts +1 -3
- package/css/components/TextInputGroup/text-input-group.js +1 -3
- package/css/components/TextInputGroup/text-input-group.mjs +1 -3
- package/css/components/Tile/tile.css +1 -1
- package/css/components/TreeView/tree-view.css +76 -97
- package/css/components/TreeView/tree-view.d.ts +0 -4
- package/css/components/TreeView/tree-view.js +0 -4
- package/css/components/TreeView/tree-view.mjs +0 -4
- package/css/components/Wizard/wizard.css +128 -205
- package/css/components/Wizard/wizard.d.ts +0 -3
- package/css/components/Wizard/wizard.js +0 -3
- package/css/components/Wizard/wizard.mjs +0 -3
- package/css/docs/components/Menu/examples/Menu.css +7 -11
- package/css/docs/components/Menu/examples/Menu.d.ts +2 -1
- package/css/docs/components/Menu/examples/Menu.js +2 -1
- package/css/docs/components/Menu/examples/Menu.mjs +2 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
@@ -3,6 +3,12 @@
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
5
|
|
6
|
+
# 6.0.0-alpha.12 (2024-02-16)
|
7
|
+
|
8
|
+
### Features
|
9
|
+
|
10
|
+
- **CodeEditor,Divider:** consume penta & update core version ([#10081](https://github.com/patternfly/patternfly-react/issues/10081)) ([addda04](https://github.com/patternfly/patternfly-react/commit/addda044d7f6d91f3511c7a769b2707140df86d4))
|
11
|
+
|
6
12
|
# 6.0.0-alpha.11 (2024-01-31)
|
7
13
|
|
8
14
|
### Features
|
@@ -23,6 +23,7 @@
|
|
23
23
|
--pf-v5-c-alert__icon--MarginTop: 0.25rem;
|
24
24
|
--pf-v5-c-alert__icon--MarginRight: var(--pf-t--global--spacer--sm);
|
25
25
|
--pf-v5-c-alert__icon--FontSize: var(--pf-t--global--icon--size--md);
|
26
|
+
--pf-v5-c-alert__title--FontFamily: var(--pf-t--global--font--family--heading);
|
26
27
|
--pf-v5-c-alert__title--FontSize: var(--pf-t--global--font--size--heading--xs);
|
27
28
|
--pf-v5-c-alert__title--FontWeight: var(--pf-t--global--font--weight--heading);
|
28
29
|
--pf-v5-c-alert__title--LineHeight: var(--pf-t--global--font--line-height--heading);
|
@@ -159,6 +160,7 @@
|
|
159
160
|
|
160
161
|
.pf-v5-c-alert__title {
|
161
162
|
grid-area: title;
|
163
|
+
font-family: var(--pf-v5-c-alert__title--FontFamily);
|
162
164
|
font-size: var(--pf-v5-c-alert__title--FontSize);
|
163
165
|
font-weight: var(--pf-v5-c-alert__title--FontWeight);
|
164
166
|
line-height: var(--pf-v5-c-alert__title--LineHeight);
|
@@ -1,10 +1,13 @@
|
|
1
|
-
:root,
|
1
|
+
:where(:root),
|
2
|
+
:where(.pf-v5-c-breadcrumb) {
|
2
3
|
--pf-v5-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
|
3
4
|
--pf-v5-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
|
4
5
|
--pf-v5-c-breadcrumb__item--MarginRight: var(--pf-t--global--spacer--sm);
|
5
6
|
--pf-v5-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
|
6
7
|
--pf-v5-c-breadcrumb__item-divider--MarginRight: var(--pf-t--global--spacer--sm);
|
7
8
|
--pf-v5-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
|
9
|
+
--pf-v5-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
10
|
+
--pf-v5-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
8
11
|
--pf-v5-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
|
9
12
|
--pf-v5-c-breadcrumb__link--TextDecoration: var(--pf-t--global--link--text-decoration);
|
10
13
|
--pf-v5-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
|
@@ -38,6 +41,9 @@
|
|
38
41
|
white-space: nowrap;
|
39
42
|
list-style: none;
|
40
43
|
}
|
44
|
+
.pf-v5-c-breadcrumb__item:first-child:has(.pf-v5-c-breadcrumb__link) {
|
45
|
+
--pf-v5-c-breadcrumb__link--PaddingInlineStart: 0;
|
46
|
+
}
|
41
47
|
.pf-v5-c-breadcrumb__item:not(:last-child) {
|
42
48
|
margin-inline-end: var(--pf-v5-c-breadcrumb__item--MarginRight);
|
43
49
|
}
|
@@ -53,6 +59,8 @@
|
|
53
59
|
}
|
54
60
|
|
55
61
|
.pf-v5-c-breadcrumb__link {
|
62
|
+
padding-inline-start: var(--pf-v5-c-breadcrumb__link--PaddingInlineStart);
|
63
|
+
padding-inline-end: var(--pf-v5-c-breadcrumb__link--PaddingInlineEnd);
|
56
64
|
font-size: inherit;
|
57
65
|
font-weight: var(--pf-v5-c-breadcrumb__link--FontWeight);
|
58
66
|
line-height: inherit;
|
@@ -21,7 +21,7 @@
|
|
21
21
|
--pf-v5-c-button--hover--TextDecoration: none;
|
22
22
|
--pf-v5-c-button--m-clicked--BackgroundColor: transparent;
|
23
23
|
--pf-v5-c-button--m-clicked--BorderColor: transparent;
|
24
|
-
--pf-v5-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--button--
|
24
|
+
--pf-v5-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--button--clicked);
|
25
25
|
--pf-v5-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
|
26
26
|
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
|
27
27
|
--pf-v5-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
|
@@ -63,7 +63,8 @@
|
|
63
63
|
--pf-v5-c-button--m-link--PaddingLeft: var(--pf-t--global--spacer--md);
|
64
64
|
--pf-v5-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
|
65
65
|
--pf-v5-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
66
|
-
--pf-v5-c-button--m-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
|
66
|
+
--pf-v5-c-button--m-link--hover--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
|
67
|
+
--pf-v5-c-button--m-link--m-clicked--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
|
67
68
|
--pf-v5-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
|
68
69
|
--pf-v5-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
|
69
70
|
--pf-v5-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
@@ -72,19 +73,24 @@
|
|
72
73
|
--pf-v5-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
73
74
|
--pf-v5-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
|
74
75
|
--pf-v5-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
|
76
|
+
--pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
75
77
|
--pf-v5-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
|
76
78
|
--pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
|
79
|
+
--pf-v5-c-button--m-link--m-danger--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
77
80
|
--pf-v5-c-button--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
|
78
81
|
--pf-v5-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
|
82
|
+
--pf-v5-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
79
83
|
--pf-v5-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
|
80
84
|
--pf-v5-c-button--m-link--m-inline--FontSize: initial;
|
81
85
|
--pf-v5-c-button--m-link--m-inline--LineHeight: initial;
|
82
86
|
--pf-v5-c-button--m-link--m-inline--FontWeight: initial;
|
83
|
-
--pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
|
84
87
|
--pf-v5-c-button--m-link--m-inline--PaddingTop: 0;
|
85
88
|
--pf-v5-c-button--m-link--m-inline--PaddingRight: 0;
|
86
89
|
--pf-v5-c-button--m-link--m-inline--PaddingBottom: 0;
|
87
90
|
--pf-v5-c-button--m-link--m-inline--PaddingLeft: 0;
|
91
|
+
--pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
|
92
|
+
--pf-v5-c-button--m-link--m-inline--hover--MixBlendMode: normal;
|
93
|
+
--pf-v5-c-button--m-link--m-inline--m-clicked--MixBlendMode: normal;
|
88
94
|
--pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
|
89
95
|
--pf-v5-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-v5-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-t--global--spacer--sm));
|
90
96
|
--pf-v5-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
|
@@ -96,18 +102,21 @@
|
|
96
102
|
--pf-v5-c-button--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
|
97
103
|
--pf-v5-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
|
98
104
|
--pf-v5-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
99
|
-
--pf-v5-c-button--m-plain--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
|
105
|
+
--pf-v5-c-button--m-plain--hover--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
|
106
|
+
--pf-v5-c-button--m-plain--m-clicked--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
|
100
107
|
--pf-v5-c-button--m-plain--MinWidth: calc(1em * var(--pf-v5-c-button--LineHeight) + var(--pf-v5-c-button--m-plain--PaddingTop) + var(--pf-v5-c-button--m-plain--PaddingBottom));
|
101
108
|
--pf-v5-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
|
102
109
|
--pf-v5-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
103
110
|
--pf-v5-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
|
104
111
|
--pf-v5-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
105
|
-
--pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--
|
112
|
+
--pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
|
113
|
+
--pf-v5-c-button--m-plain--disabled--BackgroundColor: transparent;
|
106
114
|
--pf-v5-c-button--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
|
107
115
|
--pf-v5-c-button--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
|
108
116
|
--pf-v5-c-button--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
|
109
117
|
--pf-v5-c-button--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
|
110
|
-
--pf-v5-c-button--m-plain--m-no-padding--MixBlendMode: normal;
|
118
|
+
--pf-v5-c-button--m-plain--m-no-padding--hover--MixBlendMode: normal;
|
119
|
+
--pf-v5-c-button--m-plain--m-no-padding--m-clicked--MixBlendMode: normal;
|
111
120
|
--pf-v5-c-button--m-plain--m-no-padding--MinWidth: auto;
|
112
121
|
--pf-v5-c-button--m-plain--m-no-padding--PaddingTop: 0;
|
113
122
|
--pf-v5-c-button--m-plain--m-no-padding--PaddingRight: 0;
|
@@ -133,7 +142,7 @@
|
|
133
142
|
--pf-v5-c-button--m-control--m-clicked--Color: var(--pf-t--global--text--color--regular);
|
134
143
|
--pf-v5-c-button--m-control--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
135
144
|
--pf-v5-c-button--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
|
136
|
-
--pf-v5-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--
|
145
|
+
--pf-v5-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
|
137
146
|
--pf-v5-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
|
138
147
|
--pf-v5-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
|
139
148
|
--pf-v5-c-button--m-stateful--PaddingLeft: var(--pf-t--global--spacer--md);
|
@@ -191,9 +200,10 @@
|
|
191
200
|
--pf-v5-c-button--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
|
192
201
|
--pf-v5-c-button--m-small--PaddingLeft: var(--pf-t--global--spacer--md);
|
193
202
|
--pf-v5-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
|
194
|
-
--pf-v5-c-button--
|
203
|
+
--pf-v5-c-button--disabled--MixBlendMode: normal;
|
195
204
|
--pf-v5-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
196
205
|
--pf-v5-c-button--disabled--BorderColor: transparent;
|
206
|
+
--pf-v5-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
|
197
207
|
--pf-v5-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
|
198
208
|
--pf-v5-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
|
199
209
|
--pf-v5-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
|
@@ -247,6 +257,7 @@
|
|
247
257
|
border-start-end-radius: var(--pf-v5-c-button--BorderStartEndRadius, var(--pf-v5-c-button--BorderRadius));
|
248
258
|
border-end-start-radius: var(--pf-v5-c-button--BorderEndStartRadius, var(--pf-v5-c-button--BorderRadius));
|
249
259
|
border-end-end-radius: var(--pf-v5-c-button--BorderEndEndRadius, var(--pf-v5-c-button--BorderRadius));
|
260
|
+
mix-blend-mode: var(--pf-v5-c-button--MixBlendMode);
|
250
261
|
}
|
251
262
|
.pf-v5-c-button::after {
|
252
263
|
position: absolute;
|
@@ -313,13 +324,14 @@
|
|
313
324
|
--pf-v5-c-button--Color: var(--pf-v5-c-button--m-link--Color);
|
314
325
|
--pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-link--BorderRadius);
|
315
326
|
--pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-link--BackgroundColor);
|
316
|
-
--pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-link--MixBlendMode);
|
317
327
|
--pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-link__icon--Color);
|
328
|
+
--pf-v5-c-button--hover--MixBlendMode: var(--pf-v5-c-button--m-link--hover--MixBlendMode);
|
318
329
|
--pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-link--hover--Color);
|
319
330
|
--pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-link--hover--BackgroundColor);
|
320
331
|
--pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-link--hover__icon--Color);
|
321
332
|
--pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-link--m-clicked--Color);
|
322
333
|
--pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-link--m-clicked--BackgroundColor);
|
334
|
+
--pf-v5-c-button--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-link--m-clicked--MixBlendMode);
|
323
335
|
--pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-link--m-clicked__icon--Color);
|
324
336
|
}
|
325
337
|
.pf-v5-c-button.pf-m-link.pf-m-inline {
|
@@ -334,7 +346,9 @@
|
|
334
346
|
--pf-v5-c-button__progress--Left: var(--pf-v5-c-button--m-link--m-inline__progress--Left);
|
335
347
|
--pf-v5-c-button--hover--TextDecoration: var(--pf-v5-c-button--m-link--m-inline--hover--TextDecoration);
|
336
348
|
--pf-v5-c-button--hover--BackgroundColor: transparent;
|
349
|
+
--pf-v5-c-button--hover--MixBlendMode: var(--pf-v5-c-button--m-link--m-inline--hover--MixBlendMode);
|
337
350
|
--pf-v5-c-button--m-clicked--BackgroundColor: transparent;
|
351
|
+
--pf-v5-c-button--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-link--m-inline--m-clicked--MixBlendMode);
|
338
352
|
--pf-v5-c-button--disabled--BackgroundColor: transparent;
|
339
353
|
--pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-link--m-inline--disabled--Color);
|
340
354
|
--pf-v5-c-button--disabled__icon--Color: var(--pf-v5-c-button--m-link--m-inline--disabled__icon--Color);
|
@@ -343,16 +357,16 @@
|
|
343
357
|
white-space: normal;
|
344
358
|
outline-offset: 0.125rem;
|
345
359
|
}
|
346
|
-
.pf-v5-c-button.pf-m-link
|
360
|
+
.pf-v5-c-button.pf-m-link.pf-m-danger {
|
347
361
|
--pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--Color);
|
362
|
+
--pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--BackgroundColor);
|
348
363
|
--pf-v5-c-button--m-danger__icon--Color: var(--pf-v5-c-button--m-link--m-danger__icon--Color);
|
349
364
|
--pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-c-button--m-link--m-danger--hover--Color);
|
365
|
+
--pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--hover--BackgroundColor);
|
350
366
|
--pf-v5-c-button--m-danger--hover__icon--Color: var(--pf-v5-c-button--m-link--m-danger--hover__icon--Color);
|
351
367
|
--pf-v5-c-button--m-danger--m-clicked--Color: var(--pf-v5-c-button--m-link--m-danger--m-clicked--Color);
|
368
|
+
--pf-v5-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--m-clicked--BackgroundColor);
|
352
369
|
--pf-v5-c-button--m-danger--m-clicked__icon--Color: var(--pf-v5-c-button--m-link--m-danger--m-clicked__icon--Color);
|
353
|
-
--pf-v5-c-button--m-danger--BackgroundColor: transparent;
|
354
|
-
--pf-v5-c-button--m-danger--hover--BackgroundColor: transparent;
|
355
|
-
--pf-v5-c-button--m-danger--m-clicked--BackgroundColor: transparent;
|
356
370
|
}
|
357
371
|
.pf-v5-c-button.pf-m-link.pf-m-display-lg {
|
358
372
|
--pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-link--m-display-lg--FontSize);
|
@@ -397,7 +411,7 @@
|
|
397
411
|
--pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-control--m-clicked--BackgroundColor);
|
398
412
|
--pf-v5-c-button--m-clicked--BorderColor: var(--pf-v5-c-button--m-control--m-clicked--BorderColor);
|
399
413
|
--pf-v5-c-button--m-clicked--BorderWidth: var(--pf-v5-c-button--m-control--m-clicked--BorderWidth);
|
400
|
-
--pf-v5-c-button--m-
|
414
|
+
--pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-control--m-clicked__icon--Color);
|
401
415
|
}
|
402
416
|
.pf-v5-c-button.pf-m-stateful {
|
403
417
|
--pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-stateful--BorderRadius);
|
@@ -435,24 +449,26 @@
|
|
435
449
|
--pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-attention--m-clicked__icon--Color);
|
436
450
|
}
|
437
451
|
.pf-v5-c-button.pf-m-plain {
|
452
|
+
--pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-plain--BorderRadius);
|
453
|
+
--pf-v5-c-button--Color: var(--pf-v5-c-button--m-plain--Color);
|
454
|
+
--pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-plain--BackgroundColor);
|
438
455
|
--pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-plain--PaddingTop);
|
439
456
|
--pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-plain--PaddingRight);
|
440
457
|
--pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-plain--PaddingBottom);
|
441
458
|
--pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-plain--PaddingLeft);
|
442
|
-
--pf-v5-c-
|
443
|
-
--pf-v5-c-button--m-small--PaddingTop: var(--pf-v5-c-button--m-plain--m-small--PaddingTop);
|
444
|
-
--pf-v5-c-button--m-small--PaddingRight: var(--pf-v5-c-button--m-plain--m-small--PaddingRight);
|
445
|
-
--pf-v5-c-button--m-small--PaddingBottom: var(--pf-v5-c-button--m-plain--m-small--PaddingBottom);
|
446
|
-
--pf-v5-c-button--m-small--PaddingLeft: var(--pf-v5-c-button--m-plain--m-small--PaddingLeft);
|
447
|
-
--pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-plain--BorderRadius);
|
448
|
-
--pf-v5-c-button--Color: var(--pf-v5-c-button--m-plain--Color);
|
449
|
-
--pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-plain--BackgroundColor);
|
459
|
+
--pf-v5-c-button__progress--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
|
450
460
|
--pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-plain--hover--Color);
|
451
461
|
--pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
|
462
|
+
--pf-v5-c-button--hover--MixBlendMode: var(--pf-v5-c-button--m-plain--hover--MixBlendMode);
|
452
463
|
--pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-plain--m-clicked--Color);
|
453
464
|
--pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-plain--m-clicked--BackgroundColor);
|
465
|
+
--pf-v5-c-button--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-plain--m-clicked--MixBlendMode);
|
454
466
|
--pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-plain--disabled--Color);
|
455
|
-
--pf-v5-c-
|
467
|
+
--pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-plain--disabled--BackgroundColor);
|
468
|
+
--pf-v5-c-button--m-small--PaddingTop: var(--pf-v5-c-button--m-plain--m-small--PaddingTop);
|
469
|
+
--pf-v5-c-button--m-small--PaddingRight: var(--pf-v5-c-button--m-plain--m-small--PaddingRight);
|
470
|
+
--pf-v5-c-button--m-small--PaddingBottom: var(--pf-v5-c-button--m-plain--m-small--PaddingBottom);
|
471
|
+
--pf-v5-c-button--m-small--PaddingLeft: var(--pf-v5-c-button--m-plain--m-small--PaddingLeft);
|
456
472
|
min-width: var(--pf-v5-c-button--m-plain--MinWidth);
|
457
473
|
}
|
458
474
|
.pf-v5-c-button.pf-m-plain.pf-m-no-padding {
|
@@ -463,7 +479,8 @@
|
|
463
479
|
--pf-v5-c-button--m-plain--PaddingRight: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingRight);
|
464
480
|
--pf-v5-c-button--m-plain--PaddingBottom: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingBottom);
|
465
481
|
--pf-v5-c-button--m-plain--PaddingLeft: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingLeft);
|
466
|
-
--pf-v5-c-button--m-plain--MixBlendMode: var(--pf-v5-c-button--m-plain--m-no-padding--MixBlendMode);
|
482
|
+
--pf-v5-c-button--m-plain--hover--MixBlendMode: var(--pf-v5-c-button--m-plain--m-no-padding--hover--MixBlendMode);
|
483
|
+
--pf-v5-c-button--m-plain--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-plain--m-no-padding--m-clicked--MixBlendMode);
|
467
484
|
min-width: var(--pf-v5-c-button--m-plain--m-no-padding--MinWidth);
|
468
485
|
}
|
469
486
|
.pf-v5-c-button.pf-m-block {
|
@@ -489,6 +506,7 @@
|
|
489
506
|
--pf-v5-c-button--BorderColor: var(--pf-v5-c-button--hover--BorderColor);
|
490
507
|
--pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--hover--BorderWidth);
|
491
508
|
--pf-v5-c-button--TextDecoration: var(--pf-v5-c-button--hover--TextDecoration);
|
509
|
+
--pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--hover--MixBlendMode);
|
492
510
|
--pf-v5-c-button__icon--Color: var(--pf-v5-c-button--hover__icon--Color);
|
493
511
|
}
|
494
512
|
.pf-v5-c-button.pf-m-clicked {
|
@@ -496,6 +514,7 @@
|
|
496
514
|
--pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-clicked--BackgroundColor);
|
497
515
|
--pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--m-clicked--BorderWidth);
|
498
516
|
--pf-v5-c-button--BorderColor: var(--pf-v5-c-button--m-clicked--BorderColor);
|
517
|
+
--pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-clicked--MixBlendMode);
|
499
518
|
--pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-clicked__icon--Color);
|
500
519
|
}
|
501
520
|
.pf-v5-c-button:disabled, .pf-v5-c-button.pf-m-disabled {
|
@@ -505,6 +524,7 @@
|
|
505
524
|
--pf-v5-c-badge--m-unread--Color: var(--pf-v5-c-button--disabled__c-badge--Color);
|
506
525
|
--pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-c-button--disabled__c-badge--BackgroundColor);
|
507
526
|
--pf-v5-c-button--m-primary__c-badge--BorderWidth: 0;
|
527
|
+
--pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--disabled--MixBlendMode);
|
508
528
|
color: var(--pf-v5-c-button--disabled--Color);
|
509
529
|
background-color: var(--pf-v5-c-button--disabled--BackgroundColor);
|
510
530
|
}
|
@@ -1,70 +1,65 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
--pf-v5-
|
4
|
-
--pf-v5-
|
5
|
-
--pf-v5-
|
6
|
-
--pf-v5-
|
7
|
-
--pf-v5-
|
8
|
-
--pf-v5-
|
9
|
-
--pf-v5-
|
10
|
-
--pf-v5-
|
11
|
-
|
12
|
-
|
13
|
-
.pf-v5-c-calendar-month {
|
14
|
-
--pf-v5-c-calendar-month--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
|
15
|
-
--pf-v5-c-calendar-month--PaddingTop: var(--pf-v5-global--spacer--lg);
|
16
|
-
--pf-v5-c-calendar-month--PaddingRight: var(--pf-v5-global--spacer--lg);
|
17
|
-
--pf-v5-c-calendar-month--PaddingBottom: var(--pf-v5-global--spacer--md);
|
18
|
-
--pf-v5-c-calendar-month--PaddingLeft: var(--pf-v5-global--spacer--lg);
|
19
|
-
--pf-v5-c-calendar-month--FontSize: var(--pf-v5-global--FontSize--sm);
|
20
|
-
--pf-v5-c-calendar-month__header--MarginBottom: var(--pf-v5-global--spacer--md);
|
21
|
-
--pf-v5-c-calendar-month__header-year--Width: 8.5ch;
|
1
|
+
:where(:root),
|
2
|
+
:where(.pf-v5-c-calendar-month) {
|
3
|
+
--pf-v5-c-calendar-month--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
4
|
+
--pf-v5-c-calendar-month--PaddingTop: var(--pf-t--global--spacer--lg);
|
5
|
+
--pf-v5-c-calendar-month--PaddingRight: var(--pf-t--global--spacer--lg);
|
6
|
+
--pf-v5-c-calendar-month--PaddingBottom: var(--pf-t--global--spacer--md);
|
7
|
+
--pf-v5-c-calendar-month--PaddingLeft: var(--pf-t--global--spacer--lg);
|
8
|
+
--pf-v5-c-calendar-month--FontSize: var(--pf-t--global--font--size--sm);
|
9
|
+
--pf-v5-c-calendar-month__header--MarginBottom: var(--pf-t--global--spacer--md);
|
10
|
+
--pf-v5-c-calendar-month__header--Gap: var(--pf-t--global--spacer--xs);
|
11
|
+
--pf-v5-c-calendar-month__header-year--Width: 9ch;
|
22
12
|
--pf-v5-c-calendar-month__header-nav-control--MarginRight: 0;
|
23
13
|
--pf-v5-c-calendar-month__header-nav-control--MarginLeft: 0;
|
24
|
-
--pf-v5-c-calendar-
|
25
|
-
--pf-v5-c-calendar-
|
26
|
-
--pf-v5-c-calendar-
|
27
|
-
--pf-v5-c-calendar-
|
28
|
-
--pf-v5-c-calendar-
|
29
|
-
--pf-v5-c-calendar-month__days--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
|
30
|
-
--pf-v5-c-calendar-month__day--PaddingBottom: var(--pf-v5-global--spacer--md);
|
31
|
-
--pf-v5-c-calendar-month__day--FontWeight: var(--pf-v5-global--FontWeight--normal);
|
14
|
+
--pf-v5-c-calendar-month__days--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
|
15
|
+
--pf-v5-c-calendar-month__days--BorderBottomColor: var(--pf-t--global--border--color--default);
|
16
|
+
--pf-v5-c-calendar-month__day--PaddingBottom: var(--pf-t--global--spacer--md);
|
17
|
+
--pf-v5-c-calendar-month__day--FontWeight: var(--pf-t--global--font--weight--body);
|
18
|
+
--pf-v5-c-calendar-month__day--Color: var(--pf-t--global--text--color--regular);
|
32
19
|
--pf-v5-c-calendar-month__dates-cell--PaddingTop: 0.125rem;
|
33
20
|
--pf-v5-c-calendar-month__dates-cell--PaddingRight: 0.125rem;
|
34
21
|
--pf-v5-c-calendar-month__dates-cell--PaddingBottom: 0.125rem;
|
35
22
|
--pf-v5-c-calendar-month__dates-cell--PaddingLeft: 0.125rem;
|
36
|
-
--pf-v5-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop: var(--pf-
|
37
|
-
--pf-v5-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-
|
38
|
-
--pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-
|
39
|
-
--pf-v5-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-
|
40
|
-
--pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-
|
41
|
-
--pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor: var(--pf-
|
42
|
-
--pf-v5-c-calendar-month__dates-cell--m-selected__date--
|
43
|
-
--pf-v5-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-v5-global--Color--light-100);
|
23
|
+
--pf-v5-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop: var(--pf-t--global--spacer--sm);
|
24
|
+
--pf-v5-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
25
|
+
--pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-t--global--color--brand--default);
|
26
|
+
--pf-v5-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-t--global--color--brand--default);
|
27
|
+
--pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
|
28
|
+
--pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor: var(--pf-t--global--border--color--brand--default);
|
29
|
+
--pf-v5-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-t--global--text--color--on-brand--default);
|
44
30
|
--pf-v5-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
|
45
31
|
--pf-v5-c-calendar-month__dates-cell--before--Top: 0;
|
46
32
|
--pf-v5-c-calendar-month__dates-cell--before--Right: 0;
|
47
33
|
--pf-v5-c-calendar-month__dates-cell--before--Bottom: var(--pf-v5-c-calendar-month__dates-cell--PaddingBottom);
|
48
34
|
--pf-v5-c-calendar-month__dates-cell--before--Left: 0;
|
49
|
-
--pf-v5-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-
|
35
|
+
--pf-v5-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
50
36
|
--pf-v5-c-calendar-month__dates-cell--m-in-range--m-start-range--before--Left: 50%;
|
51
37
|
--pf-v5-c-calendar-month__dates-cell--m-in-range--m-end-range--before--Right: 50%;
|
52
|
-
--pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-
|
53
|
-
--pf-v5-c-calendar-month__dates-cell--m-in-range__date--
|
54
|
-
--pf-v5-c-calendar-month__dates-cell--m-
|
38
|
+
--pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
39
|
+
--pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BorderWidth: var(--pf-t--global--border--width--regular);
|
40
|
+
--pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BorderColor: var(--pf-t--global--border--color--hover);
|
41
|
+
--pf-v5-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
42
|
+
--pf-v5-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-t--global--text--color--subtle);
|
55
43
|
--pf-v5-c-calendar-month__date--Width: 4ch;
|
56
44
|
--pf-v5-c-calendar-month__date--Height: 4ch;
|
57
|
-
--pf-v5-c-calendar-month__date--BorderRadius: var(--pf-
|
58
|
-
--pf-v5-c-calendar-month__date--Color: var(--pf-
|
45
|
+
--pf-v5-c-calendar-month__date--BorderRadius: var(--pf-t--global--border--radius--large);
|
46
|
+
--pf-v5-c-calendar-month__date--Color: var(--pf-t--global--text--color--regular);
|
59
47
|
--pf-v5-c-calendar-month__date--BackgroundColor: transparent;
|
60
|
-
--pf-v5-c-calendar-month__date--disabled--
|
61
|
-
--pf-v5-c-calendar-month__date--
|
48
|
+
--pf-v5-c-calendar-month__date--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
49
|
+
--pf-v5-c-calendar-month__date--disabled--Color: var(--pf-t--global--text--color--on-disabled);
|
50
|
+
--pf-v5-c-calendar-month__date--after--BorderWidth: var(--pf-t--global--border--width--regular);
|
62
51
|
--pf-v5-c-calendar-month__date--after--BorderColor: transparent;
|
63
|
-
--pf-v5-c-calendar-month__date--
|
64
|
-
--pf-v5-c-calendar-month__date--
|
65
|
-
--pf-v5-c-calendar-month__date--
|
66
|
-
--pf-v5-c-calendar-month__date--
|
67
|
-
|
52
|
+
--pf-v5-c-calendar-month__date--after--OutlineOffset: 0;
|
53
|
+
--pf-v5-c-calendar-month__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
54
|
+
--pf-v5-c-calendar-month__date--hover--BorderWidth: var(--pf-t--global--border--width--regular);
|
55
|
+
--pf-v5-c-calendar-month__date--hover--BorderColor: var(--pf-t--global--border--color--hover);
|
56
|
+
--pf-v5-c-calendar-month__date--focus--Color: var(--pf-t--global--icon--color--on-brand--clicked);
|
57
|
+
--pf-v5-c-calendar-month__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
|
58
|
+
--pf-v5-c-calendar-month__date--focus--after--BorderColor: var(--pf-t--global--border--color--hover);
|
59
|
+
--pf-v5-c-calendar-month__date--after--focus--OutlineOffset: -2px;
|
60
|
+
}
|
61
|
+
|
62
|
+
:where(.pf-v5-c-calendar-month) {
|
68
63
|
display: inline-flex;
|
69
64
|
flex-direction: column;
|
70
65
|
padding-block-start: var(--pf-v5-c-calendar-month--PaddingTop);
|
@@ -77,6 +72,7 @@
|
|
77
72
|
|
78
73
|
.pf-v5-c-calendar-month__header {
|
79
74
|
display: flex;
|
75
|
+
gap: var(--pf-v5-c-calendar-month__header--Gap);
|
80
76
|
margin-block-end: var(--pf-v5-c-calendar-month__header--MarginBottom);
|
81
77
|
}
|
82
78
|
|
@@ -88,18 +84,12 @@
|
|
88
84
|
scale: -1 1;
|
89
85
|
}
|
90
86
|
|
91
|
-
.pf-v5-c-calendar-month__header-nav-control.pf-m-prev-month {
|
92
|
-
--pf-v5-c-calendar-month__header-nav-control--MarginRight: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginRight);
|
93
|
-
--pf-v5-c-calendar-month__header-nav-control--MarginLeft: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginLeft);
|
94
|
-
}
|
95
|
-
.pf-v5-c-calendar-month__header-nav-control.pf-m-next-month {
|
96
|
-
--pf-v5-c-calendar-month__header-nav-control--MarginRight: var(--pf-v5-c-calendar-month__header-nav-control--m-next-month--MarginRight);
|
97
|
-
--pf-v5-c-calendar-month__header-nav-control--MarginLeft: var(--pf-v5-c-calendar-month__header-nav-control--m-next-month--MarginLeft);
|
98
|
-
}
|
99
|
-
|
100
87
|
.pf-v5-c-calendar-month__header-month {
|
101
88
|
flex-grow: 1;
|
102
89
|
}
|
90
|
+
.pf-v5-c-calendar-month__header-month > .pf-v5-c-menu-toggle {
|
91
|
+
width: 100%;
|
92
|
+
}
|
103
93
|
|
104
94
|
.pf-v5-c-calendar-month__header-year {
|
105
95
|
width: var(--pf-v5-c-calendar-month__header-year--Width);
|
@@ -110,6 +100,7 @@
|
|
110
100
|
}
|
111
101
|
|
112
102
|
.pf-v5-c-calendar-month__days {
|
103
|
+
color: var(--pf-v5-c-calendar-month__day--Color);
|
113
104
|
border-block-end: var(--pf-v5-c-calendar-month__days--BorderBottomWidth) solid var(--pf-v5-c-calendar-month__days--BorderBottomColor);
|
114
105
|
}
|
115
106
|
|
@@ -147,6 +138,8 @@
|
|
147
138
|
.pf-v5-c-calendar-month__dates-cell.pf-m-in-range {
|
148
139
|
--pf-v5-c-calendar-month__dates-cell--before--BackgroundColor: var(--pf-v5-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor);
|
149
140
|
--pf-v5-c-calendar-month__date--hover--BackgroundColor: var(--pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor);
|
141
|
+
--pf-v5-c-calendar-month__date--hover--BorderWidth: var(--pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BorderWidth);
|
142
|
+
--pf-v5-c-calendar-month__date--hover--BorderColor: var(--pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BorderColor);
|
150
143
|
--pf-v5-c-calendar-month__date--focus--BackgroundColor: var(--pf-v5-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor);
|
151
144
|
}
|
152
145
|
.pf-v5-c-calendar-month__dates-cell.pf-m-start-range {
|
@@ -160,11 +153,12 @@
|
|
160
153
|
}
|
161
154
|
.pf-v5-c-calendar-month__dates-cell.pf-m-selected {
|
162
155
|
--pf-v5-c-calendar-month__date--BackgroundColor: var(--pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor);
|
156
|
+
--pf-v5-c-calendar-month__date--Color: var(--pf-v5-c-calendar-month__dates-cell--m-selected__date--Color);
|
163
157
|
--pf-v5-c-calendar-month__date--hover--BackgroundColor: var(--pf-v5-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor);
|
158
|
+
--pf-v5-c-calendar-month__date--hover--BorderWidth: 0;
|
164
159
|
--pf-v5-c-calendar-month__date--focus--BackgroundColor: var(--pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor);
|
165
160
|
--pf-v5-c-calendar-month__date--focus--after--BorderColor: var(--pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor);
|
166
|
-
--pf-v5-c-calendar-month__date--
|
167
|
-
--pf-v5-c-calendar-month__date--Color: var(--pf-v5-c-calendar-month__dates-cell--m-selected__date--Color);
|
161
|
+
--pf-v5-c-calendar-month__date--after--OutlineOffset: var(--pf-v5-c-calendar-month__date--after--focus--OutlineOffset);
|
168
162
|
}
|
169
163
|
.pf-v5-c-calendar-month__dates-cell.pf-m-disabled {
|
170
164
|
--pf-v5-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
|
@@ -185,10 +179,10 @@
|
|
185
179
|
}
|
186
180
|
.pf-v5-c-calendar-month__date::after {
|
187
181
|
position: absolute;
|
188
|
-
inset-block-start:
|
189
|
-
inset-block-end:
|
190
|
-
inset-inline-start:
|
191
|
-
inset-inline-end:
|
182
|
+
inset-block-start: var(--pf-v5-c-calendar-month__date--after--OutlineOffset);
|
183
|
+
inset-block-end: var(--pf-v5-c-calendar-month__date--after--OutlineOffset);
|
184
|
+
inset-inline-start: var(--pf-v5-c-calendar-month__date--after--OutlineOffset);
|
185
|
+
inset-inline-end: var(--pf-v5-c-calendar-month__date--after--OutlineOffset);
|
192
186
|
content: "";
|
193
187
|
border: var(--pf-v5-c-calendar-month__date--after--BorderWidth) solid var(--pf-v5-c-calendar-month__date--after--BorderColor);
|
194
188
|
}
|
@@ -197,40 +191,15 @@
|
|
197
191
|
}
|
198
192
|
.pf-v5-c-calendar-month__date:hover, .pf-v5-c-calendar-month__date.pf-m-hover {
|
199
193
|
--pf-v5-c-calendar-month__date--BackgroundColor: var(--pf-v5-c-calendar-month__date--hover--BackgroundColor);
|
194
|
+
border: var(--pf-v5-c-calendar-month__date--hover--BorderColor) solid var(--pf-v5-c-calendar-month__date--hover--BorderWidth);
|
200
195
|
}
|
201
196
|
.pf-v5-c-calendar-month__date:focus, .pf-v5-c-calendar-month__date.pf-m-focus {
|
202
|
-
--pf-v5-c-calendar-month__date--BackgroundColor: var(--pf-v5-c-calendar-month__date--focus--BackgroundColor);
|
203
197
|
--pf-v5-c-calendar-month__date--after--BorderColor: var(--pf-v5-c-calendar-month__date--focus--after--BorderColor);
|
204
198
|
outline: 0;
|
205
|
-
box-shadow: var(--pf-v5-c-calendar-month__date--focus--BoxShadow);
|
206
199
|
}
|
207
200
|
.pf-v5-c-calendar-month__date:disabled {
|
201
|
+
--pf-v5-c-calendar-month__date--BackgroundColor: var(--pf-v5-c-calendar-month__date--disabled--BackgroundColor);
|
208
202
|
--pf-v5-c-calendar-month__date--Color: var(--pf-v5-c-calendar-month__date--disabled--Color);
|
209
203
|
--pf-v5-c-calendar-month__date--hover--focus--BorderColor: transparent;
|
210
204
|
pointer-events: none;
|
211
|
-
}
|
212
|
-
|
213
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-calendar-month {
|
214
|
-
--pf-v5-c-calendar-month--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
215
|
-
--pf-v5-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-v5-global--palette--black-500);
|
216
|
-
--pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-v5-global--primary-color--300);
|
217
|
-
--pf-v5-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-v5-global--primary-color--400);
|
218
|
-
--pf-v5-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-v5-global--palette--black-900);
|
219
|
-
--pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-v5-global--palette--blue-400);
|
220
|
-
--pf-v5-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
|
221
|
-
--pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
|
222
|
-
--pf-v5-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
|
223
|
-
--pf-v5-c-calendar-month__date--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
|
224
|
-
--pf-v5-c-calendar-month__date--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
|
225
|
-
--pf-v5-c-calendar-month__date--focus--after--BorderColor: transparent;
|
226
|
-
}
|
227
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-calendar-month__date:hover, :where(.pf-v5-theme-dark) .pf-v5-c-calendar-month__date.pf-m-hover {
|
228
|
-
--pf-v5-c-calendar-month__date--after--BorderColor: var(--pf-v5-global--BorderColor--100);
|
229
|
-
--pf-v5-c-calendar-month__date--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
|
230
|
-
}
|
231
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-calendar-month__date:focus, :where(.pf-v5-theme-dark) .pf-v5-c-calendar-month__date.pf-m-focus {
|
232
|
-
--pf-v5-c-calendar-month__date--after--BorderColor: var(--pf-v5-global--active-color--100);
|
233
|
-
--pf-v5-c-calendar-month__date--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
|
234
|
-
--pf-v5-c-calendar-month__date--BackgroundColor: var(--pf-v5-global--primary-color--300);
|
235
|
-
--pf-v5-c-calendar-month__date--Color: var(--pf-v5-global--primary-color--400);
|
236
205
|
}
|
@@ -12,9 +12,8 @@ declare const _default: {
|
|
12
12
|
"calendarMonthHeaderNavControl": "pf-v5-c-calendar-month__header-nav-control",
|
13
13
|
"calendarMonthHeaderYear": "pf-v5-c-calendar-month__header-year",
|
14
14
|
"dirRtl": "pf-v5-m-dir-rtl",
|
15
|
+
"menuToggle": "pf-v5-c-menu-toggle",
|
15
16
|
"modifiers": {
|
16
|
-
"prevMonth": "pf-m-prev-month",
|
17
|
-
"nextMonth": "pf-m-next-month",
|
18
17
|
"current": "pf-m-current",
|
19
18
|
"inRange": "pf-m-in-range",
|
20
19
|
"startRange": "pf-m-start-range",
|
@@ -24,7 +23,6 @@ declare const _default: {
|
|
24
23
|
"disabled": "pf-m-disabled",
|
25
24
|
"hover": "pf-m-hover",
|
26
25
|
"focus": "pf-m-focus"
|
27
|
-
}
|
28
|
-
"themeDark": "pf-v5-theme-dark"
|
26
|
+
}
|
29
27
|
};
|
30
28
|
export default _default;
|
@@ -14,9 +14,8 @@ exports.default = {
|
|
14
14
|
"calendarMonthHeaderNavControl": "pf-v5-c-calendar-month__header-nav-control",
|
15
15
|
"calendarMonthHeaderYear": "pf-v5-c-calendar-month__header-year",
|
16
16
|
"dirRtl": "pf-v5-m-dir-rtl",
|
17
|
+
"menuToggle": "pf-v5-c-menu-toggle",
|
17
18
|
"modifiers": {
|
18
|
-
"prevMonth": "pf-m-prev-month",
|
19
|
-
"nextMonth": "pf-m-next-month",
|
20
19
|
"current": "pf-m-current",
|
21
20
|
"inRange": "pf-m-in-range",
|
22
21
|
"startRange": "pf-m-start-range",
|
@@ -26,6 +25,5 @@ exports.default = {
|
|
26
25
|
"disabled": "pf-m-disabled",
|
27
26
|
"hover": "pf-m-hover",
|
28
27
|
"focus": "pf-m-focus"
|
29
|
-
}
|
30
|
-
"themeDark": "pf-v5-theme-dark"
|
28
|
+
}
|
31
29
|
};
|
@@ -12,9 +12,8 @@ export default {
|
|
12
12
|
"calendarMonthHeaderNavControl": "pf-v5-c-calendar-month__header-nav-control",
|
13
13
|
"calendarMonthHeaderYear": "pf-v5-c-calendar-month__header-year",
|
14
14
|
"dirRtl": "pf-v5-m-dir-rtl",
|
15
|
+
"menuToggle": "pf-v5-c-menu-toggle",
|
15
16
|
"modifiers": {
|
16
|
-
"prevMonth": "pf-m-prev-month",
|
17
|
-
"nextMonth": "pf-m-next-month",
|
18
17
|
"current": "pf-m-current",
|
19
18
|
"inRange": "pf-m-in-range",
|
20
19
|
"startRange": "pf-m-start-range",
|
@@ -24,6 +23,5 @@ export default {
|
|
24
23
|
"disabled": "pf-m-disabled",
|
25
24
|
"hover": "pf-m-hover",
|
26
25
|
"focus": "pf-m-focus"
|
27
|
-
}
|
28
|
-
"themeDark": "pf-v5-theme-dark"
|
26
|
+
}
|
29
27
|
};
|
@@ -3,6 +3,8 @@
|
|
3
3
|
--pf-v5-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
|
4
4
|
--pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
|
5
5
|
--pf-v5-c-code-block__header--BorderBottomColor: var(--pf-t--global--border--color--default);
|
6
|
+
--pf-v5-c-code-block__header--PaddingTop: var(--pf-t--global--spacer--xs);
|
7
|
+
--pf-v5-c-code-block__header--PaddingBottom: var(--pf-t--global--spacer--xs);
|
6
8
|
--pf-v5-c-code-block__header--PaddingRight: var(--pf-t--global--spacer--sm);
|
7
9
|
--pf-v5-c-code-block__header--PaddingLeft: var(--pf-t--global--spacer--sm);
|
8
10
|
--pf-v5-c-code-block__content--PaddingTop: var(--pf-t--global--spacer--md);
|
@@ -20,6 +22,8 @@
|
|
20
22
|
|
21
23
|
.pf-v5-c-code-block__header {
|
22
24
|
display: flex;
|
25
|
+
padding-block-start: var(--pf-v5-c-code-block__header--PaddingTop);
|
26
|
+
padding-block-end: var(--pf-v5-c-code-block__header--PaddingBottom);
|
23
27
|
padding-inline-start: var(--pf-v5-c-code-block__header--PaddingLeft);
|
24
28
|
padding-inline-end: var(--pf-v5-c-code-block__header--PaddingRight);
|
25
29
|
border-block-end: var(--pf-v5-c-code-block__header--BorderBottomWidth) solid var(--pf-v5-c-code-block__header--BorderBottomColor);
|