@patternfly/patternfly 4.203.2 → 4.203.3

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 (8) hide show
  1. package/components/Page/page.css +11 -5
  2. package/components/Page/page.scss +8 -4
  3. package/components/Page/themes/dark/page.scss +4 -0
  4. package/package.json +2 -2
  5. package/patternfly-no-reset.css +11 -5
  6. package/patternfly.css +11 -5
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/Page/page.css CHANGED
@@ -143,6 +143,8 @@
143
143
  --pf-c-page__sidebar--Width: 18.125rem;
144
144
  --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
145
145
  --pf-c-page__sidebar--m-light--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
146
+ --pf-c-page__sidebar--m-light--BorderRightWidth: var(--pf-global--BorderWidth--sm);
147
+ --pf-c-page__sidebar--m-light--BorderRightColor: var(--pf-global--BorderColor--100);
146
148
  --pf-c-page__sidebar--BoxShadow: var(--pf-global--BoxShadow--lg-right);
147
149
  --pf-c-page__sidebar--Transition: var(--pf-global--Transition);
148
150
  --pf-c-page__sidebar--TranslateX: -100%;
@@ -415,15 +417,15 @@
415
417
  transition: var(--pf-c-page__sidebar--Transition);
416
418
  transform: translateX(var(--pf-c-page__sidebar--TranslateX)) translateZ(var(--pf-c-page__sidebar--TranslateZ));
417
419
  }
418
- @media screen and (min-width: 1200px) {
419
- .pf-c-page__sidebar {
420
- box-shadow: var(--pf-c-page__sidebar--BoxShadow);
421
- }
422
- }
423
420
  .pf-c-page__sidebar.pf-m-expanded {
424
421
  --pf-c-page__sidebar--TranslateX: var(--pf-c-page__sidebar--m-expanded--TranslateX);
425
422
  box-shadow: var(--pf-c-page__sidebar--BoxShadow);
426
423
  }
424
+ @media screen and (min-width: 1200px) {
425
+ .pf-c-page__sidebar.pf-m-expanded {
426
+ --pf-c-page__sidebar--BoxShadow: none;
427
+ }
428
+ }
427
429
  .pf-c-page__sidebar.pf-m-collapsed {
428
430
  max-width: 0;
429
431
  overflow: hidden;
@@ -431,6 +433,7 @@
431
433
  .pf-c-page__sidebar.pf-m-light {
432
434
  color: var(--pf-global--Color--100);
433
435
  --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-light--BackgroundColor);
436
+ border-right: var(--pf-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-c-page__sidebar--m-light--BorderRightColor);
434
437
  }
435
438
 
436
439
  .pf-c-page__sidebar-body {
@@ -954,6 +957,9 @@
954
957
  :where(.pf-theme-dark) .pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge:hover::before {
955
958
  background-color: var(--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
956
959
  }
960
+ :where(.pf-theme-dark) .pf-c-page__sidebar {
961
+ border-right: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
962
+ }
957
963
  :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-bottom {
958
964
  --pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
959
965
  }
package/components/Page/page.scss CHANGED
@@ -74,6 +74,8 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
74
74
  --pf-c-page__sidebar--Width: #{pf-size-prem(290px)};
75
75
  --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
76
76
  --pf-c-page__sidebar--m-light--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
77
+ --pf-c-page__sidebar--m-light--BorderRightWidth: var(--pf-global--BorderWidth--sm);
78
+ --pf-c-page__sidebar--m-light--BorderRightColor: var(--pf-global--BorderColor--100);
77
79
  --pf-c-page__sidebar--BoxShadow: var(--pf-global--BoxShadow--lg-right);
78
80
  --pf-c-page__sidebar--Transition: var(--pf-global--Transition);
79
81
  --pf-c-page__sidebar--TranslateX: -100%;
@@ -389,16 +391,16 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
389
391
  transition: var(--pf-c-page__sidebar--Transition);
390
392
  transform: translateX(var(--pf-c-page__sidebar--TranslateX)) translateZ(var(--pf-c-page__sidebar--TranslateZ));
391
393
 
392
- @media screen and (min-width: $pf-global--breakpoint--xl) {
393
- box-shadow: var(--pf-c-page__sidebar--BoxShadow);
394
- }
395
-
396
394
  // Mobile
397
395
  // Expanded nav
398
396
  &.pf-m-expanded {
399
397
  --pf-c-page__sidebar--TranslateX: var(--pf-c-page__sidebar--m-expanded--TranslateX);
400
398
 
401
399
  box-shadow: var(--pf-c-page__sidebar--BoxShadow);
400
+
401
+ @media screen and (min-width: $pf-global--breakpoint--xl) {
402
+ --pf-c-page__sidebar--BoxShadow: none;
403
+ }
402
404
  }
403
405
 
404
406
  // Desktop
@@ -412,6 +414,8 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
412
414
  @include pf-t-light;
413
415
 
414
416
  --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-light--BackgroundColor);
417
+
418
+ border-right: var(--pf-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-c-page__sidebar--m-light--BorderRightColor);
415
419
  }
