From 89f456e3d7d7662a938747c7b8e81736c76dcc43 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Sun, 27 Aug 2017 14:51:16 +0800
Subject: [PATCH] Fix buttons

---
 .gitignore                              |  1 +
 _includes/2017/top-nav.html             |  4 +-
 _includes/social-list.html              |  6 +-
 _sass/2017/components/page-actions.scss | 73 +++++++++++++++++++++++++
 _sass/2017/style.scss                   |  1 +
 5 files changed, 80 insertions(+), 5 deletions(-)
 create mode 100644 _sass/2017/components/page-actions.scss

diff --git a/.gitignore b/.gitignore
index 350401e8e..386d56002 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 _output
 _site
+.jekyll-metadata
diff --git a/_includes/2017/top-nav.html b/_includes/2017/top-nav.html
index 475657cbf..533067720 100644
--- a/_includes/2017/top-nav.html
+++ b/_includes/2017/top-nav.html
@@ -7,8 +7,8 @@
     <div class='actions'>
       {% include social-list.html class="social page-actions" page=include.page %}
       <ul class='page-actions'>
-        <li class='github hint--bottom' data-hint='Edit this page on GitHub'>
-          <a href='https://github.com/rstacruz/cheatsheets/blob/gh-pages/{{ page.path | remove: '.html' }}.md'>
+        <li class='link github -button hint--bottom' data-hint='Edit this page on GitHub'>
+          <a href='https://github.com/rstacruz/cheatsheets/blob/gh-pages/{{ page.path | remove: '.html' }}'>
             <span class='text -visible'>Edit</span>
           </a>
         </li>
diff --git a/_includes/social-list.html b/_includes/social-list.html
index d441f6167..e0350d017 100644
--- a/_includes/social-list.html
+++ b/_includes/social-list.html
@@ -1,6 +1,6 @@
 {% assign description = "The ultimate cheatsheet for " | append: include.page.title | append: "." %}
 <ul class="social-list {{ include.class }}">
-  <li class="facebook hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ include.page.url }}" target="share"><span class="text">Like</span></a></li>
-  <li class="twitter hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text={{ description }} {{ site.url }}{{ include.page.url }}" target="share"><span class="text">Tweet</span></a></li>
-  <!--<li class="googleplus hint--bottom" data-hint="Share on Google Plus"><a href="https://plus.google.com/share?url={{ site.url }}{{ include.page.url }}" target="share"><span class="text">+1</span></a></li>-->
+  <li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ include.page.url }}" target="share"><span class="text">Like</span></a></li>
+  <li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text={{ description }} {{ site.url }}{{ include.page.url }}" target="share"><span class="text">Tweet</span></a></li>
+  <!--<li class="googleplus link hint--bottom" data-hint="Share on Google Plus"><a href="https://plus.google.com/share?url={{ site.url }}{{ include.page.url }}" target="share"><span class="text">+1</span></a></li>-->
 </ul>
diff --git a/_sass/2017/components/page-actions.scss b/_sass/2017/components/page-actions.scss
new file mode 100644
index 000000000..99a9900a9
--- /dev/null
+++ b/_sass/2017/components/page-actions.scss
@@ -0,0 +1,73 @@
+@mixin action-bar {
+  & {
+    height: 32px;
+  }
+
+  & > .link.link > a,
+  & > .link.link > a::before {
+    display: inline-block;
+    height: 32px;
+    line-height: 32px;
+    vertical-align: top;
+  }
+
+  &,
+  & > li {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  & > li > a,
+  & > li > a:visited {
+    color: $base-mute;
+    text-decoration: none;
+  }
+
+  & > li > a:hover,
+  & > li > a:focus {
+    color: $base-b3;
+
+    & > .text {
+      color: $base-b3;
+    }
+  }
+
+  & > li > a::before {
+    font-size: 16px;
+    text-align: center;
+  }
+
+  & > li > a > .text {
+    @include font-size(-1);
+    display: none;
+  }
+
+  & > li > a > .text.-visible {
+    display: inline;
+  }
+}
+
+.page-actions {
+  & {
+    @include action-bar;
+  }
+
+  & > .facebook > a::before {
+    @include ion-icon('logo-facebook');
+  }
+
+  & > .twitter > a::before {
+    @include ion-icon('logo-twitter');
+  }
+
+  & > .github > a::before {
+    @include ion-icon('logo-github');
+  }
+
+  & > .link.-button > a {
+    box-shadow: inset 0 0 0 1px $dark-line-color;
+    border-radius: 2px;
+    padding: 0 8px;
+  }
+}
diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss
index 23e154367..19b032808 100644
--- a/_sass/2017/style.scss
+++ b/_sass/2017/style.scss
@@ -16,4 +16,5 @@
 @import './components/h3-section-list';
 @import './components/headline-ad';
 @import './components/main-heading';
+@import './components/page-actions';
 @import './components/top-nav';