Skip to content

Commit 4eb0431

Browse files
author
Janic Beauchemin
committed
update short style
1 parent e0cbc4d commit 4eb0431

10 files changed

+105
-80
lines changed

‎README.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
jquery.switcher v1.2.1
1+
jquery.switcher v1.2.2
22
===============
33

44
Custom checkbox / radio button in jquery
@@ -13,6 +13,8 @@ or
1313

1414
bower install jquery.switcher
1515

16+
### Browser support
17+
Firefox, Chrome, Safari, iOS, Android, IE9+
1618

1719
### What to include in your html
1820
```html

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "jquery.switcher",
3-
"version": "1.2.1",
3+
"version": "1.2.2",
44
"homepage": "http://djanix.github.io/jquery.switcher/",
55
"docs": "http://amsul.github.io/pickadate.js",
66
"authors": [

‎dist/switcher.css

+44-32
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
/* jquery.switcher - 1.2.1
2-
* Copyright (c) 2014-07-31 Janic Beauchemin - https://github.com/djanix/ */
1+
/* jquery.switcher - 1.2.2
2+
* Copyright (c) 2014-08-19 Janic Beauchemin - https://github.com/djanix/ */
33

44

55
.switcher {
@@ -41,6 +41,23 @@
4141
.switcher.default input {
4242
display: none;
4343
}
44+
.switcher.default .slider {
45+
background-color: white;
46+
border-radius: 4px;
47+
-webkit-box-shadow: 0 0 2px 1px #dfdfdf;
48+
box-shadow: 0 0 2px 1px #dfdfdf;
49+
height: 26px;
50+
left: 0;
51+
position: absolute;
52+
top: 0;
53+
-webkit-transform: translateX(0%);
54+
-ms-transform: translateX(0%);
55+
transform: translateX(0%);
56+
-webkit-transition: -webkit-transform 0.3s;
57+
transition: transform 0.3s;
58+
width: 50%;
59+
z-index: 2;
60+
}
4461
.switcher.default .text {
4562
width: 50%;
4663
display: inline-block;
@@ -63,44 +80,39 @@
6380
-ms-transform: translateX(100%);
6481
transform: translateX(100%);
6582
}
66-
.switcher.default .slider {
67-
background-color: white;
68-
border-radius: 4px;
69-
-webkit-box-shadow: 0 0 2px 1px #dfdfdf;
70-
box-shadow: 0 0 2px 1px #dfdfdf;
71-
height: 26px;
72-
left: 0;
73-
position: absolute;
74-
top: 0;
75-
-webkit-transform: translateX(0%);
76-
-ms-transform: translateX(0%);
77-
transform: translateX(0%);
78-
-webkit-transition: -webkit-transform 0.3s;
79-
transition: transform 0.3s;
80-
width: 50%;
81-
z-index: 2;
82-
}
8383

8484
.switcher.short {
85-
border: 1px solid #dfdfdf;
86-
border-radius: 50%;
87-
margin-bottom: -3px;
88-
padding: 1px;
85+
cursor: pointer;
86+
display: inline-block;
87+
margin-right: 5px;
88+
vertical-align: middle;
8989
}
9090
.switcher.short input {
9191
display: none;
9292
}
93-
.switcher.short .slider {
94-
background-color: #bf1111;
93+
.switcher.short .content {
94+
border: 1px solid #aaaaaa;
9595
border-radius: 50%;
96-
height: 15px;
97-
-webkit-transition: background-color 0.3s;
98-
transition: background-color 0.3s;
99-
width: 15px;
96+
height: 18px;
97+
padding: 0;
98+
width: 18px;
10099
}
101-
.switcher.short .slider:after {
102-
color: #fff;
100+
.switcher.short .slider {
101+
background-color: #519b20;
102+
border-radius: 50%;
103+
height: 12px;
104+
margin: 3px;
105+
opacity: 0;
106+
-webkit-transform: scale(0);
107+
-ms-transform: scale(0);
108+
transform: scale(0);
109+
-webkit-transition: all 0.2s;
110+
transition: all 0.2s;
111+
width: 12px;
103112
}
104113
.switcher.short.is-active .slider {
105-
background-color: #519b20;
114+
opacity: 1;
115+
-webkit-transform: scale(1);
116+
-ms-transform: scale(1);
117+
transform: scale(1);
106118
}

‎dist/switcher.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
* Under MIT License
88
*/
99

10-
/* jquery.switcher - 1.2.1
11-
* Copyright (c) 2014-07-11 Janic Beauchemin - https://github.com/djanix/ */
10+
/* jquery.switcher - 1.2.2
11+
* Copyright (c) 2014-08-19 Janic Beauchemin - https://github.com/djanix/ */
1212

1313
;(function ($, window, document, undefined) {
1414
var pluginName = "switcher";

‎dist/switcher.min.css

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/switcher.min.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

+6-2
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@
3333
margin: 0.5em 0;
3434
}
3535

36+
label {
37+
font-size: 14px;
38+
}
39+
3640
.style {
3741
border-bottom: 3px solid #519b20;
3842
text-align: left;
@@ -63,7 +67,7 @@
6367
<h1>Jquery Switcher</h1>
6468

6569
<div class="style style1">
66-
<h2>Style #1 (default style):</h2>
70+
<h2>Style #1 (default):</h2>
6771

6872
<div class="checkbox">
6973
<h3>Checkbox</h3>
@@ -104,7 +108,7 @@ <h4>Controls:</h4>
104108
</div>
105109

106110
<div class="style style2">
107-
<h2>Style #2:</h2>
111+
<h2>Style #2 (short):</h2>
108112

109113
<div class="checkbox">
110114
<h3>Checkbox</h3>

‎package.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "jquery.switcher",
3-
"version": "1.2.1",
3+
"version": "1.2.2",
44
"description": "",
55
"homepage": "",
66
"author": {
@@ -9,12 +9,12 @@
99
},
1010
"devDependencies": {
1111
"grunt": "^0.4.5",
12-
"grunt-contrib-watch": "^0.6.1",
13-
"grunt-contrib-jshint": "^0.10.0",
1412
"grunt-autoprefixer": "^0.7.3",
15-
"matchdep": "^0.3.0",
16-
"grunt-contrib-uglify": "^0.5.0",
13+
"grunt-contrib-copy": "~0.5.0",
14+
"grunt-contrib-jshint": "^0.10.0",
1715
"grunt-contrib-sass": "~0.7.3",
18-
"grunt-contrib-copy": "~0.5.0"
16+
"grunt-contrib-uglify": "^0.5.0",
17+
"grunt-contrib-watch": "^0.6.1",
18+
"matchdep": "^0.3.0"
1919
}
2020
}

‎switcher.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
* Under MIT License
88
*/
99

10-
/* jquery.switcher - 1.2.1
11-
* Copyright (c) 2014-07-11 Janic Beauchemin - https://github.com/djanix/ */
10+
/* jquery.switcher - 1.2.2
11+
* Copyright (c) 2014-08-19 Janic Beauchemin - https://github.com/djanix/ */
1212

1313
;(function ($, window, document, undefined) {
1414
var pluginName = "switcher";

‎switcher.scss

+36-29
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,20 @@ $fontFamily: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
4646
display: none;
4747
}
4848

49+
.slider {
50+
background-color: $colorSecondary;
51+
border-radius: 4px;
52+
box-shadow: 0 0 2px 1px $colorBorder;
53+
height: 26px;
54+
left: 0;
55+
position: absolute;
56+
top: 0;
57+
transform: translateX(0%);
58+
transition: transform 0.3s;
59+
width: 50%;
60+
z-index: 2;
61+
}
62+
4963
.text {
5064
width: 50%;
5165

@@ -71,51 +85,44 @@ $fontFamily: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
7185
transform: translateX(100%);
7286
}
7387
}
74-
75-
.slider {
76-
background-color: $colorSecondary;
77-
border-radius: 4px;
78-
box-shadow: 0 0 2px 1px $colorBorder;
79-
height: 26px;
80-
left: 0;
81-
position: absolute;
82-
top: 0;
83-
transform: translateX(0%);
84-
transition: transform 0.3s;
85-
width: 50%;
86-
z-index: 2;
87-
}
8888
}
8989

9090
.switcher.short {
9191
$colorActive: #519b20;
92-
$colorSecondary: #BF1111;
93-
$colorBorder: #dfdfdf;
92+
$colorBorder: #aaa;
9493

95-
border: 1px solid $colorBorder;
96-
border-radius: 50%;
97-
margin-bottom: -3px;
98-
padding: 1px;
94+
cursor: pointer;
95+
display: inline-block;
96+
margin-right: 5px;
97+
vertical-align: middle;
9998

10099
input {
101100
display: none;
102101
}
103102

104-
.slider {
105-
background-color: $colorSecondary;
103+
.content {
104+
border: 1px solid $colorBorder;
106105
border-radius: 50%;
107-
height: 15px;
108-
transition: background-color 0.3s;
109-
width: 15px;
106+
height: 18px;
107+
padding: 0;
108+
width: 18px;
109+
}
110110

111-
&:after {
112-
color: #fff;
113-
}
111+
.slider {
112+
background-color: $colorActive;
113+
border-radius: 50%;
114+
height: 12px;
115+
margin: 3px;
116+
opacity: 0;
117+
transform: scale(0);
118+
transition: all 0.2s;
119+
width: 12px;
114120
}
115121

116122
&.is-active {
117123
.slider {
118-
background-color: $colorActive;
124+
opacity: 1;
125+
transform: scale(1);
119126
}
120127
}
121128
}

0 commit comments

Comments
 (0)