|
3 | 3 | * |
4 | 4 | * |
5 | 5 | * Bootstrap 4 Component - Custom switch |
6 | | - * Version: 1.0.4 |
| 6 | + * Version: 1.0.6 |
7 | 7 | * Copyright (c) 2017 Martin Haubek |
8 | 8 | * |
9 | 9 | * |
|
17 | 17 | .custom-switch .custom-switch-input *:before, |
18 | 18 | .custom-switch .custom-switch-input + .custom-switch-btn { |
19 | 19 | box-sizing: border-box; } |
20 | | - .custom-switch .custom-switch-input::-moz-selection, .custom-switch .custom-switch-input:after::-moz-selection, .custom-switch .custom-switch-input:before::-moz-selection, |
21 | | - .custom-switch .custom-switch-input *::-moz-selection, |
22 | | - .custom-switch .custom-switch-input *:after::-moz-selection, |
23 | | - .custom-switch .custom-switch-input *:before::-moz-selection, |
24 | | - .custom-switch .custom-switch-input + .custom-switch-btn::-moz-selection { |
25 | | - background: none; } |
26 | | - .custom-switch .custom-switch-input::selection, .custom-switch .custom-switch-input:after::selection, .custom-switch .custom-switch-input:before::selection, |
27 | | - .custom-switch .custom-switch-input *::selection, |
28 | | - .custom-switch .custom-switch-input *:after::selection, |
29 | | - .custom-switch .custom-switch-input *:before::selection, |
30 | | - .custom-switch .custom-switch-input + .custom-switch-btn::selection { |
| 20 | + .custom-switch .custom-switch-input:selection, .custom-switch .custom-switch-input:after:selection, .custom-switch .custom-switch-input:before:selection, |
| 21 | + .custom-switch .custom-switch-input *:selection, |
| 22 | + .custom-switch .custom-switch-input *:after:selection, |
| 23 | + .custom-switch .custom-switch-input *:before:selection, |
| 24 | + .custom-switch .custom-switch-input + .custom-switch-btn:selection { |
31 | 25 | background: none; } |
32 | 26 | .custom-switch .custom-switch-input + .custom-switch-btn { |
33 | 27 | outline: 0; |
|
78 | 72 | height: auto; } |
79 | 73 |
|
80 | 74 | .custom-switch.custom-switch-label-io .custom-switch-input + .custom-switch-btn { |
81 | | - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='38'><text x='42.5' y='23.75' font-size='12px' font-family='-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='#fff'>O</text></svg>"); } |
| 75 | + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='42.5' y='23.75' font-size='12px' font-family='-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='%23fff'%3EO%3C/text%3E%3C/svg%3E"); } |
82 | 76 |
|
83 | 77 | .custom-switch.custom-switch-label-io .custom-switch-input:checked + .custom-switch-btn { |
84 | | - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='38'><text x='18.13333' y='23.75' font-size='12px' font-family='-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='#fff'>I</text></svg>"); } |
| 78 | + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='18.13333' y='23.75' font-size='12px' font-family='-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='%23fff'%3EI%3C/text%3E%3C/svg%3E"); } |
85 | 79 |
|
86 | 80 | .custom-switch.custom-switch-label-onoff .custom-switch-input + .custom-switch-btn { |
87 | | - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='38'><text x='38.85714' y='23.75' font-size='12px' font-family='-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='#fff'>Off</text></svg>"); } |
| 81 | + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='38.85714' y='23.75' font-size='12px' font-family='-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='%23fff'%3EOff%3C/text%3E%3C/svg%3E"); } |
88 | 82 |
|
89 | 83 | .custom-switch.custom-switch-label-onoff .custom-switch-input:checked + .custom-switch-btn { |
90 | | - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='38'><text x='9.71429' y='23.75' font-size='12px' font-family='-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='#fff'>On</text></svg>"); } |
| 84 | + 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, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='%23fff'%3EOn%3C/text%3E%3C/svg%3E"); } |
91 | 85 |
|
92 | 86 | .custom-switch.custom-switch-label-yesno .custom-switch-input + .custom-switch-btn { |
93 | | - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='38'><text x='38.85714' y='23.75' font-size='12px' font-family='-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='#fff'>No</text></svg>"); } |
| 87 | + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='38'%3E%3Ctext x='38.85714' y='23.75' font-size='12px' font-family='-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='%23fff'%3ENo%3C/text%3E%3C/svg%3E"); } |
94 | 88 |
|
95 | 89 | .custom-switch.custom-switch-label-yesno .custom-switch-input:checked + .custom-switch-btn { |
96 | | - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='38'><text x='9.71429' y='23.75' font-size='12px' font-family='-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='#fff'>Yes</text></svg>"); } |
| 90 | + 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, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='%23fff'%3EYes%3C/text%3E%3C/svg%3E"); } |
97 | 91 |
|
98 | 92 | .custom-switch.custom-switch-label-status .custom-switch-input + .custom-switch-btn { |
99 | 93 | width: 88px; |
100 | | - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='88' height='38'><text x='38.85714' y='23.75' font-size='12px' font-family='-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='#fff'>Disabled</text></svg>"); } |
| 94 | + 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, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='%23fff'%3EDisabled%3C/text%3E%3C/svg%3E"); } |
101 | 95 |
|
102 | 96 | .custom-switch.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn { |
103 | | - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='88' height='38'><text x='9.71429' y='23.75' font-size='12px' font-family='-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='#fff'>Enabled</text></svg>"); } |
| 97 | + 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, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif' fill='%23fff'%3EEnabled%3C/text%3E%3C/svg%3E"); } |
104 | 98 | .custom-switch.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn:after { |
105 | 99 | left: 50px; } |
0 commit comments