Skip to content

Commit

Permalink
v5: Unify spacing across components (twbs#30564)
Browse files Browse the repository at this point in the history 
Co-Authored-By: Martijn Cuppens <martijn.cuppens@gmail.com>
  • Loading branch information
@mdo @MartijnCuppens @olsza
2 people authored and olsza committed Oct 3, 2020
1 parent c6d1ac8 commit 3047c09
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 30 deletions.
53 changes: 24 additions & 29 deletions scss/_variables.scss
View file
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;

Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion site/assets/scss/_subnav.scss
View file
Expand Up @@ -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;
}

Expand Down
2 changes: 2 additions & 0 deletions site/content/docs/4.3/migration.md
View file
Expand Up @@ -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).
Expand Down

0 comments on commit 3047c09

Please sign in to comment.