diff options
| author | Shohei Yoshida <[email protected]> | 2019-05-28 21:21:45 +0900 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2019-05-30 11:58:34 +0300 |
| commit | 9d075734cbedab97aa00281c3db1307b3ebdf8f1 (patch) | |
| tree | 2e9a780c46d14154af581481651b49a2bfca1d12 | |
| parent | 9508c4c11bdc51d1d616db77255060070c1cf943 (diff) | |
| download | bootstrap-9d075734cbedab97aa00281c3db1307b3ebdf8f1.tar.xz bootstrap-9d075734cbedab97aa00281c3db1307b3ebdf8f1.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 8822d48d8..64467a87d 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -941,6 +941,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; |