diff --git a/scss/_modal.scss b/scss/_modal.scss index 49f27d304a..cd07eeccc5 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -79,12 +79,13 @@ display: flex; flex-direction: column; width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog` - // counteract the pointer-events: none; in the .modal-dialog + padding: $modal-content-padding; color: $modal-content-color; + // counteract the pointer-events: none; in the .modal-dialog pointer-events: auto; background-color: $modal-content-bg; background-clip: padding-box; - border: $modal-content-border-width solid $modal-content-border-color; + border: if($modal-content-border-color == null, null, $modal-content-border-width solid $modal-content-border-color); // Boosted mod @include border-radius($modal-content-border-radius); @include box-shadow($modal-content-box-shadow-xs); // Remove focus outline from opened modal @@ -114,7 +115,7 @@ align-items: flex-start; // so the close btn always stays on the upper right corner 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; + border-bottom: if($modal-header-border-color == null, null, $modal-header-border-width solid $modal-header-border-color); // Boosted mod @include border-top-radius($modal-content-inner-border-radius); .close { @@ -148,7 +149,7 @@ align-items: center; // vertically center justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items padding: $modal-inner-padding - $modal-footer-margin-between / 2; - border-top: $modal-footer-border-width solid $modal-footer-border-color; + border-top: if($modal-footer-border-color == null, null, $modal-footer-border-width solid $modal-footer-border-color); // Boosted mod @include border-bottom-radius($modal-content-inner-border-radius); // Place margin between footer elements diff --git a/scss/_variables.scss b/scss/_variables.scss index a4661d0e63..cec22c67ba 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1117,19 +1117,20 @@ $modal-dialog-margin-y-sm-up: map-get($spacers, 4) !default; $modal-title-line-height: $line-height-base !default; +$modal-content-padding: map-get($spacers, 4) !default; // Boosted mod $modal-content-color: null !default; $modal-content-bg: $white !default; -$modal-content-border-color: $black !default; +$modal-content-border-color: null !default; $modal-content-border-width: $border-width !default; $modal-content-border-radius: $border-radius-lg !default; -$modal-content-inner-border-radius: null !default; +$modal-content-inner-border-radius: $border-radius !default; $modal-content-box-shadow-xs: $box-shadow-sm !default; $modal-content-box-shadow-sm-up: $box-shadow !default; $modal-backdrop-bg: $gray-900 !default; $modal-backdrop-opacity: .5 !default; -$modal-header-border-color: $border-color !default; -$modal-footer-border-color: $modal-header-border-color !default; +$modal-header-border-color: null !default; +$modal-footer-border-color: null !default; $modal-header-border-width: $modal-content-border-width !default; $modal-footer-border-width: $modal-header-border-width !default; $modal-header-padding-y: map-get($spacers, 2) !default; @@ -1137,12 +1138,12 @@ $modal-header-padding-x: map-get($spacers, 2) !default; $modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility $modal-sm: 300px !default; -$modal-md: 500px !default; -$modal-lg: 800px !default; -$modal-xl: 1140px !default; +$modal-md: 700px !default; +$modal-lg: 700px !default; +$modal-xl: 700px !default; $modal-fade-transform: translate(0, -50px) !default; -$modal-show-transform: null !default; +$modal-show-transform: none !default; $modal-transition: transform .3s ease-out !default; $modal-scale-transform: scale(1.02) !default;