| 1 |
/** |
| 2 |
* Shared Tailwind class strings for admin (no @apply in SCSS). |
| 3 |
* Scope: tailwind.config.js `important` = `.ultimate-store-kit-admin-root` → utilities compile as |
| 4 |
* `.ultimate-store-kit-admin-root .w-full { … }`. Never put `w-*` / `min-w-*` / `max-w-*` (or other |
| 5 |
* Tailwind utilities) on the same element as `ultimate-store-kit-admin-root`; use a child or |
| 6 |
* `display: contents` wrapper (see OfferEditor portal). |
| 7 |
*/ |
| 8 |
|
| 9 |
export const appShell = |
| 10 |
'flex min-h-[calc(100vh-100px)] flex-col m-5 ml-0 mb-0 font-sans'; |
| 11 |
|
| 12 |
/** Row under header: stretch columns to same height so sidebar bg fills to content bottom. */ |
| 13 |
export const bodyRow = 'flex flex-1 items-stretch p-5 gap-5'; |
| 14 |
|
| 15 |
/** Main column grows with page; min-w-0 avoids flex overflow quirks. */ |
| 16 |
export const mainContent = 'min-w-0 flex-1'; |
| 17 |
|
| 18 |
/* Buttons */ |
| 19 |
const btnBase = |
| 20 |
'inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-transparent px-[18px] py-2 text-[13px] font-semibold leading-snug no-underline transition-all duration-200 disabled:cursor-not-allowed disabled:opacity-60'; |
| 21 |
|
| 22 |
export const btnPrimary = `${btnBase} border-uks-brand bg-uks-brand text-white hover:bg-uks-brand-dark`; |
| 23 |
|
| 24 |
export const btnSecondary = `${btnBase} bg-gray-100 border-gray-200 text-gray-700 hover:bg-gray-200 hover:text-gray-800`; |
| 25 |
|
| 26 |
export const btnLg = `${btnBase} px-6 py-2.5 text-sm`; |
| 27 |
|
| 28 |
export const btnSm = `${btnBase} px-3 py-2.5 text-xs`; |
| 29 |
|
| 30 |
export const btnOutlineGreen = `${btnBase} border-uks-brand bg-transparent text-uks-brand hover:bg-uks-brand hover:text-white`; |
| 31 |
|
| 32 |
export const btnOutlineRed = `${btnBase} border-red-500 bg-transparent text-red-500 hover:bg-red-500 hover:text-white`; |
| 33 |
|
| 34 |
export const btnEp = `${btnBase} border-indigo-500 bg-indigo-500 text-white hover:opacity-90`; |
| 35 |
export const btnPs = `${btnBase} border-pink-500 bg-pink-500 text-white hover:opacity-90`; |
| 36 |
export const btnUpk = `${btnBase} border-orange-500 bg-orange-500 text-white hover:opacity-90`; |
| 37 |
export const btnPg = `${btnBase} border-violet-500 bg-violet-500 text-white hover:opacity-90`; |
| 38 |
export const btnZb = `${btnBase} border-teal-500 bg-teal-500 text-white hover:opacity-90`; |
| 39 |
|
| 40 |
/* Form */ |
| 41 |
export const selectLabel = 'whitespace-nowrap text-xs font-semibold text-slate-600'; |
| 42 |
|
| 43 |
export const selectInput = |
| 44 |
'min-w-[140px] cursor-pointer rounded-md border border-slate-200 bg-white px-3 py-1.5 text-[13px] text-slate-700 transition-all duration-200 hover:border-slate-300 focus:border-uks-brand focus:outline-none focus:ring-2 focus:ring-uks-brand'; |
| 45 |
|
| 46 |
export const fieldRow = |
| 47 |
'flex items-center justify-between border-b border-slate-100 py-2.5 last:border-b-0'; |
| 48 |
|
| 49 |
export const fieldLabel = 'flex items-center gap-2 text-[13px] font-medium text-slate-700'; |
| 50 |
|
| 51 |
export const fieldControl = |
| 52 |
'min-w-[120px] w-full block max-w-full rounded-md border border-slate-200 bg-white px-3 py-1.5 text-[13px] text-slate-700 focus:border-uks-brand focus:outline-none focus:ring-2 focus:ring-uks-brand disabled:cursor-not-allowed disabled:opacity-50'; |
| 53 |
|
| 54 |
export const licenseInput = |
| 55 |
'w-full rounded-md border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-700 transition-all duration-200 placeholder:text-slate-400 focus:border-uks-brand focus:outline-none focus:ring-2 focus:ring-uks-brand'; |
| 56 |
|
| 57 |
/* Toggle — self-contained React component; avoids WP admin CSS overrides on peer/transform */ |
| 58 |
export { default as Toggle } from './components/Toggle'; |
| 59 |
|
| 60 |
// Keep these for any legacy usage; new code should use <Toggle /> component |
| 61 |
export const toggleLabel = 'relative inline-block h-[22px] w-10 cursor-pointer'; |
| 62 |
export const toggleInput = 'peer sr-only'; |
| 63 |
export const toggleTrack = |
| 64 |
'pointer-events-none absolute inset-0 rounded-full bg-slate-300 transition-colors duration-200 peer-checked:bg-uks-brand peer-disabled:opacity-50'; |
| 65 |
export const toggleKnob = |
| 66 |
'pointer-events-none absolute bottom-[3px] left-[3px] z-[1] h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-[18px]'; |
| 67 |
|
| 68 |
/* Pro badge on cards */ |
| 69 |
export const proBadge = |
| 70 |
'shrink-0 whitespace-nowrap rounded-md border border-solid border-gray-100 text-uks-brand px-2 py-0.5 text-[10px] font-bold shadow-sm bg-white'; |
| 71 |
|
