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

fix(ui): use appropriate cursor type for disabled UI elements (#1184)

Browse Source
This commit is contained in:
TheCatLady
2021-03-15 22:29:42 -04:00
committed by GitHub
parent d71b48ad4e
commit b767a58b01
3 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Slider/index.tsx
View File

@@ -163,9 +163,7 @@ const Slider: React.FC<SliderProps> = ({
<div className="absolute right-0 flex -mt-10 text-gray-400"> <div className="absolute right-0 flex -mt-10 text-gray-400">
<button <button
className={`${ className={`${
scrollPos.isStart scrollPos.isStart ? 'text-gray-800' : 'hover:text-white'
? 'cursor-not-allowed text-gray-800'
: 'hover:text-white'
}`} }`}
onClick={() => slide(Direction.LEFT)} onClick={() => slide(Direction.LEFT)}
disabled={scrollPos.isStart} disabled={scrollPos.isStart}
@@ -187,9 +185,7 @@ const Slider: React.FC<SliderProps> = ({
</button> </button>
<button <button
className={`${ className={`${
scrollPos.isEnd scrollPos.isEnd ? 'text-gray-800' : 'hover:text-white'
? 'cursor-not-allowed text-gray-800'
: 'hover:text-white'
}`} }`}
onClick={() => slide(Direction.RIGHT)} onClick={() => slide(Direction.RIGHT)}
disabled={scrollPos.isEnd} disabled={scrollPos.isEnd}

17
src/styles/globals.css
View File

@@ -178,10 +178,6 @@ img.avatar-sm {
@apply flex max-w-lg rounded-md shadow-sm; @apply flex max-w-lg rounded-md shadow-sm;
} }
textarea {
@apply flex-1 block w-full min-w-0 text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5;
}
.label-required { .label-required {
@apply text-red-500; @apply text-red-500;
} }
@@ -206,14 +202,22 @@ label.text-label {
@apply sm:mt-2; @apply sm:mt-2;
} }
button,
input,
select,
textarea {
@apply disabled:cursor-not-allowed;
}
input[type='checkbox'] { input[type='checkbox'] {
@apply w-6 h-6 text-indigo-600 transition duration-150 ease-in-out rounded-md; @apply w-6 h-6 text-indigo-600 transition duration-150 ease-in-out rounded-md;
} }
input[type='text'], input[type='text'],
input[type='password'], input[type='password'],
select { select,
@apply flex-1 block w-full min-w-0 text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5; textarea {
@apply flex-1 block w-full min-w-0 text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md sm:text-sm sm:leading-5;
} }
input.rounded-l-only, input.rounded-l-only,
@@ -234,6 +238,7 @@ select.short {
.protocol { .protocol {
@apply inline-flex items-center px-3 text-gray-100 bg-gray-600 border border-r-0 border-gray-500 cursor-default rounded-l-md sm:text-sm; @apply inline-flex items-center px-3 text-gray-100 bg-gray-600 border border-r-0 border-gray-500 cursor-default rounded-l-md sm:text-sm;
} }
.error { .error {
@apply mt-2 text-sm text-red-500; @apply mt-2 text-sm text-red-500;
} }

1
tailwind.config.js
View File

@@ -59,6 +59,7 @@ module.exports = {
}, },
}, },
variants: { variants: {
cursor: ['disabled'],
padding: ['first', 'last', 'responsive'], padding: ['first', 'last', 'responsive'],
borderWidth: ['first', 'last'], borderWidth: ['first', 'last'],
margin: ['first', 'last', 'responsive'], margin: ['first', 'last', 'responsive'],