fix(css): hover lift na svim karticama + animiraj na nabavka-detalji karticama
Hover lift (.kartica:hover translateY) nije radio na karticama sa .animiraj jer je fadeInUp imao fill-mode both, koji forwards zaključa transform i nadjača hover. Prebačeno na backwards: i dalje nema treperenja na ulazu, a hover sad radi na svim karticama u programu. Kartice „Stavke nabavke" i „Brisanje nabavke" u nabavka_detalji nisu imale .animiraj (previd — stagger u <style> je predviđao tri kartice). Dodato, i stagger pomeren na nth-child(2-4) jer je prvi child .kolone „Nazad" link.
This commit is contained in:
@@ -974,8 +974,10 @@ select {
|
|||||||
.poruka-animacija { animation: slideDown 0.3s ease forwards; }
|
.poruka-animacija { animation: slideDown 0.3s ease forwards; }
|
||||||
.greska-animacija { animation: shake 0.4s ease; }
|
.greska-animacija { animation: shake 0.4s ease; }
|
||||||
|
|
||||||
|
/* backwards (ne both): drži početni frame tokom stagger-delay-a da nema treperenja,
|
||||||
|
ali NE zaključava krajnji transform — pa .kartica:hover lift radi i na .animiraj karticama */
|
||||||
.animiraj {
|
.animiraj {
|
||||||
animation: fadeInUp 0.2s ease both;
|
animation: fadeInUp 0.2s ease backwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Stepenasta (stagger) animacija redova u svim listama — JEDNO mesto za sve tabele.
|
/* Stepenasta (stagger) animacija redova u svim listama — JEDNO mesto za sve tabele.
|
||||||
|
|||||||
@@ -4,9 +4,10 @@
|
|||||||
|
|
||||||
{{define "dodatni-css"}}
|
{{define "dodatni-css"}}
|
||||||
<style>
|
<style>
|
||||||
.detalji-kartica:nth-child(1) { animation-delay: 0.04s; }
|
/* prvi child .kolone je „Nazad" link, pa su kartice na pozicijama 2–4 */
|
||||||
.detalji-kartica:nth-child(2) { animation-delay: 0.12s; }
|
.detalji-kartica:nth-child(2) { animation-delay: 0.04s; }
|
||||||
.detalji-kartica:nth-child(3) { animation-delay: 0.20s; }
|
.detalji-kartica:nth-child(3) { animation-delay: 0.12s; }
|
||||||
|
.detalji-kartica:nth-child(4) { animation-delay: 0.20s; }
|
||||||
</style>
|
</style>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|
||||||
@@ -49,7 +50,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- stavke -->
|
<!-- stavke -->
|
||||||
<div class="kartica detalji-kartica" style="padding:0;overflow:hidden;">
|
<div class="kartica detalji-kartica animiraj" style="padding:0;overflow:hidden;">
|
||||||
<div style="padding:14px 16px;border-bottom:0.5px solid var(--ivica);">
|
<div style="padding:14px 16px;border-bottom:0.5px solid var(--ivica);">
|
||||||
<span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Stavke nabavke</span>
|
<span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Stavke nabavke</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -122,7 +123,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- zona za brisanje -->
|
<!-- zona za brisanje -->
|
||||||
<div class="kartica detalji-kartica" style="border-color:#dc262633;">
|
<div class="kartica detalji-kartica animiraj" style="border-color:#dc262633;">
|
||||||
<div style="display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;">
|
<div style="display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;">
|
||||||
<div style="flex:1;min-width:200px;">
|
<div style="flex:1;min-width:200px;">
|
||||||
<div style="font-size:14px;font-weight:500;color:#dc2626;margin-bottom:4px;">Brisanje nabavke</div>
|
<div style="font-size:14px;font-weight:500;color:#dc2626;margin-bottom:4px;">Brisanje nabavke</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user