Merge pull request #485 from coreui/fix-card-switch

fix(cards): outdated switch class, add card-header-actions

Author: xidedix

CHANGELOG.md

@@ -2,6 +2,7 @@
 - fix: babelrc config
 - fix: missing favicon link
 - fix: readme links
+- fix(cards): outdated switch class, add card-header-actions
 - chore(deps): bump lodash to 4.17.14
 
 ##### dependencies update

src/base/cards.html

@@ -390,11 +390,12 @@
               <div class="col-sm-6 col-md-4">
                 <div class="card">
                   <div class="card-header">Card with switch
-                    <label class="switch switch-sm switch-text switch-info float-right mb-0">
-                      <input class="switch-input" type="checkbox">
-                      <span class="switch-label" data-on="On" data-off="Off"></span>
-                      <span class="switch-handle"></span>
-                    </label>
+                    <div class="card-header-actions" style="height: 21px;">
+                      <label class="switch switch-sm switch-label switch-info" tabindex="0">
+                        <input type="checkbox" class="switch-input" checked>
+                        <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
+                      </label>
+                    </div>
                   </div>
                   <div class="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.</div>
@@ -404,7 +405,9 @@
               <div class="col-sm-6 col-md-4">
                 <div class="card">
                   <div class="card-header">Card with label
-                    <span class="badge badge-success float-right">Success</span>
+                    <div class="card-header-actions" style="height: 21px;">
+                      <span class="badge badge-success">Success</span>
+                    </div>
                   </div>
                   <div class="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.</div>
@@ -414,7 +417,9 @@
               <div class="col-sm-6 col-md-4">
                 <div class="card">
                   <div class="card-header">Card with label
-                    <span class="badge badge-pill badge-danger float-right">42</span>
+                    <div class="card-header-actions" style="height: 21px;">
+                      <span class="badge badge-pill badge-danger">42</span>
+                    </div>
                   </div>
                   <div class="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.</div>