Content
diff --git a/src/components/Offcanvas/__snapshots__/Offcanvas.spec.tsx.snap b/src/components/Offcanvas/__snapshots__/Offcanvas.spec.tsx.snap
index 92daaab2b..7ab2f846d 100644
--- a/src/components/Offcanvas/__snapshots__/Offcanvas.spec.tsx.snap
+++ b/src/components/Offcanvas/__snapshots__/Offcanvas.spec.tsx.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Offcanvas renders the bottom side variation 1`] = `
-.c1 {
+.c2 {
overflow: auto;
box-sizing: border-box;
background-color: #FFFFFF;
@@ -9,6 +9,9 @@ exports[`Offcanvas renders the bottom side variation 1`] = `
padding: 2.5rem;
height: 28.375rem;
box-shadow: 0 0 0.75rem 0.25rem rgba(0,0,0,0.12);
+}
+
+.c3 {
position: fixed;
left: 0;
right: unset;
@@ -27,31 +30,31 @@ exports[`Offcanvas renders the bottom side variation 1`] = `
bottom: 0;
}
-.c1.centered-card-animation-appear,
-.c1.centered-card-animation-enter {
+.c3.centered-card-animation-appear,
+.c3.centered-card-animation-enter {
opacity: 0;
-webkit-transform: translate(0%,calc(50% + 1rem));
-ms-transform: translate(0%,calc(50% + 1rem));
transform: translate(0%,calc(50% + 1rem));
}
-.c1.centered-card-animation-appear-active,
-.c1.centered-card-animation-enter-active {
+.c3.centered-card-animation-appear-active,
+.c3.centered-card-animation-enter-active {
opacity: 1;
-webkit-transform: translate(0%,0%);
-ms-transform: translate(0%,0%);
transform: translate(0%,0%);
}
-.c1.centered-card-animation-exit {
+.c3.centered-card-animation-exit {
opacity: 1;
-webkit-transform: translate(0%,0%);
-ms-transform: translate(0%,0%);
transform: translate(0%,0%);
}
-.c1.centered-card-animation-exit-done,
-.c1.centered-card-animation-exit-active {
+.c3.centered-card-animation-exit-done,
+.c3.centered-card-animation-exit-active {
opacity: 0;
-webkit-transform: translate(0%,10%);
-ms-transform: translate(0%,10%);
@@ -67,31 +70,34 @@ exports[`Offcanvas renders the bottom side variation 1`] = `
top: 0;
width: 100%;
z-index: 1000;
+}
+
+.c1 {
will-change: opacity;
-webkit-transition: opacity 200ms cubic-bezier(0.215,0.61,0.355,1);
transition: opacity 200ms cubic-bezier(0.215,0.61,0.355,1);
}
-.c0.dimming-fade-animation-appear,
-.c0.dimming-fade-animation-enter {
+.c1.dimming-fade-animation-appear,
+.c1.dimming-fade-animation-enter {
opacity: 0;
}
-.c0.dimming-fade-animation-appear-active,
-.c0.dimming-fade-animation-enter-active {
+.c1.dimming-fade-animation-appear-active,
+.c1.dimming-fade-animation-enter-active {
opacity: 0.6;
}
-.c0.dimming-fade-animation-exit {
+.c1.dimming-fade-animation-exit {
opacity: 0.6;
}
-.c0.dimming-fade-animation-exit-done,
-.c0.dimming-fade-animation-exit-active {
+.c1.dimming-fade-animation-exit-done,
+.c1.dimming-fade-animation-exit-active {
opacity: 0;
}
-.c2 {
+.c4 {
position: absolute;
top: 0.5rem;
right: 0.5rem;
@@ -100,22 +106,22 @@ exports[`Offcanvas renders the bottom side variation 1`] = `
}
@media (max-width:calc( + 2rem)) {
- .c1 {
+ .c3 {
width: calc(100% - 2rem);
}
}