From 3170d7deb450cb8ea2ec512fb2df36b1b45d912e Mon Sep 17 00:00:00 2001 From: Novy San87 Date: Mon, 3 Aug 2026 18:39:58 +0700 Subject: [PATCH] Fix tumpang tindih icon & placeholder di input pencarian MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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) --- resources/css/app.css | 35 ++++++++++++++++++++--------------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/resources/css/app.css b/resources/css/app.css index f83e5fa..9618508 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -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 */