From 3ec289c73d5e2e64a6d8b538ccbba79e14101a44 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Mon, 16 Apr 2018 20:03:09 +0200
Subject: [PATCH 1/6] chore: dependencies

---
 package.json                        |  18 +-
 src/scss/style.css                  | 908 +++++++++++++++-------------
 src/views/Base/Forms/Forms.js       |   3 +-
 src/views/Base/Switches/Switches.js | 285 ---------
 4 files changed, 495 insertions(+), 719 deletions(-)

diff --git a/package.json b/package.json
index 9da37bc..4d880a8 100644
--- a/package.json
+++ b/package.json
@@ -12,27 +12,27 @@
     "url": "git@github.com:mrholek/CoreUI-React.git"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.0.0-beta.6",
+    "@coreui/coreui": "^2.0.0-beta.8",
     "@coreui/react": "^2.0.0-beta",
-    "babel-jest": "^22.4.3",
-    "bootstrap": "4.0.0",
+    "bootstrap": "^4.1.0",
     "chart.js": "^2.7.2",
-    "classnames": "^2.2.3",
+    "classnames": "^2.2.5",
     "flag-icon-css": "^3.0.0",
     "font-awesome": "^4.7.0",
-    "node-sass-chokidar": "^1.2.2",
     "prop-types": "^15.6.1",
-    "react": "^16.3.1",
+    "react": "^16.3.2",
     "react-chartjs-2": "^2.7.0",
-    "react-dom": "^16.3.1",
+    "react-dom": "^16.3.2",
     "react-router-config": "^1.0.0-beta.4",
     "react-router-dom": "^4.2.2",
-    "react-scripts": "^1.1.4",
     "reactstrap": "^5.0.0",
     "simple-line-icons": "^2.4.1"
   },
   "devDependencies": {
-    "npm-run-all": "^4.1.2"
+    "babel-jest": "^22.4.3",
+    "node-sass-chokidar": "^1.2.2",
+    "npm-run-all": "^4.1.2",
+    "react-scripts": "^1.1.4"
   },
   "scripts": {
     "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
diff --git a/src/scss/style.css b/src/scss/style.css
index bbd02fe..627135b 100644
--- a/src/scss/style.css
+++ b/src/scss/style.css
@@ -1,13 +1,13 @@
 @charset "UTF-8";
 /*!
  * CoreUI - Open Source Dashboard UI Kit
- * @version v2.0.0-beta.6
+ * @version v2.0.0-beta.8
  * @link https://coreui.io
  * Copyright (c) 2018 creativeLabs Łukasz Holeczek
  * Licensed under MIT (https://coreui.io/license)
  */
 /*!
- * Bootstrap v4.0.0 (https://getbootstrap.com)
+ * Bootstrap v4.1.0 (https://getbootstrap.com/)
  * Copyright 2011-2018 The Bootstrap Authors
  * Copyright 2011-2018 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
@@ -210,7 +210,7 @@ th {
 
 label {
   display: inline-block;
-  margin-bottom: .5rem; }
+  margin-bottom: 0.5rem; }
 
 button {
   border-radius: 0; }
@@ -1087,6 +1087,12 @@ pre {
   .table-bordered thead td {
     border-bottom-width: 2px; }
 
+.table-borderless th,
+.table-borderless td,
+.table-borderless thead th,
+.table-borderless tbody + tbody {
+  border: 0; }
+
 .table-striped tbody tr:nth-of-type(odd) {
   background-color: rgba(0, 0, 0, 0.05); }
 
@@ -1277,6 +1283,9 @@ pre {
   border: 1px solid #e4e7ea;
   border-radius: 0.25rem;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
+  @media screen and (prefers-reduced-motion: reduce) {
+    .form-control {
+      transition: none; } }
   .form-control::-ms-expand {
     background-color: transparent;
     border: 0; }
@@ -1331,6 +1340,7 @@ select.form-control:focus::-ms-value {
   padding-bottom: 0.375rem;
   margin-bottom: 0;
   line-height: 1.5;
+  color: #23282c;
   background-color: transparent;
   border: solid transparent;
   border-width: 1px 0; }
@@ -1601,7 +1611,8 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
       vertical-align: middle; }
     .form-inline .form-control-plaintext {
       display: inline-block; }
-    .form-inline .input-group {
+    .form-inline .input-group,
+    .form-inline .custom-select {
       width: auto; }
     .form-inline .form-check {
       display: flex;
@@ -1633,6 +1644,9 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
   line-height: 1.5;
   border-radius: 0.25rem;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
+  @media screen and (prefers-reduced-motion: reduce) {
+    .btn {
+      transition: none; } }
   .btn:hover, .btn:focus {
     text-decoration: none; }
   .btn:focus, .btn.focus {
@@ -2031,7 +2045,8 @@ fieldset:disabled a.btn {
     border-color: transparent;
     box-shadow: none; }
   .btn-link:disabled, .btn-link.disabled {
-    color: #73818f; }
+    color: #73818f;
+    pointer-events: none; }
 
 .btn-lg, .btn-group-lg > .btn {
   padding: 0.5rem 1rem;
@@ -2057,30 +2072,29 @@ input[type="button"].btn-block {
   width: 100%; }
 
 .fade {
-  opacity: 0;
   transition: opacity 0.15s linear; }
-  .fade.show {
-    opacity: 1; }
+  @media screen and (prefers-reduced-motion: reduce) {
+    .fade {
+      transition: none; } }
+  .fade:not(.show) {
+    opacity: 0; }
 
-.collapse {
+.collapse:not(.show) {
   display: none; }
-  .collapse.show {
-    display: block; }
-
-tr.collapse.show {
-  display: table-row; }
-
-tbody.collapse.show {
-  display: table-row-group; }
 
 .collapsing {
   position: relative;
   height: 0;
   overflow: hidden;
   transition: height 0.35s ease; }
+  @media screen and (prefers-reduced-motion: reduce) {
+    .collapsing {
+      transition: none; } }
 
 .dropup,
-.dropdown {
+.dropright,
+.dropdown,
+.dropleft {
   position: relative; }
 
 .dropdown-toggle::after {
@@ -2117,7 +2131,13 @@ tbody.collapse.show {
   border: 1px solid #c8ced3;
   border-radius: 0.25rem; }
 
+.dropdown-menu-right {
+  right: 0;
+  left: auto; }
+
 .dropup .dropdown-menu {
+  top: auto;
+  bottom: 100%;
   margin-top: 0;
   margin-bottom: 0.125rem; }
 
@@ -2137,6 +2157,9 @@ tbody.collapse.show {
   margin-left: 0; }
 
 .dropright .dropdown-menu {
+  top: 0;
+  right: auto;
+  left: 100%;
   margin-top: 0;
   margin-left: 0.125rem; }
 
@@ -2148,6 +2171,7 @@ tbody.collapse.show {
   vertical-align: 0.255em;
   content: "";
   border-top: 0.3em solid transparent;
+  border-right: 0;
   border-bottom: 0.3em solid transparent;
   border-left: 0.3em solid; }
 
@@ -2158,6 +2182,9 @@ tbody.collapse.show {
   vertical-align: 0; }
 
 .dropleft .dropdown-menu {
+  top: 0;
+  right: 100%;
+  left: auto;
   margin-top: 0;
   margin-right: 0.125rem; }
 
@@ -2189,6 +2216,10 @@ tbody.collapse.show {
 .dropleft .dropdown-toggle::before {
   vertical-align: 0; }
 
+.dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], .dropdown-menu[x-placement^="bottom"], .dropdown-menu[x-placement^="left"] {
+  right: auto;
+  bottom: auto; }
+
 .dropdown-divider {
   height: 0;
   margin: 0.5rem 0;
@@ -2229,6 +2260,11 @@ tbody.collapse.show {
   color: #73818f;
   white-space: nowrap; }
 
+.dropdown-item-text {
+  display: block;
+  padding: 0.25rem 1.5rem;
+  color: #23282c; }
+
 .btn-group,
 .btn-group-vertical {
   position: relative;
@@ -2279,8 +2315,12 @@ tbody.collapse.show {
 .dropdown-toggle-split {
   padding-right: 0.5625rem;
   padding-left: 0.5625rem; }
-  .dropdown-toggle-split::after {
+  .dropdown-toggle-split::after,
+  .dropup .dropdown-toggle-split::after,
+  .dropright .dropdown-toggle-split::after {
     margin-left: 0; }
+  .dropleft .dropdown-toggle-split::before {
+    margin-right: 0; }
 
 .btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
   padding-right: 0.375rem;
@@ -2362,11 +2402,11 @@ tbody.collapse.show {
     display: flex;
     align-items: center; }
     .input-group > .custom-file:not(:last-child) .custom-file-label,
-    .input-group > .custom-file:not(:last-child) .custom-file-label::before {
+    .input-group > .custom-file:not(:last-child) .custom-file-label::after {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0; }
     .input-group > .custom-file:not(:first-child) .custom-file-label,
-    .input-group > .custom-file:not(:first-child) .custom-file-label::before {
+    .input-group > .custom-file:not(:first-child) .custom-file-label::after {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0; }
 
@@ -2570,10 +2610,10 @@ tbody.collapse.show {
   height: calc(2.0625rem + 2px);
   margin: 0;
   opacity: 0; }
-  .custom-file-input:focus ~ .custom-file-control {
+  .custom-file-input:focus ~ .custom-file-label {
     border-color: #8ad4ee;
     box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.25); }
-    .custom-file-input:focus ~ .custom-file-control::before {
+    .custom-file-input:focus ~ .custom-file-label::after {
       border-color: #8ad4ee; }
   .custom-file-input:lang(en) ~ .custom-file-label::after {
     content: "Browse"; }
@@ -2607,6 +2647,84 @@ tbody.collapse.show {
     border-left: 1px solid #e4e7ea;
     border-radius: 0 0.25rem 0.25rem 0; }
 
+.custom-range {
+  width: 100%;
+  padding-left: 0;
+  background-color: transparent;
+  appearance: none; }
+  .custom-range:focus {
+    outline: none; }
+  .custom-range::-moz-focus-outer {
+    border: 0; }
+  .custom-range::-webkit-slider-thumb {
+    width: 1rem;
+    height: 1rem;
+    margin-top: -0.25rem;
+    background-color: #20a8d8;
+    border: 0;
+    border-radius: 1rem;
+    appearance: none; }
+    .custom-range::-webkit-slider-thumb:focus {
+      outline: none;
+      box-shadow: 0 0 0 1px #e4e5e6, 0 0 0 0.2rem rgba(32, 168, 216, 0.25); }
+    .custom-range::-webkit-slider-thumb:active {
+      background-color: #b6e4f4; }
+  .custom-range::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 0.5rem;
+    color: transparent;
+    cursor: pointer;
+    background-color: #c8ced3;
+    border-color: transparent;
+    border-radius: 1rem; }
+  .custom-range::-moz-range-thumb {
+    width: 1rem;
+    height: 1rem;
+    background-color: #20a8d8;
+    border: 0;
+    border-radius: 1rem;
+    appearance: none; }
+    .custom-range::-moz-range-thumb:focus {
+      outline: none;
+      box-shadow: 0 0 0 1px #e4e5e6, 0 0 0 0.2rem rgba(32, 168, 216, 0.25); }
+    .custom-range::-moz-range-thumb:active {
+      background-color: #b6e4f4; }
+  .custom-range::-moz-range-track {
+    width: 100%;
+    height: 0.5rem;
+    color: transparent;
+    cursor: pointer;
+    background-color: #c8ced3;
+    border-color: transparent;
+    border-radius: 1rem; }
+  .custom-range::-ms-thumb {
+    width: 1rem;
+    height: 1rem;
+    background-color: #20a8d8;
+    border: 0;
+    border-radius: 1rem;
+    appearance: none; }
+    .custom-range::-ms-thumb:focus {
+      outline: none;
+      box-shadow: 0 0 0 1px #e4e5e6, 0 0 0 0.2rem rgba(32, 168, 216, 0.25); }
+    .custom-range::-ms-thumb:active {
+      background-color: #b6e4f4; }
+  .custom-range::-ms-track {
+    width: 100%;
+    height: 0.5rem;
+    color: transparent;
+    cursor: pointer;
+    background-color: transparent;
+    border-color: transparent;
+    border-width: 0.5rem; }
+  .custom-range::-ms-fill-lower {
+    background-color: #c8ced3;
+    border-radius: 1rem; }
+  .custom-range::-ms-fill-upper {
+    margin-right: 15px;
+    background-color: #c8ced3;
+    border-radius: 1rem; }
+
 .nav {
   display: flex;
   flex-wrap: wrap;
@@ -2752,9 +2870,6 @@ tbody.collapse.show {
       flex-direction: row; }
       .navbar-expand-sm .navbar-nav .dropdown-menu {
         position: absolute; }
-      .navbar-expand-sm .navbar-nav .dropdown-menu-right {
-        right: 0;
-        left: auto; }
       .navbar-expand-sm .navbar-nav .nav-link {
         padding-right: 0.5rem;
         padding-left: 0.5rem; }
@@ -2765,10 +2880,7 @@ tbody.collapse.show {
       display: flex !important;
       flex-basis: auto; }
     .navbar-expand-sm .navbar-toggler {
-      display: none; }
-    .navbar-expand-sm .dropup .dropdown-menu {
-      top: auto;
-      bottom: 100%; } }
+      display: none; } }
 
 @media (max-width: 767.98px) {
   .navbar-expand-md > .container,
@@ -2784,9 +2896,6 @@ tbody.collapse.show {
       flex-direction: row; }
       .navbar-expand-md .navbar-nav .dropdown-menu {
         position: absolute; }
-      .navbar-expand-md .navbar-nav .dropdown-menu-right {
-        right: 0;
-        left: auto; }
       .navbar-expand-md .navbar-nav .nav-link {
         padding-right: 0.5rem;
         padding-left: 0.5rem; }
@@ -2797,10 +2906,7 @@ tbody.collapse.show {
       display: flex !important;
       flex-basis: auto; }
     .navbar-expand-md .navbar-toggler {
-      display: none; }
-    .navbar-expand-md .dropup .dropdown-menu {
-      top: auto;
-      bottom: 100%; } }
+      display: none; } }
 
 @media (max-width: 991.98px) {
   .navbar-expand-lg > .container,
@@ -2816,9 +2922,6 @@ tbody.collapse.show {
       flex-direction: row; }
       .navbar-expand-lg .navbar-nav .dropdown-menu {
         position: absolute; }
-      .navbar-expand-lg .navbar-nav .dropdown-menu-right {
-        right: 0;
-        left: auto; }
       .navbar-expand-lg .navbar-nav .nav-link {
         padding-right: 0.5rem;
         padding-left: 0.5rem; }
@@ -2829,10 +2932,7 @@ tbody.collapse.show {
       display: flex !important;
       flex-basis: auto; }
     .navbar-expand-lg .navbar-toggler {
-      display: none; }
-    .navbar-expand-lg .dropup .dropdown-menu {
-      top: auto;
-      bottom: 100%; } }
+      display: none; } }
 
 @media (max-width: 1199.98px) {
   .navbar-expand-xl > .container,
@@ -2848,9 +2948,6 @@ tbody.collapse.show {
       flex-direction: row; }
       .navbar-expand-xl .navbar-nav .dropdown-menu {
         position: absolute; }
-      .navbar-expand-xl .navbar-nav .dropdown-menu-right {
-        right: 0;
-        left: auto; }
       .navbar-expand-xl .navbar-nav .nav-link {
         padding-right: 0.5rem;
         padding-left: 0.5rem; }
@@ -2861,10 +2958,7 @@ tbody.collapse.show {
       display: flex !important;
       flex-basis: auto; }
     .navbar-expand-xl .navbar-toggler {
-      display: none; }
-    .navbar-expand-xl .dropup .dropdown-menu {
-      top: auto;
-      bottom: 100%; } }
+      display: none; } }
 
 .navbar-expand {
   flex-flow: row nowrap;
@@ -2877,9 +2971,6 @@ tbody.collapse.show {
     flex-direction: row; }
     .navbar-expand .navbar-nav .dropdown-menu {
       position: absolute; }
-    .navbar-expand .navbar-nav .dropdown-menu-right {
-      right: 0;
-      left: auto; }
     .navbar-expand .navbar-nav .nav-link {
       padding-right: 0.5rem;
       padding-left: 0.5rem; }
@@ -2891,9 +2982,6 @@ tbody.collapse.show {
     flex-basis: auto; }
   .navbar-expand .navbar-toggler {
     display: none; }
-  .navbar-expand .dropup .dropdown-menu {
-    top: auto;
-    bottom: 100%; }
 
 .navbar-light .navbar-brand {
   color: rgba(0, 0, 0, 0.9); }
@@ -3122,11 +3210,29 @@ tbody.collapse.show {
 @media (min-width: 576px) {
   .card-columns {
     column-count: 3;
-    column-gap: 1.25rem; }
+    column-gap: 1.25rem;
+    orphans: 1;
+    widows: 1; }
     .card-columns .card {
       display: inline-block;
       width: 100%; } }
 
+.accordion .card:not(:first-of-type):not(:last-of-type) {
+  border-bottom: 0;
+  border-radius: 0; }
+
+.accordion .card:not(:first-of-type) .card-header:first-child {
+  border-radius: 0; }
+
+.accordion .card:first-of-type {
+  border-bottom: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0; }
+
+.accordion .card:last-of-type {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0; }
+
 .breadcrumb {
   display: flex;
   flex-wrap: wrap;
@@ -3134,14 +3240,15 @@ tbody.collapse.show {
   margin-bottom: 1.5rem;
   list-style: none;
   background-color: #fff;
-  border-radius: 0.25rem; }
+  border-radius: 0; }
 
-.breadcrumb-item + .breadcrumb-item::before {
-  display: inline-block;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-  color: #73818f;
-  content: "/"; }
+.breadcrumb-item + .breadcrumb-item {
+  padding-left: 0.5rem; }
+  .breadcrumb-item + .breadcrumb-item::before {
+    display: inline-block;
+    padding-right: 0.5rem;
+    color: #73818f;
+    content: "/"; }
 
 .breadcrumb-item + .breadcrumb-item:hover::before {
   text-decoration: underline; }
@@ -3168,6 +3275,7 @@ tbody.collapse.show {
   background-color: #fff;
   border: 1px solid #c8ced3; }
   .page-link:hover {
+    z-index: 2;
     color: #167495;
     text-decoration: none;
     background-color: #e4e7ea;
@@ -3441,8 +3549,12 @@ tbody.collapse.show {
   justify-content: center;
   color: #fff;
   text-align: center;
+  white-space: nowrap;
   background-color: #20a8d8;
   transition: width 0.6s ease; }
+  @media screen and (prefers-reduced-motion: reduce) {
+    .progress-bar {
+      transition: none; } }
 
 .progress-bar-striped {
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@@ -3647,6 +3759,9 @@ button.close {
   .modal.fade .modal-dialog {
     transition: transform 0.3s ease-out;
     transform: translate(0, -25%); }
+    @media screen and (prefers-reduced-motion: reduce) {
+      .modal.fade .modal-dialog {
+        transition: none; } }
   .modal.show .modal-dialog {
     transform: translate(0, 0); }
 
@@ -3970,6 +4085,9 @@ button.close {
   transition: transform 0.6s ease;
   backface-visibility: hidden;
   perspective: 1000px; }
+  @media screen and (prefers-reduced-motion: reduce) {
+    .carousel-item {
+      transition: none; } }
 
 .carousel-item.active,
 .carousel-item-next,
@@ -4005,6 +4123,34 @@ button.close {
     .active.carousel-item-left {
       transform: translate3d(-100%, 0, 0); } }
 
+.carousel-fade .carousel-item {
+  opacity: 0;
+  transition-duration: .6s;
+  transition-property: opacity; }
+
+.carousel-fade .carousel-item.active,
+.carousel-fade .carousel-item-next.carousel-item-left,
+.carousel-fade .carousel-item-prev.carousel-item-right {
+  opacity: 1; }
+
+.carousel-fade .active.carousel-item-left,
+.carousel-fade .active.carousel-item-right {
+  opacity: 0; }
+
+.carousel-fade .carousel-item-next,
+.carousel-fade .carousel-item-prev,
+.carousel-fade .carousel-item.active,
+.carousel-fade .active.carousel-item-left,
+.carousel-fade .active.carousel-item-prev {
+  transform: translateX(0); }
+  @supports (transform-style: preserve-3d) {
+    .carousel-fade .carousel-item-next,
+    .carousel-fade .carousel-item-prev,
+    .carousel-fade .carousel-item.active,
+    .carousel-fade .active.carousel-item-left,
+    .carousel-fade .active.carousel-item-prev {
+      transform: translate3d(0, 0, 0); } }
+
 .carousel-control-prev,
 .carousel-control-next {
   position: absolute;
@@ -4453,6 +4599,21 @@ button.bg-dark:focus {
 .flex-wrap-reverse {
   flex-wrap: wrap-reverse !important; }
 
+.flex-fill {
+  flex: 1 1 auto !important; }
+
+.flex-grow-0 {
+  flex-grow: 0 !important; }
+
+.flex-grow-1 {
+  flex-grow: 1 !important; }
+
+.flex-shrink-0 {
+  flex-shrink: 0 !important; }
+
+.flex-shrink-1 {
+  flex-shrink: 1 !important; }
+
 .justify-content-start {
   justify-content: flex-start !important; }
 
@@ -4534,6 +4695,16 @@ button.bg-dark:focus {
     flex-wrap: nowrap !important; }
   .flex-sm-wrap-reverse {
     flex-wrap: wrap-reverse !important; }
+  .flex-sm-fill {
+    flex: 1 1 auto !important; }
+  .flex-sm-grow-0 {
+    flex-grow: 0 !important; }
+  .flex-sm-grow-1 {
+    flex-grow: 1 !important; }
+  .flex-sm-shrink-0 {
+    flex-shrink: 0 !important; }
+  .flex-sm-shrink-1 {
+    flex-shrink: 1 !important; }
   .justify-content-sm-start {
     justify-content: flex-start !important; }
   .justify-content-sm-end {
@@ -4594,6 +4765,16 @@ button.bg-dark:focus {
     flex-wrap: nowrap !important; }
   .flex-md-wrap-reverse {
     flex-wrap: wrap-reverse !important; }
+  .flex-md-fill {
+    flex: 1 1 auto !important; }
+  .flex-md-grow-0 {
+    flex-grow: 0 !important; }
+  .flex-md-grow-1 {
+    flex-grow: 1 !important; }
+  .flex-md-shrink-0 {
+    flex-shrink: 0 !important; }
+  .flex-md-shrink-1 {
+    flex-shrink: 1 !important; }
   .justify-content-md-start {
     justify-content: flex-start !important; }
   .justify-content-md-end {
@@ -4654,6 +4835,16 @@ button.bg-dark:focus {
     flex-wrap: nowrap !important; }
   .flex-lg-wrap-reverse {
     flex-wrap: wrap-reverse !important; }
+  .flex-lg-fill {
+    flex: 1 1 auto !important; }
+  .flex-lg-grow-0 {
+    flex-grow: 0 !important; }
+  .flex-lg-grow-1 {
+    flex-grow: 1 !important; }
+  .flex-lg-shrink-0 {
+    flex-shrink: 0 !important; }
+  .flex-lg-shrink-1 {
+    flex-shrink: 1 !important; }
   .justify-content-lg-start {
     justify-content: flex-start !important; }
   .justify-content-lg-end {
@@ -4714,6 +4905,16 @@ button.bg-dark:focus {
     flex-wrap: nowrap !important; }
   .flex-xl-wrap-reverse {
     flex-wrap: wrap-reverse !important; }
+  .flex-xl-fill {
+    flex: 1 1 auto !important; }
+  .flex-xl-grow-0 {
+    flex-grow: 0 !important; }
+  .flex-xl-grow-1 {
+    flex-grow: 1 !important; }
+  .flex-xl-shrink-0 {
+    flex-shrink: 0 !important; }
+  .flex-xl-shrink-1 {
+    flex-shrink: 1 !important; }
   .justify-content-xl-start {
     justify-content: flex-start !important; }
   .justify-content-xl-end {
@@ -4843,7 +5044,6 @@ button.bg-dark:focus {
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
-  clip-path: inset(50%);
   border: 0; }
 
 .sr-only-focusable:active, .sr-only-focusable:focus {
@@ -4852,8 +5052,19 @@ button.bg-dark:focus {
   height: auto;
   overflow: visible;
   clip: auto;
-  white-space: normal;
-  clip-path: none; }
+  white-space: normal; }
+
+.shadow-sm {
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }
+
+.shadow {
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
+
+.shadow-lg {
+  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }
+
+.shadow-none {
+  box-shadow: none !important; }
 
 .w-25 {
   width: 25% !important; }
@@ -4867,6 +5078,9 @@ button.bg-dark:focus {
 .w-100 {
   width: 100% !important; }
 
+.w-auto {
+  width: auto !important; }
+
 .h-25 {
   height: 25% !important; }
 
@@ -4879,6 +5093,9 @@ button.bg-dark:focus {
 .h-100 {
   height: 100% !important; }
 
+.h-auto {
+  height: auto !important; }
+
 .mw-100 {
   max-width: 100% !important; }
 
@@ -5868,6 +6085,9 @@ button.bg-dark:focus {
   .mx-xl-auto {
     margin-left: auto !important; } }
 
+.text-monospace {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
+
 .text-justify {
   text-align: justify !important; }
 
@@ -5992,9 +6212,18 @@ a.text-light:hover, a.text-light:focus {
 a.text-dark:hover, a.text-dark:focus {
   color: #181b1e !important; }
 
+.text-body {
+  color: #23282c !important; }
+
 .text-muted {
   color: #73818f !important; }
 
+.text-black-50 {
+  color: rgba(0, 0, 0, 0.5) !important; }
+
+.text-white-50 {
+  color: rgba(255, 255, 255, 0.5) !important; }
+
 .text-hide {
   font: 0/0 a;
   color: transparent;
@@ -6022,7 +6251,7 @@ a.text-dark:hover, a.text-dark:focus {
     white-space: pre-wrap !important; }
   pre,
   blockquote {
-    border: 1px solid #999;
+    border: 1px solid #8f9ba6;
     page-break-inside: avoid; }
   thead {
     display: table-header-group; }
@@ -6054,7 +6283,7 @@ a.text-dark:hover, a.text-dark:focus {
       background-color: #fff !important; }
   .table-bordered th,
   .table-bordered td {
-    border: 1px solid #ddd !important; } }
+    border: 1px solid #c8ced3 !important; } }
 
 .animated {
   animation-duration: 1s; }
@@ -6198,16 +6427,11 @@ a.text-dark:hover, a.text-dark:focus {
     .aside-menu .tab-content .tab-pane {
       padding: 0; }
 
-.img-avatar {
-  border-radius: 50em; }
-
 .avatar {
   position: relative;
   display: inline-block;
-  width: 36px; }
-  .avatar .img-avatar {
-    width: 36px;
-    height: 36px; }
+  width: 36px;
+  height: 36px; }
   .avatar .avatar-status {
     position: absolute;
     right: 0;
@@ -6217,49 +6441,15 @@ a.text-dark:hover, a.text-dark:focus {
     height: 10px;
     border: 1px solid #fff;
     border-radius: 50em; }
+  .avatar > img {
+    vertical-align: initial; }
 
-.avatar.avatar-xs {
+.avatar-lg {
   position: relative;
   display: inline-block;
-  width: 20px; }
-  .avatar.avatar-xs .img-avatar {
-    width: 20px;
-    height: 20px; }
-  .avatar.avatar-xs .avatar-status {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    display: block;
-    width: 8px;
-    height: 8px;
-    border: 1px solid #fff;
-    border-radius: 50em; }
-
-.avatar.avatar-sm {
-  position: relative;
-  display: inline-block;
-  width: 24px; }
-  .avatar.avatar-sm .img-avatar {
-    width: 24px;
-    height: 24px; }
-  .avatar.avatar-sm .avatar-status {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    display: block;
-    width: 8px;
-    height: 8px;
-    border: 1px solid #fff;
-    border-radius: 50em; }
-
-.avatar.avatar-lg {
-  position: relative;
-  display: inline-block;
-  width: 72px; }
-  .avatar.avatar-lg .img-avatar {
-    width: 72px;
-    height: 72px; }
-  .avatar.avatar-lg .avatar-status {
+  width: 72px;
+  height: 72px; }
+  .avatar-lg .avatar-status {
     position: absolute;
     right: 0;
     bottom: 0;
@@ -6269,15 +6459,51 @@ a.text-dark:hover, a.text-dark:focus {
     border: 1px solid #fff;
     border-radius: 50em; }
 
-.avatars-stack .avatar.avatar-xs {
-  margin-right: -10px; }
+.avatar-sm {
+  position: relative;
+  display: inline-block;
+  width: 24px;
+  height: 24px; }
+  .avatar-sm .avatar-status {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: block;
+    width: 8px;
+    height: 8px;
+    border: 1px solid #fff;
+    border-radius: 50em; }
+
+.avatar-xs {
+  position: relative;
+  display: inline-block;
+  width: 20px;
+  height: 20px; }
+  .avatar-xs .avatar-status {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: block;
+    width: 8px;
+    height: 8px;
+    border: 1px solid #fff;
+    border-radius: 50em; }
 
 .avatars-stack .avatar {
-  margin-right: -15px;
-  transition: margin-left 0.25s, margin-right 0.25s; }
+  margin-right: -18px;
+  transition: margin-right 0.25s; }
   .avatars-stack .avatar:hover {
     margin-right: 0; }
 
+.avatars-stack .avatar-lg {
+  margin-right: -36px; }
+
+.avatars-stack .avatar-sm {
+  margin-right: -12px; }
+
+.avatars-stack .avatar-xs {
+  margin-right: -10px; }
+
 .badge-pill {
   border-radius: 10rem; }
 
@@ -7503,6 +7729,12 @@ canvas {
   white-space: nowrap;
   vertical-align: middle; }
 
+.img-avatar, .avatar > img,
+.img-circle {
+  max-width: 100%;
+  height: auto;
+  border-radius: 50em; }
+
 #loading-bar,
 #loading-bar-spinner {
   -webkit-pointer-events: none;
@@ -7817,7 +8049,7 @@ canvas {
         left: 50%;
         margin-top: -16px;
         margin-left: 0; }
-      .app-header .nav-item .nav-link > .img-avatar {
+      .app-header .nav-item .nav-link > .img-avatar, .app-header .nav-item .avatar.nav-link > img {
         height: 35px;
         margin: 0 10px; }
   .app-header .dropdown-menu {
@@ -8240,7 +8472,7 @@ canvas {
   right: 50px;
   left: 0; }
 
-.switch-default {
+.switch {
   position: relative;
   display: inline-block;
   width: 40px;
@@ -8248,95 +8480,25 @@ canvas {
   vertical-align: top;
   cursor: pointer;
   background-color: transparent; }
-  .switch-default .switch-input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0; }
-  .switch-default .switch-label {
-    position: relative;
-    display: block;
-    height: inherit;
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    background-color: #fff;
-    border: 1px solid #c8ced3;
-    border-radius: 2px;
-    transition: opacity background .15s ease-out; }
-  .switch-default .switch-input:checked ~ .switch-label::before {
-    opacity: 0; }
-  .switch-default .switch-input:checked ~ .switch-label::after {
-    opacity: 1; }
-  .switch-default .switch-handle {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 20px;
-    height: 20px;
-    background: #fff;
-    border: 1px solid #c8ced3;
-    border-radius: 1px;
-    transition: left .15s ease-out; }
-  .switch-default .switch-input:checked ~ .switch-handle {
-    left: 18px; }
-  .switch-default.switch-lg {
-    width: 48px;
-    height: 28px; }
-    .switch-default.switch-lg .switch-label {
-      font-size: 12px; }
-    .switch-default.switch-lg .switch-handle {
-      width: 24px;
-      height: 24px; }
-    .switch-default.switch-lg .switch-input:checked ~ .switch-handle {
-      left: 22px; }
-  .switch-default.switch-sm {
-    width: 32px;
-    height: 20px; }
-    .switch-default.switch-sm .switch-label {
-      font-size: 8px; }
-    .switch-default.switch-sm .switch-handle {
-      width: 16px;
-      height: 16px; }
-    .switch-default.switch-sm .switch-input:checked ~ .switch-handle {
-      left: 14px; }
-  .switch-default.switch-xs {
-    width: 24px;
-    height: 16px; }
-    .switch-default.switch-xs .switch-label {
-      font-size: 7px; }
-    .switch-default.switch-xs .switch-handle {
-      width: 12px;
-      height: 12px; }
-    .switch-default.switch-xs .switch-input:checked ~ .switch-handle {
-      left: 10px; }
 
-.switch-text {
+.switch-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0; }
+
+.switch-label {
   position: relative;
-  display: inline-block;
-  width: 48px;
-  height: 24px;
-  vertical-align: top;
-  cursor: pointer;
-  background-color: transparent; }
-  .switch-text .switch-input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0; }
-  .switch-text .switch-label {
-    position: relative;
-    display: block;
-    height: inherit;
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    background-color: #fff;
-    border: 1px solid #c8ced3;
-    border-radius: 2px;
-    transition: opacity background .15s ease-out; }
-  .switch-text .switch-label::before,
-  .switch-text .switch-label::after {
+  display: block;
+  height: inherit;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  background-color: #fff;
+  border: 1px solid #c8ced3;
+  border-radius: 2px;
+  transition: opacity background .15s ease-out; }
+  .switch-label::before, .switch-label::after {
     position: absolute;
     top: 50%;
     width: 50%;
@@ -8344,224 +8506,35 @@ canvas {
     line-height: 1;
     text-align: center;
     transition: inherit; }
-  .switch-text .switch-label::before {
+  .switch-label::before {
     right: 1px;
     color: #e4e7ea;
     content: attr(data-off); }
-  .switch-text .switch-label::after {
+  .switch-label::after {
     left: 1px;
     color: #fff;
     content: attr(data-on);
     opacity: 0; }
-  .switch-text .switch-input:checked ~ .switch-label::before {
-    opacity: 0; }
-  .switch-text .switch-input:checked ~ .switch-label::after {
-    opacity: 1; }
-  .switch-text .switch-handle {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 20px;
-    height: 20px;
-    background: #fff;
-    border: 1px solid #c8ced3;
-    border-radius: 1px;
-    transition: left .15s ease-out; }
-  .switch-text .switch-input:checked ~ .switch-handle {
-    left: 26px; }
-  .switch-text.switch-lg {
-    width: 56px;
-    height: 28px; }
-    .switch-text.switch-lg .switch-label {
-      font-size: 12px; }
-    .switch-text.switch-lg .switch-handle {
-      width: 24px;
-      height: 24px; }
-    .switch-text.switch-lg .switch-input:checked ~ .switch-handle {
-      left: 30px; }
-  .switch-text.switch-sm {
-    width: 40px;
-    height: 20px; }
-    .switch-text.switch-sm .switch-label {
-      font-size: 8px; }
-    .switch-text.switch-sm .switch-handle {
-      width: 16px;
-      height: 16px; }
-    .switch-text.switch-sm .switch-input:checked ~ .switch-handle {
-      left: 22px; }
-  .switch-text.switch-xs {
-    width: 32px;
-    height: 16px; }
-    .switch-text.switch-xs .switch-label {
-      font-size: 7px; }
-    .switch-text.switch-xs .switch-handle {
-      width: 12px;
-      height: 12px; }
-    .switch-text.switch-xs .switch-input:checked ~ .switch-handle {
-      left: 18px; }
 
-.switch-icon {
-  position: relative;
-  display: inline-block;
-  width: 48px;
-  height: 24px;
-  vertical-align: top;
-  cursor: pointer;
-  background-color: transparent; }
-  .switch-icon .switch-input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0; }
-  .switch-icon .switch-label {
-    position: relative;
-    display: block;
-    height: inherit;
-    font-family: FontAwesome;
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    background-color: #fff;
-    border: 1px solid #c8ced3;
-    border-radius: 2px;
-    transition: opacity background .15s ease-out; }
-  .switch-icon .switch-label::before,
-  .switch-icon .switch-label::after {
-    position: absolute;
-    top: 50%;
-    width: 50%;
-    margin-top: -.5em;
-    line-height: 1;
-    text-align: center;
-    transition: inherit; }
-  .switch-icon .switch-label::before {
-    right: 1px;
-    color: #e4e7ea;
-    content: attr(data-off); }
-  .switch-icon .switch-label::after {
-    left: 1px;
-    color: #fff;
-    content: attr(data-on);
-    opacity: 0; }
-  .switch-icon .switch-input:checked ~ .switch-label::before {
-    opacity: 0; }
-  .switch-icon .switch-input:checked ~ .switch-label::after {
-    opacity: 1; }
-  .switch-icon .switch-handle {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 20px;
-    height: 20px;
-    background: #fff;
-    border: 1px solid #c8ced3;
-    border-radius: 1px;
-    transition: left .15s ease-out; }
-  .switch-icon .switch-input:checked ~ .switch-handle {
-    left: 26px; }
-  .switch-icon.switch-lg {
-    width: 56px;
-    height: 28px; }
-    .switch-icon.switch-lg .switch-label {
-      font-size: 12px; }
-    .switch-icon.switch-lg .switch-handle {
-      width: 24px;
-      height: 24px; }
-    .switch-icon.switch-lg .switch-input:checked ~ .switch-handle {
-      left: 30px; }
-  .switch-icon.switch-sm {
-    width: 40px;
-    height: 20px; }
-    .switch-icon.switch-sm .switch-label {
-      font-size: 8px; }
-    .switch-icon.switch-sm .switch-handle {
-      width: 16px;
-      height: 16px; }
-    .switch-icon.switch-sm .switch-input:checked ~ .switch-handle {
-      left: 22px; }
-  .switch-icon.switch-xs {
-    width: 32px;
-    height: 16px; }
-    .switch-icon.switch-xs .switch-label {
-      font-size: 7px; }
-    .switch-icon.switch-xs .switch-handle {
-      width: 12px;
-      height: 12px; }
-    .switch-icon.switch-xs .switch-input:checked ~ .switch-handle {
-      left: 18px; }
+.switch-handle {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: #fff;
+  border: 1px solid #c8ced3;
+  border-radius: 1px;
+  transition: left .15s ease-out; }
 
-.switch-3d {
-  position: relative;
-  display: inline-block;
-  width: 40px;
-  height: 24px;
-  vertical-align: top;
-  cursor: pointer;
-  background-color: transparent; }
-  .switch-3d .switch-input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0; }
-  .switch-3d .switch-label {
-    position: relative;
-    display: block;
-    height: inherit;
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    background-color: #f0f3f5;
-    border: 1px solid #c8ced3;
-    border-radius: 2px;
-    transition: opacity background .15s ease-out; }
-  .switch-3d .switch-input:checked ~ .switch-label::before {
-    opacity: 0; }
-  .switch-3d .switch-input:checked ~ .switch-label::after {
-    opacity: 1; }
-  .switch-3d .switch-handle {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 24px;
-    height: 24px;
-    background: #fff;
-    border: 1px solid #c8ced3;
-    border-radius: 1px;
-    transition: left .15s ease-out;
-    border: 0;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); }
-  .switch-3d .switch-input:checked ~ .switch-handle {
-    left: 16px; }
-  .switch-3d.switch-lg {
-    width: 48px;
-    height: 28px; }
-    .switch-3d.switch-lg .switch-label {
-      font-size: 12px; }
-    .switch-3d.switch-lg .switch-handle {
-      width: 28px;
-      height: 28px; }
-    .switch-3d.switch-lg .switch-input:checked ~ .switch-handle {
-      left: 20px; }
-  .switch-3d.switch-sm {
-    width: 32px;
-    height: 20px; }
-    .switch-3d.switch-sm .switch-label {
-      font-size: 8px; }
-    .switch-3d.switch-sm .switch-handle {
-      width: 20px;
-      height: 20px; }
-    .switch-3d.switch-sm .switch-input:checked ~ .switch-handle {
-      left: 12px; }
-  .switch-3d.switch-xs {
-    width: 24px;
-    height: 16px; }
-    .switch-3d.switch-xs .switch-label {
-      font-size: 7px; }
-    .switch-3d.switch-xs .switch-handle {
-      width: 16px;
-      height: 16px; }
-    .switch-3d.switch-xs .switch-input:checked ~ .switch-handle {
-      left: 8px; }
+.switch-input:checked ~ .switch-label::before {
+  opacity: 0; }
+
+.switch-input:checked ~ .switch-label::after {
+  opacity: 1; }
+
+.switch-input:checked ~ .switch-handle {
+  left: 18px; }
 
 .switch-primary > .switch-input:checked ~ .switch-label {
   background: #20a8d8;
@@ -8771,15 +8744,102 @@ canvas {
   background: #2f353a;
   border-color: #2f353a; }
 
-.switch-pill .switch-label, .switch-3d .switch-label,
-.switch-pill .switch-handle,
-.switch-3d .switch-handle {
+.switch-lg {
+  width: 48px;
+  height: 28px; }
+  .switch-lg .switch-label {
+    font-size: 12px; }
+  .switch-lg .switch-handle {
+    width: 24px;
+    height: 24px; }
+  .switch-lg .switch-input:checked ~ .switch-handle {
+    left: 22px; }
+
+.switch-sm {
+  width: 32px;
+  height: 20px; }
+  .switch-sm .switch-label {
+    font-size: 8px; }
+  .switch-sm .switch-handle {
+    width: 16px;
+    height: 16px; }
+  .switch-sm .switch-input:checked ~ .switch-handle {
+    left: 14px; }
+
+.switch-text {
+  width: 48px;
+  height: 24px; }
+  .switch-text .switch-label {
+    font-size: 10px; }
+  .switch-text .switch-handle {
+    width: 20px;
+    height: 20px; }
+  .switch-text .switch-input:checked ~ .switch-handle {
+    left: 26px; }
+  .switch-text.switch-lg {
+    width: 56px;
+    height: 28px; }
+    .switch-text.switch-lg .switch-label {
+      font-size: 12px; }
+    .switch-text.switch-lg .switch-handle {
+      width: 24px;
+      height: 24px; }
+    .switch-text.switch-lg .switch-input:checked ~ .switch-handle {
+      left: 30px; }
+  .switch-text.switch-sm {
+    width: 40px;
+    height: 20px; }
+    .switch-text.switch-sm .switch-label {
+      font-size: 8px; }
+    .switch-text.switch-sm .switch-handle {
+      width: 16px;
+      height: 16px; }
+    .switch-text.switch-sm .switch-input:checked ~ .switch-handle {
+      left: 22px; }
+
+.switch-3d .switch-label {
+  background-color: #f0f3f5;
   border-radius: 50em; }
 
-.switch-pill .switch-label::before, .switch-3d .switch-label::before {
+.switch-3d .switch-handle {
+  top: 0;
+  left: 0;
+  width: 24px;
+  height: 24px;
+  border: 0;
+  border-radius: 50em;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); }
+
+.switch-3d.switch-lg {
+  width: 56px;
+  height: 28px; }
+  .switch-3d.switch-lg .switch-label {
+    font-size: 12px; }
+  .switch-3d.switch-lg .switch-handle {
+    width: 28px;
+    height: 28px; }
+  .switch-3d.switch-lg .switch-input:checked ~ .switch-handle {
+    left: 28px; }
+
+.switch-3d.switch-sm {
+  width: 40px;
+  height: 20px; }
+  .switch-3d.switch-sm .switch-label {
+    font-size: 8px; }
+  .switch-3d.switch-sm .switch-handle {
+    width: 20px;
+    height: 20px; }
+  .switch-3d.switch-sm .switch-input:checked ~ .switch-handle {
+    left: 20px; }
+
+.switch-pill .switch-label,
+.switch-pill .switch-handle {
+  border-radius: 50em; }
+
+.switch-pill .switch-label::before {
   right: 2px; }
 
-.switch-pill .switch-label::after, .switch-3d .switch-label::after {
+.switch-pill .switch-label::after {
   left: 2px; }
 
 .table-outline {
diff --git a/src/views/Base/Forms/Forms.js b/src/views/Base/Forms/Forms.js
index 50cdc1b..16e0a88 100644
--- a/src/views/Base/Forms/Forms.js
+++ b/src/views/Base/Forms/Forms.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import {
+  Badge,
   Button,
   ButtonDropdown,
   Card,
@@ -195,7 +196,7 @@ class Forms extends Component {
                   </FormGroup>
                   <FormGroup row>
                     <Col md="3">
-                      <Label htmlFor="date-input">Date Input</Label>
+                      <Label htmlFor="date-input">Date Input <Badge>NEW</Badge></Label>
                     </Col>
                     <Col xs="12" md="9">
                       <Input type="date" id="date-input" name="date-input" placeholder="date" />
diff --git a/src/views/Base/Switches/Switches.js b/src/views/Base/Switches/Switches.js
index 7c60e8c..4e3dc73 100644
--- a/src/views/Base/Switches/Switches.js
+++ b/src/views/Base/Switches/Switches.js
@@ -594,276 +594,6 @@ class Switches extends Component {
             </Card>
           </Col>
 
-          <Col xs="12" md="6">
-            <Card>
-              <CardHeader>
-                Switch with icon
-              </CardHeader>
-              <CardBody>
-                <Label className="switch switch-icon switch-primary">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf164'} data-off={'\uf165'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-secondary">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf087'} data-off={'\uf088'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-success">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf028'} data-off={'\uf026'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-warning">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-info">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-danger">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-              </CardBody>
-            </Card>
-          </Col>
-
-          <Col xs="12" md="6">
-            <Card>
-              <CardHeader>
-                Switch with icon - pills
-              </CardHeader>
-              <CardBody>
-                <Label className="switch switch-icon switch-pill switch-primary">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-secondary">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-success">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-warning">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-info">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-danger">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-              </CardBody>
-            </Card>
-          </Col>
-
-          <Col xs="12" md="6">
-            <Card>
-              <CardHeader>
-                Switch with icon outline
-              </CardHeader>
-              <CardBody>
-                <Label className="switch switch-icon switch-primary-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-secondary-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-success-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-warning-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-info-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-danger-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-              </CardBody>
-            </Card>
-          </Col>
-
-          <Col xs="12" md="6">
-            <Card>
-              <CardHeader>
-                Switch with icon outline - pills
-              </CardHeader>
-              <CardBody>
-                <Label className="switch switch-icon switch-pill switch-primary-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-secondary-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-success-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-warning-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-info-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-danger-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-              </CardBody>
-            </Card>
-          </Col>
-
-          <Col xs="12" md="6">
-            <Card>
-              <CardHeader>
-                Switch with icon outline alternative
-              </CardHeader>
-              <CardBody>
-                <Label className="switch switch-icon switch-primary-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-secondary-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-success-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-warning-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-info-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-danger-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-              </CardBody>
-            </Card>
-          </Col>
-
-          <Col xs="12" md="6">
-            <Card>
-              <CardHeader>
-                Switch with icon outline alternative - pills
-              </CardHeader>
-              <CardBody>
-                <Label className="switch switch-icon switch-pill switch-primary-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-secondary-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-success-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-warning-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-info-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-danger-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-              </CardBody>
-            </Card>
-          </Col>
-
           <Col xs="12">
             <Card>
               <CardHeader>
@@ -924,21 +654,6 @@ class Switches extends Component {
                       Add following class <code>.switch-sm</code>
                     </td>
                   </tr>
-                  <tr>
-                    <td>
-                      Extra small
-                    </td>
-                    <td>
-                      <Label className="switch switch-xs switch-3d switch-primary">
-                        <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-xs</code>
-                    </td>
-                  </tr>
                   </tbody>
                 </Table>
               </CardBody>

From 5a636291616fe32793a42bc89f3d937cd5a46b89 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Tue, 17 Apr 2018 14:39:44 +0200
Subject: [PATCH 2/6] chore: cleanup

---
 src/views/Base/Collapses/Collapses.js   |   8 +-
 src/views/Base/ListGroups/ListGroups.js |   3 +
 src/views/Dashboard/Dashboard.js        | 129 ------------------------
 3 files changed, 10 insertions(+), 130 deletions(-)

diff --git a/src/views/Base/Collapses/Collapses.js b/src/views/Base/Collapses/Collapses.js
index 5917489..0fd28c2 100644
--- a/src/views/Base/Collapses/Collapses.js
+++ b/src/views/Base/Collapses/Collapses.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Button, Card, CardBody, CardFooter, CardHeader, Col, Collapse, Fade, Row } from 'reactstrap';
+import { Badge, Button, Card, CardBody, CardFooter, CardHeader, Col, Collapse, Fade, Row } from 'reactstrap';
 
 class Collapses extends Component {
 
@@ -130,6 +130,9 @@ class Collapses extends Component {
             <Card>
               <CardHeader>
                 <i className="fa fa-align-justify"></i> Collapse <small>accordion</small>
+                <div className="card-header-actions">
+                  <Badge>NEW</Badge>
+                </div>
               </CardHeader>
               <CardBody>
                 <div id="accordion">
@@ -187,6 +190,9 @@ class Collapses extends Component {
             <Card>
               <CardHeader>
                 <i className="fa fa-align-justify"></i> Collapse <small>custom accordion</small>
+                <div className="card-header-actions">
+                  <Badge>NEW</Badge>
+                </div>
               </CardHeader>
               <CardBody>
                 <div id="exampleAccordion" data-children=".item">
diff --git a/src/views/Base/ListGroups/ListGroups.js b/src/views/Base/ListGroups/ListGroups.js
index 4a29a51..e42f784 100644
--- a/src/views/Base/ListGroups/ListGroups.js
+++ b/src/views/Base/ListGroups/ListGroups.js
@@ -172,6 +172,9 @@ class ListGroups extends Component {
             <Card>
               <CardHeader>
                 <i className="fa fa-align-justify"></i><strong>List Group</strong> <small>with TabPanes</small>
+                <div className="card-header-actions">
+                  <Badge>NEW</Badge>
+                </div>
               </CardHeader>
               <CardBody>
                 <Row>
diff --git a/src/views/Dashboard/Dashboard.js b/src/views/Dashboard/Dashboard.js
index f86d22f..00385c3 100644
--- a/src/views/Dashboard/Dashboard.js
+++ b/src/views/Dashboard/Dashboard.js
@@ -890,135 +890,6 @@ class Dashboard extends Component {
                       </div>
                     </ul>
                   </Col>
-                  {/*<Col xs="12" xl="4">*/}
-                    {/*<Row>*/}
-                      {/*<Col sm="6">*/}
-                        {/*<div className="callout">*/}
-                          {/*<small className="text-muted">CTR</small>*/}
-                          {/*<br />*/}
-                          {/*<strong className="h4">23%</strong>*/}
-                          {/*<div className="chart-wrapper">*/}
-                            {/*<Line data={makeSparkLineData(4)} options={sparklineChartOpts} width={100} height={30} />*/}
-                          {/*</div>*/}
-                        {/*</div>*/}
-                      {/*</Col>*/}
-                      {/*<Col sm="6">*/}
-                        {/*<div className="callout callout-primary">*/}
-                          {/*<small className="text-muted">Bounce Rate</small>*/}
-                          {/*<br />*/}
-                          {/*<strong className="h4">5%</strong>*/}
-                          {/*<div className="chart-wrapper">*/}
-                            {/*<Line data={makeSparkLineData(5, brandPrimary)} options={sparklineChartOpts} width={100} height={30} />*/}
-                          {/*</div>*/}
-                        {/*</div>*/}
-                      {/*</Col>*/}
-                    {/*</Row>*/}
-                    {/*<hr className="mt-0" />*/}
-                    {/*<ul className="icons-list">*/}
-                      {/*<li>*/}
-                        {/*<i className="icon-screen-desktop bg-primary"></i>*/}
-                        {/*<div className="desc">*/}
-                          {/*<div className="title">iMac 4k</div>*/}
-                          {/*<small>Lorem ipsum dolor sit amet</small>*/}
-                        {/*</div>*/}
-                        {/*<div className="value">*/}
-                          {/*<div className="small text-muted">Sold this week</div>*/}
-                          {/*<strong>1.924</strong>*/}
-                        {/*</div>*/}
-                        {/*<div className="actions">*/}
-                          {/*<Button color="link" className="text-muted"><i className="icon-settings"></i></Button>*/}
-                        {/*</div>*/}
-                      {/*</li>*/}
-                      {/*<li>*/}
-                        {/*<i className="icon-screen-smartphone bg-info"></i>*/}
-                        {/*<div className="desc">*/}
-                          {/*<div className="title">Samsung Galaxy Edge</div>*/}
-                          {/*<small>Lorem ipsum dolor sit amet</small>*/}
-                        {/*</div>*/}
-                        {/*<div className="value">*/}
-                          {/*<div className="small text-muted">Sold this week</div>*/}
-                          {/*<strong>1.224</strong>*/}
-                        {/*</div>*/}
-                        {/*<div className="actions">*/}
-                          {/*<Button color="link" className="text-muted"><i className="icon-settings"></i></Button>*/}
-                        {/*</div>*/}
-                      {/*</li>*/}
-                      {/*<li>*/}
-                        {/*<i className="icon-screen-smartphone bg-warning"></i>*/}
-                        {/*<div className="desc">*/}
-                          {/*<div className="title">iPhone 6S</div>*/}
-                          {/*<small>Lorem ipsum dolor sit amet</small>*/}
-                        {/*</div>*/}
-                        {/*<div className="value">*/}
-                          {/*<div className="small text-muted">Sold this week</div>*/}
-                          {/*<strong>1.163</strong>*/}
-                        {/*</div>*/}
-                        {/*<div className="actions">*/}
-                          {/*<Button color="link" className="text-muted"><i className="icon-settings"></i></Button>*/}
-                        {/*</div>*/}
-                      {/*</li>*/}
-                      {/*<li>*/}
-                        {/*<i className="icon-user bg-danger"></i>*/}
-                        {/*<div className="desc">*/}
-                          {/*<div className="title">Premium accounts</div>*/}
-                          {/*<small>Lorem ipsum dolor sit amet</small>*/}
-                        {/*</div>*/}
-                        {/*<div className="value">*/}
-                          {/*<div className="small text-muted">Sold this week</div>*/}
-                          {/*<strong>928</strong>*/}
-                        {/*</div>*/}
-                        {/*<div className="actions">*/}
-                          {/*<Button color="link" className="text-muted"><i className="icon-settings"></i></Button>*/}
-                        {/*</div>*/}
-                      {/*</li>*/}
-                      {/*<li>*/}
-                        {/*<i className="icon-social-spotify bg-success"></i>*/}
-                        {/*<div className="desc">*/}
-                          {/*<div className="title">Spotify Subscriptions</div>*/}
-                          {/*<small>Lorem ipsum dolor sit amet</small>*/}
-                        {/*</div>*/}
-                        {/*<div className="value">*/}
-                          {/*<div className="small text-muted">Sold this week</div>*/}
-                          {/*<strong>893</strong>*/}
-                        {/*</div>*/}
-                        {/*<div className="actions">*/}
-                          {/*<Button color="link" className="text-muted"><i className="icon-settings"></i></Button>*/}
-                        {/*</div>*/}
-                      {/*</li>*/}
-                      {/*<li>*/}
-                        {/*<i className="icon-cloud-download bg-danger"></i>*/}
-                        {/*<div className="desc">*/}
-                          {/*<div className="title">Ebook</div>*/}
-                          {/*<small>Lorem ipsum dolor sit amet</small>*/}
-                        {/*</div>*/}
-                        {/*<div className="value">*/}
-                          {/*<div className="small text-muted">Downloads</div>*/}
-                          {/*<strong>121.924</strong>*/}
-                        {/*</div>*/}
-                        {/*<div className="actions">*/}
-                          {/*<Button color="link" className="text-muted"><i className="icon-settings"></i></Button>*/}
-                        {/*</div>*/}
-                      {/*</li>*/}
-                      {/*<li>*/}
-                        {/*<i className="icon-camera bg-warning"></i>*/}
-                        {/*<div className="desc">*/}
-                          {/*<div className="title">Photos</div>*/}
-                          {/*<small>Lorem ipsum dolor sit amet</small>*/}
-                        {/*</div>*/}
-                        {/*<div className="value">*/}
-                          {/*<div className="small text-muted">Uploaded</div>*/}
-                          {/*<strong>12.125</strong>*/}
-                        {/*</div>*/}
-                        {/*<div className="actions">*/}
-                          {/*<Button color="link" className="text-muted"><i className="icon-settings"></i></Button>*/}
-                        {/*</div>*/}
-                      {/*</li>*/}
-                      {/*<li className="divider text-center">*/}
-                        {/*<Button color="link" size="sm" className="text-muted" data-toggle="tooltip" data-placement="top" title="show more"><i*/}
-                          {/*className="icon-options"></i></Button>*/}
-                      {/*</li>*/}
-                    {/*</ul>*/}
-                  {/*</Col>*/}
                 </Row>
                 <br />
                 <Table hover responsive className="table-outline mb-0 d-none d-sm-table">

From fbad174a3c7f3f31f914162b67cb31aca417eb04 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Thu, 19 Apr 2018 18:40:46 +0200
Subject: [PATCH 3/6] refactor: fixed typo

---
 src/routes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes.js b/src/routes.js
index 328c713..967bac3 100644
--- a/src/routes.js
+++ b/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 },

From c1bd2169aab82b8e6833651af9e0699a8703b3e6 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Thu, 19 Apr 2018 18:42:09 +0200
Subject: [PATCH 4/6] refactor(Switches): move to AppSwitch component

---
 src/containers/Full/FullAside.js    |  28 +-
 src/views/Base/Cards/Cards.js       |   7 +-
 src/views/Base/Switches/Switches.js | 815 +++++++++++-----------------
 3 files changed, 338 insertions(+), 512 deletions(-)

diff --git a/src/containers/Full/FullAside.js b/src/containers/Full/FullAside.js
index e701fdd..77de818 100644
--- a/src/containers/Full/FullAside.js
+++ b/src/containers/Full/FullAside.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Input, Label, 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">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'}/>
               </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">
-                  <Input type="checkbox" className="switch-input" />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} size={'sm'}/>
               </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">
-                  <Input type="checkbox" className="switch-input" />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'} disabled/>
+                <div>
+                  <small className="text-muted">Option disabled.</small>
+                </div>
               </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">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'} />
               </div>
             </div>
 
