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

fix(form): action input had wrong border radius in some cases #1197

Merged
merged 2 commits into from
Dec 22, 2019

Conversation

exoego
Copy link
Contributor

@exoego exoego commented Nov 27, 2019

Description

.ui.input in .ui.form has border-radius at all corners.

border-radius: @inputFocusBorderRadius;

Unfortunately, this override brings border-radius to .ui.action.input.

This PR removes border-radius from .ui.action.input in .ui.form where radius not needed.

Testcase

https://jsfiddle.net/qdp6gxLy/1/

Screenshot (when possible)

image

Closes

#1184
#1185

@exoego exoego added the type/bug Any issue which is a bug or PR which fixes a bug label Nov 27, 2019
@exoego exoego changed the base branch from master to develop November 27, 2019 10:38
@exoego exoego changed the title Form input focus [Form] Action input in a form should not have right border radius when focused Nov 27, 2019
Copy link
Member

@lubber-de lubber-de left a comment

Choose a reason for hiding this comment

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

Please also support a possible left action
See https://jsfiddle.net/knr2xw71/

image

Right borders in left action inputs are also not rounded anymore when focussed
image

@lubber-de lubber-de added state/awaiting-reviews Pull requests which are waiting for reviews lang/css Anything involving CSS labels Nov 27, 2019
@lubber-de lubber-de added this to the 2.8.3 milestone Nov 27, 2019
@exoego
Copy link
Contributor Author

exoego commented Nov 29, 2019

@lubber-de
Updated a PR in consideration of .left.action.input, fixing #1185
https://jsfiddle.net/3fno0rga/

Copy link
Member

@lubber-de lubber-de left a comment

Choose a reason for hiding this comment

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

LGTM

@exoego exoego changed the title [Form] Action input in a form should not have right border radius when focused [Form] Action input in a form should not have border radius on some cases Nov 29, 2019
Copy link
Contributor

@prudho prudho left a comment

Choose a reason for hiding this comment

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

LGTM

@dutrieux
Copy link
Contributor

@exoego
Do you consider the case with .labeled.input or .right.labeled.input

I update your jsfiddle to see this case : https://jsfiddle.net/dutrieux/4ets2cgm/

@exoego
Copy link
Contributor Author

exoego commented Dec 22, 2019

@dutrieux
Thanks for reporting.
Could you open an issue ?

My first feeling is that the issue you mentioned looks complicated and may require a lot effort, so should be addressed in different PR.
I keep this PR focusing on action input, so get merged soon.

@y0hami y0hami changed the title [Form] Action input in a form should not have border radius on some cases fix(form): action input had wrong border radius in some cases Dec 22, 2019
@y0hami y0hami merged commit 8cb8d8a into fomantic:develop Dec 22, 2019
@lubber-de lubber-de removed the state/awaiting-reviews Pull requests which are waiting for reviews label Dec 22, 2019
@exoego exoego deleted the form-input-focus branch December 22, 2019 22:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
lang/css Anything involving CSS type/bug Any issue which is a bug or PR which fixes a bug
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants