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

fix(cards): outdated switch class, add card-header-actions
coreui · Jul 12, 2019 · 0cb1d81 · 0cb1d81
2 parents fc3f93d + 6bd8759
commit 0cb1d81
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/CHANGELOG.md b/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

diff --git a/src/base/cards.html b/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>