granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Disable modal animation on mobile and other CSS fixes

Browse source
This commit is contained in:
Justin Edmund 2023-02-03 20:52:52 -08:00
parent 64304a2b92
commit fe488bbb2e
4 changed files with 116 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/AccountModal/index.scss
View file

@ -10,6 +10,10 @@
flex-direction: column;
gap: $unit-2x;
padding: 0 $unit-4x;
@include breakpoint(phone) {
gap: $unit-4x;
}
}
.DialogDescription {

15
components/DialogContent/index.scss
View file

@ -16,8 +16,8 @@
.DialogContent {
$multiplier: 4;
animation: $duration-modal-open cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal
none running openModalDesktop;
// animation: $duration-modal-open cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal
// none running openModalDesktop;
background: var(--dialog-bg);
border-radius: $card-corner;
box-sizing: border-box;
@ -42,16 +42,19 @@
}
@include breakpoint(phone) {
animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running
openModalMobile;
// animation: slideUp;
// animation-duration: 3s;
// animation-fill-mode: forwards;
// animation-play-state: running;
// animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
min-width: inherit;
min-height: 80vh;
min-height: 90vh;
transform: initial;
left: 0;
right: 0;
top: 0;
top: 5vh;
height: auto;
width: 100%;
}

105
styles/globals.scss
View file

@ -1,4 +1,5 @@
@import '~meyer-reset-scss';
@import 'keyframes.scss';
@import 'themes.scss';
html {
@ -299,107 +300,3 @@ i.tag {
grid-template-columns: 1fr 1fr;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes openModalDesktop {
0% {
opacity: 0;
transform: scale(0.96);
}
100% {
// opacity: 1;
transform: scale(1);
}
}
@keyframes openModalMobile {
0% {
opacity: 0;
transform: translate(0%, 100%);
}
100% {
// opacity: 1;
transform: translate(0, 30%);
}
}
@keyframes slideLeft {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes slideRight {
from {
transform: translateX(var(--radix-toast-swipe-end-x));
}
to {
transform: translateX(100%);
}
}
@keyframes fadeInFilter {
from {
backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0);
}
to {
backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1);
}
}
@keyframes scaleIn {
0% {
opacity: 0;
transform: scale(0);
}
20% {
opacity: 0.2;
transform: scale(0.4);
}
40% {
opacity: 0.4;
transform: scale(0.8);
}
60% {
opacity: 0.6;
transform: scale(1);
}
65% {
opacity: 0.65;
transform: scale(1.1);
}
70% {
opacity: 0.7;
transform: scale(1);
}
75% {
opacity: 0.75;
transform: scale(0.98);
}
80% {
opacity: 0.8;
transform: scale(1.02);
}
90% {
opacity: 0.9;
transform: scale(0.96);
}
100% {
opacity: 1;
transform: scale(1);
}
}

102
styles/keyframes.scss Normal file
View file

@ -0,0 +1,102 @@
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes openModalDesktop {
0% {
opacity: 0;
transform: scale(0.96);
}
100% {
// opacity: 1;
transform: scale(1);
}
}
@keyframes slideUp {
0% {
opacity: 0;
transform: translate(0%, 100%);
}
100% {
transform: translate(0, 5%);
}
}
@keyframes slideLeft {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes slideRight {
from {
transform: translateX(var(--radix-toast-swipe-end-x));
}
to {
transform: translateX(100%);
}
}
@keyframes fadeInFilter {
from {
backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0);
}
to {
backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1);
}
}
@keyframes scaleIn {
0% {
opacity: 0;
transform: scale(0);
}
20% {
opacity: 0.2;
transform: scale(0.4);
}
40% {
opacity: 0.4;
transform: scale(0.8);
}
60% {
opacity: 0.6;
transform: scale(1);
}
65% {
opacity: 0.65;
transform: scale(1.1);
}
70% {
opacity: 0.7;
transform: scale(1);
}
75% {
opacity: 0.75;
transform: scale(0.98);
}
80% {
opacity: 0.8;
transform: scale(1.02);
}
90% {
opacity: 0.9;
transform: scale(0.96);
}
100% {
opacity: 1;
transform: scale(1);
}
}