kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Revert `border-color` change (#36238) 

* 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
This commit is contained in:
Mark Otto 2022-04-29 13:59:41 -07:00 committed by GitHub
parent ebb1f485d3
commit 7745730e41
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.bundlewatch.config.json
View File

@ -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",

1
scss/_root.scss
View File

@ -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};

15
scss/_variables.scss
View File

@ -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
@ -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;
@ -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;
@ -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;
@ -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
@ -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;
@ -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;

8
site/content/docs/5.1/utilities/borders.md
View File

@ -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" >}}