novy/aplikasi-ketertiban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix tumpang tindih icon & placeholder di input pencarian

Browse Source 
- Kelas kustom (.input/.btn-primary/.btn-outline/.card) dibungkus
  @layer components — sebelumnya unlayered sehingga menang atas utility
  Tailwind (pl-9 dll), membuat icon search menimpa placeholder
- Sekarang utility (layer utilities) bisa menimpa komponen sesuai urutan
  layer CSS (base < components < utilities)
This commit is contained in:
Novy San87
2026-08-03 18:39:58 +07:00
parent 57d618a1ad
commit 3170d7deb4
1 changed files with 20 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+20 -15
View File
@@ -35,24 +35,29 @@ html { scroll-behavior: smooth; }
background-clip: content-box;
}
/* Kartu standar premium — dipakai konsisten di semua halaman */
.card {
@apply bg-white rounded-2xl border border-slate-200/80 shadow-sm;
}
/* Komponen kustom — dibungkus @layer components agar utility Tailwind
(mis. pl-9, px-2) tetap bisa menimpa saat dibutuhkan (urutan layer:
base < components < utilities). */
@layer components {
/* Kartu standar premium — dipakai konsisten di semua halaman */
.card {
@apply bg-white rounded-2xl border border-slate-200/80 shadow-sm;
}
/* Tombol aksi primer */
.btn-primary {
@apply inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl shadow-md shadow-blue-500/25 hover:shadow-lg hover:shadow-blue-500/30 hover:from-blue-700 hover:to-indigo-700 transition-all duration-200;
}
/* Tombol aksi primer */
.btn-primary {
@apply inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl shadow-md shadow-blue-500/25 hover:shadow-lg hover:shadow-blue-500/30 hover:from-blue-700 hover:to-indigo-700 transition-all duration-200;
}
/* Tombol aksi sekunder (outline lembut) */
.btn-outline {
@apply inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold text-slate-600 bg-white border border-slate-200 rounded-xl hover:text-blue-600 hover:border-blue-200 hover:bg-blue-50/50 transition-all duration-200;
}
/* Tombol aksi sekunder (outline lembut) */
.btn-outline {
@apply inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold text-slate-600 bg-white border border-slate-200 rounded-xl hover:text-blue-600 hover:border-blue-200 hover:bg-blue-50/50 transition-all duration-200;
}
/* Input premium seragam */
.input {
@apply w-full px-3.5 py-2.5 border border-slate-200 rounded-xl text-sm bg-slate-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition;
/* Input premium seragam */
.input {
@apply w-full px-3.5 py-2.5 border border-slate-200 rounded-xl text-sm bg-slate-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition;
}
}
/* Print styles */