nextcloud-libraries / nextcloud-libraries/nextcloud-vue
[NcSelect] border & box-shadow combination seems off in 9.3.1
Nobody has claimed this yet.
- Dominant language
- Vue
- Stars
- 246
- Forks
- 99
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 103
Description
Hey,
in the current release, the border & box-shadow combination looks off.
This is what it looks like while developing an app using nextcloud-docker-dev.
The inspector shows the following CSS being applied:
To check that it's not an issue in the app I'm developing, I cloned the official calendar app into the apps-extra directory, updated the dependency to 9.3.1, which resulted in the same "weird" look.
However, on https://nextcloud-vue-components.netlify.app/#/Components/NcSelect the border/box-shadow looks like it's supposed to:
I guess, it has something to do with this change:
.vs__dropdown-toggle {
@include border.inputLikeBorder('.select--dark', '.select--legacy', var(--vs-border-color));
}
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the NcSelect component and inspect the .vs__dropdown-toggle rule using border.inputLikeBorder, especially the cited commit change. Reproduce the appearance in the reported 9.3.1 setup and compare it with the component shown on the documentation site; done means the border and box-shadow render consistently.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100