refactor: move shared swipe CSS from tasks.css to layout.css
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1343,6 +1343,47 @@
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --------------------------------------------------------
|
||||||
|
* Swipe-Wrapper — Gemeinsame Basis (Tasks + Shopping)
|
||||||
|
* Modul-spezifische Styles (.swipe-reveal--edit, .swipe-reveal--delete,
|
||||||
|
* .swipe-row .task-card, .swipe-row .shopping-item) liegen in den Modul-CSS.
|
||||||
|
* -------------------------------------------------------- */
|
||||||
|
.swipe-row {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
margin-bottom: var(--space-2);
|
||||||
|
/* Verhindert ungewolltes Flackern auf iOS */
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reveal-Panels hinter der Karte */
|
||||||
|
.swipe-reveal {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--space-1);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-weight: var(--font-weight-semibold);
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
transition: opacity 0.05s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Gemeinsam: Erledigt / Abhaken (Swipe nach links) */
|
||||||
|
.swipe-reveal--done {
|
||||||
|
right: 0;
|
||||||
|
background-color: var(--color-success);
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
||||||
|
}
|
||||||
|
|
||||||
/* --------------------------------------------------------
|
/* --------------------------------------------------------
|
||||||
* Print-Styles
|
* Print-Styles
|
||||||
* -------------------------------------------------------- */
|
* -------------------------------------------------------- */
|
||||||
|
|||||||
+3
-36
@@ -168,16 +168,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* --------------------------------------------------------
|
/* --------------------------------------------------------
|
||||||
* Swipe-Wrapper (Mobil-Gesten)
|
* Swipe-Wrapper — Task-spezifische Styles
|
||||||
|
* Basis-Styles (.swipe-row, .swipe-reveal, .swipe-reveal--done)
|
||||||
|
* liegen in layout.css
|
||||||
* -------------------------------------------------------- */
|
* -------------------------------------------------------- */
|
||||||
.swipe-row {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
margin-bottom: var(--space-2);
|
|
||||||
/* Verhindert ungewolltes Flackern auf iOS */
|
|
||||||
-webkit-backface-visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Kein Margin mehr am Task-Card selbst (übernimmt swipe-row) */
|
/* Kein Margin mehr am Task-Card selbst (übernimmt swipe-row) */
|
||||||
.swipe-row .task-card {
|
.swipe-row .task-card {
|
||||||
@@ -188,33 +182,6 @@
|
|||||||
will-change: transform;
|
will-change: transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Reveal-Panels hinter der Karte */
|
|
||||||
.swipe-reveal {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 50%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: var(--space-1);
|
|
||||||
font-size: var(--text-xs);
|
|
||||||
font-weight: var(--font-weight-semibold);
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 0;
|
|
||||||
transition: opacity 0.05s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Links hinter der Karte = Erledigt (Swipe nach links) */
|
|
||||||
.swipe-reveal--done {
|
|
||||||
right: 0;
|
|
||||||
background-color: var(--color-success);
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Rechts hinter der Karte = Bearbeiten (Swipe nach rechts) */
|
/* Rechts hinter der Karte = Bearbeiten (Swipe nach rechts) */
|
||||||
.swipe-reveal--edit {
|
.swipe-reveal--edit {
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|||||||
Reference in New Issue
Block a user