8000 Fix input file styles by wrozka · Pull Request #8574 · activeadmin/activeadmin · GitHub
[go: up one dir, main page]
Skip to content

Fix input file styles #8574

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fix input file styles #8574

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a1ca9b1
Fix input file styles
wrozka Dec 12, 2024
bd48e13
Use theme configuration to for file input styling
wrozka Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 16 additions & 7 deletions plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,13 +209,22 @@ export default plugin(
'background-color': 'currentColor',
},
[`[type='file']`]: {
background: 'unset',
'border-color': 'inherit',
'border-width': '0',
'border-radius': '0',
padding: '0',
'font-size': 'unset',
'line-height': 'inherit',
display: 'block',
width: '100%',
cursor: 'pointer',
overflow: 'hidden',
'border-radius': '.5rem',
Copy link
Contributor
@tagliala tagliala Dec 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi and thanks for this PR.

The border-radius seems off to me by taking a look at the screenshot, and it's confirmed because of .375rem in the other buttons

Can you please use the settings from the theme?

I can see

        'border-width': borderWidth['DEFAULT'],

in this file. Don't know exactly how. flowbite works. It looks like it is using rounded-md class

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tagliala Thanks, done! I've updated the PR to use theme config as much as possible. I reviewed the file again and I've realised I could replace all those styles with just one big @apply:

[`[type='file']`]: {
  @apply block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 overflow-hidden;
}

Do you have preferred style? I've seen both inlines and applies in this file.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks

Do you have preferred style?

Can't tell exactly, not my expertise, let's wait for @javierjulio 's review, I guess it should be a mix of both but I can't tell exactly what should be in a class and what in that definition

'border-width': '1px',
'border-color': theme('colors.gray.300', colors.gray[300]),
'background-color': theme('colors.gray.50', colors.gray[50]),
'font-size': '.875rem',
'line-height': '1.25rem',
color: theme('colors.gray.900', colors.gray[900]),
},
[`.dark [type='file']`]: {
'border-color': theme('colors.gray.600', colors.gray[600]),
'background-color': theme('colors.gray.700', colors.gray[700]),
color: theme('colors.gray.400', colors.gray[400]),
},
[`[type='file']:focus`]: {
outline: `1px auto inherit`,
Expand Down
Loading
0