diff options
| author | Shohei Yoshida <[email protected]> | 2019-05-28 21:21:45 +0900 |
|---|---|---|
| committer | Martijn Cuppens <[email protected]> | 2019-05-28 14:21:45 +0200 |
| commit | b28322469ea23e0a1291b7ab962d1f73262f7a81 (patch) | |
| tree | b10de9648ffecec6ed684b14fa7e6a096a6781eb | |
| parent | 111024695a70e1133256b6aeaac41fae98c8150e (diff) | |
| download | bootstrap-b28322469ea23e0a1291b7ab962d1f73262f7a81.tar.xz bootstrap-b28322469ea23e0a1291b7ab962d1f73262f7a81.zip | |
Calc modal header/footer border radius according to the border width (#28775)
| -rw-r--r-- | scss/_modal.scss | 4 | ||||
| -rw-r--r-- | scss/_variables.scss | 1 |
2 files changed, 3 insertions, 2 deletions
diff --git a/scss/_modal.scss b/scss/_modal.scss index 1a5b9fdaf..9942678ae 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -138,7 +138,7 @@ justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends padding: $modal-header-padding; border-bottom: $modal-header-border-width solid $modal-header-border-color; - @include border-top-radius($modal-content-border-radius); + @include border-top-radius($modal-content-inner-border-radius); .close { padding: $modal-header-padding; @@ -170,7 +170,7 @@ justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items padding: $modal-inner-padding; border-top: $modal-footer-border-width solid $modal-footer-border-color; - @include border-bottom-radius($modal-content-border-radius); + @include border-bottom-radius($modal-content-inner-border-radius); // Easily place margin between footer elements > :not(:first-child) { margin-left: .25rem; } diff --git a/scss/_variables.scss b/scss/_variables.scss index b3268c1e9..79e0793a7 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -936,6 +936,7 @@ $modal-content-bg: $white !default; $modal-content-border-color: rgba($black, .2) !default; $modal-content-border-width: $border-width !default; $modal-content-border-radius: $border-radius-lg !default; +$modal-content-inner-border-radius: calc(#{$modal-content-border-radius} - #{$modal-content-border-width}) !default; $modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default; $modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default; |