diff --git a/src/views/Base/Cards/Cards.js b/src/views/Base/Cards/Cards.js
index 25d0310..4a894b6 100644
--- a/src/views/Base/Cards/Cards.js
+++ b/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 { 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">
-                  <Input type="checkbox" className="switch-input" />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'float-right mb-0'} label color={'info'} defaultChecked size={'sm'}/>
               </CardHeader>
               <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
diff --git a/src/views/Base/Switches/Switches.js b/src/views/Base/Switches/Switches.js
index 4e3dc73..6de680a 100644
--- a/src/views/Base/Switches/Switches.js
+++ b/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 { 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">
-                  <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-3d switch-secondary">
-                  <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-3d 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-3d 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-3d 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-3d switch-danger">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'}  />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                3d Switch <small><code>disabled</code></small>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'success'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'info'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'light'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} disabled />
               </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">
-                  <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-secondary">
-                  <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-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>
+                <AppSwitch className={'mx-1'} color={'primary'} checked />
+                <AppSwitch className={'mx-1'} color={'secondary'} checked />
+                <AppSwitch className={'mx-1'} color={'success'} checked />
+                <AppSwitch className={'mx-1'} color={'warning'} checked />
+                <AppSwitch className={'mx-1'} color={'info'} checked />
+                <AppSwitch className={'mx-1'} color={'danger'} checked />
+                <AppSwitch className={'mx-1'} color={'light'} checked />
+                <AppSwitch className={'mx-1'} color={'dark'} checked />
+                <AppSwitch className={'mx-1'} color={'primary'} disabled />
               </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">
-                  <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-secondary">
-                  <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-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>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} disabled />
               </CardBody>
             </Card>
           </Col>
