diff --git a/scss/_popover.scss b/scss/_popover.scss index 0bbaf013fa..d923ecaac7 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -4,15 +4,16 @@ --#{$prefix}popover-max-width: #{$popover-max-width}; @include rfs($popover-font-size, --#{$prefix}popover-font-size); --#{$prefix}popover-line-height: #{$popover-line-height}; // Boosted mod - --#{$prefix}popover-font-weight: #{$popover-font-weight}; // Boosted mod: extra CSS variable + --#{$prefix}popover-font-weight: #{$popover-font-weight}; // Boosted mod --#{$prefix}popover-bg: #{$popover-bg}; --#{$prefix}popover-border-width: #{$popover-border-width}; --#{$prefix}popover-border-color: #{$popover-border-color}; --#{$prefix}popover-border-radius: #{$popover-border-radius}; --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius}; --#{$prefix}popover-box-shadow: #{$popover-box-shadow}; - --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x}; // Boosted mod: deprecated in v5.3.0 - --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y}; // Boosted mod: deprecated in v5.3.0 + --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x}; + --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y}; + --#{$prefix}popover-header-padding-top: #{$popover-header-padding-top}; // Boosted mod --#{$prefix}popover-header-padding-bottom: #{$popover-header-padding-bottom}; // Boosted mod @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size); --#{$prefix}popover-header-line-height: #{$popover-header-line-height}; // Boosted mod @@ -20,6 +21,8 @@ --#{$prefix}popover-header-bg: #{$popover-header-bg}; --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x}; --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y}; + --#{$prefix}popover-body-padding-top: #{$popover-body-padding-top}; // Boosted mod + --#{$prefix}popover-body-padding-bottom: #{$popover-body-padding-bottom}; // Boosted mod --#{$prefix}popover-body-color: #{$popover-body-color}; --#{$prefix}popover-arrow-width: #{$popover-arrow-width}; --#{$prefix}popover-arrow-height: #{$popover-arrow-height}; @@ -29,7 +32,6 @@ z-index: var(--#{$prefix}popover-zindex); display: block; max-width: var(--#{$prefix}popover-max-width); - padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x); // Boosted mod // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. // So reset our font and text properties to avoid inheriting weird values. @include reset-text(); @@ -187,7 +189,7 @@ // Offset the popover to account for the popover arrow .popover-header { - // Boosted mod: no `padding` + padding: var(--#{$prefix}popover-header-padding-y, var(--#{$prefix}popover-header-padding-top)) var(--#{$prefix}popover-header-padding-x) var(--#{$prefix}popover-header-padding-y, var(--#{$prefix}popover-header-padding-bottom)); // Boosted mod: instead of `var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x)` margin-bottom: 0; // Reset the default from Reboot font-weight: var(--#{$prefix}popover-font-weight); // Boosted mod line-height: var(--#{$prefix}popover-header-line-height); // Boosted mod @@ -203,15 +205,15 @@ &:empty { display: none; } - - // Boosted mod: popover body special padding when following a popover header - + .popover-body { - padding-top: var(--#{$prefix}popover-header-padding-bottom); - } - // End mod } .popover-body { - // Boosted mod: no `padding` + padding: var(--#{$prefix}popover-body-padding-y, var(--#{$prefix}popover-body-padding-top)) var(--#{$prefix}popover-body-padding-x) var(--#{$prefix}popover-body-padding-y, var(--#{$prefix}popover-body-padding-bottom)); // Boosted mod: instead of padding: `var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);` color: var(--#{$prefix}popover-body-color); } + +// Boosted mod +:not(.popover-header) + .popover-body { + --#{$prefix}popover-body-padding-y: #{$popover-padding-y}; // Reset value to the defaut y padding popover one when there's only a body +} +// End mod diff --git a/scss/_variables.scss b/scss/_variables.scss index edebcaaf9b..6ac2389c52 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1779,6 +1779,7 @@ $popover-line-height: 1.5 !default; // Boosted mod $popover-font-weight: $font-weight-bold !default; // Boosted mod $popover-bg: var(--#{$prefix}body-bg) !default; $popover-max-width: $spacer * 19 !default; // Boosted mod: instead of `276px` +$popover-padding-y: $spacer !default; // Boosted mod $popover-border-width: var(--#{$prefix}border-width) !default; $popover-border-color: var(--#{$prefix}border-color-translucent) !default; $popover-border-radius: var(--#{$prefix}border-radius-lg) !default; @@ -1789,24 +1790,25 @@ $popover-header-font-size: $font-size-lg !default; // Boosted mod: inst $popover-header-line-height: 1.11 !default; // Boosted mod $popover-header-bg: $popover-bg !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)` $popover-header-color: $headings-color !default; +$popover-header-padding-top: $popover-padding-y !default; // Boosted mod $popover-header-padding-bottom: map-get($spacers, 2) !default; // Boosted mod -// fusv-disable -$popover-header-padding-y: $spacer * .5 !default; // Boosted mod: deprecated in v5.3.0 replaced by `$popover-header-padding-top` and `$popover-header-padding-bottom` -// fusv-enable +$popover-header-padding-y: initial !default; // Boosted mod: instead of `.5rem` $popover-header-padding-x: $spacer * .9 !default; // Boosted mod: instead of `$spacer` $popover-body-color: var(--#{$prefix}body-color) !default; -$popover-body-padding-y: $spacer !default; -$popover-body-padding-x: $popover-header-padding-x !default; +$popover-body-padding-top: 0 !default; // Boosted mod +$popover-body-padding-bottom: $popover-padding-y !default; // Boosted mod +$popover-body-padding-y: initial !default; // Boosted mod: instead of `$spacer` +$popover-body-padding-x: $popover-header-padding-x !default; // Boosted mod: instead of `$spacer` $popover-arrow-width: $spacer !default; // Boosted mod: instead of `1rem` -$popover-arrow-height: $popover-arrow-width * .5 !default; +$popover-arrow-height: $popover-arrow-width * .5 !default; // Boosted mod: instead of `.5rem` // scss-docs-end popover-variables // fusv-disable // Deprecated in Bootstrap 5.2.0 for CSS variables $popover-arrow-color: $popover-bg !default; -$popover-arrow-outer-color: $popover-border-color !default; // Boosted mod +$popover-arrow-outer-color: $popover-border-color !default; // Boosted mod: instead of `var(--#{$prefix}border-color-translucent)` // fusv-enable // Toasts diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index d4fa5b1de5..a31a2ae335 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -228,8 +228,9 @@ .custom-popover { --bs-popover-max-width: 12.5rem; --bs-popover-border-color: var(--bs-primary); + --bs-popover-header-padding-y: .5rem; // Boosted mod --bs-popover-header-bg: var(--bs-primary); - --bs-popover-header-color: var(--bs-black); // Boosted mod: text-dark on primary + --bs-popover-header-color: var(--bs-black); // Boosted mod: instead of `var(--bs-white)` --bs-popover-body-padding-x: 1rem; --bs-popover-body-padding-y: .5rem; } diff --git a/site/content/docs/5.3/components/popovers.md b/site/content/docs/5.3/components/popovers.md index 027f0839b1..66357be50a 100644 --- a/site/content/docs/5.3/components/popovers.md +++ b/site/content/docs/5.3/components/popovers.md @@ -154,6 +154,8 @@ As part of Boosted's evolving CSS variables approach, popovers now use local CSS {{< scss-docs name="popover-css-vars" file="scss/_popover.scss" >}} +Note that `--bs-popover-body-padding-y` and `--bs-popover-header-padding-y` have priority over `--bs-popover-body-padding-bottom` and `--bs-popover-body-padding-top`, and `--bs-popover-header-padding-bottom` and `--bs-popover-header-padding-top`, respectively. + ### Sass variables {{< scss-docs name="popover-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index 1068e30b23..9c62e4bd10 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -271,8 +271,6 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz @@ -289,7 +287,6 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
  • $link-hover-color-dark
  • $mark-bg-dark
  • $mark-color-dark
    • -
  • $popover-header-padding-y
  • $pre-color-dark
  • $table-caption-color-dark
    • @@ -359,8 +356,11 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
  • --bs-nav-underline-link-padding-x
  • --bs-modal-footer-margin-top
  • --bs-offcanvas-transition
    • +
  • --bs-popover-body-padding-bottom
    • +
  • --bs-popover-body-padding-top
  • --bs-popover-header-line-height
  • --bs-popover-header-padding-bottom
    • +
  • --bs-popover-header-padding-top
  • --bs-popover-line-height
  • --bs-primary-bg-subtle
  • --bs-primary-border-subtle
    • @@ -493,9 +493,13 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
  • $modal-footer-margin-top
  • $modal-footer-margin-top-sm
  • $modal-scrollable-footer-margin-top
    • +
  • $popover-body-padding-bottom
    • +
  • $popover-body-padding-top
  • $popover-header-line-height
  • $popover-header-padding-bottom
    • +
  • $popover-header-padding-top
  • $popover-line-height
    • +
  • $popover-padding-y
  • $pre-color-inverted
  • $primary-bg-subtle-dark
  • $primary-bg-subtle