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

Author: xidedix

src/views/base/cards.html

@@ -28,11 +28,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>
+          <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>
@@ -42,7 +43,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>
@@ -52,7 +55,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>
@@ -300,12 +305,12 @@
             </a>
           </div>
         </div>
-                  <div class="collapse show" id="collapseExample">
-                    <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>
-                  </div>
+        <div class="collapse show" id="collapseExample">
+          <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>
+        </div>
       </div>
     </div>
     <!-- /.col-->