Skip to content
This repository has been archived by the owner on Nov 28, 2022. It is now read-only.

Commit

Permalink
New tour styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@JohnONolan @kevinansfield
JohnONolan authored and kevinansfield committed Jun 12, 2017
1 parent d53cb48 commit 14b6e66
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 37 deletions.
2 changes: 1 addition & 1 deletion app/services/tour.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export default Service.extend(Evented, {
this.throbbers = [{
id: 'getting-started',
title: 'Getting started with Ghost',
message: `This is your admin area! You'll find all of your content, users and settings right here. You can come back any time by visiting <strong><a href="${adminUrl}" target="_blank">${adminDisplayUrl}</a></strong>`
message: `This is your admin area! You'll find all of your content, users and settings right here. You can come back any time by visiting <a href="${adminUrl}" target="_blank">${adminDisplayUrl}</a>`
}, {
id: 'using-the-editor',
title: 'Using the Ghost editor',
Expand Down
54 changes: 36 additions & 18 deletions app/styles/components/tour.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,20 +27,26 @@
}

.tour .popover-item {
padding: 25px;
padding: 20px;
max-width: none;
width: 480px;
border: #bfbfbf 1px solid;
background: #fff;
box-shadow: rgba(0,0,0,0.15) 0 1px 8px;
color: var(--midgrey);
width: 460px;
color: #fff;
background: linear-gradient(135deg, color(var(--blue) l(+3%)) 0%,color(var(--blue) l(-5%) s(-5%)) 100%);
box-shadow: rgba(0,0,0,0.05) 0 0 0 1px inset, rgba(0,0,0,0.15) 0 1px 8px;
border-radius: 10px;
}

.tour .popover-item a {
color: #fff;
font-weight: 500;
}

.tour .popover-title {
margin-bottom: 0.4em;
color: var(--darkgrey);
font-size: 1.8rem;
font-weight: bold;
color: #fff;
font-size: 2.4rem;
font-weight: 600;
letter-spacing: 0.5px;
}

.tour .popover-desc {
Expand All @@ -51,6 +57,9 @@
margin: 0;
font-size: 1.5rem;
line-height: 1.55em;
font-weight: 200;
letter-spacing: 0.5px;
color: rgba(255,255,255,0.85);
}

.tour .popover-foot {
Expand All @@ -59,8 +68,17 @@
margin-top: 25px;
}

.tour-optout {
.tour .popover-item .tour-optout {
align-self: flex-end;
margin-bottom: 7px;
font-size: 1.2rem;
font-weight: 200;
}

.tour .popover-item .tour-optout em {
font-style: normal;
font-weight: 400;
text-decoration: underline;
}

/* 'dem Triangles */
Expand All @@ -69,7 +87,7 @@
.tour .popover-triangle-top-left:before,
.tour .popover-triangle-top-right:before {
border-right: 14px solid transparent;
border-bottom: calc(14px * 0.8) solid #bfbfbf;
border-bottom: calc(14px * 0.8) solid color(var(--blue) l(-5%) s(-10%));
border-left: 14px solid transparent;
}

Expand All @@ -78,14 +96,14 @@
.tour .popover-triangle-top-right:after {
top: -10px;
border-right: 14px solid transparent;
border-bottom: calc(14px * 0.8) solid #fff;
border-bottom: calc(14px * 0.8) solid color(var(--blue) l(-5%) s(-10%));
border-left: 14px solid transparent;
}

.tour .popover-triangle-bottom:before,
.tour .popover-triangle-bottom-left:before,
.tour .popover-triangle-bottom-right:before {
border-top: calc(14px * 0.8) solid #bfbfbf;
border-top: calc(14px * 0.8) solid color(var(--blue) l(-5%) s(-10%));
border-right: 14px solid transparent;
border-left: 14px solid transparent;
}
Expand All @@ -94,7 +112,7 @@
.tour .popover-triangle-bottom-left:after,
.tour .popover-triangle-bottom-right:after {
bottom: -10px;
border-top: calc(14px * 0.8) solid #fff;
border-top: calc(14px * 0.8) solid color(var(--blue) l(-5%) s(-10%));
border-right: 14px solid transparent;
border-left: 14px solid transparent;
}
Expand All @@ -103,7 +121,7 @@
.tour .popover-triangle-left-top:before,
.tour .popover-triangle-left-bottom:before {
border-top: 14px solid transparent;
border-right: calc(14px * 0.8) solid #bfbfbf;
border-right: calc(14px * 0.8) solid color(var(--blue) l(-5%) s(-10%));
border-bottom: 14px solid transparent;
}

Expand All @@ -112,7 +130,7 @@
.tour .popover-triangle-left-bottom:after {
left: -10px;
border-top: 14px solid transparent;
border-right: calc(14px * 0.8) solid #fff;
border-right: calc(14px * 0.8) solid color(var(--blue) l(-5%) s(-10%));
border-bottom: 14px solid transparent;
}

Expand All @@ -121,7 +139,7 @@
.tour .popover-triangle-right-bottom:before {
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: calc(14px * 0.8) solid #bfbfbf;
border-left: calc(14px * 0.8) solid color(var(--blue) l(-5%) s(-10%));
}

.tour .popover-triangle-right:after,
Expand All @@ -130,5 +148,5 @@
right: -10px;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: calc(14px * 0.8) solid #fff;
border-left: calc(14px * 0.8) solid color(var(--blue) l(-5%) s(-10%));
}
24 changes: 10 additions & 14 deletions app/styles/patterns/throbber.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,10 @@
display: block;
width: 14px;
height: 14px;
border: rgba(255,255,255,0.3) 2px solid;
border: rgba(255,255,255,0.1) 2px solid;
background: rgba(255,255,255,0.6);
border-radius: 100%;
box-shadow: rgba(0,0,0,0.25) 0 0 0 2px;
animation-name: throbber-fade;
animation-duration: 1.2s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
box-shadow: color(var(--blue) alpha(0.9)) 0 0 0 2px;
}

.throbber:before {
Expand All @@ -39,22 +34,23 @@
margin: -13px 0 0 -13px;
width: 26px;
height: 26px;
border: rgba(255,255,255,0.4) 2px solid;
background: rgba(255,255,255,0.2);
border: rgba(255,255,255,0.1) 2px solid;
background: rgba(255,255,255,0.4);
border-radius: 100%;
box-shadow: rgba(0,0,0,0.15) 0 0 0 2px;
box-shadow: color(var(--blue) alpha(0.7)) 0 0 0 2px;
animation-name: throbber-pulse, throbber-fade;
animation-duration: 1.2s;
animation-timing-function: ease-out;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-delay: 0.2s;
pointer-events: none;
}

@keyframes throbber-fade {
0%,
100% {
opacity: 0;
opacity: 0.5;
}
40%,
60% {
Expand All @@ -67,7 +63,7 @@
transform: scale3d(0.5, 0.5, 1);
}
50% {
transform: scale3d(1.4, 1.4, 1);
transform: scale3d(1, 1, 1);
}
100% {
transform: scale3d(0.5, 0.5, 1);
Expand Down
1 change: 1 addition & 0 deletions app/templates/components/gh-nav-menu.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,5 +64,6 @@
{{gh-tour-item "getting-started"
target=".gh-menu-toggle"
throbberAttachment="bottom middle"
throbberOffset="0 4px"
popoverTriangleClass="left-top"
}}
6 changes: 2 additions & 4 deletions app/templates/components/gh-tour-item.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,8 @@
{{{_throbber.message}}}
</div>
<footer class="popover-foot">
<small class="tour-optout">
Not your first time? <a href="#" {{action 'optOut'}}>Skip these tips</a>
</small>
<a class="tour-dismiss btn btn-blue" href="#" {{action 'markAsViewed'}}>Ok, got it</a>
<a class="tour-optout" href="#" {{action 'optOut'}}>Not your first time? <em>Skip these tips</em></a>
<a class="tour-dismiss gh-btn gh-btn-black" href="#" {{action 'markAsViewed'}}><span>Ok, got it</span></a>
</footer>
</div>
{{/liquid-tether}}
Expand Down

0 comments on commit 14b6e66

Please sign in to comment.