@@ -148,131 +196,51 @@ class Switches extends Component {
                 Switch outline
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-default switch-primary-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-secondary-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-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>
+                <AppSwitch className={'mx-1'} color={'primary'} outline checked />
+                <AppSwitch className={'mx-1'} color={'secondary'} outline checked />
+                <AppSwitch className={'mx-1'} color={'success'} outline checked />
+                <AppSwitch className={'mx-1'} color={'warning'} outline checked />
+                <AppSwitch className={'mx-1'} color={'info'} outline checked />
+                <AppSwitch className={'mx-1'} color={'danger'} outline checked />
+                <AppSwitch className={'mx-1'} color={'light'} outline checked />
+                <AppSwitch className={'mx-1'} color={'dark'} outline checked />
+                <AppSwitch className={'mx-1'} color={'primary'} outline disabled />
               </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">
-                  <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-secondary-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-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>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline disabled />
               </CardBody>
             </Card>
           </Col>
-
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
                 Switch outline alternative
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-default switch-primary-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-secondary-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-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>
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'secondary'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'success'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'warning'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'info'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'danger'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'light'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'dark'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} disabled />
               </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">
-                  <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-secondary-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-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>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} disabled />
               </CardBody>
             </Card>
           </Col>
@@ -328,178 +270,105 @@ class Switches extends Component {
                 Switch with text
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-text switch-primary">
-                  <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-secondary">
-                  <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-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>
+                <AppSwitch className={'mx-1'} color={'primary'} label checked />
+                <AppSwitch className={'mx-1'} color={'secondary'} label checked />
+                <AppSwitch className={'mx-1'} color={'success'} label checked />
+                <AppSwitch className={'mx-1'} color={'warning'} label checked />
+                <AppSwitch className={'mx-1'} color={'info'} label checked />
+                <AppSwitch className={'mx-1'} color={'danger'} label checked />
+                <AppSwitch className={'mx-1'} color={'light'} label checked />
+                <AppSwitch className={'mx-1'} color={'dark'} label checked />
+                <AppSwitch className={'mx-1'} color={'primary'} label disabled />
               </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">
-                  <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-secondary">
-                  <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-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>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} label disabled />
               </CardBody>
             </Card>
           </Col>
