refactor: update card headers

Author: mrholek

pug/base/accordion.pug

@@ -42,7 +42,7 @@ block view
       .card.mb-4
         .card-header
           |  Accordion
-          small Flush
+          span.small.ms-1 Flush
         .card-body
           #accordionFlushExample.accordion.accordion-flush
             .accordion-item

pug/base/breadcrumb.pug

@@ -6,9 +6,9 @@ block view
       .card.mb-4
         .card-header
           |  Bootstrap Breadcrumb
-          .card-header-actions
-            a.card-header-action(href='http://coreui.io/docs/components/bootstrap-breadcrumb/', target='_blank')
-              small.text-muted docs
+          .float-end
+            a(href='http://coreui.io/docs/components/breadcrumb/', target='_blank')
+              | docs
         .card-body
           nav(aria-label='breadcrumb', role='navigation')
             ol.breadcrumb

pug/base/cards.pug

@@ -96,42 +96,42 @@ block view
   // /.row
   .row
     .col-sm-6.col-md-4
-      .card.mb-4.card-accent-primary
+      .card.mb-4.border-top-primary.border-top-2
         .card-header
           | Card with accent
         .card-body
           | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
     // /.col
     .col-sm-6.col-md-4
-      .card.mb-4.card-accent-secondary
+      .card.mb-4.border-top-secondary.border-top-2
         .card-header
           | Card with accent
         .card-body
           | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
     // /.col
     .col-sm-6.col-md-4
-      .card.mb-4.card-accent-success
+      .card.mb-4.border-top-success.border-top-2
         .card-header
           | Card with accent
         .card-body
           | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
     // /.col
     .col-sm-6.col-md-4
-      .card.mb-4.card-accent-info
+      .card.mb-4.border-top-info.border-top-2
         .card-header
           | Card with accent
         .card-body
           | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
     // /.col
     .col-sm-6.col-md-4
-      .card.mb-4.card-accent-warning
+      .card.mb-4.border-top-warning.border-top-2
         .card-header
           | Card with accent
         .card-body
           | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
     // /.col
     .col-sm-6.col-md-4
-      .card.mb-4.card-accent-danger
+      .card.mb-4.border-top-danger.border-top-2
         .card-header
           | Card with accent
         .card-body
@@ -236,22 +236,22 @@ block view
         .card-body
           | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
     // /.col
-    .col-sm-6.col-md-4
-      .card.mb-4
-        .card-header
-          | Card actions
-          .card-header-actions
-            a.card-header-action.btn-setting(href='#')
-              svg.icon
-                use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-settings")
-            a.card-header-action.btn-minimize(href='#', data-coreui-toggle='collapse', data-coreui-target='#collapseExample', aria-expanded='true')
-              svg.icon
-                use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-circle-top")
-            a.card-header-action.btn-close(href='#')
-              svg.icon
-                use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-x-circle")
-        #collapseExample.collapse.show
-          .card-body
-          | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-    // /.col
+    //- .col-sm-6.col-md-4
+    //-   .card.mb-4
+    //-     .card-header
+    //-       | Card actions
+    //-       .float-end
+    //-         a.card-header-action.btn-setting(href='#')
+    //-           svg.icon
+    //-             use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-settings")
+    //-         a.card-header-action.btn-minimize(href='#', data-coreui-toggle='collapse', data-coreui-target='#collapseExample', aria-expanded='true')
+    //-           svg.icon
+    //-             use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-circle-top")
+    //-         a.card-header-action.btn-close(href='#')
+    //-           svg.icon
+    //-             use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-x-circle")
+    //-     #collapseExample.collapse.show
+    //-       .card-body
+    //-       | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+    //- // /.col
   // /.row

pug/base/carousel.pug

@@ -6,10 +6,10 @@ block view
       .card.mb-4
         .card-header
           |  Carousel
-          small slides only
-          .card-header-actions
-            a.card-header-action(href='http://coreui.io/docs/components/bootstrap-carousel/', target='_blank')
-              small.text-muted docs
+          span.small.ms-1 slides only
+          .float-end
+            a(href='http://coreui.io/docs/components/carousel/', target='_blank')
+              | docs
         .card-body
           #carouselExampleSlidesOnly.carousel.slide(data-coreui-ride='carousel')
             .carousel-inner
