From 53c78c054bbf3309334b6f39bb9dfc00307b91cf Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 17 Jun 2020 22:38:02 +0300
Subject: [PATCH] Update spacing demo

---
 src/assets/styles/app/_content.scss | 11 ++--
 src/views/spacing/SpacingDemo.vue   | 78 +++++++++++++++--------------
 2 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/src/assets/styles/app/_content.scss b/src/assets/styles/app/_content.scss
index fd7f51a1e..dd78a19f2 100644
--- a/src/assets/styles/app/_content.scss
+++ b/src/assets/styles/app/_content.scss
@@ -23,11 +23,10 @@
                 }
 
                 a {
-                    background-color: var(--primary-color-text);
-                    color: var(--primary-color);
-                    border-radius: 3px;
-                    padding: 2px 4px;
-
+                    text-decoration: none;
+                    color: $linkColor;
+                    font-weight: 600;
+    
                     &:hover {
                         text-decoration: underline;
                     }
@@ -141,7 +140,7 @@
                     a {
                         text-decoration: none;
                         color: $linkColor;
-                        font-weight: 500;
+                        font-weight: 600;
 
                         &:hover {
                             text-decoration: underline;
diff --git a/src/views/spacing/SpacingDemo.vue b/src/views/spacing/SpacingDemo.vue
index 3868ee8cd..a6eacfd24 100644
--- a/src/views/spacing/SpacingDemo.vue
+++ b/src/views/spacing/SpacingDemo.vue
@@ -10,48 +10,52 @@
         <div class="content-section implementation">
             <div class="p-grid">
                 <div class="p-col-12 p-md-6">
-                    <h5>Use Case 1</h5>
-                    <p>Spacing is a handy utility when elements wrap when screen size get smaller. In example below, when buttons wrap
-                        they are displayed on top of each other whereas with spacing this issue can easily be resolved.
-                    </p>
+                    <div class="card">
+                        <h5>Use Case 1</h5>
+                        <p>Spacing is a handy utility when elements wrap when screen size get smaller. In example below, when buttons wrap
+                            they are displayed on top of each other whereas with spacing this issue can easily be resolved.
+                        </p>
 
-                    <h6>Without Spacing</h6>
-                    <Button type="button" label="Button 1" style="width:250px" />
-                    <Button type="button" label="Button 2" style="width:250px" />
+                        <h6>Without Spacing</h6>
+                        <Button type="button" label="Button 1" style="width:250px" />
+                        <Button type="button" label="Button 2" style="width:250px" />
 
-                    <h6>With Spacing</h6>
-                    <Button type="button" label="Button 1" style="width:250px" class="p-mr-2 p-mb-2" />
-                    <Button type="button" label="Button 2" style="width:250px" class="p-mr-2"/>
+                        <h6>With Spacing</h6>
+                        <Button type="button" label="Button 1" style="width:250px" class="p-mr-2 p-mb-2" />
+                        <Button type="button" label="Button 2" style="width:250px" class="p-mr-2"/>
+                    </div>
                 </div>
                 <div class="p-col-12 p-md-6">
-                    <h5>Use Case 2</h5>
-                    <p>Spacing utilities also work seamlessly with responsive PrimeFlex grid utilty. Example below demonstrates a case where on a smaller screen inputs receive a margin to position themselves
-                        separately in stacked mode, reduce the dimension of the window to view the difference.
-                    </p>
+                    <div class="card">
+                        <h5>Use Case 2</h5>
+                        <p>Spacing utilities also work seamlessly with responsive PrimeFlex grid utilty. Example below demonstrates a case where on a smaller screen inputs receive a margin to position themselves
+                            separately in stacked mode, reduce the dimension of the window to view the difference.
+                        </p>
 
-                    <h6>Without Spacing</h6>
-                    <div class="p-grid p-formgrid p-fluid">
-                        <div class="p-col-12 p-lg-4">
-                            <InputText />
+                        <h6>Without Spacing</h6>
+                        <div class="p-grid p-formgrid p-fluid">
+                            <div class="p-col-12 p-lg-4">
+                                <InputText />
+                            </div>
+                            <div class="p-col-12 p-lg-4">
+                                <InputText />
+                            </div>
+                            <div class="p-col-12 p-lg-4">
+                                <InputText />
+                            </div>
                         </div>
-                        <div class="p-col-12 p-lg-4">
-                            <InputText />
-                        </div>
-                        <div class="p-col-12 p-lg-4">
-                            <InputText />
-                        </div>
-                    </div>
 
-                    <h6>With Spacing</h6>
-                    <div class="p-grid p-formgrid p-fluid">
-                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
-                            <InputText />
-                        </div>
-                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
-                            <InputText />
-                        </div>
-                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
-                            <InputText />
+                        <h6>With Spacing</h6>
+                        <div class="p-grid p-formgrid p-fluid">
+                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                                <InputText />
+                            </div>
+                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                                <InputText />
+                            </div>
+                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                                <InputText />
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -73,7 +77,7 @@ export default {
 </script>
 
 <style scoped>
-    p {
-        line-height: 1.5;
+    .card {
+        min-height: 100%;
     }
 </style>
\ No newline at end of file