72 |
73 | ## Toggling the control title
74 |
75 | You must update the [js/customizer-toggle-control.js](js/customizer-toggle-control.js#L10-L15) file if you want to change the title color when a toggle is disabled/enabled.
76 |
77 |
78 | ## Credits
79 |
80 | The [CSS](pure-css-toggle-buttons) is copyright (c) 2016 by Mauricio Allende
81 |
82 | You can see his [demo at CodePen.io](http://codepen.io/mallendeo/pen/eLIiG)
83 |
84 | The CSS is [licensed](https://blog.codepen.io/legal/licensing/) under the terms of the [MIT license](http://opensource.org/licenses/MIT)
85 |
86 | ## Copyright and License
87 |
88 | WordPress Customizer Toggle Control is copyright 2016 Per Soderlind
89 |
90 | WordPress Customizer Toggle Control is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 2 of the License, or (at your option) any later version.
91 |
92 | WordPress Customizer Toggle Control is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
93 |
94 | You should have received a copy of the GNU Lesser General Public License along with the Extension. If not, see http://www.gnu.org/licenses/.
95 |
--------------------------------------------------------------------------------
/pure-css-toggle-buttons/pure-css-togle-buttons.css:
--------------------------------------------------------------------------------
1 | input[type=checkbox].tgl {
2 | display: none;
3 | }
4 | input[type=checkbox].tgl, input[type=checkbox].tgl:after, input[type=checkbox].tgl:before, input[type=checkbox].tgl *, input[type=checkbox].tgl *:after, input[type=checkbox].tgl *:before, input[type=checkbox].tgl + .tgl-btn {
5 | box-sizing: border-box;
6 | }
7 | input[type=checkbox].tgl::-moz-selection, input[type=checkbox].tgl:after::-moz-selection, input[type=checkbox].tgl:before::-moz-selection, input[type=checkbox].tgl *::-moz-selection, input[type=checkbox].tgl *:after::-moz-selection, input[type=checkbox].tgl *:before::-moz-selection, input[type=checkbox].tgl + .tgl-btn::-moz-selection {
8 | background: none;
9 | }
10 | input[type=checkbox].tgl::selection, input[type=checkbox].tgl:after::selection, input[type=checkbox].tgl:before::selection, input[type=checkbox].tgl *::selection, input[type=checkbox].tgl *:after::selection, input[type=checkbox].tgl *:before::selection, input[type=checkbox].tgl + .tgl-btn::selection {
11 | background: none;
12 | }
13 | input[type=checkbox].tgl + .tgl-btn {
14 | outline: 0;
15 | display: block;
16 | width: 4em;
17 | height: 2em;
18 | position: relative;
19 | cursor: pointer;
20 | -webkit-user-select: none;
21 | -moz-user-select: none;
22 | -ms-user-select: none;
23 | user-select: none;
24 | }
25 | input[type=checkbox].tgl + .tgl-btn:after, input[type=checkbox].tgl + .tgl-btn:before {
26 | position: relative;
27 | display: block;
28 | content: "";
29 | width: 50%;
30 | height: 100%;
31 | }
32 | input[type=checkbox].tgl + .tgl-btn:after {
33 | left: 0;
34 | }
35 | input[type=checkbox].tgl + .tgl-btn:before {
36 | display: none;
37 | }
38 | input[type=checkbox].tgl:checked + .tgl-btn:after {
39 | left: 50%;
40 | }
41 |
42 | input[type=checkbox].tgl-light + .tgl-btn {
43 | background: #f0f0f0;
44 | border-radius: 2em;
45 | padding: 2px;
46 | -webkit-transition: all .4s ease;
47 | transition: all .4s ease;
48 | }
49 | input[type=checkbox].tgl-light + .tgl-btn:after {
50 | border-radius: 50%;
51 | background: #fff;
52 | -webkit-transition: all .2s ease;
53 | transition: all .2s ease;
54 | }
55 | input[type=checkbox].tgl-light:checked + .tgl-btn {
56 | background: #9FD6AE;
57 | }
58 |
59 | input[type=checkbox].tgl-ios + .tgl-btn {
60 | background: #fbfbfb;
61 | border-radius: 2em;
62 | padding: 2px;
63 | -webkit-transition: all .4s ease;
64 | transition: all .4s ease;
65 | border: 1px solid #e8eae9;
66 | }
67 | input[type=checkbox].tgl-ios + .tgl-btn:after {
68 | border-radius: 2em;
69 | background: #fbfbfb;
70 | -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
71 | transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
72 | box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
73 | }
74 | input[type=checkbox].tgl-ios + .tgl-btn:hover:after {
75 | will-change: padding;
76 | }
77 | input[type=checkbox].tgl-ios + .tgl-btn:active {
78 | box-shadow: inset 0 0 0 2em #e8eae9;
79 | }
80 | input[type=checkbox].tgl-ios + .tgl-btn:active:after {
81 | padding-right: .8em;
82 | }
83 | input[type=checkbox].tgl-ios:checked + .tgl-btn {
84 | background: #86d993;
85 | }
86 | input[type=checkbox].tgl-ios:checked + .tgl-btn:active {
87 | box-shadow: none;
88 | }
89 | input[type=checkbox].tgl-ios:checked + .tgl-btn:active:after {
90 | margin-left: -.8em;
91 | }
92 |
93 | input[type=checkbox].tgl-flat + .tgl-btn {
94 | padding: 2px;
95 | -webkit-transition: all .2s ease;
96 | transition: all .2s ease;
97 | background: #fff;
98 | border: 4px solid #f2f2f2;
99 | border-radius: 2em;
100 | }
101 | input[type=checkbox].tgl-flat + .tgl-btn:after {
102 | -webkit-transition: all .2s ease;
103 | transition: all .2s ease;
104 | background: #f2f2f2;
105 | content: "";
106 | border-radius: 1em;
107 | }
108 | input[type=checkbox].tgl-flat:checked + .tgl-btn {
109 | border: 4px solid #7FC6A6;
110 | }
111 | input[type=checkbox].tgl-flat:checked + .tgl-btn:after {
112 | left: 50%;
113 | background: #7FC6A6;
114 | }
115 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | GNU GENERAL PUBLIC LICENSE
2 | Version 2, June 1991
3 |
4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc.,