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"> <p class="gh-publish-confirmation">
{{#if @publishOptions.isScheduled}} {{#if @publishOptions.isScheduled}}
{{#let (moment-site-tz @publishOptions.scheduledAtUTC) as |scheduledAt|}} {{#let (moment-site-tz @publishOptions.scheduledAtUTC) as |scheduledAt|}}
@ -58,7 +60,7 @@
@buttonText={{@publishOptions.selectedPublishTypeOption.confirmButton}} @buttonText={{@publishOptions.selectedPublishTypeOption.confirmButton}}
@runningText={{if @publishOptions.willOnlyEmail "Sending" "Publishing"}} @runningText={{if @publishOptions.willOnlyEmail "Sending" "Publishing"}}
@successText={{if @publishOptions.willOnlyEmail "Sent" "Published"}} @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"> <div class="gh-publish-cta-secondary">
Or 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-settings">
<div class="gh-publish-setting"> <div class="gh-publish-setting">
{{#if @publishOptions.emailUnavailable}} {{#if @publishOptions.emailUnavailable}}

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

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