TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-26 04:13:30 +03:00
Code Issues Projects Releases Wiki Activity

Added animation to publish confirmation button

Browse Source 
Refs https://github.com/TryGhost/Team/issues/1544
This commit is contained in:
Sanne de Vries 2022-05-06 14:56:11 +01:00
parent f4405927ee
commit a4c1f2f7e0
3 changed files with 31 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ghost/admin/app/components/editor-labs/modals/publish-flow/confirm.hbs
View File

@ -1,5 +1,7 @@
<div class="gh-publish-title"><span>Ready, set, publish.</span> Share it with the world.</div>
<div class="gh-publish-title">
<div class="green">Ready, set, publish.</div>
<div>Share it with the world.</div>
</div>
<p class="gh-publish-confirmation">
{{#if @publishOptions.isScheduled}}
{{#let (moment-site-tz @publishOptions.scheduledAtUTC) as |scheduledAt|}}
@ -58,7 +60,7 @@
@buttonText={{@publishOptions.selectedPublishTypeOption.confirmButton}}
@runningText={{if @publishOptions.willOnlyEmail "Sending" "Publishing"}}
@successText={{if @publishOptions.willOnlyEmail "Sent" "Published"}}
@class="gh-btn gh-btn-gradient gh-btn-large"
@class="gh-btn gh-btn-pulse gh-btn-large"
/>
<div class="gh-publish-cta-secondary">
Or

5
ghost/admin/app/components/editor-labs/modals/publish-flow/options.hbs
View File

@ -1,4 +1,7 @@
<div class="gh-publish-title"><span>Ready, set, publish.</span> Share it with the world.</div>
<div class="gh-publish-title">
<div class="green">Ready, set, publish.</div>
<div>Share it with the world.</div>
</div>
<div class="gh-publish-settings">
<div class="gh-publish-setting">
{{#if @publishOptions.emailUnavailable}}

46
ghost/admin/app/styles/components/publishmenu.css
View File

@ -459,7 +459,7 @@
}
.gh-publish-title {
margin: 2px 0 6.4rem;
margin: 2px 0 4rem;
color: var(--black);
font-size: 4.8rem;
font-weight: 700;
@ -467,12 +467,8 @@
line-height: 1.1em;
}
.gh-publish-title span {
color: var(--green);
}
.gh-publish-settings {
margin-bottom: 5.2rem;
margin: 1rem 0 5.2rem;
width: 100%;
}
@ -637,30 +633,30 @@
width: max-content;
}
.gh-publish-cta .gh-btn-gradient {
color: #fff;
.gh-publish-cta .gh-btn-pulse {
fill: #fff;
background: rgba(0, 0, 0, 0) linear-gradient(94.75deg,
#a7f500 0%,
#60d20d 36.66%,
#30cf43 56.66%,
#1dc32e 78.76%,
#009b7f 100%)
repeat scroll 98% 0% / 200% 100%;
background: linear-gradient(90deg,#4dd831,#1DC32E);
color: #fff;
font-weight: 500;
transition: background-color 200ms ease 0s, background-position-x 400ms ease-in-out 0s;
box-shadow: 0 0 0 0 rgba(48, 207, 67, 1);
animation: pulse-green 2s infinite;
}
.gh-publish-cta .gh-btn-gradient:hover {
color: #fff !important;
background-position-x: 20%;
transition: background-color 200ms ease 0s, background-position-x 400ms ease-in-out 0s;
}
@keyframes pulse-green {
0% {
transform: scale(0.98);
box-shadow: 0 0 0 0 rgba(48, 207, 67, 0.7);
}
.gh-publish-cta .gh-btn-gradient:active,
.gh-publish-cta .gh-btn-gradient:focus {
background-position-x: 20%;
transition: background-color 200ms ease 0s, background-position-x 400ms ease-in-out 0s;
70% {
transform: scale(1);
box-shadow: 0 0 0 8px rgba(48, 207, 67, 0);
}
100% {
transform: scale(0.98);
box-shadow: 0 0 0 0 rgba(48, 207, 67, 0);
}
}
.gh-publish-cta-secondary {