From 895827e8815deddcc0cbc7e79a4ed1ba85ce18f4 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Thu, 15 Feb 2018 09:08:50 -0500
Subject: [PATCH] Moving list styles complete to use @apply

---
 .../Footer/__snapshots__/test.js.snap         |  4 +---
 src/components/Footer/index.js                |  2 +-
 src/components/Footer/style.css               |  5 ++++
 .../Header/__snapshots__/test.js.snap         |  4 +---
 src/components/Header/index.js                |  2 +-
 src/components/Header/style.css               |  1 +
 src/site.css                                  | 23 -------------------
 7 files changed, 10 insertions(+), 31 deletions(-)

diff --git a/src/components/Footer/__snapshots__/test.js.snap b/src/components/Footer/__snapshots__/test.js.snap
index 6d82bb1..65219db 100644
--- a/src/components/Footer/__snapshots__/test.js.snap
+++ b/src/components/Footer/__snapshots__/test.js.snap
@@ -2,9 +2,7 @@
 
 exports[`Footer rendering 1`] = `
 <footer>
-  <ul
-    className="inline with-separator"
-  >
+  <ul>
     <li>
       <Trans>
         Created by 
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
index 3992ca6..7598ad3 100644
--- a/src/components/Footer/index.js
+++ b/src/components/Footer/index.js
@@ -5,7 +5,7 @@ import './style.css';
 
 const Footer = () => (
   <footer>
-    <ul className="inline with-separator">
+    <ul>
       <li>
         <Trans>Created by <a href="mailto:jeff.avallone@gmail.com">Jeff Avallone</a></Trans>
       </li>
diff --git a/src/components/Footer/style.css b/src/components/Footer/style.css
index 3f9e926..4107fa5 100644
--- a/src/components/Footer/style.css
+++ b/src/components/Footer/style.css
@@ -3,6 +3,11 @@
 footer {
   margin: var(--spacing-margin) 0;
 
+  & ul {
+    @apply --inline-list;
+    @apply --with-separator;
+  }
+
   & img {
     vertical-align: text-top;
     width: 80px;
diff --git a/src/components/Header/__snapshots__/test.js.snap b/src/components/Header/__snapshots__/test.js.snap
index e817e3d..68b002c 100644
--- a/src/components/Header/__snapshots__/test.js.snap
+++ b/src/components/Header/__snapshots__/test.js.snap
@@ -12,9 +12,7 @@ exports[`Header rendering 1`] = `
       Regexper
     </a>
   </h1>
-  <ul
-    className="inline"
-  >
+  <ul>
     <li>
       <a
         href="https://github.com/javallone/regexper-static"
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index 4597c65..538378e 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -10,7 +10,7 @@ const Header = () => (
       <a href="/">Regexper</a>
     </h1>
 
-    <ul className="inline">
+    <ul>
       <li><a href="https://github.com/javallone/regexper-static">
         <GithubIcon/><Trans>Source on GitHub</Trans>
       </a></li>
diff --git a/src/components/Header/style.css b/src/components/Header/style.css
index 18aabca..d94bbf7 100644
--- a/src/components/Header/style.css
+++ b/src/components/Header/style.css
@@ -38,6 +38,7 @@
   }
 
   & ul {
+    @apply --inline-list;
     line-height: var(--header-height);
     position: absolute;
     top: 0;
diff --git a/src/site.css b/src/site.css
index 82a4c1d..eaf2cdf 100644
--- a/src/site.css
+++ b/src/site.css
@@ -16,26 +16,3 @@ body {
 a {
   color: inherit;
 }
-
-ul:global(.inline) {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-
-  & li {
-    list-style-type: none;
-    display: inline-block;
-    white-space: nowrap;
-  }
-
-  &:global(.with-separator) {
-    & li:after {
-      content: '//';
-      padding: 0 0.5rem;
-    }
-
-    & li:last-child:after {
-      content: '';
-    }
-  }
-}