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