From 6b57a3ba136895a8f01f44cafdddc2bd4a877dd1 Mon Sep 17 00:00:00 2001
From: Mertcan <mertcancam@gmail.com>
Date: Wed, 30 Jan 2019 12:33:11 +0300
Subject: [PATCH] added spacing feature to use everywhere on project

---
 src/styles/index.scss     |  1 +
 src/styles/spacing.scss   | 83 +++++++++++++++++++++++++++++++++++++++
 src/styles/variables.scss |  3 ++
 3 files changed, 87 insertions(+)
 create mode 100644 src/styles/spacing.scss

diff --git a/src/styles/index.scss b/src/styles/index.scss
index 93f2157e..5d61e07f 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -4,6 +4,7 @@
 @import './element-ui.scss';
 @import './sidebar.scss';
 @import './btn.scss';
+@import './spacing.scss';
 
 body {
   height: 100%;
diff --git a/src/styles/spacing.scss b/src/styles/spacing.scss
new file mode 100644
index 00000000..cc50681b
--- /dev/null
+++ b/src/styles/spacing.scss
@@ -0,0 +1,83 @@
+.mb-0 { margin-bottom: 0 !important}
+.mb-1 { margin-bottom: ($spacing * .25) !important}
+.mb-2 { margin-bottom: ($spacing * .5) !important}
+.mb-3 { margin-bottom: ($spacing * 1) !important}
+.mb-4 { margin-bottom: ($spacing * 1.5) !important}
+.mb-5 { margin-bottom: ($spacing * 3) !important}
+
+.mt-0 { margin-top: 0 !important}
+.mt-1 { margin-top: ($spacing * .25) !important}
+.mt-2 { margin-top: ($spacing * .5) !important}
+.mt-3 { margin-top: ($spacing * 1) !important}
+.mt-4 { margin-top: ($spacing * 1.5) !important}
+.mt-5 { margin-top: ($spacing * 3) !important}
+
+.mr-0 { margin-right: 0 !important}
+.mr-1 { margin-right: ($spacing * .25) !important}
+.mr-2 { margin-right: ($spacing * .5) !important}
+.mr-3 { margin-right: ($spacing * 1) !important}
+.mr-4 { margin-right: ($spacing * 1.5) !important}
+.mr-5 { margin-right: ($spacing * 3) !important}
+
+.ml-0 { margin-left: 0 !important}
+.ml-1 { margin-left: ($spacing * .25) !important}
+.ml-2 { margin-left: ($spacing * .5) !important}
+.ml-3 { margin-left: ($spacing * 1) !important}
+.ml-4 { margin-left: ($spacing * 1.5) !important}
+.ml-5 { margin-left: ($spacing * 3) !important}
+
+.mx-0 { margin-left: 0 !important; margin-right: 0 !important}
+.mx-1 { margin-left: ($spacing * .25) !important; margin-right: ($spacing * .25) !important}
+.mx-2 { margin-left: ($spacing * .5) !important; margin-right: ($spacing * .50) !important}
+.mx-3 { margin-left: ($spacing * 1) !important; margin-right: ($spacing * 1) !important}
+.mx-4 { margin-left: ($spacing * 1.5) !important; margin-right: ($spacing * 1.5) !important}
+.mx-5 { margin-left: ($spacing * 3) !important; margin-right: ($spacing * 3) !important}
+
+.my-0 { margin-top: 0 !important; margin-bottom: 0 !important}
+.my-1 { margin-top: ($spacing * .25) !important; margin-bottom: ($spacing * .25) !important}
+.my-2 { margin-top: ($spacing * .5) !important; margin-bottom: ($spacing * .50) !important}
+.my-3 { margin-top: ($spacing * 1) !important; margin-bottom: ($spacing * 1) !important}
+.my-4 { margin-top: ($spacing * 1.5) !important; margin-bottom: ($spacing * 1.5) !important}
+.my-5 { margin-top: ($spacing * 3) !important; margin-bottom: ($spacing * 3) !important}
+
+.pb-0 { padding-bottom: 0 !important}
+.pb-1 { padding-bottom: ($spacing * .25) !important}
+.pb-2 { padding-bottom: ($spacing * .5) !important}
+.pb-3 { padding-bottom: ($spacing * 1) !important}
+.pb-4 { padding-bottom: ($spacing * 1.5) !important}
+.pb-5 { padding-bottom: ($spacing * 3) !important}
+
+.pt-0 { padding-top: 0 !important}
+.pt-1 { padding-top: ($spacing * .25) !important}
+.pt-2 { padding-top: ($spacing * .5) !important}
+.pt-3 { padding-top: ($spacing * 1) !important}
+.pt-4 { padding-top: ($spacing * 1.5) !important}
+.pt-5 { padding-top: ($spacing * 3) !important}
+
+.pr-0 { padding-right: 0 !important}
+.pr-1 { padding-right: ($spacing * .25) !important}
+.pr-2 { padding-right: ($spacing * .5) !important}
+.pr-3 { padding-right: ($spacing * 1) !important}
+.pr-4 { padding-right: ($spacing * 1.5) !important}
+.pr-5 { padding-right: ($spacing * 3) !important}
+
+.pl-0 { padding-left: 0 !important}
+.pl-1 { padding-left: ($spacing * .25) !important}
+.pl-2 { padding-left: ($spacing * .5) !important}
+.pl-3 { padding-left: ($spacing * 1) !important}
+.pl-4 { padding-left: ($spacing * 1.5) !important}
+.pl-5 { padding-left: ($spacing * 3) !important}
+
+.px-0 { padding-left: 0 !important; padding-right: 0 !important}
+.px-1 { padding-left: ($spacing * .25) !important; padding-right: ($spacing * .25) !important}
+.px-2 { padding-left: ($spacing * .5) !important; padding-right: ($spacing * .50) !important}
+.px-3 { padding-left: ($spacing * 1) !important; padding-right: ($spacing * 1) !important}
+.px-4 { padding-left: ($spacing * 1.5) !important; padding-right: ($spacing * 1.5) !important}
+.px-5 { padding-left: ($spacing * 3) !important; padding-right: ($spacing * 3) !important}
+
+.py-0 { padding-top: 0 !important; padding-bottom: 0 !important}
+.py-1 { padding-top: ($spacing * .25) !important; padding-bottom: ($spacing * .25) !important}
+.py-2 { padding-top: ($spacing * .5) !important; padding-bottom: ($spacing * .50) !important}
+.py-3 { padding-top: ($spacing * 1) !important; padding-bottom: ($spacing * 1) !important}
+.py-4 { padding-top: ($spacing * 1.5) !important; padding-bottom: ($spacing * 1.5) !important}
+.py-5 { padding-top: ($spacing * 3) !important; padding-bottom: ($spacing * 3) !important}
\ No newline at end of file
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 50d9b3ef..22410ff9 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,3 +1,6 @@
+// base spacing value
+$spacing: 1.5rem;
+
 // base color
 $blue:#324157;
 $light-blue:#3A71A8;