moving scss variables into one file

Author: samuelcolvin

src/components/con-details.vue

@@ -72,7 +72,7 @@ export default {
 </script>
 
 <style lang="scss">
-$hightlight: #1f2e50;
+@import '../conf';
 
 .tcs-location {
   margin-bottom: 10px;

src/components/grid.vue

@@ -24,16 +24,19 @@ export default {
 </script>
 
 <style lang="scss">
+@import '../conf';
+
 #tcs-grid {
   padding: 10px;
   display: flex;
   flex-wrap: wrap;
 }
+
 .tcs-col {
   flex-grow: 1;
   padding: 15px 15px;
 }
-$border-radius: 3px;
+
 .tcs-box {
   border-radius: $border-radius;
   display: block;

src/components/modal.vue

@@ -75,8 +75,8 @@ export default {
 </script>
 
 <style lang="scss">
-$back-colour: 35;
-$hightlight: #1f2e50;
+@import '../conf';
+
 .tcs-modal-mask {
   position: fixed;
   z-index: 9998;
@@ -98,7 +98,6 @@ $hightlight: #1f2e50;
   transition: all .3s ease;
 }
 
-$svg-size: 22px;
 svg.tcs-svg {
   width: $svg-size;
   height: $svg-size;
@@ -145,8 +144,6 @@ svg.tcs-svg {
   width: calc(100% - 200px);
 }
 
-$extra-width: 200px;
-$button-colour: #5cb85c;
 .tcs-extra {
   text-align: center;
   img {

src/conf.scss

@@ -0,0 +1,12 @@
+// grid border radius
+$border-radius: 3px;
+// model background colour
+$back-colour: 35;
+// highlight sections of modals
+$hightlight: #1f2e50;
+// svgs on modals
+$svg-size: 22px;
+// section on right (with image) on modals
+$extra-width: 200px;
+// contact button on modals
+$button-colour: #5cb85c;