Factor-out scrolling logic and styling for share widget. #12628
Conversation
| @@ -321,8 +317,8 @@ amp-story-page.i-amphtml-story-page-shown { | |||
| opacity: 1!important; | |||
| } | |||
|
|
|||
| .i-amphtml-story-share .i-amphtml-story-share-list > li + li { | |||
| margin-left: 8px!important; | |||
| .i-amphtml-story-share .i-amphtml-story-share-list > li { | |||
There was a problem hiding this comment.
can we remove rules on common tag names like li?
| .i-amphtml-story-share:hover:before { | ||
| width: calc(100% + 16px)!important; | ||
| [desktop] .i-amphtml-story-share:hover:before { | ||
| width: calc(100% - 32px) !important; |
There was a problem hiding this comment.
use transform: scale(0) perhaps?
There was a problem hiding this comment.
probably will need some extra work with scale thing
There was a problem hiding this comment.
Yeah, I was thinking to do that but it's too complicated given the rounded corners. Would basically have to have additional elements/pseudo-elements for the "pill" ends that translate, whilst a middle element scales. Tricky.
Since it was done this way at the beginning and the performance hit for animating width is negligible in this case, I'd rather leave it as it is.
alanorozco
changed the title
| } | ||
|
|
||
| .i-amphtml-story-share .i-amphtml-story-share-list > li { | ||
| .i-amphtml-story-share-pill > * > * > .i-amphtml-story-share-item { |
There was a problem hiding this comment.
Doesn't > * > * > seem fragile? I wouldn't expect e.g. wrapping something in a <div> to completely break it. I don't have context on what this actually is, but maybe we can add a more specific CSS class? I don't feel strongly, but not sure if this will stand the test of time
There was a problem hiding this comment.
Honestly I just wanted to (eagerly) optimize the selector, but we probably don't need to.
| } | ||
|
|
||
| .i-amphtml-story-share-widget-scrollable { | ||
| padding: 16px 0; |
|
|
||
| .i-amphtml-story-share-widget-scrollable { | ||
| padding: 16px 0; | ||
| height: 66px; |
Factor-out scrolling logic for share widget.
Basically to allow multiple rendering modes.
A third rendering style (wrap) is upcoming, so this simplifies things.
Also renames
i-amphtml-story-share(desktop-only) toi-amphtml-story-share-pillfor clarity.