-
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
                 Switch with text outline
               </CardHeader>
               <CardBody>
-
-                <Label className="switch switch-text switch-primary-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-secondary-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-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>
+                <AppSwitch className={'mx-1'} color={'primary'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'secondary'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'success'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'warning'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'info'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'danger'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'light'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'dark'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'primary'} outline label disabled />
               </CardBody>
             </Card>
           </Col>
-
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
-                Switch with text outline - pills
+                Switch with text outline pills
               </CardHeader>
               <CardBody>
-
-                <Label className="switch switch-text switch-pill switch-primary-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-pill switch-secondary-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-pill 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-pill 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-pill 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-pill 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>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline label disabled />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch with text outline alternative pills
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'secondary'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'success'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'warning'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'info'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'danger'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'light'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'dark'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} label disabled />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch with text outline alternative pills
+              </CardHeader>
+              <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">
-                  <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-secondary-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>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-success-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>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-warning-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>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-info-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>
-                &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>
+                <AppSwitch className={'mx-1'} color={'primary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'secondary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'success'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'warning'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'info'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} color={'danger'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'light'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'dark'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'primary'} outline disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch with text outline alternative pills
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
               </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">
-                  <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-secondary-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>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-success-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>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-warning-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>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-info-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>
-                &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>
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'secondary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'success'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'warning'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'info'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} color={'danger'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'light'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'dark'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch with text outline alternative pills
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
               </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">
