From 291adada5fc8e3c50c391d9f65df3a33d2abb0d8 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sat, 18 Jul 2020 14:07:19 +0300
Subject: [PATCH] Use primeflex for margins

---
 src/views/toolbar/ToolbarDemo.vue |  8 ++++----
 src/views/toolbar/ToolbarDoc.vue  | 32 +++++++++++++++----------------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/views/toolbar/ToolbarDemo.vue b/src/views/toolbar/ToolbarDemo.vue
index 6d88a4b4d..e78e1e2d8 100755
--- a/src/views/toolbar/ToolbarDemo.vue
+++ b/src/views/toolbar/ToolbarDemo.vue
@@ -10,15 +10,15 @@
         <div class="content-section implementation">
             <Toolbar>
                 <template slot="left">
-                    <Button label="New" icon="pi pi-plus" style="margin-right: .5em" />
+                    <Button label="New" icon="pi pi-plus" class="p-mr-2" />
                     <Button label="Upload" icon="pi pi-upload" class="p-button-success" />
-                    <i class="pi pi-bars p-toolbar-separator" style="margin-right: .5em" />
+                    <i class="pi pi-bars p-toolbar-separator p-mr-2" />
                     <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
                 </template>
 
                 <template slot="right">
-                    <Button icon="pi pi-search" style="margin-right: .5em" />
-                    <Button icon="pi pi-calendar" class="p-button-success" style="margin-right: .5em" />
+                    <Button icon="pi pi-search" class="p-mr-2" />
+                    <Button icon="pi pi-calendar" class="p-button-success p-mr-2" />
                     <Button icon="pi pi-times" class="p-button-danger" />
                 </template>
             </Toolbar>
diff --git a/src/views/toolbar/ToolbarDoc.vue b/src/views/toolbar/ToolbarDoc.vue
index 0e73e109e..289ca50ab 100755
--- a/src/views/toolbar/ToolbarDoc.vue
+++ b/src/views/toolbar/ToolbarDoc.vue
@@ -11,18 +11,18 @@ import Toolbar from 'primevue/toolbar';
 				<p>Toolbar provides <i>left</i> and <i>right</i> templates to place content at these sections.</p>
 <CodeHighlight>
 &lt;Toolbar&gt;
-	&lt;template slot="left"&gt;
-		&lt;Button label="New" icon="pi pi-plus" style="margin-right: .5em" /&gt;
-		&lt;Button label="Upload" icon="pi pi-upload" class="p-button-success" /&gt;
-		&lt;i class="pi pi-bars p-toolbar-separator" style="margin-right: .5em" /&gt;
-		&lt;SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"&gt;&lt;/SplitButton&gt;
-	&lt;/template&gt;
+    &lt;template slot="left"&gt;
+        &lt;Button label="New" icon="pi pi-plus" class="p-mr-2" /&gt;
+        &lt;Button label="Upload" icon="pi pi-upload" class="p-button-success" /&gt;
+        &lt;i class="pi pi-bars p-toolbar-separator p-mr-2" /&gt;
+        &lt;SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"&gt;&lt;/SplitButton&gt;
+    &lt;/template&gt;
 
-	&lt;template slot="right"&gt;
-		&lt;Button icon="pi pi-search" style="margin-right: .5em" /&gt;
-		&lt;Button icon="pi pi-calendar" class="p-button-success" style="margin-right: .5em" /&gt;
-		&lt;Button icon="pi pi-times" class="p-button-danger" /&gt;
-	&lt;/template&gt;
+    &lt;template slot="right"&gt;
+        &lt;Button icon="pi pi-search" class="p-mr-2" /&gt;
+        &lt;Button icon="pi pi-calendar" class="p-button-success p-mr-2" /&gt;
+        &lt;Button icon="pi pi-times" class="p-button-danger" /&gt;
+    &lt;/template&gt;
 &lt;/Toolbar&gt;
 </CodeHighlight>
 
@@ -65,15 +65,15 @@ import Toolbar from 'primevue/toolbar';
 <template v-pre>
 &lt;Toolbar&gt;
     &lt;template slot="left"&gt;
-        &lt;Button label="New" icon="pi pi-plus" style="margin-right: .5em" /&gt;
+        &lt;Button label="New" icon="pi pi-plus" class="p-mr-2" /&gt;
         &lt;Button label="Upload" icon="pi pi-upload" class="p-button-success" /&gt;
-        &lt;i class="pi pi-bars p-toolbar-separator" style="margin-right: .5em" /&gt;
-        &lt;Button label="Save" icon="pi pi-check" class="p-button-warning" /&gt;
+        &lt;i class="pi pi-bars p-toolbar-separator p-mr-2" /&gt;
+        &lt;SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"&gt;&lt;/SplitButton&gt;
     &lt;/template&gt;
 
     &lt;template slot="right"&gt;
-        &lt;Button icon="pi pi-search" style="margin-right: .5em" /&gt;
-        &lt;Button icon="pi pi-calendar" class="p-button-success" style="margin-right: .5em" /&gt;
+        &lt;Button icon="pi pi-search" class="p-mr-2" /&gt;
+        &lt;Button icon="pi pi-calendar" class="p-button-success p-mr-2" /&gt;
         &lt;Button icon="pi pi-times" class="p-button-danger" /&gt;
     &lt;/template&gt;
 &lt;/Toolbar&gt;