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

Update DialogContent styles

Browse source
This commit is contained in:
Justin Edmund 2023-01-20 21:49:55 -08:00
parent cdb85120de
commit a4d6321d64
1 changed files with 22 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
components/DialogContent/index.scss
View file

@ -1,4 +1,6 @@
.Dialog { .Dialog {
// animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running
// openModalDesktop;
position: fixed; position: fixed;
background: none; background: none;
border: 0; border: 0;
@ -14,8 +16,6 @@
.DialogContent { .DialogContent {
$multiplier: 4; $multiplier: 4;
animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running
openModalDesktop;
background: var(--dialog-bg); background: var(--dialog-bg);
border-radius: $card-corner; border-radius: $card-corner;
box-sizing: border-box; box-sizing: border-box;
@ -24,9 +24,12 @@
gap: $unit * $multiplier; gap: $unit * $multiplier;
height: auto; height: auto;
min-width: $unit * 48; min-width: $unit * 48;
min-height: $unit-12x; // min-height: $unit-12x;
overflow-y: scroll;
max-height: 80vh;
min-width: 580px; min-width: 580px;
padding: $unit * $multiplier; // padding: $unit * $multiplier;
position: relative;
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
@ -46,10 +49,15 @@
} }
.DialogHeader { .DialogHeader {
background: var(--dialog-bg);
display: flex; display: flex;
align-items: center; align-items: center;
gap: $unit-2x; gap: $unit-2x;
justify-content: space-between; justify-content: space-between;
padding: $unit-3x ($unit * $multiplier);
position: sticky;
top: 0;
z-index: 10;
.left { .left {
display: flex; display: flex;
@ -119,6 +127,16 @@
flex-grow: 1; flex-grow: 1;
} }
.DialogFooter {
align-items: flex-end;
background: var(--dialog-bg);
bottom: 0;
display: flex;
flex-direction: column;
padding: ($unit * 1.5) ($unit * $multiplier) $unit-3x;
position: sticky;
}
.actions { .actions {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;