From fbad174a3c7f3f31f914162b67cb31aca417eb04 Mon Sep 17 00:00:00 2001 From: xidedix Date: Thu, 19 Apr 2018 18:40:46 +0200 Subject: [PATCH 1/4] 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 Date: Thu, 19 Apr 2018 18:42:09 +0200 Subject: [PATCH 2/4] 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 {
Option 1 - +
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod @@ -255,11 +252,7 @@ class FullAside extends Component {
Option 2 - +
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod @@ -271,22 +264,17 @@ class FullAside extends Component {
Option 3 - + +
+ Option disabled. +
Option 4 - +
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 with switch - + 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 {
- + 3d Switch - -     - -     - -     - -     - -     - + + + + + + + + + + + + + + + + 3d Switch disabled + + + + + + + + + + + + + + + 3d Switch outline="alt" + + + + + + + + + + + + + + + + + + 3d Switch label + + + + + + + + + + + + + + + + + + 3d Switch outline label + + + + + + + + + + + + + + + + + + 3d Switch outline={'alt'} label + + + + + + + + + + + + + + + + + + 3d Switch outline label + + + + + + + + + + + + + + + + + + 3d Switch outline={'alt'} label + + + + + + + + + + + + + + Switch default - -     - -     - -     - -     - -     - + + + + + + + + + - - Switch default - pills + Switch pills - -     - -     - -     - -     - -     - + + + + + + + + + @@ -148,131 +196,51 @@ class Switches extends Component { Switch outline - -     - -     - -     - -     - -     - + + + + + + + + + - - Switch outline - pills + Switch outline pills - -     - -     - -     - -     - -     - + + + + + + + + + - Switch outline alternative - -     - -     - -     - -     - -     - + + + + + + + + + @@ -283,41 +251,15 @@ class Switches extends Component { Switch outline alternative - pills - -     - -     - -     - -     - -     - + + + + + + + + + @@ -328,178 +270,105 @@ class Switches extends Component { Switch with text - -     - -     - -     - -     - -     - + + + + + + + + + - - Switch with text - pills + Switch with text pills - -     - -     - -     - -     - -     - + + + + + + + + + - Switch with text outline - - -     - -     - -     - -     - -     - + + + + + + + + + - - Switch with text outline - pills + Switch with text outline pills - - -     - -     - -     - -     - -     - + + + + + + + + + + + + + + + + Switch with text outline alternative pills + + + + + + + + + + + + + + + + + + Switch with text outline alternative pills + + + + + + + + + + + @@ -510,41 +379,33 @@ class Switches extends Component { Switch with text outline alternative - -     - -     - -     - -     - -     - + + + + + + + + + + + + + + + + Switch with text outline alternative pills + + + + + + + + + + + @@ -552,44 +413,36 @@ class Switches extends Component { - Switch with text outline alternative - pills + Switch with text outline alternative - -     - -     - -     - -     - -     - + + + + + + + + + + + + + + + + Switch with text outline alternative pills + + + + + + + + + + + @@ -605,7 +458,7 @@ class Switches extends Component { Size Example - CSS Class + Props @@ -614,14 +467,10 @@ class Switches extends Component { Large - + - Add following class .switch-lg + Add size={'lg'} @@ -629,11 +478,7 @@ class Switches extends Component { Normal - + - @@ -644,14 +489,10 @@ class Switches extends Component { Small - + - Add following class .switch-sm + Add size={'sm'} From a7aabf07b91ec223775e93554b885f1f5bb897f4 Mon Sep 17 00:00:00 2001 From: xidedix Date: Thu, 19 Apr 2018 18:48:39 +0200 Subject: [PATCH 3/4] 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 Date: Thu, 19 Apr 2018 18:49:10 +0200 Subject: [PATCH 4/4] 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; }