Merge pull request #66 from coreui/dev-v2

v2.0.0-beta.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-react-admin-template",
-  "version": "2.0.0-beta",
+  "version": "2.0.0-beta.1",
   "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "https://coreui.io",
@@ -12,8 +12,8 @@
     "url": "git@github.com:coreui/coreui-free-react-admin-template.git"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.0.0-beta.8",
+    "@coreui/coreui": "^2.0.0-beta.10",
-    "@coreui/react": "^2.0.0-beta",
+    "@coreui/react": "^2.0.0-beta.1",
     "bootstrap": "^4.1.0",
     "chart.js": "^2.7.2",
     "classnames": "^2.2.5",

src/containers/Full/FullAside.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
-import { Input, Label, Nav, NavItem, NavLink, Progress, TabContent, TabPane, ListGroup, ListGroupItem } from 'reactstrap';
+import { Nav, NavItem, NavLink, Progress, TabContent, TabPane, ListGroup, ListGroupItem } from 'reactstrap';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { AppSwitch } from '@coreui/react'
 
 const propTypes = {
   children: PropTypes.node,
@@ -239,11 +240,7 @@ class FullAside extends Component {
             <div className="aside-options">
               <div className="clearfix mt-4">
                 <small><b>Option 1</b></small>
-                <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'}/>
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
               </div>
               <div>
                 <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -255,11 +252,7 @@ class FullAside extends Component {
             <div className="aside-options">
               <div className="clearfix mt-3">
                 <small><b>Option 2</b></small>
-                <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} size={'sm'}/>
-                  <Input type="checkbox" className="switch-input" />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
               </div>
               <div>
                 <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -271,22 +264,17 @@ class FullAside extends Component {
             <div className="aside-options">
               <div className="clearfix mt-3">
                 <small><b>Option 3</b></small>
-                <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'} disabled/>
-                  <Input type="checkbox" className="switch-input" />
+                <div>
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+                  <small className="text-muted">Option disabled.</small>
-                  <span className="switch-handle"></span>
+                </div>
-                </Label>
               </div>
             </div>
 
             <div className="aside-options">
               <div className="clearfix mt-3">
                 <small><b>Option 4</b></small>
-                <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'} />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
               </div>
             </div>
 

src/routes.js

@@ -44,7 +44,7 @@ const routes = [
   { path: '/base', exact: true, name: 'Base', component: Cards },
   { path: '/base/cards', name: 'Cards', component: Cards },
   { path: '/base/forms', name: 'Forms', component: Forms },
-  { path: '/base/switches', name: 'Swithces', component: Switches },
+  { path: '/base/switches', name: 'Switches', component: Switches },
   { path: '/base/tables', name: 'Tables', component: Tables },
   { path: '/base/tabs', name: 'Tabs', component: Tabs },
   { path: '/base/breadcrumbs', name: 'Breadcrumbs', component: Breadcrumbs },

src/scss/style.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /*!
  * CoreUI - Open Source Dashboard UI Kit
- * @version v2.0.0-beta.8
+ * @version v2.0.0-beta.10
  * @link https://coreui.io
  * Copyright (c) 2018 creativeLabs Łukasz Holeczek
  * Licensed under MIT (https://coreui.io/license)
@@ -7735,136 +7735,6 @@ canvas {
   height: auto;
   border-radius: 50em; }
 
-#loading-bar,
-#loading-bar-spinner {
-  -webkit-pointer-events: none;
-  pointer-events: none;
-  -moz-transition: 350ms linear all;
-  -o-transition: 350ms linear all;
-  -webkit-transition: 350ms linear all;
-  transition: 350ms linear all; }
-
-#loading-bar.ng-enter,
-#loading-bar.ng-leave.ng-leave-active,
-#loading-bar-spinner.ng-enter,
-#loading-bar-spinner.ng-leave.ng-leave-active {
-  opacity: 0; }
-
-#loading-bar.ng-enter.ng-enter-active,
-#loading-bar.ng-leave,
-#loading-bar-spinner.ng-enter.ng-enter-active,
-#loading-bar-spinner.ng-leave {
-  opacity: 1; }
-
-#loading-bar .bar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 20002;
-  width: 100%;
-  height: 2px;
-  background: #20a8d8;
-  border-top-right-radius: 1px;
-  border-bottom-right-radius: 1px;
-  -moz-transition: width 350ms;
-  -o-transition: width 350ms;
-  -webkit-transition: width 350ms;
-  transition: width 350ms; }
-
-#loading-bar .peg {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 70px;
-  height: 2px;
-  -moz-border-radius: 100%;
-  -webkit-border-radius: 100%;
-  border-radius: 100%;
-  -moz-box-shadow: #29d 1px 0 6px 1px;
-  -ms-box-shadow: #29d 1px 0 6px 1px;
-  -webkit-box-shadow: #29d 1px 0 6px 1px;
-  box-shadow: #29d 1px 0 6px 1px;
-  opacity: .45; }
-
-#loading-bar-spinner {
-  position: fixed;
-  top: 10px;
-  left: 10px;
-  z-index: 10002;
-  display: block; }
-
-#loading-bar-spinner .spinner-icon {
-  width: 14px;
-  height: 14px;
-  border: solid 2px transparent;
-  border-top-color: #29d;
-  border-left-color: #29d;
-  border-radius: 50%;
-  -moz-animation: loading-bar-spinner 400ms linear infinite;
-  -ms-animation: loading-bar-spinner 400ms linear infinite;
-  -o-animation: loading-bar-spinner 400ms linear infinite;
-  -webkit-animation: loading-bar-spinner 400ms linear infinite;
-  animation: loading-bar-spinner 400ms linear infinite; }
-
-@-webkit-keyframes loading-bar-spinner {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg); }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg); } }
-
-@-moz-keyframes loading-bar-spinner {
-  0% {
-    -moz-transform: rotate(0deg);
-    transform: rotate(0deg); }
-  100% {
-    -moz-transform: rotate(360deg);
-    transform: rotate(360deg); } }
-
-@-o-keyframes loading-bar-spinner {
-  0% {
-    -o-transform: rotate(0deg);
-    transform: rotate(0deg); }
-  100% {
-    -o-transform: rotate(360deg);
-    transform: rotate(360deg); } }
-
-@-ms-keyframes loading-bar-spinner {
-  0% {
-    -ms-transform: rotate(0deg);
-    transform: rotate(0deg); }
-  100% {
-    -ms-transform: rotate(360deg);
-    transform: rotate(360deg); } }
-
-@keyframes loading-bar-spinner {
-  0% {
-    transform: rotate(0deg);
-    transform: rotate(0deg); }
-  100% {
-    transform: rotate(360deg);
-    transform: rotate(360deg); } }
-
-.pace {
-  -webkit-pointer-events: none;
-  pointer-events: none;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  user-select: none; }
-
-.pace-inactive {
-  display: none; }
-
-.pace .pace-progress {
-  position: fixed;
-  top: 0;
-  right: 100%;
-  z-index: 2000;
-  width: 100%;
-  height: 2px;
-  background: #20a8d8; }
-
 .list-group-accent .list-group-item {
   margin-bottom: 1px;
   border-top: 0;
@@ -8387,6 +8257,7 @@ canvas {
     .sidebar-minimized .sidebar .nav {
       width: 50px; }
     .sidebar-minimized .sidebar .nav-divider,
+    .sidebar-minimized .sidebar .nav-label,
     .sidebar-minimized .sidebar .nav-title,
     .sidebar-minimized .sidebar .sidebar-footer,
     .sidebar-minimized .sidebar .sidebar-form,
@@ -8473,374 +8344,336 @@ canvas {
   left: 0; }
 
 .switch {
-  position: relative;
   display: inline-block;
   width: 40px;
-  height: 24px;
+  height: 26px; }
-  vertical-align: top;
-  cursor: pointer;
-  background-color: transparent; }
 
 .switch-input {
-  position: absolute;
+  display: none; }
-  top: 0;
-  left: 0;
-  opacity: 0; }
 
-.switch-label {
+.switch-slider {
   position: relative;
   display: block;
   height: inherit;
-  font-size: 10px;
+  cursor: pointer;
-  font-weight: 600;
-  text-transform: uppercase;
   background-color: #fff;
   border: 1px solid #c8ced3;
-  border-radius: 2px;
+  transition: .15s ease-out;
-  transition: opacity background .15s ease-out; }
+  border-radius: 0.25rem; }
-  .switch-label::before, .switch-label::after {
+  .switch-slider::before {
-    position: absolute;
-    top: 50%;
-    width: 50%;
-    margin-top: -.5em;
-    line-height: 1;
-    text-align: center;
-    transition: inherit; }
-  .switch-label::before {
-    right: 1px;
-    color: #e4e7ea;
-    content: attr(data-off); }
-  .switch-label::after {
-    left: 1px;
-    color: #fff;
-    content: attr(data-on);
-    opacity: 0; }
-
-.switch-handle {
     position: absolute;
     top: 2px;
     left: 2px;
+    box-sizing: border-box;
     width: 20px;
     height: 20px;
-  background: #fff;
+    content: "";
+    background-color: #fff;
     border: 1px solid #c8ced3;
-  border-radius: 1px;
+    transition: .15s ease-out;
-  transition: left .15s ease-out; }
+    border-radius: 0.125rem; }
 
-.switch-input:checked ~ .switch-label::before {
+.switch-input:checked ~ .switch-slider::before {
-  opacity: 0; }
+  transform: translateX(14px); }
 
-.switch-input:checked ~ .switch-label::after {
+.switch-input:disabled ~ .switch-slider {
-  opacity: 1; }
+  cursor: not-allowed;
-
+  opacity: .5; }
-.switch-input:checked ~ .switch-handle {
-  left: 18px; }
-
-.switch-primary > .switch-input:checked ~ .switch-label {
-  background: #20a8d8;
-  border-color: #1985ac; }
-
-.switch-primary > .switch-input:checked ~ .switch-handle {
-  border-color: #1985ac; }
-
-.switch-primary-outline > .switch-input:checked ~ .switch-label {
-  background: #fff;
-  border-color: #20a8d8; }
-  .switch-primary-outline > .switch-input:checked ~ .switch-label::after {
-    color: #20a8d8; }
-
-.switch-primary-outline > .switch-input:checked ~ .switch-handle {
-  border-color: #20a8d8; }
-
-.switch-primary-outline-alt > .switch-input:checked ~ .switch-label {
-  background: #fff;
-  border-color: #20a8d8; }
-  .switch-primary-outline-alt > .switch-input:checked ~ .switch-label::after {
-    color: #20a8d8; }
-
-.switch-primary-outline-alt > .switch-input:checked ~ .switch-handle {
-  background: #20a8d8;
-  border-color: #20a8d8; }
-
-.switch-secondary > .switch-input:checked ~ .switch-label {
-  background: #c8ced3;
-  border-color: #acb5bc; }
-
-.switch-secondary > .switch-input:checked ~ .switch-handle {
-  border-color: #acb5bc; }
-
-.switch-secondary-outline > .switch-input:checked ~ .switch-label {
-  background: #fff;
-  border-color: #c8ced3; }
-  .switch-secondary-outline > .switch-input:checked ~ .switch-label::after {
-    color: #c8ced3; }
-
-.switch-secondary-outline > .switch-input:checked ~ .switch-handle {
-  border-color: #c8ced3; }
-
-.switch-secondary-outline-alt > .switch-input:checked ~ .switch-label {
-  background: #fff;
-  border-color: #c8ced3; }
-  .switch-secondary-outline-alt > .switch-input:checked ~ .switch-label::after {
-    color: #c8ced3; }
-
-.switch-secondary-outline-alt > .switch-input:checked ~ .switch-handle {
-  background: #c8ced3;
-  border-color: #c8ced3; }
-
-.switch-success > .switch-input:checked ~ .switch-label {
-  background: #4dbd74;
-  border-color: #3a9d5d; }
-
-.switch-success > .switch-input:checked ~ .switch-handle {
-  border-color: #3a9d5d; }
-
-.switch-success-outline > .switch-input:checked ~ .switch-label {
-  background: #fff;
-  border-color: #4dbd74; }
-  .switch-success-outline > .switch-input:checked ~ .switch-label::after {
-    color: #4dbd74; }
-
-.switch-success-outline > .switch-input:checked ~ .switch-handle {
-  border-color: #4dbd74; }
-
-.switch-success-outline-alt > .switch-input:checked ~ .switch-label {
-  background: #fff;
-  border-color: #4dbd74; }
-  .switch-success-outline-alt > .switch-input:checked ~ .switch-label::after {
-    color: #4dbd74; }
-
-.switch-success-outline-alt > .switch-input:checked ~ .switch-handle {
-  background: #4dbd74;
-  border-color: #4dbd74; }
-
-.switch-info > .switch-input:checked ~ .switch-label {
-  background: #63c2de;
-  border-color: #39b2d5; }
-
-.switch-info > .switch-input:checked ~ .switch-handle {
-  border-color: #39b2d5; }
-
-.switch-info-outline > .switch-input:checked ~ .switch-label {
-  background: #fff;
-  border-color: #63c2de; }
-  .switch-info-outline > .switch-input:checked ~ .switch-label::after {
-    color: #63c2de; }
-
-.switch-info-outline > .switch-input:checked ~ .switch-handle {
-  border-color: #63c2de; }
-
-.switch-info-outline-alt > .switch-input:checked ~ .switch-label {
-  background: #fff;
-  border-color: #63c2de; }
-  .switch-info-outline-alt > .switch-input:checked ~ .switch-label::after {
-    color: #63c2de; }
-
-.switch-info-outline-alt > .switch-input:checked ~ .switch-handle {
-  background: #63c2de;
-  border-color: #63c2de; }
-
-.switch-warning > .switch-input:checked ~ .switch-label {
-  background: #ffc107;
-  border-color: #d39e00; }
-
-.switch-warning > .switch-input:checked ~ .switch-handle {
-  border-color: #d39e00; }
-
-.switch-warning-outline > .switch-input:checked ~ .switch-label {
-  background: #fff;
-  border-color: #ffc107; }
-  .switch-warning-outline > .switch-input:checked ~ .switch-label::after {
-    color: #ffc107; }
-
-.switch-warning-outline > .switch-input:checked ~ .switch-handle {
-  border-color: #ffc107; }
-
-.switch-warning-outline-alt > .switch-input:checked ~ .switch-label {
-  background: #fff;
-  border-color: #ffc107; }
-  .switch-warning-outline-alt > .switch-input:checked ~ .switch-label::after {
-    color: #ffc107; }
-
-.switch-warning-outline-alt > .switch-input:checked ~ .switch-handle {
-  background: #ffc107;
-  border-color: #ffc107; }
-
-.switch-danger > .switch-input:checked ~ .switch-label {
-  background: #f86c6b;
-  border-color: #f63c3a; }
-
-.switch-danger > .switch-input:checked ~ .switch-handle {
-  border-color: #f63c3a; }
-
-.switch-danger-outline > .switch-input:checked ~ .switch-label {
-  background: #fff;
-  border-color: #f86c6b; }
-  .switch-danger-outline > .switch-input:checked ~ .switch-label::after {
-    color: #f86c6b; }
-
-.switch-danger-outline > .switch-input:checked ~ .switch-handle {
-  border-color: #f86c6b; }
-
-.switch-danger-outline-alt > .switch-input:checked ~ .switch-label {
-  background: #fff;
-  border-color: #f86c6b; }
-  .switch-danger-outline-alt > .switch-input:checked ~ .switch-label::after {
-    color: #f86c6b; }
-
-.switch-danger-outline-alt > .switch-input:checked ~ .switch-handle {
-  background: #f86c6b;
-  border-color: #f86c6b; }
-
-.switch-light > .switch-input:checked ~ .switch-label {
-  background: #f0f3f5;
-  border-color: #d1dbe1; }
-
-.switch-light > .switch-input:checked ~ .switch-handle {
-  border-color: #d1dbe1; }
-
-.switch-light-outline > .switch-input:checked ~ .switch-label {
-  background: #fff;
-  border-color: #f0f3f5; }
-  .switch-light-outline > .switch-input:checked ~ .switch-label::after {
-    color: #f0f3f5; }
-
-.switch-light-outline > .switch-input:checked ~ .switch-handle {
-  border-color: #f0f3f5; }
-
-.switch-light-outline-alt > .switch-input:checked ~ .switch-label {
-  background: #fff;
-  border-color: #f0f3f5; }
-  .switch-light-outline-alt > .switch-input:checked ~ .switch-label::after {
-    color: #f0f3f5; }
-
-.switch-light-outline-alt > .switch-input:checked ~ .switch-handle {
-  background: #f0f3f5;
-  border-color: #f0f3f5; }
-
-.switch-dark > .switch-input:checked ~ .switch-label {
-  background: #2f353a;
-  border-color: #181b1e; }
-
-.switch-dark > .switch-input:checked ~ .switch-handle {
-  border-color: #181b1e; }
-
-.switch-dark-outline > .switch-input:checked ~ .switch-label {
-  background: #fff;
-  border-color: #2f353a; }
-  .switch-dark-outline > .switch-input:checked ~ .switch-label::after {
-    color: #2f353a; }
-
-.switch-dark-outline > .switch-input:checked ~ .switch-handle {
-  border-color: #2f353a; }
-
-.switch-dark-outline-alt > .switch-input:checked ~ .switch-label {
-  background: #fff;
-  border-color: #2f353a; }
-  .switch-dark-outline-alt > .switch-input:checked ~ .switch-label::after {
-    color: #2f353a; }
-
-.switch-dark-outline-alt > .switch-input:checked ~ .switch-handle {
-  background: #2f353a;
-  border-color: #2f353a; }
 
 .switch-lg {
   width: 48px;
-  height: 28px; }
+  height: 30px; }
-  .switch-lg .switch-label {
+  .switch-lg .switch-slider {
     font-size: 12px; }
-  .switch-lg .switch-handle {
+    .switch-lg .switch-slider::before {
       width: 24px;
       height: 24px; }
-  .switch-lg .switch-input:checked ~ .switch-handle {
+    .switch-lg .switch-slider::after {
-    left: 22px; }
+      font-size: 12px; }
+  .switch-lg .switch-input:checked ~ .switch-slider::before {
+    transform: translateX(18px); }
 
 .switch-sm {
   width: 32px;
-  height: 20px; }
+  height: 22px; }
-  .switch-sm .switch-label {
+  .switch-sm .switch-slider {
     font-size: 8px; }
-  .switch-sm .switch-handle {
+    .switch-sm .switch-slider::before {
       width: 16px;
       height: 16px; }
-  .switch-sm .switch-input:checked ~ .switch-handle {
+    .switch-sm .switch-slider::after {
-    left: 14px; }
+      font-size: 8px; }
+  .switch-sm .switch-input:checked ~ .switch-slider::before {
+    transform: translateX(10px); }
 
-.switch-text {
+.switch-label {
-  width: 48px;
+  width: 48px; }
-  height: 24px; }
+  .switch-label .switch-slider::before {
-  .switch-text .switch-label {
+    z-index: 2; }
-    font-size: 10px; }
+  .switch-label .switch-slider::after {
-  .switch-text .switch-handle {
+    position: absolute;
-    width: 20px;
+    top: 50%;
-    height: 20px; }
+    right: 1px;
-  .switch-text .switch-input:checked ~ .switch-handle {
+    z-index: 1;
-    left: 26px; }
+    width: 50%;
-  .switch-text.switch-lg {
+    margin-top: -.5em;
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 1;
+    color: #c8ced3;
+    text-align: center;
+    text-transform: uppercase;
+    content: attr(data-unchecked);
+    transition: inherit; }
+  .switch-label .switch-input:checked ~ .switch-slider::before {
+    transform: translateX(22px); }
+  .switch-label .switch-input:checked ~ .switch-slider::after {
+    left: 1px;
+    color: #fff;
+    content: attr(data-checked); }
+  .switch-label.switch-lg {
     width: 56px;
-    height: 28px; }
+    height: 30px; }
-    .switch-text.switch-lg .switch-label {
+    .switch-label.switch-lg .switch-slider {
       font-size: 12px; }
-    .switch-text.switch-lg .switch-handle {
+      .switch-label.switch-lg .switch-slider::before {
         width: 24px;
         height: 24px; }
-    .switch-text.switch-lg .switch-input:checked ~ .switch-handle {
+      .switch-label.switch-lg .switch-slider::after {
-      left: 30px; }
+        font-size: 12px; }
-  .switch-text.switch-sm {
+    .switch-label.switch-lg .switch-input:checked ~ .switch-slider::before {
+      transform: translateX(26px); }
+  .switch-label.switch-sm {
     width: 40px;
-    height: 20px; }
+    height: 22px; }
-    .switch-text.switch-sm .switch-label {
+    .switch-label.switch-sm .switch-slider {
       font-size: 8px; }
-    .switch-text.switch-sm .switch-handle {
+      .switch-label.switch-sm .switch-slider::before {
         width: 16px;
         height: 16px; }
-    .switch-text.switch-sm .switch-input:checked ~ .switch-handle {
+      .switch-label.switch-sm .switch-slider::after {
-      left: 22px; }
+        font-size: 8px; }
+    .switch-label.switch-sm .switch-input:checked ~ .switch-slider::before {
+      transform: translateX(18px); }
 
-.switch-3d .switch-label {
+.switch-3d .switch-slider {
   background-color: #f0f3f5;
   border-radius: 50em; }
-
+  .switch-3d .switch-slider::before {
-.switch-3d .switch-handle {
+    top: -1px;
-  top: 0;
+    left: -1px;
-  left: 0;
+    width: 26px;
-  width: 24px;
+    height: 26px;
-  height: 24px;
     border: 0;
     border-radius: 50em;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); }
 
 .switch-3d.switch-lg {
-  width: 56px;
+  width: 48px;
-  height: 28px; }
+  height: 30px; }
-  .switch-3d.switch-lg .switch-label {
+  .switch-3d.switch-lg .switch-slider::before {
-    font-size: 12px; }
+    width: 30px;
-  .switch-3d.switch-lg .switch-handle {
+    height: 30px; }
-    width: 28px;
+  .switch-3d.switch-lg .switch-input:checked ~ .switch-slider::before {
-    height: 28px; }
+    transform: translateX(18px); }
-  .switch-3d.switch-lg .switch-input:checked ~ .switch-handle {
-    left: 28px; }
 
 .switch-3d.switch-sm {
-  width: 40px;
+  width: 32px;
-  height: 20px; }
+  height: 22px; }
-  .switch-3d.switch-sm .switch-label {
+  .switch-3d.switch-sm .switch-slider::before {
-    font-size: 8px; }
+    width: 22px;
-  .switch-3d.switch-sm .switch-handle {
+    height: 22px; }
-    width: 20px;
+  .switch-3d.switch-sm .switch-input:checked ~ .switch-slider::before {
-    height: 20px; }
+    transform: translateX(10px); }
-  .switch-3d.switch-sm .switch-input:checked ~ .switch-handle {
-    left: 20px; }
 
-.switch-pill .switch-label,
+.switch-primary .switch-input:checked + .switch-slider {
-.switch-pill .switch-handle {
+  background-color: #20a8d8;
+  border-color: #1985ac; }
+  .switch-primary .switch-input:checked + .switch-slider::before {
+    border-color: #1985ac; }
+
+.switch-outline-primary .switch-input:checked + .switch-slider {
+  background-color: #fff;
+  border-color: #20a8d8; }
+  .switch-outline-primary .switch-input:checked + .switch-slider::before {
+    border-color: #20a8d8; }
+  .switch-outline-primary .switch-input:checked + .switch-slider::after {
+    color: #20a8d8; }
+
+.switch-outline-primary-alt .switch-input:checked + .switch-slider {
+  background-color: #fff;
+  border-color: #20a8d8; }
+  .switch-outline-primary-alt .switch-input:checked + .switch-slider::before {
+    background-color: #20a8d8;
+    border-color: #20a8d8; }
+  .switch-outline-primary-alt .switch-input:checked + .switch-slider::after {
+    color: #20a8d8; }
+
+.switch-secondary .switch-input:checked + .switch-slider {
+  background-color: #c8ced3;
+  border-color: #acb5bc; }
+  .switch-secondary .switch-input:checked + .switch-slider::before {
+    border-color: #acb5bc; }
+
+.switch-outline-secondary .switch-input:checked + .switch-slider {
+  background-color: #fff;
+  border-color: #c8ced3; }
+  .switch-outline-secondary .switch-input:checked + .switch-slider::before {
+    border-color: #c8ced3; }
+  .switch-outline-secondary .switch-input:checked + .switch-slider::after {
+    color: #c8ced3; }
+
+.switch-outline-secondary-alt .switch-input:checked + .switch-slider {
+  background-color: #fff;
+  border-color: #c8ced3; }
+  .switch-outline-secondary-alt .switch-input:checked + .switch-slider::before {
+    background-color: #c8ced3;
+    border-color: #c8ced3; }
+  .switch-outline-secondary-alt .switch-input:checked + .switch-slider::after {
+    color: #c8ced3; }
+
+.switch-success .switch-input:checked + .switch-slider {
+  background-color: #4dbd74;
+  border-color: #3a9d5d; }
+  .switch-success .switch-input:checked + .switch-slider::before {
+    border-color: #3a9d5d; }
+
+.switch-outline-success .switch-input:checked + .switch-slider {
+  background-color: #fff;
+  border-color: #4dbd74; }
+  .switch-outline-success .switch-input:checked + .switch-slider::before {
+    border-color: #4dbd74; }
+  .switch-outline-success .switch-input:checked + .switch-slider::after {
+    color: #4dbd74; }
+
+.switch-outline-success-alt .switch-input:checked + .switch-slider {
+  background-color: #fff;
+  border-color: #4dbd74; }
+  .switch-outline-success-alt .switch-input:checked + .switch-slider::before {
+    background-color: #4dbd74;
+    border-color: #4dbd74; }
+  .switch-outline-success-alt .switch-input:checked + .switch-slider::after {
+    color: #4dbd74; }
+
+.switch-info .switch-input:checked + .switch-slider {
+  background-color: #63c2de;
+  border-color: #39b2d5; }
+  .switch-info .switch-input:checked + .switch-slider::before {
+    border-color: #39b2d5; }
+
+.switch-outline-info .switch-input:checked + .switch-slider {
+  background-color: #fff;
+  border-color: #63c2de; }
+  .switch-outline-info .switch-input:checked + .switch-slider::before {
+    border-color: #63c2de; }
+  .switch-outline-info .switch-input:checked + .switch-slider::after {
+    color: #63c2de; }
+
+.switch-outline-info-alt .switch-input:checked + .switch-slider {
+  background-color: #fff;
+  border-color: #63c2de; }
+  .switch-outline-info-alt .switch-input:checked + .switch-slider::before {
+    background-color: #63c2de;
+    border-color: #63c2de; }
+  .switch-outline-info-alt .switch-input:checked + .switch-slider::after {
+    color: #63c2de; }
+
+.switch-warning .switch-input:checked + .switch-slider {
+  background-color: #ffc107;
+  border-color: #d39e00; }
+  .switch-warning .switch-input:checked + .switch-slider::before {
+    border-color: #d39e00; }
+
+.switch-outline-warning .switch-input:checked + .switch-slider {
+  background-color: #fff;
+  border-color: #ffc107; }
+  .switch-outline-warning .switch-input:checked + .switch-slider::before {
+    border-color: #ffc107; }
+  .switch-outline-warning .switch-input:checked + .switch-slider::after {
+    color: #ffc107; }
+
+.switch-outline-warning-alt .switch-input:checked + .switch-slider {
+  background-color: #fff;
+  border-color: #ffc107; }
+  .switch-outline-warning-alt .switch-input:checked + .switch-slider::before {
+    background-color: #ffc107;
+    border-color: #ffc107; }
+  .switch-outline-warning-alt .switch-input:checked + .switch-slider::after {
+    color: #ffc107; }
+
+.switch-danger .switch-input:checked + .switch-slider {
+  background-color: #f86c6b;
+  border-color: #f63c3a; }
+  .switch-danger .switch-input:checked + .switch-slider::before {
+    border-color: #f63c3a; }
+
+.switch-outline-danger .switch-input:checked + .switch-slider {
+  background-color: #fff;
+  border-color: #f86c6b; }
+  .switch-outline-danger .switch-input:checked + .switch-slider::before {
+    border-color: #f86c6b; }
+  .switch-outline-danger .switch-input:checked + .switch-slider::after {
+    color: #f86c6b; }
+
+.switch-outline-danger-alt .switch-input:checked + .switch-slider {
+  background-color: #fff;
+  border-color: #f86c6b; }
+  .switch-outline-danger-alt .switch-input:checked + .switch-slider::before {
+    background-color: #f86c6b;
+    border-color: #f86c6b; }
+  .switch-outline-danger-alt .switch-input:checked + .switch-slider::after {
+    color: #f86c6b; }
+
+.switch-light .switch-input:checked + .switch-slider {
+  background-color: #f0f3f5;
+  border-color: #d1dbe1; }
+  .switch-light .switch-input:checked + .switch-slider::before {
+    border-color: #d1dbe1; }
+
+.switch-outline-light .switch-input:checked + .switch-slider {
+  background-color: #fff;
+  border-color: #f0f3f5; }
+  .switch-outline-light .switch-input:checked + .switch-slider::before {
+    border-color: #f0f3f5; }
+  .switch-outline-light .switch-input:checked + .switch-slider::after {
+    color: #f0f3f5; }
+
+.switch-outline-light-alt .switch-input:checked + .switch-slider {
+  background-color: #fff;
+  border-color: #f0f3f5; }
+  .switch-outline-light-alt .switch-input:checked + .switch-slider::before {
+    background-color: #f0f3f5;
+    border-color: #f0f3f5; }
+  .switch-outline-light-alt .switch-input:checked + .switch-slider::after {
+    color: #f0f3f5; }
+
+.switch-dark .switch-input:checked + .switch-slider {
+  background-color: #2f353a;
+  border-color: #181b1e; }
+  .switch-dark .switch-input:checked + .switch-slider::before {
+    border-color: #181b1e; }
+
+.switch-outline-dark .switch-input:checked + .switch-slider {
+  background-color: #fff;
+  border-color: #2f353a; }
+  .switch-outline-dark .switch-input:checked + .switch-slider::before {
+    border-color: #2f353a; }
+  .switch-outline-dark .switch-input:checked + .switch-slider::after {
+    color: #2f353a; }
+
+.switch-outline-dark-alt .switch-input:checked + .switch-slider {
+  background-color: #fff;
+  border-color: #2f353a; }
+  .switch-outline-dark-alt .switch-input:checked + .switch-slider::before {
+    background-color: #2f353a;
+    border-color: #2f353a; }
+  .switch-outline-dark-alt .switch-input:checked + .switch-slider::after {
+    color: #2f353a; }
+
+.switch-pill .switch-slider {
+  border-radius: 50em; }
+  .switch-pill .switch-slider::before {
     border-radius: 50em; }
-
-.switch-pill .switch-label::before {
-  right: 2px; }
-
-.switch-pill .switch-label::after {
-  left: 2px; }
 
 .table-outline {
   border: 1px solid #c8ced3; }

src/views/Base/Cards/Cards.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { Badge, Card, CardBody, CardFooter, CardHeader, Col, Input, Label, Row, Collapse, Fade } from 'reactstrap';
+import { Badge, Card, CardBody, CardFooter, CardHeader, Col, Row, Collapse, Fade } from 'reactstrap';
+import { AppSwitch } from '@coreui/react'
 
 class Cards extends Component {
   constructor(props) {
@@ -64,11 +65,7 @@ class Cards extends Component {
             <Card>
               <CardHeader>
                 Card with switch
-                <Label className="switch switch-sm switch-text switch-info float-right mb-0">
+                <AppSwitch className={'float-right mb-0'} label color={'info'} defaultChecked size={'sm'}/>
-                  <Input type="checkbox" className="switch-input" />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
               </CardHeader>
               <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

src/views/Base/Switches/Switches.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { Card, CardBody, CardHeader, Col, Input, Label, Row, Table } from 'reactstrap';
+import { Card, CardBody, CardHeader, Col, Row, Table } from 'reactstrap';
+import { AppSwitch } from '@coreui/react'
 
 class Switches extends Component {
   render() {
@@ -7,137 +8,184 @@ class Switches extends Component {
       <div className="animated fadeIn">
 
         <Row>
-          <Col xs="12">
+          <Col xs="12" md="6">
             <Card>
               <CardHeader>
                 3d Switch
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-3d switch-primary">
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked />
-                  <span className="switch-label"></span>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked />
-                  <span className="switch-handle"></span>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked />
-                </Label>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked />
-                &nbsp;&nbsp;&nbsp;
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked />
-                <Label className="switch switch-3d switch-secondary">
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked />
-                  <span className="switch-label"></span>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'}  />
-                  <span className="switch-handle"></span>
+              </CardBody>
-                </Label>
+            </Card>
-                &nbsp;&nbsp;&nbsp;
+          </Col>
-                <Label className="switch switch-3d switch-success">
+          <Col xs="12" md="6">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+            <Card>
-                  <span className="switch-label"></span>
+              <CardHeader>
-                  <span className="switch-handle"></span>
+                3d Switch <small><code>disabled</code></small>
-                </Label>
+              </CardHeader>
-                &nbsp;&nbsp;&nbsp;
+              <CardBody>
-                <Label className="switch switch-3d switch-warning">
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked disabled />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} checked disabled />
-                  <span className="switch-label"></span>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'success'} checked disabled />
-                  <span className="switch-handle"></span>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} checked disabled />
-                </Label>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'info'} checked disabled />
-                &nbsp;&nbsp;&nbsp;
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} checked disabled />
-                <Label className="switch switch-3d switch-info">
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'light'} checked disabled />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} checked disabled />
-                  <span className="switch-label"></span>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} disabled />
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-3d switch-danger">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
               </CardBody>
             </Card>
           </Col>
 
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                3d Switch <small><code>outline="alt"</code></small>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'success'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'info'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'light'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} outline={'alt'} disabled />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                3d Switch <small><code>label</code></small>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} label dataOn={'\u2713'} dataOff={'\u2715'}/>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                3d Switch <small><code>outline label</code></small>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'primary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'secondary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'success'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'warning'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'info'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'danger'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'light'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'dark'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'primary'} label dataOn={'\u2713'} dataOff={'\u2715'}/>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                3d Switch <small><code>outline={'alt'} label</code></small>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'secondary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'success'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'warning'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'info'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'danger'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'light'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'dark'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} label dataOn={'\u2713'} dataOff={'\u2715'}/>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                3d Switch <small><code>outline label</code></small>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'primary'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'secondary'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'success'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'warning'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'info'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'danger'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'light'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'dark'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'primary'} label />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                3d Switch <small><code>outline={'alt'} label</code></small>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'secondary'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'success'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'warning'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'info'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'danger'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'light'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'dark'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} label />
+              </CardBody>
+            </Card>
+          </Col>
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
                 Switch default
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-default switch-primary">
+                <AppSwitch className={'mx-1'} color={'primary'} checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} color={'secondary'} checked />
-                  <span className="switch-label"></span>
+                <AppSwitch className={'mx-1'} color={'success'} checked />
-                  <span className="switch-handle"></span>
+                <AppSwitch className={'mx-1'} color={'warning'} checked />
-                </Label>
+                <AppSwitch className={'mx-1'} color={'info'} checked />
-                &nbsp;&nbsp;&nbsp;
+                <AppSwitch className={'mx-1'} color={'danger'} checked />
-                <Label className="switch switch-default switch-secondary">
+                <AppSwitch className={'mx-1'} color={'light'} checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} color={'dark'} checked />
-                  <span className="switch-label"></span>
+                <AppSwitch className={'mx-1'} color={'primary'} disabled />
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-success">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-warning">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-info">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-danger">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
               </CardBody>
             </Card>
           </Col>
-
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
-                Switch default - pills
+                Switch pills
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-default switch-pill switch-primary">
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} checked />
-                  <span className="switch-label"></span>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} checked />
-                  <span className="switch-handle"></span>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} checked />
-                </Label>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} checked />
-                &nbsp;&nbsp;&nbsp;
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} checked />
-                <Label className="switch switch-default switch-pill switch-secondary">
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} checked />
-                  <span className="switch-label"></span>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} disabled />
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-success">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-warning">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-info">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-danger">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
               </CardBody>
             </Card>
           </Col>
@@ -148,131 +196,51 @@ class Switches extends Component {
                 Switch outline
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-default switch-primary-outline">
+                <AppSwitch className={'mx-1'} color={'primary'} outline checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} color={'secondary'} outline checked />
-                  <span className="switch-label"></span>
+                <AppSwitch className={'mx-1'} color={'success'} outline checked />
-                  <span className="switch-handle"></span>
+                <AppSwitch className={'mx-1'} color={'warning'} outline checked />
-                </Label>
+                <AppSwitch className={'mx-1'} color={'info'} outline checked />
-                &nbsp;&nbsp;&nbsp;
+                <AppSwitch className={'mx-1'} color={'danger'} outline checked />
-                <Label className="switch switch-default switch-secondary-outline">
+                <AppSwitch className={'mx-1'} color={'light'} outline checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} color={'dark'} outline checked />
-                  <span className="switch-label"></span>
+                <AppSwitch className={'mx-1'} color={'primary'} outline disabled />
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-success-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-warning-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-info-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-danger-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
               </CardBody>
             </Card>
           </Col>
-
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
-                Switch outline - pills
+                Switch outline pills
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-default switch-pill switch-primary-outline">
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline checked />
-                  <span className="switch-label"></span>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline checked />
-                  <span className="switch-handle"></span>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline checked />
-                </Label>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline checked />
-                &nbsp;&nbsp;&nbsp;
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline checked />
-                <Label className="switch switch-default switch-pill switch-secondary-outline">
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline checked />
-                  <span className="switch-label"></span>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline disabled />
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-success-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-warning-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-info-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-danger-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
               </CardBody>
             </Card>
           </Col>
-
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
                 Switch outline alternative
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-default switch-primary-outline-alt">
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} color={'secondary'} outline={'alt'} checked />
-                  <span className="switch-label"></span>
+                <AppSwitch className={'mx-1'} color={'success'} outline={'alt'} checked />
-                  <span className="switch-handle"></span>
+                <AppSwitch className={'mx-1'} color={'warning'} outline={'alt'} checked />
-                </Label>
+                <AppSwitch className={'mx-1'} color={'info'} outline={'alt'} checked />
-                &nbsp;&nbsp;&nbsp;
+                <AppSwitch className={'mx-1'} color={'danger'} outline={'alt'} checked />
-                <Label className="switch switch-default switch-secondary-outline-alt">
+                <AppSwitch className={'mx-1'} color={'light'} outline={'alt'} checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} color={'dark'} outline={'alt'} checked />
-                  <span className="switch-label"></span>
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} disabled />
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-success-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-warning-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-info-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-danger-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
               </CardBody>
             </Card>
           </Col>
@@ -283,41 +251,15 @@ class Switches extends Component {
                 Switch outline alternative - pills
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-default switch-pill switch-primary-outline-alt">
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline={'alt'} checked />
-                  <span className="switch-label"></span>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline={'alt'} checked />
-                  <span className="switch-handle"></span>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline={'alt'} checked />
-                </Label>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline={'alt'} checked />
-                &nbsp;&nbsp;&nbsp;
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline={'alt'} checked />
-                <Label className="switch switch-default switch-pill switch-secondary-outline-alt">
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline={'alt'} checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline={'alt'} checked />
-                  <span className="switch-label"></span>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} disabled />
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-success-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-warning-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-info-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-danger-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
               </CardBody>
             </Card>
           </Col>
@@ -328,178 +270,105 @@ class Switches extends Component {
                 Switch with text
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-text switch-primary">
+                <AppSwitch className={'mx-1'} color={'primary'} label checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} color={'secondary'} label checked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+                <AppSwitch className={'mx-1'} color={'success'} label checked />
-                  <span className="switch-handle"></span>
+                <AppSwitch className={'mx-1'} color={'warning'} label checked />
-                </Label>
+                <AppSwitch className={'mx-1'} color={'info'} label checked />
-                &nbsp;&nbsp;&nbsp;
+                <AppSwitch className={'mx-1'} color={'danger'} label checked />
-                <Label className="switch switch-text switch-secondary">
+                <AppSwitch className={'mx-1'} color={'light'} label checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} color={'dark'} label checked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+                <AppSwitch className={'mx-1'} color={'primary'} label disabled />
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-success">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-warning">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-info">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-danger">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
               </CardBody>
             </Card>
           </Col>
-
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
-                Switch with text - pills
+                Switch with text pills
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-text switch-pill switch-primary">
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} label checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} label checked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} label checked />
-                  <span className="switch-handle"></span>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} label checked />
-                </Label>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} label checked />
-                &nbsp;&nbsp;&nbsp;
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} label checked />
-                <Label className="switch switch-text switch-pill switch-secondary">
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} label checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} label checked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} label disabled />
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-success">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-warning">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-info">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-danger">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
               </CardBody>
             </Card>
           </Col>
-
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
                 Switch with text outline
               </CardHeader>
               <CardBody>
-
+                <AppSwitch className={'mx-1'} color={'primary'} outline label checked />
-                <Label className="switch switch-text switch-primary-outline">
+                <AppSwitch className={'mx-1'} color={'secondary'} outline label checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} color={'success'} outline label checked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+                <AppSwitch className={'mx-1'} color={'warning'} outline label checked />
-                  <span className="switch-handle"></span>
+                <AppSwitch className={'mx-1'} color={'info'} outline label checked />
-                </Label>
+                <AppSwitch className={'mx-1'} color={'danger'} outline label checked />
-                &nbsp;&nbsp;&nbsp;
+                <AppSwitch className={'mx-1'} color={'light'} outline label checked />
-                <Label className="switch switch-text switch-secondary-outline">
+                <AppSwitch className={'mx-1'} color={'dark'} outline label checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} color={'primary'} outline label disabled />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-success-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-warning-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-info-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-danger-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
               </CardBody>
             </Card>
           </Col>
-
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
-                Switch with text outline - pills
+                Switch with text outline pills
               </CardHeader>
               <CardBody>
-
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline label checked />
-                <Label className="switch switch-text switch-pill switch-primary-outline">
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline label checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline label checked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline label checked />
-                  <span className="switch-handle"></span>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline label checked />
-                </Label>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline label checked />
-                &nbsp;&nbsp;&nbsp;
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline label checked />
-                <Label className="switch switch-text switch-pill switch-secondary-outline">
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline label checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline label disabled />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+              </CardBody>
-                  <span className="switch-handle"></span>
+            </Card>
-                </Label>
+          </Col>
-                &nbsp;&nbsp;&nbsp;
+          <Col xs="12" md="6">
-                <Label className="switch switch-text switch-pill switch-success-outline">
+            <Card>
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+              <CardHeader>
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+                Switch with text outline alternative pills
-                  <span className="switch-handle"></span>
+              </CardHeader>
-                </Label>
+              <CardBody>
-                &nbsp;&nbsp;&nbsp;
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} label checked />
-                <Label className="switch switch-text switch-pill switch-warning-outline">
+                <AppSwitch className={'mx-1'} color={'secondary'} outline={'alt'} label checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} color={'success'} outline={'alt'} label checked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+                <AppSwitch className={'mx-1'} color={'warning'} outline={'alt'} label checked />
-                  <span className="switch-handle"></span>
+                <AppSwitch className={'mx-1'} color={'info'} outline={'alt'} label checked />
-                </Label>
+                <AppSwitch className={'mx-1'} color={'danger'} outline={'alt'} label checked />
-                &nbsp;&nbsp;&nbsp;
+                <AppSwitch className={'mx-1'} color={'light'} outline={'alt'} label checked />
-                <Label className="switch switch-text switch-pill switch-info-outline">
+                <AppSwitch className={'mx-1'} color={'dark'} outline={'alt'} label checked />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} label disabled />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+              </CardBody>
-                  <span className="switch-handle"></span>
+            </Card>
-                </Label>
+          </Col>
-                &nbsp;&nbsp;&nbsp;
+          <Col xs="12" md="6">
-                <Label className="switch switch-text switch-pill switch-danger-outline">
+            <Card>
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+              <CardHeader>
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+                Switch with text outline alternative pills
-                  <span className="switch-handle"></span>
+              </CardHeader>
-                </Label>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} label disabled />
               </CardBody>
             </Card>
           </Col>
@@ -510,41 +379,33 @@ class Switches extends Component {
                 Switch with text outline alternative
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-text switch-primary-outline-alt">
+                <AppSwitch className={'mx-1'} color={'primary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} color={'secondary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+                <AppSwitch className={'mx-1'} color={'success'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                  <span className="switch-handle"></span>
+                <AppSwitch className={'mx-1'} color={'warning'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                </Label>
+                <AppSwitch className={'mx-1'} color={'info'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
-                &nbsp;&nbsp;&nbsp;
+                <AppSwitch className={'mx-1'} color={'danger'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                <Label className="switch switch-text switch-secondary-outline-alt">
+                <AppSwitch className={'mx-1'} color={'light'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} color={'dark'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+                <AppSwitch className={'mx-1'} color={'primary'} outline disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                  <span className="switch-handle"></span>
+              </CardBody>
-                </Label>
+            </Card>
-                &nbsp;&nbsp;&nbsp;
+          </Col>
-                <Label className="switch switch-text switch-success-outline-alt">
+          <Col xs="12" md="6">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+            <Card>
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+              <CardHeader>
-                  <span className="switch-handle"></span>
+                Switch with text outline alternative pills
-                </Label>
+              </CardHeader>
-                &nbsp;&nbsp;&nbsp;
+              <CardBody>
-                <Label className="switch switch-text switch-warning-outline-alt">
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
-                  <span className="switch-handle"></span>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
-                </Label>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
-                &nbsp;&nbsp;&nbsp;
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
-                <Label className="switch switch-text switch-info-outline-alt">
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-danger-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
               </CardBody>
             </Card>
           </Col>
@@ -552,44 +413,36 @@ class Switches extends Component {
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
-                Switch with text outline alternative - pills
+                Switch with text outline alternative
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-text switch-pill switch-primary-outline-alt">
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} color={'secondary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+                <AppSwitch className={'mx-1'} color={'success'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                  <span className="switch-handle"></span>
+                <AppSwitch className={'mx-1'} color={'warning'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                </Label>
+                <AppSwitch className={'mx-1'} color={'info'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
-                &nbsp;&nbsp;&nbsp;
+                <AppSwitch className={'mx-1'} color={'danger'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                <Label className="switch switch-text switch-pill switch-secondary-outline-alt">
+                <AppSwitch className={'mx-1'} color={'light'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} color={'dark'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                  <span className="switch-handle"></span>
+              </CardBody>
-                </Label>
+            </Card>
-                &nbsp;&nbsp;&nbsp;
+          </Col>
-                <Label className="switch switch-text switch-pill switch-success-outline-alt">
+          <Col xs="12" md="6">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+            <Card>
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+              <CardHeader>
-                  <span className="switch-handle"></span>
+                Switch with text outline alternative pills
-                </Label>
+              </CardHeader>
-                &nbsp;&nbsp;&nbsp;
+              <CardBody>
-                <Label className="switch switch-text switch-pill switch-warning-outline-alt">
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
-                  <span className="switch-handle"></span>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
-                </Label>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
-                &nbsp;&nbsp;&nbsp;
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
-                <Label className="switch switch-text switch-pill switch-info-outline-alt">
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
-                  <Input type="checkbox" className="switch-input" defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-danger-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
               </CardBody>
             </Card>
           </Col>
@@ -605,7 +458,7 @@ class Switches extends Component {
                   <tr>
                     <th>Size</th>
                     <th>Example</th>
-                    <th>CSS Class</th>
+                    <th>Props</th>
                   </tr>
                   </thead>
                   <tbody>
@@ -614,14 +467,10 @@ class Switches extends Component {
                       Large
                     </td>
                     <td>
-                      <Label className="switch switch-lg switch-3d switch-primary">
+                      <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked size={'lg'} />
-                        <Input type="checkbox" className="switch-input" defaultChecked />
-                        <span className="switch-label"></span>
-                        <span className="switch-handle"></span>
-                      </Label>
                     </td>
                     <td>
-                      Add following class <code>.switch-lg</code>
+                      Add <code>size={'lg'}</code>
                     </td>
                   </tr>
                   <tr>
@@ -629,11 +478,7 @@ class Switches extends Component {
                       Normal
                     </td>
                     <td>
-                      <Label className="switch switch-3d switch-primary">
+                      <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked  />
-                        <Input type="checkbox" className="switch-input" defaultChecked />
-                        <span className="switch-label"></span>
-                        <span className="switch-handle"></span>
-                      </Label>
                     </td>
                     <td>
                       -
@@ -644,14 +489,10 @@ class Switches extends Component {
                       Small
                     </td>
                     <td>
-                      <Label className="switch switch-sm switch-3d switch-primary">
+                      <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked size={'sm'} />
-                        <Input type="checkbox" className="switch-input" defaultChecked />
-                        <span className="switch-label"></span>
-                        <span className="switch-handle"></span>
-                      </Label>
                     </td>
                     <td>
-                      Add following class <code>.switch-sm</code>
+                      Add <code>size={'sm'}</code>
                     </td>
                   </tr>
                   </tbody>