@patternfly/react-styles 6.0.0-alpha.11 → 6.0.0-alpha.13
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +10 -0
- package/css/components/Accordion/accordion.css +1 -1
- package/css/components/Alert/alert.css +2 -0
- package/css/components/Breadcrumb/breadcrumb.css +9 -1
- package/css/components/Button/button.css +44 -46
- 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/DataList/data-list.css +1 -1
- 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 +54 -51
- 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/Form/form.css +3 -7
- package/css/components/FormControl/form-control.css +6 -6
- package/css/components/Icon/icon.css +27 -27
- package/css/components/Label/label-group.css +1 -1
- package/css/components/Label/label.css +18 -14
- package/css/components/Login/login.css +5 -22
- package/css/components/Login/login.d.ts +1 -1
- package/css/components/Login/login.js +1 -1
- package/css/components/Login/login.mjs +1 -1
- package/css/components/Menu/menu.css +387 -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 +219 -272
- 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/NotificationBadge/notification-badge.css +4 -4
- package/css/components/Pagination/pagination.css +3 -13
- 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/SimpleList/simple-list.css +0 -3
- package/css/components/Table/table-grid.css +31 -47
- package/css/components/Table/table-scrollable.css +6 -6
- package/css/components/Table/table-tree-view.css +81 -74
- package/css/components/Table/table-tree-view.d.ts +1 -0
- package/css/components/Table/table-tree-view.js +1 -0
- package/css/components/Table/table-tree-view.mjs +1 -0
- package/css/components/Table/table.css +156 -255
- package/css/components/Table/table.d.ts +0 -1
- package/css/components/Table/table.js +0 -1
- package/css/components/Table/table.mjs +0 -1
- package/css/components/Tabs/tabs.css +1 -2
- 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 +122 -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,16 @@
|
|
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.13 (2024-02-21)
|
7
|
+
|
8
|
+
**Note:** Version bump only for package @patternfly/react-styles
|
9
|
+
|
10
|
+
# 6.0.0-alpha.12 (2024-02-16)
|
11
|
+
|
12
|
+
### Features
|
13
|
+
|
14
|
+
- **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))
|
15
|
+
|
6
16
|
# 6.0.0-alpha.11 (2024-01-31)
|
7
17
|
|
8
18
|
### Features
|
@@ -2,7 +2,7 @@
|
|
2
2
|
--pf-v5-c-accordion--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
3
3
|
--pf-v5-c-accordion--RowGap: var(--pf-t--global--spacer--xs);
|
4
4
|
--pf-v5-c-accordion__item--BorderRadius: var(--pf-t--global--border--radius--200);
|
5
|
-
--pf-v5-c-accordion__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--
|
5
|
+
--pf-v5-c-accordion__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
6
6
|
--pf-v5-c-accordion__toggle--ColumnGap: var(--pf-t--global--spacer--sm);
|
7
7
|
--pf-v5-c-accordion__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
|
8
8
|
--pf-v5-c-accordion__toggle--PaddingRight: var(--pf-t--global--spacer--md);
|
@@ -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;
|
@@ -14,14 +14,13 @@
|
|
14
14
|
--pf-v5-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
|
15
15
|
--pf-v5-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
|
16
16
|
--pf-v5-c-button--TextDecoration: none;
|
17
|
-
--pf-v5-c-button--MixBlendMode: normal;
|
18
17
|
--pf-v5-c-button--hover--BackgroundColor: transparent;
|
19
18
|
--pf-v5-c-button--hover--BorderColor: transparent;
|
20
19
|
--pf-v5-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
|
21
20
|
--pf-v5-c-button--hover--TextDecoration: none;
|
22
21
|
--pf-v5-c-button--m-clicked--BackgroundColor: transparent;
|
23
22
|
--pf-v5-c-button--m-clicked--BorderColor: transparent;
|
24
|
-
--pf-v5-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--button--
|
23
|
+
--pf-v5-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--button--clicked);
|
25
24
|
--pf-v5-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
|
26
25
|
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
|
27
26
|
--pf-v5-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
|
@@ -63,7 +62,6 @@
|
|
63
62
|
--pf-v5-c-button--m-link--PaddingLeft: var(--pf-t--global--spacer--md);
|
64
63
|
--pf-v5-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
|
65
64
|
--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);
|
67
65
|
--pf-v5-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
|
68
66
|
--pf-v5-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
|
69
67
|
--pf-v5-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
@@ -72,19 +70,22 @@
|
|
72
70
|
--pf-v5-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
73
71
|
--pf-v5-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
|
74
72
|
--pf-v5-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
|
73
|
+
--pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
75
74
|
--pf-v5-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
|
76
75
|
--pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
|
76
|
+
--pf-v5-c-button--m-link--m-danger--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
77
77
|
--pf-v5-c-button--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
|
78
78
|
--pf-v5-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
|
79
|
+
--pf-v5-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
79
80
|
--pf-v5-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
|
80
81
|
--pf-v5-c-button--m-link--m-inline--FontSize: initial;
|
81
82
|
--pf-v5-c-button--m-link--m-inline--LineHeight: initial;
|
82
83
|
--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
84
|
--pf-v5-c-button--m-link--m-inline--PaddingTop: 0;
|
85
85
|
--pf-v5-c-button--m-link--m-inline--PaddingRight: 0;
|
86
86
|
--pf-v5-c-button--m-link--m-inline--PaddingBottom: 0;
|
87
87
|
--pf-v5-c-button--m-link--m-inline--PaddingLeft: 0;
|
88
|
+
--pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
|
88
89
|
--pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
|
89
90
|
--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
91
|
--pf-v5-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
|
@@ -96,18 +97,17 @@
|
|
96
97
|
--pf-v5-c-button--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
|
97
98
|
--pf-v5-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
|
98
99
|
--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);
|
100
100
|
--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
101
|
--pf-v5-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
|
102
102
|
--pf-v5-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
103
103
|
--pf-v5-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
|
104
104
|
--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--
|
105
|
+
--pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
|
106
|
+
--pf-v5-c-button--m-plain--disabled--BackgroundColor: transparent;
|
106
107
|
--pf-v5-c-button--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
|
107
108
|
--pf-v5-c-button--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
|
108
109
|
--pf-v5-c-button--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
|
109
110
|
--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;
|
111
111
|
--pf-v5-c-button--m-plain--m-no-padding--MinWidth: auto;
|
112
112
|
--pf-v5-c-button--m-plain--m-no-padding--PaddingTop: 0;
|
113
113
|
--pf-v5-c-button--m-plain--m-no-padding--PaddingRight: 0;
|
@@ -133,35 +133,35 @@
|
|
133
133
|
--pf-v5-c-button--m-control--m-clicked--Color: var(--pf-t--global--text--color--regular);
|
134
134
|
--pf-v5-c-button--m-control--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
135
135
|
--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--
|
136
|
+
--pf-v5-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
|
137
137
|
--pf-v5-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
|
138
138
|
--pf-v5-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
|
139
139
|
--pf-v5-c-button--m-stateful--PaddingLeft: var(--pf-t--global--spacer--md);
|
140
140
|
--pf-v5-c-button--m-stateful--PaddingRight: var(--pf-t--global--spacer--md);
|
141
141
|
--pf-v5-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
142
142
|
--pf-v5-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
|
143
|
-
--pf-v5-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--
|
143
|
+
--pf-v5-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
144
144
|
--pf-v5-c-button--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
|
145
|
-
--pf-v5-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--
|
145
|
+
--pf-v5-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
146
146
|
--pf-v5-c-button--m-read--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
|
147
|
-
--pf-v5-c-button--m-unread--Color: var(--pf-t--global--text--color--on-
|
148
|
-
--pf-v5-c-button--m-unread--BackgroundColor: var(--pf-t--global--color--
|
149
|
-
--pf-v5-c-button--m-unread__icon--Color: var(--pf-t--global--icon--color--on-
|
150
|
-
--pf-v5-c-button--m-unread--hover--Color: var(--pf-t--global--text--color--on-
|
151
|
-
--pf-v5-c-button--m-unread--hover--BackgroundColor: var(--pf-t--global--color--
|
152
|
-
--pf-v5-c-button--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--on-
|
153
|
-
--pf-v5-c-button--m-unread--m-clicked--Color: var(--pf-t--global--text--color--on-
|
154
|
-
--pf-v5-c-button--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--
|
155
|
-
--pf-v5-c-button--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-
|
156
|
-
--pf-v5-c-button--m-attention--Color: var(--pf-t--global--text--color--status--on-
|
157
|
-
--pf-v5-c-button--m-attention--BackgroundColor: var(--pf-t--global--color--status--
|
158
|
-
--pf-v5-c-button--m-attention__icon--Color: var(--pf-t--global--icon--color--status--on-
|
159
|
-
--pf-v5-c-button--m-attention--hover--Color: var(--pf-t--global--text--color--status--on-
|
160
|
-
--pf-v5-c-button--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--
|
161
|
-
--pf-v5-c-button--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--on-
|
162
|
-
--pf-v5-c-button--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--on-
|
163
|
-
--pf-v5-c-button--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--
|
164
|
-
--pf-v5-c-button--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-
|
147
|
+
--pf-v5-c-button--m-unread--Color: var(--pf-t--global--text--color--status--unread--on-default--default);
|
148
|
+
--pf-v5-c-button--m-unread--BackgroundColor: var(--pf-t--global--color--status--unread--default--default);
|
149
|
+
--pf-v5-c-button--m-unread__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--default);
|
150
|
+
--pf-v5-c-button--m-unread--hover--Color: var(--pf-t--global--text--color--status--unread--on-default--hover);
|
151
|
+
--pf-v5-c-button--m-unread--hover--BackgroundColor: var(--pf-t--global--color--status--unread--default--hover);
|
152
|
+
--pf-v5-c-button--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--hover);
|
153
|
+
--pf-v5-c-button--m-unread--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-default--clicked);
|
154
|
+
--pf-v5-c-button--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--default--clicked);
|
155
|
+
--pf-v5-c-button--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--clicked);
|
156
|
+
--pf-v5-c-button--m-attention--Color: var(--pf-t--global--text--color--status--unread--on-attention--default);
|
157
|
+
--pf-v5-c-button--m-attention--BackgroundColor: var(--pf-t--global--color--status--unread--attention--default);
|
158
|
+
--pf-v5-c-button--m-attention__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--default);
|
159
|
+
--pf-v5-c-button--m-attention--hover--Color: var(--pf-t--global--text--color--status--unread--on-attention--hover);
|
160
|
+
--pf-v5-c-button--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--unread--attention--hover);
|
161
|
+
--pf-v5-c-button--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--hover);
|
162
|
+
--pf-v5-c-button--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-attention--clicked);
|
163
|
+
--pf-v5-c-button--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--attention--clicked);
|
164
|
+
--pf-v5-c-button--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--clicked);
|
165
165
|
--pf-v5-c-button--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
|
166
166
|
--pf-v5-c-button--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
|
167
167
|
--pf-v5-c-button--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
|
@@ -191,9 +191,9 @@
|
|
191
191
|
--pf-v5-c-button--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
|
192
192
|
--pf-v5-c-button--m-small--PaddingLeft: var(--pf-t--global--spacer--md);
|
193
193
|
--pf-v5-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
|
194
|
-
--pf-v5-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
|
195
194
|
--pf-v5-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
196
195
|
--pf-v5-c-button--disabled--BorderColor: transparent;
|
196
|
+
--pf-v5-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
|
197
197
|
--pf-v5-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
|
198
198
|
--pf-v5-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
|
199
199
|
--pf-v5-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
|
@@ -216,7 +216,7 @@
|
|
216
216
|
--pf-v5-c-button--m-in-progress--m-plain__progress--Left: 50%;
|
217
217
|
--pf-v5-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
|
218
218
|
--pf-v5-c-button__count--MarginLeft: var(--pf-v5-global--spacer--sm);
|
219
|
-
--pf-v5-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled
|
219
|
+
--pf-v5-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled);
|
220
220
|
--pf-v5-c-button--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
221
221
|
--pf-v5-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
|
222
222
|
--pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
|
@@ -313,7 +313,6 @@
|
|
313
313
|
--pf-v5-c-button--Color: var(--pf-v5-c-button--m-link--Color);
|
314
314
|
--pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-link--BorderRadius);
|
315
315
|
--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
316
|
--pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-link__icon--Color);
|
318
317
|
--pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-link--hover--Color);
|
319
318
|
--pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-link--hover--BackgroundColor);
|
@@ -343,16 +342,16 @@
|
|
343
342
|
white-space: normal;
|
344
343
|
outline-offset: 0.125rem;
|
345
344
|
}
|
346
|
-
.pf-v5-c-button.pf-m-link
|
345
|
+
.pf-v5-c-button.pf-m-link.pf-m-danger {
|
347
346
|
--pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--Color);
|
347
|
+
--pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--BackgroundColor);
|
348
348
|
--pf-v5-c-button--m-danger__icon--Color: var(--pf-v5-c-button--m-link--m-danger__icon--Color);
|
349
349
|
--pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-c-button--m-link--m-danger--hover--Color);
|
350
|
+
--pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--hover--BackgroundColor);
|
350
351
|
--pf-v5-c-button--m-danger--hover__icon--Color: var(--pf-v5-c-button--m-link--m-danger--hover__icon--Color);
|
351
352
|
--pf-v5-c-button--m-danger--m-clicked--Color: var(--pf-v5-c-button--m-link--m-danger--m-clicked--Color);
|
353
|
+
--pf-v5-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--m-clicked--BackgroundColor);
|
352
354
|
--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
355
|
}
|
357
356
|
.pf-v5-c-button.pf-m-link.pf-m-display-lg {
|
358
357
|
--pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-link--m-display-lg--FontSize);
|
@@ -397,7 +396,7 @@
|
|
397
396
|
--pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-control--m-clicked--BackgroundColor);
|
398
397
|
--pf-v5-c-button--m-clicked--BorderColor: var(--pf-v5-c-button--m-control--m-clicked--BorderColor);
|
399
398
|
--pf-v5-c-button--m-clicked--BorderWidth: var(--pf-v5-c-button--m-control--m-clicked--BorderWidth);
|
400
|
-
--pf-v5-c-button--m-
|
399
|
+
--pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-control--m-clicked__icon--Color);
|
401
400
|
}
|
402
401
|
.pf-v5-c-button.pf-m-stateful {
|
403
402
|
--pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-stateful--BorderRadius);
|
@@ -435,24 +434,24 @@
|
|
435
434
|
--pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-attention--m-clicked__icon--Color);
|
436
435
|
}
|
437
436
|
.pf-v5-c-button.pf-m-plain {
|
437
|
+
--pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-plain--BorderRadius);
|
438
|
+
--pf-v5-c-button--Color: var(--pf-v5-c-button--m-plain--Color);
|
439
|
+
--pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-plain--BackgroundColor);
|
438
440
|
--pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-plain--PaddingTop);
|
439
441
|
--pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-plain--PaddingRight);
|
440
442
|
--pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-plain--PaddingBottom);
|
441
443
|
--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);
|
444
|
+
--pf-v5-c-button__progress--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
|
450
445
|
--pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-plain--hover--Color);
|
451
446
|
--pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
|
452
447
|
--pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-plain--m-clicked--Color);
|
453
448
|
--pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-plain--m-clicked--BackgroundColor);
|
454
449
|
--pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-plain--disabled--Color);
|
455
|
-
--pf-v5-c-
|
450
|
+
--pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-plain--disabled--BackgroundColor);
|
451
|
+
--pf-v5-c-button--m-small--PaddingTop: var(--pf-v5-c-button--m-plain--m-small--PaddingTop);
|
452
|
+
--pf-v5-c-button--m-small--PaddingRight: var(--pf-v5-c-button--m-plain--m-small--PaddingRight);
|
453
|
+
--pf-v5-c-button--m-small--PaddingBottom: var(--pf-v5-c-button--m-plain--m-small--PaddingBottom);
|
454
|
+
--pf-v5-c-button--m-small--PaddingLeft: var(--pf-v5-c-button--m-plain--m-small--PaddingLeft);
|
456
455
|
min-width: var(--pf-v5-c-button--m-plain--MinWidth);
|
457
456
|
}
|
458
457
|
.pf-v5-c-button.pf-m-plain.pf-m-no-padding {
|
@@ -463,7 +462,6 @@
|
|
463
462
|
--pf-v5-c-button--m-plain--PaddingRight: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingRight);
|
464
463
|
--pf-v5-c-button--m-plain--PaddingBottom: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingBottom);
|
465
464
|
--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);
|
467
465
|
min-width: var(--pf-v5-c-button--m-plain--m-no-padding--MinWidth);
|
468
466
|
}
|
469
467
|
.pf-v5-c-button.pf-m-block {
|
@@ -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);
|