style(app): normalize tailwind utility syntax
This commit is contained in:
@@ -23,15 +23,15 @@ type BackButtonActionProps = BackButtonBaseProps & {
|
||||
export type BackButtonProps = BackButtonLinkProps | BackButtonActionProps;
|
||||
|
||||
const BASE_CLASS_NAME =
|
||||
"inline-flex cursor-pointer items-center justify-center rounded-full border-0 p-0 text-[var(--color-auth-text-primary)] no-underline transition-[background,box-shadow,transform] duration-150 ease-out focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#f657a0]";
|
||||
"inline-flex cursor-pointer items-center justify-center rounded-full border-0 p-0 text-(--color-auth-text-primary) no-underline transition-[background,box-shadow,transform] duration-150 ease-out focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#f657a0]";
|
||||
|
||||
const VARIANT_CLASS_NAMES = {
|
||||
floating:
|
||||
"absolute left-[calc(var(--spacing-xl,20px)+var(--app-safe-left,0px))] top-[calc(var(--spacing-xl,20px)+var(--app-safe-top,0px))] z-[2] size-[var(--back-button-size)] bg-[var(--color-auth-surface)] pr-[2px] shadow-[0_2px_8px_rgba(0,0,0,0.1)] hover:bg-[rgba(0,0,0,0.04)] active:scale-[0.96]",
|
||||
"absolute left-[calc(var(--spacing-xl,20px)+var(--app-safe-left,0px))] top-[calc(var(--spacing-xl,20px)+var(--app-safe-top,0px))] z-2 size-(--back-button-size) bg-(--color-auth-surface) pr-[2px] shadow-[0_2px_8px_rgba(0,0,0,0.1)] hover:bg-[rgba(0,0,0,0.04)] active:scale-96",
|
||||
soft:
|
||||
"size-[var(--responsive-icon-button-size,42px)] border border-[rgba(25,19,22,0.08)] bg-[rgba(255,255,255,0.82)] text-[#21191d] shadow-[0_10px_22px_rgba(50,30,40,0.08)] hover:-translate-y-px hover:bg-white hover:shadow-[0_14px_26px_rgba(50,30,40,0.12)] active:translate-y-px",
|
||||
"size-(--responsive-icon-button-size,42px) border border-[rgba(25,19,22,0.08)] bg-[rgba(255,255,255,0.82)] text-[#21191d] shadow-[0_10px_22px_rgba(50,30,40,0.08)] hover:-translate-y-px hover:bg-white hover:shadow-[0_14px_26px_rgba(50,30,40,0.12)] active:translate-y-px",
|
||||
ghost:
|
||||
"size-8 bg-transparent text-black hover:opacity-70 active:scale-[0.96]",
|
||||
"size-8 bg-transparent text-black hover:opacity-70 active:scale-96",
|
||||
} satisfies Record<NonNullable<BackButtonBaseProps["variant"]>, string>;
|
||||
|
||||
export function BackButton({
|
||||
|
||||
Reference in New Issue
Block a user