Skip to content

Commit

Permalink
Paperkit 2 theme for Bootstrap-switch
Browse files Browse the repository at this point in the history 
Bootstrap 4.x compatible theme for Bootstrap switch.
Theme originally by Creative Tim.
Doesn't support size or custom handle width.
  • Loading branch information
@djibe
djibe authored May 12, 2019
1 parent ff80a28 commit e76ed59
Showing 1 changed file with 303 additions and 0 deletions.
303 changes: 303 additions & 0 deletions src/sass/bootstrap4/bootstrap-switch-pktheme.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,303 @@
/**
* bootstrap-switch paperkit theme - Turn checkboxes and radio buttons into toggle switches.
*
* @version v3.4 for Bootstrap 4.x
* @homepage https://bttstrp.github.io/bootstrap-switch
* @author Mattia Larentis <[email protected]> (http://larentis.eu)
* & djibe
* @license Apache-2.0
*/

$bootstrap-switch-border-radius: 30px;
$bootstrap-switch-handle-border-radius: 3px;

@import "../bootstrap-4.3.1/functions";
@import "../updated-paperkit2/variables-paperkit2";

.bootstrap-switch {
display: inline-block;
direction: ltr;
cursor: pointer;
border-radius: $bootstrap-switch-border-radius;
border: 0;
position: relative;
text-align: left;
height: 26px;
outline: none;
overflow: hidden;
line-height: 8px;
width: 61px !important;
z-index: 0;
user-select: none;
vertical-align: middle;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
margin-bottom: 5px;
margin-right: 1px;

.bootstrap-switch-container {
display: inline-flex;
height: 26px;
top: 0;
border-radius: $bootstrap-switch-border-radius;
transform: translate3d(0, 0, 0);
width: 100px !important;
}

.bootstrap-switch-handle-on,
.bootstrap-switch-handle-off,
.bootstrap-switch-label {
box-sizing: border-box;
cursor: pointer;
display: inline-block !important;
height: 100%;
color: #fff;
vertical-align: middle;
padding: 6px 12px;
font-size: 11px;
text-indent: -5px;
line-height: 15px;
transition: 0.25s ease-out;

i {
font-size: 12px;
line-height: 14px;
}
}

.bootstrap-switch-handle-on,
.bootstrap-switch-handle-off {
text-align: center;
z-index: 1;
float: left;
width: 50% !important;
background-color: $secondary;

&.bootstrap-switch-primary {
background: $primary;
color: #fff;
}

&.bootstrap-switch-default {
background: #cfcfca;
color: #fff;
}

&.bootstrap-switch-secondary {
background: $secondary;
color: #fff;
}

&.bootstrap-switch-info {
background: $info;
color: #fff;
}

&.bootstrap-switch-success {
background: $success;
color: #fff;
}

&.bootstrap-switch-warning {
background: $warning;
color: #fff;
}

&.bootstrap-switch-danger {
background: $danger;
color: #fff;
}
}

.bootstrap-switch-label {
border-radius: 12px;
position: relative;
text-align: center;
float: left;
margin: 2px -11px;
z-index: 100;
color: #333;
background: #fff;
width: 22px !important;
height: 22px;
padding: 0;
box-shadow: 0 1px 1px #fff inset, 0 1px 1px rgba(0, 0, 0, .25);
}

span::before {
content: "\200b";
}

.bootstrap-switch-handle-on {
border-bottom-left-radius: $bootstrap-switch-handle-border-radius;
border-top-left-radius: $bootstrap-switch-handle-border-radius;
}

.bootstrap-switch-handle-off {
text-indent: 6px;
}

input[type='radio'],
input[type='checkbox'] {
position: absolute !important;
top: 0;
left: 0;
margin: 0;
z-index: -1;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;

&.form-control {
height: auto;
}
}

&.bootstrap-switch-mini {

.bootstrap-switch-handle-on,
.bootstrap-switch-handle-off,
.bootstrap-switch-label {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
}
}

&.bootstrap-switch-small {

.bootstrap-switch-handle-on,
.bootstrap-switch-handle-off,
.bootstrap-switch-label {

padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}
}

&.bootstrap-switch-large {

.bootstrap-switch-handle-on,
.bootstrap-switch-handle-off,
.bootstrap-switch-label {
padding: 6px 16px;
font-size: 18px;
line-height: 1.33;
}
}

&.bootstrap-switch-disabled,
&.bootstrap-switch-readonly,
&.bootstrap-switch-indeterminate {
cursor: default !important;
}

&.bootstrap-switch-disabled .bootstrap-switch-handle-on,
&.bootstrap-switch-readonly .bootstrap-switch-handle-on,
&.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
&.bootstrap-switch-disabled .bootstrap-switch-handle-off,
&.bootstrap-switch-readonly .bootstrap-switch-handle-off,
&.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
&.bootstrap-switch-disabled .bootstrap-switch-label,
&.bootstrap-switch-readonly .bootstrap-switch-label,
&.bootstrap-switch-indeterminate .bootstrap-switch-label {
opacity: 0.5;
filter: alpha(opacity=50);
cursor: default !important;
}

&.bootstrap-switch-animate .bootstrap-switch-container {
transition: margin-left 0.5s;
}

&.bootstrap-switch-inverse {
.bootstrap-switch-handle-on {
border-radius: 0 $bootstrap-switch-handle-border-radius $bootstrap-switch-handle-border-radius 0;
}

.bootstrap-switch-handle-off {
border-radius: $bootstrap-switch-handle-border-radius 0 0 $bootstrap-switch-handle-border-radius;
}
}

&.bootstrap-switch-focused {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
}

&.bootstrap-switch-on .bootstrap-switch-label,
&.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
border-bottom-right-radius: $bootstrap-switch-handle-border-radius;
border-top-right-radius: $bootstrap-switch-handle-border-radius;
}

&.bootstrap-switch-off .bootstrap-switch-label,
&.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
border-bottom-left-radius: $bootstrap-switch-handle-border-radius;
border-top-left-radius: $bootstrap-switch-handle-border-radius;
}

// additions
&.bootstrap-switch-on {
.bootstrap-switch-container {
margin-left: -2px !important;
}

&:hover .bootstrap-switch-label {
width: 26px !important;
margin: 2px -15px;
}

.bootstrap-switch-handle-off {
background: $secondary;
}

.bootstrap-switch-danger {
background-color: $danger;
}

.bootstrap-switch-warning {
background-color: $warning;
}

.bootstrap-switch-success {
background-color: $success;
}

.bootstrap-switch-primary {
background-color: $primary;
}

.bootstrap-switch-secondary {
background-color: $secondary;
}

.bootstrap-switch-info {
background-color: $info;
}
}

&.bootstrap-switch-off {
.bootstrap-switch-container {
margin-left: -37px !important;
}

&:hover .bootstrap-switch-label {
width: 26px !important;
margin: 2px -15px -13px -11px;
}

.bootstrap-switch-danger,
.bootstrap-switch-primary,
.bootstrap-switch-info,
.bootstrap-switch-warning,
.bootstrap-switch-success {
background-color: #cfcfca;
}

.bootstrap-switch-handle-on {
background-color: #cfcfca;
}
}
}

0 comments on commit e76ed59

Please sign in to comment.