Skip to content

Commit 879351c

Browse files
haubekhaubek
committed
sm and xs sizes.
1 parent c837ce7 commit 879351c

File tree

9 files changed

+296
-20
lines changed

9 files changed

+296
-20
lines changed

‎HISTORY.md‎

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

3+
## 1.0.11
4+
5+
* Added `custom-switch-sm` and `custom-switch-xs` sizes
6+
37
## 1.0.10
48

59
* Added support for the `[disabled]` attribute

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "bootstrap4c-custom-switch",
33
"description": "Bootstrap 4 Component - Custom switch",
4-
"version": "1.0.10",
4+
"version": "1.0.11",
55
"license": "MIT",
66
"authors": [
77
{ "name": "Martin Haubek", "email": "[email protected]", "homepage": "https://haubek.github.io" }

‎dist/css/component-custom-switch.css‎

Lines changed: 97 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*
44
*
55
* Bootstrap 4 Component - Custom switch
6-
* Version: 1.0.10
6+
* Version: 1.0.11
77
* Copyright (c) 2017-18 Martin Haubek
88
*
99
*
@@ -102,10 +102,102 @@
102102
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='9.71429' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EYes%3C/text%3E%3C/svg%3E"); }
103103

104104
.custom-switch.custom-switch-label-status .custom-switch-input + .custom-switch-btn {
105-
width: 88px;
106-
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='38'%3E%3Ctext x='38.85714' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EDisabled%3C/text%3E%3C/svg%3E"); }
105+
width: 96px;
106+
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='38'%3E%3Ctext x='38.85714' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EDisabled%3C/text%3E%3C/svg%3E"); }
107107

108108
.custom-switch.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn {
109-
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='38'%3E%3Ctext x='9.71429' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EEnabled%3C/text%3E%3C/svg%3E"); }
109+
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='38'%3E%3Ctext x='9.71429' y='23.75' font-size='12px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EEnabled%3C/text%3E%3C/svg%3E"); }
110110
.custom-switch.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn:after {
111-
left: 50px; }
111+
left: 58px; }
112+
113+
.custom-switch-sm .custom-switch-input + .custom-switch-btn {
114+
width: 60px;
115+
height: 31px;
116+
padding: 3.26316px;
117+
border-radius: 62px; }
118+
.custom-switch-sm .custom-switch-input + .custom-switch-btn:after, .custom-switch-sm .custom-switch-input + .custom-switch-btn:before {
119+
width: 25px;
120+
height: 25px; }
121+
.custom-switch-sm .custom-switch-input + .custom-switch-btn:after {
122+
left: 1px; }
123+
124+
.custom-switch-sm .custom-switch-input:checked + .custom-switch-btn:after {
125+
left: 29px; }
126+
127+
.custom-switch-sm .custom-switch-form-text {
128+
height: 31px;
129+
margin-left: .5rem;
130+
line-height: 31px; }
131+
132+
.custom-switch-sm.custom-switch-label-io .custom-switch-input + .custom-switch-btn {
133+
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='37.5' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EO%3C/text%3E%3C/svg%3E"); }
134+
135+
.custom-switch-sm.custom-switch-label-io .custom-switch-input:checked + .custom-switch-btn {
136+
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='16' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EI%3C/text%3E%3C/svg%3E"); }
137+
138+
.custom-switch-sm.custom-switch-label-onoff .custom-switch-input + .custom-switch-btn {
139+
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='32.87671' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EOff%3C/text%3E%3C/svg%3E"); }
140+
141+
.custom-switch-sm.custom-switch-label-onoff .custom-switch-input:checked + .custom-switch-btn {
142+
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='8.57143' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EOn%3C/text%3E%3C/svg%3E"); }
143+
144+
.custom-switch-sm.custom-switch-label-yesno .custom-switch-input + .custom-switch-btn {
145+
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='32.87671' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3ENo%3C/text%3E%3C/svg%3E"); }
146+
147+
.custom-switch-sm.custom-switch-label-yesno .custom-switch-input:checked + .custom-switch-btn {
148+
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='31'%3E%3Ctext x='8.57143' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EYes%3C/text%3E%3C/svg%3E"); }
149+
150+
.custom-switch-sm.custom-switch-label-status .custom-switch-input + .custom-switch-btn {
151+
width: 88px;
152+
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='31'%3E%3Ctext x='32.87671' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EDisabled%3C/text%3E%3C/svg%3E"); }
153+
154+
.custom-switch-sm.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn {
155+
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='31'%3E%3Ctext x='8.57143' y='19.375' font-size='11px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EEnabled%3C/text%3E%3C/svg%3E"); }
156+
.custom-switch-sm.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn:after {
157+
left: 57px; }
158+
159+
.custom-switch-xs .custom-switch-input + .custom-switch-btn {
160+
width: 48px;
161+
height: 24px;
162+
padding: 2.52632px;
163+
border-radius: 48px; }
164+
.custom-switch-xs .custom-switch-input + .custom-switch-btn:after, .custom-switch-xs .custom-switch-input + .custom-switch-btn:before {
165+
width: 18px;
166+
height: 18px; }
167+
.custom-switch-xs .custom-switch-input + .custom-switch-btn:after {
168+
left: 1px; }
169+
170+
.custom-switch-xs .custom-switch-input:checked + .custom-switch-btn:after {
171+
left: 24px; }
172+
173+
.custom-switch-xs .custom-switch-form-text {
174+
height: 24px;
175+
margin-left: .5rem;
176+
line-height: 24px; }
177+
178+
.custom-switch-xs.custom-switch-label-io .custom-switch-input + .custom-switch-btn {
179+
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='27.42857' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EO%3C/text%3E%3C/svg%3E"); }
180+
181+
.custom-switch-xs.custom-switch-label-io .custom-switch-input:checked + .custom-switch-btn {
182+
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='12.8' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EI%3C/text%3E%3C/svg%3E"); }
183+
184+
.custom-switch-xs.custom-switch-label-onoff .custom-switch-input + .custom-switch-btn {
185+
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='25.6' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EOff%3C/text%3E%3C/svg%3E"); }
186+
187+
.custom-switch-xs.custom-switch-label-onoff .custom-switch-input:checked + .custom-switch-btn {
188+
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='6.85714' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EOn%3C/text%3E%3C/svg%3E"); }
189+
190+
.custom-switch-xs.custom-switch-label-yesno .custom-switch-input + .custom-switch-btn {
191+
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='25.6' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3ENo%3C/text%3E%3C/svg%3E"); }
192+
193+
.custom-switch-xs.custom-switch-label-yesno .custom-switch-input:checked + .custom-switch-btn {
194+
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ctext x='6.85714' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EYes%3C/text%3E%3C/svg%3E"); }
195+
196+
.custom-switch-xs.custom-switch-label-status .custom-switch-input + .custom-switch-btn {
197+
width: 76px;
198+
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='24'%3E%3Ctext x='25.6' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EDisabled%3C/text%3E%3C/svg%3E"); }
199+
200+
.custom-switch-xs.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn {
201+
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='24'%3E%3Ctext x='6.85714' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EEnabled%3C/text%3E%3C/svg%3E"); }
202+
.custom-switch-xs.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn:after {
203+
left: 52px; }

‎dist/css/component-custom-switch.min.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.

‎example.html‎

Lines changed: 38 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,46 @@
1212
<div class="d-flex align-items-start flex-column h-100">
1313
<div class="w-100 m-auto py-5 text-center">
1414

15+
<div class="custom-switch custom-switch-label">
16+
<input class="custom-switch-input" id="example_01" type="checkbox">
17+
<label class="custom-switch-btn" for="example_01"></label>
18+
</div>
19+
<hr>
1520
<div class="custom-switch custom-switch-label-io">
16-
<input class="custom-switch-input" id="example_1" type="checkbox">
17-
<label class="custom-switch-btn" for="example_1"></label>
21+
<input class="custom-switch-input" id="example_02" type="checkbox">
22+
<label class="custom-switch-btn" for="example_02"></label>
1823
</div>
1924
<hr>
2025
<div class="custom-switch custom-switch-label-onoff">
21-
<input class="custom-switch-input" id="example_2" type="checkbox">
22-
<label class="custom-switch-btn" for="example_2"></label>
26+
<input class="custom-switch-input" id="example_03" type="checkbox">
27+
<label class="custom-switch-btn" for="example_03"></label>
28+
</div>
29+
<hr>
30+
<div class="custom-switch custom-switch-label-yesno">
31+
<input class="custom-switch-input" id="example_04" type="checkbox">
32+
<label class="custom-switch-btn" for="example_04"></label>
33+
</div>
34+
<hr>
35+
<div class="custom-switch custom-switch-label-status">
36+
<input class="custom-switch-input" id="example_05" type="checkbox">
37+
<label class="custom-switch-btn" for="example_05"></label>
38+
</div>
39+
<hr>
40+
<div class="custom-switch custom-switch-label-onoff custom-switch-sm">
41+
<input class="custom-switch-input" id="example_06" type="checkbox">
42+
<label class="custom-switch-btn" for="example_06"></label>
2343
</div>
44+
<p>I'm <code>sm</code></p>
45+
<hr>
46+
<div class="custom-switch custom-switch-label-onoff custom-switch-xs">
47+
<input class="custom-switch-input" id="example_07" type="checkbox">
48+
<label class="custom-switch-btn" for="example_07"></label>
49+
</div>
50+
<p>I'm <code>xs</code></p>
2451
<hr>
2552
<div class="custom-switch custom-switch-label-yesno">
26-
<input class="custom-switch-input" id="example_3" type="checkbox">
27-
<label class="custom-switch-btn" for="example_3"></label>
53+
<input class="custom-switch-input" id="example_08" type="checkbox">
54+
<label class="custom-switch-btn" for="example_08"></label>
2855
<div class="custom-switch-content-checked">
2956
<span class="text-success">I'm checked</span>
3057
</div>
@@ -34,14 +61,15 @@
3461
</div>
3562
<hr>
3663
<div class="custom-switch custom-switch-label-io">
37-
<input class="custom-switch-input" id="example_4" type="checkbox" disabled>
38-
<label class="custom-switch-btn" for="example_4"></label>
64+
<input class="custom-switch-input" id="example_09" type="checkbox" disabled>
65+
<label class="custom-switch-btn" for="example_09"></label>
3966
</div>
4067
<div class="custom-switch custom-switch-label-io">
41-
<input class="custom-switch-input" id="example_5" type="checkbox" checked disabled>
42-
<label class="custom-switch-btn" for="example_5"></label>
68+
<input class="custom-switch-input" id="example_10" type="checkbox" checked disabled>
69+
<label class="custom-switch-btn" for="example_10"></label>
4370
</div>
4471
<p>I'm disabled</p>
72+
4573
</div>
4674
</div>
4775
</div>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "bootstrap4c-custom-switch",
33
"description": "Bootstrap 4 Component - Custom switch",
4-
"version": "1.0.10",
4+
"version": "1.0.11",
55
"license": "MIT",
66
"author": {
77
"name": "Martin Haubek",

0 commit comments

Comments
 (0)