Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Adjusted shadows

Browse source
This commit is contained in:
Peter Zimon 2022-07-07 16:04:44 +02:00
parent c1cb977980
commit 508c60bb86
2 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/comments-ui/src/components/AddForm.js
View file

@ -52,12 +52,12 @@ const AddForm = (props) => {
}; };
return ( return (
<form onSubmit={submitForm} onClick={handleFocus} className={`comment-form transition duration-200 border border-neutral-150 hover:border-neutral-200 rounded-md px-3 pt-3 pb-2 -m-3 shadow-lg shadow-neutral-50 hover:shadow-xl hover:shadow-neutral-100 ${focused ? 'cursor-default' : 'cursor-pointer'}`}> <form onSubmit={submitForm} onClick={handleFocus} className={`comment-form transition duration-200 hover:border-neutral-200 rounded-md p-3 -m-3 mt-14 shadow-lg hover:shadow-xl ${focused ? 'cursor-default' : 'cursor-pointer'}`}>
<div className="w-full relative"> <div className="w-full relative">
<div className="pr-3 font-sans leading-normal dark:text-neutral-300"> <div className="pr-3 font-sans leading-normal dark:text-neutral-300">
<div className="relative w-full"> <div className="relative w-full">
<textarea <textarea
className={`transition-[height] pl-[56px] ${focused ? 'mt-8' : 'mt-0'} duration-150 w-full placeholder:text-neutral-300 border-none resize-none rounded-md border border-slate-50 px-0 py-3 font-sans text-[16.5px] mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300 ${focused ? 'cursor-text h-40' : 'cursor-pointer overflow-hidden h-12 hover:border-slate-300'}`} className={`transition-[height] pl-[56px] ${focused ? 'mt-8' : 'mt-0'} duration-150 w-full placeholder:text-neutral-300 border-none resize-none rounded-md border border-slate-50 px-0 py-3 font-sans text-[16.5px] leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300 ${focused ? 'cursor-text h-40' : 'cursor-pointer overflow-hidden h-11 hover:border-slate-300'}`}
value={message} value={message}
onChange={handleChange} onChange={handleChange}
onFocus={handleFocus} onFocus={handleFocus}
@ -66,7 +66,7 @@ const AddForm = (props) => {
placeholder='Join the discussion' placeholder='Join the discussion'
/> />
<button <button
className={`transition-[opacity] duration-150 absolute -right-3 bottom-2 rounded-md border py-3 px-4 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800`} className={`transition-[opacity] duration-150 absolute -right-[9px] bottom-[2px] rounded-md border py-3 px-4 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800`}
type="submit"> type="submit">
Add comment Add comment
</button> </button>

12
apps/comments-ui/tailwind.config.js
View file

@ -100,6 +100,18 @@ module.exports = {
wide: '.018em', wide: '.018em',
wider: '.05em', wider: '.05em',
widest: '.1em' widest: '.1em'
},
boxShadow: {
lg: [
'0px 0px 1px rgba(0, 0, 0, 0.12)',
'0px 4px 8px rgba(0, 0, 0, 0.04)',
'0px 8px 48px rgba(0, 0, 0, 0.05)'
],
xl: [
'0px 0px 1px rgba(0, 0, 0, 0.12)',
'0px 13px 20px rgba(0, 0, 0, 0.04)',
'0px 14px 57px rgba(0, 0, 0, 0.06)'
]
} }
}, },
content: [ content: [