Fix up gh flow icons

- check
- back button
- various minor fixes

app/html/install2.html

@@ -18,7 +18,7 @@
 <div class="gh-flow">
     <header class="gh-flow-head">
         <nav class="gh-flow-nav">
-            <a class="gh-flow-back" href="#"><i class="icon-chevron-left"></i> Back</a>
+            <a class="gh-flow-back" href="#"><i class="icon-arrow-left"></i> Back</a>
             <ol>
                 <li><a class="step" href="#"><i class="icon-check"></i><span class="num">1</span></a></li>
                 <li class="divider"></li>
@@ -41,7 +41,7 @@
                         <!-- fallback to: Ghost/core/shared/img/ghosticon.jpg -->
                         <span class="sr-only">User imge</span>
                     </div>
-                    <a class="edit-account-image" href="#"><i class="icon-image "><span class="sr-only">Upload an image</span></i></a>
+                    <a class="edit-account-image" href="#"><i class="icon-photos "><span class="sr-only">Upload an image</span></i></a>
                 </figure>
                 <div class="form-group">
                     <label for="email-address">Email address</label>

app/html/install3.html

@@ -18,7 +18,7 @@
 <div class="gh-flow">
     <header class="gh-flow-head">
         <nav class="gh-flow-nav">
-            <a class="gh-flow-back" href="#"><i class="icon-chevron-left"></i> Back</a>
+            <a class="gh-flow-back" href="#"><i class="icon-arrow-left"></i> Back</a>
             <ol>
                 <li><a class="step" href="#"><i class="icon-check"></i><span class="num">1</span></a></li>
                 <li class="divider"></li>
@@ -41,7 +41,7 @@
                         <!-- fallback to: Ghost/core/shared/img/ghosticon.jpg -->
                         <span class="sr-only">User imge</span>
                     </div>
-                    <a class="edit-account-image" href="#"><i class="icon-image "><span class="sr-only">Upload an image</span></i></a>
+                    <a class="edit-account-image" href="#"><i class="icon-photos "><span class="sr-only">Upload an image</span></i></a>
                 </figure>
                 <div class="form-group success">
                     <label for="email-address">Email address</label>

app/html/install4.html

@@ -18,7 +18,7 @@
 <div class="gh-flow">
     <header class="gh-flow-head">
         <nav class="gh-flow-nav">
-            <a class="gh-flow-back" href="#"><i class="icon-chevron-left"></i> Back</a>
+            <a class="gh-flow-back" href="#"><i class="icon-arrow-left"></i> Back</a>
             <ol>
                 <li><a class="step" href="#"><i class="icon-check"></i><span class="num">1</span></a></li>
                 <li class="divider"></li>

app/styles/layouts/flow.css

@@ -28,6 +28,8 @@
     position: absolute;
     top: 0;
     left: 0;
+    display: flex;
+    align-items: center;
     margin: 0 0 0 3%;
     padding: 2px 9px 2px 5px;
     border: transparent 1px solid;
@@ -37,6 +39,12 @@
     transition: all 0.3s ease;
 }
 
+.gh-flow-back i {
+    margin-right: 4px;
+    font-size: 12px;
+    line-height: 8px;
+}
+
 .gh-flow-back:hover {
     border: #dae1e3 1px solid;
 }
@@ -74,7 +82,9 @@
 }
 
 .gh-flow-nav .step {
-    display: table-cell;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     width: 30px;
     height: 30px;
     border: transparent 2px solid;
@@ -85,12 +95,18 @@
     text-align: center;
     text-align: center;
     font-size: 1.3rem;
+    line-height: 1;
 }
 
 .gh-flow-nav .step .num {
     display: none;
 }
 
+.gh-flow-nav .step i {
+    font-size: 26px;
+    line-height: 22px;
+}
+
 .gh-flow-nav .current ~ li:not(divider) .step {
     border: #e3e3e3 2px solid;
     background: transparent;
@@ -108,8 +124,7 @@
 .gh-flow-nav .current .step {
     border: var(--green) 2px solid;
     background: transparent;
-    color: var(--green);
-    font-weight: bold;
+    color: color(var(--green) lightness(-10%));
     cursor: default;
 }
 
@@ -127,6 +142,8 @@
     color: #fff;
 }
 
