From 57661dff6d444ac50bcb685425a704544bb653d9 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Mon, 13 Aug 2018 09:00:53 +0200
Subject: [PATCH] Tweak modal transform (#27005)
---
scss/_modal.scss | 4 ++--
scss/_variables.scss | 2 ++
site/docs/4.1/components/modal.md | 6 ++++++
3 files changed, 10 insertions(+), 2 deletions(-)
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 5eadbf5b84..df8da68ffa 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -43,10 +43,10 @@
// When fading in the modal, animate it to slide down
.modal.fade & {
@include transition($modal-transition);
- transform: translate(0, -25%);
+ transform: $modal-fade-transform;
}
.modal.show & {
- transform: translate(0, 0);
+ transform: $modal-show-transform;
}
}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 8ac3bc583a..be13b56476 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -831,6 +831,8 @@ $modal-lg: 800px !default;
$modal-md: 500px !default;
$modal-sm: 300px !default;
+$modal-fade-transform: translate(0, -50px) !default;
+$modal-show-transform: none !default;
$modal-transition: transform .3s ease-out !default;
diff --git a/site/docs/4.1/components/modal.md b/site/docs/4.1/components/modal.md
index ac9bf18e7c..2da7d8f3c3 100644
--- a/site/docs/4.1/components/modal.md
+++ b/site/docs/4.1/components/modal.md
@@ -448,6 +448,12 @@ $('#exampleModal').on('show.bs.modal', function (event) {
})
{% endhighlight %}
+### Change animation
+
+The `$modal-fade-transform` variable determines the transform state of `.modal-dialog` before the modal fade-in animation, the `$modal-show-transform` variable determines the transform of `.modal-dialog` at the end of the modal fade-in animation.
+
+If you want for example a zoom-in animation, you can set `$modal-fade-transform: scale(.8)`.
+
### Remove animation
For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup.
--
GitLab