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.

Sign up for GitHub

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

Jump to bottom

✨ ♻️ [amp story] [Page attachments] Pre tap animations #34142

Merged
merged 13 commits into from
May 4, 2021
Merged

✨ ♻️ [amp story] [Page attachments] Pre tap animations #34142

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
bbdc5ad
pre-tap animation.
processprocess Apr 30, 2021
dbc3684
Comments. Get win from element.
processprocess Apr 30, 2021
868af5c
Animation variables
processprocess Apr 30, 2021
a0aeeca
Remove whitespace.
processprocess May 3, 2021
d1d8e76
Merge branch 'main' into pre-tap
processprocess May 3, 2021
bbc589b
Merge branch 'main' into pre-tap
processprocess May 3, 2021
5ad22e9
Trigger animations when active.
processprocess May 3, 2021
c515b59
Update test. Comments.
processprocess May 4, 2021
038cb4d
Merge branch 'main' of github.com:ampproject/amphtml into pre-tap
processprocess May 4, 2021
8c9cb2e
Comment.
processprocess May 4, 2021
54560c7
Lint
processprocess May 4, 2021
d603c8d
Merge branch 'main' of github.com:ampproject/amphtml into pre-tap
processprocess May 4, 2021
2ad8f54
Pseudo element.
processprocess May 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
137 changes: 75 additions & 62 deletions extensions/amp-story/1.0/amp-story-open-page-attachment.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,46 +170,36 @@
}

