60 lines
3.2 KiB
CSS
60 lines
3.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer components {
|
|
/* ── Card ─────────────────────────────────────────────────────────── */
|
|
.card {
|
|
@apply relative flex flex-col min-w-0 break-words bg-white shadow-soft-xl rounded-2xl bg-clip-border;
|
|
}
|
|
.card-header {
|
|
/* border-black/12.5 */
|
|
@apply rounded-t-2xl border-b-0 border-solid p-6 pb-0;
|
|
}
|
|
.card-body {
|
|
@apply flex-auto p-6 pt-4;
|
|
}
|
|
|
|
/* ── Buttons ──────────────────────────────────────────────────────── */
|
|
/* Use display (inline-block / inline-flex) and sizing (px-* py-* w-*) as utilities alongside these. */
|
|
.btn-primary {
|
|
@apply font-bold text-center text-white uppercase align-middle transition-all ease-in border-0 rounded-lg select-none shadow-soft-md bg-150 bg-x-25 leading-pro text-xs bg-gradient-to-tl from-purple-700 to-pink-500 hover:shadow-soft-2xl hover:scale-102 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:scale-100;
|
|
}
|
|
.btn-white {
|
|
@apply font-bold text-center text-slate-700 uppercase align-middle transition-all ease-in bg-white border border-solid border-gray-300 rounded-lg shadow-soft-sm leading-pro text-xs hover:shadow-soft-md hover:scale-102;
|
|
}
|
|
.btn-outlined {
|
|
@apply font-bold text-center uppercase align-middle transition-all bg-transparent border border-solid rounded-lg shadow-none cursor-pointer leading-pro text-xs border-fuchsia-500 ease-soft-in text-fuchsia-500 hover:border-fuchsia-500 active:bg-fuchsia-500 hover:bg-transparent hover:shadow-none;
|
|
}
|
|
|
|
/* ── Forms ────────────────────────────────────────────────────────── */
|
|
.form-label {
|
|
@apply mb-2 text-xs font-semibold text-slate-700 uppercase block;
|
|
}
|
|
.form-input {
|
|
@apply text-sm focus:shadow-soft-primary-outline ease-soft block w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding py-2 px-3 text-gray-700 transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none focus:transition-shadow;
|
|
}
|
|
|
|
/* ── Sidebar nav ──────────────────────────────────────────────────── */
|
|
/* .nav-item-active and .nav-item-inactive are modifiers applied alongside .nav-item */
|
|
.nav-item {
|
|
@apply py-2.7 text-sm ease-nav-brand my-0 mx-4 flex items-center whitespace-nowrap rounded-lg px-4 font-semibold transition-colors;
|
|
}
|
|
.nav-item-active {
|
|
@apply shadow-soft-xl bg-white text-slate-700;
|
|
}
|
|
.nav-item-inactive {
|
|
@apply text-slate-500 hover:text-slate-700;
|
|
}
|
|
/* .nav-icon-active and .nav-icon-inactive are modifiers applied alongside .nav-icon */
|
|
.nav-icon {
|
|
@apply mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-center stroke-0 text-center xl:p-2.5;
|
|
}
|
|
.nav-icon-active {
|
|
@apply bg-gradient-to-tl from-purple-700 to-pink-500 shadow-soft-2xl;
|
|
}
|
|
.nav-icon-inactive {
|
|
@apply bg-white shadow-soft-sm;
|
|
}
|
|
}
|