@@ -22,7 +22,7 @@ block view
       .card.mb-4
         .card-header
           |  Carousel
-          small with controls
+          span.small.ms-1 with controls
         .card-body
           #carouselExampleControls.carousel.slide(data-coreui-ride='carousel')
             .carousel-inner
@@ -42,7 +42,7 @@ block view
       .card.mb-4
         .card-header
           |  Carousel
-          small with indicators
+          span.small.ms-1 with indicators
         .card-body
           #carouselExampleIndicators.carousel.slide(data-coreui-ride='carousel')
             ol.carousel-indicators
@@ -65,7 +65,7 @@ block view
       .card.mb-4
         .card-header
           |  Carousel
-          small with captions
+          span.small.ms-1 with captions
         .card-body
           #carouselExampleCaptions.carousel.slide(data-coreui-ride='carousel')
             ol.carousel-indicators

pug/base/collapse.pug

@@ -4,9 +4,9 @@ block view
   .card.mb-4
     .card-header
       |  Collapse
-      .card-header-actions
-        a.card-header-action(href='http://coreui.io/docs/components/bootstrap-collapse/', target='_blank')
-          small.text-muted docs
+      .float-end
+        a(href='http://coreui.io/docs/components/collapse/', target='_blank')
+          | docs
     .card-body
       p
         a.btn.btn-primary(data-coreui-toggle='collapse', href='#collapseExample', aria-expanded='false', aria-controls='collapseExample')
@@ -19,7 +19,7 @@ block view
   .card.mb-4
     .card-header
       |  Collapse
-      small multiple targets
+      span.small.ms-1 multiple targets
     .card-body
       p
         a.btn.btn-primary(data-coreui-toggle='collapse', href='#multiCollapseExample1', aria-expanded='false', aria-controls='multiCollapseExample1') Toggle first element

pug/base/forms.pug

@@ -5,7 +5,7 @@ block view
     .col-sm-6
       .card.mb-4
         .card-header
-          | #[strong Credit Card] #[small Form]
+          | #[strong Credit Card] #[span.small.ms-1 Form]
         .card-body
           .row
             .col-sm-12
@@ -59,7 +59,7 @@ block view
     .col-sm-6
       .card.mb-4
         .card-header
-          | #[strong Company] #[small Form]
+          | #[strong Company] #[span.small.ms-1 Form]
         .card-body
           .mb-3
             label.form-label(for='company') Company
@@ -514,7 +514,7 @@ block view
     .col-md-6
       .card.mb-4
         .card-header
-          | Use the grid for big devices! #[small #[code .col-lg-*] #[code  .col-md-*] #[code  .col-sm-*]]
+          | Use the grid for big devices! #[span.small.ms-1 #[code .col-lg-*] #[code  .col-md-*] #[code  .col-sm-*]]
         .card-body
           form.form-horizontal(action='', method='post')
             .row.mb-3
@@ -551,7 +551,7 @@ block view
     .col-md-6
       .card.mb-4
         .card-header
-          | Input Grid for small devices! #[small #[code .col-*]]
+          | Input Grid for small devices! #[span.small.ms-1 #[code .col-*]]
         .card-body
           form.form-horizontal(action='', method='post')
             .row.mb-3

pug/base/list-group.pug

@@ -6,9 +6,9 @@ block view
       .card.mb-4
         .card-header
           |  List group
-          .card-header-actions
-            a.card-header-action(href='http://coreui.io/docs/components/bootstrap-list-group/', target='_blank')
-              small.text-muted docs
+          .float-end
+            a(href='http://coreui.io/docs/components/list-group/', target='_blank')
+              | docs
         .card-body
           ul.list-group
             li.list-group-item Cras justo odio
@@ -20,7 +20,7 @@ block view
       .card.mb-4
         .card-header
           |  List group
-          small active items
+          span.small.ms-1 active items
         .card-body
           ul.list-group
             li.list-group-item.active Cras justo odio
@@ -33,7 +33,7 @@ block view
       .card.mb-4
         .card-header
           |  List group
