@patternfly/patternfly 5.0.0-alpha.23 → 5.0.0-alpha.25
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/base/_base.scss +0 -18
- package/base/_fonts.scss +22 -22
- package/base/_globals.scss +1 -1
- package/base/_icons.scss +1 -28
- package/base/_svg-icons.scss +6 -0
- package/base/_variables.scss +1 -1
- package/base/patternfly-fonts.css +17 -17
- package/base/patternfly-icons.css +1 -19
- package/base/themes/dark/_globals.scss +1 -1
- package/base/themes/dark/_variables.scss +1 -1
- package/components/AboutModalBox/about-modal-box.css +7 -7
- package/components/AboutModalBox/about-modal-box.scss +7 -7
- package/components/Alert/alert.css +3 -3
- package/components/Alert/alert.scss +3 -3
- package/components/Avatar/avatar.scss +2 -2
- package/components/Banner/banner.css +1 -1
- package/components/Banner/banner.scss +1 -1
- package/components/CalendarMonth/calendar-month.css +1 -1
- package/components/CalendarMonth/calendar-month.scss +2 -2
- package/components/Card/card.css +12 -10
- package/components/Card/card.scss +12 -10
- package/components/Chip/chip.css +1 -1
- package/components/Chip/chip.scss +1 -1
- package/components/ChipGroup/chip-group.css +4 -4
- package/components/ChipGroup/chip-group.scss +4 -4
- package/components/Content/content.css +5 -5
- package/components/Content/content.scss +9 -9
- package/components/DataList/data-list-grid.css +7 -7
- package/components/DataList/data-list-grid.scss +1 -1
- package/components/DataList/data-list.css +10 -10
- package/components/DataList/data-list.scss +3 -3
- package/components/DescriptionList/description-list.css +7 -7
- package/components/DescriptionList/description-list.scss +7 -7
- package/components/Divider/divider.css +2 -2
- package/components/Divider/divider.scss +3 -3
- package/components/Drawer/drawer.css +2 -2
- package/components/Drawer/drawer.scss +2 -2
- package/components/DualListSelector/dual-list-selector.css +1 -1
- package/components/DualListSelector/dual-list-selector.scss +1 -1
- package/components/EmptyState/empty-state.css +2 -2
- package/components/EmptyState/empty-state.scss +2 -2
- package/components/Form/form.css +12 -12
- package/components/Form/form.scss +7 -7
- package/components/Hint/hint.css +2 -2
- package/components/Hint/hint.scss +2 -2
- package/components/Label/label.css +6 -6
- package/components/Label/label.scss +7 -7
- package/components/LabelGroup/label-group.css +2 -2
- package/components/LabelGroup/label-group.scss +2 -2
- package/components/Login/login.css +10 -10
- package/components/Login/login.scss +10 -10
- package/components/Masthead/masthead.css +4 -4
- package/components/Masthead/masthead.scss +4 -4
- package/components/Menu/menu.css +6 -6
- package/components/Menu/menu.scss +31 -31
- package/components/MenuToggle/menu-toggle.css +1 -1
- package/components/MenuToggle/menu-toggle.scss +1 -1
- package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
- package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
- package/components/Nav/nav.css +1 -1
- package/components/Nav/nav.scss +2 -2
- package/components/NotificationDrawer/notification-drawer.css +3 -3
- package/components/NotificationDrawer/notification-drawer.scss +3 -3
- package/components/Page/page.css +11 -11
- package/components/Page/page.scss +12 -12
- package/components/Progress/progress.css +10 -10
- package/components/Progress/progress.scss +10 -10
- package/components/ProgressStepper/progress-stepper.css +5 -5
- package/components/ProgressStepper/progress-stepper.scss +5 -5
- package/components/SearchInput/search-input.css +2 -2
- package/components/SearchInput/search-input.scss +2 -2
- package/components/Select/select.css +1 -1
- package/components/Select/select.scss +1 -1
- package/components/Sidebar/sidebar.css +1 -1
- package/components/Sidebar/sidebar.scss +1 -1
- package/components/SimpleList/simple-list.css +1 -1
- package/components/SimpleList/simple-list.scss +2 -2
- package/components/Spinner/spinner.css +4 -4
- package/components/Spinner/spinner.scss +4 -4
- package/components/Table/table.css +1 -1
- package/components/Table/table.scss +1 -1
- package/components/TextInputGroup/text-input-group.css +2 -2
- package/components/TextInputGroup/text-input-group.scss +2 -2
- package/components/Tile/tile.css +1 -1
- package/components/Tile/tile.scss +1 -1
- package/components/Timestamp/timestamp.css +3 -3
- package/components/Timestamp/timestamp.scss +3 -3
- package/components/Toolbar/toolbar.css +2 -2
- package/components/Toolbar/toolbar.scss +2 -2
- package/components/Wizard/wizard.css +14 -1
- package/components/Wizard/wizard.scss +18 -2
- package/docs/components/Card/examples/Card.md +90 -32
- package/docs/components/Popover/examples/Popover.md +1 -2
- package/docs/components/Wizard/examples/Wizard.md +58 -59
- package/docs/demos/Card/examples/Card.md +50 -30
- package/docs/demos/CardView/examples/CardView.md +41 -15
- package/docs/demos/Dashboard/examples/Dashboard.md +18 -12
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +30 -20
- package/docs/demos/Tabs/examples/Tabs.md +24 -12
- package/docs/demos/Wizard/examples/Wizard.md +60 -45
- package/layouts/Gallery/gallery.css +1 -1
- package/layouts/Gallery/gallery.scss +1 -1
- package/layouts/Grid/grid.css +2 -2
- package/layouts/Grid/grid.scss +2 -2
- package/package.json +7 -8
- package/patternfly-base-no-reset.css +18 -36
- package/patternfly-base.css +18 -36
- package/patternfly-no-reset.css +190 -193
- package/patternfly.css +190 -193
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/functions.scss +8 -24
- package/sass-utilities/mixins.scss +15 -39
- package/sass-utilities/scss-variables.scss +1 -0
- package/utilities/Spacing/spacing.scss +2 -2
- package/base/_shield-inheritable.scss +0 -69
- package/base/_shield-noninheritable.scss +0 -13
- package/base/patternfly-shield-inheritable.css +0 -66
- package/base/patternfly-shield-inheritable.scss +0 -4
- package/base/patternfly-shield-noninheritable.css +0 -9
- package/base/patternfly-shield-noninheritable.scss +0 -4
|
@@ -43,19 +43,13 @@
|
|
|
43
43
|
@if length($map-items) == 0 {
|
|
44
44
|
$map: ("base": null);
|
|
45
45
|
$map: map-merge($map, $pf-global--breakpoint-name-map);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
@else {
|
|
46
|
+
} @else {
|
|
49
47
|
@each $breakpoint in $map-items {
|
|
50
48
|
@if not map-has-key($pf-global--breakpoint-name-map, $breakpoint) and $breakpoint != "base" {
|
|
51
49
|
$map: map-merge($map, ("invalid breakpoint #{$breakpoint}": null));
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
@else if $breakpoint == "base" {
|
|
50
|
+
} @else if $breakpoint == "base" {
|
|
55
51
|
$map: map-merge($map, ($breakpoint: null));
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
@else {
|
|
52
|
+
} @else {
|
|
59
53
|
$map: map-merge($map, ($breakpoint: map-get($pf-global--breakpoint-name-map, #{$breakpoint})));
|
|
60
54
|
}
|
|
61
55
|
}
|
|
@@ -72,19 +66,13 @@
|
|
|
72
66
|
@if length($map-items) == 0 {
|
|
73
67
|
$map: ("base": null);
|
|
74
68
|
$map: map-merge($map, $pf-global--height-breakpoint-name-map);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
@else {
|
|
69
|
+
} @else {
|
|
78
70
|
@each $breakpoint in $map-items {
|
|
79
71
|
@if not map-has-key($pf-global--height-breakpoint-name-map, $breakpoint) and $breakpoint != "base" {
|
|
80
72
|
$map: map-merge($map, ("invalid breakpoint #{$breakpoint}": null));
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
@else if $breakpoint == "base" {
|
|
73
|
+
} @else if $breakpoint == "base" {
|
|
84
74
|
$map: map-merge($map, ($breakpoint: null));
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
@else {
|
|
75
|
+
} @else {
|
|
88
76
|
$map: map-merge($map, ($breakpoint: map-get($pf-global--height-breakpoint-name-map, #{$breakpoint})));
|
|
89
77
|
}
|
|
90
78
|
}
|
|
@@ -107,13 +95,9 @@
|
|
|
107
95
|
@each $spacer in $map-items {
|
|
108
96
|
@if not map-has-key($pf-global--spacer-map, $spacer) and $spacer != "none" {
|
|
109
97
|
$map: map-merge($map, ("invalid spacer #{$spacer}": null));
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
@else if $spacer == "none" {
|
|
98
|
+
} @else if $spacer == "none" {
|
|
113
99
|
$map: map-merge($map, ($spacer: 0));
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
@else {
|
|
100
|
+
} @else {
|
|
117
101
|
$map: map-merge($map, ($spacer: map-get($pf-global--spacer-map, #{$spacer})));
|
|
118
102
|
}
|
|
119
103
|
}
|
|
@@ -2,33 +2,23 @@
|
|
|
2
2
|
@mixin pf-media-query($point) {
|
|
3
3
|
@if $point == "" or not $point or $point == "base" {
|
|
4
4
|
@content;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
@else if $point == "sm" {
|
|
5
|
+
} @else if $point == "sm" {
|
|
8
6
|
@media screen and (min-width: $pf-global--breakpoint--sm) {
|
|
9
7
|
@content;
|
|
10
8
|
}
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
@else if $point == "md" {
|
|
9
|
+
} @else if $point == "md" {
|
|
14
10
|
@media screen and (min-width: $pf-global--breakpoint--md) {
|
|
15
11
|
@content;
|
|
16
12
|
}
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
@else if $point == "lg" {
|
|
13
|
+
} @else if $point == "lg" {
|
|
20
14
|
@media screen and (min-width: $pf-global--breakpoint--lg) {
|
|
21
15
|
@content;
|
|
22
16
|
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
@else if $point == "xl" {
|
|
17
|
+
} @else if $point == "xl" {
|
|
26
18
|
@media screen and (min-width: $pf-global--breakpoint--xl) {
|
|
27
19
|
@content;
|
|
28
20
|
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
@else if $point == "2xl" {
|
|
21
|
+
} @else if $point == "2xl" {
|
|
32
22
|
@media screen and (min-width: $pf-global--breakpoint--2xl) {
|
|
33
23
|
@content;
|
|
34
24
|
}
|
|
@@ -39,33 +29,23 @@
|
|
|
39
29
|
@mixin pf-height-media-query($point) {
|
|
40
30
|
@if $point == "" or not $point or $point == "base" {
|
|
41
31
|
@content;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
@else if $point == "sm" {
|
|
32
|
+
} @else if $point == "sm" {
|
|
45
33
|
@media screen and (min-height: $pf-global--height-breakpoint--sm) {
|
|
46
34
|
@content;
|
|
47
35
|
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
@else if $point == "md" {
|
|
36
|
+
} @else if $point == "md" {
|
|
51
37
|
@media screen and (min-height: $pf-global--height-breakpoint--md) {
|
|
52
38
|
@content;
|
|
53
39
|
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
@else if $point == "lg" {
|
|
40
|
+
} @else if $point == "lg" {
|
|
57
41
|
@media screen and (min-height: $pf-global--height-breakpoint--lg) {
|
|
58
42
|
@content;
|
|
59
43
|
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
@else if $point == "xl" {
|
|
44
|
+
} @else if $point == "xl" {
|
|
63
45
|
@media screen and (min-height: $pf-global--height-breakpoint--xl) {
|
|
64
46
|
@content;
|
|
65
47
|
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
@else if $point == "2xl" {
|
|
48
|
+
} @else if $point == "2xl" {
|
|
69
49
|
@media screen and (min-height: $pf-global--height-breakpoint--2xl) {
|
|
70
50
|
@content;
|
|
71
51
|
}
|
|
@@ -75,7 +55,7 @@
|
|
|
75
55
|
// Create single prop / value classes, optionally add responsive suffix
|
|
76
56
|
// @group mixins
|
|
77
57
|
// @moduleType mixin
|
|
78
|
-
// @parameter:
|
|
58
|
+
// @parameter: [Suffix] xs, sm, md, lg, xl, base or null
|
|
79
59
|
// @usage: @include pf-utility-builder(class-name, base sm md lg xl);
|
|
80
60
|
// ===============================================================================================
|
|
81
61
|
|
|
@@ -232,11 +212,9 @@
|
|
|
232
212
|
|
|
233
213
|
// Apply media query if value is passed
|
|
234
214
|
@mixin pf-apply-breakpoint($breakpoint) {
|
|
235
|
-
@if
|
|
215
|
+
@if $breakpoint == "null" or $breakpoint == "base" or $breakpoint == "" {
|
|
236
216
|
@content;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
@else {
|
|
217
|
+
} @else {
|
|
240
218
|
$breakpoint: pf-breakpoint-value($breakpoint);
|
|
241
219
|
|
|
242
220
|
@media (min-width: $breakpoint) {
|
|
@@ -247,11 +225,9 @@
|
|
|
247
225
|
|
|
248
226
|
// Apply height media query if value is passed
|
|
249
227
|
@mixin pf-apply-height-breakpoint($breakpoint) {
|
|
250
|
-
@if
|
|
228
|
+
@if $breakpoint == "null" or $breakpoint == "base" or $breakpoint == "" {
|
|
251
229
|
@content;
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
@else {
|
|
230
|
+
} @else {
|
|
255
231
|
$breakpoint: pf-height-breakpoint-value($breakpoint);
|
|
256
232
|
|
|
257
233
|
@media (min-height: $breakpoint) {
|
|
@@ -124,6 +124,7 @@ $pf-global--BoxShadow--inset: inset 0 0 pf-size-prem(10) 0 rgba($pf-color-black-
|
|
|
124
124
|
$pf-global--font-path: "./assets/fonts" !default;
|
|
125
125
|
|
|
126
126
|
// Iconpath
|
|
127
|
+
// stylelint-disable-next-line scss/dollar-variable-pattern
|
|
127
128
|
$fa-font-path: "./assets/fonts/webfonts" !default;
|
|
128
129
|
|
|
129
130
|
// FontIcon path
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// stylelint-disable
|
|
2
2
|
|
|
3
3
|
// Build spacing values
|
|
4
|
-
@mixin pf-spacer-builder
|
|
4
|
+
@mixin pf-spacer-builder {
|
|
5
5
|
|
|
6
6
|
// Loop through breakpoints
|
|
7
7
|
@each $breakpoint, $breakpoint-value in $pf-global--breakpoint-map {
|
|
@@ -54,4 +54,4 @@
|
|
|
54
54
|
// stylelint-enable
|
|
55
55
|
|
|
56
56
|
// Build spacing values
|
|
57
|
-
@include pf-spacer-builder
|
|
57
|
+
@include pf-spacer-builder;
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
@mixin shield-inheritable {
|
|
2
|
-
// CSS shield against PF 3
|
|
3
|
-
.pf-c-about-modal-box,
|
|
4
|
-
.pf-c-accordion,
|
|
5
|
-
.pf-c-alert,
|
|
6
|
-
.pf-c-alert-group,
|
|
7
|
-
.pf-c-app-launcher,
|
|
8
|
-
.pf-c-avatar,
|
|
9
|
-
.pf-c-backdrop,
|
|
10
|
-
.pf-c-background-image,
|
|
11
|
-
.pf-c-badge,
|
|
12
|
-
.pf-c-brand,
|
|
13
|
-
.pf-c-breadcrumb,
|
|
14
|
-
.pf-c-button,
|
|
15
|
-
.pf-c-card,
|
|
16
|
-
.pf-c-check,
|
|
17
|
-
.pf-c-chip,
|
|
18
|
-
.pf-c-chip-group,
|
|
19
|
-
.pf-c-clipboard-copy,
|
|
20
|
-
.pf-c-content,
|
|
21
|
-
.pf-c-context-selector,
|
|
22
|
-
.pf-c-data-list,
|
|
23
|
-
.pf-c-toolbar,
|
|
24
|
-
.pf-c-divider,
|
|
25
|
-
.pf-c-drawer,
|
|
26
|
-
.pf-c-dropdown,
|
|
27
|
-
.pf-c-empty-state,
|
|
28
|
-
.pf-c-expandable-section,
|
|
29
|
-
.pf-c-form,
|
|
30
|
-
.pf-c-form-control,
|
|
31
|
-
.pf-c-input-group,
|
|
32
|
-
.pf-c-label,
|
|
33
|
-
.pf-c-list,
|
|
34
|
-
.pf-c-login,
|
|
35
|
-
.pf-c-modal-box,
|
|
36
|
-
.pf-c-nav,
|
|
37
|
-
.pf-c-notification-badge,
|
|
38
|
-
.pf-c-options-menu,
|
|
39
|
-
.pf-c-overflow-menu,
|
|
40
|
-
.pf-c-page,
|
|
41
|
-
.pf-c-pagination,
|
|
42
|
-
.pf-c-popover,
|
|
43
|
-
.pf-c-progress,
|
|
44
|
-
.pf-c-radio,
|
|
45
|
-
.pf-c-select,
|
|
46
|
-
.pf-c-skip-to-content,
|
|
47
|
-
.pf-c-spinner,
|
|
48
|
-
.pf-c-switch,
|
|
49
|
-
.pf-c-tab-content,
|
|
50
|
-
.pf-c-table,
|
|
51
|
-
.pf-c-tabs,
|
|
52
|
-
.pf-c-title,
|
|
53
|
-
.pf-c-tooltip,
|
|
54
|
-
.pf-c-wizard,
|
|
55
|
-
.pf-l-bullseye,
|
|
56
|
-
.pf-l-flex,
|
|
57
|
-
.pf-l-gallery,
|
|
58
|
-
.pf-l-grid,
|
|
59
|
-
.pf-l-level,
|
|
60
|
-
.pf-l-split,
|
|
61
|
-
.pf-l-stack {
|
|
62
|
-
font-family: var(--pf-global--FontFamily--sans-serif);
|
|
63
|
-
font-size: var(--pf-global--FontSize--md);
|
|
64
|
-
font-weight: var(--pf-global--FontWeight--normal);
|
|
65
|
-
line-height: var(--pf-global--LineHeight--md);
|
|
66
|
-
color: var(--pf-global--Color--100); // this color rule is set here to be able to use themes
|
|
67
|
-
text-rendering: optimizelegibility;
|
|
68
|
-
}
|
|
69
|
-
}
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
.pf-c-about-modal-box,
|
|
2
|
-
.pf-c-accordion,
|
|
3
|
-
.pf-c-alert,
|
|
4
|
-
.pf-c-alert-group,
|
|
5
|
-
.pf-c-app-launcher,
|
|
6
|
-
.pf-c-avatar,
|
|
7
|
-
.pf-c-backdrop,
|
|
8
|
-
.pf-c-background-image,
|
|
9
|
-
.pf-c-badge,
|
|
10
|
-
.pf-c-brand,
|
|
11
|
-
.pf-c-breadcrumb,
|
|
12
|
-
.pf-c-button,
|
|
13
|
-
.pf-c-card,
|
|
14
|
-
.pf-c-check,
|
|
15
|
-
.pf-c-chip,
|
|
16
|
-
.pf-c-chip-group,
|
|
17
|
-
.pf-c-clipboard-copy,
|
|
18
|
-
.pf-c-content,
|
|
19
|
-
.pf-c-context-selector,
|
|
20
|
-
.pf-c-data-list,
|
|
21
|
-
.pf-c-toolbar,
|
|
22
|
-
.pf-c-divider,
|
|
23
|
-
.pf-c-drawer,
|
|
24
|
-
.pf-c-dropdown,
|
|
25
|
-
.pf-c-empty-state,
|
|
26
|
-
.pf-c-expandable-section,
|
|
27
|
-
.pf-c-form,
|
|
28
|
-
.pf-c-form-control,
|
|
29
|
-
.pf-c-input-group,
|
|
30
|
-
.pf-c-label,
|
|
31
|
-
.pf-c-list,
|
|
32
|
-
.pf-c-login,
|
|
33
|
-
.pf-c-modal-box,
|
|
34
|
-
.pf-c-nav,
|
|
35
|
-
.pf-c-notification-badge,
|
|
36
|
-
.pf-c-options-menu,
|
|
37
|
-
.pf-c-overflow-menu,
|
|
38
|
-
.pf-c-page,
|
|
39
|
-
.pf-c-pagination,
|
|
40
|
-
.pf-c-popover,
|
|
41
|
-
.pf-c-progress,
|
|
42
|
-
.pf-c-radio,
|
|
43
|
-
.pf-c-select,
|
|
44
|
-
.pf-c-skip-to-content,
|
|
45
|
-
.pf-c-spinner,
|
|
46
|
-
.pf-c-switch,
|
|
47
|
-
.pf-c-tab-content,
|
|
48
|
-
.pf-c-table,
|
|
49
|
-
.pf-c-tabs,
|
|
50
|
-
.pf-c-title,
|
|
51
|
-
.pf-c-tooltip,
|
|
52
|
-
.pf-c-wizard,
|
|
53
|
-
.pf-l-bullseye,
|
|
54
|
-
.pf-l-flex,
|
|
55
|
-
.pf-l-gallery,
|
|
56
|
-
.pf-l-grid,
|
|
57
|
-
.pf-l-level,
|
|
58
|
-
.pf-l-split,
|
|
59
|
-
.pf-l-stack {
|
|
60
|
-
font-family: var(--pf-global--FontFamily--sans-serif);
|
|
61
|
-
font-size: var(--pf-global--FontSize--md);
|
|
62
|
-
font-weight: var(--pf-global--FontWeight--normal);
|
|
63
|
-
line-height: var(--pf-global--LineHeight--md);
|
|
64
|
-
color: var(--pf-global--Color--100);
|
|
65
|
-
text-rendering: optimizelegibility;
|
|
66
|
-
}
|