/** For amp-story-inline-page-attachment-v2 experiment elements. */
.i-amphtml-story-page-open-attachment {
.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment {
--i-amphtml-chip-background-color: rgba(255, 255, 255, 0.5) !important;
--i-amphtml-img-background-color: white !important;
--i-amphtml-label-text-color: white !important;
--i-amphtml-arrow-color: black !important;
--i-amphtml-page-attachment-ui-animation-delay: 1s !important;
--i-amphtml-page-attachment-ui-animation-duration: .6s !important;
}

[theme="dark"].i-amphtml-story-page-open-attachment {
[theme="dark"].i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment {
--i-amphtml-chip-background-color: rgba(0, 0, 0, 0.5) !important;
--i-amphtml-img-background-color: black !important;
--i-amphtml-label-text-color: black !important;
--i-amphtml-arrow-color: white !important;
}

/** For amp-story-inline-page-attachment-v2 inline default. */
.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-open-attachment-icon {
animation: none !important;
position: relative !important;
}

.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-open-attachment-label {
color: var(--i-amphtml-label-text-color) !important;
}

.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-open-attachment-icon::after {
.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment[active] {
animation: none !important;
background: var(--i-amphtml-label-text-color) !important;
}

.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-open-attachment-bar-left,
.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-open-attachment-bar-right {
background: var(--i-amphtml-arrow-color) !important;
}

.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-open-attachment-bar-left {
animation: open-attachment-bar-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-open-attachment-bar-right {
animation: open-attachment-bar-right 0.3s cubic-bezier(0.4, 0, 0.2, 1) both !important;
.i-amphtml-story-page-attachment-label {
font-family: 'Roboto', sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 0.3px;
line-height: 16px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width: 210px !important;
}

/** For amp-story-inline-page-attachment-v2 inline with images. */
Expand All @@ -220,14 +210,14 @@
align-items: center !important;
overflow: hidden !important;
margin-bottom: 12px !important;
animation: tap-scale var(--i-amphtml-page-attachment-ui-animation-duration) var(--i-amphtml-page-attachment-ui-animation-delay) both !important;
}

.i-amphtml-story-inline-page-attachment-chip:only-child {
margin-bottom: 20px !important;
}

.i-amphtml-story-inline-page-attachment-img,
.i-amphtml-story-inline-page-attachment-arrow {
.i-amphtml-story-inline-page-attachment-img {
background-size: contain !important;
background-repeat: no-repeat !important;
}
Expand All @@ -243,27 +233,36 @@
}

.i-amphtml-story-inline-page-attachment-arrow {
position: relative !important;
height: 32px !important;
width: 32px !important;
border-radius: 50% !important;
background-color: var(--i-amphtml-img-background-color) !important;
}

.i-amphtml-story-inline-page-attachment-arrow:not(:only-child) {
margin: 8px !important;
background-image: url('data:image/svg+xml;charset=utf-8,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="white"/> <path d="M6.74612 18.796C6.33376 18.0797 6.57889 17.1649 7.29412 16.7508L15.0632 12.2529C15.7808 11.8374 16.6995 12.0835 17.1132 12.8022C17.5256 13.5184 17.2805 14.4333 16.5652 14.8474L8.7962 19.3453C8.07854 19.7608 7.15989 19.5146 6.74612 18.796Z" fill="black"/> <path d="M14.724 12.8022C15.1377 12.0835 16.0564 11.8374 16.774 12.2528L24.5431 16.7508C25.2583 17.1648 25.5034 18.0797 25.0911 18.7959C24.6773 19.5146 23.7587 19.7607 23.041 19.3452L15.272 14.8473C14.5567 14.4332 14.3116 13.5184 14.724 12.8022Z" fill="black"/> </svg>') !important;
}

.i-amphtml-story-inline-page-attachment-arrow:before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18.7px" height="7.5px" viewBox="0 0 18.7 7.5"><path d="M18,4.7l-7.8-4.5C10,0,9.7,0,9.4,0C9.1,0,8.8,0,8.5,0.2L0.7,4.7C0,5.1-0.2,6,0.2,6.7c0.4,0.7,1.3,1,2.1,0.5l7.1-4.1l7.1,4.1c0.7,0.4,1.6,0.2,2.1-0.5C19,6,18.7,5.1,18,4.7z"/></svg>') !important;
background-position: center !important;
background-size: auto !important;
background-repeat: no-repeat !important;
animation: move-up-arrow-in-circle var(--i-amphtml-page-attachment-ui-animation-duration) var(--i-amphtml-page-attachment-ui-animation-delay) both !important;
}

[theme="dark"] .i-amphtml-story-inline-page-attachment-arrow {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"><path d="M16 32a16 16 0 100-32 16 16 0 000 32z" fill="black"/><path d="M7 19v-2l8-5a1 1 0 112 3l-8 4H7z" fill="white"/><path d="M15 13l2-1 8 5a1 1 0 11-2 2l-8-4v-2z" fill="white"/></svg>') !important;
[theme="dark"] .i-amphtml-story-inline-page-attachment-arrow:before {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="18.7px" height="7.5px" viewBox="0 0 18.7 7.5"><path d="M18,4.7l-7.8-4.5C10,0,9.7,0,9.4,0C9.1,0,8.8,0,8.5,0.2L0.7,4.7C0,5.1-0.2,6,0.2,6.7c0.4,0.7,1.3,1,2.1,0.5l7.1-4.1l7.1,4.1c0.7,0.4,1.6,0.2,2.1-0.5C19,6,18.7,5.1,18,4.7z"/></svg>') !important;
}

.i-amphtml-story-inline-page-attachment-label {
font-family: 'Roboto', sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 0.25px !important;
line-height: 16px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width: 210px !important;
.i-amphtml-amp-story-page-attachment-ui-v2:not([href]) .i-amphtml-story-page-attachment-label {
margin-bottom: 20px !important;
color: var(--i-amphtml-label-text-color) !important;
}
Expand All @@ -284,6 +283,7 @@
[href].i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment {
/* Outlink attachments do not need the linear gradient. */
background: none !important;
animation: tap-scale var(--i-amphtml-page-attachment-ui-animation-duration) var(--i-amphtml-page-attachment-ui-animation-delay) both !important;
}

.i-amphtml-story-page-open-attachment.i-amphtml-story-page-open-attachment-opening {
Expand All @@ -298,25 +298,47 @@

.i-amphtml-story-outlink-page-attachment-arrow {
display: block !important;
height: 32px !important;
width: 32px !important;
cursor: pointer !important;
position: relative !important;
margin-bottom: 10px !important;
fill: var(--i-amphtml-outlink-cta-background-color) !important;
animation: move-up-arrow var(--i-amphtml-page-attachment-ui-animation-duration) var(--i-amphtml-page-attachment-ui-animation-delay) both !important;
}

.i-amphtml-story-outlink-page-open-attachment-bar-left,
.i-amphtml-story-outlink-page-open-attachment-bar-right {
background-color: var(--i-amphtml-outlink-cta-background-color) !important;
@keyframes move-up-arrow {
0%, 100% {
opacity: 1;
transform: translateY(0);
}
45% {
opacity: 0;
transform: translateY(-7px);
}
45.01% {
transform: translateY(5px);
}
}

.i-amphtml-story-outlink-page-open-attachment-bar-left {
left: 6px !important;
animation: open-attachment-bar-left 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) both !important;
@keyframes move-up-arrow-in-circle {
0%, 100% {
opacity: 1;
transform: translateY(0);
}
45% {
opacity: 0;
transform: translateY(-4px);
}
45.01% {
transform: translateY(3px);
}
}

.i-amphtml-story-outlink-page-open-attachment-bar-right {
right: 6px !important;
animation: open-attachment-bar-right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) both !important;
@keyframes tap-scale {
0%, 100% {
transform: scale(1);
}
45% {
transform: scale(.9);
}
}

.i-amphtml-story-outlink-page-attachment-outlink-chip {
Expand All @@ -341,16 +363,7 @@
border-radius: 50% !important;
}

.i-amphtml-story-outlink-page-attachment-label {
font-family: 'Roboto', sans-serif !important;
font-size: 16px !important;
font-weight: bold !important;
letter-spacing: 0.3px;
line-height: 16px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width: 210px !important;
[href] .i-amphtml-story-page-attachment-label {
padding-inline-start: 6px !important;
padding-inline-end: 8px !important;
color: var(--i-amphtml-outlink-cta-text-color) !important;
Expand Down