From 7b50e3e4ff7af83d533d35e50ec7975d4ab3da62 Mon Sep 17 00:00:00 2001
From: Sonny Bakker <sonny871@hotmail.com>
Date: Sun, 7 Feb 2021 13:11:15 +0100
Subject: [PATCH] Add default padding for font awesome

---
 .../scss/components/post-message/_post-message.scss           | 2 +-
 src/newsreader/scss/components/post/_post.scss                | 3 +--
 src/newsreader/scss/elements/button/_read-button.scss         | 4 +---
 src/newsreader/scss/partials/_variables.scss                  | 1 +
 src/newsreader/scss/partials/index.scss                       | 1 +
 5 files changed, 5 insertions(+), 6 deletions(-)
 create mode 100644 src/newsreader/scss/partials/_variables.scss

diff --git a/src/newsreader/scss/components/post-message/_post-message.scss b/src/newsreader/scss/components/post-message/_post-message.scss
index cdd069b..e876e7f 100644
--- a/src/newsreader/scss/components/post-message/_post-message.scss
+++ b/src/newsreader/scss/components/post-message/_post-message.scss
@@ -19,7 +19,7 @@
     margin: 5px;
 
     & i {
-      padding: 0 7px 0 0;
+      padding: 0 $fa-padding 0 0;
     }
   }
 }
diff --git a/src/newsreader/scss/components/post/_post.scss b/src/newsreader/scss/components/post/_post.scss
index 35cd56c..40e5cbe 100644
--- a/src/newsreader/scss/components/post/_post.scss
+++ b/src/newsreader/scss/components/post/_post.scss
@@ -90,9 +90,8 @@
     background-color: var(--info-color);
     color: var(--font-color);
 
-    // TODO add mixin for default font awesome padding
     & i {
-      padding: 0 7px 0 0;
+      padding: 0 $fa-padding 0 0;
     }
 
     &:hover {
diff --git a/src/newsreader/scss/elements/button/_read-button.scss b/src/newsreader/scss/elements/button/_read-button.scss
index b8749fe..fcc80d0 100644
--- a/src/newsreader/scss/elements/button/_read-button.scss
+++ b/src/newsreader/scss/elements/button/_read-button.scss
@@ -3,12 +3,10 @@
 
   color: var(--font-color);
 
-  // TODO add dark colored confirm green #007965
   background-color: var(--confirm-color);
 
-  // TODO add mixin for default font awesome padding
   & i {
-    padding: 0 7px 0 0;
+    padding: 0 $fa-padding 0 0;
   }
 
   &:hover {
diff --git a/src/newsreader/scss/partials/_variables.scss b/src/newsreader/scss/partials/_variables.scss
new file mode 100644
index 0000000..a61e322
--- /dev/null
+++ b/src/newsreader/scss/partials/_variables.scss
@@ -0,0 +1 @@
+$fa-padding: 7;
diff --git a/src/newsreader/scss/partials/index.scss b/src/newsreader/scss/partials/index.scss
index 2f97f18..2a4d507 100644
--- a/src/newsreader/scss/partials/index.scss
+++ b/src/newsreader/scss/partials/index.scss
@@ -1,3 +1,4 @@
 @import './colors';
 @import './fonts';
 @import './root';
+@import './variables';