416
420
  }
417
421
 
package/components/Page/themes/dark/page.scss CHANGED
@@ -26,6 +26,10 @@
26
26
  }
27
27
  }
28
28
 
29
+ .pf-c-page__sidebar {
30
+ border-right: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
31
+ }
32
+
29
33
  .pf-c-page__main-nav {
30
34
  &.pf-m-sticky-top,
31
35
  &.pf-m-sticky-bottom {
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": "4.203.2",
4
+ "version": "4.203.3",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -79,7 +79,7 @@
79
79
  "stylelint-scss": "^4.0.0",
80
80
  "stylelint-value-no-unknown-custom-properties": "^3.0.0",
81
81
  "surge": "^0.21.3",
82
- "@patternfly/documentation-framework": "1.0.6",
82
+ "@patternfly/documentation-framework": "1.1.0",
83
83
  "unified": "^9.2.0",
84
84
  "webpack": "^4.43.0"
85
85
  },
package/patternfly-no-reset.css CHANGED
@@ -21458,6 +21458,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21458
21458
  --pf-c-page__sidebar--Width: 18.125rem;
21459
21459
  --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
21460
21460
  --pf-c-page__sidebar--m-light--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
21461
+ --pf-c-page__sidebar--m-light--BorderRightWidth: var(--pf-global--BorderWidth--sm);
21462
+ --pf-c-page__sidebar--m-light--BorderRightColor: var(--pf-global--BorderColor--100);
21461
21463
  --pf-c-page__sidebar--BoxShadow: var(--pf-global--BoxShadow--lg-right);
21462
21464
  --pf-c-page__sidebar--Transition: var(--pf-global--Transition);
21463
21465
  --pf-c-page__sidebar--TranslateX: -100%;
@@ -21730,15 +21732,15 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21730
21732
  transition: var(--pf-c-page__sidebar--Transition);
21731
21733
  transform: translateX(var(--pf-c-page__sidebar--TranslateX)) translateZ(var(--pf-c-page__sidebar--TranslateZ));
21732
21734
  }
21733
- @media screen and (min-width: 1200px) {
21734
- .pf-c-page__sidebar {
21735
- box-shadow: var(--pf-c-page__sidebar--BoxShadow);
21736
- }
21737
- }
21738
21735
  .pf-c-page__sidebar.pf-m-expanded {
21739
21736
  --pf-c-page__sidebar--TranslateX: var(--pf-c-page__sidebar--m-expanded--TranslateX);
21740
21737
  box-shadow: var(--pf-c-page__sidebar--BoxShadow);
21741
21738
  }
