maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed dropdown component styling, added new shadow-dropdown (#4211)

This commit is contained in:
Peer Richelsen 2022-09-06 19:56:13 +02:00 committed by GitHub
parent f9d639b157
commit 62ab3056a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/config/tailwind-preset.js
View File

@ -151,6 +151,9 @@ module.exports = {
900: "#f3f4f6",
},
},
boxShadow: {
dropdown: "0px 2px 6px -1px rgba(0, 0, 0, 0.08)",
},
fontFamily: {
cal: ['"Cal Sans"', "sans-serif"],
mono: ["Roboto Mono", "monospace"],

6
packages/ui/v2/core/Dropdown.tsx
View File

@ -34,7 +34,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
portalled={props.portalled}
align={align}
{...props}
className="w-50 relative z-10 mt-1 -ml-0 origin-top-right rounded-md bg-white text-sm ring-1 ring-black ring-opacity-5 focus:outline-none"
className="shadow-dropdown w-50 relative z-10 mt-1 -ml-0 origin-top-right rounded-md border border-gray-200 bg-white text-sm"
ref={forwardedRef}>
{children}
</DropdownMenuPrimitive.Content>
@ -124,12 +124,12 @@ export const DropdownItem = (props: DropdownItemProps) => {
<ButtonOrLink
{...props}
className={classNames(
"inline-flex items-center px-3 py-[10px] text-gray-600",
"inline-flex items-center px-3 py-2 text-gray-700 hover:text-gray-900",
props.color === "destructive" ? "hover:bg-red-100 hover:text-red-700" : " hover:bg-gray-100"
)}>
<>
{StartIcon && <StartIcon />}
<div className="mx-2 text-black">{props.children}</div>
<div className="mx-2">{props.children}</div>
{EndIcon && <EndIcon />}
</>
</ButtonOrLink>