aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/scss/_modal.scss
diff options
context:
space:
mode:
Diffstat (limited to 'vendor/twbs/bootstrap/scss/_modal.scss')
-rw-r--r--vendor/twbs/bootstrap/scss/_modal.scss42
1 files changed, 26 insertions, 16 deletions
diff --git a/vendor/twbs/bootstrap/scss/_modal.scss b/vendor/twbs/bootstrap/scss/_modal.scss
index 6b6770b32..9053c173f 100644
--- a/vendor/twbs/bootstrap/scss/_modal.scss
+++ b/vendor/twbs/bootstrap/scss/_modal.scss
@@ -48,14 +48,19 @@
.modal.show & {
transform: $modal-show-transform;
}
+
+ // When trying to close, animate focus to scale
+ .modal.modal-static & {
+ transform: $modal-scale-transform;
+ }
}
.modal-dialog-scrollable {
display: flex; // IE10/11
- max-height: calc(100% - #{$modal-dialog-margin * 2});
+ max-height: subtract(100%, $modal-dialog-margin * 2);
.modal-content {
- max-height: calc(100vh - #{$modal-dialog-margin * 2}); // IE10/11
+ max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11
overflow: hidden;
}
@@ -72,12 +77,12 @@
.modal-dialog-centered {
display: flex;
align-items: center;
- min-height: calc(100% - #{$modal-dialog-margin * 2});
+ min-height: subtract(100%, $modal-dialog-margin * 2);
// Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
&::before {
display: block; // IE10
- height: calc(100vh - #{$modal-dialog-margin * 2});
+ height: subtract(100vh, $modal-dialog-margin * 2);
content: "";
}
@@ -138,7 +143,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;
@@ -158,7 +163,7 @@
.modal-body {
position: relative;
// Enable `flex-grow: 1` so that the body take up as much space as possible
- // when should there be a fixed height on `.modal-dialog`.
+ // when there should be a fixed height on `.modal-dialog`.
flex: 1 1 auto;
padding: $modal-inner-padding;
}
@@ -166,15 +171,20 @@
// Footer (for actions)
.modal-footer {
display: flex;
+ flex-wrap: wrap;
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;
+ padding: $modal-inner-padding - $modal-footer-margin-between / 2;
border-top: $modal-footer-border-width solid $modal-footer-border-color;
- @include border-bottom-radius($modal-content-border-radius);
-
- // Easily place margin between footer elements
- > :not(:first-child) { margin-left: .25rem; }
- > :not(:last-child) { margin-right: .25rem; }
+ @include border-bottom-radius($modal-content-inner-border-radius);
+
+ // Place margin between footer elements
+ // This solution is far from ideal because of the universal selector usage,
+ // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
+ // stylelint-disable-next-line selector-max-universal
+ > * {
+ margin: $modal-footer-margin-between / 2;
+ }
}
// Measure scrollbar width for padding body during modal show/hide
@@ -195,18 +205,18 @@
}
.modal-dialog-scrollable {
- max-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2});
+ max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
.modal-content {
- max-height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
+ max-height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
}
}
.modal-dialog-centered {
- min-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2});
+ min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
&::before {
- height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
+ height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
}
}