diff --git a/scss/_variables.scss b/scss/_variables.scss index bef7c3841029..c0355bbe414b 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -232,8 +232,8 @@ $enable-important-utilities: true !default; $spacer: 1rem !default; $spacers: ( 0: 0, - 1: $spacer * .25, - 2: $spacer * .5, + 1: $spacer / 4, + 2: $spacer / 2, 3: $spacer, 4: $spacer * 1.5, 5: $spacer * 3, @@ -916,8 +916,8 @@ $dropdown-link-active-bg: $component-active-bg !default; $dropdown-link-disabled-color: $gray-600 !default; -$dropdown-item-padding-y: .25rem !default; -$dropdown-item-padding-x: 1.5rem !default; +$dropdown-item-padding-y: $spacer / 4 !default; +$dropdown-item-padding-x: $spacer !default; $dropdown-header-color: $gray-600 !default; $dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default; @@ -957,22 +957,22 @@ $pagination-disabled-border-color: $gray-300 !default; // Cards -$card-spacer-y: 1.25rem !default; -$card-spacer-x: 1.25rem !default; -$card-title-spacer-y: .75rem !default; +$card-spacer-y: $spacer !default; +$card-spacer-x: $spacer !default; +$card-title-spacer-y: $spacer / 2 !default; $card-border-width: $border-width !default; $card-border-radius: $border-radius !default; $card-border-color: rgba($black, .125) !default; $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default; -$card-cap-padding-y: .75rem !default; -$card-cap-padding-x: 1.25rem !default; +$card-cap-padding-y: $card-spacer-y / 2 !default; +$card-cap-padding-x: $card-spacer-x !default; $card-cap-bg: rgba($black, .03) !default; $card-cap-color: null !default; $card-height: null !default; $card-color: null !default; $card-bg: $white !default; -$card-img-overlay-padding: 1.25rem !default; +$card-img-overlay-padding: $spacer !default; $card-group-margin: $grid-gutter-width / 2 !default; @@ -985,8 +985,8 @@ $tooltip-color: $white !default; $tooltip-bg: $black !default; $tooltip-border-radius: $border-radius !default; $tooltip-opacity: .9 !default; -$tooltip-padding-y: .25rem !default; -$tooltip-padding-x: .5rem !default; +$tooltip-padding-y: $spacer / 4 !default; +$tooltip-padding-x: $spacer / 2 !default; $tooltip-margin: 0 !default; $tooltip-arrow-width: .8rem !default; @@ -1016,11 +1016,11 @@ $popover-box-shadow: $box-shadow !default; $popover-header-bg: darken($popover-bg, 3%) !default; $popover-header-color: $headings-color !default; $popover-header-padding-y: .5rem !default; -$popover-header-padding-x: .75rem !default; +$popover-header-padding-x: $spacer !default; $popover-body-color: $body-color !default; -$popover-body-padding-y: $popover-header-padding-y !default; -$popover-body-padding-x: $popover-header-padding-x !default; +$popover-body-padding-y: $spacer !default; +$popover-body-padding-x: $spacer !default; $popover-arrow-width: 1rem !default; $popover-arrow-height: .5rem !default; @@ -1060,7 +1060,7 @@ $badge-border-radius: $border-radius !default; // Modals // Padding applied to the modal body -$modal-inner-padding: 1rem !default; +$modal-inner-padding: $spacer !default; // Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding $modal-footer-margin-between: .5rem !default; @@ -1085,8 +1085,8 @@ $modal-header-border-color: $border-color !default; $modal-footer-border-color: $modal-header-border-color !default; $modal-header-border-width: $modal-content-border-width !default; $modal-footer-border-width: $modal-header-border-width !default; -$modal-header-padding-y: 1rem !default; -$modal-header-padding-x: 1rem !default; +$modal-header-padding-y: $modal-inner-padding !default; +$modal-header-padding-x: $modal-inner-padding !default; $modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility $modal-sm: 300px !default; @@ -1104,8 +1104,8 @@ $modal-scale-transform: scale(1.02) !default; // // Define alert colors, border radius, and padding. -$alert-padding-y: .75rem !default; -$alert-padding-x: 1.25rem !default; +$alert-padding-y: $spacer !default; +$alert-padding-x: $spacer !default; $alert-margin-bottom: 1rem !default; $alert-border-radius: $border-radius !default; $alert-link-font-weight: $font-weight-bold !default; @@ -1137,8 +1137,8 @@ $list-group-border-color: rgba($black, .125) !default; $list-group-border-width: $border-width !default; $list-group-border-radius: $border-radius !default; -$list-group-item-padding-y: .75rem !default; -$list-group-item-padding-x: 1.25rem !default; +$list-group-item-padding-y: $spacer / 2 !default; +$list-group-item-padding-x: $spacer !default; $list-group-item-bg-level: -9 !default; $list-group-item-color-level: 6 !default; @@ -1176,21 +1176,16 @@ $figure-caption-color: $gray-600 !default; // Breadcrumbs $breadcrumb-font-size: null !default; - -$breadcrumb-padding-y: .75rem !default; -$breadcrumb-padding-x: 1rem !default; +$breadcrumb-padding-y: $spacer / 2 !default; +$breadcrumb-padding-x: $spacer !default; $breadcrumb-item-padding-x: .5rem !default; - $breadcrumb-margin-bottom: 1rem !default; - $breadcrumb-bg: $gray-200 !default; $breadcrumb-divider-color: $gray-600 !default; $breadcrumb-active-color: $gray-600 !default; $breadcrumb-divider: quote("/") !default; - $breadcrumb-border-radius: $border-radius !default; - // Carousel $carousel-control-color: $white !default; diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss index 4bb27fdda190..fac919e22f27 100644 --- a/site/assets/scss/_subnav.scss +++ b/site/assets/scss/_subnav.scss @@ -15,7 +15,7 @@ font-weight: 600; background-image: escape-svg($dropdown-active-icon); background-repeat: no-repeat; - background-position: .4rem .6rem; + background-position: right $dropdown-item-padding-x top .6rem; background-size: .75rem .75rem; } diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md index 44c0421bceeb..1fc4c7027f62 100644 --- a/site/content/docs/4.3/migration.md +++ b/site/content/docs/4.3/migration.md @@ -125,6 +125,8 @@ Changes to Reboot, typography, tables, and more. ## Components +- Unified `padding` values for alerts, breadcrumbs, cards, dropdowns, list groups, modals, popovers, and tooltips to be based on our `$spacer` variable. [See #30564](https://github.com/twbs/bootstrap/pull/30564). + ### Disabled states - Disabled states of the buttons, close button, pagination link & form range now have `pointer-events: none` added. This simplifies our codebase and makes it easier to override active states in CSS. [#29296](https://github.com/twbs/bootstrap/pull/29296).