From 9d075734cbedab97aa00281c3db1307b3ebdf8f1 Mon Sep 17 00:00:00 2001
From: Shohei Yoshida <ysds.code@gmail.com>
Date: Tue, 28 May 2019 21:21:45 +0900
Subject: [PATCH] Calc modal header/footer border radius according to the
border width (#28775)
---
scss/_modal.scss | 4 ++--
scss/_variables.scss | 1 +
2 files changed, 3 insertions(+), 2 deletions(-)
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 1a5b9fdaf9..9942678ae8 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 8822d48d8f..64467a87d9 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;
--
GitLab