49 lines
2.6 KiB
TypeScript
49 lines
2.6 KiB
TypeScript
/** Shared Tailwind class strings for platform modals / buttons. */
|
|
|
|
export const modalBackdropClass =
|
|
"fixed inset-0 z-20 grid place-items-center bg-[rgb(10_27_45/43%)] backdrop-blur-[2px]";
|
|
|
|
export const modalPanelClass =
|
|
"modal-panel w-[min(520px,calc(100vw-40px))] overflow-visible rounded-[11px] border border-[#dce4eb] bg-white shadow-[0_24px_70px_rgb(8_27_48/25%)]";
|
|
|
|
export const modalCompactClass =
|
|
"modal-panel flex max-h-[80vh] w-[min(480px,calc(100vw-40px))] flex-col overflow-visible rounded-[11px] border border-[#dce4eb] bg-white shadow-[0_24px_70px_rgb(8_27_48/25%)]";
|
|
|
|
export const modalHeaderClass =
|
|
"flex shrink-0 items-center justify-between border-b border-[#e7ecf1] px-[22px] pb-4 pt-5";
|
|
|
|
export const modalEyebrowClass =
|
|
"text-[9px] font-extrabold tracking-[0.12em] text-[#2d82d4]";
|
|
|
|
export const modalTitleClass = "mt-1 text-[19px] text-[#1c2d42]";
|
|
|
|
export const modalFormClass = "flex-1 overflow-y-auto px-[22px] pt-[19px]";
|
|
|
|
export const modalFooterClass =
|
|
"mt-[3px] flex shrink-0 justify-end gap-2 border-t border-[#e8edf2] bg-[#fafbfc] px-[22px] py-3.5 -mx-[22px]";
|
|
|
|
export const iconButtonClass =
|
|
"grid size-[34px] cursor-pointer place-items-center rounded-[7px] border border-[#dfe6ed] bg-white hover:border-[#b9c9da] hover:bg-[#f7faff]";
|
|
|
|
export const primaryButtonClass =
|
|
"inline-flex min-h-[37px] cursor-pointer items-center justify-center gap-[7px] rounded-md border border-[#126ac3] bg-gradient-to-br from-[#1881e7] to-[#1268c9] px-[15px] text-xs font-[650] text-white shadow-[0_6px_15px_rgb(20_111_202/18%)] hover:from-[#1175d8] hover:to-[#0e5bad] disabled:cursor-not-allowed disabled:opacity-[0.58]";
|
|
|
|
export const secondaryButtonClass =
|
|
"inline-flex min-h-[37px] cursor-pointer items-center justify-center gap-[7px] rounded-md border border-[#d8e1e9] bg-white px-[15px] text-xs font-[650] text-[#56687c]";
|
|
|
|
export const destinationChipClass =
|
|
"mb-[15px] flex items-center gap-[7px] rounded-md border border-[#dce7ef] bg-[#f7fafc] px-2.5 py-[9px] text-[10px] text-[#587087] [&_svg]:fill-[#f7c84a] [&_svg]:text-[#dda321]";
|
|
|
|
export const formFieldClass =
|
|
"mb-[17px] flex flex-col gap-[7px] text-xs font-[650] text-[#3c4e62]";
|
|
|
|
export const formControlClass =
|
|
"w-full rounded-md border border-[#d6e0e9] bg-white px-[11px] text-xs text-[#283a4e] outline-none focus:border-[#5b9ddb] focus:shadow-[0_0_0_3px_rgb(38_125_207/8%)]";
|
|
|
|
export const formInputClass = `${formControlClass} h-[39px]`;
|
|
|
|
export const formTextareaClass =
|
|
`${formControlClass} min-h-[92px] resize-y py-2.5 leading-[1.55]`;
|
|
|
|
export const formHintClass = "text-[9px] font-normal text-[#98a5b3]";
|