@patternfly/patternfly 6.0.0-alpha.100 → 6.0.0-alpha.102
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Nav/nav.css +3 -1
- package/components/Nav/nav.scss +4 -2
- package/components/Table/table-scrollable.css +12 -15
- package/components/Table/table-scrollable.scss +33 -30
- package/components/Table/table-tree-view.css +0 -2
- package/components/Table/table-tree-view.scss +9 -11
- package/components/Table/table.css +118 -55
- package/components/Table/table.scss +182 -100
- package/docs/components/Nav/examples/Navigation.css +2 -2
- package/docs/components/Nav/examples/Navigation.md +57 -55
- package/docs/components/Table/examples/Table.css +6 -8
- package/docs/components/Table/examples/Table.md +79 -92
- package/docs/demos/Table/examples/Table.md +28 -28
- package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
- package/docs/utilities/Alignment/examples/Alignment.css +4 -4
- package/docs/utilities/Alignment/examples/Alignment.md +5 -5
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +24 -24
- package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
- package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
- package/docs/utilities/Display/examples/Display.css +8 -8
- package/docs/utilities/Display/examples/Display.md +7 -7
- package/docs/utilities/Flex/examples/Flex.css +5 -5
- package/docs/utilities/Flex/examples/Flex.md +82 -40
- package/docs/utilities/Float/examples/Float.css +2 -2
- package/docs/utilities/Float/examples/Float.md +6 -6
- package/docs/utilities/Sizing/examples/Sizing.css +4 -4
- package/docs/utilities/Sizing/examples/Sizing.md +60 -60
- package/docs/utilities/Spacing/examples/Spacing.css +1 -1
- package/docs/utilities/Spacing/examples/Spacing.md +37 -37
- package/docs/utilities/Text/examples/Text.md +53 -53
- package/package.json +1 -1
- package/patternfly-addons.css +91 -371
- package/patternfly-no-globals.css +133 -73
- package/patternfly-theme-dark-unversioned.css +133 -73
- package/patternfly.css +133 -73
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/mixins.scss +2 -2
- package/utilities/Alignment/alignment.css +24 -24
- package/utilities/Alignment/alignment.scss +4 -4
- package/utilities/BackgroundColor/BackgroundColor.css +0 -100
- package/utilities/BackgroundColor/BackgroundColor.scss +2 -8
- package/utilities/BoxShadow/box-shadow.css +15 -39
- package/utilities/BoxShadow/box-shadow.scss +17 -27
- package/utilities/Display/display.scss +2 -2
- package/utilities/Flex/flex.scss +18 -18
- package/utilities/Float/float.css +24 -24
- package/utilities/Float/float.scss +4 -4
- package/utilities/Sizing/sizing.css +28 -28
- package/utilities/Sizing/sizing.scss +17 -17
- package/utilities/Text/text.css +0 -155
- package/utilities/Text/text.scss +10 -16
- package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
- package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
- package/utilities/Text/themes/dark/text.css +0 -0
- package/utilities/Text/themes/dark/text.scss +0 -33
|
@@ -13,34 +13,34 @@ pf: 'test'
|
|
|
13
13
|
```html
|
|
14
14
|
<h2 class="pf-v6-c-title pf-m-lg">Margin, marginX, marginY</h2>
|
|
15
15
|
<div
|
|
16
|
-
class="pf-v6-u-display-flex pf-
|
|
16
|
+
class="pf-v6-u-display-flex pf-v6-u-align-items-flex-start pf-v6-u-flex-wrap"
|
|
17
17
|
>
|
|
18
|
-
<div class="ws-example-flex-item pf-
|
|
19
|
-
<div class="ws-example-flex-item pf-
|
|
20
|
-
<div class="ws-example-flex-item pf-
|
|
18
|
+
<div class="ws-example-flex-item pf-v6-u-m-xl">Margin - xl</div>
|
|
19
|
+
<div class="ws-example-flex-item pf-v6-u-mx-xl">Margin x axis - pf-v6-u-mx-xl</div>
|
|
20
|
+
<div class="ws-example-flex-item pf-v6-u-my-xl">Margin y axis - pf-v6-u-my-xl</div>
|
|
21
21
|
</div>
|
|
22
22
|
<br />
|
|
23
23
|
<h2
|
|
24
24
|
class="pf-v6-c-title pf-m-lg"
|
|
25
25
|
>Margin top, margin right, margin bottom, margin left</h2>
|
|
26
26
|
<div
|
|
27
|
-
class="pf-v6-u-display-flex pf-
|
|
27
|
+
class="pf-v6-u-display-flex pf-v6-u-align-items-flex-start pf-v6-u-flex-wrap"
|
|
28
28
|
>
|
|
29
|
-
<div class="ws-example-flex-item pf-
|
|
30
|
-
<div class="ws-example-flex-item pf-
|
|
31
|
-
<div class="ws-example-flex-item pf-
|
|
32
|
-
<div class="ws-example-flex-item pf-
|
|
29
|
+
<div class="ws-example-flex-item pf-v6-u-mt-xl">Margin-top - xl</div>
|
|
30
|
+
<div class="ws-example-flex-item pf-v6-u-mr-xl">Margin-right - xl</div>
|
|
31
|
+
<div class="ws-example-flex-item pf-v6-u-mb-xl">Margin-bottom - xl</div>
|
|
32
|
+
<div class="ws-example-flex-item pf-v6-u-ml-xl">Margin-left - xl</div>
|
|
33
33
|
</div>
|
|
34
34
|
<br />
|
|
35
35
|
<h2 class="pf-v6-c-title pf-m-lg">Responsive margin</h2>
|
|
36
36
|
<div
|
|
37
|
-
class="pf-v6-u-display-flex pf-
|
|
37
|
+
class="pf-v6-u-display-flex pf-v6-u-align-items-flex-start pf-v6-u-flex-column pf-v6-u-flex-wrap"
|
|
38
38
|
>
|
|
39
|
-
<div class="ws-example-flex-item pf-
|
|
40
|
-
<div class="ws-example-flex-item pf-
|
|
41
|
-
<div class="ws-example-flex-item pf-
|
|
42
|
-
<div class="ws-example-flex-item pf-
|
|
43
|
-
<div class="ws-example-flex-item pf-
|
|
39
|
+
<div class="ws-example-flex-item pf-v6-u-mt-xl">Margin-top - xl</div>
|
|
40
|
+
<div class="ws-example-flex-item pf-v6-u-mt-xl-on-sm">Margin-top - xl on-sm</div>
|
|
41
|
+
<div class="ws-example-flex-item pf-v6-u-mt-xl-on-md">Margin-top - xl on-md</div>
|
|
42
|
+
<div class="ws-example-flex-item pf-v6-u-mt-xl-on-lg">Margin-top - xl on-lg</div>
|
|
43
|
+
<div class="ws-example-flex-item pf-v6-u-mt-xl-on-xl">Margin-top - xl on-xl</div>
|
|
44
44
|
</div>
|
|
45
45
|
|
|
46
46
|
```
|
|
@@ -50,34 +50,34 @@ pf: 'test'
|
|
|
50
50
|
```html
|
|
51
51
|
<h2 class="pf-v6-c-title pf-m-lg">Padding, paddingX, paddingY</h2>
|
|
52
52
|
<div
|
|
53
|
-
class="pf-v6-u-display-flex pf-
|
|
53
|
+
class="pf-v6-u-display-flex pf-v6-u-align-items-flex-start pf-v6-u-flex-wrap"
|
|
54
54
|
>
|
|
55
|
-
<div class="ws-example-flex-item pf-
|
|
56
|
-
<div class="ws-example-flex-item pf-
|
|
57
|
-
<div class="ws-example-flex-item pf-
|
|
55
|
+
<div class="ws-example-flex-item pf-v6-u-p-xl">Padding - xl</div>
|
|
56
|
+
<div class="ws-example-flex-item pf-v6-u-px-xl">Padding x axis - pf-v6-u-px-xl</div>
|
|
57
|
+
<div class="ws-example-flex-item pf-v6-u-py-xl">Padding y axis - pf-v6-u-py-xl</div>
|
|
58
58
|
</div>
|
|
59
59
|
<br />
|
|
60
60
|
<h2
|
|
61
61
|
class="pf-v6-c-title pf-m-lg"
|
|
62
62
|
>Padding top, padding right, padding bottom, padding left</h2>
|
|
63
63
|
<div
|
|
64
|
-
class="pf-v6-u-display-flex pf-
|
|
64
|
+
class="pf-v6-u-display-flex pf-v6-u-align-items-flex-start pf-v6-u-flex-wrap"
|
|
65
65
|
>
|
|
66
|
-
<div class="ws-example-flex-item pf-
|
|
67
|
-
<div class="ws-example-flex-item pf-
|
|
68
|
-
<div class="ws-example-flex-item pf-
|
|
69
|
-
<div class="ws-example-flex-item pf-
|
|
66
|
+
<div class="ws-example-flex-item pf-v6-u-pt-xl">Padding-top - xl</div>
|
|
67
|
+
<div class="ws-example-flex-item pf-v6-u-pr-xl">Padding-right - xl</div>
|
|
68
|
+
<div class="ws-example-flex-item pf-v6-u-pb-xl">Padding-bottom - xl</div>
|
|
69
|
+
<div class="ws-example-flex-item pf-v6-u-pl-xl">Padding-left - xl</div>
|
|
70
70
|
</div>
|
|
71
71
|
<br />
|
|
72
72
|
<h2 class="pf-v6-c-title pf-m-lg">Responsive padding</h2>
|
|
73
73
|
<div
|
|
74
|
-
class="pf-v6-u-display-flex pf-
|
|
74
|
+
class="pf-v6-u-display-flex pf-v6-u-align-items-flex-start pf-v6-u-flex-column pf-v6-u-flex-wrap"
|
|
75
75
|
>
|
|
76
|
-
<div class="ws-example-flex-item pf-
|
|
77
|
-
<div class="ws-example-flex-item pf-
|
|
78
|
-
<div class="ws-example-flex-item pf-
|
|
79
|
-
<div class="ws-example-flex-item pf-
|
|
80
|
-
<div class="ws-example-flex-item pf-
|
|
76
|
+
<div class="ws-example-flex-item pf-v6-u-pt-xl">Padding-top</div>
|
|
77
|
+
<div class="ws-example-flex-item pf-v6-u-pt-xl-on-sm">Padding-top - xl on-sm</div>
|
|
78
|
+
<div class="ws-example-flex-item pf-v6-u-pt-xl-on-md">Padding-top - xl on-md</div>
|
|
79
|
+
<div class="ws-example-flex-item pf-v6-u-pt-xl-on-lg">Padding-top - xl on-lg</div>
|
|
80
|
+
<div class="ws-example-flex-item pf-v6-u-pt-xl-on-xl">Padding-top - xl on-xl</div>
|
|
81
81
|
</div>
|
|
82
82
|
|
|
83
83
|
```
|
|
@@ -87,28 +87,28 @@ pf: 'test'
|
|
|
87
87
|
```html
|
|
88
88
|
<h2 class="pf-v6-c-title pf-m-lg">Combined spacers</h2>
|
|
89
89
|
<div
|
|
90
|
-
class="pf-v6-u-display-flex pf-
|
|
90
|
+
class="pf-v6-u-display-flex pf-v6-u-align-items-flex-start pf-v6-u-flex-wrap"
|
|
91
91
|
>
|
|
92
92
|
<div
|
|
93
|
-
class="ws-example-flex-item pf-
|
|
93
|
+
class="ws-example-flex-item pf-v6-u-p-lg pf-v6-u-m-lg"
|
|
94
94
|
>Padding lg, margin lg</div>
|
|
95
95
|
<div
|
|
96
|
-
class="ws-example-flex-item pf-
|
|
96
|
+
class="ws-example-flex-item pf-v6-u-p-lg-on-lg pf-v6-u-m-lg"
|
|
97
97
|
>Padding lg on-lg, margin lg</div>
|
|
98
98
|
</div>
|
|
99
99
|
<br />
|
|
100
100
|
<h2 class="pf-v6-c-title pf-m-lg">Combined spacers (responsive)</h2>
|
|
101
101
|
<div
|
|
102
|
-
class="pf-v6-u-display-flex pf-
|
|
102
|
+
class="pf-v6-u-display-flex pf-v6-u-align-items-flex-start pf-v6-u-flex-wrap"
|
|
103
103
|
>
|
|
104
104
|
<div
|
|
105
|
-
class="ws-example-flex-item pf-
|
|
105
|
+
class="ws-example-flex-item pf-v6-u-p-sm pf-v6-u-p-lg-on-md pf-v6-u-mr-lg"
|
|
106
106
|
>Item 1</div>
|
|
107
107
|
<div
|
|
108
|
-
class="ws-example-flex-item pf-
|
|
108
|
+
class="ws-example-flex-item pf-v6-u-p-sm pf-v6-u-p-lg-on-md pf-v6-u-mr-lg"
|
|
109
109
|
>Item 2</div>
|
|
110
110
|
<div
|
|
111
|
-
class="ws-example-flex-item pf-
|
|
111
|
+
class="ws-example-flex-item pf-v6-u-p-sm pf-v6-u-p-lg-on-md pf-v6-u-ml-auto-on-xl"
|
|
112
112
|
>Item 3</div>
|
|
113
113
|
</div>
|
|
114
114
|
|
|
@@ -8,48 +8,48 @@ section: utility-classes
|
|
|
8
8
|
### Font family
|
|
9
9
|
|
|
10
10
|
```html
|
|
11
|
-
<div class="pf-
|
|
12
|
-
<div class="pf-
|
|
13
|
-
<div class="pf-
|
|
14
|
-
<div class="pf-
|
|
15
|
-
<div class="pf-
|
|
16
|
-
<div class="pf-
|
|
11
|
+
<div class="pf-v6-u-font-family-text">Text</div>
|
|
12
|
+
<div class="pf-v6-u-font-family-heading">Heading</div>
|
|
13
|
+
<div class="pf-v6-u-font-family-monospace">Monospace</div>
|
|
14
|
+
<div class="pf-v6-u-font-family-text-vf">Variable font text</div>
|
|
15
|
+
<div class="pf-v6-u-font-family-heading-vf">Variable font heading</div>
|
|
16
|
+
<div class="pf-v6-u-font-family-monospace-vf">Variable font monospace</div>
|
|
17
17
|
|
|
18
18
|
```
|
|
19
19
|
|
|
20
20
|
### Font size
|
|
21
21
|
|
|
22
22
|
```html
|
|
23
|
-
<div class="pf-
|
|
24
|
-
<div class="pf-
|
|
25
|
-
<div class="pf-
|
|
26
|
-
<div class="pf-
|
|
27
|
-
<div class="pf-
|
|
28
|
-
<div class="pf-
|
|
29
|
-
<div class="pf-
|
|
30
|
-
<div class="pf-
|
|
23
|
+
<div class="pf-v6-u-font-size-xs">Extra small text</div>
|
|
24
|
+
<div class="pf-v6-u-font-size-sm">Small text</div>
|
|
25
|
+
<div class="pf-v6-u-font-size-md">Medium text</div>
|
|
26
|
+
<div class="pf-v6-u-font-size-lg">Large text</div>
|
|
27
|
+
<div class="pf-v6-u-font-size-xl">Extra large text</div>
|
|
28
|
+
<div class="pf-v6-u-font-size-2xl">2xl text</div>
|
|
29
|
+
<div class="pf-v6-u-font-size-3xl">3xl text</div>
|
|
30
|
+
<div class="pf-v6-u-font-size-4xl">4xl text</div>
|
|
31
31
|
|
|
32
32
|
```
|
|
33
33
|
|
|
34
34
|
### Font weight
|
|
35
35
|
|
|
36
36
|
```html
|
|
37
|
-
<div class="pf-
|
|
38
|
-
<div class="pf-
|
|
39
|
-
<div class="pf-
|
|
37
|
+
<div class="pf-v6-u-font-weight-light">Light</div>
|
|
38
|
+
<div class="pf-v6-u-font-weight-normal">Normal</div>
|
|
39
|
+
<div class="pf-v6-u-font-weight-bold">Bold</div>
|
|
40
40
|
|
|
41
41
|
```
|
|
42
42
|
|
|
43
43
|
### Standard colors
|
|
44
44
|
|
|
45
45
|
```html
|
|
46
|
-
<div class="pf-
|
|
47
|
-
<div class="pf-
|
|
48
|
-
<div class="pf-
|
|
49
|
-
<div class="pf-
|
|
50
|
-
<div class="pf-
|
|
51
|
-
<div class="pf-
|
|
52
|
-
<div class="pf-
|
|
46
|
+
<div class="pf-v6-u-color-100">Font color 100</div>
|
|
47
|
+
<div class="pf-v6-u-color-200">Font color 200</div>
|
|
48
|
+
<div class="pf-v6-u-color-300">Font color 300</div>
|
|
49
|
+
<div class="pf-v6-u-color-400">Font color 400</div>
|
|
50
|
+
<div class="pf-v6-u-active-color-100">Active color 100</div>
|
|
51
|
+
<div class="pf-v6-u-active-color-400">Active color 400</div>
|
|
52
|
+
<div class="pf-v6-u-primary-color-100">Primary color 100</div>
|
|
53
53
|
|
|
54
54
|
```
|
|
55
55
|
|
|
@@ -58,9 +58,9 @@ section: utility-classes
|
|
|
58
58
|
These colors are best used with the ["inverse" background colors](/utility-classes/background-color#inverse-background-colors).
|
|
59
59
|
|
|
60
60
|
```html
|
|
61
|
-
<div class="pf-
|
|
62
|
-
<div class="pf-
|
|
63
|
-
<div class="pf-
|
|
61
|
+
<div class="pf-v6-u-background-color-dark-400">
|
|
62
|
+
<div class="pf-v6-u-color-light-100">Font color light 100</div>
|
|
63
|
+
<div class="pf-v6-u-color-light-200">Font color light 200</div>
|
|
64
64
|
</div>
|
|
65
65
|
|
|
66
66
|
```
|
|
@@ -68,51 +68,51 @@ These colors are best used with the ["inverse" background colors](/utility-class
|
|
|
68
68
|
### Link colors
|
|
69
69
|
|
|
70
70
|
```html
|
|
71
|
-
<div class="pf-
|
|
72
|
-
<div class="pf-
|
|
73
|
-
<div class="pf-
|
|
74
|
-
<div class="pf-
|
|
75
|
-
<div class="pf-
|
|
71
|
+
<div class="pf-v6-u-link-color">Link color</div>
|
|
72
|
+
<div class="pf-v6-u-link-color-hover">Hover link color</div>
|
|
73
|
+
<div class="pf-v6-u-background-color-dark-400">
|
|
74
|
+
<div class="pf-v6-u-link-color-light">Light link color</div>
|
|
75
|
+
<div class="pf-v6-u-link-color-light-hover">Light hover link color</div>
|
|
76
76
|
</div>
|
|
77
|
-
<div class="pf-
|
|
78
|
-
<div class="pf-
|
|
79
|
-
<div class="pf-
|
|
77
|
+
<div class="pf-v6-u-link-color-dark">Dark link color</div>
|
|
78
|
+
<div class="pf-v6-u-link-color-dark-hover">Dark hover link color</div>
|
|
79
|
+
<div class="pf-v6-u-link-color-visited">Visited link color</div>
|
|
80
80
|
|
|
81
81
|
```
|
|
82
82
|
|
|
83
83
|
### Status and state text colors
|
|
84
84
|
|
|
85
85
|
```html
|
|
86
|
-
<div class="pf-
|
|
87
|
-
<div class="pf-
|
|
88
|
-
<div class="pf-
|
|
89
|
-
<div class="pf-
|
|
90
|
-
<div class="pf-
|
|
91
|
-
<div class="pf-
|
|
92
|
-
<div class="pf-
|
|
93
|
-
<div class="pf-
|
|
94
|
-
<div class="pf-
|
|
95
|
-
<div class="pf-
|
|
96
|
-
<div class="pf-
|
|
97
|
-
<div class="pf-
|
|
86
|
+
<div class="pf-v6-u-custom-color-100">Font color custom 100</div>
|
|
87
|
+
<div class="pf-v6-u-custom-color-200">Font color custom 200</div>
|
|
88
|
+
<div class="pf-v6-u-custom-color-300">Font color custom 300</div>
|
|
89
|
+
<div class="pf-v6-u-success-color-100">Font color success 100</div>
|
|
90
|
+
<div class="pf-v6-u-success-color-200">Font color success 200</div>
|
|
91
|
+
<div class="pf-v6-u-info-color-100">Font color info 100</div>
|
|
92
|
+
<div class="pf-v6-u-info-color-200">Font color info 200</div>
|
|
93
|
+
<div class="pf-v6-u-warning-color-100">Font color warning 100</div>
|
|
94
|
+
<div class="pf-v6-u-warning-color-200">Font color warning 200</div>
|
|
95
|
+
<div class="pf-v6-u-danger-color-100">Font color danger 100</div>
|
|
96
|
+
<div class="pf-v6-u-danger-color-200">Font color danger 200</div>
|
|
97
|
+
<div class="pf-v6-u-danger-color-300">Font color danger 300</div>
|
|
98
98
|
|
|
99
99
|
```
|
|
100
100
|
|
|
101
101
|
### Disabled text colors
|
|
102
102
|
|
|
103
103
|
```html
|
|
104
|
-
<div class="pf-
|
|
105
|
-
<div class="pf-
|
|
104
|
+
<div class="pf-v6-u-disabled-color-100">Font color disabled 100</div>
|
|
105
|
+
<div class="pf-v6-u-disabled-color-200">Font color disabled 200</div>
|
|
106
106
|
|
|
107
107
|
```
|
|
108
108
|
|
|
109
109
|
### Icon colors
|
|
110
110
|
|
|
111
111
|
```html
|
|
112
|
-
<div class="pf-
|
|
112
|
+
<div class="pf-v6-u-icon-color-dark">
|
|
113
113
|
<i class="fas fa-thumbtack" aria-hidden="true"></i>
|
|
114
114
|
</div>
|
|
115
|
-
<div class="pf-
|
|
115
|
+
<div class="pf-v6-u-icon-color-light">
|
|
116
116
|
<i class="fas fa-thumbtack" aria-hidden="true"></i>
|
|
117
117
|
</div>
|
|
118
118
|
|
|
@@ -124,14 +124,14 @@ These colors are best used with the ["inverse" background colors](/utility-class
|
|
|
124
124
|
<h4>
|
|
125
125
|
<strong>Breakword</strong>
|
|
126
126
|
</h4>
|
|
127
|
-
<div class="pf-
|
|
127
|
+
<div class="pf-v6-u-text-break-word">
|
|
128
128
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut.</p>
|
|
129
129
|
<br />
|
|
130
130
|
</div>
|
|
131
131
|
<h4>
|
|
132
132
|
<strong>No Wrap</strong>
|
|
133
133
|
</h4>
|
|
134
|
-
<div class="pf-
|
|
134
|
+
<div class="pf-v6-u-text-nowrap">
|
|
135
135
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula.</p>
|
|
136
136
|
<br />
|
|
137
137
|
</div>
|