primeng 11.4.1 → 11.4.2

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 (43) hide show
  1. package/bundles/primeng-sidebar.umd.js +3 -3
  2. package/bundles/primeng-sidebar.umd.js.map +1 -1
  3. package/bundles/primeng-sidebar.umd.min.js +1 -1
  4. package/bundles/primeng-sidebar.umd.min.js.map +1 -1
  5. package/esm2015/sidebar/sidebar.js +7 -5
  6. package/fesm2015/primeng-sidebar.js +6 -4
  7. package/fesm2015/primeng-sidebar.js.map +1 -1
  8. package/package.json +1 -1
  9. package/resources/components/sidebar/sidebar.css +14 -5
  10. package/resources/themes/arya-blue/theme.css +15 -4
  11. package/resources/themes/arya-green/theme.css +15 -4
  12. package/resources/themes/arya-orange/theme.css +15 -4
  13. package/resources/themes/arya-purple/theme.css +15 -4
  14. package/resources/themes/bootstrap4-dark-blue/theme.css +15 -4
  15. package/resources/themes/bootstrap4-dark-purple/theme.css +15 -4
  16. package/resources/themes/bootstrap4-light-blue/theme.css +15 -4
  17. package/resources/themes/bootstrap4-light-purple/theme.css +15 -4
  18. package/resources/themes/fluent-light/theme.css +15 -4
  19. package/resources/themes/luna-amber/theme.css +15 -4
  20. package/resources/themes/luna-blue/theme.css +15 -4
  21. package/resources/themes/luna-green/theme.css +15 -4
  22. package/resources/themes/luna-pink/theme.css +15 -4
  23. package/resources/themes/md-dark-deeppurple/theme.css +15 -4
  24. package/resources/themes/md-dark-indigo/theme.css +15 -4
  25. package/resources/themes/md-light-deeppurple/theme.css +15 -4
  26. package/resources/themes/md-light-indigo/theme.css +15 -4
  27. package/resources/themes/mdc-dark-deeppurple/theme.css +15 -4
  28. package/resources/themes/mdc-dark-indigo/theme.css +15 -4
  29. package/resources/themes/mdc-light-deeppurple/theme.css +15 -4
  30. package/resources/themes/mdc-light-indigo/theme.css +15 -4
  31. package/resources/themes/nova/theme.css +15 -4
  32. package/resources/themes/nova-accent/theme.css +15 -4
  33. package/resources/themes/nova-alt/theme.css +15 -4
  34. package/resources/themes/rhea/theme.css +15 -4
  35. package/resources/themes/saga-blue/theme.css +15 -4
  36. package/resources/themes/saga-green/theme.css +15 -4
  37. package/resources/themes/saga-orange/theme.css +15 -4
  38. package/resources/themes/saga-purple/theme.css +15 -4
  39. package/resources/themes/vela-blue/theme.css +15 -4
  40. package/resources/themes/vela-green/theme.css +15 -4
  41. package/resources/themes/vela-orange/theme.css +15 -4
  42. package/resources/themes/vela-purple/theme.css +15 -4
  43. package/sidebar/primeng-sidebar.metadata.json +1 -1
package/resources/themes/md-light-indigo/theme.css CHANGED
@@ -3654,11 +3654,14 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3654
3654
  .p-sidebar {
3655
3655
  background: #ffffff;
3656
3656
  color: rgba(0, 0, 0, 0.87);
3657
- padding: 1rem;
3658
3657
  border: 0 none;
3659
3658
  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
3660
3659
  }
