webfussel/propapier
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: only delete swipe, edit on tap

Browse source 
Edit price cards on tap, only delete swipe exists, fixed dialogs, add ripple
This commit is contained in:
Fiona Lena Urban 2025-05-12 14:56:05 +02:00
parent 1a5dd102e0
commit 38cd37cf74
9 changed files with 145 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

71
app/assets/styles/dialog.css Normal file
View file

@ -0,0 +1,71 @@
dialog {
top: 50%;
left: 50%;
width: 100vw;
translate: -50% -50%;
border: none;
border-radius: var(--radius-default);
background: var(--color-lightest);
font-size: 1rem;
color: var(--color-darkest);
position: relative;
opacity: 0;
scale: 0;
transition:
opacity var(--transition-default) ease-out,
scale var(--transition-default) ease-out,
overlay var(--transition-default) ease-out allow-discrete,
display var(--transition-default) ease-out allow-discrete;
&[open] {
opacity: 1;
scale: 1;
&::backdrop {
background-color: rgb(0 0 0 / 25%);
}
}
&::backdrop {
z-index: 2000;
background-color: rgb(0 0 0 / 0%);
transition:
display var(--transition-default) allow-discrete,
overlay var(--transition-default) allow-discrete,
background-color var(--transition-default);
}
& > .wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
}
& header {
justify-content: space-between;
align-items: center;
padding: var(--padding-default) var(--padding-default) 0;
}
main {
padding: 0 var(--padding-default);
}
& footer {
justify-content: space-between;
padding: 0 var(--padding-default) var(--padding-default);
}
}
@starting-style {
dialog[open] {
opacity: 0;
scale: 0;
&::backdrop {
background-color: rgb(0 0 0 / 0%);
}
}
}

37
app/assets/styles/general.css
View file

@ -171,41 +171,4 @@ body {
.grow {
flex-grow: 1;
height: 10px;
}
dialog {
top: 50%;
left: 50%;
width: 100vw;
transform: translate(-50%, -50%);
border: none;
border-radius: var(--radius-default);
background: var(--color-lightest);
font-size: 1rem;
color: var(--color-darkest);
& > .wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
}
& header {
justify-content: space-between;
align-items: center;
padding: var(--padding-default) var(--padding-default) 0;
}
main {
padding: 0 var(--padding-default);
}
& footer {
justify-content: space-between;
padding: 0 var(--padding-default) var(--padding-default);
}
&::backdrop {
background: rgba(0, 0, 0, 0.5);
}
}

2
app/assets/styles/toolbar.css
View file

@ -4,7 +4,7 @@
background: var(--color-main-darkest);
position: sticky;
bottom: 0;
z-index: 100;
z-index: 1000;
box-shadow: var(--box-shadow-upper);
& > .Button {