From d965aa02e7917dfa535ba7989e78b2935ea4db3d Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sat, 18 Jul 2020 13:57:47 +0300
Subject: [PATCH] Fixed alignment issues in badge documentation

---
 src/views/badge/BadgeDemo.vue | 22 ++++------------------
 src/views/badge/BadgeDoc.vue  | 12 ++++++------
 2 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/src/views/badge/BadgeDemo.vue b/src/views/badge/BadgeDemo.vue
index e41e603af..88cc01cef 100644
--- a/src/views/badge/BadgeDemo.vue
+++ b/src/views/badge/BadgeDemo.vue
@@ -37,18 +37,18 @@
                 </div>
 
                 <h5>Positioned Badge</h5>
-                <span class="p-overlay-badge">
-                    <span class="p-badge">2</span>
+                <span class="p-overlay-badge p-mr-5">
                     <i class="pi pi-bell" style="font-size: 2em"></i>
+                    <span class="p-badge">2</span>
                 </span>
 
                 <span class="p-overlay-badge">
-                    <span class="p-badge p-badge-warning">5</span>
                     <Button type="button" label="New" />
+                    <span class="p-badge p-badge-warning">5</span>
                 </span>
 
                 <h5>Inline Button Badge</h5>
-                <Button type="button" label="Emails" badge="8" />
+                <Button type="button" label="Emails" badge="8" class="p-mr-2" />
                 <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
 
                 <h5>Sizes</h5>
@@ -85,18 +85,4 @@ export default {
         margin-right: .5rem;
     }
 }
-
-.p-button {
-    margin-right: .5rem;
-}
-
-.p-overlay-badge {
-    margin-right: 2rem;
-}
-
-/deep/ h1, h2 {
-    .p-badge {
-        vertical-align: middle;
-    }
-}
 </style>
\ No newline at end of file
diff --git a/src/views/badge/BadgeDoc.vue b/src/views/badge/BadgeDoc.vue
index 48c8cc786..6b62418f4 100644
--- a/src/views/badge/BadgeDoc.vue
+++ b/src/views/badge/BadgeDoc.vue
@@ -33,13 +33,13 @@
                 <p>A badge can easily be positioned relative to another element when both are wrapped inside an element with <i>p-overlay-badge</i> class.</p>
 <CodeHighlight>
 &lt;span class="p-overlay-badge"&gt;
-    &lt;span class="p-badge"&gt;2&lt;/span&gt;
     &lt;i class="pi pi-bell" style="font-size: 2em"&gt;&lt;/i&gt;
+    &lt;span class="p-badge"&gt;2&lt;/span&gt;
 &lt;/span&gt;
 
 &lt;span class="p-overlay-badge"&gt;
-    &lt;span class="p-badge p-badge-warning"&gt;5&lt;/span&gt;
     &lt;Button type="button" label="New" /&gt;
+    &lt;span class="p-badge p-badge-warning"&gt;5&lt;/span&gt;
 &lt;/span&gt;
 </CodeHighlight>
 
@@ -142,18 +142,18 @@
 &lt;/div&gt;
 
 &lt;h3&gt;Positioned Badge&lt;/h3&gt;
-&lt;span class="p-overlay-badge"&gt;
-    &lt;span class="p-badge"&gt;2&lt;/span&gt;
+&lt;span class="p-overlay-badge p-mr-5"&gt;
     &lt;i class="pi pi-bell" style="font-size: 2em"&gt;&lt;/i&gt;
+    &lt;span class="p-badge"&gt;2&lt;/span&gt;
 &lt;/span&gt;
 
 &lt;span class="p-overlay-badge"&gt;
-    &lt;span class="p-badge p-badge-warning"&gt;5&lt;/span&gt;
     &lt;Button type="button" label="New" /&gt;
+    &lt;span class="p-badge p-badge-warning"&gt;5&lt;/span&gt;
 &lt;/span&gt;
 
 &lt;h3&gt;Inline Button Badge&lt;/h3&gt;
-&lt;Button type="button" label="Emails" badge="8" /&gt;
+&lt;Button type="button" label="Emails" badge="8" class="p-mr-2" /&gt;
 &lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /&gt;
 
 &lt;h3&gt;Sizes&lt;/h3&gt;