Skip to content
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.

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

Apply border to primary button if on log in page (and not in a dark container) or if in header #12558

Merged
merged 2 commits into from
Nov 22, 2018

Conversation

jancborchardt
Copy link
Member

fix #12294, please review @nextcloud/designers @schiessle

For buttons on dark background, like in the header of the share page, there still is white border:
primary button on dark background

For buttons elsewhere in the main content, where they are on white background, the border color is the same as the background color:
primary button on white background

We could also go with border:none; which looks even better, but then also need an exception for theming:
primary button border none

In general we still need something for light theming colors … as usual. @juliushaertl @skjnldsv any idea? Maybe again cap the color at a specific lightness and then use the standard border color?

I am not sure whether this is something for 15 in any case as this has a bunch of potential for regressions and looking strange too.

…ontainer) or if in header, fix #12294

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
@skjnldsv
Copy link
Member

skjnldsv commented Nov 20, 2018

In general we still need something for light theming colors … as usual. @juliushaertl @skjnldsv any idea? Maybe again cap the color at a specific lightness and then use the standard border color?

I'll suggest a translucent border (#0003) for light colours. It should automatically apply the background as primary.
capture d ecran_2018-11-20_17-27-15

@jancborchardt
Copy link
Member Author

@skjnldsv could you add a commit to implement that, or give me a pointer for this?

@skjnldsv
Copy link
Member

@jancborchardt sure, you need to do it on the theming scss. :)
If inverted: border-color: rgba(0,0,0,0.3)

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
@jancborchardt
Copy link
Member Author

jancborchardt commented Nov 21, 2018

@skjnldsv done, I think. :) Thanks for the pointer!
skip button border

@jancborchardt
Copy link
Member Author

@schiessle @MariusBluem @juliushaertl @MorrisJobke as you were involved in the "blurry buttons" issue, your review is very welcome! :)

@skjnldsv skjnldsv added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Nov 21, 2018
@MorrisJobke MorrisJobke mentioned this pull request Nov 22, 2018
7 tasks
Copy link
Member

@MorrisJobke MorrisJobke left a comment

Choose a reason for hiding this comment

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

Tested and looks a lot better than before 👍

@MorrisJobke MorrisJobke merged commit 2e68b73 into master Nov 22, 2018
@MorrisJobke MorrisJobke deleted the blurry-button branch November 22, 2018 09:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3. to review Waiting for reviews bug design Design, UI, UX, etc. help wanted
Projects
None yet
Development

Successfully merging this pull request may close these issues.

blurry buttons
3 participants