Skip to content

Commit

Permalink
Revert border-color change (#36238)
Browse files Browse the repository at this point in the history
* Revert `border-color` change

* Add new border-color-translucent for when we want optional alpha-transparency in our border-color

Apply to drodpowns, modals, offcanvas, popovers, and toasts

* bundlewatch
  • Loading branch information
mdo authored Apr 29, 2022
1 parent ebb1f48 commit 7745730
Show file tree
Hide file tree
Showing 4 changed files with 16 additions and 10 deletions.
2 changes: 1 addition & 1 deletion .bundlewatch.config.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
},
{
"path": "./dist/css/bootstrap-reboot.css",
"maxSize": "2.55 kB"
"maxSize": "2.75 kB"
},
{
"path": "./dist/css/bootstrap-reboot.min.css",
Expand Down
1 change: 1 addition & 0 deletions scss/_root.scss
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@
--#{$prefix}border-width: #{$border-width};
--#{$prefix}border-style: #{$border-style};
--#{$prefix}border-color: #{$border-color};
--#{$prefix}border-color-translucent: #{$border-color-translucent};
--#{$prefix}border-opacity: 1;

--#{$prefix}border-radius: #{$border-radius};
Expand Down
15 changes: 8 additions & 7 deletions scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -487,7 +487,8 @@ $border-widths: (
) !default;

$border-style: solid !default;
$border-color: rgba($black, .15) !default;
$border-color: $gray-300 !default;
$border-color-translucent: rgba($black, .175) !default;
// scss-docs-end border-variables

// scss-docs-start border-radius-variables
Expand Down Expand Up @@ -1133,7 +1134,7 @@ $dropdown-spacer: .125rem !default;
$dropdown-font-size: $font-size-base !default;
$dropdown-color: $body-color !default;
$dropdown-bg: $white !default;
$dropdown-border-color: rgba($black, .15) !default;
$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
$dropdown-border-radius: $border-radius !default;
$dropdown-border-width: $border-width !default;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
Expand Down Expand Up @@ -1234,7 +1235,7 @@ $card-spacer-y: $spacer !default;
$card-spacer-x: $spacer !default;
$card-title-spacer-y: $spacer * .5 !default;
$card-border-width: $border-width !default;
$card-border-color: var(--#{$prefix}border-color) !default;
$card-border-color: var(--#{$prefix}border-color-translucent) !default;
$card-border-radius: $border-radius !default;
$card-box-shadow: null !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
Expand Down Expand Up @@ -1323,7 +1324,7 @@ $popover-font-size: $font-size-sm !default;
$popover-bg: $white !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-color: rgba($black, .2) !default;
$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
$popover-border-radius: $border-radius-lg !default;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
$popover-box-shadow: $box-shadow !default;
Expand All @@ -1345,7 +1346,7 @@ $popover-arrow-height: .5rem !default;
// fusv-disable
// Deprecated in Bootstrap 5.2.0 for CSS variables
$popover-arrow-color: $popover-bg !default;
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
$popover-arrow-outer-color: var(--#{$prefix}border-color-translucent) !default;
// fusv-enable


Expand All @@ -1359,7 +1360,7 @@ $toast-font-size: .875rem !default;
$toast-color: null !default;
$toast-background-color: rgba($white, .85) !default;
$toast-border-width: $border-width !default;
$toast-border-color: var(--#{$prefix}border-color) !default;
$toast-border-color: var(--#{$prefix}border-color-translucent) !default;
$toast-border-radius: $border-radius !default;
$toast-box-shadow: $box-shadow !default;
$toast-spacing: $container-padding-x !default;
Expand Down Expand Up @@ -1396,7 +1397,7 @@ $modal-title-line-height: $line-height-base !default;

$modal-content-color: null !default;
$modal-content-bg: $white !default;
$modal-content-border-color: var(--#{$prefix}border-color) !default;
$modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
$modal-content-border-width: $border-width !default;
$modal-content-border-radius: $border-radius-lg !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
Expand Down
8 changes: 6 additions & 2 deletions site/content/docs/5.1/utilities/borders.md
Original file line number Diff line number Diff line change
Expand Up @@ -124,15 +124,19 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from
{{< placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" >}}
{{< /example >}}

## Sass
## CSS

### Variables

{{< scss-docs name="root-border-var" file="scss/_root.scss" >}}

### Sass variables

{{< scss-docs name="border-variables" file="scss/_variables.scss" >}}

{{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}}

### Mixins
### Sass mixins

{{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}}

Expand Down

0 comments on commit 7745730

Please sign in to comment.