This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new b9f6c98 update all jewel themes
b9f6c98 is described below
commit b9f6c984d76643e3df2e3abcf2ac2d8f2f361400
Author: Carlos Rovira <[email protected]>
AuthorDate: Mon Sep 10 20:00:14 2018 +0200
update all jewel themes
---
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
.../src/main/resources/defaults.css | 23 ++++++++++++++++++++++
24 files changed, 552 insertions(+)
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
index 59c20a2..31250c8 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: black;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -606,6 +620,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#d43bd1, #b427b1);
border: 1px solid #8a1e88;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
index ea0e63b..162adb5 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: black;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -606,6 +620,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#54b7f3, #24a3ef);
border: 1px solid #0f88d1;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
index 4364dfa..007470f 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: black;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -606,6 +620,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#98cc50, #7eb435);
border: 1px solid #638c29;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
index 07367c2..93c6bda 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: black;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -606,6 +620,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#45c354, #34a241);
border: 1px solid #277b32;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
index 0c6149a..44b33ce 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: black;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -606,6 +620,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#f8a036, #f28809);
border: 1px solid #c16c07;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
index 1532f08..0b5e975 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: black;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -606,6 +620,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#ee343b, #dc121a);
border: 1px solid #ad0e15;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
index 9bfa504..acfe4ba 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: black;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -606,6 +620,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#3481d0, #2767a9);
border: 1px solid #1e4e80;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
index 905dca8..f2e7cfd 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: black;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -606,6 +620,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#f9bb58, #f7a726);
border: 1px solid #e28f08;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
index d482ce1..7664983 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: black;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -606,6 +620,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#f16c42, #ed4812);
border: 1px solid #be390e;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
index 6107b13..3333912 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: black;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -606,6 +620,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#2ebcb2, #24948c);
border: 1px solid #1a6b65;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
index 28e0660..7dceb8c 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: black;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -606,6 +620,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#7432a4, #58267c);
border: 1px solid #3c1a55;
diff --git
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
index 2f9aa79..7dd5105 100644
---
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: black;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -606,6 +620,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#f4e813, #cac00a);
border: 1px solid #999207;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
index 74d81b8..4556d23 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: white;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -605,6 +619,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#d43bd1, #b427b1);
border: 1px solid #8a1e88;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
index 7e9b6de..d5f04e9 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: white;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -605,6 +619,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#54b7f3, #24a3ef);
border: 1px solid #0f88d1;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
index cad7a3d..a0cb15a 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: white;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -605,6 +619,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#98cc50, #7eb435);
border: 1px solid #638c29;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
index 32dc474..16407d5 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: white;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -605,6 +619,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#45c354, #34a241);
border: 1px solid #277b32;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
index 0ea17a1..4586f67 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: white;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -605,6 +619,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#f8a036, #f28809);
border: 1px solid #c16c07;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
index 5cf0a1f..39d616d 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: white;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -605,6 +619,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#ee343b, #dc121a);
border: 1px solid #ad0e15;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
index d10d41b..5d8c569 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: white;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -605,6 +619,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#3481d0, #2767a9);
border: 1px solid #1e4e80;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
index 7a388d2..d1a15a6 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: white;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -605,6 +619,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#f9bb58, #f7a726);
border: 1px solid #e28f08;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
index 106a1b6..5e4040f 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: white;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -605,6 +619,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#f16c42, #ed4812);
border: 1px solid #be390e;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
index c58acf6..72dea80 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: white;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -605,6 +619,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#2ebcb2, #24948c);
border: 1px solid #1a6b65;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
index 540d45e..52b15f9 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: white;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -605,6 +619,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#7432a4, #58267c);
border: 1px solid #3c1a55;
diff --git
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
index 0577b69..0f8538b 100644
---
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
+++
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: white;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
@@ -605,6 +619,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#f4e813, #cac00a);
border: 1px solid #999207;
