shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): button w/ dropdown z-indices (#1230)

Browse Source 
* fix(ui): button w/ dropdown z-indices

* fix(ui): restore hover/focus z-indices
This commit is contained in:
TheCatLady
2021-03-19 20:42:44 -04:00
committed by GitHub
parent 4a00617fe4
commit 015671f5be
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Common/ButtonWithDropdown/index.tsx
View File

@@ -80,7 +80,7 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
} }
return ( return (
<span className="relative z-0 inline-flex h-full rounded-md shadow-sm"> <span className="relative inline-flex h-full rounded-md shadow-sm">
<button <button
type="button" type="button"
className={`relative inline-flex h-full items-center px-4 py-2 text-sm leading-5 font-medium z-10 hover:z-20 focus:z-20 focus:outline-none transition ease-in-out duration-150 ${ className={`relative inline-flex h-full items-center px-4 py-2 text-sm leading-5 font-medium z-10 hover:z-20 focus:z-20 focus:outline-none transition ease-in-out duration-150 ${
@@ -92,10 +92,10 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
{text} {text}
</button> </button>
{children && ( {children && (
<span className="relative z-10 block -ml-px"> <span className="relative block -ml-px">
<button <button
type="button" type="button"
className={`relative inline-flex items-center h-full px-2 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out rounded-r-md focus:z-10 ${styleClasses.dropdownSideButtonClasses}`} className={`relative inline-flex items-center h-full px-2 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out rounded-r-md z-10 hover:z-20 focus:z-20 ${styleClasses.dropdownSideButtonClasses}`}
aria-label="Expand" aria-label="Expand"
onClick={() => setIsOpen((state) => !state)} onClick={() => setIsOpen((state) => !state)}
> >
@@ -125,7 +125,7 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<div className="absolute right-0 w-56 mt-2 -mr-1 origin-top-right rounded-md shadow-lg"> <div className="absolute right-0 z-40 w-56 mt-2 -mr-1 origin-top-right rounded-md shadow-lg">
<div <div
className={`rounded-md ring-1 ring-black ring-opacity-5 ${styleClasses.dropdownClasses}`} className={`rounded-md ring-1 ring-black ring-opacity-5 ${styleClasses.dropdownClasses}`}
> >

2
src/styles/globals.css
View File

@@ -79,7 +79,7 @@ h1 > .media-year {
} }
.media-actions { .media-actions {
@apply relative z-10 flex flex-wrap items-center justify-center flex-shrink-0 mt-4 sm:justify-end sm:flex-nowrap xl:mt-0; @apply relative flex flex-wrap items-center justify-center flex-shrink-0 mt-4 sm:justify-end sm:flex-nowrap xl:mt-0;
} }
.media-actions > * { .media-actions > * {