hover effect on setting icon and some padding #3352
Conversation
demo/demo.less
Outdated
| @@ -32,6 +32,10 @@ | |||
| .mdl-button .material-icons { | |||
| line-height: 36px; | |||
| } | |||
| //icon is not at the center. this fixes it. | |||
| .mdl-button .material-icons-round { | |||
| padding-top: 3px; | |||
There was a problem hiding this comment.
Is this value dependent on the font size or line height? It would be best to find a robust fix that doesn't have a value dependent on other settings.
There was a problem hiding this comment.
I don't think it depends upon line height. Actually hover effect is applied on .mdl-button and there is not enough space from top for .materials-icons-round (x). hence I found padding to solve the issue.
There was a problem hiding this comment.
This doesn't seem right. The content of the button is not vertically aligned to the middle, and adding padding to the top is a hack. If you reduce the font size, this isn't needed at all, so I don't think it's the right fix.
Let's experiment a bit and see if we can determine a better solution.
There was a problem hiding this comment.
I think I found a better solution.
The button is a display: block at 32x32 and the icon is a display: inline-block at 24x24. Buttons should align their contents to the center by default, but something in MDL may be preventing this from working correctly.
Switching to flex layout makes this easy to fix, though:
.mdl-button--icon {
/* By default, MDL icon buttons may end up vertically off-center. This aligns
* them to the center both vertically and horizontally. */
display: flex;
align-items: center;
justify-content: center;
}What do you think?
There was a problem hiding this comment.
Yaah! it actually works fine!
gosh! why didn't I think about it!!!!
There was a problem hiding this comment.
initially there is no flex in .mdl-button--fab. when i put inline-flex in it. the result is even worst
i think there is problem in material-icons-round to fix both these issue either we need to put padding top by 3px or introduce line height.
There was a problem hiding this comment.
please let me know if we both have same opinion about it!
There was a problem hiding this comment.
Sorry, I should have been more clear. You need both selectors (for --fab and --icon), and you need to set all of the following properties:
.mdl-button--fab,
.mdl-button--icon {
/* By default, MDL icon buttons may end up vertically off-center. This aligns
* them to the center both vertically and horizontally. */
display: inline-flex;
align-items: center;
justify-content: center;
}Setting display to flex doesn't align things to the center by default. You also need the align-items and justify-content properties, each of which aligns in a different axis.
There was a problem hiding this comment.
oh! I got it. sorry I didn't get it for the first time.
I changed the code and everything works fine.
thanks for help.
There was a problem hiding this comment.
No worries! Thank you for collaborating with me!
demo/demo.less
Outdated
| @@ -383,6 +387,10 @@ html, body { | |||
| padding: 0 16px; | |||
| } | |||
|
|
|||
| .app-header .mdl-layout__drawer-button .material-icons:hover { | |||
| transform: rotate(20deg); | |||
There was a problem hiding this comment.
Can you please give a before/after screenshot of this? I am not sure what this does, and your PR description didn't help me figure it out.
There was a problem hiding this comment.
These changes rotates the icon when hover
before
after
actually its difficult to find changes through images as its motion effect.
its like settings icon on YouTube player when clicked
There was a problem hiding this comment.
I played around with this change, and I found that there are two things I dislike about it:
- 20 degrees looks weird. It's a six-sided shape, so intervals of 30 degrees look better than 20 degrees. Otherwise, it just looks crooked.
- Having no transition animation makes the change snap to the rotation instantly, which doesn't provide such a pleasing effect.
Having played around with the settings, I think this looks really nice:
.app-header .mdl-layout__drawer-button .material-icons {
&:hover {
/* Spin the gear icon in the settings menu when hovered. */
transform: rotate(90deg);
}
/* Animate the spin. */
transition: transform 0.5s ease-in-out;
}What do you think?
demo/demo.less
Outdated
| @@ -33,6 +33,14 @@ | |||
| line-height: 36px; | |||
| } | |||
|
|
|||
| .mdl-button--icon { | |||
There was a problem hiding this comment.
This duplicates what you have below, where you do the same for both selectors:
.mdl-button--fab,
.mdl-button--icon {You can delete this one.
|
Thanks for your contribution! Your PR is in queue for testing by our build bot. |
|
All tests passed! |
Co-authored-by: Anshgoyal <anshgo01yal@users.noreply.github.com>
Co-authored-by: Anshgoyal <anshgo01yal@users.noreply.github.com>
github-actions
bot
added
the
status: archived
Description
Screenshots (optional)
Type of change
not work as expected)
Checklist:
./build/all.pyand the build passes./build/test.pyand all tests pass