-                        <Input type="checkbox" className="switch-input" defaultChecked />
-                        <span className="switch-label"></span>
-                        <span className="switch-handle"></span>
-                      </Label>
+                      <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked size={'lg'} />
                     </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">
-                        <Input type="checkbox" className="switch-input" defaultChecked />
-                        <span className="switch-label"></span>
-                        <span className="switch-handle"></span>
-                      </Label>
+                      <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked  />
                     </td>
                     <td>
                       -
@@ -644,14 +489,10 @@ class Switches extends Component {
                       Small
                     </td>
                     <td>
-                      <Label className="switch switch-sm switch-3d switch-primary">
-                        <Input type="checkbox" className="switch-input" defaultChecked />
-                        <span className="switch-label"></span>
-                        <span className="switch-handle"></span>
-                      </Label>
+                      <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked size={'sm'} />
                     </td>
                     <td>
-                      Add following class <code>.switch-sm</code>
+                      Add <code>size={'sm'}</code>
                     </td>
                   </tr>
                   </tbody>

From a7aabf07b91ec223775e93554b885f1f5bb897f4 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Thu, 19 Apr 2018 18:48:39 +0200
Subject: [PATCH 5/6] refactor(Switches): cleanup imports Input, Label

---
 src/containers/Full/FullAside.js    | 2 +-
 src/views/Base/Cards/Cards.js       | 2 +-
 src/views/Base/Switches/Switches.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/containers/Full/FullAside.js b/src/containers/Full/FullAside.js
index 77de818..f87ec6a 100644
--- a/src/containers/Full/FullAside.js
+++ b/src/containers/Full/FullAside.js
@@ -1,5 +1,5 @@
 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'
diff --git a/src/views/Base/Cards/Cards.js b/src/views/Base/Cards/Cards.js
index 4a894b6..b2908bd 100644
--- a/src/views/Base/Cards/Cards.js
+++ b/src/views/Base/Cards/Cards.js
@@ -1,5 +1,5 @@
 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 {
diff --git a/src/views/Base/Switches/Switches.js b/src/views/Base/Switches/Switches.js
index 6de680a..026a367 100644
--- a/src/views/Base/Switches/Switches.js
+++ b/src/views/Base/Switches/Switches.js
@@ -1,5 +1,5 @@
 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 {

From 7faaa9fb93e8456f91925a63469eed9bdf6e7f14 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Thu, 19 Apr 2018 18:49:10 +0200
Subject: [PATCH 6/6] chore: ship v2.0.0-beta.1

---
 package.json       |   6 +-
 src/scss/style.css | 767 ++++++++++++++++++---------------------------
 2 files changed, 303 insertions(+), 470 deletions(-)

diff --git a/package.json b/package.json
index 0b592ec..ca7f5c9 100644
--- a/package.json
+++ b/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/react": "^2.0.0-beta",
+    "@coreui/coreui": "^2.0.0-beta.10",
+    "@coreui/react": "^2.0.0-beta.1",
     "bootstrap": "^4.1.0",
     "chart.js": "^2.7.2",
     "classnames": "^2.2.5",
diff --git a/src/scss/style.css b/src/scss/style.css
index 627135b..49a472d 100644
--- a/src/scss/style.css
+++ b/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;
-  vertical-align: top;
-  cursor: pointer;
-  background-color: transparent; }
+  height: 26px; }
 
 .switch-input {
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0; }
+  display: none; }
 
