refactor: card header margins

Author: xidedix

CHANGELOG.md

@@ -3,6 +3,7 @@
 ##### `v2.0.0-rc.0`
 - test(unit): add some views testing 
 - test(e2e): add testing for mobile `sidebar-show` 
+- refactor: card headers margins
 - chore: update `vue` to `2.5.17`
 - chore: update `vue-template-compiler` to `2.5.17`
 - chore: update `@vue/cli-plugin-babel` to `3.0.1`

src/views/base/Breadcrumbs.vue

@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap Breadcrumb</strong>
+              <i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>

src/views/base/Carousels.vue

@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap Carousel</strong>
+              <i class="fa fa-align-justify"></i><strong> Bootstrap Carousel</strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/carousel" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>

src/views/base/Collapses.vue

@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap Collapse</strong>
+              <i class="fa fa-align-justify"></i><strong> Bootstrap Collapse </strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/collapse" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
@@ -33,7 +33,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with <code>v-b-toggle</code> directive</small>
+              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small>
             </div>
             <div>
               <!-- Using modifiers -->
@@ -58,7 +58,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with <code>visibility</code></small>
+              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>visibility</code></small>
             </div>
             <div>
               <b-btn v-b-toggle.collapse3 class="m-1">Toggle Collapse</b-btn>
@@ -75,7 +75,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with <code>v-model</code></small>
+              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-model</code></small>
             </div>
             <div>
               <b-btn @click="showCollapse = !showCollapse"
@@ -99,7 +99,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>multiple elements</small>
+              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small>
             </div>
             <div>
               <!-- Single button triggers two b-collapse components -->
@@ -124,7 +124,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small><code>accordion</code> support</small>
+              <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small>
             </div>
             <div role="tablist">
               <b-card no-body class="mb-1">

src/views/base/Forms.vue

@@ -4,7 +4,7 @@
       <b-col sm="6">
         <b-card>
           <div slot="header">
-            <strong>Credit Card</strong> <small>Form</small>
+            <strong>Credit Card </strong> <small>Form</small>
           </div>
           <b-row>
             <b-col sm="12">
@@ -53,7 +53,7 @@
       <b-col sm="6">
         <b-card>
           <div slot="header">
-            <strong>Company</strong> <small>Form</small>
+            <strong>Company </strong><small>Form</small>
           </div>
           <b-form-group>
             <label for="company">Company</label>

src/views/base/Jumbotrons.vue

@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap Jumbotron</strong>
+              <i class="fa fa-align-justify"></i> <strong> Bootstrap Jumbotron </strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
@@ -27,7 +27,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Jumbotron</strong>
+              <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
               <small>with slots</small>
             </div>
             <div>
@@ -57,7 +57,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Jumbotron</strong>
+              <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
               <small>variants</small>
             </div>
             <div>

src/views/base/ListGroups.vue

@@ -7,7 +7,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>Bootstrap list group</strong>
+              <i class="fa fa-align-justify"></i><strong> Bootstrap list group </strong>
               <div class="card-header-actions">
                 <a href="https://bootstrap-vue.js.org/docs/components/list-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
                   <small class="text-muted">docs</small>
@@ -28,7 +28,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>active items</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
             </div>
             <b-list-group>
               <b-list-group-item>Cras justo odio</b-list-group-item>
@@ -46,7 +46,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>disabled items</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>disabled items</small>
             </div>
             <b-list-group>
               <b-list-group-item disabled>Cras justo odio</b-list-group-item>
@@ -62,7 +62,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>actionable items</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>actionable items</small>
             </div>
             <b-list-group>
               <b-list-group-item href="#some-link">Awesome link</b-list-group-item>
@@ -79,7 +79,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>buttons</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>buttons</small>
             </div>
             <b-list-group>
               <b-list-group-item button>Button item</b-list-group-item>
@@ -94,7 +94,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>with badges</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>with badges</small>
             </div>
             <b-list-group>
               <b-list-group-item class="d-flex justify-content-between align-items-center">
@@ -119,7 +119,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>variants</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>variants</small>
             </div>
             <b-list-group>
               <b-list-group-item>This is a default list group item</b-list-group-item>
@@ -139,7 +139,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>variants active</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>variants active</small>
             </div>
             <b-list-group>
               <b-list-group-item href="#">This is a default list group item</b-list-group-item>
@@ -161,7 +161,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>inside cards</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>inside cards</small>
             </div>
             <b-card-group deck>
               <b-card header="<b>Card with list group</b>">
@@ -200,7 +200,7 @@
             header-tag="header"
             footer-tag="footer">
             <div slot="header">
-              <i class="fa fa-align-justify"></i> <strong>List group</strong> <small>custom content</small>
+              <i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
             </div>
             <b-list-group>
               <b-list-group-item href="#" active class="flex-column align-items-start">

src/views/base/Navbars.vue

@@ -5,7 +5,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navbar</strong>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navbar </strong>
           <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/navbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
@@ -57,7 +57,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Navbar</strong>
+          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>brand</small>
         </div>
         <div>
@@ -74,7 +74,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Navbar</strong>
+          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>text</small>
         </div>
         <div>
@@ -93,7 +93,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Navbar</strong>
+          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>dropdown</small>
         </div>
         <div>
@@ -123,7 +123,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Navbar</strong>
+          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>form</small>
         </div>
         <div>
@@ -139,7 +139,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Navbar</strong>
+          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
           <small>input group</small>
         </div>
         <div>

src/views/base/Navs.vue

@@ -5,7 +5,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
           <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/nav" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
@@ -25,7 +25,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>tab style</small>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>tab style</small>
         </div>
         <div>
           <b-nav tabs>
@@ -40,7 +40,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>pill style</small>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>pill style</small>
         </div>
         <div>
           <b-nav pills>
@@ -55,7 +55,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>fill tabs</small>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>fill tabs</small>
         </div>
         <div>
           <b-nav fill tabs>
@@ -70,7 +70,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>justified tabs</small>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>justified tabs</small>
         </div>
         <div>
           <b-nav justified tabs>
@@ -85,7 +85,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>dropdown support</small>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>dropdown support</small>
         </div>
         <div>
           <b-nav pills>
@@ -104,7 +104,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>vertical variation</small>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>vertical variation</small>
         </div>
         <div>
           <b-nav vertical class="w-25">

src/views/base/Paginations.vue

@@ -5,7 +5,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Bootstrap Pagination</strong>
+          <i class="fa fa-align-justify"></i><strong> Bootstrap Pagination</strong>
           <div class="card-header-actions">
             <a href="https://bootstrap-vue.js.org/docs/components/pagination" class="card-header-action" rel="noreferrer noopener" target="_blank">
               <small class="text-muted">docs</small>
@@ -37,7 +37,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Pagination</strong>
+          <i class="fa fa-align-justify"></i><strong> Pagination </strong>
           <small>alignment</small>
         </div>
         <div>
@@ -63,7 +63,7 @@
         header-tag="header"
         footer-tag="footer">
         <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong>Pagination</strong>
+          <i class="fa fa-align-justify"></i><strong> Pagination </strong>
           <small>navigation</small>
         </div>
         <div>