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

Calc modal header/footer border radius according to the border width (#28775)

This commit is contained in:
Shohei Yoshida 2019-05-28 21:21:45 +09:00 committed by Martijn Cuppens
parent 111024695a
commit b28322469e
2 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/_modal.scss
View File

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

1
scss/_variables.scss
View File

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