-.switch-label {
+.switch-slider {
   position: relative;
   display: block;
   height: inherit;
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
+  cursor: pointer;
   background-color: #fff;
   border: 1px solid #c8ced3;
-  border-radius: 2px;
-  transition: opacity background .15s ease-out; }
-  .switch-label::before, .switch-label::after {
+  transition: .15s ease-out;
+  border-radius: 0.25rem; }
+  .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; }
+    top: 2px;
+    left: 2px;
+    box-sizing: border-box;
+    width: 20px;
+    height: 20px;
+    content: "";
+    background-color: #fff;
+    border: 1px solid #c8ced3;
+    transition: .15s ease-out;
+    border-radius: 0.125rem; }
 
-.switch-handle {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 20px;
-  height: 20px;
-  background: #fff;
-  border: 1px solid #c8ced3;
-  border-radius: 1px;
-  transition: left .15s ease-out; }
+.switch-input:checked ~ .switch-slider::before {
+  transform: translateX(14px); }
 
-.switch-input:checked ~ .switch-label::before {
-  opacity: 0; }
-
-.switch-input:checked ~ .switch-label::after {
-  opacity: 1; }
-
-.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-input:disabled ~ .switch-slider {
+  cursor: not-allowed;
+  opacity: .5; }
 
 .switch-lg {
   width: 48px;
-  height: 28px; }
-  .switch-lg .switch-label {
+  height: 30px; }
+  .switch-lg .switch-slider {
     font-size: 12px; }
-  .switch-lg .switch-handle {
-    width: 24px;
-    height: 24px; }
-  .switch-lg .switch-input:checked ~ .switch-handle {
-    left: 22px; }
+    .switch-lg .switch-slider::before {
+      width: 24px;
+      height: 24px; }
+    .switch-lg .switch-slider::after {
+      font-size: 12px; }
+  .switch-lg .switch-input:checked ~ .switch-slider::before {
+    transform: translateX(18px); }
 
 .switch-sm {
   width: 32px;
-  height: 20px; }
-  .switch-sm .switch-label {
+  height: 22px; }
+  .switch-sm .switch-slider {
     font-size: 8px; }
-  .switch-sm .switch-handle {
-    width: 16px;
-    height: 16px; }
-  .switch-sm .switch-input:checked ~ .switch-handle {
-    left: 14px; }
-
-.switch-text {
-  width: 48px;
-  height: 24px; }
-  .switch-text .switch-label {
-    font-size: 10px; }
-  .switch-text .switch-handle {
-    width: 20px;
-    height: 20px; }
-  .switch-text .switch-input:checked ~ .switch-handle {
-    left: 26px; }
-  .switch-text.switch-lg {
-    width: 56px;
-    height: 28px; }
-    .switch-text.switch-lg .switch-label {
-      font-size: 12px; }
-    .switch-text.switch-lg .switch-handle {
-      width: 24px;
-      height: 24px; }
-    .switch-text.switch-lg .switch-input:checked ~ .switch-handle {
-      left: 30px; }
-  .switch-text.switch-sm {
-    width: 40px;
-    height: 20px; }
-    .switch-text.switch-sm .switch-label {
-      font-size: 8px; }
-    .switch-text.switch-sm .switch-handle {
+    .switch-sm .switch-slider::before {
       width: 16px;
       height: 16px; }
-    .switch-text.switch-sm .switch-input:checked ~ .switch-handle {
-      left: 22px; }
+    .switch-sm .switch-slider::after {
+      font-size: 8px; }
+  .switch-sm .switch-input:checked ~ .switch-slider::before {
+    transform: translateX(10px); }
 
-.switch-3d .switch-label {
+.switch-label {
+  width: 48px; }
+  .switch-label .switch-slider::before {
+    z-index: 2; }
+  .switch-label .switch-slider::after {
+    position: absolute;
+    top: 50%;
+    right: 1px;
+    z-index: 1;
+    width: 50%;
+    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: 30px; }
+    .switch-label.switch-lg .switch-slider {
+      font-size: 12px; }
+      .switch-label.switch-lg .switch-slider::before {
+        width: 24px;
+        height: 24px; }
+      .switch-label.switch-lg .switch-slider::after {
+        font-size: 12px; }
+    .switch-label.switch-lg .switch-input:checked ~ .switch-slider::before {
+      transform: translateX(26px); }
+  .switch-label.switch-sm {
+    width: 40px;
+    height: 22px; }
+    .switch-label.switch-sm .switch-slider {
+      font-size: 8px; }
+      .switch-label.switch-sm .switch-slider::before {
+        width: 16px;
+        height: 16px; }
+      .switch-label.switch-sm .switch-slider::after {
+        font-size: 8px; }
+    .switch-label.switch-sm .switch-input:checked ~ .switch-slider::before {
+      transform: translateX(18px); }
+
+.switch-3d .switch-slider {
   background-color: #f0f3f5;
   border-radius: 50em; }
-
-.switch-3d .switch-handle {
-  top: 0;
-  left: 0;
-  width: 24px;
-  height: 24px;
-  border: 0;
-  border-radius: 50em;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); }
+  .switch-3d .switch-slider::before {
+    top: -1px;
+    left: -1px;
+    width: 26px;
+    height: 26px;
+    border: 0;
+    border-radius: 50em;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); }
 
 .switch-3d.switch-lg {
-  width: 56px;
-  height: 28px; }
-  .switch-3d.switch-lg .switch-label {
-    font-size: 12px; }
-  .switch-3d.switch-lg .switch-handle {
-    width: 28px;
-    height: 28px; }
-  .switch-3d.switch-lg .switch-input:checked ~ .switch-handle {
-    left: 28px; }
+  width: 48px;
+  height: 30px; }
+  .switch-3d.switch-lg .switch-slider::before {
+    width: 30px;
+    height: 30px; }
+  .switch-3d.switch-lg .switch-input:checked ~ .switch-slider::before {
+    transform: translateX(18px); }
 
 .switch-3d.switch-sm {
-  width: 40px;
-  height: 20px; }
-  .switch-3d.switch-sm .switch-label {
-    font-size: 8px; }
-  .switch-3d.switch-sm .switch-handle {
-    width: 20px;
-    height: 20px; }
-  .switch-3d.switch-sm .switch-input:checked ~ .switch-handle {
-    left: 20px; }
+  width: 32px;
+  height: 22px; }
+  .switch-3d.switch-sm .switch-slider::before {
+    width: 22px;
+    height: 22px; }
+  .switch-3d.switch-sm .switch-input:checked ~ .switch-slider::before {
+    transform: translateX(10px); }
 
-.switch-pill .switch-label,
-.switch-pill .switch-handle {
+.switch-primary .switch-input:checked + .switch-slider {
+  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-label::before {
-  right: 2px; }
-
-.switch-pill .switch-label::after {
-  left: 2px; }
+  .switch-pill .switch-slider::before {
+    border-radius: 50em; }
 
 .table-outline {
   border: 1px solid #c8ced3; }