@patternfly/patternfly 1.0.244 → 1.0.248

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 (14) hide show
  1. package/README.md +10 -0
  2. package/_variables.scss +2 -0
  3. package/components/Content/content.css +8 -1
  4. package/components/Content/content.scss +12 -1
  5. package/components/Page/page.css +1 -2
  6. package/components/Page/page.scss +1 -2
  7. package/package.json +1 -1
  8. package/patternfly-base.css +2 -0
  9. package/patternfly-no-reset.css +11 -3
  10. package/patternfly-variables.css +2 -0
  11. package/patternfly.css +11 -3
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
  14. package/sass-utilities/scss-variables.scss +2 -0
package/README.md CHANGED
@@ -94,5 +94,15 @@ If you have any suggestions about ways that we can improve how we use this tool,
94
94
 
95
95
  ## FAQ
96
96
 
97
+ #### CSS Variables
97
98
  [How do I use CSS variables to customize
98
99
  the library?](https://pf4.patternfly.org/guidelines#variables)
100
+
101
+ #### Browser Support
102
+ PatternFly 4 is supported on the latest version of the following browsers:
103
+ - Chrome
104
+ - Firefox
105
+ - Safari
106
+ - Edge
107
+
108
+ We also provide documentation for how to enable IE11 support in our [wiki](https://github.com/patternfly/patternfly-next/wiki/IE11-Support).
package/_variables.scss CHANGED
@@ -121,6 +121,8 @@
121
121
  --pf-global--BorderWidth--md: #{$pf-global--BorderWidth--md};
122
122
  --pf-global--BorderWidth--lg: #{$pf-global--BorderWidth--lg};
123
123
  --pf-global--BorderColor: #{$pf-global--BorderColor};
124
+ --pf-global--BorderColor--100: #{$pf-global--BorderColor--100};
125
+ --pf-global--BorderColor--200: #{$pf-global--BorderColor--200};
124
126
  --pf-global--BorderColor--dark: #{$pf-global--BorderColor--dark};
125
127
  --pf-global--BorderColor--light: #{$pf-global--BorderColor--light};
126
128
  --pf-global--BorderColor--light-200: #{$pf-global--BorderColor--light-200};
package/components/Content/content.css CHANGED
@@ -69,6 +69,8 @@
69
69
  --pf-c-content--dt--FontWeight: var(--pf-global--FontWeight--semi-bold);
70
70
  --pf-c-content--dt--MarginTop: var(--pf-global--spacer--md);
71
71
  --pf-c-content--dt--sm--MarginTop: 0;
72
+ --pf-c-content--hr--Height: var(--pf-global--BorderWidth--sm);
73
+ --pf-c-content--hr--BackgroundColor: var(--pf-global--BorderColor--200);
72
74
  font-size: var(--pf-c-content--FontSize);
73
75
  line-height: var(--pf-c-content--LineHeight);
74
76
  color: var(--pf-c-content--Color); }
@@ -87,7 +89,8 @@
87
89
  .pf-c-content blockquote:not(:last-child),
88
90
  .pf-c-content small:not(:last-child),
89
91
  .pf-c-content pre:not(:last-child),
90
- .pf-c-content table:not(:last-child) {
92
+ .pf-c-content table:not(:last-child),
93
+ .pf-c-content hr:not(:last-child) {
91
94
  margin-bottom: var(--pf-c-content--MarginBottom); }
92
95
  .pf-c-content h1,
93
96
  .pf-c-content h2,
@@ -151,6 +154,10 @@
151
154
  font-weight: var(--pf-c-content--blockquote--FontWeight);
152
155
  color: var(--pf-c-content--blockquote--Color);
153
156
  border-left: var(--pf-c-content--blockquote--BorderLeftWidth) solid var(--pf-c-content--blockquote--BorderLeftColor); }
157
+ .pf-c-content hr {
158
+ height: var(--pf-c-content--hr--Height);
159
+ background-color: var(--pf-c-content--hr--BackgroundColor);
160
+ border: none; }
154
161
  .pf-c-content ol {
155
162
  padding-left: var(--pf-c-content--ol--PaddingLeft);
156
163
  margin-top: var(--pf-c-content--ol--MarginTop);
package/components/Content/content.scss CHANGED
@@ -92,6 +92,10 @@
92
92
  --pf-c-content--dt--MarginTop: var(--pf-global--spacer--md);
93
93
  --pf-c-content--dt--sm--MarginTop: 0;
94
94
 
95
+ // hr
96
+ --pf-c-content--hr--Height: var(--pf-global--BorderWidth--sm);
97
+ --pf-c-content--hr--BackgroundColor: var(--pf-global--BorderColor--200);
98
+
95
99
  font-size: var(--pf-c-content--FontSize);
96
100
  line-height: var(--pf-c-content--LineHeight);
97
101
  color: var(--pf-c-content--Color);
@@ -117,7 +121,8 @@
117
121
  blockquote,
118
122
  small,
119
123
  pre,
120
- table {
124
+ table,
125
+ hr {
121
126
  &:not(:last-child) {
122
127
  // This variable name doesn't reflect the selector, it's an excpection to the variable system.
123
128
  margin-bottom: var(--pf-c-content--MarginBottom);
@@ -216,6 +221,12 @@
216
221
  border-left: var(--pf-c-content--blockquote--BorderLeftWidth) solid var(--pf-c-content--blockquote--BorderLeftColor);
217
222
  }
218
223
 
224
+ hr {
225
+ height: var(--pf-c-content--hr--Height);
226
+ background-color: var(--pf-c-content--hr--BackgroundColor);
227
+ border: none;
228
+ }
229
+
219
230
  ol {
220
231
  padding-left: var(--pf-c-content--ol--PaddingLeft);
221
232
  margin-top: var(--pf-c-content--ol--MarginTop);
package/components/Page/page.css CHANGED
@@ -218,7 +218,6 @@
218
218
  transform: var(--pf-c-page__sidebar--Transform); }
219
219
  @media screen and (min-width: 768px) {
220
220
  .pf-c-page__sidebar {
221
- flex: 1;
222
221
  max-width: var(--pf-c-page__sidebar--md--Width);
223
222
  box-shadow: var(--pf-c-page__sidebar--BoxShadow); } }
224
223
  .pf-c-page__sidebar.pf-m-expanded {
@@ -246,7 +245,7 @@
246
245
  padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
247
246
  background-color: var(--pf-c-page__main-section--BackgroundColor); }
248
247
  .pf-c-page__main-section:last-of-type, .pf-c-page__main-section:only-child {
249
- flex: 1 0; }
248
+ flex: 1 0 auto; }
250
249
  .pf-c-page__main-section.pf-m-light {
251
250
  --pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-light--BackgroundColor); }
252
251
  .pf-c-page__main-section[class*="pf-m-dark-"] {
package/components/Page/page.scss CHANGED
@@ -272,7 +272,6 @@
272
272
  transform: var(--pf-c-page__sidebar--Transform);
273
273
 
274
274
  @media screen and (min-width: $pf-global--breakpoint--md) {
275
- flex: 1;
276
275
  max-width: var(--pf-c-page__sidebar--md--Width); // max-width value set for browser to calculate max-width while transitioning. sharing value to keep consistent
277
276
  box-shadow: var(--pf-c-page__sidebar--BoxShadow);
278
277
  }
@@ -317,7 +316,7 @@
317
316
 
318
317
  &:last-of-type,
319
318
  &:only-child {
320
- flex: 1 0;
319
+ flex: 1 0 auto;
321
320
  }
322
321
 
323
322
  &.pf-m-light {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "1.0.244",
4
+ "version": "1.0.248",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "main": "n/a",
package/patternfly-base.css CHANGED
@@ -113,6 +113,8 @@
113
113
  --pf-global--BorderWidth--md: 2px;
114
114
  --pf-global--BorderWidth--lg: 3px;
115
115
  --pf-global--BorderColor: #72767b;
116
+ --pf-global--BorderColor--100: #8b8d8f;
117
+ --pf-global--BorderColor--200: #d1d1d1;
116
118
  --pf-global--BorderColor--dark: #72767b;
117
119
  --pf-global--BorderColor--light: #bbb;
118
120
  --pf-global--BorderColor--light-200: #ededed;
package/patternfly-no-reset.css CHANGED
@@ -113,6 +113,8 @@
113
113
  --pf-global--BorderWidth--md: 2px;
114
114
  --pf-global--BorderWidth--lg: 3px;
115
115
  --pf-global--BorderColor: #72767b;
116
+ --pf-global--BorderColor--100: #8b8d8f;
117
+ --pf-global--BorderColor--200: #d1d1d1;
116
118
  --pf-global--BorderColor--dark: #72767b;
117
119
  --pf-global--BorderColor--light: #bbb;
118
120
  --pf-global--BorderColor--light-200: #ededed;
@@ -4730,6 +4732,8 @@ label.pf-c-check, .pf-c-check__label,
4730
4732
  --pf-c-content--dt--FontWeight: var(--pf-global--FontWeight--semi-bold);
4731
4733
  --pf-c-content--dt--MarginTop: var(--pf-global--spacer--md);
4732
4734
  --pf-c-content--dt--sm--MarginTop: 0;
4735
+ --pf-c-content--hr--Height: var(--pf-global--BorderWidth--sm);
4736
+ --pf-c-content--hr--BackgroundColor: var(--pf-global--BorderColor--200);
4733
4737
  font-size: var(--pf-c-content--FontSize);
4734
4738
  line-height: var(--pf-c-content--LineHeight);
4735
4739
  color: var(--pf-c-content--Color); }
@@ -4748,7 +4752,8 @@ label.pf-c-check, .pf-c-check__label,
4748
4752
  .pf-c-content blockquote:not(:last-child),
4749
4753
  .pf-c-content small:not(:last-child),
4750
4754
  .pf-c-content pre:not(:last-child),
4751
- .pf-c-content table:not(:last-child) {
4755
+ .pf-c-content table:not(:last-child),
4756
+ .pf-c-content hr:not(:last-child) {
4752
4757
  margin-bottom: var(--pf-c-content--MarginBottom); }
4753
4758
  .pf-c-content h1,
4754
4759
  .pf-c-content h2,
@@ -4812,6 +4817,10 @@ label.pf-c-check, .pf-c-check__label,
4812
4817
  font-weight: var(--pf-c-content--blockquote--FontWeight);
4813
4818
  color: var(--pf-c-content--blockquote--Color);
4814
4819
  border-left: var(--pf-c-content--blockquote--BorderLeftWidth) solid var(--pf-c-content--blockquote--BorderLeftColor); }
4820
+ .pf-c-content hr {
4821
+ height: var(--pf-c-content--hr--Height);
4822
+ background-color: var(--pf-c-content--hr--BackgroundColor);
4823
+ border: none; }
4815
4824
  .pf-c-content ol {
4816
4825
  padding-left: var(--pf-c-content--ol--PaddingLeft);
4817
4826
  margin-top: var(--pf-c-content--ol--MarginTop);
@@ -6780,7 +6789,6 @@ label.pf-c-check, .pf-c-check__label,
6780
6789
  transform: var(--pf-c-page__sidebar--Transform); }
6781
6790
  @media screen and (min-width: 768px) {
6782
6791
  .pf-c-page__sidebar {
6783
- flex: 1;
6784
6792
  max-width: var(--pf-c-page__sidebar--md--Width);
6785
6793
  box-shadow: var(--pf-c-page__sidebar--BoxShadow); } }
6786
6794
  .pf-c-page__sidebar.pf-m-expanded {
@@ -6808,7 +6816,7 @@ label.pf-c-check, .pf-c-check__label,
6808
6816
  padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
6809
6817
  background-color: var(--pf-c-page__main-section--BackgroundColor); }
6810
6818
  .pf-c-page__main-section:last-of-type, .pf-c-page__main-section:only-child {
6811
- flex: 1 0; }
6819
+ flex: 1 0 auto; }
6812
6820
  .pf-c-page__main-section.pf-m-light {
6813
6821
  --pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-light--BackgroundColor); }
6814
6822
  .pf-c-page__main-section[class*="pf-m-dark-"] {
package/patternfly-variables.css CHANGED
@@ -92,6 +92,8 @@
92
92
  --pf-global--BorderWidth--md: 2px;
93
93
  --pf-global--BorderWidth--lg: 3px;
94
94
  --pf-global--BorderColor: #72767b;
95
+ --pf-global--BorderColor--100: #8b8d8f;
96
+ --pf-global--BorderColor--200: #d1d1d1;
95
97
  --pf-global--BorderColor--dark: #72767b;
96
98
  --pf-global--BorderColor--light: #bbb;
97
99
  --pf-global--BorderColor--light-200: #ededed;
package/patternfly.css CHANGED
@@ -113,6 +113,8 @@
113
113
  --pf-global--BorderWidth--md: 2px;
114
114
  --pf-global--BorderWidth--lg: 3px;
115
115
  --pf-global--BorderColor: #72767b;
116
+ --pf-global--BorderColor--100: #8b8d8f;
117
+ --pf-global--BorderColor--200: #d1d1d1;
116
118
  --pf-global--BorderColor--dark: #72767b;
117
119
  --pf-global--BorderColor--light: #bbb;
118
120
  --pf-global--BorderColor--light-200: #ededed;
@@ -4846,6 +4848,8 @@ label.pf-c-check, .pf-c-check__label,
4846
4848
  --pf-c-content--dt--FontWeight: var(--pf-global--FontWeight--semi-bold);
4847
4849
  --pf-c-content--dt--MarginTop: var(--pf-global--spacer--md);
4848
4850
  --pf-c-content--dt--sm--MarginTop: 0;
4851
+ --pf-c-content--hr--Height: var(--pf-global--BorderWidth--sm);
4852
+ --pf-c-content--hr--BackgroundColor: var(--pf-global--BorderColor--200);
4849
4853
  font-size: var(--pf-c-content--FontSize);
4850
4854
  line-height: var(--pf-c-content--LineHeight);
4851
4855
  color: var(--pf-c-content--Color); }
@@ -4864,7 +4868,8 @@ label.pf-c-check, .pf-c-check__label,
4864
4868
  .pf-c-content blockquote:not(:last-child),
4865
4869
  .pf-c-content small:not(:last-child),
4866
4870
  .pf-c-content pre:not(:last-child),
4867
- .pf-c-content table:not(:last-child) {
4871
+ .pf-c-content table:not(:last-child),
4872
+ .pf-c-content hr:not(:last-child) {
4868
4873
  margin-bottom: var(--pf-c-content--MarginBottom); }
4869
4874
  .pf-c-content h1,
4870
4875
  .pf-c-content h2,
@@ -4928,6 +4933,10 @@ label.pf-c-check, .pf-c-check__label,
4928
4933
  font-weight: var(--pf-c-content--blockquote--FontWeight);
4929
4934
  color: var(--pf-c-content--blockquote--Color);
4930
4935
  border-left: var(--pf-c-content--blockquote--BorderLeftWidth) solid var(--pf-c-content--blockquote--BorderLeftColor); }
4936
+ .pf-c-content hr {
4937
+ height: var(--pf-c-content--hr--Height);
4938
+ background-color: var(--pf-c-content--hr--BackgroundColor);
4939
+ border: none; }
4931
4940
  .pf-c-content ol {
4932
4941
  padding-left: var(--pf-c-content--ol--PaddingLeft);
4933
4942
  margin-top: var(--pf-c-content--ol--MarginTop);
@@ -6896,7 +6905,6 @@ label.pf-c-check, .pf-c-check__label,
6896
6905
  transform: var(--pf-c-page__sidebar--Transform); }
6897
6906
  @media screen and (min-width: 768px) {
6898
6907
  .pf-c-page__sidebar {
6899
- flex: 1;
6900
6908
  max-width: var(--pf-c-page__sidebar--md--Width);
6901
6909
  box-shadow: var(--pf-c-page__sidebar--BoxShadow); } }
6902
6910
  .pf-c-page__sidebar.pf-m-expanded {
@@ -6924,7 +6932,7 @@ label.pf-c-check, .pf-c-check__label,
6924
6932
  padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
6925
6933
  background-color: var(--pf-c-page__main-section--BackgroundColor); }
6926
6934
  .pf-c-page__main-section:last-of-type, .pf-c-page__main-section:only-child {
6927
- flex: 1 0; }
6935
+ flex: 1 0 auto; }
6928
6936
  .pf-c-page__main-section.pf-m-light {
6929
6937
  --pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-light--BackgroundColor); }
6930
6938
  .pf-c-page__main-section[class*="pf-m-dark-"] {