From 9602a9d08fe1eb956a7a0df43eb10cd903f6f9fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Sat, 8 Oct 2022 21:28:47 +0100
Subject: [PATCH] feat: better modal window
---
examples/web/index.css | 39 +++++++++++++++++++++------------------
1 file changed, 21 insertions(+), 18 deletions(-)
diff --git a/examples/web/index.css b/examples/web/index.css
index 7198481b..156e6151 100644
--- a/examples/web/index.css
+++ b/examples/web/index.css
@@ -346,12 +346,12 @@ p {
position: fixed;
text-align: center;
top: 0px;
- transition: opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
- -o-transition: opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
- -ms-transition: opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
- -moz-transition: opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
- -khtml-transition: opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
- -webkit-transition: opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
+ transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -o-transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -ms-transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -moz-transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -khtml-transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -webkit-transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
width: 100%;
z-index: 10;
}
@@ -394,12 +394,13 @@ p {
-moz-transform: scale(0.96);
-khtml-transform: scale(0.96);
-webkit-transform: scale(0.96);
- transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
- -o-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
- -ms-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
- -moz-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
- -khtml-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
- -webkit-transition: transform 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
+ margin-top: 30px;
+ transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -o-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);;
+ -ms-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);;
+ -moz-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);;
+ -khtml-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);;
+ -webkit-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);;
width: 480px;
}
@@ -411,12 +412,13 @@ p {
-moz-transform: scale(1);
-khtml-transform: scale(1);
-webkit-transform: scale(1);
- transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
- -o-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
- -ms-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
- -moz-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
- -khtml-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
- -webkit-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+ margin-top: 0px;
+ transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -o-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);;
+ -ms-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);;
+ -moz-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);;
+ -khtml-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);;
+ -webkit-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);;
}
.modal-container > .modal .modal-top-buttons {
@@ -451,6 +453,7 @@ p {
.modal-container > .modal .modal-buttons > .button.simple {
margin-right: 12px;
min-width: 120px;
+ display: inline-block;
}
.modal-container > .modal .modal-buttons > .button.simple:last-child {
--
GitLab