Skip to content

Commit 19275e7

Browse files
author
Emanuele
authored
v3.4 (#699)
* v3.4 for Bootstrap 4 support * v3.4 for Bootstrap 4 support * v3.4 for Bootstrap 4 support * v3.4 for Bootstrap 4 support * v3.4 for Bootstrap 4 support * Update package.json * 3.4 * Update README.md * Upgrade * Fix semver
1 parent b93af46 commit 19275e7

File tree

8 files changed

+2308
-975
lines changed

8 files changed

+2308
-975
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changelog
22

3+
## 3.4
4+
5+
- Full Bootstrap 4 integration of CSS + sources SASS/SCSS
6+
37
## 3.3.4
48

59
- Fix Object.assign not working for IE <= 11 [#616](https://github.com/Bttstrp/bootstrap-switch/issues/616)

‎README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
[![NPM Version](http://img.shields.io/npm/v/bootstrap-switch.svg?style=flat)](https://www.npmjs.org/)
55

66
Turn checkboxes and radio buttons into toggle switches. Created by [Mattia Larentis](http://github.com/nostalgiaz), maintained by [Emanuele Marchi](http://github.com/lostcrew) and [Peter Stein](http://www.bdmdesign.org) with the help of the community.
7+
Compatible with Bootstrap 4, Bootstrap 3 and Bootstrap 2.
8+
9+
Play with [demo on my fiddle](https://jsfiddle.net/djibe89/vL87w0j8/).
710

811
## Quick start
912

@@ -49,6 +52,10 @@ IE9+ and all the other modern browsers.
4952
- For Bootstrap 2 (no longer officially supported), import `src/less/bootstrap2/bootstrap-switch.less`
5053
- For Bootstrap 3, import `src/less/bootstrap3/bootstrap-switch.less`
5154

55+
## SASS/SCSS
56+
57+
- For Bootstrap 4, import `src/sass/bootstrap4/bootstrap-switch.scss`
58+
5259
## Bugs and feature requests
5360

5461
Have a bug or a feature request? Please first search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/Bttstrp/bootstrap-switch/issues/new).

‎dist/css/bootstrap4/bootstrap-switch.css

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
/**
2+
* bootstrap-switch - Turn checkboxes and radio buttons into toggle switches.
3+
*
4+
* @version v3.4 for Bootstrap 4.x
5+
* @homepage https://bttstrp.github.io/bootstrap-switch
6+
* @author Mattia Larentis <mattia@larentis.eu> (http://larentis.eu)
7+
* & djibe
8+
* @license Apache-2.0
9+
*/
10+
.bootstrap-switch {
11+
display: inline-block;
12+
direction: ltr;
13+
cursor: pointer;
14+
border-radius: 4px;
15+
border: 1px solid #ccc;
16+
position: relative;
17+
text-align: left;
18+
overflow: hidden;
19+
line-height: 8px;
20+
z-index: 0;
21+
-webkit-user-select: none;
22+
-moz-user-select: none;
23+
-ms-user-select: none;
24+
user-select: none;
25+
vertical-align: middle;
26+
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
27+
transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
28+
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
29+
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
30+
}
31+
.bootstrap-switch .bootstrap-switch-container {
32+
display: inline-block;
33+
top: 0;
34+
border-radius: 4px;
35+
-webkit-transform: translate3d(0, 0, 0);
36+
transform: translate3d(0, 0, 0);
37+
}
38+
.bootstrap-switch .bootstrap-switch-handle-on,
39+
.bootstrap-switch .bootstrap-switch-handle-off,
40+
.bootstrap-switch .bootstrap-switch-label {
41+
-webkit-box-sizing: border-box;
42+
box-sizing: border-box;
43+
cursor: pointer;
44+
display: table-cell;
45+
vertical-align: middle;
46+
padding: 6px 12px;
47+
font-size: 14px;
48+
line-height: 20px;
49+
font-weight: 500;
50+
}
51+
.bootstrap-switch .bootstrap-switch-handle-on,
52+
.bootstrap-switch .bootstrap-switch-handle-off {
53+
text-align: center;
54+
z-index: 1;
55+
}
56+
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
57+
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
58+
background: #007bff;
59+
color: #fff;
60+
}
61+
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
62+
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
63+
background: #eee;
64+
color: rgba(0, 0, 0, 0.87);
65+
}
66+
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary,
67+
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary {
68+
background: #6c757d;
69+
color: #fff;
70+
}
71+
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,
72+
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info {
73+
background: #17a2b8;
74+
color: #fff;
75+
}
76+
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
77+
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
78+
background: #28a745;
79+
color: #fff;
80+
}
81+
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning,
82+
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning {
83+
background: #ffc107;
84+
color: #fff;
85+
}
86+
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger,
87+
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger {
88+
background: #dc3545;
89+
color: #fff;
90+
}
91+
.bootstrap-switch .bootstrap-switch-label {
92+
text-align: center;
93+
margin-top: -1px;
94+
margin-bottom: -1px;
95+
z-index: 100;
96+
color: #333;
97+
background: #fff;
98+
padding: 8px 12px;
99+
}
100+
.bootstrap-switch span::before {
101+
content: "\200b";
102+
}
103+
.bootstrap-switch .bootstrap-switch-handle-on {
104+
border-bottom-left-radius: 3px;
105+
border-top-left-radius: 3px;
106+
}
107+
.bootstrap-switch .bootstrap-switch-handle-off {
108+
border-bottom-right-radius: 3px;
109+
border-top-right-radius: 3px;
110+
}
111+
.bootstrap-switch input[type='radio'],
112+
.bootstrap-switch input[type='checkbox'] {
113+
position: absolute !important;
114+
top: 0;
115+
left: 0;
116+
margin: 0;
117+
z-index: -1;
118+
opacity: 0;
119+
filter: alpha(opacity=0);
120+
visibility: hidden;
121+
}
122+
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
123+
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
124+
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
125+
padding: 1px 5px;
126+
font-size: 12px;
127+
line-height: 1.5;
128+
}
129+
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
130+
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
131+
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
132+
padding: 5px 10px;
133+
font-size: 12px;
134+
line-height: 1.5;
135+
}
136+
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
137+
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
138+
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
139+
padding: 6px 16px;
140+
font-size: 18px;
141+
line-height: 1.3333333;
142+
}
143+
.bootstrap-switch.bootstrap-switch-disabled, .bootstrap-switch.bootstrap-switch-readonly, .bootstrap-switch.bootstrap-switch-indeterminate {
144+
cursor: default !important;
145+
}
146+
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
147+
opacity: 0.5;
148+
filter: alpha(opacity=50);
149+
cursor: default !important;
150+
}
151+
.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
152+
-webkit-transition: margin-left 0.5s;
153+
transition: margin-left 0.5s;
154+
}
155+
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
156+
border-radius: 0 3px 3px 0;
157+
}
158+
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
159+
border-radius: 3px 0 0 3px;
160+
}
161+
.bootstrap-switch.bootstrap-switch-focused {
162+
border-color: #66afe9;
163+
outline: 0;
164+
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
165+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
166+
}
167+
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
168+
border-bottom-right-radius: 3px;
169+
border-top-right-radius: 3px;
170+
}
171+
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
172+
border-bottom-left-radius: 3px;
173+
border-top-left-radius: 3px;
174+
}