21739
+ @media screen and (min-width: 1200px) {
21740
+ .pf-c-page__sidebar.pf-m-expanded {
21741
+ --pf-c-page__sidebar--BoxShadow: none;
21742
+ }
21743
+ }
21742
21744
  .pf-c-page__sidebar.pf-m-collapsed {
21743
21745
  max-width: 0;
21744
21746
  overflow: hidden;
@@ -21746,6 +21748,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21746
21748
  .pf-c-page__sidebar.pf-m-light {
21747
21749
  color: var(--pf-global--Color--100);
21748
21750
  --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-light--BackgroundColor);
21751
+ border-right: var(--pf-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-c-page__sidebar--m-light--BorderRightColor);
21749
21752
  }
21750
21753
 
21751
21754
  .pf-c-page__sidebar-body {
@@ -22272,6 +22275,9 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22272
22275
  :where(.pf-theme-dark) .pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge:hover::before {
22273
22276
  background-color: var(--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
22274
22277
  }
22278
+ :where(.pf-theme-dark) .pf-c-page__sidebar {
22279
+ border-right: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
22280
+ }
22275
22281
  :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-bottom {
22276
22282
  --pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
22277
22283
  }
package/patternfly.css CHANGED
@@ -21585,6 +21585,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21585
21585
  --pf-c-page__sidebar--Width: 18.125rem;
21586
21586
  --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
21587
21587
  --pf-c-page__sidebar--m-light--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
21588
+ --pf-c-page__sidebar--m-light--BorderRightWidth: var(--pf-global--BorderWidth--sm);
21589
+ --pf-c-page__sidebar--m-light--BorderRightColor: var(--pf-global--BorderColor--100);
21588
21590
  --pf-c-page__sidebar--BoxShadow: var(--pf-global--BoxShadow--lg-right);
21589
21591
  --pf-c-page__sidebar--Transition: var(--pf-global--Transition);
21590
21592
  --pf-c-page__sidebar--TranslateX: -100%;
@@ -21857,15 +21859,15 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21857
21859
  transition: var(--pf-c-page__sidebar--Transition);
21858
21860
  transform: translateX(var(--pf-c-page__sidebar--TranslateX)) translateZ(var(--pf-c-page__sidebar--TranslateZ));
21859
21861
  }
21860
- @media screen and (min-width: 1200px) {
21861
- .pf-c-page__sidebar {
21862
- box-shadow: var(--pf-c-page__sidebar--BoxShadow);
21863
- }
21864
- }
21865
21862
  .pf-c-page__sidebar.pf-m-expanded {
21866
21863
  --pf-c-page__sidebar--TranslateX: var(--pf-c-page__sidebar--m-expanded--TranslateX);
21867
21864
  box-shadow: var(--pf-c-page__sidebar--BoxShadow);
21868
21865
  }
21866
+ @media screen and (min-width: 1200px) {
21867
+ .pf-c-page__sidebar.pf-m-expanded {
21868
+ --pf-c-page__sidebar--BoxShadow: none;
21869
+ }
21870
+ }
21869
21871
  .pf-c-page__sidebar.pf-m-collapsed {
21870
21872
  max-width: 0;
21871
21873
  overflow: hidden;
@@ -21873,6 +21875,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21873
21875
  .pf-c-page__sidebar.pf-m-light {
21874
21876
  color: var(--pf-global--Color--100);
21875
21877
  --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-light--BackgroundColor);
21878
+ border-right: var(--pf-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-c-page__sidebar--m-light--BorderRightColor);
21876
21879
  }
21877
21880
 
21878
21881
  .pf-c-page__sidebar-body {
@@ -22399,6 +22402,9 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22399
22402
  :where(.pf-theme-dark) .pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge:hover::before {
22400
22403
  background-color: var(--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
22401
22404
  }
22405
+ :where(.pf-theme-dark) .pf-c-page__sidebar {
22406
+ border-right: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
22407
+ }
22402
22408
  :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-bottom {
22403
22409
  --pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
22404
22410
  }