+
+
 .gh-flow-content {
     max-width: 700px;
     width: 100%;

app/styles/patterns/forms.css

@@ -196,11 +196,11 @@ textarea {
     border-radius: var(--border-radius);
 }
 
-.for-checkbox label .input-toggle-component {
+.for-checkbox .input-toggle-component {
     transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }
 
-.for-checkbox label .input-toggle-component:before {
+.for-checkbox .input-toggle-component:before {
     content: "";
     position: absolute;
     top: 4px;
@@ -215,12 +215,12 @@ textarea {
     transform: rotate(-45deg);
 }
 
-.for-checkbox label input:checked + .input-toggle-component {
+.for-checkbox input:checked + .input-toggle-component {
     border-color: color(var(--green) lightness(-10%));
     background: var(--green);
 }
 
-.for-checkbox label input:checked + .input-toggle-component:before {
+.for-checkbox input:checked + .input-toggle-component:before {
     opacity: 1;
 }
 
@@ -228,11 +228,11 @@ textarea {
     border-radius: 100px;
 }
 
-.for-radio label .input-toggle-component {
+.for-radio .input-toggle-component {
     transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }
 
-.for-radio label .input-toggle-component:before {
+.for-radio .input-toggle-component:before {
     content: "";
     position: absolute;
     top: 4px;
@@ -245,12 +245,12 @@ textarea {
     transition: opacity 0.15s ease-in-out;
 }
 
-.for-radio label input:checked + .input-toggle-component {
+.for-radio input:checked + .input-toggle-component {
     border-color: color(var(--green) lightness(-10%));
     background: var(--green);
 }
 
-.for-radio label input:checked + .input-toggle-component:before {
+.for-radio input:checked + .input-toggle-component:before {
     opacity: 1;
 }
 

app/styles/patterns/icons.css

@@ -244,3 +244,6 @@
 .icon-twitter:before {
     content: "\e042";
 }
+.icon-check:before {
+    content: "\e043";
+}

app/templates/settings/tags/settings-menu.hbs

@@ -45,7 +45,7 @@
     <div class="{{if isViewingSubview 'settings-menu-pane-in' 'settings-menu-pane-out-right'}} settings-menu settings-menu-pane">
         {{#gh-tab-pane}}
             <div class="settings-menu-header subview">
-                <button {{action "closeSubview"}} class="back icon-chevron-left settings-menu-header-action"><span class="hidden">Back</span></button>
+                <button {{action "closeSubview"}} class="back icon-arrow-left settings-menu-header-action"><span class="hidden">Back</span></button>
                 <h4>Meta Data</h4>
                 <div style="width:23px;">{{!flexbox space-between}}</div>
             </div>

app/templates/signup.hbs

@@ -16,7 +16,7 @@
                         <!-- fallback to: Ghost/core/shared/img/ghosticon.jpg -->
                         <span class="sr-only">User imge</span>
                     </div>
-                    <a class="edit-account-image" href="#"><i class="icon-image "><span class="sr-only">Upload an image</span></i></a>
+                    <a class="edit-account-image" href="#"><i class="icon-photos "><span class="sr-only">Upload an image</span></i></a>
                 </figure>
                 <div class="form-group">
                     <label for="email-address">Email address</label>

public/assets/fonts/ghosticons.svg

@@ -74,4 +74,5 @@
 <glyph unicode="&#57408;" d="M511 249c0 2-1 3-2 4l-85 85c-5 4-11 4-16 0-4-4-4-11 0-15l68-67-209 0c-6 0-11-5-11-11 0-6 5-10 11-10l209 0-68-67c-4-5-4-11 0-16 3-2 5-3 8-3 3 0 5 1 8 3l85 86c1 1 2 2 2 3 1 3 1 6 0 8z m-351 263l-149 0c-6 0-11-5-11-11l0-490c0-6 5-11 11-11l149 0c6 0 11 5 11 11l0 490c0 6-5 11-11 11z m-11-491l-128 0 0 470 128 0z"/>
 <glyph unicode="&#57409;" d="M501 427l-32 0 0 32c0 6-4 10-10 10l-128 0c-31 0-52-10-64-29-12 19-34 29-64 29l-128 0c-6 0-11-4-11-10l0-32-32 0c-6 0-11-5-11-11l0-341c0-6 5-11 11-11l128 0c19 0 64-5 64-53 0-6 5-11 11-11l64 0c6 0 10 5 10 11 0 48 45 53 64 53l128 0c6 0 11 5 11 11l0 341c0 6-5 11-11 11z m-170 21l117 0 0-320-117 0c-23 0-41-6-54-17l0 284c0 37 17 53 54 53z m-246 0l118 0c37 0 53-16 53-53l0-284c-12 11-30 17-53 17l-118 0z m406-363l-118 0c-47 0-79-24-84-64l-44 0c-5 40-37 64-85 64l-117 0 0 320 21 0 0-288c0-6 5-10 11-10l128 0c37 0 53-17 53-54 0-6 5-10 11-10 6 0 10 4 10 10 0 37 17 54 54 54l128 0c6 0 10 4 10 10l0 288 22 0z"/>
 <glyph unicode="&#57410;" d="M481 395c-13-18-28-34-46-47 0-3 0-7 0-12 0-25-3-50-11-74-7-25-18-49-33-71-14-23-32-43-52-61-21-17-45-31-74-41-29-11-60-16-92-16-52 0-99 14-142 42 7-1 14-2 22-2 43 0 81 14 115 40-20 0-38 6-54 18-16 12-27 27-33 46 7-1 13-2 18-2 8 0 16 1 24 4-21 4-39 15-53 31-14 17-21 37-21 59l0 1c13-7 27-11 42-11-13 8-23 19-30 32-8 14-11 29-11 44 0 17 4 33 12 47 23-28 51-51 84-68 33-17 69-27 107-29-2 8-3 15-3 22 0 25 9 47 27 65 18 18 40 27 66 27 26 0 49-10 67-29 21 4 40 11 59 22-7-22-21-39-41-51 18 2 35 7 53 14z"/>
+<glyph unicode="&#57411;" d="M355 338l-152-142-46 46c-4 4-11 4-15 0-4-4-4-11 0-15l53-53c2-2 5-3 8-3 2 0 5 1 7 3l160 149c4 4 4 11 0 15-4 4-10 4-15 0z m-99 174c-141 0-256-115-256-256 0-141 115-256 256-256 141 0 256 115 256 256 0 141-115 256-256 256z m0-491c-129 0-235 106-235 235 0 129 106 235 235 235 129 0 235-106 235-235 0-129-106-235-235-235z"/>
 </font></defs></svg>