‎dist/css/bootstrap4/bootstrap-switch.min.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/css/main.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "bootstrap-switch",
33
"description": "Turn checkboxes and radio buttons into toggle switches.",
4-
"version": "3.3.5",
4+
"version": "3.4.0",
55
"keywords": [
66
"bootstrap",
77
"switch",
@@ -16,7 +16,7 @@
1616
],
1717
"main": "dist/js/bootstrap-switch.js",
1818
"peerDependencies": {
19-
"bootstrap": "^3.3.7",
19+
"bootstrap": "^4.3.1",
2020
"jquery": ">=1.12.4"
2121
},
2222
"repository": {
@@ -39,7 +39,7 @@
3939
"eslint": "^3.19.0",
4040
"eslint-config-airbnb-base": "^11.2.0",
4141
"eslint-plugin-import": "^2.2.0",
42-
"harp": "^0.23.0",
42+
"harp": "^0.30.0",
4343
"headr": "0.0.4",
4444
"jasmine": "^2.5.3",
4545
"jasmine-core": "^2.5.2",
@@ -53,7 +53,7 @@
5353
"karma-phantomjs-launcher": "^1.0.2",
5454
"less": "^2.7.2",
5555
"less-plugin-clean-css": "^1.5.0",
56-
"npm-run-all": "^4.0.1",
56+
"npm-run-all": "^4.1.5",
5757
"regenerator-runtime": "^0.11.1",
5858
"wintersmith": "^2.3.6"
5959
},
@@ -94,6 +94,7 @@
9494
],
9595
"dependencies": {},
9696
"jest": {
97+
"testURL": "http://localhost/",
9798
"setupFiles": [
9899
"./src/setup-test.js"
99100
]

0 commit comments

Comments
 (0)