[Button, Icon] Loading icon Position in Button was not rotating around center #361
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ding icon button had wrong anchor position
lubber-de
added
type/bug
y0hami
removed
the
state/awaiting-reviews
Merged
exoego
pushed a commit
to exoego/Fomantic-UI
that referenced
this pull request
Apr 30, 2019
The icon padding had to be adjusted for `compact labeled icon button`, because the positioning of the icon was optimized to support loading icons in fomantic#361 Closes fomantic#598
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
A
loading iconwithin a button was rotated around a wrong anchor position (similiar to the Fix in #336 )labeled icon button(a loading spinner was rotating the background sqare before if you tried it)Due to the fixes you are now finally able to correctly use loading icons in buttons together with text by either using
labeled icon buttonor justicon button.After fixing it, the used
notched circle iconused in the fiddle still looked slightly misaligned. It turned out this is due to the icon in FontAwesome itself not being centered accurately.To proove this, i added an example in the fiddle below where you can obviously see it. The 100% circle background stays fixed while the spinning icon does not precisely although it`s a 100% square (same pixel height/width/font-size)
Testcase
http://jsfiddle.net/bztsj9wm/3/
Remove the CSS to see the previous wrong behavior
Screenshot
Broken (spinners move around wrong anchor and
labeled icon buttonrotated background colorFixed, all looks fine 😄
Closes
Semantic-Org/Semantic-UI#3971
Semantic-Org/Semantic-UI#2271
Semantic-Org/Semantic-UI#6124
Semantic-Org/Semantic-UI#916