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

CSS updates for modals (except search)

Browse source
This commit is contained in:
Justin Edmund 2022-12-28 17:37:55 -08:00
parent f4cc93d415
commit 2c2a9dd65d
4 changed files with 37 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
components/AboutModal/index.scss
View file

@ -3,6 +3,7 @@
background: none; background: none;
border: 0; border: 0;
inset: 0; inset: 0;
top: 0;
display: grid; display: grid;
place-items: center; place-items: center;
min-height: 100vh; min-height: 100vh;
@ -12,12 +13,19 @@
} }
.About.Dialog { .About.Dialog {
width: $unit * 60;
top: 0; top: 0;
animation: none;
transform: translate(-50%, 0); transform: translate(-50%, 0);
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
margin-top: $unit-10x; margin-top: $unit-10x;
@include breakpoint(phone) {
border-radius: 0;
transform: none;
margin: 0;
}
section { section {
margin-bottom: $unit; margin-bottom: $unit;
@ -102,4 +110,5 @@
place-items: center; place-items: center;
overflow-y: auto; overflow-y: auto;
z-index: 40; z-index: 40;
padding-top: 10%;
} }

12
components/Dialog/index.scss
View file

@ -2,9 +2,10 @@
$multiplier: 4; $multiplier: 4;
animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running
openModal; openModalDesktop;
background: var(--dialog-bg); background: var(--dialog-bg);
border-radius: $card-corner; border-radius: $card-corner;
box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $unit * $multiplier; gap: $unit * $multiplier;
@ -23,8 +24,15 @@
} }
@include breakpoint(phone) { @include breakpoint(phone) {
animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running
openModalMobile;
min-width: inherit; min-width: inherit;
min-height: inherit; min-height: 80vh;
transform: initial;
left: 0;
right: 0;
top: 0;
height: auto;
width: 100%; width: 100%;
} }

4
components/HeaderMenu/index.scss
View file

@ -19,6 +19,10 @@
color: var(--text-tertiary); color: var(--text-tertiary);
font-weight: $normal; font-weight: $normal;
@include breakpoint(phone) {
cursor: pointer;
}
&:hover:not(.disabled) { &:hover:not(.disabled) {
background: var(--menu-bg-item-hover); background: var(--menu-bg-item-hover);
color: var(--text-primary); color: var(--text-primary);

14
styles/globals.scss
View file

@ -298,7 +298,7 @@ i.tag {
} }
} }
@keyframes openModal { @keyframes openModalDesktop {
0% { 0% {
opacity: 0; opacity: 0;
transform: translate(-50%, -48%) scale(0.96); transform: translate(-50%, -48%) scale(0.96);
@ -309,3 +309,15 @@ i.tag {
transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1);
} }
} }
@keyframes openModalMobile {
0% {
opacity: 0;
transform: translate(0%, 100%);
}
100% {
// opacity: 1;
transform: translate(0, 30%);
}
}