Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

🎨 Use svg icons in default templates (#8343)

Browse source 
refs #8107

- replace icon fonts in server side rendered default templates with svgs
This commit is contained in:
Aileen Nowak 2017-05-15 20:43:58 +09:00 committed by Katharina Irrgang
parent e066094044
commit 3bae41ccff
3 changed files with 52 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
core/server/apps/private-blogging/lib/views/private.hbs
View file

@ -29,7 +29,8 @@
</header>
<form class="gh-signin" method="post" novalidate="novalidate">
<div class="form-group{{#if error}} error{{/if}}">
<span class="input-icon icon-lock">
<span class="gh-input-icon gh-icon-lock">
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path d="M12 14c-.552 0-1 .449-1 1 0 .365.207.672.5.846v2.654c0 .276.224.5.5.5s.5-.224.5-.5v-2.654c.293-.174.5-.481.5-.846 0-.551-.448-1-1-1zM20.5 9h-2.5v-3c0-3.309-2.691-6-6-6s-6 2.691-6 6v3h-2.5c-.276 0-.5.224-.5.5v14c0 .276.224.5.5.5h17c.276 0 .5-.224.5-.5v-14c0-.276-.224-.5-.5-.5zm-13.5-3c0-2.757 2.243-5 5-5s5 2.243 5 5v3h-10v-3zm13 17h-16v-13h16v13z"/></g></svg>
{{input_password class="gh-input" placeholder="Password"}}
</span>
</div>

16
core/server/apps/subscribers/lib/views/subscribe.hbs
View file

@ -24,7 +24,21 @@
<div class="gh-flow">
<header class="gh-flow-head">
<nav class="gh-flow-nav">
<a href="{{#if subscribed_url}}{{subscribed_url}}{{else}}{{@blog.url}}{{/if}}" class="gh-flow-back"><i class="icon-arrow-left"></i> Back</a>
<a href="{{#if subscribed_url}}{{subscribed_url}}{{else}}{{@blog.url}}{{/if}}" class="gh-flow-back">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="17px" height="27px" viewBox="0 0 17 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>arrow-left3</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Stroke-42" transform="translate(2.000000, 2.000000)" stroke-width="3" stroke="#0B0B0A">
<polyline points="13.5401 0.4256 0.3971 11.9256 13.5401 23.4256"></polyline>
</g>
</g>
</svg>
Back
</a>
</nav>
</header>

38
core/server/public/ghost.css
View file

@ -571,6 +571,29 @@ h2 {
width: 100%;
}
/* Input Icons
/* ---------------------------------------------------------- */
.gh-input-icon {
position: relative;
display: block;
}
.gh-input-icon svg {
position: absolute;
top: 50%;
left: 10px;
z-index: 2;
height: 14px;
width: auto;
fill: color(var(--midgrey) l(+15%));
transform: translateY(-7px);
}
.gh-input-icon input {
padding-left: 35px;
}
/* Layouts: Groups of Components
/* ---------------------------------------------------------- */
/* Global Layout
@ -656,10 +679,14 @@ h2 {
font-weight: 100;
transition: all 0.3s ease;
}
.gh-flow-back i {
.gh-flow-back svg {
margin-right: 4px;
font-size: 12px;
line-height: 8px;
height: 12px;
line-height: 14px;
}
.gh-flow-back svg path {
stroke: #7d878a;
stroke-width: 1.2px;
}
.gh-flow-back:hover {
border: #dae1e3 1px solid;
@ -682,6 +709,11 @@ h2 {
line-height: 1.5em;
font-weight: 100;
}
.gh-flow-content .gh-input-icon input {
padding-left: 35px;
}
@media (max-width: 500px) {
.gh-flow-content {
font-size: 4vw;