@patternfly/react-styles 5.2.0-prerelease.5 → 6.0.0-alpha.2
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +11 -3
- package/css/assets/images/logo__pf--reverse-on-md.svg +1 -1
- package/css/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
- package/css/components/Accordion/accordion.css +1 -10
- package/css/components/Accordion/accordion.d.ts +0 -1
- package/css/components/Accordion/accordion.js +0 -1
- package/css/components/Accordion/accordion.mjs +0 -1
- package/css/components/Alert/alert-group.css +20 -16
- package/css/components/Alert/alert.css +57 -84
- package/css/components/Alert/alert.d.ts +1 -2
- package/css/components/Alert/alert.js +1 -2
- package/css/components/Alert/alert.mjs +1 -2
- package/css/components/Button/button.css +142 -179
- package/css/components/Button/button.d.ts +1 -2
- package/css/components/Button/button.js +1 -2
- package/css/components/Button/button.mjs +1 -2
- package/css/components/Check/check.css +8 -10
- package/css/components/Content/content.css +67 -67
- package/css/components/Drawer/drawer.css +0 -1
- package/css/components/Dropdown/dropdown.css +3 -1
- package/css/components/Dropdown/dropdown.d.ts +1 -0
- package/css/components/Dropdown/dropdown.js +1 -0
- package/css/components/Dropdown/dropdown.mjs +1 -0
- package/css/components/Masthead/masthead.css +49 -103
- package/css/components/Masthead/masthead.d.ts +1 -6
- package/css/components/Masthead/masthead.js +1 -6
- package/css/components/Masthead/masthead.mjs +1 -6
- package/css/components/Menu/menu.css +0 -3
- package/css/components/Menu/menu.d.ts +0 -1
- package/css/components/Menu/menu.js +0 -1
- package/css/components/Menu/menu.mjs +0 -1
- package/css/components/MenuToggle/menu-toggle.css +59 -80
- package/css/components/Nav/nav.css +42 -40
- package/css/components/NotificationBadge/notification-badge.css +56 -81
- package/css/components/NotificationBadge/notification-badge.d.ts +1 -5
- package/css/components/NotificationBadge/notification-badge.js +1 -5
- package/css/components/NotificationBadge/notification-badge.mjs +1 -5
- package/css/components/Page/page.css +110 -209
- package/css/components/Page/page.d.ts +5 -12
- package/css/components/Page/page.js +5 -12
- package/css/components/Page/page.mjs +5 -12
- package/css/components/Radio/radio.css +10 -13
- package/css/components/Switch/switch.css +1 -1
- package/css/components/Table/table-grid.css +8 -8
- package/css/components/Table/table.css +81 -94
- package/css/components/Table/table.d.ts +0 -2
- package/css/components/Table/table.js +0 -2
- package/css/components/Table/table.mjs +0 -2
- package/css/components/Toolbar/toolbar.css +5 -11
- package/css/components/Toolbar/toolbar.d.ts +0 -1
- package/css/components/Toolbar/toolbar.js +0 -1
- package/css/components/Toolbar/toolbar.mjs +0 -1
- package/css/docs/components/Nav/examples/Navigation.css +2 -1
- package/css/docs/components/Page/examples/Page.css +0 -8
- package/css/docs/components/Page/examples/Page.d.ts +0 -7
- package/css/docs/components/Page/examples/Page.js +0 -7
- package/css/docs/components/Page/examples/Page.mjs +0 -7
- package/css/docs/demos/Toolbar/examples/Toolbar.css +0 -10
- package/css/docs/demos/Toolbar/examples/Toolbar.d.ts +1 -6
- package/css/docs/demos/Toolbar/examples/Toolbar.js +1 -6
- package/css/docs/demos/Toolbar/examples/Toolbar.mjs +1 -6
- package/package.json +5 -4
- package/css/assets/images/pf-c-brand__logo-on-lg-white.svg +0 -32
- package/css/assets/images/pf-c-brand__logo-on-md-white.svg +0 -42
- package/css/assets/images/pf-c-brand__logo-on-sm-white.svg +0 -17
- package/css/assets/images/pf-c-brand__logo-on-xl-white.svg +0 -39
- package/css/assets/images/pf_logo_white.hbs +0 -35
- package/css/assets/images/pf_logo_white.svg +0 -38
- package/css/docs/components/Brand/examples/Brand.css +0 -12
- package/css/docs/components/Brand/examples/Brand.d.ts +0 -10
- package/css/docs/components/Brand/examples/Brand.js +0 -11
- package/css/docs/components/Brand/examples/Brand.mjs +0 -9
- package/css/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
- package/css/docs/components/NotificationBadge/examples/NotificationBadge.d.ts +0 -5
- package/css/docs/components/NotificationBadge/examples/NotificationBadge.js +0 -6
- package/css/docs/components/NotificationBadge/examples/NotificationBadge.mjs +0 -4
@@ -1,173 +1,178 @@
|
|
1
1
|
.pf-v5-c-button {
|
2
|
-
--pf-v5-c-button--PaddingTop: var(--pf-
|
3
|
-
--pf-v5-c-button--PaddingRight: var(--pf-
|
4
|
-
--pf-v5-c-button--PaddingBottom: var(--pf-
|
5
|
-
--pf-v5-c-button--PaddingLeft: var(--pf-
|
6
|
-
--pf-v5-c-button--LineHeight: var(--pf-
|
7
|
-
--pf-v5-c-button--FontWeight: var(--pf-
|
8
|
-
--pf-v5-c-button--FontSize: var(--pf-
|
2
|
+
--pf-v5-c-button--PaddingTop: var(--pf-t--global--spacer--sm);
|
3
|
+
--pf-v5-c-button--PaddingRight: var(--pf-t--global--spacer--lg);
|
4
|
+
--pf-v5-c-button--PaddingBottom: var(--pf-t--global--spacer--sm);
|
5
|
+
--pf-v5-c-button--PaddingLeft: var(--pf-t--global--spacer--lg);
|
6
|
+
--pf-v5-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
|
7
|
+
--pf-v5-c-button--FontWeight: var(--pf-t--global--font--weight--body);
|
8
|
+
--pf-v5-c-button--FontSize: var(--pf-t--global--font--size--body--md);
|
9
9
|
--pf-v5-c-button--BackgroundColor: transparent;
|
10
|
-
--pf-v5-c-button--BorderRadius: var(--pf-
|
11
|
-
--pf-v5-c-button--after--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
|
10
|
+
--pf-v5-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
|
12
11
|
--pf-v5-c-button--after--BorderColor: transparent;
|
13
|
-
--pf-v5-c-button--after--BorderWidth: var(--pf-
|
14
|
-
--pf-v5-c-button--hover--after--BorderWidth: var(--pf-
|
15
|
-
--pf-v5-c-button--focus--after--BorderWidth: var(--pf-
|
16
|
-
--pf-v5-c-button--active--after--BorderWidth: var(--pf-
|
17
|
-
--pf-v5-c-button--disabled--Color: var(--pf-
|
18
|
-
--pf-v5-c-button--disabled--BackgroundColor: var(--pf-
|
12
|
+
--pf-v5-c-button--after--BorderWidth: var(--pf-t--global--border--width--button--default);
|
13
|
+
--pf-v5-c-button--hover--after--BorderWidth: var(--pf-t--global--border--width--button--hover);
|
14
|
+
--pf-v5-c-button--focus--after--BorderWidth: var(--pf-t--global--border--width--button--active);
|
15
|
+
--pf-v5-c-button--active--after--BorderWidth: var(--pf-t--global--border--width--button--active);
|
16
|
+
--pf-v5-c-button--disabled--Color: var(--pf-t--global--text--color--disabled--default);
|
17
|
+
--pf-v5-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
19
18
|
--pf-v5-c-button--disabled--after--BorderColor: transparent;
|
20
|
-
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-
|
21
|
-
--pf-v5-c-button--m-primary--Color: var(--pf-
|
22
|
-
--pf-v5-c-button--m-primary--hover--BackgroundColor: var(--pf-
|
23
|
-
--pf-v5-c-button--m-primary--hover--Color: var(--pf-
|
24
|
-
--pf-v5-c-button--m-primary--focus--BackgroundColor: var(--pf-
|
25
|
-
--pf-v5-c-button--m-primary--focus--Color: var(--pf-
|
26
|
-
--pf-v5-c-button--m-primary--active--BackgroundColor: var(--pf-
|
27
|
-
--pf-v5-c-button--m-primary--active--Color: var(--pf-
|
19
|
+
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
|
20
|
+
--pf-v5-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
|
21
|
+
--pf-v5-c-button--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
|
22
|
+
--pf-v5-c-button--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
|
23
|
+
--pf-v5-c-button--m-primary--focus--BackgroundColor: var(--pf-t--global--color--brand--active);
|
24
|
+
--pf-v5-c-button--m-primary--focus--Color: var(--pf-t--global--text--color--on-brand--active);
|
25
|
+
--pf-v5-c-button--m-primary--active--BackgroundColor: var(--pf-t--global--color--brand--active);
|
26
|
+
--pf-v5-c-button--m-primary--active--Color: var(--pf-t--global--text--color--on-brand--active);
|
28
27
|
--pf-v5-c-button--m-secondary--BackgroundColor: transparent;
|
29
|
-
--pf-v5-c-button--m-secondary--after--BorderColor: var(--pf-
|
30
|
-
--pf-v5-c-button--m-secondary--Color: var(--pf-
|
28
|
+
--pf-v5-c-button--m-secondary--after--BorderColor: var(--pf-t--global--border--color--brand--default);
|
29
|
+
--pf-v5-c-button--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
|
31
30
|
--pf-v5-c-button--m-secondary--hover--BackgroundColor: transparent;
|
32
|
-
--pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--pf-
|
33
|
-
--pf-v5-c-button--m-secondary--hover--Color: var(--pf-
|
31
|
+
--pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--pf-t--global--border--color--brand--hover);
|
32
|
+
--pf-v5-c-button--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
|
34
33
|
--pf-v5-c-button--m-secondary--focus--BackgroundColor: transparent;
|
35
|
-
--pf-v5-c-button--m-secondary--focus--after--BorderColor: var(--pf-
|
36
|
-
--pf-v5-c-button--m-secondary--focus--Color: var(--pf-
|
34
|
+
--pf-v5-c-button--m-secondary--focus--after--BorderColor: var(--pf-t--global--border--color--brand--active);
|
35
|
+
--pf-v5-c-button--m-secondary--focus--Color: var(--pf-t--global--text--color--brand--active);
|
37
36
|
--pf-v5-c-button--m-secondary--active--BackgroundColor: transparent;
|
38
|
-
--pf-v5-c-button--m-secondary--active--after--BorderColor: var(--pf-
|
39
|
-
--pf-v5-c-button--m-secondary--active--Color: var(--pf-
|
37
|
+
--pf-v5-c-button--m-secondary--active--after--BorderColor: var(--pf-t--global--border--color--brand--active);
|
38
|
+
--pf-v5-c-button--m-secondary--active--Color: var(--pf-t--global--text--color--brand--active);
|
40
39
|
--pf-v5-c-button--m-secondary--m-danger--BackgroundColor: transparent;
|
41
|
-
--pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-
|
42
|
-
--pf-v5-c-button--m-secondary--m-danger--after--BorderColor: var(--pf-
|
40
|
+
--pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
|
41
|
+
--pf-v5-c-button--m-secondary--m-danger--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
|
43
42
|
--pf-v5-c-button--m-secondary--m-danger--hover--BackgroundColor: transparent;
|
44
|
-
--pf-v5-c-button--m-secondary--m-danger--hover--Color: var(--pf-
|
45
|
-
--pf-v5-c-button--m-secondary--m-danger--hover--after--BorderColor: var(--pf-
|
43
|
+
--pf-v5-c-button--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
|
44
|
+
--pf-v5-c-button--m-secondary--m-danger--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
|
46
45
|
--pf-v5-c-button--m-secondary--m-danger--focus--BackgroundColor: transparent;
|
47
|
-
--pf-v5-c-button--m-secondary--m-danger--focus--Color: var(--pf-
|
48
|
-
--pf-v5-c-button--m-secondary--m-danger--focus--after--BorderColor: var(--pf-
|
46
|
+
--pf-v5-c-button--m-secondary--m-danger--focus--Color: var(--pf-t--global--text--color--status--danger--active);
|
47
|
+
--pf-v5-c-button--m-secondary--m-danger--focus--after--BorderColor: var(--pf-t--global--border--color--status--danger--active);
|
49
48
|
--pf-v5-c-button--m-secondary--m-danger--active--BackgroundColor: transparent;
|
50
|
-
--pf-v5-c-button--m-secondary--m-danger--active--Color: var(--pf-
|
51
|
-
--pf-v5-c-button--m-secondary--m-danger--active--after--BorderColor: var(--pf-
|
49
|
+
--pf-v5-c-button--m-secondary--m-danger--active--Color: var(--pf-t--global--text--color--status--danger--active);
|
50
|
+
--pf-v5-c-button--m-secondary--m-danger--active--after--BorderColor: var(--pf-t--global--border--color--status--danger--active);
|
52
51
|
--pf-v5-c-button--m-tertiary--BackgroundColor: transparent;
|
53
|
-
--pf-v5-c-button--m-tertiary--after--BorderColor: var(--pf-
|
54
|
-
--pf-v5-c-button--m-tertiary--Color: var(--pf-
|
52
|
+
--pf-v5-c-button--m-tertiary--after--BorderColor: var(--pf-t--global--border--color--default);
|
53
|
+
--pf-v5-c-button--m-tertiary--Color: var(--pf-t--global--text--color--regular);
|
55
54
|
--pf-v5-c-button--m-tertiary--hover--BackgroundColor: transparent;
|
56
|
-
--pf-v5-c-button--m-tertiary--hover--after--BorderColor: var(--pf-
|
57
|
-
--pf-v5-c-button--m-tertiary--hover--Color: var(--pf-
|
55
|
+
--pf-v5-c-button--m-tertiary--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
|
56
|
+
--pf-v5-c-button--m-tertiary--hover--Color: var(--pf-t--global--text--color--regular);
|
58
57
|
--pf-v5-c-button--m-tertiary--focus--BackgroundColor: transparent;
|
59
|
-
--pf-v5-c-button--m-tertiary--focus--after--BorderColor: var(--pf-
|
60
|
-
--pf-v5-c-button--m-tertiary--focus--Color: var(--pf-
|
58
|
+
--pf-v5-c-button--m-tertiary--focus--after--BorderColor: var(--pf-t--global--border--color--active);
|
59
|
+
--pf-v5-c-button--m-tertiary--focus--Color: var(--pf-t--global--text--color--regular);
|
61
60
|
--pf-v5-c-button--m-tertiary--active--BackgroundColor: transparent;
|
62
|
-
--pf-v5-c-button--m-tertiary--active--after--BorderColor: var(--pf-
|
63
|
-
--pf-v5-c-button--m-tertiary--active--Color: var(--pf-
|
64
|
-
--pf-v5-c-button--m-warning--BackgroundColor: var(--pf-
|
65
|
-
--pf-v5-c-button--m-warning--Color: var(--pf-
|
66
|
-
--pf-v5-c-button--m-warning--hover--BackgroundColor: var(--pf-
|
67
|
-
--pf-v5-c-button--m-warning--hover--Color: var(--pf-
|
68
|
-
--pf-v5-c-button--m-warning--focus--BackgroundColor: var(--pf-
|
69
|
-
--pf-v5-c-button--m-warning--focus--Color: var(--pf-
|
70
|
-
--pf-v5-c-button--m-warning--active--BackgroundColor: var(--pf-
|
71
|
-
--pf-v5-c-button--m-warning--active--Color: var(--pf-
|
72
|
-
--pf-v5-c-button--m-danger--BackgroundColor: var(--pf-
|
73
|
-
--pf-v5-c-button--m-danger--Color: var(--pf-
|
74
|
-
--pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-
|
75
|
-
--pf-v5-c-button--m-danger--hover--Color: var(--pf-
|
76
|
-
--pf-v5-c-button--m-danger--focus--BackgroundColor: var(--pf-
|
77
|
-
--pf-v5-c-button--m-danger--focus--Color: var(--pf-
|
78
|
-
--pf-v5-c-button--m-danger--active--BackgroundColor: var(--pf-
|
79
|
-
--pf-v5-c-button--m-danger--active--Color: var(--pf-
|
61
|
+
--pf-v5-c-button--m-tertiary--active--after--BorderColor: var(--pf-t--global--border--color--active);
|
62
|
+
--pf-v5-c-button--m-tertiary--active--Color: var(--pf-t--global--text--color--regular);
|
63
|
+
--pf-v5-c-button--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
|
64
|
+
--pf-v5-c-button--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
|
65
|
+
--pf-v5-c-button--m-warning--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
|
66
|
+
--pf-v5-c-button--m-warning--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
|
67
|
+
--pf-v5-c-button--m-warning--focus--BackgroundColor: var(--pf-t--global--color--status--warning--active);
|
68
|
+
--pf-v5-c-button--m-warning--focus--Color: var(--pf-t--global--text--color--status--on-warning--hover);
|
69
|
+
--pf-v5-c-button--m-warning--active--BackgroundColor: var(--pf-t--global--color--status--warning--active);
|
70
|
+
--pf-v5-c-button--m-warning--active--Color: var(--pf-t--global--text--color--status--on-warning--hover);
|
71
|
+
--pf-v5-c-button--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
|
72
|
+
--pf-v5-c-button--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
|
73
|
+
--pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
|
74
|
+
--pf-v5-c-button--m-danger--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
|
75
|
+
--pf-v5-c-button--m-danger--focus--BackgroundColor: var(--pf-t--global--color--status--danger--active);
|
76
|
+
--pf-v5-c-button--m-danger--focus--Color: var(--pf-t--global--text--color--status--on-danger--hover);
|
77
|
+
--pf-v5-c-button--m-danger--active--BackgroundColor: var(--pf-t--global--color--status--danger--active);
|
78
|
+
--pf-v5-c-button--m-danger--active--Color: var(--pf-t--global--text--color--status--on-danger--hover);
|
80
79
|
--pf-v5-c-button--m-link--BackgroundColor: transparent;
|
81
|
-
--pf-v5-c-button--m-link--Color: var(--pf-
|
80
|
+
--pf-v5-c-button--m-link--Color: var(--pf-t--global--text--color--link--default);
|
82
81
|
--pf-v5-c-button--m-link--hover--BackgroundColor: transparent;
|
83
|
-
--pf-v5-c-button--m-link--hover--Color: var(--pf-
|
82
|
+
--pf-v5-c-button--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
|
84
83
|
--pf-v5-c-button--m-link--focus--BackgroundColor: transparent;
|
85
|
-
--pf-v5-c-button--m-link--focus--Color: var(--pf-
|
84
|
+
--pf-v5-c-button--m-link--focus--Color: var(--pf-t--global--text--color--link--hover);
|
86
85
|
--pf-v5-c-button--m-link--active--BackgroundColor: transparent;
|
87
|
-
--pf-v5-c-button--m-link--active--Color: var(--pf-
|
86
|
+
--pf-v5-c-button--m-link--active--Color: var(--pf-t--global--text--color--link--hover);
|
88
87
|
--pf-v5-c-button--m-link--disabled--BackgroundColor: transparent;
|
89
|
-
--pf-v5-c-button--m-link--disabled--Color: var(--pf-
|
88
|
+
--pf-v5-c-button--m-link--disabled--Color: var(--pf-t--global--text--color--disabled--light);
|
89
|
+
--pf-v5-c-button--m-link--not--m-inline--TextDecoration: none;
|
90
90
|
--pf-v5-c-button--m-link--m-inline--FontSize: inherit;
|
91
|
-
--pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-
|
92
|
-
--pf-v5-c-button--m-link--m-inline--hover--Color: var(--pf-
|
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--Color: var(--pf-t--global--text--color--link--hover);
|
93
93
|
--pf-v5-c-button--m-link--m-inline--PaddingTop: 0;
|
94
94
|
--pf-v5-c-button--m-link--m-inline--PaddingRight: 0;
|
95
95
|
--pf-v5-c-button--m-link--m-inline--PaddingBottom: 0;
|
96
96
|
--pf-v5-c-button--m-link--m-inline--PaddingLeft: 0;
|
97
|
-
--pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-
|
98
|
-
--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-
|
97
|
+
--pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
|
98
|
+
--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));
|
99
99
|
--pf-v5-c-button--m-link--m-danger--BackgroundColor: transparent;
|
100
|
-
--pf-v5-c-button--m-link--m-danger--Color: var(--pf-
|
100
|
+
--pf-v5-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
|
101
101
|
--pf-v5-c-button--m-link--m-danger--hover--BackgroundColor: transparent;
|
102
|
-
--pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-
|
102
|
+
--pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
|
103
103
|
--pf-v5-c-button--m-link--m-danger--focus--BackgroundColor: transparent;
|
104
|
-
--pf-v5-c-button--m-link--m-danger--focus--Color: var(--pf-
|
104
|
+
--pf-v5-c-button--m-link--m-danger--focus--Color: var(--pf-t--global--text--color--status--danger--active);
|
105
105
|
--pf-v5-c-button--m-link--m-danger--active--BackgroundColor: transparent;
|
106
|
-
--pf-v5-c-button--m-link--m-danger--active--Color: var(--pf-
|
107
|
-
--pf-v5-c-button--m-plain--BackgroundColor:
|
108
|
-
--pf-v5-c-button--m-plain--
|
109
|
-
--pf-v5-c-button--m-plain--
|
110
|
-
--pf-v5-c-button--m-plain--
|
106
|
+
--pf-v5-c-button--m-link--m-danger--active--Color: var(--pf-t--global--text--color--status--danger--active);
|
107
|
+
--pf-v5-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
108
|
+
--pf-v5-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
|
109
|
+
--pf-v5-c-button--m-plain--PaddingTop: var(--pf-t--global--spacer--sm);
|
110
|
+
--pf-v5-c-button--m-plain--PaddingRight: var(--pf-t--global--spacer--sm);
|
111
|
+
--pf-v5-c-button--m-plain--PaddingBottom: var(--pf-t--global--spacer--sm);
|
112
|
+
--pf-v5-c-button--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
|
113
|
+
--pf-v5-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
|
114
|
+
--pf-v5-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
115
|
+
--pf-v5-c-button--m-plain--hover--Color: var(--pf-t--global--text--color--regular);
|
111
116
|
--pf-v5-c-button--m-plain--focus--BackgroundColor: transparent;
|
112
|
-
--pf-v5-c-button--m-plain--focus--Color: var(--pf-
|
117
|
+
--pf-v5-c-button--m-plain--focus--Color: var(--pf-t--global--text--color--regular);
|
113
118
|
--pf-v5-c-button--m-plain--active--BackgroundColor: transparent;
|
114
|
-
--pf-v5-c-button--m-plain--active--Color: var(--pf-
|
115
|
-
--pf-v5-c-button--m-plain--disabled--Color: var(--pf-
|
119
|
+
--pf-v5-c-button--m-plain--active--Color: var(--pf-t--global--text--color--regular);
|
120
|
+
--pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
|
116
121
|
--pf-v5-c-button--m-plain--disabled--BackgroundColor: transparent;
|
117
|
-
--pf-v5-c-button--m-control--BackgroundColor: var(--pf-
|
118
|
-
--pf-v5-c-button--m-control--Color: var(--pf-
|
119
|
-
--pf-v5-c-button--m-control--BorderRadius:
|
120
|
-
--pf-v5-c-button--m-control--after--BorderWidth: var(--pf-
|
121
|
-
--pf-v5-c-button--m-control--after--BorderTopColor: var(--pf-
|
122
|
-
--pf-v5-c-button--m-control--after--BorderRightColor: var(--pf-
|
123
|
-
--pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-
|
124
|
-
--pf-v5-c-button--m-control--after--BorderLeftColor: var(--pf-
|
125
|
-
--pf-v5-c-button--m-control--disabled--BackgroundColor: var(--pf-
|
126
|
-
--pf-v5-c-button--m-control--hover--BackgroundColor: var(--pf-
|
127
|
-
--pf-v5-c-button--m-control--hover--Color: var(--pf-
|
128
|
-
--pf-v5-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-
|
129
|
-
--pf-v5-c-button--m-control--hover--after--BorderBottomColor: var(--pf-
|
130
|
-
--pf-v5-c-button--m-control--active--BackgroundColor: var(--pf-
|
131
|
-
--pf-v5-c-button--m-control--active--Color: var(--pf-
|
132
|
-
--pf-v5-c-button--m-control--active--after--BorderBottomWidth: var(--pf-
|
133
|
-
--pf-v5-c-button--m-control--active--after--BorderBottomColor: var(--pf-
|
134
|
-
--pf-v5-c-button--m-control--focus--BackgroundColor: var(--pf-
|
135
|
-
--pf-v5-c-button--m-control--focus--Color: var(--pf-
|
136
|
-
--pf-v5-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-
|
137
|
-
--pf-v5-c-button--m-control--focus--after--BorderBottomColor: var(--pf-
|
138
|
-
--pf-v5-c-button--m-control--m-expanded--BackgroundColor: var(--pf-
|
139
|
-
--pf-v5-c-button--m-control--m-expanded--Color: var(--pf-
|
140
|
-
--pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth: var(--pf-
|
141
|
-
--pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-
|
122
|
+
--pf-v5-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
123
|
+
--pf-v5-c-button--m-control--Color: var(--pf-t--global--text--color--subtle);
|
124
|
+
--pf-v5-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
|
125
|
+
--pf-v5-c-button--m-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
|
126
|
+
--pf-v5-c-button--m-control--after--BorderTopColor: var(--pf-t--global--border--color--default);
|
127
|
+
--pf-v5-c-button--m-control--after--BorderRightColor: var(--pf-t--global--border--color--default);
|
128
|
+
--pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-t--global--border--color--default);
|
129
|
+
--pf-v5-c-button--m-control--after--BorderLeftColor: var(--pf-t--global--border--color--default);
|
130
|
+
--pf-v5-c-button--m-control--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
131
|
+
--pf-v5-c-button--m-control--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
132
|
+
--pf-v5-c-button--m-control--hover--Color: var(--pf-t--global--text--color--regular);
|
133
|
+
--pf-v5-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-t--global--border--width--control--hover);
|
134
|
+
--pf-v5-c-button--m-control--hover--after--BorderBottomColor: var(--pf-t--global--background--color--secondary--hover);
|
135
|
+
--pf-v5-c-button--m-control--active--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
136
|
+
--pf-v5-c-button--m-control--active--Color: var(--pf-t--global--text--color--regular);
|
137
|
+
--pf-v5-c-button--m-control--active--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
|
138
|
+
--pf-v5-c-button--m-control--active--after--BorderBottomColor: var(--pf-t--global--color--brand--active);
|
139
|
+
--pf-v5-c-button--m-control--focus--BackgroundColor: var(--pf-t--global--background--color--brand--active);
|
140
|
+
--pf-v5-c-button--m-control--focus--Color: var(--pf-t--global--text--color--regular);
|
141
|
+
--pf-v5-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
|
142
|
+
--pf-v5-c-button--m-control--focus--after--BorderBottomColor: var(--pf-t--global--color--brand--hover);
|
143
|
+
--pf-v5-c-button--m-control--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
144
|
+
--pf-v5-c-button--m-control--m-expanded--Color: var(--pf-t--global--text--color--inverse);
|
145
|
+
--pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth: var(--pf-t--global--border--width--200);
|
146
|
+
--pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-t--global--color--brand--hover);
|
142
147
|
--pf-v5-c-button--m-small--FontSize: var(--pf-v5-global--FontSize--sm);
|
143
|
-
--pf-v5-c-button--m-display-lg--PaddingTop: var(--pf-
|
144
|
-
--pf-v5-c-button--m-display-lg--PaddingRight: var(--pf-
|
145
|
-
--pf-v5-c-button--m-display-lg--PaddingBottom: var(--pf-
|
146
|
-
--pf-v5-c-button--m-display-lg--PaddingLeft: var(--pf-
|
147
|
-
--pf-v5-c-button--m-display-lg--FontWeight: var(--pf-
|
148
|
-
--pf-v5-c-button--m-link--m-display-lg--FontSize: var(--pf-
|
149
|
-
--pf-v5-c-button__icon--m-start--MarginRight: var(--pf-
|
150
|
-
--pf-v5-c-button__icon--m-end--MarginLeft: var(--pf-
|
148
|
+
--pf-v5-c-button--m-display-lg--PaddingTop: var(--pf-t--global--spacer--md);
|
149
|
+
--pf-v5-c-button--m-display-lg--PaddingRight: var(--pf-t--global--spacer--xl);
|
150
|
+
--pf-v5-c-button--m-display-lg--PaddingBottom: var(--pf-t--global--spacer--md);
|
151
|
+
--pf-v5-c-button--m-display-lg--PaddingLeft: var(--pf-t--global--spacer--xl);
|
152
|
+
--pf-v5-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
153
|
+
--pf-v5-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
|
154
|
+
--pf-v5-c-button__icon--m-start--MarginRight: var(--pf-t--global--spacer--xs);
|
155
|
+
--pf-v5-c-button__icon--m-end--MarginLeft: var(--pf-t--global--spacer--xs);
|
151
156
|
--pf-v5-c-button__progress--width: calc(var(--pf-v5-global--icon--FontSize--md) + var(--pf-v5-global--spacer--sm));
|
152
157
|
--pf-v5-c-button__progress--Opacity: 0;
|
153
158
|
--pf-v5-c-button__progress--TranslateY: -50%;
|
154
159
|
--pf-v5-c-button__progress--TranslateX: 0;
|
155
160
|
--pf-v5-c-button__progress--Top: 50%;
|
156
|
-
--pf-v5-c-button__progress--Left: var(--pf-
|
161
|
+
--pf-v5-c-button__progress--Left: var(--pf-t--global--spacer--md);
|
157
162
|
--pf-v5-c-button--m-progress--TransitionProperty: padding;
|
158
163
|
--pf-v5-c-button--m-progress--TransitionDuration: var(--pf-v5-global--TransitionDuration);
|
159
|
-
--pf-v5-c-button--m-progress--PaddingRight: calc(var(--pf-
|
160
|
-
--pf-v5-c-button--m-progress--PaddingLeft: calc(var(--pf-
|
161
|
-
--pf-v5-c-button--m-in-progress--PaddingRight: var(--pf-
|
162
|
-
--pf-v5-c-button--m-in-progress--PaddingLeft: calc(var(--pf-
|
163
|
-
--pf-v5-c-button--m-in-progress--m-plain--Color: var(--pf-
|
164
|
+
--pf-v5-c-button--m-progress--PaddingRight: calc(var(--pf-t--global--spacer--md) + var(--pf-v5-c-button__progress--width) / 2);
|
165
|
+
--pf-v5-c-button--m-progress--PaddingLeft: calc(var(--pf-t--global--spacer--md) + var(--pf-v5-c-button__progress--width) / 2);
|
166
|
+
--pf-v5-c-button--m-in-progress--PaddingRight: var(--pf-t--global--spacer--md);
|
167
|
+
--pf-v5-c-button--m-in-progress--PaddingLeft: calc(var(--pf-t--global--spacer--md) + var(--pf-v5-c-button__progress--width));
|
168
|
+
--pf-v5-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--color--brand--default);
|
164
169
|
--pf-v5-c-button--m-in-progress--m-plain__progress--Left: 50%;
|
165
170
|
--pf-v5-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
|
166
171
|
--pf-v5-c-button__count--MarginLeft: var(--pf-v5-global--spacer--sm);
|
167
|
-
--pf-v5-c-button--disabled__c-badge--Color: var(--pf-
|
168
|
-
--pf-v5-c-button--disabled__c-badge--BackgroundColor: var(--pf-
|
169
|
-
--pf-v5-c-button--m-primary__c-badge--BorderColor: var(--pf-
|
170
|
-
--pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-
|
172
|
+
--pf-v5-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled--default);
|
173
|
+
--pf-v5-c-button--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
174
|
+
--pf-v5-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
|
175
|
+
--pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--300);
|
171
176
|
position: relative;
|
172
177
|
display: inline-block;
|
173
178
|
padding-block-start: var(--pf-v5-c-button--PaddingTop);
|
@@ -193,7 +198,7 @@
|
|
193
198
|
content: "";
|
194
199
|
border: var(--pf-v5-c-button--after--BorderWidth) solid;
|
195
200
|
border-color: var(--pf-v5-c-button--after--BorderColor);
|
196
|
-
border-radius: var(--pf-v5-c-button--
|
201
|
+
border-radius: var(--pf-v5-c-button--BorderRadius);
|
197
202
|
}
|
198
203
|
.pf-v5-c-button:hover {
|
199
204
|
--pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--hover--after--BorderWidth);
|
@@ -231,10 +236,6 @@
|
|
231
236
|
--pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--focus--Color);
|
232
237
|
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--focus--BackgroundColor);
|
233
238
|
}
|
234
|
-
.pf-v5-c-button.pf-m-primary:active, .pf-v5-c-button.pf-m-primary.pf-m-active {
|
235
|
-
--pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--active--Color);
|
236
|
-
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--active--BackgroundColor);
|
237
|
-
}
|
238
239
|
.pf-v5-c-button.pf-m-primary .pf-v5-c-badge.pf-m-unread {
|
239
240
|
border: var(--pf-v5-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-v5-c-button--m-primary__c-badge--BorderColor);
|
240
241
|
}
|
@@ -284,6 +285,9 @@
|
|
284
285
|
color: var(--pf-v5-c-button--m-link--Color);
|
285
286
|
background-color: var(--pf-v5-c-button--m-link--BackgroundColor);
|
286
287
|
}
|
288
|
+
.pf-v5-c-button.pf-m-link:not(.pf-m-inline):hover, .pf-v5-c-button.pf-m-link:not(.pf-m-inline):focus, .pf-v5-c-button.pf-m-link:not(.pf-m-inline):active {
|
289
|
+
text-decoration: var(--pf-t--global--link--text-decoration--hover);
|
290
|
+
}
|
287
291
|
.pf-v5-c-button.pf-m-link:not(.pf-m-inline):hover {
|
288
292
|
--pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--hover--Color);
|
289
293
|
--pf-v5-c-button--m-link--BackgroundColor: var(--pf-v5-c-button--m-link--hover--BackgroundColor);
|
@@ -310,7 +314,6 @@
|
|
310
314
|
}
|
311
315
|
.pf-v5-c-button.pf-m-link.pf-m-inline:hover {
|
312
316
|
--pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--m-inline--hover--Color);
|
313
|
-
text-decoration: var(--pf-v5-c-button--m-link--m-inline--hover--TextDecoration);
|
314
317
|
}
|
315
318
|
.pf-v5-c-button.pf-m-link.pf-m-display-lg {
|
316
319
|
--pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-link--m-display-lg--FontSize);
|
@@ -429,15 +432,20 @@
|
|
429
432
|
.pf-v5-c-button.pf-m-plain {
|
430
433
|
--pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-plain--disabled--Color);
|
431
434
|
--pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-plain--disabled--BackgroundColor);
|
435
|
+
--pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-plain--PaddingTop);
|
436
|
+
--pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-plain--PaddingRight);
|
437
|
+
--pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-plain--PaddingBottom);
|
438
|
+
--pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-plain--PaddingLeft);
|
439
|
+
--pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-plain--BorderRadius);
|
432
440
|
color: var(--pf-v5-c-button--m-plain--Color);
|
433
441
|
background-color: var(--pf-v5-c-button--m-plain--BackgroundColor);
|
434
442
|
}
|
435
443
|
.pf-v5-c-button.pf-m-plain.pf-m-no-padding {
|
436
444
|
padding: 0;
|
437
445
|
}
|
438
|
-
.pf-v5-c-button.pf-m-plain:hover {
|
439
|
-
--pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-plain--hover--Color);
|
446
|
+
.pf-v5-c-button.pf-m-plain:hover, .pf-v5-c-button.pf-m-plain:focus, .pf-v5-c-button.pf-m-plain:active {
|
440
447
|
--pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
|
448
|
+
mix-blend-mode: var(--pf-t--global--background--color--action--plain--hover--blend);
|
441
449
|
}
|
442
450
|
.pf-v5-c-button.pf-m-plain:active, .pf-v5-c-button.pf-m-plain.pf-m-active {
|
443
451
|
--pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-plain--active--Color);
|
@@ -510,49 +518,4 @@
|
|
510
518
|
display: inline-flex;
|
511
519
|
align-items: center;
|
512
520
|
margin-inline-start: var(--pf-v5-c-button__count--MarginLeft);
|
513
|
-
}
|
514
|
-
|
515
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-button {
|
516
|
-
--pf-v5-c-button--disabled--Color: var(--pf-v5-global--disabled-color--300);
|
517
|
-
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
|
518
|
-
--pf-v5-c-button--m-primary--Color: var(--pf-v5-global--primary-color--400);
|
519
|
-
--pf-v5-c-button--m-tertiary--after--BorderColor: var(--pf-v5-global--BorderColor--100);
|
520
|
-
--pf-v5-c-button--m-tertiary--Color: var(--pf-v5-global--palette--black-100);
|
521
|
-
--pf-v5-c-button--m-tertiary--hover--after--BorderColor: var(--pf-v5-global--BorderColor--100);
|
522
|
-
--pf-v5-c-button--m-tertiary--hover--Color: var(--pf-v5-global--palette--black-100);
|
523
|
-
--pf-v5-c-button--m-tertiary--focus--after--BorderColor: var(--pf-v5-global--BorderColor--100);
|
524
|
-
--pf-v5-c-button--m-tertiary--focus--Color: var(--pf-v5-global--palette--black-100);
|
525
|
-
--pf-v5-c-button--m-tertiary--active--after--BorderColor: var(--pf-v5-global--BorderColor--100);
|
526
|
-
--pf-v5-c-button--m-tertiary--active--Color: var(--pf-v5-global--palette--black-100);
|
527
|
-
--pf-v5-c-button--m-warning--Color: var(--pf-v5-global--palette--black-900);
|
528
|
-
--pf-v5-c-button--m-warning--hover--Color: var(--pf-v5-global--palette--black-900);
|
529
|
-
--pf-v5-c-button--m-warning--focus--Color: var(--pf-v5-global--palette--black-900);
|
530
|
-
--pf-v5-c-button--m-warning--active--Color: var(--pf-v5-global--palette--black-900);
|
531
|
-
--pf-v5-c-button--m-warning--hover--BackgroundColor: var(--pf-v5-global--warning-color--200);
|
532
|
-
--pf-v5-c-button--m-warning--focus--BackgroundColor: var(--pf-v5-global--warning-color--200);
|
533
|
-
--pf-v5-c-button--m-warning--active--BackgroundColor: var(--pf-v5-global--warning-color--200);
|
534
|
-
--pf-v5-c-button--m-danger--Color: var(--pf-v5-global--palette--black-900);
|
535
|
-
--pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-global--palette--black-900);
|
536
|
-
--pf-v5-c-button--m-danger--focus--Color: var(--pf-v5-global--palette--black-900);
|
537
|
-
--pf-v5-c-button--m-danger--active--Color: var(--pf-v5-global--palette--black-900);
|
538
|
-
--pf-v5-c-button--m-link--disabled--Color: var(--pf-v5-global--disabled-color--100);
|
539
|
-
--pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
|
540
|
-
--pf-v5-c-button--m-control--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
|
541
|
-
--pf-v5-c-button--m-control--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
|
542
|
-
--pf-v5-c-button--m-control--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
|
543
|
-
--pf-v5-c-button--m-control--m-expanded--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
|
544
|
-
--pf-v5-c-button--m-control--after--BorderTopColor: transparent;
|
545
|
-
--pf-v5-c-button--m-control--after--BorderRightColor: transparent;
|
546
|
-
--pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
|
547
|
-
--pf-v5-c-button--m-control--after--BorderLeftColor: transparent;
|
548
|
-
--pf-v5-c-button--m-control--hover--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
|
549
|
-
--pf-v5-c-button--m-control--active--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
|
550
|
-
--pf-v5-c-button--m-control--focus--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
|
551
|
-
--pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
|
552
|
-
--pf-v5-c-button--m-control--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
|
553
|
-
--pf-v5-c-button--m-primary__c-badge--BorderColor: var(--pf-v5-global--Color--100);
|
554
|
-
}
|
555
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-button.pf-m-control:disabled::after {
|
556
|
-
border: 0;
|
557
|
-
border-block-end: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--palette--black-700);
|
558
521
|
}
|
@@ -5,8 +5,7 @@
|
|
5
5
|
--pf-v5-c-check__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
|
6
6
|
--pf-v5-c-check__label--FontSize: var(--pf-v5-global--FontSize--md);
|
7
7
|
--pf-v5-c-check__label--LineHeight: var(--pf-v5-global--LineHeight--md);
|
8
|
-
--pf-v5-c-check__input--TranslateY:
|
9
|
-
--pf-v5-c-check__input--TranslateY--moz: var(--pf-v5-c-check__input--TranslateY);
|
8
|
+
--pf-v5-c-check__input--TranslateY--moz: 5px;
|
10
9
|
--pf-v5-c-check__description--FontSize: var(--pf-v5-global--FontSize--sm);
|
11
10
|
--pf-v5-c-check__description--Color: var(--pf-v5-global--Color--200);
|
12
11
|
--pf-v5-c-check__body--MarginTop: var(--pf-v5-global--spacer--sm);
|
@@ -16,21 +15,15 @@
|
|
16
15
|
display: grid;
|
17
16
|
grid-template-columns: auto 1fr;
|
18
17
|
grid-gap: var(--pf-v5-c-check--GridGap);
|
19
|
-
align-items: baseline;
|
20
18
|
}
|
21
19
|
.pf-v5-c-check.pf-m-standalone {
|
22
20
|
--pf-v5-c-check--GridGap: 0;
|
23
|
-
--pf-v5-c-check__input--TranslateY:
|
21
|
+
--pf-v5-c-check__input--TranslateY--moz: 0;
|
24
22
|
display: inline-grid;
|
25
23
|
}
|
26
24
|
|
27
|
-
.pf-v5-c-check__input {
|
28
|
-
align-self: start;
|
29
|
-
-moz-transform: translateY(var(--pf-v5-c-check__input--TranslateY--moz));
|
30
|
-
transform: translateY(var(--pf-v5-c-check__input--TranslateY));
|
31
|
-
}
|
32
|
-
|
33
25
|
.pf-v5-c-check__label {
|
26
|
+
align-self: baseline;
|
34
27
|
font-size: var(--pf-v5-c-check__label--FontSize);
|
35
28
|
font-weight: var(--pf-v5-c-check__label--FontWeight);
|
36
29
|
line-height: var(--pf-v5-c-check__label--LineHeight);
|
@@ -48,6 +41,11 @@
|
|
48
41
|
margin-block-start: var(--pf-v5-c-check__body--MarginTop);
|
49
42
|
}
|
50
43
|
|
44
|
+
.pf-v5-c-check__input {
|
45
|
+
align-self: baseline;
|
46
|
+
-moz-transform: translateY(var(--pf-v5-c-check__input--TranslateY--moz));
|
47
|
+
}
|
48
|
+
|
51
49
|
.pf-v5-c-check__label,
|
52
50
|
.pf-v5-c-check__input {
|
53
51
|
justify-self: start;
|