-          small links with disabled items
+          span.small.ms-1 links with disabled items
         .card-body
           .list-group
             a.list-group-item.active(href='#')
@@ -46,7 +46,7 @@ block view
       .card.mb-4
         .card-header
           |  List group
-          small buttons with disabled items
+          span.small.ms-1 buttons with disabled items
         .card-body
           .list-group
             button.list-group-item.list-group-item-action.active(type='button')
@@ -60,7 +60,7 @@ block view
       .card.mb-4
         .card-header
           |  List group
-          small contextual classes
+          span.small.ms-1 contextual classes
         .card-body
           ul.list-group
             li.list-group-item Dapibus ac facilisis in
@@ -111,7 +111,7 @@ block view
       .card.mb-4
         .card-header
           |  List group
-          small with badges
+          span.small.ms-1 with badges
         .card-body
           ul.list-group
             li.list-group-item.d-flex.list-group-item-action.justify-content-between.align-items-center
@@ -127,7 +127,7 @@ block view
       .card.mb-4
         .card-header
           |  List group
-          small custom content
+          span.small.ms-1 custom content
         .card-body
           .list-group
             a.list-group-item.list-group-item-action.flex-column.align-items-start.active(href='#')
@@ -156,7 +156,7 @@ block view
       .card.mb-4
         .card-header
           |  List group
-          small tab Javascript plugin
+          span.small.ms-1 tab Javascript plugin
         .card-body
           .row
             .col-4

pug/base/navs.pug

@@ -6,9 +6,9 @@ block view
       .card.mb-4
         .card-header
           |  Navs
-          .card-header-actions
-            a.card-header-action(href='http://coreui.io/docs/components/bootstrap-navs/', target='_blank')
-              small.text-muted docs
+          .float-end
+            a(href='http://coreui.io/docs/components/navs/', target='_blank')
+              | docs
         .card-body
           ul.nav
             li.nav-item
@@ -49,7 +49,7 @@ block view
       .card.mb-4
         .card-header
           |  Navs
-          small vertical
+          span.small.ms-1 vertical
         .card-body
           nav.nav.flex-column
             a.nav-link.active(href='#') Active
@@ -60,7 +60,7 @@ block view
       .card.mb-4
         .card-header
           |  Navs
-          small vertical
+          span.small.ms-1 vertical
         .card-body
           ul.nav.flex-column
             li.nav-item
@@ -76,7 +76,7 @@ block view
       .card.mb-4
         .card-header
           |  Navs
-          small tabs
+          span.small.ms-1 tabs
         .card-body
           ul.nav.nav-tabs
             li.nav-item
@@ -91,7 +91,7 @@ block view
       .card.mb-4
         .card-header
           |  Navs
-          small pills
+          span.small.ms-1 pills
         .card-body
           ul.nav.nav-pills
             li.nav-item
@@ -107,7 +107,7 @@ block view
       .card.mb-4
         .card-header
           |  Navs
-          small fill and justify
+          span.small.ms-1 fill and justify
         .card-body
           ul.nav.nav-pills.nav-fill
             li.nav-item
@@ -141,7 +141,7 @@ block view
       .card.mb-4
         .card-header
           |  Navs
-          small with flex
+          span.small.ms-1 with flex
         .card-body
           nav.nav.nav-pills.flex-column.flex-sm-row
             a.flex-sm-fill.text-sm-center.nav-link.active(href='#') Active
@@ -153,7 +153,7 @@ block view
       .card.mb-4
         .card-header
           |  Navs
-          small tabs with dropdowns
+          span.small.ms-1 tabs with dropdowns
         .card-body
           ul.nav.nav-tabs
             li.nav-item
@@ -174,7 +174,7 @@ block view
       .card.mb-4
         .card-header
           |  Navs
-          small pills with dropdowns
+          span.small.ms-1 pills with dropdowns
         .card-body
           ul.nav.nav-pills
             li.nav-item
@@ -196,7 +196,7 @@ block view
       .card.mb-4
         .card-header
           |  Navs
-          small with tab JavaScript plugin
+          span.small.ms-1 with tab JavaScript plugin
         .card-body
           ul#myTab1.nav.nav-tabs(role='tablist')
             li.nav-item