3661
- .p-sidebar .p-sidebar-close {
3660
+ .p-sidebar .p-sidebar-header {
3661
+ padding: 1rem;
3662
+ }
3663
+ .p-sidebar .p-sidebar-header .p-sidebar-close,
3664
+ .p-sidebar .p-sidebar-header .p-sidebar-icon {
3662
3665
  width: 2.5rem;
3663
3666
  height: 2.5rem;
3664
3667
  color: rgba(0, 0, 0, 0.6);
@@ -3667,16 +3670,24 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3667
3670
  border-radius: 50%;
3668
3671
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
3669
3672
  }
3670
- .p-sidebar .p-sidebar-close:enabled:hover {
3673
+ .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
3674
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
3671
3675
  color: rgba(0, 0, 0, 0.6);
3672
3676
  border-color: transparent;
3673
3677
  background: rgba(0, 0, 0, 0.04);
3674
3678
  }
3675
- .p-sidebar .p-sidebar-close:focus {
3679
+ .p-sidebar .p-sidebar-header .p-sidebar-close:focus,
3680
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:focus {
3676
3681
  outline: 0 none;
3677
3682
  outline-offset: 0;
3678
3683
  box-shadow: none;
3679
3684
  }
3685
+ .p-sidebar .p-sidebar-header + .p-sidebar-content {
3686
+ padding-top: 0;
3687
+ }
3688
+ .p-sidebar .p-sidebar-content {
3689
+ padding: 1rem;
3690
+ }
3680
3691
 
3681
3692
  .p-sidebar-mask.p-component-overlay {
3682
3693
  background: rgba(0, 0, 0, 0.32);
package/resources/themes/mdc-dark-deeppurple/theme.css CHANGED
@@ -3654,11 +3654,14 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3654
3654
  .p-sidebar {
3655
3655
  background: #262626;
3656
3656
  color: rgba(255, 255, 255, 0.87);
3657
- padding: 0.75rem;
3658
3657
  border: 0 none;
3659
3658
  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
3660
3659
  }
3661
- .p-sidebar .p-sidebar-close {
3660
+ .p-sidebar .p-sidebar-header {
3661
+ padding: 0.75rem;
3662
+ }
3663
+ .p-sidebar .p-sidebar-header .p-sidebar-close,
3664
+ .p-sidebar .p-sidebar-header .p-sidebar-icon {
3662
3665
  width: 2rem;
3663
3666
  height: 2rem;
3664
3667
  color: rgba(255, 255, 255, 0.6);
@@ -3667,16 +3670,24 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3667
3670
  border-radius: 50%;
3668
3671
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
3669
3672
  }
3670
- .p-sidebar .p-sidebar-close:enabled:hover {
3673
+ .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
3674
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
3671
3675
  color: rgba(255, 255, 255, 0.6);
3672
3676
  border-color: transparent;
3673
3677
  background: rgba(255, 255, 255, 0.04);
3674
3678
  }
3675
- .p-sidebar .p-sidebar-close:focus {
3679
+ .p-sidebar .p-sidebar-header .p-sidebar-close:focus,
3680
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:focus {
3676
3681
  outline: 0 none;
3677
3682
  outline-offset: 0;
3678
3683
  box-shadow: none;
3679
3684
  }
3685
+ .p-sidebar .p-sidebar-header + .p-sidebar-content {
3686
+ padding-top: 0;
3687
+ }
3688
+ .p-sidebar .p-sidebar-content {
3689
+ padding: 0.75rem;
3690
+ }
3680
3691
 
3681
3692
  .p-sidebar-mask.p-component-overlay {
3682
3693
  background: rgba(0, 0, 0, 0.32);
package/resources/themes/mdc-dark-indigo/theme.css CHANGED
@@ -3654,11 +3654,14 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3654
3654
  .p-sidebar {
3655
3655
  background: #262626;
3656
3656
  color: rgba(255, 255, 255, 0.87);
3657
- padding: 0.75rem;
3658
3657
  border: 0 none;
3659
3658
  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
3660
3659
  }
3661
- .p-sidebar .p-sidebar-close {
3660
+ .p-sidebar .p-sidebar-header {
3661
+ padding: 0.75rem;
3662
+ }
3663
+ .p-sidebar .p-sidebar-header .p-sidebar-close,
3664
+ .p-sidebar .p-sidebar-header .p-sidebar-icon {
3662
3665
  width: 2rem;
3663
3666
  height: 2rem;
3664
3667
  color: rgba(255, 255, 255, 0.6);
@@ -3667,16 +3670,24 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3667
3670
  border-radius: 50%;
3668
3671
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
3669
3672
  }
3670
- .p-sidebar .p-sidebar-close:enabled:hover {
3673
+ .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
3674
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
3671
3675
  color: rgba(255, 255, 255, 0.6);
3672
3676
  border-color: transparent;
3673
3677
  background: rgba(255, 255, 255, 0.04);
3674
3678
  }
3675
- .p-sidebar .p-sidebar-close:focus {
3679
+ .p-sidebar .p-sidebar-header .p-sidebar-close:focus,
3680
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:focus {
3676
3681
  outline: 0 none;
3677
3682
  outline-offset: 0;
3678
3683
  box-shadow: none;
3679
3684
  }
3685
+ .p-sidebar .p-sidebar-header + .p-sidebar-content {
3686
+ padding-top: 0;
3687
+ }
3688
+ .p-sidebar .p-sidebar-content {
3689
+ padding: 0.75rem;
3690
+ }
3680
3691
 
3681
3692
  .p-sidebar-mask.p-component-overlay {
3682
3693
  background: rgba(0, 0, 0, 0.32);
package/resources/themes/mdc-light-deeppurple/theme.css CHANGED
@@ -3654,11 +3654,14 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3654
3654
  .p-sidebar {
3655
3655
  background: #ffffff;
3656
3656
  color: rgba(0, 0, 0, 0.87);
3657
- padding: 0.75rem;
3658
3657
  border: 0 none;
3659
3658
  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
3660
3659
  }
3661
- .p-sidebar .p-sidebar-close {
3660
+ .p-sidebar .p-sidebar-header {
3661
+ padding: 0.75rem;
3662
+ }
3663
+ .p-sidebar .p-sidebar-header .p-sidebar-close,
3664
+ .p-sidebar .p-sidebar-header .p-sidebar-icon {
3662
3665
  width: 2rem;
3663
3666
  height: 2rem;
3664
3667
  color: rgba(0, 0, 0, 0.6);
@@ -3667,16 +3670,24 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3667
3670
  border-radius: 50%;
3668
3671
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
3669
3672
  }
3670
- .p-sidebar .p-sidebar-close:enabled:hover {
3673
+ .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
3674
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
3671
3675
  color: rgba(0, 0, 0, 0.6);
3672
3676
  border-color: transparent;
3673
3677
  background: rgba(0, 0, 0, 0.04);
3674
3678
  }
3675
- .p-sidebar .p-sidebar-close:focus {
3679
+ .p-sidebar .p-sidebar-header .p-sidebar-close:focus,
3680
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:focus {
3676
3681
  outline: 0 none;
3677
3682
  outline-offset: 0;
3678
3683
  box-shadow: none;
3679
3684
  }
3685
+ .p-sidebar .p-sidebar-header + .p-sidebar-content {
3686
+ padding-top: 0;
3687
+ }
3688
+ .p-sidebar .p-sidebar-content {
3689
+ padding: 0.75rem;
3690
+ }
3680
3691
 
3681
3692
  .p-sidebar-mask.p-component-overlay {
3682
3693
  background: rgba(0, 0, 0, 0.32);
package/resources/themes/mdc-light-indigo/theme.css CHANGED
@@ -3654,11 +3654,14 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3654
3654
  .p-sidebar {
3655
3655
  background: #ffffff;
3656
3656
  color: rgba(0, 0, 0, 0.87);
3657
- padding: 0.75rem;
3658
3657
  border: 0 none;
3659
3658
  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
3660
3659
  }
3661
- .p-sidebar .p-sidebar-close {
3660
+ .p-sidebar .p-sidebar-header {
3661
+ padding: 0.75rem;
3662
+ }
3663
+ .p-sidebar .p-sidebar-header .p-sidebar-close,
3664
+ .p-sidebar .p-sidebar-header .p-sidebar-icon {
3662
3665
  width: 2rem;
3663
3666
  height: 2rem;
3664
3667
  color: rgba(0, 0, 0, 0.6);
@@ -3667,16 +3670,24 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3667
3670
  border-radius: 50%;
3668
3671
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
3669
3672
  }
3670
- .p-sidebar .p-sidebar-close:enabled:hover {
3673
+ .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
3674
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
3671
3675
  color: rgba(0, 0, 0, 0.6);
3672
3676
  border-color: transparent;
3673
3677
  background: rgba(0, 0, 0, 0.04);
3674
3678
  }
3675
- .p-sidebar .p-sidebar-close:focus {
3679
+ .p-sidebar .p-sidebar-header .p-sidebar-close:focus,
3680
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:focus {
3676
3681
  outline: 0 none;
3677
3682
  outline-offset: 0;
3678
3683
  box-shadow: none;
3679
3684
  }
3685
+ .p-sidebar .p-sidebar-header + .p-sidebar-content {
3686
+ padding-top: 0;
3687
+ }
3688
+ .p-sidebar .p-sidebar-content {
3689
+ padding: 0.75rem;
3690
+ }
3680
3691
 
3681
3692
  .p-sidebar-mask.p-component-overlay {
3682
3693
  background: rgba(0, 0, 0, 0.32);
package/resources/themes/nova/theme.css CHANGED
@@ -3618,11 +3618,14 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3618
3618
  .p-sidebar {
3619
3619
  background: #ffffff;
3620
3620
  color: #333333;
3621
- padding: 0.571rem 1rem;
3622
3621
  border: 1px solid #c8c8c8;
3623
3622
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
3624
3623
  }
3625
- .p-sidebar .p-sidebar-close {
3624
+ .p-sidebar .p-sidebar-header {
3625
+ padding: 0.857rem 1rem;
3626
+ }
3627
+ .p-sidebar .p-sidebar-header .p-sidebar-close,
3628
+ .p-sidebar .p-sidebar-header .p-sidebar-icon {
3626
3629
  width: 2rem;
3627
3630
  height: 2rem;
3628
3631
  color: #a6a6a6;
@@ -3631,16 +3634,24 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3631
3634
  border-radius: 50%;
3632
3635
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
3633
3636
  }
3634
- .p-sidebar .p-sidebar-close:enabled:hover {
3637
+ .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
3638
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
3635
3639
  color: #007ad9;
3636
3640
  border-color: transparent;
3637
3641
  background: transparent;
3638
3642
  }
3639
- .p-sidebar .p-sidebar-close:focus {
3643
+ .p-sidebar .p-sidebar-header .p-sidebar-close:focus,
3644
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:focus {
3640
3645
  outline: 0 none;
3641
3646
  outline-offset: 0;
3642
3647
  box-shadow: 0 0 0 0.2rem #8dcdff;
3643
3648
  }
3649
+ .p-sidebar .p-sidebar-header + .p-sidebar-content {
3650
+ padding-top: 0;
3651
+ }
3652
+ .p-sidebar .p-sidebar-content {
3653
+ padding: 0.571rem 1rem;
3654
+ }
3644
3655
 
3645
3656
  .p-sidebar-mask.p-component-overlay {
3646
3657
  background: rgba(0, 0, 0, 0.4);
package/resources/themes/nova-accent/theme.css CHANGED
@@ -3606,11 +3606,14 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3606
3606
  .p-sidebar {
3607
3607
  background: #ffffff;
3608
3608
  color: #333333;
3609
- padding: 0.571rem 1rem;
3610
3609
  border: 1px solid #c8c8c8;
3611
3610
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
3612
3611
  }
3613
- .p-sidebar .p-sidebar-close {
3612
+ .p-sidebar .p-sidebar-header {
3613
+ padding: 0.857rem 1rem;
3614
+ }
3615
+ .p-sidebar .p-sidebar-header .p-sidebar-close,
3616
+ .p-sidebar .p-sidebar-header .p-sidebar-icon {
3614
3617
  width: 2rem;
3615
3618
  height: 2rem;
3616
3619
  color: #a6a6a6;
@@ -3619,16 +3622,24 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3619
3622
  border-radius: 50%;
3620
3623
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
3621
3624
  }
3622
- .p-sidebar .p-sidebar-close:enabled:hover {
3625
+ .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
3626
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
3623
3627
  color: #007ad9;
3624
3628
  border-color: transparent;
3625
3629
  background: transparent;
3626
3630
  }
3627
- .p-sidebar .p-sidebar-close:focus {
3631
+ .p-sidebar .p-sidebar-header .p-sidebar-close:focus,
3632
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:focus {
3628
3633
  outline: 0 none;
3629
3634
  outline-offset: 0;
3630
3635
  box-shadow: 0 0 0 0.2rem #8dcdff;
3631
3636
  }
3637
+ .p-sidebar .p-sidebar-header + .p-sidebar-content {
3638
+ padding-top: 0;
3639
+ }
3640
+ .p-sidebar .p-sidebar-content {
3641
+ padding: 0.571rem 1rem;
3642
+ }
3632
3643
 
3633
3644
  .p-sidebar-mask.p-component-overlay {
3634
3645
  background: rgba(0, 0, 0, 0.4);
package/resources/themes/nova-alt/theme.css CHANGED
@@ -3618,11 +3618,14 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3618
3618
  .p-sidebar {
3619
3619
  background: #ffffff;
3620
3620
  color: #333333;
3621
- padding: 0.571rem 1rem;
3622
3621
  border: 1px solid #c8c8c8;
3623
3622
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
3624
3623
  }
3625
- .p-sidebar .p-sidebar-close {
3624
+ .p-sidebar .p-sidebar-header {
3625
+ padding: 0.857rem 1rem;
3626
+ }
3627
+ .p-sidebar .p-sidebar-header .p-sidebar-close,
3628
+ .p-sidebar .p-sidebar-header .p-sidebar-icon {
3626
3629
  width: 2rem;
3627
3630
  height: 2rem;
3628
3631
  color: #a6a6a6;
@@ -3631,16 +3634,24 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3631
3634
  border-radius: 50%;
3632
3635
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
3633
3636
  }
3634
- .p-sidebar .p-sidebar-close:enabled:hover {
3637
+ .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
3638
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
3635
3639
  color: #007ad9;
3636
3640
  border-color: transparent;
3637
3641
  background: transparent;
3638
3642
  }
3639
- .p-sidebar .p-sidebar-close:focus {
3643
+ .p-sidebar .p-sidebar-header .p-sidebar-close:focus,
3644
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:focus {
3640
3645
  outline: 0 none;
3641
3646
  outline-offset: 0;
3642
3647
  box-shadow: 0 0 0 0.2rem #8dcdff;
3643
3648
  }
3649
+ .p-sidebar .p-sidebar-header + .p-sidebar-content {
3650
+ padding-top: 0;
3651
+ }
3652
+ .p-sidebar .p-sidebar-content {
3653
+ padding: 0.571rem 1rem;
3654
+ }
3644
3655
 
3645
3656
  .p-sidebar-mask.p-component-overlay {
3646
3657
  background: rgba(0, 0, 0, 0.4);
package/resources/themes/rhea/theme.css CHANGED
@@ -3606,11 +3606,14 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3606
3606
  .p-sidebar {
3607
3607
  background: #ffffff;
3608
3608
  color: #666666;
3609
- padding: 0.571rem 1rem;
3610
3609
  border: 1px solid #f1f1f1;
3611
3610
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
3612
3611
  }
3613
- .p-sidebar .p-sidebar-close {
3612
+ .p-sidebar .p-sidebar-header {
3613
+ padding: 0.857rem 1rem;
3614
+ }
3615
+ .p-sidebar .p-sidebar-header .p-sidebar-close,
3616
+ .p-sidebar .p-sidebar-header .p-sidebar-icon {
3614
3617
  width: 2rem;
3615
3618
  height: 2rem;
3616
3619
  color: #a6a6a6;
@@ -3619,16 +3622,24 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3619
3622
  border-radius: 50%;
3620
3623
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
3621
3624
  }
3622
- .p-sidebar .p-sidebar-close:enabled:hover {
3625
+ .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
3626
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
3623
3627
  color: #666666;
3624
3628
  border-color: transparent;
3625
3629
  background: transparent;
3626
3630
  }
3627
- .p-sidebar .p-sidebar-close:focus {
3631
+ .p-sidebar .p-sidebar-header .p-sidebar-close:focus,
3632
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:focus {
3628
3633
  outline: 0 none;
3629
3634
  outline-offset: 0;
3630
3635
  box-shadow: 0 0 0 0.2rem #e4e9ec;
3631
3636
  }
3637
+ .p-sidebar .p-sidebar-header + .p-sidebar-content {
3638
+ padding-top: 0;
3639
+ }
3640
+ .p-sidebar .p-sidebar-content {
3641
+ padding: 0.571rem 1rem;
3642
+ }
3632
3643
 
3633
3644
  .p-sidebar-mask.p-component-overlay {
3634
3645
  background: rgba(0, 0, 0, 0.4);
package/resources/themes/saga-blue/theme.css CHANGED
@@ -3630,11 +3630,14 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3630
3630
  .p-sidebar {
3631
3631
  background: #ffffff;
3632
3632
  color: #495057;
3633
- padding: 1rem;
3634
3633
  border: 0 none;
3635
3634
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
3636
3635
  }
3637
- .p-sidebar .p-sidebar-close {
3636
+ .p-sidebar .p-sidebar-header {
3637
+ padding: 1rem;
3638
+ }
3639
+ .p-sidebar .p-sidebar-header .p-sidebar-close,
3640
+ .p-sidebar .p-sidebar-header .p-sidebar-icon {
3638
3641
  width: 2rem;
3639
3642
  height: 2rem;
3640
3643
  color: #6c757d;
@@ -3643,16 +3646,24 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3643
3646
  border-radius: 50%;
3644
3647
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
3645
3648
  }
3646
- .p-sidebar .p-sidebar-close:enabled:hover {
3649
+ .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
3650
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
3647
3651
  color: #495057;
3648
3652
  border-color: transparent;
3649
3653
  background: #e9ecef;
3650
3654
  }
3651
- .p-sidebar .p-sidebar-close:focus {
3655
+ .p-sidebar .p-sidebar-header .p-sidebar-close:focus,
3656
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:focus {
3652
3657
  outline: 0 none;
3653
3658
  outline-offset: 0;
3654
3659
  box-shadow: 0 0 0 0.2rem #a6d5fa;
3655
3660
  }
3661
+ .p-sidebar .p-sidebar-header + .p-sidebar-content {
3662
+ padding-top: 0;
3663
+ }
3664
+ .p-sidebar .p-sidebar-content {
3665
+ padding: 1rem;
3666
+ }
3656
3667
 
3657
3668
  .p-sidebar-mask.p-component-overlay {
3658
3669
  background: rgba(0, 0, 0, 0.4);
package/resources/themes/saga-green/theme.css CHANGED
@@ -3630,11 +3630,14 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3630
3630
  .p-sidebar {
3631
3631
  background: #ffffff;
3632
3632
  color: #495057;
3633
- padding: 1rem;
3634
3633
  border: 0 none;
3635
3634
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
3636
3635
  }
3637
- .p-sidebar .p-sidebar-close {
3636
+ .p-sidebar .p-sidebar-header {
3637
+ padding: 1rem;
3638
+ }
3639
+ .p-sidebar .p-sidebar-header .p-sidebar-close,
3640
+ .p-sidebar .p-sidebar-header .p-sidebar-icon {
3638
3641
  width: 2rem;
3639
3642
  height: 2rem;
3640
3643
  color: #6c757d;
@@ -3643,16 +3646,24 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3643
3646
  border-radius: 50%;
3644
3647
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
3645
3648
  }
3646
- .p-sidebar .p-sidebar-close:enabled:hover {
3649
+ .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
3650
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
3647
3651
  color: #495057;
3648
3652
  border-color: transparent;
3649
3653
  background: #e9ecef;
3650
3654
  }
3651
- .p-sidebar .p-sidebar-close:focus {
3655
+ .p-sidebar .p-sidebar-header .p-sidebar-close:focus,
3656
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:focus {
3652
3657
  outline: 0 none;
3653
3658
  outline-offset: 0;
3654
3659
  box-shadow: 0 0 0 0.2rem #b7e0b8;
3655
3660
  }
3661
+ .p-sidebar .p-sidebar-header + .p-sidebar-content {
3662
+ padding-top: 0;
3663
+ }
3664
+ .p-sidebar .p-sidebar-content {
3665
+ padding: 1rem;
3666
+ }
3656
3667
 
3657
3668
  .p-sidebar-mask.p-component-overlay {
3658
3669
  background: rgba(0, 0, 0, 0.4);
package/resources/themes/saga-orange/theme.css CHANGED
@@ -3630,11 +3630,14 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3630
3630
  .p-sidebar {
3631
3631
  background: #ffffff;
3632
3632
  color: #495057;
3633
- padding: 1rem;
3634
3633
  border: 0 none;
3635
3634
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
3636
3635
  }
3637
- .p-sidebar .p-sidebar-close {
3636
+ .p-sidebar .p-sidebar-header {
3637
+ padding: 1rem;
3638
+ }
3639
+ .p-sidebar .p-sidebar-header .p-sidebar-close,
3640
+ .p-sidebar .p-sidebar-header .p-sidebar-icon {
3638
3641
  width: 2rem;
3639
3642
  height: 2rem;
3640
3643
  color: #6c757d;
@@ -3643,16 +3646,24 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3643
3646
  border-radius: 50%;
3644
3647
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
3645
3648
  }
3646
- .p-sidebar .p-sidebar-close:enabled:hover {
3649
+ .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
3650
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
3647
3651
  color: #495057;
3648
3652
  border-color: transparent;
3649
3653
  background: #e9ecef;
3650
3654
  }
3651
- .p-sidebar .p-sidebar-close:focus {
3655
+ .p-sidebar .p-sidebar-header .p-sidebar-close:focus,
3656
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:focus {
3652
3657
  outline: 0 none;
3653
3658
  outline-offset: 0;
3654
3659
  box-shadow: 0 0 0 0.2rem #ffe69c;
3655
3660
  }
3661
+ .p-sidebar .p-sidebar-header + .p-sidebar-content {
3662
+ padding-top: 0;
3663
+ }
3664
+ .p-sidebar .p-sidebar-content {
3665
+ padding: 1rem;
3666
+ }
3656
3667
 
3657
3668
  .p-sidebar-mask.p-component-overlay {
3658
3669
  background: rgba(0, 0, 0, 0.4);
package/resources/themes/saga-purple/theme.css CHANGED
@@ -3630,11 +3630,14 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3630
3630
  .p-sidebar {
3631
3631
  background: #ffffff;
3632
3632
  color: #495057;
3633
- padding: 1rem;
3634
3633
  border: 0 none;
3635
3634
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
3636
3635
  }
3637
- .p-sidebar .p-sidebar-close {
3636
+ .p-sidebar .p-sidebar-header {
3637
+ padding: 1rem;
3638
+ }
3639
+ .p-sidebar .p-sidebar-header .p-sidebar-close,
3640
+ .p-sidebar .p-sidebar-header .p-sidebar-icon {
3638
3641
  width: 2rem;
3639
3642
  height: 2rem;
3640
3643
  color: #6c757d;
@@ -3643,16 +3646,24 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3643
3646
  border-radius: 50%;
3644
3647
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
3645
3648
  }
3646
- .p-sidebar .p-sidebar-close:enabled:hover {
3649
+ .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
3650
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
3647
3651
  color: #495057;
3648
3652
  border-color: transparent;
3649
3653
  background: #e9ecef;
3650
3654
  }
3651
- .p-sidebar .p-sidebar-close:focus {
3655
+ .p-sidebar .p-sidebar-header .p-sidebar-close:focus,
3656
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:focus {
3652
3657
  outline: 0 none;
3653
3658
  outline-offset: 0;
3654
3659
  box-shadow: 0 0 0 0.2rem #df9eea;
3655
3660
  }
3661
+ .p-sidebar .p-sidebar-header + .p-sidebar-content {
3662
+ padding-top: 0;
3663
+ }
3664
+ .p-sidebar .p-sidebar-content {
3665
+ padding: 1rem;
3666
+ }
3656
3667
 
3657
3668
  .p-sidebar-mask.p-component-overlay {
3658
3669
  background: rgba(0, 0, 0, 0.4);
package/resources/themes/vela-blue/theme.css CHANGED
@@ -3630,11 +3630,14 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3630
3630
  .p-sidebar {
3631
3631
  background: #1f2d40;
3632
3632
  color: rgba(255, 255, 255, 0.87);
3633
- padding: 1rem;
3634
3633
  border: 1px solid #304562;
3635
3634
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
3636
3635
  }
3637
- .p-sidebar .p-sidebar-close {
3636
+ .p-sidebar .p-sidebar-header {
3637
+ padding: 1rem;
3638
+ }
3639
+ .p-sidebar .p-sidebar-header .p-sidebar-close,
3640
+ .p-sidebar .p-sidebar-header .p-sidebar-icon {
3638
3641
  width: 2rem;
3639
3642
  height: 2rem;
3640
3643
  color: rgba(255, 255, 255, 0.6);
@@ -3643,16 +3646,24 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3643
3646
  border-radius: 50%;
3644
3647
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
3645
3648
  }
3646
- .p-sidebar .p-sidebar-close:enabled:hover {
3649
+ .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
3650
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
3647
3651
  color: rgba(255, 255, 255, 0.87);
3648
3652
  border-color: transparent;
3649
3653
  background: rgba(255, 255, 255, 0.03);
3650
3654
  }
3651
- .p-sidebar .p-sidebar-close:focus {
3655
+ .p-sidebar .p-sidebar-header .p-sidebar-close:focus,
3656
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:focus {
3652
3657
  outline: 0 none;
3653
3658
  outline-offset: 0;
3654
3659
  box-shadow: 0 0 0 1px #93cbf9;
3655
3660
  }
3661
+ .p-sidebar .p-sidebar-header + .p-sidebar-content {
3662
+ padding-top: 0;
3663
+ }
3664
+ .p-sidebar .p-sidebar-content {
3665
+ padding: 1rem;
3666
+ }
3656
3667
 
3657
3668
  .p-sidebar-mask.p-component-overlay {
3658
3669
  background: rgba(0, 0, 0, 0.4);
package/resources/themes/vela-green/theme.css CHANGED
@@ -3630,11 +3630,14 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3630
3630
  .p-sidebar {
3631
3631
  background: #1f2d40;
3632
3632
  color: rgba(255, 255, 255, 0.87);
3633
- padding: 1rem;
3634
3633
  border: 1px solid #304562;
3635
3634
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
3636
3635
  }
3637
- .p-sidebar .p-sidebar-close {
3636
+ .p-sidebar .p-sidebar-header {
3637
+ padding: 1rem;
3638
+ }
3639
+ .p-sidebar .p-sidebar-header .p-sidebar-close,
3640
+ .p-sidebar .p-sidebar-header .p-sidebar-icon {
3638
3641
  width: 2rem;
3639
3642
  height: 2rem;
3640
3643
  color: rgba(255, 255, 255, 0.6);
@@ -3643,16 +3646,24 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
3643
3646
  border-radius: 50%;
3644
3647
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
3645
3648
  }
3646
- .p-sidebar .p-sidebar-close:enabled:hover {
3649
+ .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
3650
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
3647
3651
  color: rgba(255, 255, 255, 0.87);
3648
3652
  border-color: transparent;
3649
3653
  background: rgba(255, 255, 255, 0.03);
3650
3654
  }
3651
- .p-sidebar .p-sidebar-close:focus {
3655
+ .p-sidebar .p-sidebar-header .p-sidebar-close:focus,
3656
+ .p-sidebar .p-sidebar-header .p-sidebar-icon:focus {
3652
3657
  outline: 0 none;
3653
3658
  outline-offset: 0;
3654
3659
  box-shadow: 0 0 0 1px #a7d8a9;
3655
3660
  }
3661
+ .p-sidebar .p-sidebar-header + .p-sidebar-content {
3662
+ padding-top: 0;
3663
+ }
3664
+ .p-sidebar .p-sidebar-content {
3665
+ padding: 1rem;
3666
+ }
3656
3667
 
3657
3668
  .p-sidebar-mask.p-component-overlay {
3658
3669
  background: rgba(0, 0, 0, 0.4);