@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.
Files changed (121) hide show
  1. package/base/_base.scss +0 -18
  2. package/base/_fonts.scss +22 -22
  3. package/base/_globals.scss +1 -1
  4. package/base/_icons.scss +1 -28
  5. package/base/_svg-icons.scss +6 -0
  6. package/base/_variables.scss +1 -1
  7. package/base/patternfly-fonts.css +17 -17
  8. package/base/patternfly-icons.css +1 -19
  9. package/base/themes/dark/_globals.scss +1 -1
  10. package/base/themes/dark/_variables.scss +1 -1
  11. package/components/AboutModalBox/about-modal-box.css +7 -7
  12. package/components/AboutModalBox/about-modal-box.scss +7 -7
  13. package/components/Alert/alert.css +3 -3
  14. package/components/Alert/alert.scss +3 -3
  15. package/components/Avatar/avatar.scss +2 -2
  16. package/components/Banner/banner.css +1 -1
  17. package/components/Banner/banner.scss +1 -1
  18. package/components/CalendarMonth/calendar-month.css +1 -1
  19. package/components/CalendarMonth/calendar-month.scss +2 -2
  20. package/components/Card/card.css +12 -10
  21. package/components/Card/card.scss +12 -10
  22. package/components/Chip/chip.css +1 -1
  23. package/components/Chip/chip.scss +1 -1
  24. package/components/ChipGroup/chip-group.css +4 -4
  25. package/components/ChipGroup/chip-group.scss +4 -4
  26. package/components/Content/content.css +5 -5
  27. package/components/Content/content.scss +9 -9
  28. package/components/DataList/data-list-grid.css +7 -7
  29. package/components/DataList/data-list-grid.scss +1 -1
  30. package/components/DataList/data-list.css +10 -10
  31. package/components/DataList/data-list.scss +3 -3
  32. package/components/DescriptionList/description-list.css +7 -7
  33. package/components/DescriptionList/description-list.scss +7 -7
  34. package/components/Divider/divider.css +2 -2
  35. package/components/Divider/divider.scss +3 -3
  36. package/components/Drawer/drawer.css +2 -2
  37. package/components/Drawer/drawer.scss +2 -2
  38. package/components/DualListSelector/dual-list-selector.css +1 -1
  39. package/components/DualListSelector/dual-list-selector.scss +1 -1
  40. package/components/EmptyState/empty-state.css +2 -2
  41. package/components/EmptyState/empty-state.scss +2 -2
  42. package/components/Form/form.css +12 -12
  43. package/components/Form/form.scss +7 -7
  44. package/components/Hint/hint.css +2 -2
  45. package/components/Hint/hint.scss +2 -2
  46. package/components/Label/label.css +6 -6
  47. package/components/Label/label.scss +7 -7
  48. package/components/LabelGroup/label-group.css +2 -2
  49. package/components/LabelGroup/label-group.scss +2 -2
  50. package/components/Login/login.css +10 -10
  51. package/components/Login/login.scss +10 -10
  52. package/components/Masthead/masthead.css +4 -4
  53. package/components/Masthead/masthead.scss +4 -4
  54. package/components/Menu/menu.css +6 -6
  55. package/components/Menu/menu.scss +31 -31
  56. package/components/MenuToggle/menu-toggle.css +1 -1
  57. package/components/MenuToggle/menu-toggle.scss +1 -1
  58. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  59. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  60. package/components/Nav/nav.css +1 -1
  61. package/components/Nav/nav.scss +2 -2
  62. package/components/NotificationDrawer/notification-drawer.css +3 -3
  63. package/components/NotificationDrawer/notification-drawer.scss +3 -3
  64. package/components/Page/page.css +11 -11
  65. package/components/Page/page.scss +12 -12
  66. package/components/Progress/progress.css +10 -10
  67. package/components/Progress/progress.scss +10 -10
  68. package/components/ProgressStepper/progress-stepper.css +5 -5
  69. package/components/ProgressStepper/progress-stepper.scss +5 -5
  70. package/components/SearchInput/search-input.css +2 -2
  71. package/components/SearchInput/search-input.scss +2 -2
  72. package/components/Select/select.css +1 -1
  73. package/components/Select/select.scss +1 -1
  74. package/components/Sidebar/sidebar.css +1 -1
  75. package/components/Sidebar/sidebar.scss +1 -1
  76. package/components/SimpleList/simple-list.css +1 -1
  77. package/components/SimpleList/simple-list.scss +2 -2
  78. package/components/Spinner/spinner.css +4 -4
  79. package/components/Spinner/spinner.scss +4 -4
  80. package/components/Table/table.css +1 -1
  81. package/components/Table/table.scss +1 -1
  82. package/components/TextInputGroup/text-input-group.css +2 -2
  83. package/components/TextInputGroup/text-input-group.scss +2 -2
  84. package/components/Tile/tile.css +1 -1
  85. package/components/Tile/tile.scss +1 -1
  86. package/components/Timestamp/timestamp.css +3 -3
  87. package/components/Timestamp/timestamp.scss +3 -3
  88. package/components/Toolbar/toolbar.css +2 -2
  89. package/components/Toolbar/toolbar.scss +2 -2
  90. package/components/Wizard/wizard.css +14 -1
  91. package/components/Wizard/wizard.scss +18 -2
  92. package/docs/components/Card/examples/Card.md +90 -32
  93. package/docs/components/Popover/examples/Popover.md +1 -2
  94. package/docs/components/Wizard/examples/Wizard.md +58 -59
  95. package/docs/demos/Card/examples/Card.md +50 -30
  96. package/docs/demos/CardView/examples/CardView.md +41 -15
  97. package/docs/demos/Dashboard/examples/Dashboard.md +18 -12
  98. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +30 -20
  99. package/docs/demos/Tabs/examples/Tabs.md +24 -12
  100. package/docs/demos/Wizard/examples/Wizard.md +60 -45
  101. package/layouts/Gallery/gallery.css +1 -1
  102. package/layouts/Gallery/gallery.scss +1 -1
  103. package/layouts/Grid/grid.css +2 -2
  104. package/layouts/Grid/grid.scss +2 -2
  105. package/package.json +7 -8
  106. package/patternfly-base-no-reset.css +18 -36
  107. package/patternfly-base.css +18 -36
  108. package/patternfly-no-reset.css +190 -193
  109. package/patternfly.css +190 -193
  110. package/patternfly.min.css +1 -1
  111. package/patternfly.min.css.map +1 -1
  112. package/sass-utilities/functions.scss +8 -24
  113. package/sass-utilities/mixins.scss +15 -39
  114. package/sass-utilities/scss-variables.scss +1 -0
  115. package/utilities/Spacing/spacing.scss +2 -2
  116. package/base/_shield-inheritable.scss +0 -69
  117. package/base/_shield-noninheritable.scss +0 -13
  118. package/base/patternfly-shield-inheritable.css +0 -66
  119. package/base/patternfly-shield-inheritable.scss +0 -4
  120. package/base/patternfly-shield-noninheritable.css +0 -9
  121. 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: {Suffix} xs, sm, md, lg, xl, base or null
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 ($breakpoint == "null" or $breakpoint == "base" or $breakpoint == "") {
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 ($breakpoint == "null" or $breakpoint == "base" or $breakpoint == "") {
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,13 +0,0 @@
1
- @mixin shield-noninheritable {
2
- [class*="pf-c-"],
3
- [class*="pf-l-"] {
4
- &,
5
- &::before,
6
- &::after {
7
- box-sizing: border-box;
8
- padding: 0;
9
- margin: 0;
10
- background-color: transparent;
11
- }
12
- }
13
- }
@@ -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
- }
@@ -1,4 +0,0 @@
1
- @import "../sass-utilities/all";
2
- @import "shield-inheritable";
3
-
4
- @include shield-inheritable;
@@ -1,9 +0,0 @@
1
- [class*=pf-c-], [class*=pf-c-]::before, [class*=pf-c-]::after,
2
- [class*=pf-l-],
3
- [class*=pf-l-]::before,
4
- [class*=pf-l-]::after {
5
- box-sizing: border-box;
6
- padding: 0;
7
- margin: 0;
8
- background-color: transparent;
9
- }
@@ -1,4 +0,0 @@
1
- @import "../sass-utilities/all";
2
- @import "shield-noninheritable";
3
-
4
- @include shield-noninheritable;