Simplify animations
This commit is contained in:
@@ -107,7 +107,7 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.5s;
|
transition: opacity 300ms;
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
@@ -120,7 +120,7 @@
|
|||||||
.ui.modal {
|
.ui.modal {
|
||||||
display: block;
|
display: block;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.5s;
|
transition: opacity 300ms;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -145,7 +145,7 @@
|
|||||||
|
|
||||||
.button.floating {
|
.button.floating {
|
||||||
box-shadow: 0px 8px 8px -5px rgba(0,0,0,35%);
|
box-shadow: 0px 8px 8px -5px rgba(0,0,0,35%);
|
||||||
transition: all 0.3s;
|
transition: all 200ms;
|
||||||
&.white {
|
&.white {
|
||||||
border: solid 1px black;
|
border: solid 1px black;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
@@ -155,7 +155,7 @@
|
|||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
transition: all 0.1s;
|
transition: all 200ms;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
transform: translate(0px, 5px);
|
transform: translate(0px, 5px);
|
||||||
}
|
}
|
||||||
@@ -235,7 +235,7 @@
|
|||||||
max-height: 0;
|
max-height: 0;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
padding: 0 1em 0 2em;
|
padding: 0 1em 0 2em;
|
||||||
transition: all 0.5s ease-out;
|
//transition: all 1s linear;
|
||||||
&.active {
|
&.active {
|
||||||
padding: 0.5em 1em 0.5em 2em;
|
padding: 0.5em 1em 0.5em 2em;
|
||||||
max-height: 150vh;
|
max-height: 150vh;
|
||||||
@@ -392,7 +392,7 @@
|
|||||||
max-height: 80vh;
|
max-height: 80vh;
|
||||||
max-width: 80vw;
|
max-width: 80vw;
|
||||||
transform: rotate3d(1, 0, 0, 90deg);
|
transform: rotate3d(1, 0, 0, 90deg);
|
||||||
transition: transform 1s cubic-bezier(0.500, 0.250, 0.300, 1.650);
|
transition: transform 300ms ease-out;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
@@ -423,7 +423,7 @@
|
|||||||
}
|
}
|
||||||
&.shown {
|
&.shown {
|
||||||
pointer-events: initial;
|
pointer-events: initial;
|
||||||
transition: transform 1s cubic-bezier(0.500, 0.250, 0.300, 1.650);
|
transition: transform 300ms ease-out; // cubic-bezier(0.500, 0.250, 0.300, 1.650);
|
||||||
display: block;
|
display: block;
|
||||||
.popup-body {
|
.popup-body {
|
||||||
transform: rotate3d(1, 0, 0, 0deg);
|
transform: rotate3d(1, 0, 0, 0deg);
|
||||||
|
Reference in New Issue
Block a user