diff options
author | Mark Otto <markd.otto@gmail.com> | 2022-04-29 23:59:41 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-04-29 23:59:41 +0300 |
commit | 7745730e4132eff204bf2afe8351511e595acee6 (patch) | |
tree | befc6db62afd9f37cf9ba4b382fea6abf9d19fc1 | |
parent | ebb1f485d3e750a67ac7633e5044f2fce0749afe (diff) |
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
-rw-r--r-- | .bundlewatch.config.json | 2 | ||||
-rw-r--r-- | scss/_root.scss | 1 | ||||
-rw-r--r-- | scss/_variables.scss | 15 | ||||
-rw-r--r-- | site/content/docs/5.1/utilities/borders.md | 8 |
4 files changed, 16 insertions, 10 deletions
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index b864477107..a041de59e6 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -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", diff --git a/scss/_root.scss b/scss/_root.scss index e1719e5da1..36f9849ef8 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -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}; diff --git a/scss/_variables.scss b/scss/_variables.scss index 6aae8adc55..386889475f 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -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; diff --git a/site/content/docs/5.1/utilities/borders.md b/site/content/docs/5.1/utilities/borders.md index 17d353b322..bba34358eb 100644 --- a/site/content/docs/5.1/utilities/borders.md +++ b/site/content/docs/5.1/utilities/borders.md @@ -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" >}} |