├── .DS_Store
├── assets
├── .DS_Store
├── images
│ ├── git.png
│ ├── logo.gif
│ ├── .DS_Store
│ ├── YouTube.png
│ ├── codepen.png
│ ├── favicon.ico
│ ├── toggle.png
│ ├── css-toggle.png
│ ├── favicon-16x16.png
│ ├── favicon-32x32.png
│ ├── mstile-150x150.png
│ ├── CSS-TOGGLE-demo.gif
│ ├── apple-touch-icon.png
│ ├── css-toggle-Popup.gif
│ ├── css-toggle-list.gif
│ ├── css-toggle-youtube.png
│ ├── android-chrome-192x192.png
│ ├── android-chrome-512x512.png
│ └── safari-pinned-tab.svg
├── js
│ ├── app.js
│ └── toggle.js
├── css
│ └── styles.css
└── scss
│ └── styles.scss
├── browserconfig.xml
├── site.webmanifest
├── README.md
└── index.html
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vineethtrv/css-toggles/HEAD/.DS_Store
--------------------------------------------------------------------------------
/assets/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vineethtrv/css-toggles/HEAD/assets/.DS_Store
--------------------------------------------------------------------------------
/assets/images/git.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vineethtrv/css-toggles/HEAD/assets/images/git.png
--------------------------------------------------------------------------------
/assets/images/logo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vineethtrv/css-toggles/HEAD/assets/images/logo.gif
--------------------------------------------------------------------------------
/assets/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vineethtrv/css-toggles/HEAD/assets/images/.DS_Store
--------------------------------------------------------------------------------
/assets/images/YouTube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vineethtrv/css-toggles/HEAD/assets/images/YouTube.png
--------------------------------------------------------------------------------
/assets/images/codepen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vineethtrv/css-toggles/HEAD/assets/images/codepen.png
--------------------------------------------------------------------------------
/assets/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vineethtrv/css-toggles/HEAD/assets/images/favicon.ico
--------------------------------------------------------------------------------
/assets/images/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vineethtrv/css-toggles/HEAD/assets/images/toggle.png
--------------------------------------------------------------------------------
/assets/images/css-toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vineethtrv/css-toggles/HEAD/assets/images/css-toggle.png
--------------------------------------------------------------------------------
/assets/images/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vineethtrv/css-toggles/HEAD/assets/images/favicon-16x16.png
--------------------------------------------------------------------------------
/assets/images/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vineethtrv/css-toggles/HEAD/assets/images/favicon-32x32.png
--------------------------------------------------------------------------------
/assets/images/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vineethtrv/css-toggles/HEAD/assets/images/mstile-150x150.png
--------------------------------------------------------------------------------
/assets/images/CSS-TOGGLE-demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vineethtrv/css-toggles/HEAD/assets/images/CSS-TOGGLE-demo.gif
--------------------------------------------------------------------------------
/assets/images/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vineethtrv/css-toggles/HEAD/assets/images/apple-touch-icon.png
--------------------------------------------------------------------------------
/assets/images/css-toggle-Popup.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vineethtrv/css-toggles/HEAD/assets/images/css-toggle-Popup.gif
--------------------------------------------------------------------------------
/assets/images/css-toggle-list.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vineethtrv/css-toggles/HEAD/assets/images/css-toggle-list.gif
--------------------------------------------------------------------------------
/assets/images/css-toggle-youtube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vineethtrv/css-toggles/HEAD/assets/images/css-toggle-youtube.png
--------------------------------------------------------------------------------
/assets/images/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vineethtrv/css-toggles/HEAD/assets/images/android-chrome-192x192.png
--------------------------------------------------------------------------------
/assets/images/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vineethtrv/css-toggles/HEAD/assets/images/android-chrome-512x512.png
--------------------------------------------------------------------------------
/browserconfig.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | #da532c
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/site.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 | "name": "",
3 | "short_name": "",
4 | "icons": [
5 | {
6 | "src": "/assets/images/android-chrome-192x192.png",
7 | "sizes": "192x192",
8 | "type": "image/png"
9 | },
10 | {
11 | "src": "/assets/images/android-chrome-512x512.png",
12 | "sizes": "512x512",
13 | "type": "image/png"
14 | }
15 | ],
16 | "theme_color": "#ffffff",
17 | "background_color": "#ffffff",
18 | "display": "standalone"
19 | }
20 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # CSS Toggles Switches
2 |
3 | This is a collection of different types of CSS toggle switches and their source code.
4 | There are no javascript dependencies in this. It's is done using pure CSS. Hence it is easily customization too.
5 |
6 | [Open Css Toggles](https://csstoggles.github.io/)
7 |
8 | 
9 |
10 |
11 | # Get Source Code
12 | To get the source code is very simple. just need too click on the source code button below and the popup will be shown with the source code.
13 | 
14 |
15 |
--------------------------------------------------------------------------------
/assets/images/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
30 |
--------------------------------------------------------------------------------
/assets/js/app.js:
--------------------------------------------------------------------------------
1 | import { TOGGLES } from './toggle.js'; // import examples
2 | const appEl = document.getElementById('app'); // App element section
3 | const CODE_EXAMPLES = [...TOGGLES]; // Map codes
4 |
5 | // Create objects
6 | CODE_EXAMPLES.forEach((obExample, i) => {
7 | // Append Code examples
8 | appEl.appendChild(generateExamples(i, true));
9 |
10 | })
11 |
12 |
13 | function generateExamples(i , viewSource) {
14 | let codeExample = CODE_EXAMPLES[i];
15 |
16 | /** Create html **/
17 |
18 | // Create Section
19 | let sectionEl = document.createElement('div');
20 | sectionEl.setAttribute('class', 'section');
21 |
22 |
23 | // Append Card
24 | let cardEl = document.createElement('div');
25 | cardEl.setAttribute('class', 'card');
26 | sectionEl.appendChild(cardEl);
27 |
28 |
29 | // Append View Source Code Button
30 | if(viewSource){
31 | let viewCodeBtn = document.createElement('button');
32 | viewCodeBtn.setAttribute('data-id', codeExample.id);
33 | viewCodeBtn.setAttribute('data-index', (i + 1));
34 | viewCodeBtn.innerText = 'View Code ';
35 | sectionEl.appendChild(viewCodeBtn);
36 | }
37 |
38 |
39 | // Create Shadow wrapper element
40 | let shadowRoot = cardEl.attachShadow({ mode: 'open' });
41 |
42 | // Create HTML Elements
43 | if (viewSource){
44 | shadowRoot.innerHTML = `
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 | `;
53 | }else{
54 | shadowRoot.innerHTML = `
55 |
56 |
57 |
`;
58 | }
59 |
60 |
61 | //Create CSS
62 | let exampleStyles = document.createElement('style');
63 | exampleStyles.type = 'text/css';
64 | exampleStyles.innerHTML = codeExample.css;
65 | shadowRoot.appendChild(exampleStyles);
66 |
67 | return sectionEl
68 | }
69 |
70 |
71 |
72 |
73 | document.querySelectorAll('#app .section button').forEach(elm => {
74 | elm.addEventListener('click', (e) => {
75 | let index = parseInt(e.target.dataset.index);
76 | let showCase = document.querySelector('.showcase');
77 |
78 | showCase.replaceChildren(generateExamples((index - 1)));
79 |
80 |
81 | // console.log(e);
82 | showCase.dataset.index = index;
83 |
84 | // load code
85 | document.querySelector('#markup').textContent = `
86 |
87 |
88 |
`;
89 | document.querySelector('#css').textContent = CODE_EXAMPLES[index - 1].css;
90 |
91 | // popup
92 | document.querySelector('body').classList.add('pop')
93 | document.querySelector('.overlay').classList.add('in')
94 | })
95 | })
96 |
97 |
98 | // close popup
99 | document.querySelector('.btn-close').addEventListener('click', (e) => {
100 | document.querySelector('body').classList.remove('pop')
101 | document.querySelector('.overlay').classList.remove('in');
102 | });
103 |
104 | document.querySelector('.overlay').addEventListener('click', (e) => {
105 | if (e.target.className === "overlay in") {
106 | document.querySelector('body').classList.remove('pop')
107 | document.querySelector('.overlay').classList.remove('in');
108 | }
109 | });
110 |
111 |
112 | // Copy to clipboard
113 | document.querySelectorAll('.copy').forEach(copyBtn => {
114 | copyBtn.addEventListener('click', (e) => {
115 | const id = e.target.dataset.id;
116 | selectText(id);
117 | document.execCommand("copy");
118 | e.target.textContent = 'Copied';
119 |
120 | setTimeout(time => e.target.textContent = 'Copy', 300);
121 | })
122 | });
123 |
124 |
125 | // select Text
126 | function selectText(containerid) {
127 | if (document.selection) { // IE
128 | var range = document.body.createTextRange();
129 | range.moveToElementText(document.getElementById(containerid));
130 | range.select();
131 | } else if (window.getSelection) {
132 | var range = document.createRange();
133 | range.selectNode(document.getElementById(containerid));
134 | window.getSelection().removeAllRanges();
135 | window.getSelection().addRange(range);
136 | }
137 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | CSS Toggles and Switches
18 |
19 |
20 |
21 |
23 |
24 |
25 |
26 |
27 |
28 |
30 |
31 |
32 |
33 |
34 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
104 |
105 |
106 |
--------------------------------------------------------------------------------
/assets/css/styles.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;600;800&family=Roboto:wght@400;700&display=swap");
2 | *,
3 | *::after,
4 | *::before {
5 | box-sizing: border-box;
6 | }
7 |
8 | :root {
9 | --body-bg: #f5f5f5;
10 | --prime: #358EF1;
11 | --text: #3a3c4c;
12 | --card-bg: #fff;
13 | font-size: 14px;
14 | line-height: 1.5;
15 | font-family: 'Poppins', sans-serif;
16 | }
17 |
18 | ::-webkit-scrollbar {
19 | width: 0.5rem;
20 | height: 0.5rem;
21 | }
22 |
23 | ::-webkit-scrollbar-track {
24 | background: #0001;
25 | }
26 |
27 | ::-webkit-scrollbar-thumb {
28 | background: #0003;
29 | }
30 |
31 | ::-webkit-scrollbar-thumb:hover {
32 | background: #0005;
33 | }
34 |
35 | body {
36 | margin: 0;
37 | padding: 60px 0 0;
38 | height: 100vh;
39 | background: var(--body-bg);
40 | color: var(--text);
41 | display: flex;
42 | flex-direction: column;
43 | }
44 |
45 | .app-header {
46 | padding: 0.75rem 1rem;
47 | display: flex;
48 | align-items: center;
49 | justify-content: space-between;
50 | background: #FFF;
51 | position: fixed;
52 | left: 0;
53 | top: 0;
54 | width: 100%;
55 | box-shadow: 0 3px 10px #0001;
56 | }
57 |
58 | .app-header nav {
59 | display: flex;
60 | align-items: center;
61 | justify-content: center;
62 | }
63 |
64 | .app-header nav .nav-btn {
65 | display: inline-block;
66 | width: 32px;
67 | height: 32px;
68 | background-color: #fff;
69 | background-repeat: no-repeat;
70 | background-size: 110% auto;
71 | background-position: center;
72 | border-radius: 50%;
73 | box-shadow: 0 0 0 1px #fff;
74 | filter: invert(1);
75 | transition: 0.3s linear;
76 | }
77 |
78 | .app-header nav .nav-btn:hover {
79 | filter: invert(0);
80 | }
81 |
82 | .app-header nav .nav-btn + .nav-btn {
83 | margin-left: 10px;
84 | }
85 |
86 | .app-header nav .nav-btn.codepen {
87 | background-image: url(../images/codepen.png);
88 | }
89 |
90 | .app-header nav .nav-btn.git {
91 | background-image: url(../images/git.png);
92 | }
93 |
94 | .brand {
95 | font-family: 'Roboto', sans-serif;
96 | margin: 0;
97 | font-size: 1.7rem;
98 | display: flex;
99 | align-items: center;
100 | }
101 |
102 | .brand::before {
103 | content: '';
104 | border: 2px solid var(--prime);
105 | margin-right: 0.75rem;
106 | height: 1.5rem;
107 | width: 2.5rem;
108 | position: relative;
109 | border-radius: 6rem;
110 | background-image: radial-gradient(var(--prime) 50%, transparent 50%);
111 | background-size: 1.5rem 1.5rem;
112 | background-repeat: no-repeat;
113 | background-position: -0.1rem center;
114 | animation: 1s 1s brandAnim;
115 | }
116 |
117 | @keyframes brandAnim {
118 | 0%,
119 | 100% {
120 | background-position: -0.1rem center;
121 | }
122 | 50% {
123 | background-position: 0.8rem center;
124 | }
125 | }
126 |
127 | #app {
128 | height: calc(100vh - 90px);
129 | width: 100%;
130 | display: flex;
131 | align-items: center;
132 | flex-wrap: wrap;
133 | justify-content: space-between;
134 | overflow: auto;
135 | }
136 |
137 | .section {
138 | min-width: 200px;
139 | width: 33.33%;
140 | height: 300px;
141 | padding: 5px;
142 | display: flex;
143 | align-items: center;
144 | justify-content: center;
145 | position: relative;
146 | }
147 |
148 | @media (max-width: 1024px) {
149 | .section {
150 | width: 50%;
151 | }
152 | }
153 |
154 | .section button {
155 | position: absolute;
156 | bottom: 30px;
157 | left: 50%;
158 | padding: 7px 10px;
159 | border: none;
160 | background: #424242;
161 | font-weight: 800;
162 | color: #fff;
163 | white-space: nowrap;
164 | cursor: pointer;
165 | border-radius: 4px;
166 | transform: translateX(-50%);
167 | opacity: 0;
168 | transition: 0.2s ease-in;
169 | }
170 |
171 | .section button:hover {
172 | opacity: 1;
173 | transform: translateX(-50%) scale(1.1);
174 | }
175 |
176 | .card {
177 | width: 100%;
178 | height: 100%;
179 | background: var(--card-bg);
180 | display: flex;
181 | align-items: center;
182 | justify-content: space-evenly;
183 | flex-direction: column;
184 | padding: 60px 20px;
185 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
186 | transition: .2s linear;
187 | }
188 |
189 | .card:hover {
190 | box-shadow: 0 3px 13px rgba(0, 0, 0, 0.2);
191 | }
192 |
193 | .card:hover + button {
194 | opacity: 1;
195 | }
196 |
197 | footer {
198 | background: #0001;
199 | padding: 0.5rem;
200 | text-align: center;
201 | color: #ccc;
202 | width: 100%;
203 | font-size: 0.75rem;
204 | }
205 |
206 | footer a {
207 | color: #333;
208 | transition: .2s ease;
209 | text-decoration: none;
210 | display: inline-block;
211 | position: relative;
212 | }
213 |
214 | .overlay {
215 | position: fixed;
216 | left: 0;
217 | top: 0;
218 | width: 100%;
219 | height: 100%;
220 | background: rgba(0, 0, 0, 0.7);
221 | z-index: 2000;
222 | visibility: hidden;
223 | opacity: 0;
224 | overflow-y: auto;
225 | }
226 |
227 | .overlay.in {
228 | visibility: visible;
229 | opacity: 1;
230 | }
231 |
232 | .btn-close {
233 | position: absolute;
234 | top: 0px;
235 | right: 0px;
236 | z-index: 5;
237 | line-height: 20px;
238 | height: 20px;
239 | width: 20px;
240 | font-size: 26px;
241 | font-weight: 400;
242 | padding: 0;
243 | background: none;
244 | border: none;
245 | outline: none;
246 | cursor: pointer;
247 | opacity: 0.6;
248 | transition: 0.3s;
249 | }
250 |
251 | .btn-close:hover {
252 | opacity: 0.8;
253 | transform: rotate(-90deg) scale(1.3);
254 | }
255 |
256 | .popup {
257 | position: relative;
258 | transform: translateY(-20px);
259 | background: #eee;
260 | padding: 20px 15px;
261 | max-width: 600px;
262 | min-height: 400px;
263 | margin: 20px auto;
264 | width: 100%;
265 | transition: 0.2s ease-in;
266 | }
267 |
268 | .in .popup {
269 | transform: translateY(10px);
270 | }
271 |
272 | .showcase {
273 | background: #fff;
274 | margin-bottom: 15px;
275 | }
276 |
277 | .showcase .section {
278 | width: 100%;
279 | height: 300px;
280 | padding: 0;
281 | position: relative;
282 | display: flex;
283 | align-items: center;
284 | justify-content: center;
285 | }
286 |
287 | .showcase .section .card:hover {
288 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
289 | }
290 |
291 | .code-area {
292 | box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
293 | }
294 |
295 | .code-area .code-header {
296 | padding: 5px 10px;
297 | background: #222;
298 | color: #fff;
299 | font-size: 14px;
300 | position: relative;
301 | }
302 |
303 | .code-area + .code-area {
304 | margin-top: 10px;
305 | }
306 |
307 | .copy {
308 | outline: none;
309 | border: none;
310 | background: #000;
311 | position: absolute;
312 | right: 5px;
313 | top: 50%;
314 | transform: translateY(-50%);
315 | color: #fff;
316 | padding: 3px 8px;
317 | cursor: pointer;
318 | user-select: none;
319 | }
320 |
321 | .copy::before {
322 | content: '';
323 | display: inline-block;
324 | width: 10px;
325 | height: 12px;
326 | border: 1px solid #fff;
327 | box-shadow: 2px -2px #000, 3px -3px;
328 | margin-right: 8px;
329 | position: relative;
330 | top: 3px;
331 | }
332 |
333 | code {
334 | background: #000;
335 | padding: 5px 10px;
336 | display: block;
337 | white-space: pre;
338 | color: #03a9f4;
339 | min-height: 30px;
340 | font-size: 14px;
341 | line-height: 18px;
342 | }
343 |
344 | #markup {
345 | color: #f4a003;
346 | }
347 |
348 | #css {
349 | max-height: 200px;
350 | overflow: auto;
351 | }
352 |
--------------------------------------------------------------------------------
/assets/scss/styles.scss:
--------------------------------------------------------------------------------
1 | // out: ../css/styles.css
2 |
3 |
4 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;600;800&family=Roboto:wght@400;700&display=swap');
5 |
6 | *,
7 | *::after,
8 | *::before {
9 | box-sizing: border-box;
10 | }
11 |
12 |
13 | :root {
14 | --body-bg: #f5f5f5;
15 | --prime: #358EF1;
16 | --text: #3a3c4c;
17 | --card-bg: #fff;
18 | font-size: 14px;
19 | line-height: 1.5;
20 | font-family: 'Poppins', sans-serif;
21 | }
22 |
23 | ::-webkit-scrollbar {
24 | width: 0.5rem;
25 | height: 0.5rem;
26 | }
27 |
28 | ::-webkit-scrollbar-track {
29 | background: #0001;
30 | }
31 |
32 | ::-webkit-scrollbar-thumb {
33 | background: #0003;
34 | }
35 |
36 | ::-webkit-scrollbar-thumb:hover {
37 | background: #0005;
38 | }
39 |
40 | body {
41 | margin: 0;
42 | padding: 60px 0 0;
43 | height: 100vh;
44 | background: var(--body-bg);
45 | color: var(--text);
46 | display: flex;
47 | flex-direction: column;
48 | }
49 |
50 | .app-header {
51 | padding: 0.75rem 1rem;
52 | display: flex;
53 | align-items: center;
54 | justify-content: space-between;
55 | background: #FFF;
56 | position: fixed;
57 | left: 0;
58 | top: 0;
59 | width: 100%;
60 | box-shadow: 0 3px 10px #0001;
61 |
62 | nav {
63 | display: flex;
64 | align-items: center;
65 | justify-content: center;
66 | .nav-btn {
67 | display: inline-block;
68 | width: 32px;
69 | height: 32px;
70 | background-color: #fff;
71 | background-repeat: no-repeat;
72 | background-size: 110% auto;
73 | background-position: center;
74 | border-radius: 50%;
75 | box-shadow: 0 0 0 1px #fff;
76 | filter: invert(1);
77 | transition: 0.3s linear;
78 | &:hover {
79 | filter: invert(0);
80 | }
81 | & + .nav-btn{
82 | margin-left: 10px;
83 | }
84 |
85 | &.codepen {
86 | background-image: url(../images/codepen.png);
87 | }
88 | &.git {
89 | background-image: url(../images/git.png);
90 | }
91 | }
92 | }
93 | }
94 |
95 | .brand {
96 | font-family: 'Roboto', sans-serif;
97 | margin: 0;
98 | font-size: 1.7rem;
99 | display: flex;
100 | align-items: center;
101 | }
102 |
103 | .brand::before {
104 | content: '';
105 | border: 2px solid var(--prime);
106 | margin-right: 0.75rem;
107 | height: 1.5rem;
108 | width: 2.5rem;
109 | position: relative;
110 | border-radius: 6rem;
111 | background-image: radial-gradient(var(--prime) 50%, transparent 50%);
112 | background-size: 1.5rem 1.5rem;
113 | background-repeat: no-repeat;
114 | background-position: -0.1rem center;
115 | animation: 1s 1s brandAnim;
116 | }
117 |
118 |
119 | @keyframes brandAnim {
120 | 0%,
121 | 100% {
122 | background-position: -0.1rem center;
123 | }
124 | 50% {
125 | background-position: 0.8rem center;
126 | }
127 | }
128 |
129 |
130 |
131 | #app {
132 | height: calc(100vh - 90px);
133 | width: 100%;
134 | display: flex;
135 | align-items: center;
136 | flex-wrap: wrap;
137 | justify-content: space-between;
138 | overflow: auto;
139 | }
140 |
141 |
142 |
143 | .section {
144 | min-width: 200px;
145 | width: 33.33%;
146 | height: 300px;
147 | padding: 5px;
148 | display: flex;
149 | align-items: center;
150 | justify-content: center;
151 | position: relative;
152 | @media (max-width: 1024px){
153 | width: 50%;
154 | }
155 |
156 | button {
157 | position: absolute;
158 | bottom: 30px;
159 | left: 50%;
160 | padding: 7px 10px;
161 | border: none;
162 | background: #424242;
163 | font-weight: 800;
164 | color: #fff;
165 | white-space: nowrap;
166 | cursor: pointer;
167 | border-radius: 4px;
168 | transform: translateX(-50%);
169 | opacity: 0;
170 | transition: 0.2s ease-in;
171 | &:hover{
172 | opacity: 1;
173 | transform: translateX(-50%) scale(1.1);
174 | }
175 | }
176 | }
177 |
178 | .card{
179 | width: 100%;
180 | height: 100%;
181 | background: var(--card-bg);
182 | display: flex;
183 | align-items: center;
184 | justify-content: space-evenly;
185 | flex-direction: column;
186 | padding: 60px 20px;
187 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
188 | transition: .2s linear;
189 | &:hover {
190 | box-shadow: 0 3px 13px rgba(0, 0, 0, .2);
191 |
192 | & + button {
193 | opacity: 1;
194 | }
195 | }
196 | }
197 |
198 |
199 | footer {
200 | background: #0001;
201 | padding: 0.5rem;
202 | text-align: center;
203 | color: #ccc;
204 | width: 100%;
205 | font-size: 0.75rem;
206 | }
207 |
208 | footer a {
209 | color: #333;
210 | transition: .2s ease;
211 | text-decoration: none;
212 | display: inline-block;
213 | position: relative;
214 | }
215 |
216 | // Popup
217 |
218 | .overlay {
219 | position: fixed;
220 | left: 0;
221 | top: 0;
222 | width: 100%;
223 | height: 100%;
224 | background: rgba(#000, 0.7);
225 | z-index: 2000;
226 | visibility: hidden;
227 | opacity: 0;
228 | overflow-y: auto;
229 |
230 | &.in {
231 | visibility: visible;
232 | opacity: 1;
233 | }
234 | }
235 |
236 | .btn-close {
237 | position: absolute;
238 | top: 0px;
239 | right: 0px;
240 | z-index: 5;
241 | line-height: 20px;
242 | height: 20px;
243 | width: 20px;
244 | font-size: 26px;
245 | font-weight: 400;
246 | padding: 0;
247 | background: none;
248 | border: none;
249 | outline: none;
250 | cursor: pointer;
251 | opacity: 0.6;
252 | transition: 0.3s;
253 | &:hover{
254 | opacity: 0.8;
255 | transform: rotate(-90deg) scale(1.3);
256 | }
257 | }
258 |
259 | .popup {
260 | position: relative;
261 | transform: translateY(-20px);
262 | background: #eee;
263 | padding: 20px 15px;
264 | max-width: 600px;
265 | min-height: 400px;
266 | margin: 20px auto;
267 | width: 100%;
268 | transition: 0.2s ease-in;
269 |
270 | .in & {
271 | transform: translateY(10px);
272 | }
273 |
274 | }
275 |
276 | .showcase {
277 | background: #fff;
278 | margin-bottom: 15px;
279 |
280 | .section {
281 | width: 100%;
282 | height: 300px;
283 | padding: 0;
284 | position: relative;
285 | display: flex;
286 | align-items: center;
287 | justify-content: center;
288 | .card:hover{
289 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
290 | }
291 | }
292 | }
293 |
294 | .code-area {
295 | box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
296 | .code-header {
297 | padding: 5px 10px;
298 | background: #222;
299 | color: #fff;
300 | font-size: 14px;
301 | position: relative;
302 | }
303 |
304 | &+& {
305 | margin-top: 10px;
306 | }
307 | }
308 |
309 | .copy {
310 | outline: none;
311 | border: none;
312 | background: #000;
313 | position: absolute;
314 | right: 5px;
315 | top: 50%;
316 | transform: translateY(-50%);
317 | color: #fff;
318 | padding: 3px 8px;
319 | cursor: pointer;
320 | user-select: none;
321 |
322 | &::before {
323 | content: '';
324 | display: inline-block;
325 | width: 10px;
326 | height: 12px;
327 | border: 1px solid #fff;
328 | box-shadow: 2px -2px #000, 3px -3px;
329 | margin-right: 8px;
330 | position: relative;
331 | top: 3px;
332 | }
333 | }
334 |
335 | code {
336 | background: #000;
337 | padding: 5px 10px;
338 | display: block;
339 | white-space: pre;
340 | color: #03a9f4;
341 | min-height: 30px;
342 | font-size: 14px;
343 | line-height: 18px;
344 | }
345 |
346 | #markup {
347 | color: #f4a003;
348 | }
349 |
350 | #css {
351 | max-height: 200px;
352 | overflow: auto;
353 | }
--------------------------------------------------------------------------------
/assets/js/toggle.js:
--------------------------------------------------------------------------------
1 | export const TOGGLES = [
2 | {
3 | id: "model1",
4 | css: `.toggle {
5 | position: relative;
6 | }
7 | .toggle input[type="checkbox"] {
8 | position: absolute;
9 | left: 0;
10 | top: 0;
11 | z-index: 10;
12 | width: 100%;
13 | height: 100%;
14 | cursor: pointer;
15 | opacity: 0;
16 | }
17 | .toggle label {
18 | position: relative;
19 | display: flex;
20 | align-items: center;
21 | }
22 | .toggle label:before {
23 | content: '';
24 | width: 90px;
25 | height: 42px;
26 | background: #ccc;
27 | position: relative;
28 | display: inline-block;
29 | border-radius: 46px;
30 | transition: 0.2s ease-in;
31 | }
32 | .toggle label:after {
33 | content: '';
34 | position: absolute;
35 | width: 50px;
36 | height: 50px;
37 | border-radius: 50%;
38 | left: 0;
39 | top: -5px;
40 | z-index: 2;
41 | background: #fff;
42 | box-shadow: 0 0 5px #0002;
43 | transition: 0.2s ease-in;
44 | }
45 | .toggle input[type="checkbox"]:hover + label:after {
46 | box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
47 | }
48 | .toggle input[type="checkbox"]:checked + label:before {
49 | background: #376fcb;
50 | }
51 | .toggle input[type="checkbox"]:checked + label:after {
52 | background: #4285F4;
53 | left: 40px;
54 | }
55 | `,
56 | },
57 |
58 |
59 |
60 | {
61 | id: "model3",
62 | css: `.toggle {
63 | position: relative;
64 | box-sizing: border-box;
65 | }
66 | .toggle input[type="checkbox"] {
67 | position: absolute;
68 | left: 0;
69 | top: 0;
70 | z-index: 10;
71 | width: 100%;
72 | height: 100%;
73 | cursor: pointer;
74 | opacity: 0;
75 | }
76 | .toggle label {
77 | position: relative;
78 | display: flex;
79 | align-items: center;
80 | box-sizing: border-box;
81 | }
82 | .toggle label:before {
83 | content: '';
84 | width: 75px;
85 | height: 42px;
86 | background: #ccc;
87 | position: relative;
88 | display: inline-block;
89 | border-radius: 46px;
90 | box-sizing: border-box;
91 | transition: 0.2s ease-in;
92 | }
93 | .toggle label:after {
94 | content: '';
95 | position: absolute;
96 | width: 38px;
97 | height: 38px;
98 | border-radius: 50%;
99 | left: 2px;
100 | top: 2px;
101 | z-index: 2;
102 | background: #fff;
103 | box-sizing: border-box;
104 | transition: 0.2s ease-in;
105 | }
106 | .toggle input[type="checkbox"]:checked + label:before {
107 | background: #4BD865;
108 | }
109 | .toggle input[type="checkbox"]:checked + label:after {
110 | left: 35px;
111 | }
112 | `,
113 | },
114 |
115 | {
116 | id: "model3X1",
117 | css: `.toggle {
118 | position: relative;
119 | box-sizing: border-box;
120 | }
121 | .toggle input[type="checkbox"] {
122 | position: absolute;
123 | left: 0;
124 | top: 0;
125 | z-index: 10;
126 | width: 100%;
127 | height: 100%;
128 | cursor: pointer;
129 | opacity: 0;
130 | }
131 | .toggle label {
132 | position: relative;
133 | display: flex;
134 | align-items: center;
135 | box-sizing: border-box;
136 | }
137 | .toggle label:before {
138 | content: '';
139 | width: 78px;
140 | height: 40px;
141 | background: #f8f8f8;
142 | border: 2px solid #DDD;
143 | box-shadow: inset 0 0 0 0px #13bf11;
144 | position: relative;
145 | display: inline-block;
146 | border-radius: 20px;
147 | box-sizing: border-box;
148 | transition: 0.2s ease-in;
149 | }
150 | .toggle label:after {
151 | content: '';
152 | position: absolute;
153 | width: 40px;
154 | height: 40px;
155 | border: 2px solid #DDD;
156 | border-radius: 50%;
157 | left: 0;
158 | top: 0;
159 | z-index: 2;
160 | background: #fff;
161 | box-shadow: 0 1px 10px #0002;
162 | box-sizing: border-box;
163 | transition: 0.2s ease-in;
164 | }
165 | .toggle input[type="checkbox"]:checked + label:before {
166 | box-shadow: inset 40px 0 0 #13bf11;
167 | }
168 | .toggle input[type="checkbox"]:checked + label:after {
169 | left: 38px;
170 | }
171 | `,
172 | },
173 | {
174 | id: "model3X2",
175 | css: `.toggle {
176 | position: relative;
177 | box-sizing: border-box;
178 | }
179 | .toggle input[type="checkbox"] {
180 | position: absolute;
181 | left: 0;
182 | top: 0;
183 | z-index: 10;
184 | width: 100%;
185 | height: 100%;
186 | cursor: pointer;
187 | opacity: 0;
188 | }
189 | .toggle label {
190 | position: relative;
191 | display: flex;
192 | align-items: center;
193 | box-sizing: border-box;
194 | }
195 | .toggle label:before {
196 | content: '';
197 | width: 70px;
198 | height: 40px;
199 | background: #fff;
200 | border: 2px solid #DDD;
201 | box-shadow: inset -30px 0 0 #CCC;
202 | position: relative;
203 | display: inline-block;
204 | border-radius: 20px;
205 | box-sizing: border-box;
206 | transition: 0.25s ease-in-out;
207 | }
208 | .toggle input[type="checkbox"]:checked + label:before {
209 | box-shadow: inset 30px 0 0 #13bf11;
210 | }`,
211 | },
212 | {
213 | id: "model3X3",
214 | css: `.toggle {
215 | position: relative;
216 | box-sizing: border-box;
217 | }
218 | .toggle input[type="checkbox"] {
219 | position: absolute;
220 | left: 0;
221 | top: 0;
222 | z-index: 10;
223 | width: 100%;
224 | height: 100%;
225 | cursor: pointer;
226 | opacity: 0;
227 | }
228 | .toggle label {
229 | position: relative;
230 | display: flex;
231 | align-items: center;
232 | box-sizing: border-box;
233 | }
234 | .toggle label:before {
235 | content: '';
236 | width: 70px;
237 | height: 40px;
238 | background: #eee;
239 | border: 2px solid #DDD;
240 | box-shadow:inset 0 0 0 0 #13bf11 ;
241 | position: relative;
242 | display: inline-block;
243 | border-radius: 20px;
244 | box-sizing: border-box;
245 | transition: 0.25s ease-in-out;
246 | }
247 | .toggle label:after {
248 | content: '';
249 | position: absolute;
250 | width: 40px;
251 | height: 40px;
252 | border: 2px solid #DDD;
253 | border-radius: 50%;
254 | left: 0;
255 | top: 0;
256 | z-index: 2;
257 | background: #fff;
258 | box-shadow: 0 1px 10px #0002;
259 | box-sizing: border-box;
260 | transition: 0.25s ease-in-out;
261 | }
262 | .toggle input[type="checkbox"]:checked + label:before {
263 | box-shadow: inset 0 0 0 18px #13bf11;
264 | }
265 | .toggle input[type="checkbox"]:checked + label:after {
266 | left: 30px;
267 | }
268 | `,
269 | },
270 | {
271 | id: "model2",
272 | css: `.toggle {
273 | position: relative;
274 | }
275 | .toggle input[type="checkbox"] {
276 | position: absolute;
277 | left: 0;
278 | top: 0;
279 | z-index: 10;
280 | width: 100%;
281 | height: 100%;
282 | cursor: pointer;
283 | opacity: 0;
284 | }
285 | .toggle label {
286 | position: relative;
287 | display: flex;
288 | align-items: center;
289 | }
290 | .toggle label:before {
291 | content: '';
292 | width: 75px;
293 | height: 42px;
294 | background: #ccc;
295 | position: relative;
296 | display: inline-block;
297 | border-radius: 46px;
298 | transition: 0.2s ease-in;
299 | }
300 | .toggle label:after {
301 | content: '';
302 | position: absolute;
303 | width: 42px;
304 | height: 42px;
305 | border-radius: 50%;
306 | left: 0;
307 | top: 0px;
308 | z-index: 2;
309 | background: #fff;
310 | box-shadow: 0 0 10px #0003, -4px 1px 12px #0002;
311 | transition: 0.2s ease-in;
312 | }
313 | .toggle input[type="checkbox"]:hover + label:after {
314 | box-shadow: 0 2px 15px #0005, 0 3px 8px #0002;
315 | }
316 | .toggle input[type="checkbox"]:checked + label:before {
317 | background: #4BD865;
318 | }
319 | .toggle input[type="checkbox"]:checked + label:after {
320 | left: 35px;
321 | }
322 | `,
323 | },
324 |
325 |
326 | {
327 | id: "model4",
328 | css: `.toggle {
329 | position: relative;
330 | box-sizing: border-box;
331 | }
332 | .toggle input[type="checkbox"] {
333 | position: absolute;
334 | left: 0;
335 | top: 0;
336 | z-index: 10;
337 | width: 100%;
338 | height: 100%;
339 | cursor: pointer;
340 | opacity: 0;
341 | }
342 | .toggle label {
343 | position: relative;
344 | display: flex;
345 | align-items: center;
346 | box-sizing: border-box;
347 | }
348 | .toggle label:before {
349 | content: '';
350 | width: 100px;
351 | height: 42px;
352 | background: #ccc;
353 | position: relative;
354 | display: inline-block;
355 | border-radius: 46px;
356 | box-sizing: border-box;
357 | transition: 0.2s ease-in;
358 | }
359 | .toggle label:after {
360 | content: '';
361 | position: absolute;
362 | width: 38px;
363 | height: 38px;
364 | border-radius: 50%;
365 | left: 2px;
366 | top: 2px;
367 | z-index: 2;
368 | background: #fff;
369 | box-sizing: border-box;
370 | transition: 0.2s ease-in;
371 | }
372 | .toggle input[type="checkbox"]:checked + label:before {
373 | background: #4BD865;
374 | }
375 | .toggle input[type="checkbox"]:checked + label:after {
376 | left: 60px;
377 | }
378 | `,
379 | },
380 |
381 | {
382 | id: "model5",
383 | css: `.toggle {
384 | position: relative;
385 | box-sizing: border-box;
386 | }
387 | .toggle input[type="checkbox"] {
388 | position: absolute;
389 | left: 0;
390 | top: 0;
391 | z-index: 10;
392 | width: 100%;
393 | height: 100%;
394 | cursor: pointer;
395 | opacity: 0;
396 | }
397 | .toggle label {
398 | position: relative;
399 | display: flex;
400 | align-items: center;
401 | box-sizing: border-box;
402 | }
403 | .toggle label:before {
404 | content: '';
405 | width: 84px;
406 | height: 42px;
407 | position: relative;
408 | display: inline-block;
409 | border-radius: 46px;
410 | border: 2px solid #000;
411 | box-sizing: border-box;
412 | transition: 0.2s ease-in;
413 | }
414 | .toggle label:after {
415 | content: '';
416 | position: absolute;
417 | width: 36px;
418 | height: 36px;
419 | border-radius: 50%;
420 | left: 3px;
421 | top: 3px;
422 | z-index: 2;
423 | border: 2px solid #000;
424 | box-sizing: border-box;
425 | transition: 0.2s ease-in;
426 | }
427 | .toggle input[type="checkbox"]:checked + label:after {
428 | left: 44px;
429 | background: #000;
430 | }
431 | `,
432 | },
433 |
434 | {
435 | id: "model6",
436 | css: `.toggle {
437 | position: relative;
438 | box-sizing: border-box;
439 | }
440 | .toggle input[type="checkbox"] {
441 | position: absolute;
442 | left: 0;
443 | top: 0;
444 | z-index: 10;
445 | width: 100%;
446 | height: 100%;
447 | cursor: pointer;
448 | opacity: 0;
449 | }
450 | .toggle label {
451 | position: relative;
452 | display: flex;
453 | align-items: center;
454 | box-sizing: border-box;
455 | }
456 | .toggle label:before {
457 | content: '';
458 | width: 84px;
459 | height: 42px;
460 | position: relative;
461 | display: inline-block;
462 | background: #FFF;
463 | border-radius: 46px;
464 | border: 2px solid #000;
465 | box-sizing: border-box;
466 | transition: 0.2s ease-in;
467 | }
468 | .toggle label:after {
469 | content: '';
470 | position: absolute;
471 | width: 36px;
472 | height: 36px;
473 | border-radius: 50%;
474 | left: 3px;
475 | top: 3px;
476 | z-index: 2;
477 | background: #000;
478 | box-sizing: border-box;
479 | transition: 0.2s ease-in;
480 | }
481 | .toggle input[type="checkbox"]:checked + label:before {
482 | background: #000;
483 | }
484 | .toggle input[type="checkbox"]:checked + label:after {
485 | left: 44px;
486 | background: #FFF;
487 | }
488 | `,
489 | },
490 |
491 | {
492 | id: "model7",
493 | css: `.toggle {
494 | position: relative;
495 | box-sizing: border-box;
496 | }
497 | .toggle input[type="checkbox"] {
498 | position: absolute;
499 | left: 0;
500 | top: 0;
501 | z-index: 10;
502 | width: 100%;
503 | height: 100%;
504 | cursor: pointer;
505 | opacity: 0;
506 | }
507 | .toggle label {
508 | position: relative;
509 | display: flex;
510 | align-items: center;
511 | box-sizing: border-box;
512 | }
513 | .toggle label:before {
514 | content: '';
515 | width: 84px;
516 | height: 42px;
517 | position: relative;
518 | display: inline-block;
519 | background: #FFF;
520 | border-radius: 46px;
521 | border: 4px solid #000;
522 | box-sizing: border-box;
523 | transition: 0.2s ease-in;
524 | }
525 | .toggle label:after {
526 | content: '';
527 | position: absolute;
528 | width: 18px;
529 | height: 18px;
530 | border-radius: 50%;
531 | left: 10px;
532 | top: 12px;
533 | z-index: 2;
534 | background: #000;
535 | box-sizing: border-box;
536 | transition: 0.2s ease-in;
537 | }
538 | .toggle input[type="checkbox"]:checked + label:before {
539 | background: #000;
540 | }
541 | .toggle input[type="checkbox"]:checked + label:after {
542 | left: 58px;
543 | background: #FFF;
544 | }
545 | `,
546 | },
547 | {
548 | id: "modelCrl8",
549 | css: `.toggle {
550 | position: relative;
551 | box-sizing: border-box;
552 | }
553 | .toggle input[type="checkbox"] {
554 | position: absolute;
555 | left: 0;
556 | top: 0;
557 | z-index: 10;
558 | width: 100%;
559 | height: 100%;
560 | cursor: pointer;
561 | opacity: 0;
562 | }
563 | .toggle label {
564 | position: relative;
565 | display: flex;
566 | align-items: center;
567 | box-sizing: border-box;
568 | }
569 | .toggle label:before {
570 | content: '';
571 | width: 84px;
572 | height: 42px;
573 | position: relative;
574 | display: inline-block;
575 | background: #FFF;
576 | border-radius: 46px;
577 | border: 2px solid #000;
578 | box-sizing: border-box;
579 | transition: 0.2s ease-in;
580 | }
581 | .toggle label:after {
582 | content: '';
583 | position: absolute;
584 | width: 28px;
585 | height: 28px;
586 | border: 2px solid #000;
587 | box-shadow: 0 0 0 2px #fff inset;
588 | border-radius: 50%;
589 | left: 6px;
590 | top: 8px;
591 | z-index: 2;
592 | background: #000;
593 | box-sizing: border-box;
594 | transition: 0.2s ease-in;
595 | }
596 | .toggle input[type="checkbox"]:checked + label:before {
597 | background: #000;
598 | }
599 | .toggle input[type="checkbox"]:checked + label:after {
600 | left: 50px;
601 | border-color: #FFF;
602 | box-shadow: 0 0 0 2px #000 inset;
603 | background: #FFF;
604 | }
605 | `,
606 | },
607 | {
608 | id: "model9",
609 | css: `.toggle {
610 | position: relative;
611 | }
612 | .toggle input[type="checkbox"] {
613 | position: absolute;
614 | left: 0;
615 | top: 0;
616 | z-index: 10;
617 | width: 100%;
618 | height: 100%;
619 | cursor: pointer;
620 | opacity: 0;
621 | }
622 | .toggle label {
623 | position: relative;
624 | display: flex;
625 | align-items: center;
626 | }
627 | .toggle label:before {
628 | content: '';
629 | border: 5px solid #bbb;
630 | height: 35px;
631 | width: 70px;
632 | position: relative;
633 | display: inline-block;
634 | border-radius: 46px;
635 | transition: 0.2s ease-in;
636 | }
637 | .toggle label:after {
638 | content: '';
639 | position: absolute;
640 | background: #555;
641 | width: 28px;
642 | height: 28px;
643 | left: 8px;
644 | top: 8px;
645 | border-radius: 50%;
646 | z-index: 2;
647 | box-shadow: 0 0 5px #0002;
648 | transition: 0.2s ease-in;
649 | }
650 | .toggle input[type="checkbox"]:hover + label:after {
651 | box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
652 | }
653 | .toggle input[type="checkbox"]:checked + label:before {
654 | border-color: #77C2BB;
655 | }
656 | .toggle input[type="checkbox"]:checked + label:after {
657 | background: #009688;
658 | left: 44px;
659 | }
660 | `
661 | },
662 | {
663 | id: "modelxN1",
664 | css: `.toggle {
665 | position: relative;
666 | height: 30px;
667 | display: flex;
668 | align-items: center;
669 | box-sizing:border-box;
670 | }
671 | .toggle input[type="checkbox"] {
672 | position: absolute;
673 | left: 0;
674 | top: 0;
675 | z-index: 10;
676 | width: 100%;
677 | height: 100%;
678 | cursor: pointer;
679 | appearance: none;
680 |
681 | }
682 | .toggle label {
683 | position: relative;
684 | display: flex;
685 | height: 100%;
686 | align-items: center;
687 | box-sizing:border-box;
688 | }
689 | .toggle label:before {
690 | content: '';
691 | display: inline-block;
692 | box-sizing:border-box;
693 | transition: 0.2s ease-in;
694 | isolation: isolate;
695 | position: relative;
696 | height: 30px;
697 | width: 60px;
698 | border-radius: 15px;
699 | box-shadow:
700 | -8px -4px 8px 0px #ffffff,
701 | 8px 4px 12px 0px #d1d9e6,
702 | 4px 4px 4px 0px #d1d9e6 inset,
703 | -4px -4px 4px 0px #ffffff inset;
704 | }
705 | .toggle label:after {
706 | content: '';
707 | height: 30px;
708 | width: 30px;
709 | background: #ecf0f3;
710 | position: absolute;
711 | left: 0;
712 | top: 0;
713 | border-radius: 15px;
714 | transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
715 | box-shadow: -8px -4px 8px 0px #ffffff,
716 | 8px 4px 12px 0px #d1d9e6;
717 | }
718 | .toggle input[type="checkbox"]:checked + label:after {
719 | transform: translate3d(30px, 0, 0);
720 | }`
721 | },
722 | {
723 | id: "modelxN2",
724 | css: `.toggle {
725 | position: relative;
726 | height: 30px;
727 | display: flex;
728 | align-items: center;
729 | box-sizing:border-box;
730 | }
731 | .toggle input[type="checkbox"] {
732 | position: absolute;
733 | left: 0;
734 | top: 0;
735 | z-index: 10;
736 | width: 100%;
737 | height: 100%;
738 | cursor: pointer;
739 | appearance: none;
740 | }
741 | .toggle label {
742 | position: relative;
743 | display: flex;
744 | height: 100%;
745 | align-items: center;
746 | box-sizing:border-box;
747 | }
748 | .toggle label:before {
749 | content: '';
750 | display: inline-block;
751 | box-sizing:border-box;
752 | transition: 0.2s ease-in;
753 | isolation: isolate;
754 | position: relative;
755 | height: 30px;
756 | width: 60px;
757 | box-shadow:
758 | -8px -4px 8px 0px #ffffff,
759 | 8px 4px 12px 0px #d1d9e6,
760 | 4px 4px 4px 0px #d1d9e6 inset,
761 | -4px -4px 4px 0px #ffffff inset;
762 | }
763 | .toggle label:after {
764 | content: '';
765 | height: 30px;
766 | width: 30px;
767 | background: #ecf0f3;
768 | position: absolute;
769 | left: 0;
770 | top: 0;
771 | transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
772 | box-shadow: -8px -4px 8px 0px #ffffff,
773 | 8px 4px 12px 0px #d1d9e6;
774 | }
775 | .toggle input[type="checkbox"]:checked + label:after {
776 | transform: translate3d(30px, 0, 0);
777 | }`
778 | },
779 | {
780 | id: "modelxN3",
781 | css: `.toggle {
782 | position: relative;
783 | height: 30px;
784 | display: flex;
785 | align-items: center;
786 | box-sizing:border-box;
787 | }
788 | .toggle input[type="checkbox"] {
789 | position: absolute;
790 | left: 0;
791 | top: 0;
792 | z-index: 10;
793 | width: 100%;
794 | height: 100%;
795 | cursor: pointer;
796 | appearance: none;
797 | }
798 | .toggle label {
799 | position: relative;
800 | display: flex;
801 | height: 100%;
802 | align-items: center;
803 | box-sizing:border-box;
804 | }
805 | .toggle label:before {
806 | content: '';
807 | display: inline-block;
808 | box-sizing:border-box;
809 | transition: 0.2s ease-in;
810 | isolation: isolate;
811 | position: relative;
812 | height: 30px;
813 | width: 75px;
814 | border-radius: 15px;
815 | box-shadow:
816 | -8px -4px 8px 0px #ffffff,
817 | 8px 4px 12px 0px #d1d9e6,
818 | 4px 4px 4px 0px #d1d9e6 inset,
819 | -4px -4px 4px 0px #ffffff inset;
820 | }
821 | .toggle label:after {
822 | content: '';
823 | height: 30px;
824 | width: 45px;
825 | border-radius: 15px;
826 | background: #ecf0f3;
827 | position: absolute;
828 | left: 0;
829 | top: 0;
830 | transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
831 | box-shadow: -8px -4px 8px 0px #ffffff,
832 | 8px 4px 12px 0px #d1d9e6;
833 | }
834 | .toggle input[type="checkbox"]:checked + label:after {
835 | transform: translate3d(30px, 0, 0);
836 | }
837 | `
838 | },
839 | {
840 | id: "modelxN4",
841 | css: `.toggle {
842 | position: relative;
843 | height: 30px;
844 | display: flex;
845 | align-items: center;
846 | box-sizing:border-box;
847 | }
848 | .toggle input[type="checkbox"] {
849 | position: absolute;
850 | left: 0;
851 | top: 0;
852 | z-index: 10;
853 | width: 100%;
854 | height: 100%;
855 | cursor: pointer;
856 | appearance: none;
857 | }
858 | .toggle label {
859 | position: relative;
860 | display: flex;
861 | height: 100%;
862 | align-items: center;
863 | box-sizing:border-box;
864 | }
865 | .toggle label:before {
866 | content: '';
867 | display: inline-block;
868 | box-sizing:border-box;
869 | transition: 0.2s ease-in;
870 | box-sizing: border-box;
871 | isolation: isolate;
872 | position: relative;
873 | height: 32px;
874 | width: 64px;
875 | border-radius: 15px;
876 | background: #ecf0f3;
877 | box-shadow:
878 | -8px -4px 8px 0px #ffffff,
879 | 8px 4px 12px 0px #d1d9e6;
880 | }
881 | .toggle label:after {
882 | content: 'o';
883 | height: 32px;
884 | width: 32px;
885 | box-sizing: border-box;
886 | border-radius: 15px;
887 | background: #ecf0f3;
888 | font-family: arial;
889 | color: #0001;
890 | font-size: 22px;
891 | line-height: 30px;
892 | font-weight: 800;
893 | text-align: center;
894 | position: absolute;
895 | left: 0;
896 | top: 0;
897 | transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
898 | box-shadow: 4px 4px 4px 0px #d1d9e6 inset,
899 | -4px -4px 4px 0px #f4f8ff inset;
900 | }
901 | .toggle input[type="checkbox"]:checked + label:after {
902 | content: 'I';
903 | font-size: 18px;
904 | line-height: 32px;
905 | transform: translate3d(32px, 0, 0);
906 | }`
907 | },
908 |
909 | {
910 | id: "modelxN5",
911 | css: `.toggle {
912 | position: relative;
913 | height: 30px;
914 | display: flex;
915 | align-items: center;
916 | box-sizing:border-box;
917 | }
918 | .toggle input[type="checkbox"] {
919 | position: absolute;
920 | left: 0;
921 | top: 0;
922 | z-index: 10;
923 | width: 100%;
924 | height: 100%;
925 | cursor: pointer;
926 | appearance: none;
927 | }
928 | .toggle label {
929 | position: relative;
930 | display: flex;
931 | height: 100%;
932 | align-items: center;
933 | box-sizing:border-box;
934 | }
935 | .toggle label:before {
936 | content: '';
937 | display: inline-block;
938 | box-sizing:border-box;
939 | transition: 0.2s ease-in;
940 | box-sizing: border-box;
941 | isolation: isolate;
942 | position: relative;
943 | height: 32px;
944 | width: 96px;
945 | border-radius: 15px;
946 | background: #ecf0f3;
947 | box-shadow:
948 | -8px -4px 8px 0px #ffffff,
949 | 8px 4px 12px 0px #d1d9e6;
950 | }
951 | .toggle label:after {
952 | content: 'OFF';
953 | height: 32px;
954 | width: 48px;
955 | box-sizing: border-box;
956 | border-radius: 15px;
957 | background: #ecf0f3;
958 | font-family: arial;
959 | color: #0001;
960 | font-size: 14px;
961 | line-height: 32px;
962 | font-weight: 800;
963 | text-align: center;
964 | position: absolute;
965 | left: 0;
966 | top: 0;
967 | transition: 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
968 | box-shadow: 4px 4px 4px 0px #d1d9e6 inset,
969 | -4px -4px 4px 0px #f4f8ff inset;
970 | }
971 | .toggle input[type="checkbox"]:checked + label:after {
972 | content: 'ON';
973 | color: #9ec189;
974 | transform: translate3d(48px, 0, 0);
975 | }
976 | `
977 | },
978 |
979 |
980 |
981 |
982 | {
983 | id: "modelx0",
984 | css: `.toggle {
985 | position: relative;
986 | }
987 | .toggle input[type="checkbox"] {
988 | position: absolute;
989 | left: 0;
990 | top: 0;
991 | z-index: 10;
992 | width: 100%;
993 | height: 100%;
994 | cursor: pointer;
995 | opacity: 0;
996 | }
997 | .toggle label {
998 | position: relative;
999 | display: flex;
1000 | align-items: center;
1001 | }
1002 | .toggle label:before {
1003 | content: '';
1004 | background: #bbb;
1005 | height: 25px;
1006 | width: 75px;
1007 | position: relative;
1008 | display: inline-block;
1009 | border-radius: 46px;
1010 | transition: 0.2s ease-in;
1011 | }
1012 | .toggle label:after {
1013 | content: '';
1014 | position: absolute;
1015 | background: #fff;
1016 | top: -8px;
1017 | width: 38px;
1018 | height: 38px;
1019 | left: 0;
1020 | border-radius: 50%;
1021 | z-index: 2;
1022 | box-shadow: 0 0 5px #0002;
1023 | transition: 0.2s ease-in;
1024 | }
1025 | .toggle input[type="checkbox"]:hover + label:after {
1026 | box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
1027 | }
1028 | .toggle input[type="checkbox"]:checked + label:before {
1029 | background: #77C2BB;
1030 | }
1031 | .toggle input[type="checkbox"]:checked + label:after {
1032 | background: #009688;
1033 | left: 40px;
1034 | }
1035 | `,
1036 | },
1037 | {
1038 | id: "modelxlB1",
1039 | css: `.toggle {
1040 | position: relative;
1041 | box-sizing: border-box;
1042 | }
1043 | .toggle input[type="checkbox"] {
1044 | position: absolute;
1045 | left: 0;
1046 | top: 0;
1047 | z-index: 10;
1048 | width: 100%;
1049 | height: 100%;
1050 | cursor: pointer;
1051 | opacity: 0;
1052 | }
1053 | .toggle label {
1054 | position: relative;
1055 | display: flex;
1056 | align-items: center;
1057 | box-sizing: border-box;
1058 | }
1059 | .toggle label:before {
1060 | content: '';
1061 | width: 56px;
1062 | height: 22px;
1063 | background: #ccc;
1064 | box-shadow: inset 0 0 0 0px #13bf11;
1065 | position: relative;
1066 | display: inline-block;
1067 | border-radius: 20px;
1068 | box-sizing: border-box;
1069 | transition: 0.2s ease-in;
1070 | }
1071 | .toggle label:after {
1072 | content: '';
1073 | position: absolute;
1074 | width: 30px;
1075 | height: 30px;
1076 | border-radius: 50%;
1077 | left: 0;
1078 | top: -4px;
1079 | z-index: 2;
1080 | background: #fff;
1081 | box-shadow: 0 1px 10px #0005;
1082 | box-sizing: border-box;
1083 | transition: 0.2s ease-in;
1084 | }
1085 | .toggle input[type="checkbox"]:checked + label:before {
1086 | box-shadow: inset 40px 0 0 #13bf11;
1087 | }
1088 | .toggle input[type="checkbox"]:checked + label:after {
1089 | left: 26px;
1090 | }
1091 | `,
1092 | },
1093 | {
1094 | id: "model11",
1095 | css: `.toggle {
1096 | position: relative;
1097 | }
1098 | .toggle input[type="checkbox"] {
1099 | position: absolute;
1100 | left: 0;
1101 | top: 0;
1102 | z-index: 10;
1103 | width: 100%;
1104 | height: 100%;
1105 | cursor: pointer;
1106 | opacity: 0;
1107 | }
1108 | .toggle label {
1109 | position: relative;
1110 | display: flex;
1111 | align-items: center;
1112 | }
1113 | .toggle label:before {
1114 | content: '';
1115 | background: #bbb;
1116 | height: 15px;
1117 | width: 85px;
1118 | position: relative;
1119 | display: inline-block;
1120 | border-radius: 46px;
1121 | transition: 0.2s ease-in;
1122 | }
1123 | .toggle label:after {
1124 | content: '';
1125 | position: absolute;
1126 | background: #fff;
1127 | top: -12px;
1128 | width: 36px;
1129 | height: 36px;
1130 | left: 0;
1131 | border-radius: 50%;
1132 | z-index: 2;
1133 | box-shadow: 0 0 5px #0002;
1134 | transition: 0.2s ease-in;
1135 | }
1136 | .toggle input[type="checkbox"]:hover + label:after {
1137 | box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
1138 | }
1139 | .toggle input[type="checkbox"]:checked + label:before {
1140 | background: #77C2BB;
1141 | }
1142 | .toggle input[type="checkbox"]:checked + label:after {
1143 | background: #009688;
1144 | left: 50px;
1145 | }
1146 | `,
1147 | },
1148 | {
1149 | id: "model12",
1150 | css: `.toggle {
1151 | position: relative;
1152 | height: 32px;
1153 | display: flex;
1154 | align-items: center;
1155 | }
1156 | .toggle input[type="checkbox"] {
1157 | position: absolute;
1158 | left: 0;
1159 | top: 0;
1160 | z-index: 10;
1161 | width: 100%;
1162 | height: 100%;
1163 | cursor: pointer;
1164 | opacity: 0;
1165 | }
1166 | .toggle label {
1167 | position: relative;
1168 | display: flex;
1169 | align-items: center;
1170 | }
1171 | .toggle label:before {
1172 | content: '';
1173 | background: #bbb;
1174 | height: 2px;
1175 | width: 60px;
1176 | position: relative;
1177 | display: inline-block;
1178 | border-radius: 46px;
1179 | transition: 0.2s ease-in;
1180 | }
1181 | .toggle label:after {
1182 | content: '';
1183 | position: absolute;
1184 | background: #bbb;
1185 | top: -16px;
1186 | width: 32px;
1187 | height: 32px;
1188 | left: 0;
1189 | border-radius: 50%;
1190 | z-index: 2;
1191 | box-shadow: 0 0 5px #0002;
1192 | transition: 0.2s ease-in;
1193 | }
1194 | .toggle input[type="checkbox"]:hover + label:after {
1195 | box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
1196 | }
1197 | .toggle input[type="checkbox"]:checked + label:before {
1198 | background: #77C2BB;
1199 | }
1200 | .toggle input[type="checkbox"]:checked + label:after {
1201 | background: #009688;
1202 | left: 28px;
1203 | }
1204 | `,
1205 | },
1206 |
1207 | {
1208 | id: "modelX17",
1209 | css: `.toggle {
1210 | position: relative;
1211 | height: 32px;
1212 | display: flex;
1213 | align-items: center;
1214 | box-sizing:border-box;
1215 | }
1216 | .toggle input[type="checkbox"] {
1217 | position: absolute;
1218 | left: 0;
1219 | top: 0;
1220 | z-index: 10;
1221 | width: 100%;
1222 | height: 100%;
1223 | cursor: pointer;
1224 | opacity: 0;
1225 | }
1226 | .toggle label {
1227 | position: relative;
1228 | display: flex;
1229 | align-items: center;
1230 | box-sizing:border-box;
1231 | }
1232 | .toggle label:before {
1233 | content: '';
1234 | background: #bbb;
1235 | height: 2px;
1236 | width: 64px;
1237 | position: relative;
1238 | display: inline-block;
1239 | box-sizing:border-box;
1240 | transition: 0.2s ease-in;
1241 | }
1242 | .toggle label:after {
1243 | content: '';
1244 | position: absolute;
1245 | background: #fff;
1246 | border: 8px solid #bbb;
1247 | top: -14px;
1248 | width: 28px;
1249 | height: 28px;
1250 | left: 0;
1251 | border-radius: 50%;
1252 | z-index: 2;
1253 | box-sizing:border-box;
1254 | box-shadow: 0 0 5px #0002;
1255 | transition: 0.2s ease-in;
1256 | }
1257 | .toggle input[type="checkbox"]:hover + label:after {
1258 | box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
1259 | }
1260 | .toggle input[type="checkbox"]:checked + label:before {
1261 | background: #77C2BB;
1262 | }
1263 | .toggle input[type="checkbox"]:checked + label:after {
1264 | border-color: #009688;
1265 | left: 36px;
1266 | }
1267 | `,
1268 | },
1269 | {
1270 | id: "modelLn12",
1271 | css: `.toggle {
1272 | position: relative;
1273 | height: 32px;
1274 | display: flex;
1275 | align-items: center;
1276 | box-sizing:border-box;
1277 | }
1278 | .toggle input[type="checkbox"] {
1279 | position: absolute;
1280 | left: 0;
1281 | top: 0;
1282 | z-index: 10;
1283 | width: 100%;
1284 | height: 100%;
1285 | cursor: pointer;
1286 | opacity: 0;
1287 | }
1288 | .toggle label {
1289 | position: relative;
1290 | display: flex;
1291 | height: 100%;
1292 | align-items: center;
1293 | box-sizing:border-box;
1294 | }
1295 | .toggle label:before {
1296 | content: '';
1297 | background: #bbb;
1298 | border-radius: 4px;
1299 | height: 5px;
1300 | width: 64px;
1301 | position: relative;
1302 | display: inline-block;
1303 | box-sizing:border-box;
1304 | transition: 0.2s ease-in;
1305 | }
1306 | .toggle label:after {
1307 | content: '';
1308 | position: absolute;
1309 | background: #fff;
1310 | top: 0;
1311 | left: 0;
1312 | width: 32px;
1313 | height: 32px;
1314 | border-radius: 50%;
1315 | z-index: 2;
1316 | box-sizing:border-box;
1317 | box-shadow: inset 0 0 0 4px #bbb, 0 0 0 5px #FFF;
1318 | transition: 0.2s ease-in;
1319 | }
1320 | .toggle input[type="checkbox"]:checked + label:before {
1321 | background: #77C2BB;
1322 | }
1323 | .toggle input[type="checkbox"]:checked + label:after {
1324 | box-shadow: inset 0 0 0 20px #009688, 0 0 0 5px #FFF;
1325 | border-color: #009688;
1326 | left: 36px;
1327 | }
1328 | `,
1329 | },
1330 | {
1331 | id: "modelX18",
1332 | css: `.toggle {
1333 | position: relative;
1334 | height: 32px;
1335 | display: flex;
1336 | align-items: center;
1337 | box-sizing:border-box;
1338 | }
1339 | .toggle input[type="checkbox"] {
1340 | position: absolute;
1341 | left: 0;
1342 | top: 0;
1343 | z-index: 10;
1344 | width: 100%;
1345 | height: 100%;
1346 | cursor: pointer;
1347 | opacity: 0;
1348 | }
1349 | .toggle label {
1350 | position: relative;
1351 | display: flex;
1352 | height: 100%;
1353 | align-items: center;
1354 | box-sizing:border-box;
1355 | }
1356 | .toggle label:before {
1357 | content: '';
1358 | background: #bbb;
1359 | height: 2px;
1360 | width: 64px;
1361 | position: relative;
1362 | display: inline-block;
1363 | box-sizing:border-box;
1364 | transition: 0.2s ease-in;
1365 | }
1366 | .toggle label:after {
1367 | content: '';
1368 | position: absolute;
1369 | background: #fff;
1370 | border: 6px solid #bbb;
1371 | top: 5px;
1372 | width: 22px;
1373 | height: 22px;
1374 | left: 0;
1375 | z-index: 2;
1376 | box-sizing:border-box;
1377 | box-shadow: 0 0 5px #0002;
1378 | transition: 0.2s ease-in;
1379 | }
1380 | .toggle input[type="checkbox"]:hover + label:after {
1381 | box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
1382 | }
1383 | .toggle input[type="checkbox"]:checked + label:before {
1384 | background: #77C2BB;
1385 | }
1386 | .toggle input[type="checkbox"]:checked + label:after {
1387 | border-color: #009688;
1388 | left: 42px;
1389 | }
1390 | `,
1391 | },
1392 | {
1393 | id: "modelSql1",
1394 | css: `.toggle {
1395 | position: relative;
1396 | height: 32px;
1397 | display: flex;
1398 | align-items: center;
1399 | box-sizing:border-box;
1400 | }
1401 | .toggle input[type="checkbox"] {
1402 | position: absolute;
1403 | left: 0;
1404 | top: 0;
1405 | z-index: 10;
1406 | width: 100%;
1407 | height: 100%;
1408 | cursor: pointer;
1409 | opacity: 0;
1410 | }
1411 | .toggle label {
1412 | position: relative;
1413 | display: flex;
1414 | height: 100%;
1415 | align-items: center;
1416 | box-sizing:border-box;
1417 | }
1418 | .toggle label:before {
1419 | content: '';
1420 | background: #bbb;
1421 | height: 2px;
1422 | width: 64px;
1423 | position: relative;
1424 | display: inline-block;
1425 | box-sizing:border-box;
1426 | transition: 0.2s ease-in;
1427 | }
1428 | .toggle label:after {
1429 | content: '';
1430 | position: absolute;
1431 | background: #fff;
1432 | border: 6px solid #bbb;
1433 | top: 5px;
1434 | width: 22px;
1435 | height: 22px;
1436 | left: 0;
1437 | z-index: 2;
1438 | transform:rotate(45deg);
1439 | box-sizing:border-box;
1440 | box-shadow: 0 0 5px #0002;
1441 | transition: 0.2s ease-in;
1442 | }
1443 | .toggle input[type="checkbox"]:hover + label:after {
1444 | box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
1445 | }
1446 | .toggle input[type="checkbox"]:checked + label:before {
1447 | background: #77C2BB;
1448 | }
1449 | .toggle input[type="checkbox"]:checked + label:after {
1450 | border-color: #009688;
1451 | left: 42px;
1452 | }
1453 | `,
1454 | },
1455 | {
1456 | id: "modelSql2",
1457 | css: `.toggle {
1458 | position: relative;
1459 | height: 32px;
1460 | display: flex;
1461 | align-items: center;
1462 | box-sizing:border-box;
1463 | }
1464 | .toggle input[type="checkbox"] {
1465 | position: absolute;
1466 | left: 0;
1467 | top: 0;
1468 | z-index: 10;
1469 | width: 100%;
1470 | height: 100%;
1471 | cursor: pointer;
1472 | opacity: 0;
1473 | }
1474 | .toggle label {
1475 | position: relative;
1476 | display: flex;
1477 | height: 100%;
1478 | align-items: center;
1479 | box-sizing:border-box;
1480 | }
1481 | .toggle label:before {
1482 | content: '';
1483 | background: #bbb;
1484 | height: 30px;
1485 | width: 64px;
1486 | position: relative;
1487 | display: inline-block;
1488 | box-sizing:border-box;
1489 | transition: 0.2s ease-in;
1490 | }
1491 | .toggle label:after {
1492 | content: '';
1493 | position: absolute;
1494 | background: #fff;
1495 | top: 5px;
1496 | width: 22px;
1497 | height: 22px;
1498 | left: 4px;
1499 | z-index: 2;
1500 | box-sizing:border-box;
1501 | box-shadow: 0 0 5px #0002;
1502 | transition: 0.2s ease-in;
1503 | }
1504 | .toggle input[type="checkbox"]:hover + label:after {
1505 | box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
1506 | }
1507 | .toggle input[type="checkbox"]:checked + label:before {
1508 | background: #77C2BB;
1509 | }
1510 | .toggle input[type="checkbox"]:checked + label:after {
1511 | background-color: #009688;
1512 | left: 38px;
1513 | }
1514 | `,
1515 | },
1516 | {
1517 | id: "modelSql3",
1518 | css: `.toggle {
1519 | position: relative;
1520 | height: 32px;
1521 | display: flex;
1522 | align-items: center;
1523 | box-sizing:border-box;
1524 | }
1525 | .toggle input[type="checkbox"] {
1526 | position: absolute;
1527 | left: 0;
1528 | top: 0;
1529 | z-index: 10;
1530 | width: 100%;
1531 | height: 100%;
1532 | cursor: pointer;
1533 | opacity: 0;
1534 | }
1535 | .toggle label {
1536 | position: relative;
1537 | display: flex;
1538 | height: 100%;
1539 | align-items: center;
1540 | box-sizing:border-box;
1541 | }
1542 | .toggle label:before {
1543 | content: '';
1544 | background: #bbb;
1545 | height: 20px;
1546 | width: 64px;
1547 | position: relative;
1548 | display: inline-block;
1549 | box-sizing:border-box;
1550 | transition: 0.2s ease-in;
1551 | }
1552 | .toggle label:after {
1553 | content: '';
1554 | position: absolute;
1555 | border: 2px solid #ddd;
1556 | background: #fff;
1557 | top: 0;
1558 | width: 32px;
1559 | height: 32px;
1560 | left: 0;
1561 | z-index: 2;
1562 | box-sizing:border-box;
1563 | box-shadow: 0 0 5px #0002;
1564 | transition: 0.2s ease-in;
1565 | }
1566 | .toggle input[type="checkbox"]:hover + label:after {
1567 | box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
1568 | }
1569 | .toggle input[type="checkbox"]:checked + label:before {
1570 | background: #77C2BB;
1571 | }
1572 | .toggle input[type="checkbox"]:checked + label:after {
1573 | border-color: #188e75 ;
1574 | background-color: #009688;
1575 | left: 38px;
1576 | }
1577 | `,
1578 | },
1579 | {
1580 | id: "modelSql4",
1581 | css: `.toggle {
1582 | position: relative;
1583 | height: 32px;
1584 | display: flex;
1585 | align-items: center;
1586 | box-sizing:border-box;
1587 | }
1588 | .toggle input[type="checkbox"] {
1589 | position: absolute;
1590 | left: 0;
1591 | top: 0;
1592 | z-index: 10;
1593 | width: 100%;
1594 | height: 100%;
1595 | cursor: pointer;
1596 | opacity: 0;
1597 | }
1598 | .toggle label {
1599 | position: relative;
1600 | display: flex;
1601 | height: 100%;
1602 | align-items: center;
1603 | box-sizing:border-box;
1604 | }
1605 | .toggle label:before {
1606 | content: '';
1607 | background: #bbb;
1608 | height: 20px;
1609 | width: 74px;
1610 | position: relative;
1611 | display: inline-block;
1612 | box-shadow: inset 0 0.1em 0.03em rgb(0 0 0 / 20%), inset 0 0.1em 0.3em rgb(0 0 0 / 30%), 0 0 2em rgb(255 255 255 / 60%);
1613 | box-sizing:border-box;
1614 | transition: 0.2s ease-in;
1615 | }
1616 | .toggle label:after {
1617 | content: '';
1618 | position: absolute;
1619 | top: -2px;
1620 | width: 32px;
1621 | height: 32px;
1622 | left: 0;
1623 | z-index: 2;
1624 | box-sizing:border-box;
1625 | background: #5b5656;
1626 | border-bottom: 0.07em solid #756f6f;
1627 | box-shadow: 0 0.16em 0.01em #343131, 0 0.12em 0.3em rgb(52 49 49 / 60%), 0 0.12em 2em rgb(0 0 0 / 30%), 0.12em 0.15em 0.2em rgb(0 0 0 / 20%);
1628 | transition: 0.2s ease-in;
1629 | }
1630 | .toggle input[type="checkbox"]:checked + label:before {
1631 | background: #77C2BB;
1632 | }
1633 | .toggle input[type="checkbox"]:checked + label:after {
1634 | background: #21bf73;
1635 | border-bottom: 0.07em solid #37dc8d;
1636 | box-shadow: 0 0.16em 0.01em #167e4c, 0 0.12em 0.3em rgb(22 126 76 / 60%), 0 0.12em 2em rgb(0 0 0 / 30%), -0.12em 0.15em 0.2em rgb(0 0 0 / 20%);
1637 | left: 42px;
1638 | }
1639 | `,
1640 | },
1641 | {
1642 | id: "modelSql5",
1643 | css: `.toggle {
1644 | position: relative;
1645 | height: 32px;
1646 | display: flex;
1647 | align-items: center;
1648 | box-sizing:border-box;
1649 | }
1650 | .toggle input[type="checkbox"] {
1651 | position: absolute;
1652 | left: 0;
1653 | top: 0;
1654 | z-index: 10;
1655 | width: 100%;
1656 | height: 100%;
1657 | cursor: pointer;
1658 | opacity: 0;
1659 | }
1660 | .toggle label {
1661 | position: relative;
1662 | display: flex;
1663 | height: 100%;
1664 | align-items: center;
1665 | box-sizing:border-box;
1666 | }
1667 | .toggle label:before {
1668 | content: '';
1669 | background: #bbb;
1670 | height: 32px;
1671 | width: 74px;
1672 | position: relative;
1673 | display: inline-block;
1674 | border-radius: 16px;
1675 | box-shadow: inset 0 0.1em 0.03em rgb(0 0 0 / 20%), inset 0 0.1em 0.3em rgb(0 0 0 / 30%), 0 0 2em rgb(255 255 255 / 60%);
1676 | box-sizing:border-box;
1677 | transition: .5s cubic-bezier(0.52, -0.41, 0.55, 1.46);
1678 | }
1679 | .toggle label:after {
1680 | content: '';
1681 | position: absolute;
1682 | top: 4px;
1683 | left: 4px;
1684 | width: 22px;
1685 | height: 22px;
1686 | border-radius: 16px;
1687 | z-index: 2;
1688 | box-sizing:border-box;
1689 | background: #5b5656;
1690 | border-left: 0.07em solid #756f6f;
1691 | border-bottom: 0.07em solid #756f6f;
1692 | box-shadow: 0 0.16em 0.01em #343131, 0 0.12em 0.3em rgb(52 49 49 / 60%), 0 0.12em 2em rgb(0 0 0 / 30%), 0.12em 0.15em 0.2em rgb(0 0 0 / 20%);
1693 | transition: .5s cubic-bezier(0.52, -0.41, 0.55, 1.46);
1694 | }
1695 |
1696 | .toggle input[type="checkbox"]:checked + label:before {
1697 | background: #c0e7e3;
1698 | }
1699 | .toggle input[type="checkbox"]:checked + label:after {
1700 | background: #21bf73;
1701 | border-left: none;
1702 | border-right: 0.07em solid #37dc8d;
1703 | border-bottom: 0.07em solid #37dc8d;
1704 | box-shadow: 0 0.16em 0.01em #167e4c, 0 0.12em 0.3em rgb(22 126 76 / 60%), 0 0.12em 2em rgb(0 0 0 / 30%), -0.12em 0.15em 0.2em rgb(0 0 0 / 20%);
1705 | left: 48px;
1706 | }
1707 | `,
1708 | },
1709 | {
1710 | id: "modelSql6",
1711 | css: `.toggle {
1712 | position: relative;
1713 | height: 32px;
1714 | display: flex;
1715 | align-items: center;
1716 | box-sizing:border-box;
1717 | }
1718 | .toggle input[type="checkbox"] {
1719 | position: absolute;
1720 | left: 0;
1721 | top: 0;
1722 | z-index: 10;
1723 | width: 100%;
1724 | height: 100%;
1725 | cursor: pointer;
1726 | opacity: 0;
1727 | }
1728 | .toggle label {
1729 | position: relative;
1730 | display: flex;
1731 | height: 100%;
1732 | align-items: center;
1733 | box-sizing:border-box;
1734 | }
1735 | .toggle label:before {
1736 | content: '';
1737 | background: #bbb;
1738 | height: 32px;
1739 | width: 74px;
1740 | position: relative;
1741 | display: inline-block;
1742 | box-shadow: inset 0 0.1em 0.03em rgb(0 0 0 / 20%), inset 0 0.1em 0.3em rgb(0 0 0 / 30%), 0 0 2em rgb(255 255 255 / 60%);
1743 | box-sizing:border-box;
1744 | transition: 0.2s ease-in;
1745 | }
1746 | .toggle label:after {
1747 | content: '';
1748 | position: absolute;
1749 | top: 4px;
1750 | left: 4px;
1751 | width: 22px;
1752 | height: 22px;
1753 | z-index: 2;
1754 | box-sizing:border-box;
1755 | background: #5b5656;
1756 | border-left: 0.07em solid #756f6f;
1757 | border-bottom: 0.07em solid #756f6f;
1758 | box-shadow: 0 0.16em 0.01em #343131, 0 0.12em 0.3em rgb(52 49 49 / 60%), 0 0.12em 2em rgb(0 0 0 / 30%), 0.12em 0.15em 0.2em rgb(0 0 0 / 20%);
1759 | transition: .5s cubic-bezier(0.52, -0.41, 0.55, 1.46);
1760 | }
1761 |
1762 | .toggle input[type="checkbox"]:checked + label:before {
1763 | background: #c0e7e3;
1764 | }
1765 | .toggle input[type="checkbox"]:checked + label:after {
1766 | background: #21bf73;
1767 | border-left: none;
1768 | border-right: 0.07em solid #37dc8d;
1769 | border-bottom: 0.07em solid #37dc8d;
1770 | box-shadow: 0 0.16em 0.01em #167e4c, 0 0.12em 0.3em rgb(22 126 76 / 60%), 0 0.12em 2em rgb(0 0 0 / 30%), -0.12em 0.15em 0.2em rgb(0 0 0 / 20%);
1771 | transform: translatex(44px);
1772 | }
1773 | `,
1774 | },
1775 | {
1776 | id: "modelvdsdX3",
1777 | css: `.toggle {
1778 | position: relative;
1779 | height: 32px;
1780 | display: flex;
1781 | align-items: center;
1782 | box-sizing:border-box;
1783 | }
1784 | .toggle input[type="checkbox"] {
1785 | position: absolute;
1786 | left: 0;
1787 | top: 0;
1788 | z-index: 10;
1789 | width: 100%;
1790 | height: 100%;
1791 | cursor: pointer;
1792 | opacity: 0;
1793 | }
1794 | .toggle label {
1795 | position: relative;
1796 | display: flex;
1797 | height: 100%;
1798 | align-items: center;
1799 | box-sizing:border-box;
1800 | }
1801 | .toggle label:before {
1802 | content: '';
1803 | background: #bbb;
1804 | height: 32px;
1805 | width: 68px;
1806 | position: relative;
1807 | display: inline-block;
1808 | box-sizing:border-box;
1809 | clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 76% 100%, 25% 100%, 0% 50%);
1810 | box-shadow: 0 0 10px #0001 inset, 8px 0 10px #0001 inset, -8px 0 10px #0001 inset;
1811 | transition: 0.2s ease-in;
1812 | }
1813 | .toggle label:after {
1814 | content: '';
1815 | position: absolute;
1816 | background: #fff;
1817 | top: 5px;
1818 | width: 22px;
1819 | height: 22px;
1820 | left: 8px;
1821 | z-index: 2;
1822 | transform: rotate(45deg);
1823 | box-sizing:border-box;
1824 | box-shadow: 0 0 5px #0002;
1825 | transition: 0.2s ease-in;
1826 | }
1827 | .toggle input[type="checkbox"]:hover + label:after {
1828 | box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
1829 | }
1830 | .toggle input[type="checkbox"]:checked + label:before {
1831 | background: #77C2BB;
1832 | }
1833 | .toggle input[type="checkbox"]:checked + label:after {
1834 | background-color: #009688;
1835 | left: 38px;
1836 | }
1837 | `,
1838 | },
1839 | {
1840 | id: "modelvdsX1",
1841 | css: `.toggle {
1842 | position: relative;
1843 | height: 38px;
1844 | display: flex;
1845 | align-items: center;
1846 | box-sizing:border-box;
1847 | }
1848 | .toggle input[type="checkbox"] {
1849 | position: absolute;
1850 | left: 0;
1851 | top: 0;
1852 | z-index: 10;
1853 | width: 100%;
1854 | height: 100%;
1855 | cursor: pointer;
1856 | opacity: 0;
1857 | }
1858 | .toggle label {
1859 | position: relative;
1860 | display: flex;
1861 | height: 100%;
1862 | align-items: center;
1863 | box-sizing:border-box;
1864 | }
1865 | .toggle label:before {
1866 | content: '';
1867 | background: #bbb;
1868 | height: 40px;
1869 | width: 84px;
1870 | border-radius: 30px;
1871 | position: relative;
1872 | display: inline-block;
1873 | box-shadow: inset 0 0.1em 0.03em rgb(0 0 0 / 20%), inset 0 0.1em 0.3em rgb(0 0 0 / 30%), 0 0 2em rgb(255 255 255 / 60%);
1874 | box-sizing:border-box;
1875 | transition: 0.2s ease-in;
1876 | }
1877 | .toggle label:after {
1878 | content: '';
1879 | position: absolute;
1880 | top: 7px;
1881 | left: 10px;
1882 | width: 22px;
1883 | height: 22px;
1884 | transform: rotate(45deg);
1885 | z-index: 2;
1886 | box-sizing:border-box;
1887 | background: #5b5656;
1888 | border-left: 0.07em solid #756f6f;
1889 | border-bottom: 0.07em solid #756f6f;
1890 | box-shadow: 0 0.16em 0.01em #343131, 0 0.12em 0.3em rgb(52 49 49 / 60%), 0 0.12em 2em rgb(0 0 0 / 30%), 0.12em 0.15em 0.2em rgb(0 0 0 / 20%);
1891 | transition: .5s cubic-bezier(0.52, -0.41, 0.55, 1.46);
1892 | }
1893 | .toggle input[type="checkbox"]:checked + label:before {
1894 | background: #c0e7e3;
1895 | }
1896 | .toggle input[type="checkbox"]:checked + label:after {
1897 | background: #21bf73;
1898 | border-left: none;
1899 | border-right: 0.07em solid #37dc8d;
1900 | border-bottom: 0.07em solid #37dc8d;
1901 | box-shadow: 0 0.16em 0.01em #167e4c, 0 0.12em 0.3em rgb(22 126 76 / 60%), 0 0.12em 2em rgb(0 0 0 / 30%), -0.12em 0.15em 0.2em rgb(0 0 0 / 20%);
1902 | transform: translatex(44px) rotate(45deg);
1903 | }
1904 | `,
1905 | },
1906 | {
1907 | id: "modelBX1",
1908 | css: `.toggle {
1909 | position: relative;
1910 | }
1911 | .toggle input[type="checkbox"] {
1912 | position: absolute;
1913 | left: 0;
1914 | top: 0;
1915 | z-index: 10;
1916 | width: 100%;
1917 | height: 100%;
1918 | cursor: pointer;
1919 | opacity: 0;
1920 | }
1921 | .toggle label {
1922 | position: relative;
1923 | display: flex;
1924 | align-items: center;
1925 | }
1926 | .toggle label:before {
1927 | content: '';
1928 | border-radius: 10px;
1929 | width: 84px;
1930 | height: 42px;
1931 | background: #ccc;
1932 | position: relative;
1933 | display: inline-block;
1934 | transition: 0.2s ease-in;
1935 | }
1936 | .toggle label:after {
1937 | content: '';
1938 | position: absolute;
1939 | border-radius: 10px;
1940 | width: 42px;
1941 | height: 42px;
1942 | left: 0;
1943 | top: 0;
1944 | z-index: 2;
1945 | background: #fff;
1946 | box-shadow: 0 0 5px #0002;
1947 | transition: 0.2s ease-in;
1948 | }
1949 | .toggle input[type="checkbox"]:hover + label:after {
1950 | box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
1951 | }
1952 | .toggle input[type="checkbox"]:checked + label:before {
1953 | box-shadow:inset 42px 0 #77C2BB;
1954 | }
1955 | .toggle input[type="checkbox"]:checked + label:after {
1956 | transform: translatex(42px);
1957 | }
1958 | `,
1959 | },
1960 | {
1961 | id: "modelBX2",
1962 | css: `.toggle {
1963 | position: relative;
1964 | }
1965 | .toggle input[type="checkbox"] {
1966 | position: absolute;
1967 | left: 0;
1968 | top: 0;
1969 | z-index: 10;
1970 | width: 100%;
1971 | height: 100%;
1972 | cursor: pointer;
1973 | opacity: 0;
1974 | }
1975 | .toggle label {
1976 | position: relative;
1977 | display: flex;
1978 | align-items: center;
1979 | }
1980 | .toggle label:before {
1981 | content: '';
1982 | width: 84px;
1983 | height: 42px;
1984 | background: #888;
1985 | position: relative;
1986 | display: inline-block;
1987 | box-shadow: inset 0 0.1em 0.03em rgb(0 0 0 / 20%),
1988 | inset 0 0.1em 0.3em rgb(0 0 0 / 30%),
1989 | 0 0 2em rgb(255 255 255 / 60%),
1990 | inset 0 0 #66BB6A;
1991 | transition: 0.2s ease-in;
1992 | }
1993 | .toggle label:after {
1994 | content: '';
1995 | position: absolute;
1996 | width: 42px;
1997 | height: 42px;
1998 | left: 0;
1999 | top: 0;
2000 | z-index: 2;
2001 | background: #fefefe;
2002 | box-shadow: 0 0 5px #0002;
2003 | transition: 0.2s ease-in;
2004 | }
2005 | .toggle input[type="checkbox"]:hover + label:after {
2006 | box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
2007 | }
2008 | .toggle input[type="checkbox"]:checked + label:before {
2009 | box-shadow: inset 0 0.1em 0.03em rgb(0 0 0 / 20%),
2010 | inset 0 0.1em 0.3em rgb(0 0 0 / 30%),
2011 | 0 0 2em rgb(255 255 255 / 60%),
2012 | inset 42px 0 #66BB6A;
2013 | }
2014 | .toggle input[type="checkbox"]:checked + label:after {
2015 | transform: translatex(42px);
2016 | }
2017 | `,
2018 | },
2019 | {
2020 | id: "modelBX3",
2021 | css: `.toggle {
2022 | position: relative;
2023 | }
2024 | .toggle input[type="checkbox"] {
2025 | position: absolute;
2026 | left: 0;
2027 | top: 0;
2028 | z-index: 10;
2029 | width: 100%;
2030 | height: 100%;
2031 | cursor: pointer;
2032 | opacity: 0;
2033 | }
2034 | .toggle label {
2035 | position: relative;
2036 | display: flex;
2037 | align-items: center;
2038 | }
2039 | .toggle label:before {
2040 | content: '';
2041 | width: 84px;
2042 | height: 42px;
2043 | background: #EF5350;
2044 | position: relative;
2045 | display: inline-block;
2046 | box-shadow: inset 0 0.1em 0.03em rgb(0 0 0 / 20%),
2047 | inset 0 0.1em 0.3em rgb(0 0 0 / 30%),
2048 | 0 0 2em rgb(255 255 255 / 60%),
2049 | inset 0 0 #66BB6A;
2050 | transition: 0.2s ease-in;
2051 | }
2052 | .toggle label:after {
2053 | content: '';
2054 | position: absolute;
2055 | width: 36px;
2056 | height: 36px;
2057 | left: 3px;
2058 | top: 3px;
2059 | z-index: 2;
2060 | background: #fefefe;
2061 | box-shadow: 0 2px 5px #0002;
2062 | transition: 0.2s ease-in;
2063 | }
2064 | .toggle input[type="checkbox"]:hover + label:after {
2065 | box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
2066 | }
2067 | .toggle input[type="checkbox"]:checked + label:before {
2068 | box-shadow: inset 0 0.1em 0.03em rgb(0 0 0 / 20%),
2069 | inset 0 0.1em 0.3em rgb(0 0 0 / 30%),
2070 | 0 0 2em rgb(255 255 255 / 60%),
2071 | inset 84px 0 #66BB6A;
2072 | }
2073 | .toggle input[type="checkbox"]:checked + label:after {
2074 | transform: translatex(42px);
2075 | }
2076 | `,
2077 | },
2078 | {
2079 | id: "modelBX4",
2080 | css: `.toggle {
2081 | position: relative;
2082 | height: 32px;
2083 | display: flex;
2084 | align-items: center;
2085 | box-sizing:border-box;
2086 | }
2087 | .toggle input[type="checkbox"] {
2088 | position: absolute;
2089 | left: 0;
2090 | top: 0;
2091 | z-index: 10;
2092 | width: 100%;
2093 | height: 100%;
2094 | cursor: pointer;
2095 | opacity: 0;
2096 | }
2097 | .toggle label {
2098 | position: relative;
2099 | display: flex;
2100 | height: 100%;
2101 | align-items: center;
2102 | box-sizing:border-box;
2103 | }
2104 | .toggle label:before {
2105 | content: '';
2106 | background: #bbb;
2107 | height: 2px;
2108 | width: 64px;
2109 | position: relative;
2110 | display: inline-block;
2111 | box-sizing:border-box;
2112 | transition: 0.2s ease-in;
2113 | }
2114 | .toggle label:after {
2115 | content: '';
2116 | position: absolute;
2117 | background: #fff;
2118 | border: 2px solid #bbb;
2119 | top: 3px;
2120 | width: 24px;
2121 | height: 24px;
2122 | left: 0;
2123 | z-index: 2;
2124 | border-radius: 4px;
2125 | box-sizing:border-box;
2126 | box-shadow: 0 0 5px #0002;
2127 | transition: 0.2s ease-in;
2128 | }
2129 | .toggle input[type="checkbox"]:hover + label:after {
2130 | box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
2131 | }
2132 | .toggle input[type="checkbox"]:checked + label:before {
2133 | background: #00C853;
2134 | }
2135 | .toggle input[type="checkbox"]:checked + label:after {
2136 | border-color: #00C853;
2137 | left: 40px;
2138 | }
2139 | `,
2140 | },
2141 | {
2142 | id: "modelBX5",
2143 | css: `.toggle {
2144 | position: relative;
2145 | }
2146 | .toggle input[type="checkbox"] {
2147 | position: absolute;
2148 | left: 0;
2149 | top: 0;
2150 | z-index: 10;
2151 | width: 100%;
2152 | height: 100%;
2153 | cursor: pointer;
2154 | opacity: 0;
2155 | }
2156 | .toggle label {
2157 | position: relative;
2158 | display: flex;
2159 | align-items: center;
2160 | }
2161 | .toggle label:before {
2162 | content: '';
2163 | width: 72px;
2164 | height: 36px;
2165 | background: #b3c5ff;
2166 | position: relative;
2167 | border-radius: 4px;
2168 | display: inline-block;
2169 | box-shadow: inset 0 0 #66BB6A;
2170 | transition: 0.2s ease-in;
2171 | }
2172 | .toggle label:after {
2173 | content: '';
2174 | position: absolute;
2175 | border-radius: 4px;
2176 | width: 32px;
2177 | height: 32px;
2178 | left: 2px;
2179 | top: 2px;
2180 | z-index: 2;
2181 | background: #fefefe;
2182 | transition: 0.2s ease-in;
2183 | }
2184 | .toggle input[type="checkbox"]:checked + label:before {
2185 | box-shadow: inset 84px 0 #215aff;
2186 | }
2187 | .toggle input[type="checkbox"]:checked + label:after {
2188 | transform: translatex(36px);
2189 | }
2190 | `,
2191 | },
2192 | {
2193 | id: "modelBX6",
2194 | css: `.toggle {
2195 | position: relative;
2196 | }
2197 | .toggle input[type="checkbox"] {
2198 | position: absolute;
2199 | left: 0;
2200 | top: 0;
2201 | z-index: 10;
2202 | width: 100%;
2203 | height: 100%;
2204 | cursor: pointer;
2205 | opacity: 0;
2206 | }
2207 | .toggle label {
2208 | position: relative;
2209 | display: flex;
2210 | align-items: center;
2211 | }
2212 | .toggle label:before {
2213 | content: '';
2214 | width: 64px;
2215 | height: 32px;
2216 | position: relative;
2217 | border-radius: 4px;
2218 | border: 2px solid #333;
2219 | background: #fff;
2220 | display: inline-block;
2221 | transition: 0.25s ease-in;
2222 | }
2223 | .toggle label:after {
2224 | content: '';
2225 | position: absolute;
2226 | border-radius: 4px;
2227 | background: #333;
2228 | width: 28px;
2229 | height: 28px;
2230 | left: 4px;
2231 | top: 4px;
2232 | z-index: 2;
2233 | transition: 0.2s ease-in;
2234 | }
2235 | .toggle input[type="checkbox"]:checked + label:before {
2236 | background: #333;
2237 | }
2238 | .toggle input[type="checkbox"]:checked + label:after {
2239 | background: #FFF;
2240 | transform: translatex(32px);
2241 | }
2242 | `,
2243 | },
2244 | {
2245 | id: "modelBX7",
2246 | css: `.toggle {
2247 | position: relative;
2248 | height: 40px;
2249 | display: flex;
2250 | align-items: center;
2251 | box-sizing:border-box;
2252 | }
2253 | .toggle input[type="checkbox"] {
2254 | position: absolute;
2255 | left: 0;
2256 | top: 0;
2257 | z-index: 10;
2258 | width: 100%;
2259 | height: 100%;
2260 | cursor: pointer;
2261 | opacity: 0;
2262 | }
2263 | .toggle label {
2264 | position: relative;
2265 | display: flex;
2266 | height: 100%;
2267 | align-items: center;
2268 | box-sizing:border-box;
2269 | }
2270 | .toggle label:before {
2271 | content: '';
2272 | display: inline-block;
2273 | width: 120px;
2274 | height: 40px;
2275 | border: 1px solid #808080;
2276 | border-radius: 50px;
2277 | transition: 0.2s ease-in;
2278 | background: #f08270;
2279 | box-shadow: inset 0 0 7px #333,
2280 | 0 -4px 4px #b9b9b5,
2281 | 0 4px 4px #f4f4f4,
2282 | inset 0 0 #49dccf;
2283 | }
2284 | .toggle label:after {
2285 | content: '';
2286 | position: absolute;
2287 | top: 0px;
2288 | left: 1px;
2289 | width: 55px;
2290 | height: 30px;
2291 | border: 5px solid #ededec;
2292 | border-radius: 50px;
2293 | box-shadow: 0 2px 5px #333;
2294 | background: #d5d4cd;
2295 | background: linear-gradient(#d5d4cd 0%, #f8f8f7 100%);
2296 | transition: 0.2s ease-in;
2297 | }
2298 | .toggle input[type="checkbox"]:checked + label:before {
2299 | box-shadow: inset 0 0 7px #333,
2300 | 0 -4px 4px #b9b9b5,
2301 | 0 4px 4px #f4f4f4,
2302 | inset 120px 0 #49dccf;
2303 | }
2304 | .toggle input[type="checkbox"]:checked + label:after {
2305 | transform: translatex(55px);
2306 | }
2307 | `,
2308 | },
2309 |
2310 |
2311 |
2312 | {
2313 | id: "model8",
2314 | css: `.toggle {
2315 | position: relative;
2316 | }
2317 | .toggle input[type="checkbox"] {
2318 | position: absolute;
2319 | left: 0;
2320 | top: 0;
2321 | z-index: 10;
2322 | width: 100%;
2323 | height: 100%;
2324 | cursor: pointer;
2325 | opacity: 0;
2326 | }
2327 | .toggle label {
2328 | position: relative;
2329 | display: flex;
2330 | align-items: center;
2331 | }
2332 | .toggle label:before {
2333 | content: '';
2334 | border-radius: 10px;
2335 | width: 95px;
2336 | height: 42px;
2337 | background: #ccc;
2338 | position: relative;
2339 | display: inline-block;
2340 | transition: 0.2s ease-in;
2341 | }
2342 | .toggle label:after {
2343 | content: '';
2344 | position: absolute;
2345 | border-radius: 10px;
2346 | width: 60px;
2347 | height: 42px;
2348 | left: 0;
2349 | top: 0;
2350 | z-index: 2;
2351 | background: #fff;
2352 | box-shadow: 0 0 5px #0002;
2353 | transition: 0.2s ease-in;
2354 | }
2355 | .toggle input[type="checkbox"]:hover + label:after {
2356 | box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
2357 | }
2358 | .toggle input[type="checkbox"]:checked + label:before {
2359 | background: #77C2BB;
2360 | }
2361 | .toggle input[type="checkbox"]:checked + label:after {
2362 | left: 35px;
2363 | }
2364 | `,
2365 | },
2366 | {
2367 | id: "modelxad9",
2368 | css: `.toggle {
2369 | position: relative;
2370 | }
2371 | .toggle input[type="checkbox"] {
2372 | position: absolute;
2373 | left: 0;
2374 | top: 0;
2375 | z-index: 10;
2376 | width: 100%;
2377 | height: 100%;
2378 | cursor: pointer;
2379 | opacity: 0;
2380 | }
2381 | .toggle label {
2382 | position: relative;
2383 | display: flex;
2384 | align-items: center;
2385 | }
2386 | .toggle label:before {
2387 | content: '';
2388 | width: 90px;
2389 | height: 32px;
2390 | border-radius: 20px;
2391 | background: #ccc;
2392 | position: relative;
2393 | display: inline-block;
2394 | transition: 0.2s ease-in;
2395 | }
2396 | .toggle label:after {
2397 | content: '';
2398 | position: absolute;
2399 | border-radius: 20px;
2400 | top: 0;
2401 | width: 50px;
2402 | height: 32px;
2403 | left: 0;
2404 | z-index: 2;
2405 | background: #fff;
2406 | box-shadow: 0 0 10px #0002;
2407 | transition: 0.2s ease-in;
2408 | }
2409 | .toggle input[type="checkbox"]:hover + label:after {
2410 | box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
2411 | }
2412 | .toggle input[type="checkbox"]:checked + label:before {
2413 | background: #77C2BB;
2414 | }
2415 | .toggle input[type="checkbox"]:checked + label:after {
2416 | left: 40px;
2417 | }
2418 | `,
2419 | },
2420 |
2421 | {
2422 | id: "modelDaVA1",
2423 | css: `.toggle {
2424 | position: relative;
2425 | }
2426 | .toggle input[type="checkbox"] {
2427 | position: absolute;
2428 | left: 0;
2429 | top: 0;
2430 | z-index: 10;
2431 | width: 100%;
2432 | height: 100%;
2433 | cursor: pointer;
2434 | opacity: 0;
2435 | }
2436 | .toggle label {
2437 | position: relative;
2438 | display: flex;
2439 | height: 42px;
2440 | align-items: center;
2441 | }
2442 | .toggle label:before {
2443 | content: '';
2444 | border-radius: 20px;
2445 | width: 84px;
2446 | height: 32px;
2447 | background: #ccc;
2448 | position: relative;
2449 | display: inline-block;
2450 | transition: 0.2s ease-in;
2451 | }
2452 | .toggle label:after {
2453 | content: '';
2454 | position: absolute;
2455 | border-radius: 10px;
2456 | width: 42px;
2457 | height: 42px;
2458 | left: 0;
2459 | top: 0;
2460 | z-index: 2;
2461 |
2462 | transform: rotate(45deg);
2463 | background: #fff;
2464 | box-shadow: 0 0 0 2px #0002;
2465 | transition: 0.2s ease-in;
2466 | }
2467 | .toggle input[type="checkbox"]:hover + label:after {
2468 | box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
2469 | }
2470 | .toggle input[type="checkbox"]:checked + label:before {
2471 | background: #77C2BB;
2472 | }
2473 | .toggle input[type="checkbox"]:checked + label:after {
2474 | left: 42px;
2475 | }
2476 | `
2477 | },
2478 | {
2479 | id: "modelCrEmbVA3",
2480 | css: `.toggle {
2481 | position: relative;
2482 | height: 40px;
2483 | display: flex;
2484 | align-items: center;
2485 | box-sizing:border-box;
2486 | }
2487 | .toggle input[type="checkbox"] {
2488 | position: absolute;
2489 | left: 0;
2490 | top: 0;
2491 | z-index: 10;
2492 | width: 100%;
2493 | height: 100%;
2494 | cursor: pointer;
2495 | opacity: 0;
2496 | }
2497 | .toggle label {
2498 | position: relative;
2499 | display: flex;
2500 | height: 100%;
2501 | align-items: center;
2502 | box-sizing:border-box;
2503 | }
2504 | .toggle label:before {
2505 | content: '';
2506 | display: inline-block;
2507 | width: 72px;
2508 | height: 36px;
2509 | border: 1px solid #ccc;
2510 | box-sizing:border-box;
2511 | border-radius: 50px;
2512 | transition: 0.2s ease-in;
2513 | background: #f08270;
2514 | box-shadow: inset 0 0 8px #0002;
2515 | }
2516 | .toggle label:after {
2517 | content: '';
2518 | position: absolute;
2519 | top: 2px;
2520 | left: 0;
2521 | box-sizing:border-box;
2522 | width: 36px;
2523 | height: 36px;
2524 | border: 6px solid #ededec;
2525 | border-radius: 50px;
2526 | background: #fff;
2527 | box-shadow: 0 2px 5px #333;
2528 | background: #d5d4cd;
2529 | background: linear-gradient(#d5d4cd 0%, #FFF 100%);
2530 | transition: 0.2s ease-in;
2531 | }
2532 | .toggle input[type="checkbox"]:checked + label:before {
2533 | box-shadow:inset 0 0 8px #0002,
2534 | inset 120px 0 #49dccf;
2535 | }
2536 | .toggle input[type="checkbox"]:checked + label:after {
2537 | transform: translatex(36px);
2538 | }
2539 | `
2540 | },
2541 |
2542 | {
2543 | id: "modelSh10",
2544 | css: `.toggle {
2545 | position: relative;
2546 | }
2547 | .toggle:before {
2548 | content: '';
2549 | position: absolute;
2550 | border-bottom: 3px solid #fff;
2551 | border-right: 3px solid #fff;
2552 | width: 6px;
2553 | height: 14px;
2554 | z-index: 2;
2555 | transform: rotate(45deg);
2556 | top: 11px;
2557 | left: 15px;
2558 | }
2559 | .toggle:after {
2560 | content: '×';
2561 | position: absolute;
2562 | top: 0;
2563 | left: 55px;
2564 | z-index: 2;
2565 | line-height: 42px;
2566 | font-size: 26px;
2567 | color: #aaa;
2568 | }
2569 | .toggle input[type="checkbox"] {
2570 | position: absolute;
2571 | left: 0;
2572 | top: 0;
2573 | z-index: 10;
2574 | width: 100%;
2575 | height: 100%;
2576 | cursor: pointer;
2577 | opacity: 0;
2578 | }
2579 | .toggle label {
2580 | position: relative;
2581 | display: flex;
2582 | align-items: center;
2583 | }
2584 | .toggle label:before {
2585 | content: '';
2586 | width: 80px;
2587 | height: 42px;
2588 | box-shadow: 0 0 1px 2px #0001;
2589 | background: #eee;
2590 | position: relative;
2591 | display: inline-block;
2592 | border-radius: 46px;
2593 | transition: 0.2s ease-in;
2594 | }
2595 | .toggle label:after {
2596 | content: '';
2597 | position: absolute;
2598 | width: 42px;
2599 | height: 42px;
2600 | border-radius: 50%;
2601 | left: 0;
2602 | top: 0;
2603 | z-index: 5;
2604 | background: #fff;
2605 | box-shadow: 0 0 5px #0002;
2606 | transition: 0.2s ease-in;
2607 | }
2608 | .toggle input[type="checkbox"]:hover + label:after {
2609 | box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
2610 | }
2611 | .toggle input[type="checkbox"]:checked + label:before {
2612 | transition: 0.1s 0.2s ease-in;
2613 | background: #4BD865;
2614 | }
2615 | .toggle input[type="checkbox"]:checked + label:after {
2616 | left: 38px;
2617 | }
2618 | `,
2619 | },
2620 |
2621 | {
2622 | id: "modelSh11",
2623 | css: `.toggle {
2624 | position: relative;
2625 | box-sizing: border-box;
2626 | }
2627 |
2628 | .toggle input[type=checkbox] {
2629 | position: absolute;
2630 | left: 0;
2631 | top: 0;
2632 | z-index: 10;
2633 | width: 100%;
2634 | height: 100%;
2635 | cursor: pointer;
2636 | -webkit-appearance: none;
2637 | -moz-appearance: none;
2638 | appearance: none;
2639 | }
2640 | .toggle input[type=checkbox]:before, .toggle input[type=checkbox]:after {
2641 | content: "";
2642 | width: 5px;
2643 | height: 14px;
2644 | background: #fff;
2645 | z-index: 1;
2646 | left: 10px;
2647 | top: 6px;
2648 | border-radius: 14px;
2649 | box-sizing: border-box;
2650 | position: absolute;
2651 | }
2652 | .toggle input[type=checkbox]:after {
2653 | background: none;
2654 | border: 3px solid #FFF;
2655 | width: 14px;
2656 | left: 45px;
2657 | }
2658 | .toggle label {
2659 | position: relative;
2660 | display: flex;
2661 | align-items: center;
2662 | box-sizing: border-box;
2663 | }
2664 | .toggle label:before {
2665 | content: "";
2666 | width: 72px;
2667 | height: 32px;
2668 | background: #888;
2669 | box-shadow: inset 0 0 0 0px #13bf11;
2670 | position: relative;
2671 | display: inline-block;
2672 | border-radius: 20px;
2673 | box-sizing: border-box;
2674 | transition: 0.2s ease-in;
2675 | }
2676 | .toggle label:after {
2677 | content: "";
2678 | position: absolute;
2679 | width: 40px;
2680 | height: 40px;
2681 | border-radius: 50%;
2682 | left: 0;
2683 | top: -4px;
2684 | z-index: 2;
2685 | background: #fff;
2686 | box-shadow: 0 1px 10px #0005;
2687 | box-sizing: border-box;
2688 | transition: 0.2s ease-in;
2689 | }
2690 | .toggle input[type=checkbox]:checked + label:before {
2691 | box-shadow: inset 40px 0 0 #13bf11;
2692 | }
2693 | .toggle input[type=checkbox]:checked + label:after {
2694 | left: 32px;
2695 | }
2696 | `,
2697 | },
2698 | {
2699 | id: "modelOI1",
2700 | css: `.toggle {
2701 | position: relative;
2702 | box-sizing: border-box;
2703 | }
2704 | .toggle input[type="checkbox"] {
2705 | position: absolute;
2706 | left: 0;
2707 | top: 0;
2708 | z-index: 10;
2709 | width: 100%;
2710 | height: 100%;
2711 | cursor: pointer;
2712 | opacity: 0;
2713 | }
2714 | .toggle label {
2715 | position: relative;
2716 | display: flex;
2717 | align-items: center;
2718 | height: 36px;
2719 | box-sizing: border-box;
2720 | }
2721 | .toggle label:before {
2722 | content: "";
2723 | width: 72px;
2724 | height: 36px;
2725 | border-radius: 20px;
2726 | position: relative;
2727 | display: inline-block;
2728 | transition: 0.3s cubic-bezier(0.55, 0.06, 0.78, 0.21);
2729 | box-sizing: border-box;
2730 | background-color: #FFF;
2731 | box-shadow: 0 0 10px #0002, inset -36px 0 #333;
2732 | }
2733 | .toggle label:after {
2734 | content: '';
2735 | position: absolute;
2736 | width: 20px;
2737 | height: 20px;
2738 | border: 4px solid #333;
2739 | border-radius: 20px;
2740 | box-sizing: border-box;
2741 | left: 0;
2742 | top: 0;
2743 | transform: translate(8px , 8px);
2744 | transition: 0.3s cubic-bezier(0.55, 0.06, 0.78, 0.21);
2745 | }
2746 |
2747 | .toggle input[type="checkbox"]:checked + label:after {
2748 | width: 0;
2749 | transform: translate(50px , 8px)
2750 | }
2751 | .toggle input[type="checkbox"]:checked + label:before {
2752 | box-shadow: 0 0 10px #0002, inset 36px 0 #333;
2753 | }
2754 | `,
2755 | },
2756 | {
2757 | id: "modelOI2",
2758 | css: `.toggle {
2759 | position: relative;
2760 | box-sizing: border-box;
2761 | }
2762 | .toggle input[type="checkbox"] {
2763 | position: absolute;
2764 | left: 0;
2765 | top: 0;
2766 | z-index: 10;
2767 | width: 100%;
2768 | height: 100%;
2769 | cursor: pointer;
2770 | opacity: 0;
2771 | }
2772 | .toggle label {
2773 | position: relative;
2774 | display: flex;
2775 | align-items: center;
2776 | height: 36px;
2777 | box-sizing: border-box;
2778 | }
2779 | .toggle label:before {
2780 | content: "";
2781 | width: 72px;
2782 | height: 36px;
2783 | border-radius: 20px;
2784 | position: relative;
2785 | display: inline-block;
2786 | transition: 0.3s cubic-bezier(0.43, -0.26, 0.69, 1.39);
2787 | box-sizing: border-box;
2788 | background-color: #333;
2789 | box-shadow: 0 0 10px #0002, inset -36px 0 #fff;
2790 | }
2791 | .toggle label:after {
2792 | content: '';
2793 | position: absolute;
2794 | width: 20px;
2795 | height: 20px;
2796 | background: #fff;
2797 | border-radius: 20px;
2798 | box-sizing: border-box;
2799 | left: 0;
2800 | top: 0;
2801 | transform: translate(8px , 8px);
2802 | transition: 0.3s cubic-bezier(0.43, -0.26, 0.69, 1.39);
2803 | }
2804 | .toggle input[type="checkbox"]:checked + label:after {
2805 | width: 4px;
2806 | height: 16px;
2807 | transform: translate(53px , 10px)
2808 | }
2809 | .toggle input[type="checkbox"]:checked + label:before {
2810 | box-shadow: 0 0 10px #0002, inset 36px 0 #fff;
2811 | }
2812 | `,
2813 | },
2814 | {
2815 | id: "modelOI3",
2816 | css: `.toggle {
2817 | position: relative;
2818 | box-sizing: border-box;
2819 | }
2820 | .toggle input[type="checkbox"] {
2821 | position: absolute;
2822 | left: 0;
2823 | top: 0;
2824 | z-index: 10;
2825 | width: 100%;
2826 | height: 100%;
2827 | cursor: pointer;
2828 | opacity: 0;
2829 | }
2830 | .toggle label {
2831 | position: relative;
2832 | display: flex;
2833 | align-items: center;
2834 | height: 36px;
2835 | box-sizing: border-box;
2836 | }
2837 | .toggle label:before {
2838 | content: "";
2839 | width: 72px;
2840 | height: 36px;
2841 | border-radius: 20px;
2842 | position: relative;
2843 | display: inline-block;
2844 | transition: 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
2845 | box-sizing: border-box;
2846 | background-color: #333;
2847 | box-shadow: 0 0 12px #0003, inset -36px 0 #fff;
2848 | }
2849 | .toggle label:after {
2850 | content: '';
2851 | position: absolute;
2852 | width: 16px;
2853 | height: 16px;
2854 | background: #fff;
2855 | border-radius: 20px;
2856 | box-sizing: border-box;
2857 | left: 0;
2858 | top: 0;
2859 | transform: translate(10px , 10px);
2860 | transition: 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
2861 | }
2862 | .toggle input[type="checkbox"]:checked + label:after {
2863 | width: 4px;
2864 | height: 16px;
2865 | background: #333;
2866 | transform: translate(53px , 10px);
2867 | }
2868 | .toggle input[type="checkbox"]:checked + label:before {
2869 | box-shadow: 0 0 12px #0003, inset 36px 0 #333;
2870 | background: #FFF;
2871 | }
2872 | `,
2873 | },
2874 | {
2875 | id: "modelOI4",
2876 | css: `.toggle {
2877 | position: relative;
2878 | box-sizing: border-box;
2879 | }
2880 | .toggle input[type="checkbox"] {
2881 | position: absolute;
2882 | left: 0;
2883 | top: 0;
2884 | z-index: 10;
2885 | width: 100%;
2886 | height: 100%;
2887 | cursor: pointer;
2888 | opacity: 0;
2889 | }
2890 | .toggle label {
2891 | position: relative;
2892 | display: flex;
2893 | align-items: center;
2894 | height: 36px;
2895 | box-sizing: border-box;
2896 | }
2897 | .toggle label:before {
2898 | content: "";
2899 | width: 72px;
2900 | height: 36px;
2901 | border-radius: 20px;
2902 | position: relative;
2903 | display: inline-block;
2904 | transition: 0.3s ease-in;
2905 | box-sizing: border-box;
2906 | background-color: #333;
2907 | box-shadow: 0 0 12px #0003, inset -72px 0 #333;
2908 | }
2909 | .toggle label:after {
2910 | content: '';
2911 | position: absolute;
2912 | width: 16px;
2913 | height: 16px;
2914 | background: #fff;
2915 | border-radius: 20px;
2916 | box-sizing: border-box;
2917 | left: 0;
2918 | top: 0;
2919 | transform: translate(10px , 10px);
2920 | transition: 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
2921 | }
2922 | .toggle input[type="checkbox"]:checked + label:after {
2923 | background: #333;
2924 | transform: translate(47px, 10px);
2925 | }
2926 | .toggle input[type="checkbox"]:checked + label:before {
2927 | background: #FFF;
2928 | box-shadow: 0 0 12px #0003, inset 0 0 #333;
2929 | }
2930 | `,
2931 | },
2932 | {
2933 | id: "modelOI6",
2934 | css: `.toggle {
2935 | position: relative;
2936 | box-sizing: border-box;
2937 | }
2938 | .toggle input[type="checkbox"] {
2939 | position: absolute;
2940 | left: 0;
2941 | top: 0;
2942 | z-index: 10;
2943 | width: 100%;
2944 | height: 100%;
2945 | cursor: pointer;
2946 | opacity: 0;
2947 | }
2948 | .toggle label {
2949 | position: relative;
2950 | display: flex;
2951 | align-items: center;
2952 | height: 36px;
2953 | box-sizing: border-box;
2954 | }
2955 | .toggle label:before {
2956 | content: "";
2957 | width: 72px;
2958 | height: 36px;
2959 | border-radius: 20px;
2960 | position: relative;
2961 | display: inline-block;
2962 | transition: 0.4s cubic-bezier(1, 1, 1, 1);
2963 | box-sizing: border-box;
2964 | background-color: #333;
2965 | box-shadow: 0 0 10px #0002, inset -36px 0 #fff;
2966 | }
2967 | .toggle label:after {
2968 | content: '';
2969 | position: absolute;
2970 | width: 20px;
2971 | height: 20px;
2972 | background: #fff;
2973 | border-radius: 20px;
2974 | box-sizing: border-box;
2975 | left: 0;
2976 | top: 0;
2977 | transform: translate(8px , 8px);
2978 | transition: 0.3s cubic-bezier(1, 1, 1, 1);
2979 | }
2980 | .toggle input[type="checkbox"]:checked + label:after {
2981 | width: 4px;
2982 | height: 16px;
2983 | transform: translate(53px , 10px)
2984 | }
2985 | .toggle input[type="checkbox"]:checked + label:before {
2986 | box-shadow: 0 0 10px #0002, inset 36px 0 #fff;
2987 | }
2988 | `,
2989 | },
2990 | {
2991 | id: "modelSHl7",
2992 | css: `.toggle {
2993 | position: relative;
2994 | box-sizing: border-box;
2995 | }
2996 | .toggle input[type="checkbox"] {
2997 | position: absolute;
2998 | left: 0;
2999 | top: 0;
3000 | z-index: 10;
3001 | width: 100%;
3002 | height: 100%;
3003 | cursor: pointer;
3004 | opacity: 0;
3005 | }
3006 | .toggle label {
3007 | position: relative;
3008 | display: flex;
3009 | align-items: center;
3010 | height: 36px;
3011 | box-sizing: border-box;
3012 | }
3013 | .toggle label:before {
3014 | content: "";
3015 | width: 72px;
3016 | height: 36px;
3017 | border-radius: 20px;
3018 | position: relative;
3019 | display: inline-block;
3020 | transition: 0.2s ease;
3021 | box-sizing: border-box;
3022 | background-color: #333;
3023 | box-shadow: 0 0 12px #0003, inset -72px 0 #fff;
3024 | }
3025 | .toggle label:after {
3026 | content: '';
3027 | position: absolute;
3028 | width: 20px;
3029 | height: 20px;
3030 | background: #444;
3031 | border-radius: 20px;
3032 | box-sizing: border-box;
3033 | left: 0;
3034 | top: 0;
3035 | transform: translate(8px , 8px);
3036 | transition: 0.2s ease;
3037 | }
3038 | .toggle input[type="checkbox"]:checked + label:after {
3039 | background: #FFF;
3040 | transform: translate(47px, 8px);
3041 | }
3042 | .toggle input[type="checkbox"]:checked + label:before {
3043 | box-shadow: 0 0 12px #0003, inset 0 0 #fff;
3044 | }
3045 | `,
3046 | },
3047 | {
3048 | id: "modelSHlAn1",
3049 | css: `.toggle {
3050 | position: relative;
3051 | box-sizing: border-box;
3052 | }
3053 | .toggle input[type="checkbox"] {
3054 | position: absolute;
3055 | left: 0;
3056 | top: 0;
3057 | z-index: 10;
3058 | width: 100%;
3059 | height: 100%;
3060 | cursor: pointer;
3061 | opacity: 0;
3062 | }
3063 | .toggle label {
3064 | position: relative;
3065 | display: flex;
3066 | align-items: center;
3067 | height: 36px;
3068 | box-sizing: border-box;
3069 | }
3070 | .toggle label:before {
3071 | content: "";
3072 | width: 72px;
3073 | height: 36px;
3074 | border-radius: 20px;
3075 | position: relative;
3076 | display: inline-block;
3077 | transition: 0.3s ease-in;
3078 | box-sizing: border-box;
3079 | background-color: #333;
3080 | }
3081 | .toggle label:after {
3082 | content: "";
3083 | position: absolute;
3084 | width: 30px;
3085 | height: 30px;
3086 | background: #FFF;
3087 | border-radius: 20px;
3088 | box-sizing: border-box;
3089 | left: 0;
3090 | top: 0;
3091 | transform: translate(3px, 3px) rotate(0deg);
3092 | transition: 0.3s ease-in;
3093 | transform-origin: 33px 33px;
3094 | }
3095 | .toggle input[type="checkbox"]:checked + label:after {
3096 | transform: translate(3px, 3px) rotate(90deg);
3097 | }
3098 | .toggle input[type="checkbox"]:checked + label:before {
3099 | transform: rotate(-180deg);
3100 | }
3101 | `,
3102 | },
3103 | {
3104 | id: "modelSHl7",
3105 | css: `.toggle {
3106 | position: relative;
3107 | height: 32px;
3108 | display: flex;
3109 | align-items: center;
3110 | box-sizing:border-box;
3111 | }
3112 | .toggle input[type="checkbox"] {
3113 | position: absolute;
3114 | left: 0;
3115 | top: 0;
3116 | z-index: 10;
3117 | width: 100%;
3118 | height: 100%;
3119 | cursor: pointer;
3120 | opacity: 0;
3121 | }
3122 | .toggle label {
3123 | position: relative;
3124 | display: flex;
3125 | height: 100%;
3126 | align-items: center;
3127 | box-sizing:border-box;
3128 | }
3129 | .toggle label:before {
3130 | content: '';
3131 | background: #ffa3a3;
3132 | height: 32px;
3133 | width: 94px;
3134 | position: relative;
3135 | display: inline-block;
3136 | box-sizing:border-box;
3137 | transition: 0.2s ease-in;
3138 | }
3139 | .toggle label:after {
3140 | content: 'OFF';
3141 | position: absolute;
3142 | top: 4px;
3143 | left: 4px;
3144 | width: 42px;
3145 | height: 24px;
3146 | z-index: 2;
3147 | display: grid;
3148 | place-content: center;
3149 | font-family: arial;
3150 | font-weight: bold;
3151 | box-sizing:border-box;
3152 | color:#FFF;
3153 | background: #ef3434;
3154 | transition: 0.25s ease-in-out;
3155 | }
3156 |
3157 | .toggle input[type="checkbox"]:checked + label:before {
3158 | background: #c0e7e3;
3159 | }
3160 | .toggle input[type="checkbox"]:checked + label:after {
3161 | content: 'ON';
3162 | background: #21bf73;
3163 | transform: translatex(44px);
3164 | }
3165 | `,
3166 | },
3167 | {
3168 | id: "modelSHl8",
3169 | css: `.toggle {
3170 | position: relative;
3171 | height: 32px;
3172 | display: flex;
3173 | align-items: center;
3174 | box-sizing:border-box;
3175 | }
3176 | .toggle input[type="checkbox"] {
3177 | position: absolute;
3178 | left: 0;
3179 | top: 0;
3180 | z-index: 10;
3181 | width: 100%;
3182 | height: 100%;
3183 | cursor: pointer;
3184 | opacity: 0;
3185 | }
3186 | .toggle label {
3187 | position: relative;
3188 | display: flex;
3189 | height: 100%;
3190 | align-items: center;
3191 | box-sizing:border-box;
3192 | }
3193 | .toggle label:before {
3194 | content: '';
3195 | background: #ffa3a3;
3196 | height: 18px;
3197 | width: 84px;
3198 | border-radius: 10px;
3199 | box-shadow: inset 0 0.1em 0.03em #0002,
3200 | inset 0 0.1em 0.3em #0003,
3201 | 0 0 2em #0006;
3202 | position: relative;
3203 | display: inline-block;
3204 | box-sizing:border-box;
3205 | transition: 0.2s ease-in;
3206 | }
3207 | .toggle label:after {
3208 | content: 'OFF';
3209 | position: absolute;
3210 | top: -6px;
3211 | left: 0;
3212 | width: 42px;
3213 | height: 42px;
3214 | border-radius: 50%;
3215 | z-index: 2;
3216 | display: grid;
3217 | place-content: center;
3218 | font-size: 12px;
3219 | font-family: arial;
3220 | font-weight: bold;
3221 | box-sizing:border-box;
3222 | color:#FFF;
3223 | background: #ef3434;
3224 | box-shadow: -2px 2px 4px #0004;
3225 | transition: 0.25s ease-in-out;
3226 | }
3227 | .toggle input[type="checkbox"]:checked + label:before {
3228 | background: #c0e7e3;
3229 | }
3230 | .toggle input[type="checkbox"]:checked + label:after {
3231 | content: 'ON';
3232 | background: #21bf73;
3233 | transform: translatex(44px);
3234 | }
3235 | `,
3236 | },
3237 | {
3238 | id: "modelSHl9",
3239 | css: `.toggle {
3240 | position: relative;
3241 | height: 32px;
3242 | display: flex;
3243 | align-items: center;
3244 | box-sizing:border-box;
3245 | }
3246 | .toggle input[type="checkbox"] {
3247 | position: absolute;
3248 | left: 0;
3249 | top: 0;
3250 | z-index: 10;
3251 | width: 100%;
3252 | height: 100%;
3253 | cursor: pointer;
3254 | opacity: 0;
3255 | }
3256 | .toggle label {
3257 | position: relative;
3258 | display: flex;
3259 | height: 100%;
3260 | align-items: center;
3261 | box-sizing:border-box;
3262 | }
3263 | .toggle label:before {
3264 | content: '';
3265 | background: #ffa3a3;
3266 | height: 34px;
3267 | width: 90px;
3268 | border-radius: 20px;
3269 | box-shadow: inset 0 0.1em 0.03em #0002,
3270 | inset 0 0.1em 0.3em #0003;
3271 | position: relative;
3272 | display: inline-block;
3273 | box-sizing:border-box;
3274 | transition: 0.2s ease-in;
3275 | }
3276 | .toggle label:after {
3277 | content: 'O';
3278 | position: absolute;
3279 | top: 2px;
3280 | left: 3px;
3281 | width: 28px;
3282 | height: 28px;
3283 | border-radius: 50%;
3284 | z-index: 2;
3285 | display: grid;
3286 | place-content: center;
3287 | font-size: 20px;
3288 | font-family: arial;
3289 | font-weight: bold;
3290 | box-sizing:border-box;
3291 | color:#FFF;
3292 | background: #ef3434;
3293 | box-shadow: -2px 2px 4px #0004;
3294 | transition: 0.25s ease-in-out;
3295 | }
3296 | .toggle input[type="checkbox"]:checked + label:before {
3297 | background: #c0e7e3;
3298 | }
3299 | .toggle input[type="checkbox"]:checked + label:after {
3300 | content: 'I';
3301 | background: #21bf73;
3302 | transform: translatex(57px);
3303 | }
3304 | `,
3305 | },
3306 | {
3307 | id: "modelSHl11",
3308 | css: `.toggle {
3309 | position: relative;
3310 | height: 32px;
3311 | display: flex;
3312 | align-items: center;
3313 | box-sizing: border-box;
3314 | }
3315 | .toggle input[type=checkbox] {
3316 | position: absolute;
3317 | left: 0;
3318 | top: 0;
3319 | z-index: 10;
3320 | width: 100%;
3321 | height: 100%;
3322 | cursor: pointer;
3323 | -webkit-appearance: none;
3324 | -moz-appearance: none;
3325 | appearance: none;
3326 | }
3327 | .toggle input[type=checkbox]:before, .toggle input[type=checkbox]:after {
3328 | content: "";
3329 | background: #fff;
3330 | width: 2px;
3331 | height: 16px;
3332 | position: absolute;
3333 | left: 0px;
3334 | top: 0;
3335 | transition: 0.25s ease-in-out;
3336 | transform: translate(13px, 5px) rotate(45deg);
3337 | }
3338 | .toggle input[type=checkbox]:after {
3339 | transform: translate(13px, 5px) rotate(-45deg);
3340 | }
3341 |
3342 | .toggle label {
3343 | position: relative;
3344 | display: flex;
3345 | height: 100%;
3346 | align-items: center;
3347 | box-sizing: border-box;
3348 | }
3349 |
3350 | .toggle label:before {
3351 | content: "";
3352 | background: #CCC;
3353 | height: 36px;
3354 | width: 85px;
3355 | border-radius: 20px;
3356 | border: 1px solid #ddd;
3357 | position: relative;
3358 | display: inline-block;
3359 | box-sizing: border-box;
3360 | transition: 0.2s ease-in;
3361 | }
3362 |
3363 | .toggle label:after {
3364 | content: "";
3365 | position: absolute;
3366 | top: 0;
3367 | left: 2px;
3368 | width: 32px;
3369 | height: 32px;
3370 | border-radius: 50%;
3371 | z-index: 2;
3372 | display: grid;
3373 | place-content: center;
3374 | font-size: 20px;
3375 | font-family: arial;
3376 | font-weight: bold;
3377 | box-sizing: border-box;
3378 | color: #FFF;
3379 | background: #ef3434;
3380 | transition: 0.25s ease-in-out;
3381 | }
3382 | .toggle input[type=checkbox]:checked:before {
3383 | left: 51px;
3384 | transform: translate(15px, 5px) rotate(45deg);
3385 | }
3386 | .toggle input[type=checkbox]:checked:after {
3387 | transform: translate(8px, 12px) rotate(-45deg);
3388 | height: 8px;
3389 | left: 51px;
3390 | }
3391 | .toggle input[type=checkbox]:checked + label:before {
3392 | background: #EEE;
3393 | }
3394 | .toggle input[type=checkbox]:checked + label:after {
3395 | background: #21bf73;
3396 | transform: translatex(51px);
3397 | }
3398 | `,
3399 | },
3400 | {
3401 | id: "modelSHl12",
3402 | css: `.toggle {
3403 | position: relative;
3404 | height: 42px;
3405 | display: flex;
3406 | align-items: center;
3407 | box-sizing: border-box;
3408 | }
3409 |
3410 | .toggle input[type=checkbox] {
3411 | position: absolute;
3412 | left: 0;
3413 | top: 0;
3414 | z-index: 10;
3415 | width: 100%;
3416 | height: 100%;
3417 | cursor: pointer;
3418 | -webkit-appearance: none;
3419 | -moz-appearance: none;
3420 | appearance: none;
3421 | }
3422 | .toggle input[type=checkbox]:before, .toggle input[type=checkbox]:after {
3423 | content: "";
3424 | background: #ef3434;
3425 | width: 3px;
3426 | height: 22px;
3427 | position: absolute;
3428 | left: 0px;
3429 | top: 0;
3430 | transition: 0.25s ease-in-out;
3431 | transform: translate(16px, 7px) rotate(45deg);
3432 | }
3433 | .toggle input[type=checkbox]:after {
3434 | transform: translate(16px, 7px) rotate(-45deg);
3435 | }
3436 | .toggle label {
3437 | position: relative;
3438 | display: flex;
3439 | height: 100%;
3440 | align-items: center;
3441 | box-sizing: border-box;
3442 | }
3443 | .toggle label:before {
3444 | content: "";
3445 | background: #EEE;
3446 | height: 42px;
3447 | width: 84px;
3448 | border-radius: 20px;
3449 | border: 1px solid #ddd;
3450 | position: relative;
3451 | display: inline-block;
3452 | box-sizing: border-box;
3453 | transition: 0.2s ease-in;
3454 | }
3455 | .toggle label:after {
3456 | content: "";
3457 | position: absolute;
3458 | top: 0;
3459 | left: 0;
3460 | width: 42px;
3461 | height: 42px;
3462 | border-radius: 50%;
3463 | border: 1px solid #ddd;
3464 | z-index: 2;
3465 | display: grid;
3466 | place-content: center;
3467 | font-size: 20px;
3468 | font-family: arial;
3469 | font-weight: bold;
3470 | box-sizing: border-box;
3471 | color: #FFF;
3472 | background: #FFF;
3473 | transition: 0.25s ease-in-out;
3474 | }
3475 | .toggle input[type=checkbox]:checked:before {
3476 | left: 51px;
3477 | background: #21bf73;
3478 | transform: translate(20px, 8px) rotate(45deg);
3479 | }
3480 | .toggle input[type=checkbox]:checked:after {
3481 | background: #21bf73;
3482 | transform: translate(10px, 18px) rotate(-45deg);
3483 | height: 8px;
3484 | left: 51px;
3485 | }
3486 | .toggle input[type=checkbox]:checked + label:before {
3487 | background: #c0e7e3;
3488 | border-color: #21bf73;
3489 | }
3490 | .toggle input[type=checkbox]:checked + label:after {
3491 | transform: translatex(51px);
3492 | border-color: #21bf73;
3493 | }
3494 | `,
3495 | },
3496 | {
3497 | id: "modelTX1",
3498 | css: `.toggle {
3499 | position: relative;
3500 | height: 32px;
3501 | display: flex;
3502 | align-items: center;
3503 | box-sizing:border-box;
3504 | }
3505 | .toggle input[type="checkbox"] {
3506 | position: absolute;
3507 | left: 0;
3508 | top: 0;
3509 | z-index: 10;
3510 | width: 100%;
3511 | height: 100%;
3512 | cursor: pointer;
3513 | opacity: 0;
3514 | }
3515 | .toggle label {
3516 | position: relative;
3517 | display: flex;
3518 | height: 100%;
3519 | align-items: center;
3520 | box-sizing:border-box;
3521 | }
3522 | .toggle label:before , .toggle label:after {
3523 | font-size: 18px;
3524 | font-weight: bold;
3525 | font-family:arial;
3526 | line-height: 36px;
3527 | transition: 0.2s ease-in;
3528 | box-sizing:border-box;
3529 | }
3530 | .toggle label:before {
3531 | content: 'Yes';
3532 | background: #ef3434;
3533 | color: #0002;
3534 | height: 36px;
3535 | width: 90px;
3536 | display: inline-flex;
3537 | align-items: center;
3538 | padding: 0 10px;
3539 | border-radius: 10px;
3540 | }
3541 | .toggle label:after {
3542 | content: 'No';
3543 | position: absolute;
3544 | left: 58px;
3545 | top: -2px;
3546 | color: #fff;
3547 | }
3548 | .toggle input[type="checkbox"]:checked + label:before {
3549 | background: #21bf73;
3550 | color: #fff;
3551 | }
3552 | .toggle input[type="checkbox"]:checked + label:after {
3553 | color: #0002;
3554 | }
3555 | `,
3556 | },
3557 | {
3558 | id: "modelTX2",
3559 | css: `.toggle {
3560 | position: relative;
3561 | height: 32px;
3562 | display: flex;
3563 | align-items: center;
3564 | box-sizing:border-box;
3565 | }
3566 | .toggle input[type="checkbox"] {
3567 | position: absolute;
3568 | left: 0;
3569 | top: 0;
3570 | z-index: 10;
3571 | width: 100%;
3572 | height: 100%;
3573 | cursor: pointer;
3574 | opacity: 0;
3575 | }
3576 | .toggle label {
3577 | position: relative;
3578 | display: flex;
3579 | height: 100%;
3580 | align-items: center;
3581 | box-sizing:border-box;
3582 | }
3583 | .toggle label:before , .toggle label:after {
3584 | font-weight: bold;
3585 | font-family:arial;
3586 | line-height: 36px;
3587 | transition: 0.2s ease-in;
3588 | box-sizing:border-box;
3589 | }
3590 | .toggle label:before {
3591 | content: 'Yes';
3592 | background: #EEE;
3593 | color: #0003;
3594 | font-size: 16px;
3595 | height: 36px;
3596 | width: 90px;
3597 | display: inline-flex;
3598 | text-decoration: line-through;
3599 | align-items: center;
3600 | padding: 0 10px;
3601 | border-radius: 10px;
3602 | }
3603 | .toggle label:after {
3604 | content: 'No';
3605 | position: absolute;
3606 | left: 55px;
3607 | top: -2px;
3608 | font-size: 22px;
3609 | color: #ef3434;
3610 | }
3611 | .toggle input[type="checkbox"]:checked + label:before {
3612 | color: #21bf73;
3613 | font-size: 22px;
3614 | text-decoration: none;
3615 | }
3616 | .toggle input[type="checkbox"]:checked + label:after {
3617 | color: #0003;
3618 | font-size: 16px;
3619 | left: 60px;
3620 | text-decoration: line-through;
3621 | }
3622 | `,
3623 | },
3624 | {
3625 | id: "modelTX3",
3626 | css: `.toggle {
3627 | position: relative;
3628 | height: 36px;
3629 | display: flex;
3630 | align-items: center;
3631 | box-sizing:border-box;
3632 | }
3633 | .toggle input[type="checkbox"] {
3634 | position: absolute;
3635 | left: 0;
3636 | top: 0;
3637 | z-index: 10;
3638 | width: 100%;
3639 | height: 100%;
3640 | cursor: pointer;
3641 | opacity: 0;
3642 | }
3643 | .toggle label {
3644 | position: relative;
3645 | display: flex;
3646 | height: 100%;
3647 | align-items: center;
3648 | box-sizing:border-box;
3649 | }
3650 |
3651 | .toggle label:before {
3652 | content: 'Yes No';
3653 | background: #FFF;
3654 | color: #ef3434;
3655 | height: 36px;
3656 | word-spacing: 16px;
3657 | font-weight: bold;
3658 | font-size: 16px;
3659 | font-family:arial;
3660 | line-height: 36px;
3661 | width: 90px;
3662 | display: inline-flex;
3663 | align-items: center;
3664 | padding-left: 8px;
3665 | border-radius: 20px;
3666 | border: 2px solid #DDD;
3667 | box-sizing:border-box;
3668 | transition: 0.2s ease-in;
3669 | }
3670 | .toggle label:after {
3671 | content: '';
3672 | position: absolute;
3673 | left: 2px;
3674 | top: 2px;
3675 | width: 45px;
3676 | height: 32px;
3677 | background: #EEE;
3678 | color: #ef3434;
3679 | border-radius: 20px 0 0 20px;
3680 | transition: 0.2s ease-in;
3681 | }
3682 | .toggle input[type="checkbox"]:checked + label:before {
3683 | color: #21bf73;
3684 | }
3685 | .toggle input[type="checkbox"]:checked + label:after {
3686 | left: 43px;
3687 | border-radius: 0 20px 20px 0;
3688 | }
3689 | `,
3690 | },
3691 | {
3692 | id: "modelTxtS4",
3693 | css: `.toggle {
3694 | position: relative;
3695 | height: 36px;
3696 | display: flex;
3697 | align-items: center;
3698 | box-sizing:border-box;
3699 | }
3700 | .toggle input[type="checkbox"] {
3701 | position: absolute;
3702 | left: 0;
3703 | top: 0;
3704 | z-index: 10;
3705 | width: 100%;
3706 | height: 100%;
3707 | cursor: pointer;
3708 | appearance: none;
3709 | }
3710 | .toggle input[type=checkbox]:before, .toggle input[type=checkbox]:after {
3711 | content: "";
3712 | background: #FFF;
3713 | width: 3px;
3714 | height: 22px;
3715 | position: absolute;
3716 | left: 0;
3717 | top: 0;
3718 | transition: 0.25s ease-in-out;
3719 | transform: translate(57px, 4px) rotate(45deg);
3720 | }
3721 | .toggle input[type=checkbox]:after {
3722 | transform: translate(57px, 4px) rotate(-45deg);
3723 | }
3724 | .toggle label {
3725 | position: relative;
3726 | display: flex;
3727 | height: 100%;
3728 | align-items: center;
3729 | box-sizing:border-box;
3730 | }
3731 | .toggle label:before , .toggle label:after {
3732 | font-size: 18px;
3733 | font-weight: bold;
3734 | font-family:arial;
3735 | line-height: 36px;
3736 | transition: 0.2s ease-in;
3737 | box-sizing:border-box;
3738 | }
3739 | .toggle label:before {
3740 | content: 'Yes';
3741 | background: #ef3434;
3742 | color: #0002;
3743 | height: 36px;
3744 | width: 120px;
3745 | display: inline-flex;
3746 | align-items: center;
3747 | padding: 0 10px;
3748 | border-radius: 20px;
3749 | }
3750 | .toggle label:after {
3751 | content: 'No';
3752 | position: absolute;
3753 | left: 87px;
3754 | top: 0;
3755 | color: #fff;
3756 | }
3757 | .toggle input[type=checkbox]:checked:before {
3758 | transform: translate(60px, 4px) rotate(45deg);
3759 | }
3760 | .toggle input[type=checkbox]:checked:after {
3761 | transform: translate(50px, 14px) rotate(-45deg);
3762 | height: 8px;
3763 | }
3764 | .toggle input[type="checkbox"]:checked + label:before {
3765 | background: #21bf73;
3766 | color: #fff;
3767 | }
3768 | .toggle input[type="checkbox"]:checked + label:after {
3769 | color: #0002;
3770 | }`
3771 | },
3772 | {
3773 | id: "modelTxTra1",
3774 | css: `.toggle {
3775 | position: relative;
3776 | height: 32px;
3777 | display: flex;
3778 | align-items: center;
3779 | box-sizing:border-box;
3780 | }
3781 | .toggle input[type="checkbox"] {
3782 | position: absolute;
3783 | left: 0;
3784 | top: 0;
3785 | z-index: 10;
3786 | width: 100%;
3787 | height: 100%;
3788 | cursor: pointer;
3789 | opacity: 0;
3790 | }
3791 | .toggle label {
3792 | position: relative;
3793 | display: flex;
3794 | height: 100%;
3795 | align-items: center;
3796 | box-sizing:border-box;
3797 | perspective: 64px;
3798 | }
3799 |
3800 | .toggle label:before {
3801 | content: 'Yes No';
3802 | background: #ffa3a3;
3803 | color: #ef3434;
3804 | height: 32px;
3805 | width: 64px;
3806 | word-spacing: 12px;
3807 | font-weight: bold;
3808 | font-size: 12px;
3809 | font-family:arial;
3810 | line-height: 36px;
3811 | display: inline-flex;
3812 | align-items: center;
3813 | padding-left: 4px;
3814 | box-sizing:border-box;
3815 | transition: 0.3s ease-in;
3816 | }
3817 | .toggle label:after {
3818 | content: '';
3819 | position: absolute;
3820 | left: 3px;
3821 | top: 3px;
3822 | width: 29px;
3823 | height: 26px;
3824 | background: #ef3434;
3825 | transform-origin: 100% 50% 0;
3826 | transition: 0.3s ease-in;
3827 | }
3828 | .toggle input[type="checkbox"]:checked + label:before {
3829 | background: #c0e7e3;
3830 | color: #21bf73;
3831 | }
3832 | .toggle input[type="checkbox"]:checked + label:after {
3833 | transform: rotateY(180deg);
3834 | background: #21bf73;
3835 | }
3836 | `
3837 | },
3838 | {
3839 | id: "modelTxTra2",
3840 | css: `.toggle {
3841 | position: relative;
3842 | height: 32px;
3843 | display: flex;
3844 | align-items: center;
3845 | box-sizing:border-box;
3846 | }
3847 | .toggle input[type="checkbox"] {
3848 | position: absolute;
3849 | left: 0;
3850 | top: 0;
3851 | z-index: 10;
3852 | width: 100%;
3853 | height: 100%;
3854 | cursor: pointer;
3855 | opacity: 0;
3856 | }
3857 | .toggle label {
3858 | position: relative;
3859 | display: flex;
3860 | height: 100%;
3861 | align-items: center;
3862 | box-sizing:border-box;
3863 | }
3864 | .toggle label:before {
3865 | content: 'Yes No';
3866 | background: #ffa3a3;
3867 | color: #ef3434;
3868 | height: 32px;
3869 | width: 64px;
3870 | word-spacing: 12px;
3871 | font-weight: bold;
3872 | font-size: 12px;
3873 | font-family:arial;
3874 | line-height: 36px;
3875 | display: inline-flex;
3876 | align-items: center;
3877 | padding-left: 4px;
3878 | box-sizing:border-box;
3879 | transition: 0.3s ease-in;
3880 | }
3881 | .toggle label:after {
3882 | content: '';
3883 | position: absolute;
3884 | left: 3px;
3885 | top: 3px;
3886 | width: 29px;
3887 | height: 26px;
3888 | background: #ef3434;
3889 | transform-origin: 100% 50% 0;
3890 | transition: 0.3s ease-in;
3891 | }
3892 | .toggle input[type="checkbox"]:checked + label:before {
3893 | background: #c0e7e3;
3894 | color: #21bf73;
3895 | }
3896 | .toggle input[type="checkbox"]:checked + label:after {
3897 | transform: translatex(28px);
3898 | background: #21bf73;
3899 | }
3900 | `
3901 | },
3902 | {
3903 | id: "modelTxTra3",
3904 | css: `.toggle {
3905 | position: relative;
3906 | height: 32px;
3907 | display: flex;
3908 | align-items: center;
3909 | box-sizing:border-box;
3910 | }
3911 | .toggle input[type="checkbox"] {
3912 | position: absolute;
3913 | left: 0;
3914 | top: 0;
3915 | z-index: 10;
3916 | width: 100%;
3917 | height: 100%;
3918 | cursor: pointer;
3919 | opacity: 0;
3920 | }
3921 | .toggle label {
3922 | position: relative;
3923 | display: flex;
3924 | height: 100%;
3925 | align-items: center;
3926 | box-sizing:border-box;
3927 | }
3928 | .toggle label:before {
3929 | content: 'Yes No';
3930 | background: #ffa3a3;
3931 | color: #ef3434;
3932 | height: 32px;
3933 | width: 64px;
3934 | word-spacing: 12px;
3935 | font-weight: bold;
3936 | font-size: 12px;
3937 | font-family:arial;
3938 | line-height: 36px;
3939 | display: inline-flex;
3940 | align-items: center;
3941 | padding-left: 4px;
3942 | box-sizing:border-box;
3943 | transition: 0.3s ease-in;
3944 | }
3945 | .toggle label:after {
3946 | content: '';
3947 | position: absolute;
3948 | left: 3px;
3949 | top: 3px;
3950 | width: 29px;
3951 | height: 26px;
3952 | background: #ef3434;
3953 | transform-origin: 100% 50% 0;
3954 | transition: 0.3s ease-in;
3955 | }
3956 | .toggle input[type="checkbox"]:checked + label:before {
3957 | background: #c0e7e3;
3958 | color: #21bf73;
3959 | }
3960 | .toggle input[type="checkbox"]:checked + label:after {
3961 | transform: rotate(180deg);
3962 | background: #21bf73;
3963 | }
3964 |
3965 | `
3966 | },
3967 | {
3968 | id: "modelTxTra4",
3969 | css: `.toggle {
3970 | position: relative;
3971 | height: 32px;
3972 | display: flex;
3973 | align-items: center;
3974 | box-sizing:border-box;
3975 | }
3976 | .toggle input[type="checkbox"] {
3977 | position: absolute;
3978 | left: 0;
3979 | top: 0;
3980 | z-index: 10;
3981 | width: 100%;
3982 | height: 100%;
3983 | cursor: pointer;
3984 | opacity: 0;
3985 | }
3986 | .toggle label {
3987 | position: relative;
3988 | display: flex;
3989 | height: 100%;
3990 | align-items: center;
3991 | box-sizing:border-box;
3992 | }
3993 |
3994 | .toggle label:before {
3995 | content: 'Yes No';
3996 | background: #ffa3a3;
3997 | color: #ef3434;
3998 | height: 32px;
3999 | width: 64px;
4000 | word-spacing: 12px;
4001 | font-weight: bold;
4002 | font-size: 12px;
4003 | font-family:arial;
4004 | line-height: 36px;
4005 | display: inline-flex;
4006 | align-items: center;
4007 | padding-left: 4px;
4008 | box-sizing:border-box;
4009 | transition: 0.3s ease-in;
4010 | }
4011 | .toggle label:after {
4012 | content: '';
4013 | position: absolute;
4014 | left: 3px;
4015 | top: 14px;
4016 | width: 29px;
4017 | height: 4px;
4018 | background: #ef3434;
4019 | transform-origin: 100% 50% 0;
4020 | transition: 0.3s ease-in;
4021 | }
4022 | .toggle input[type="checkbox"]:checked + label:before {
4023 | background: #c0e7e3;
4024 | color: #21bf73;
4025 | }
4026 | .toggle input[type="checkbox"]:checked + label:after {
4027 | transform: translatex(28px);
4028 | background: #21bf73;
4029 | }
4030 | `
4031 | },
4032 | {
4033 | id: "modelTxTra5",
4034 | css: `.toggle {
4035 | position: relative;
4036 | height: 32px;
4037 | display: flex;
4038 | align-items: center;
4039 | box-sizing:border-box;
4040 | }
4041 | .toggle input[type="checkbox"] {
4042 | position: absolute;
4043 | left: 0;
4044 | top: 0;
4045 | z-index: 10;
4046 | width: 100%;
4047 | height: 100%;
4048 | cursor: pointer;
4049 | opacity: 0;
4050 | }
4051 | .toggle label {
4052 | position: relative;
4053 | display: flex;
4054 | height: 100%;
4055 | align-items: center;
4056 | box-sizing:border-box;
4057 | }
4058 | .toggle label:before {
4059 | content: '';
4060 | background: #ffa3a3;
4061 | height: 32px;
4062 | width: 64px;
4063 | display: inline-flex;
4064 | box-sizing:border-box;
4065 | transition: 0.3s ease-in;
4066 | }
4067 | .toggle label:after {
4068 | content: 'Yes No';
4069 | word-spacing: 12px;
4070 | font-weight: bold;
4071 | font-size: 12px;
4072 | font-family:arial;
4073 | line-height: 26px;
4074 | text-indent: -30px;
4075 | overflow: hidden;
4076 | white-space: nowrap;
4077 | color: #fff;
4078 | position: absolute;
4079 | left: 3px;
4080 | top: 3px;
4081 | width: 29px;
4082 | height: 26px;
4083 | background: #ef3434;
4084 | transform-origin: 100% 50% 0;
4085 | transition: 0.3s cubic-bezier(0.6, -0.28, 0.74, 0.05);
4086 | }
4087 | .toggle input[type="checkbox"]:checked + label:before {
4088 | background: #c0e7e3;
4089 | }
4090 | .toggle input[type="checkbox"]:checked + label:after {
4091 | text-indent: 4px;
4092 | transform: translatex(29px);
4093 | background: #21bf73;
4094 | }
4095 | `
4096 | },
4097 | {
4098 | id: "modelTX4",
4099 | css: `.toggle {
4100 | position: relative;
4101 | height: 42px;
4102 | display: flex;
4103 | align-items: center;
4104 | box-sizing:border-box;
4105 | }
4106 | .toggle input[type="checkbox"] {
4107 | position: absolute;
4108 | left: 0;
4109 | top: 0;
4110 | z-index: 10;
4111 | width: 100%;
4112 | height: 100%;
4113 | cursor: pointer;
4114 | opacity: 0;
4115 | }
4116 | .toggle label {
4117 | position: relative;
4118 | display: flex;
4119 | height: 100%;
4120 | align-items: center;
4121 | box-sizing:border-box;
4122 | }
4123 | .toggle label:before , .toggle label:after {
4124 | font-size: 18px;
4125 | font-weight: bold;
4126 | font-family:arial;
4127 | transition: 0.2s ease-in;
4128 | box-sizing:border-box;
4129 | }
4130 | .toggle label:before {
4131 | content: "Yes";
4132 | background: #FFF;
4133 | color: #999;
4134 | height: 42px;
4135 | width: 140px;
4136 | display: inline-flex;
4137 | align-items: center;
4138 | padding-left: 8px;
4139 | border-radius: 30px;
4140 | border: 8px solid #000;
4141 | box-shadow: inset 50px 0px 0 0px #000;
4142 | }
4143 | .toggle label:after {
4144 | content: "No";
4145 | position: absolute;
4146 | left: 100px;
4147 | line-height: 42px;
4148 | top: 0;
4149 | color: #000;
4150 | }
4151 | .toggle input[type="checkbox"]:checked + label:before {
4152 | color: #fff;
4153 | box-shadow: inset -50px 0px 0 0px #DDD;
4154 | border-color: #DDD;
4155 | background: #000;
4156 | }
4157 | .toggle input[type="checkbox"]:checked + label:after {
4158 | color: #CCC;
4159 | }
4160 | `,
4161 | },
4162 | {
4163 | id: "modelTX5",
4164 | css: `.toggle {
4165 | position: relative;
4166 | height: 42px;
4167 | display: flex;
4168 | align-items: center;
4169 | box-sizing:border-box;
4170 | }
4171 | .toggle input[type="checkbox"] {
4172 | position: absolute;
4173 | left: 0;
4174 | top: 0;
4175 | z-index: 10;
4176 | width: 100%;
4177 | height: 100%;
4178 | cursor: pointer;
4179 | opacity: 0;
4180 | }
4181 | .toggle label {
4182 | position: relative;
4183 | display: flex;
4184 | height: 100%;
4185 | align-items: center;
4186 | box-sizing:border-box;
4187 | }
4188 | .toggle label:before , .toggle label:after {
4189 | font-size: 18px;
4190 | font-weight: bold;
4191 | font-family:arial;
4192 | transition: 0.2s ease-in;
4193 | box-sizing:border-box;
4194 | }
4195 | .toggle label:before {
4196 | content: "Yes";
4197 | background: #FFF;
4198 | color: #000;
4199 | height: 42px;
4200 | width: 140px;
4201 | display: inline-flex;
4202 | align-items: center;
4203 | padding-left: 15px;
4204 | border-radius: 30px;
4205 | border: 1px solid #eee;
4206 | box-shadow: inset 140px 0px 0 0px #000;
4207 | }
4208 | .toggle label:after {
4209 | content: "No";
4210 | position: absolute;
4211 | left: 100px;
4212 | line-height: 42px;
4213 | top: 0;
4214 | color: #FFF;
4215 | }
4216 | .toggle input[type="checkbox"]:checked + label:before {
4217 | color: #000;
4218 | box-shadow: inset 0px 0px 0 0px #000;
4219 | }
4220 | .toggle input[type="checkbox"]:checked + label:after {
4221 | color: #FFF;
4222 | }
4223 | `,
4224 | },
4225 | {
4226 | id: "modelTX6",
4227 | css: `.toggle {
4228 | position: relative;
4229 | height: 36px;
4230 | display: flex;
4231 | align-items: center;
4232 | box-sizing:border-box;
4233 | }
4234 | .toggle input[type="checkbox"] {
4235 | position: absolute;
4236 | left: 0;
4237 | top: 0;
4238 | z-index: 10;
4239 | width: 100%;
4240 | height: 100%;
4241 | cursor: pointer;
4242 | opacity: 0;
4243 | }
4244 | .toggle label {
4245 | position: relative;
4246 | display: flex;
4247 | height: 100%;
4248 | align-items: center;
4249 | box-sizing:border-box;
4250 | perspective: 150px;
4251 | }
4252 |
4253 | .toggle label:before {
4254 | content: 'Yes No';
4255 | background: #444;
4256 | color: #FFF;
4257 | height: 36px;
4258 | width: 140px;
4259 | word-spacing: 67px;
4260 | font-weight: bold;
4261 | font-size: 16px;
4262 | font-family:arial;
4263 | line-height: 36px;
4264 | display: inline-flex;
4265 | align-items: center;
4266 | padding-left: 8px;
4267 | border-radius: 4px;
4268 | border: 2px solid #666;
4269 | box-sizing:border-box;
4270 | transition: 0.3s ease-in;
4271 | }
4272 | .toggle label:after {
4273 | content: '';
4274 | position: absolute;
4275 | left: 2px;
4276 | top: 2px;
4277 | width: 68px;
4278 | height: 32px;
4279 | background: #333;
4280 | border-radius: 4px;
4281 | transform-origin: 100% 50% 0;
4282 | transition: 0.3s ease-in;
4283 | }
4284 | .toggle input[type="checkbox"]:checked + label:after {
4285 | transform: rotateY(180deg);
4286 | }
4287 | `,
4288 | },
4289 | {
4290 | id: "modelTX7",
4291 | css: `.toggle {
4292 | position: relative;
4293 | height: 42px;
4294 | display: flex;
4295 | align-items: center;
4296 | box-sizing:border-box;
4297 | }
4298 | .toggle input[type="checkbox"] {
4299 | position: absolute;
4300 | left: 0;
4301 | top: 0;
4302 | z-index: 10;
4303 | width: 100%;
4304 | height: 100%;
4305 | cursor: pointer;
4306 | opacity: 0;
4307 | }
4308 | .toggle label {
4309 | position: relative;
4310 | display: flex;
4311 | height: 100%;
4312 | align-items: center;
4313 | box-sizing:border-box;
4314 | }
4315 | .toggle label:before , .toggle label:after {
4316 | font-size: 18px;
4317 | font-weight: bold;
4318 | font-family:arial;
4319 | transition: 0.2s ease-in;
4320 | box-sizing:border-box;
4321 | }
4322 | .toggle label:before {
4323 | content: "Yes";
4324 | background: #565656;
4325 | color: #AAA;
4326 | height: 42px;
4327 | width: 140px;
4328 | display: inline-flex;
4329 | align-items: center;
4330 | padding-left: 15px;
4331 | border-radius: 4px;
4332 | transition: .5s cubic-bezier(0.52, -0.41, 0.55, 1.46);
4333 | box-shadow: inset 70px 0px 0 0px #ddd;
4334 | }
4335 | .toggle label:after {
4336 | content: "No";
4337 | position: absolute;
4338 | left: 100px;
4339 | line-height: 42px;
4340 | top: 0;
4341 | color: #FFF;
4342 | }
4343 | .toggle input[type="checkbox"]:checked + label:before {
4344 | color: #fff;
4345 | box-shadow: inset -70px 0px 0 0px #DDD;
4346 | border-color: #DDD;
4347 | background: #000;
4348 | }
4349 | .toggle input[type="checkbox"]:checked + label:after {
4350 | color: #AAA;
4351 | }
4352 | `,
4353 | },
4354 |
4355 | {
4356 | id: "modelSh6",
4357 | css: `.toggle {
4358 | position: relative;
4359 | }
4360 | .toggle:before, .toggle:after {
4361 | position: absolute;
4362 | top: 0;
4363 | z-index: 1;
4364 | height:32px;
4365 | line-height: 32px;
4366 | font-weight: 600;
4367 | font-size: 12px;
4368 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
4369 | }
4370 | .toggle:before {
4371 | content: 'ON';
4372 | left: 10px;
4373 | color: #266c33;
4374 | }
4375 | .toggle:after {
4376 | content: 'OFF';
4377 | right: 10px;
4378 | color: #90201F;
4379 | }
4380 | .toggle input[type="checkbox"] {
4381 | position: absolute;
4382 | left: 0;
4383 | top: 0;
4384 | z-index: 10;
4385 | width: 100%;
4386 | height: 100%;
4387 | cursor: pointer;
4388 | opacity: 0;
4389 | }
4390 | .toggle label {
4391 | position: relative;
4392 | display: flex;
4393 | align-items: center;
4394 | }
4395 | .toggle label:before {
4396 | content: '';
4397 | background: #E3666C;
4398 | height: 32px;
4399 | box-shadow: 0 0 1px 2px #0002;
4400 | width: 90px;
4401 | display: inline-block;
4402 | transition: 0.1s linear;
4403 | }
4404 | .toggle label:after {
4405 | content: '';
4406 | position: absolute;
4407 | background-color: #FFF;
4408 | background-size: 100%;
4409 | background-image: linear-gradient(to right, #ffffff 30%, #dddddd 45%, #ffffff 50%, #dddddd 55%, #ffffff 70%);
4410 | border-radius: 0;
4411 | width: 50px;
4412 | height: 32px;
4413 | left: 0;
4414 | top: 0;
4415 | z-index: 5;
4416 | transition: 0.1s linear;
4417 | }
4418 | .toggle input[type="checkbox"]:checked + label:before {
4419 | background: #4BD865;
4420 | }
4421 | .toggle input[type="checkbox"]:checked + label:after {
4422 | left: 40px;
4423 | }
4424 | `,
4425 | },
4426 | {
4427 | id: "modelx12",
4428 | css: `.toggle {
4429 | position: relative;
4430 | background: #2B2B2D;
4431 | color: #787878;
4432 | height: 40px;
4433 | padding: 0 10px;
4434 | border-radius: 50px;
4435 | font-weight: 800;
4436 | }
4437 | .toggle:after, .toggle:before {
4438 | content: 'ON';
4439 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
4440 | line-height: 40px;
4441 | font-size: 12px;
4442 | }
4443 | .toggle:before {
4444 | content: 'OFF';
4445 | z-index: 1;
4446 | }
4447 | .toggle input[type="checkbox"] {
4448 | position: absolute;
4449 | left: 0;
4450 | top: 0;
4451 | z-index: 10;
4452 | width: 100%;
4453 | height: 100%;
4454 | cursor: pointer;
4455 | opacity: 0;
4456 | }
4457 | .toggle label {
4458 | background: #1E1E1E;
4459 | height: 10px;
4460 | width: 70px;
4461 | margin: 0 5px;
4462 | box-shadow: 0 0 2px 2px #0003 inset;
4463 | position: relative;
4464 | display: inline-block;
4465 | border-radius: 20px;
4466 | }
4467 | .toggle label:before {
4468 | content: '';
4469 | position: absolute;
4470 | width: 14px;
4471 | height: 14px;
4472 | border-radius: 100%;
4473 | transition: 0.3s ease-in;
4474 | background: #151515;
4475 | z-index: 3;
4476 | left: 7px;
4477 | top: -2px;
4478 | }
4479 | .toggle label:after {
4480 | content: '';
4481 | background-color: #3F4545;
4482 | background-size: 100%;
4483 | background-image: linear-gradient(to bottom, #666666 0%, #3f4545 100%);
4484 | top: -9px;
4485 | left: 0;
4486 | width: 27px;
4487 | height: 27px;
4488 | position: absolute;
4489 | border-radius: 50%;
4490 | z-index: 2;
4491 | transition: 0.3s ease-in;
4492 | }
4493 | .toggle input[type="checkbox"]:checked + label:before {
4494 | background: #94DA00;
4495 | box-shadow: 0 0 5px #94da00;
4496 | left: 52px;
4497 | }
4498 | .toggle input[type="checkbox"]:checked + label:after {
4499 | left: 45px;
4500 | }
4501 |
4502 | `,
4503 | },
4504 | {
4505 | id: "model13",
4506 | css: `.toggle {
4507 | position: relative;
4508 | display: inline-block;
4509 | }
4510 | .toggle:after {
4511 | content: 'OFF';
4512 | font-family: Arial;
4513 | position: absolute;
4514 | color: #666;
4515 | top: 10px;
4516 | right: 15px;
4517 | }
4518 | .toggle input[type="checkbox"] {
4519 | position: absolute;
4520 | left: 0;
4521 | top: 0;
4522 | z-index: 10;
4523 | width: 100%;
4524 | height: 100%;
4525 | cursor: pointer;
4526 | opacity: 0;
4527 | }
4528 | .toggle label {
4529 | position: relative;
4530 | display: flex;
4531 | align-items: center;
4532 | }
4533 | .toggle label:before {
4534 | content: '';
4535 | border: 3px solid #777;
4536 | height: 32px;
4537 | width: 84px;
4538 | border-radius: 20px;
4539 | position: relative;
4540 | display: inline-block;
4541 | transition: 0.2s ease-in;
4542 | }
4543 | .toggle label:after {
4544 | content: 'ON';
4545 | font-family: Arial;
4546 | color: #fff;
4547 | line-height: 28px;
4548 | text-indent: 100px;
4549 | background: #777;
4550 | overflow: hidden;
4551 | box-shadow: none;
4552 | border-radius: 14px;
4553 | transform: translateX(-50px);
4554 | transition: all 0.4s 0.2s, width 0.2s linear, text-indent 0.4s linear;
4555 | text-align: center;
4556 | top: 5px;
4557 | right: 6px;
4558 | width: 28px;
4559 | height: 28px;
4560 | position: absolute;
4561 | z-index: 2;
4562 | }
4563 | .toggle input[type="checkbox"]:checked + label:before {
4564 | border-color: #329043;
4565 | }
4566 | .toggle input[type="checkbox"]:checked + label:after {
4567 | background: #3fb454;
4568 | transform: translateX(0px);
4569 | transition: all 0.4s, width 0.2s linear 0.4s, text-indent 0.3s linear 0.4s;
4570 | width: 78px;
4571 | text-indent: 0;
4572 | }
4573 | `,
4574 | },
4575 | {
4576 | id: "model14",
4577 | css: `.toggle {
4578 | position: relative;
4579 | }
4580 | .toggle:before, .toggle:after {
4581 | position: absolute;
4582 | top: 0;
4583 | z-index: 1;
4584 | height:32px;
4585 | line-height: 32px;
4586 | font-weight: 600;
4587 | font-size: 12px;
4588 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
4589 | }
4590 | .toggle:before {
4591 | content: 'ON';
4592 | left: 10px;
4593 | color: #266c33;
4594 | }
4595 | .toggle:after {
4596 | content: 'OFF';
4597 | right: 10px;
4598 | color: #90201F;
4599 | }
4600 | .toggle input[type="checkbox"] {
4601 | position: absolute;
4602 | left: 0;
4603 | top: 0;
4604 | z-index: 10;
4605 | width: 100%;
4606 | height: 100%;
4607 | cursor: pointer;
4608 | opacity: 0;
4609 | }
4610 | .toggle label {
4611 | position: relative;
4612 | display: flex;
4613 | align-items: center;
4614 | }
4615 | .toggle label:before {
4616 | content: '';
4617 | background: #FFF;
4618 | height: 32px;
4619 | box-shadow: 0 0 1px 2px #0002;
4620 | width: 90px;
4621 | display: inline-block;
4622 | transition: 0.1s linear;
4623 | }
4624 | .toggle label:after {
4625 | content: '';
4626 | position: absolute;
4627 | background-color: #E3666C;
4628 | background-size: 100%;
4629 | border-radius: 0;
4630 | width: 45px;
4631 | height: 32px;
4632 | left: 0;
4633 | top: 0;
4634 | z-index: 5;
4635 | transition: 0.1s linear;
4636 | }
4637 | .toggle input[type="checkbox"]:checked + label:after {
4638 | background: #4BD865;
4639 | left: 45px;
4640 | }
4641 | `,
4642 | },
4643 |
4644 | {
4645 | id: "modelVrtc01",
4646 | css: `.toggle {
4647 | position: relative;
4648 | box-sizing: border-box;
4649 | }
4650 | .toggle input[type="checkbox"] {
4651 | position: absolute;
4652 | left: 0;
4653 | top: 0;
4654 | z-index: 10;
4655 | width: 100%;
4656 | height: 100%;
4657 | cursor: pointer;
4658 | opacity: 0;
4659 | }
4660 | .toggle label {
4661 | position: relative;
4662 | display: flex;
4663 | box-sizing: border-box;
4664 | }
4665 | .toggle label:before {
4666 | content: '';
4667 | width: 32px;
4668 | height: 64px;
4669 | background: #ccc;
4670 | position: relative;
4671 | display: inline-block;
4672 | border-radius: 20px;
4673 | box-sizing: border-box;
4674 | box-shadow: 0 0 4px #0004;
4675 | transition: 0.2s ease-in;
4676 | }
4677 | .toggle label:after {
4678 | content: '';
4679 | position: absolute;
4680 | width: 30px;
4681 | height: 30px;
4682 | border-radius: 50%;
4683 | left: 1px;
4684 | top: 2px;
4685 | z-index: 2;
4686 | background: #fff;
4687 | box-sizing: border-box;
4688 | transition: 0.2s ease-in;
4689 | }
4690 | .toggle input[type="checkbox"]:checked + label:before {
4691 | background: #4BD865;
4692 | }
4693 | .toggle input[type="checkbox"]:checked + label:after {
4694 | top: 32px;
4695 | }
4696 | `,
4697 | },
4698 | {
4699 | id: "modelVrtc02",
4700 | css: `.toggle {
4701 | position: relative;
4702 | box-sizing: border-box;
4703 | }
4704 | .toggle input[type="checkbox"] {
4705 | position: absolute;
4706 | left: 0;
4707 | top: 0;
4708 | z-index: 10;
4709 | width: 100%;
4710 | height: 100%;
4711 | cursor: pointer;
4712 | opacity: 0;
4713 | }
4714 | .toggle label {
4715 | position: relative;
4716 | display: flex;
4717 | box-sizing: border-box;
4718 | }
4719 | .toggle label:before {
4720 | content: '';
4721 | width: 18px;
4722 | height: 64px;
4723 | background: #ccc;
4724 | position: relative;
4725 | display: inline-block;
4726 | border-radius: 20px;
4727 | box-sizing: border-box;
4728 | box-shadow:inset 0 0 4px #0004, inset 0 0 #4BD865;
4729 | transition: 0.2s ease-in;
4730 | }
4731 | .toggle label:after {
4732 | content: '';
4733 | position: absolute;
4734 | width: 32px;
4735 | height: 32px;
4736 | border-radius: 50%;
4737 | left: -6px;
4738 | top: 0px;
4739 | z-index: 2;
4740 | box-shadow: 0 1px 10px #0005;
4741 | background: #fff;
4742 | box-sizing: border-box;
4743 | transition: 0.2s ease-in;
4744 | }
4745 | .toggle input[type="checkbox"]:checked + label:before {
4746 | box-shadow: inset 0 0 4px #0004, inset 0 32px #4BD865;
4747 | }
4748 | .toggle input[type="checkbox"]:checked + label:after {
4749 | top: 32px;
4750 | box-shadow: 0 -1px 10px #0005;
4751 | }
4752 | `,
4753 | },
4754 | {
4755 | id: "modelVrtc03",
4756 | css: `.toggle {
4757 | position: relative;
4758 | box-sizing: border-box;
4759 | }
4760 | .toggle input[type="checkbox"] {
4761 | position: absolute;
4762 | left: 0;
4763 | top: 0;
4764 | z-index: 10;
4765 | width: 100%;
4766 | height: 100%;
4767 | cursor: pointer;
4768 | opacity: 0;
4769 | }
4770 | .toggle label {
4771 | position: relative;
4772 | display: flex;
4773 | box-sizing: border-box;
4774 | }
4775 | .toggle label:before {
4776 | content: '';
4777 | width: 32px;
4778 | height: 60px;
4779 | background: linear-gradient(#DDD, #DDD) no-repeat center;
4780 | background-size: 2px 64px;
4781 | display: inline-block;
4782 | transition: 0.2s ease-in;
4783 | }
4784 | .toggle label:after {
4785 | content: '';
4786 | position: absolute;
4787 | width: 32px;
4788 | height: 32px;
4789 | border-radius: 50%;
4790 | left: 0;
4791 | top: 0px;
4792 | z-index: 2;
4793 | background: #BBB;
4794 | box-sizing: border-box;
4795 | transition: 0.2s ease-in;
4796 | }
4797 | .toggle input[type="checkbox"]:checked + label:before {
4798 | background-image: linear-gradient(#77C2BB, #77C2BB)
4799 | }
4800 | .toggle input[type="checkbox"]:checked + label:after {
4801 | top: 28px;
4802 | background: #009688;
4803 | }`,
4804 | },
4805 | {
4806 | id: "modelVrtc04",
4807 | css: `.toggle {
4808 | position: relative;
4809 | }
4810 | .toggle input[type="checkbox"] {
4811 | position: absolute;
4812 | left: 0;
4813 | top: 0;
4814 | z-index: 10;
4815 | width: 100%;
4816 | height: 100%;
4817 | cursor: pointer;
4818 | opacity: 0;
4819 | }
4820 | .toggle label {
4821 | position: relative;
4822 | display: flex;
4823 | align-items: center;
4824 | }
4825 | .toggle label:before {
4826 | content: '';
4827 | width: 32px;
4828 | height: 64px;
4829 | position: relative;
4830 | border-radius: 4px;
4831 | border: 2px solid #333;
4832 | background: #fff;
4833 | display: inline-block;
4834 | transition: 0.25s ease-in;
4835 | }
4836 | .toggle label:after {
4837 | content: '';
4838 | position: absolute;
4839 | border-radius: 4px;
4840 | background: #333;
4841 | width: 28px;
4842 | height: 28px;
4843 | left: 4px;
4844 | top: 4px;
4845 | z-index: 2;
4846 | transition: 0.2s ease-in;
4847 | }
4848 | .toggle input[type="checkbox"]:checked + label:before {
4849 | background: #333;
4850 | }
4851 | .toggle input[type="checkbox"]:checked + label:after {
4852 | background: #FFF;
4853 | transform: translateY(32px);
4854 | }`,
4855 | },
4856 | {
4857 | id: "modelVrtc05",
4858 | css: `.toggle {
4859 | position: relative;
4860 | height: 72px;
4861 | display: flex;
4862 | align-items: center;
4863 | box-sizing:border-box;
4864 | }
4865 | .toggle input[type="checkbox"] {
4866 | position: absolute;
4867 | left: 0;
4868 | top: 0;
4869 | z-index: 10;
4870 | width: 100%;
4871 | height: 100%;
4872 | cursor: pointer;
4873 | opacity: 0;
4874 | }
4875 | .toggle label {
4876 | position: relative;
4877 | display: flex;
4878 | height: 100%;
4879 | align-items: center;
4880 | box-sizing:border-box;
4881 | }
4882 | .toggle label:before {
4883 | content: '';
4884 | display: inline-block;
4885 | width: 36px;
4886 | height: 72px;
4887 | border: 1px solid #ccc;
4888 | box-sizing:border-box;
4889 | border-radius: 50px;
4890 | transition: 0.2s ease-in;
4891 | background: #f08270;
4892 | box-shadow: inset 0 0 8px #0002;
4893 | }
4894 | .toggle label:after {
4895 | content: '';
4896 | position: absolute;
4897 | top: 0;
4898 | left: 0;
4899 | box-sizing:border-box;
4900 | width: 36px;
4901 | height: 36px;
4902 | border: 6px solid #ededec;
4903 | border-radius: 50px;
4904 | background: #fff;
4905 | box-shadow: 0 2px 5px #333;
4906 | background: #d5d4cd;
4907 | background: linear-gradient(#d5d4cd 0%, #FFF 100%);
4908 | transition: 0.2s ease-in;
4909 | }
4910 | .toggle input[type="checkbox"]:checked + label:before {
4911 | box-shadow:inset 0 0 8px #0002,
4912 | inset 0 36px #49dccf;
4913 | }
4914 | .toggle input[type="checkbox"]:checked + label:after {
4915 | transform: translateY(36px);
4916 | }`,
4917 | },
4918 | {
4919 | id: "modelVrtc06",
4920 | css: `.toggle {
4921 | position: relative;
4922 | height: 72px;
4923 | display: flex;
4924 | align-items: center;
4925 | box-sizing:border-box;
4926 | }
4927 | .toggle input[type="checkbox"] {
4928 | position: absolute;
4929 | left: 0;
4930 | top: 0;
4931 | z-index: 10;
4932 | width: 100%;
4933 | height: 100%;
4934 | cursor: pointer;
4935 | opacity: 0;
4936 | }
4937 | .toggle label {
4938 | position: relative;
4939 | display: flex;
4940 | height: 100%;
4941 | align-items: center;
4942 | box-sizing:border-box;
4943 | }
4944 | .toggle label:before {
4945 | content: '';
4946 | display: inline-block;
4947 | width: 24px;
4948 | height: 72px;
4949 | border: 1px solid #BBB;
4950 | box-sizing:border-box;
4951 | border-radius: 50px;
4952 | transition: 0.2s ease-in;
4953 | background: #f08270;
4954 | box-shadow: inset 0 0 8px #0005, 0 0 0 4px #EEE, inset 0 0 #49dccf;
4955 | }
4956 | .toggle label:after {
4957 | content: '';
4958 | position: absolute;
4959 | top: 0;
4960 | left: 0;
4961 | box-sizing:border-box;
4962 | width: 24px;
4963 | height: 36px;
4964 | border: 6px solid #ededec;
4965 | border-radius: 50px;
4966 | background: #fff;
4967 | box-shadow: 0 2px 5px #333;
4968 | background: #d5d4cd;
4969 | background: linear-gradient(#d5d4cd 0%, #FFF 100%);
4970 | transition: 0.2s ease-in;
4971 | }
4972 | .toggle input[type="checkbox"]:checked + label:before {
4973 | box-shadow: inset 0 0 8px #0005, 0 0 0 4px #EEE, inset 0 36px #49dccf;
4974 | }
4975 | .toggle input[type="checkbox"]:checked + label:after {
4976 | transform: translateY(36px);
4977 | }`,
4978 | },
4979 | {
4980 | id: "modelVrtc07",
4981 | css: `.toggle {
4982 | position: relative;
4983 | box-sizing: border-box;
4984 | }
4985 | .toggle input[type="checkbox"] {
4986 | position: absolute;
4987 | left: 0;
4988 | top: 0;
4989 | z-index: 10;
4990 | width: 100%;
4991 | height: 100%;
4992 | cursor: pointer;
4993 | opacity: 0;
4994 | }
4995 | .toggle label {
4996 | position: relative;
4997 | display: flex;
4998 | align-items: center;
4999 | height: 72px;
5000 | box-sizing: border-box;
5001 | }
5002 | .toggle label:before {
5003 | content: "";
5004 | width: 36px;
5005 | height: 72px;
5006 | border-radius: 20px;
5007 | position: relative;
5008 | display: inline-block;
5009 | transition: 0.3s ease-in;
5010 | box-sizing: border-box;
5011 | background-color: #333;
5012 | box-shadow: 0 0 0 2px #EEE , 0 0 10px #0003;
5013 | }
5014 | .toggle label:after {
5015 | content: "";
5016 | position: absolute;
5017 | width: 30px;
5018 | height: 30px;
5019 | background: #FFF;
5020 | border-radius: 20px;
5021 | box-sizing: border-box;
5022 | left: 0;
5023 | top: 0;
5024 | transform: translate(3px, 3px) rotate(0deg);
5025 | transition: 0.3s ease-in;
5026 | transform-origin: 33px 33px;
5027 | }
5028 | .toggle input[type="checkbox"]:checked + label:after {
5029 | transform: translate(3px, 3px) rotate(-90deg);
5030 | background: #333;
5031 | }
5032 | .toggle input[type="checkbox"]:checked + label:before {
5033 | transform: rotate(180deg);
5034 | background: #fff;
5035 | }`,
5036 | },
5037 | {
5038 | id: "modelVrtc08",
5039 | css: `.toggle {
5040 | position: relative;
5041 | box-sizing: border-box;
5042 | }
5043 | .toggle input[type="checkbox"] {
5044 | position: absolute;
5045 | left: 0;
5046 | top: 0;
5047 | z-index: 10;
5048 | width: 100%;
5049 | height: 100%;
5050 | cursor: pointer;
5051 | opacity: 0;
5052 | }
5053 | .toggle label {
5054 | position: relative;
5055 | display: flex;
5056 | box-sizing: border-box;
5057 | }
5058 | .toggle label:before {
5059 | content: '';
5060 | width: 28px;
5061 | height: 60px;
5062 | background: linear-gradient(#BBB, #BBB) no-repeat center;
5063 | background-size: 2px 64px;
5064 | display: inline-block;
5065 | transition: 0.2s ease-in;
5066 | }
5067 | .toggle label:after {
5068 | content: '';
5069 | position: absolute;
5070 | width: 28px;
5071 | height: 28px;
5072 | border: 6px solid #BBB;
5073 | border-radius: 50%;
5074 | left: 0;
5075 | top: 0;
5076 | z-index: 2;
5077 | background: #FFF;
5078 | box-sizing: border-box;
5079 | transition: 0.2s ease-in;
5080 | }
5081 | .toggle input[type="checkbox"]:checked + label:before {
5082 | background-image: linear-gradient(#77C2BB, #77C2BB)
5083 | }
5084 | .toggle input[type="checkbox"]:checked + label:after {
5085 | top: 32px;
5086 | border-color: #009688;
5087 | }`,
5088 | },
5089 | {
5090 | id: "modelVrtc09",
5091 | css: `.toggle {
5092 | position: relative;
5093 | box-sizing: border-box;
5094 | }
5095 | .toggle input[type="checkbox"] {
5096 | position: absolute;
5097 | left: 0;
5098 | top: 0;
5099 | z-index: 10;
5100 | width: 100%;
5101 | height: 100%;
5102 | cursor: pointer;
5103 | opacity: 0;
5104 | }
5105 | .toggle label {
5106 | position: relative;
5107 | display: block;
5108 | color: #009688;
5109 | box-sizing: border-box;
5110 | }
5111 | .toggle label:first-line {
5112 | color: #CCC;
5113 | }
5114 | .toggle label:before {
5115 | content: "FF N";
5116 | font-family: arial;
5117 | font-size: 24px;
5118 | font-weight: 800;
5119 | width: 50px;
5120 | height: 60px;
5121 | display: block;
5122 | box-sizing: border-box;
5123 | padding-left: 28px;
5124 | padding-top: 3px;
5125 | margin-right: 10px;
5126 | line-height: 28px;
5127 | background-image: radial-gradient(circle 13px, #EEE 100%, transparent 0),
5128 | radial-gradient(circle 13px, #EEE 100%, transparent 0),
5129 | linear-gradient(#EEE, #EEE);
5130 | background-repeat: no-repeat;
5131 | background-size: auto auto, auto auto, 26px 28px;
5132 | background-position: -12px -15px, -12px 15px, 0px 15px;
5133 | transition: 0.2s ease-in;
5134 | }
5135 | .toggle label:after {
5136 | content: "";
5137 | position: absolute;
5138 | width: 22px;
5139 | height: 22px;
5140 | border: 4px solid #BBB;
5141 | border-radius: 50%;
5142 | left: 2px;
5143 | top: 5px;
5144 | z-index: 2;
5145 | box-sizing: border-box;
5146 | transition: 0.2s ease-in;
5147 | }
5148 | .toggle input[type="checkbox"]:checked + label:after {
5149 | top: 33px;
5150 | border-color: #009688;
5151 | }
5152 | `,
5153 | },
5154 |
5155 |
5156 |
5157 |
5158 |
5159 | {
5160 | id: "modelcs15",
5161 | css: `.toggle {
5162 | display: inline-block;
5163 | position: relative;
5164 | border-radius: 40px;
5165 | height: 50px;
5166 | width: 125px;
5167 | background: #fff;
5168 | transition: 0.2s ease-in;
5169 | border: 1px solid #ddd;
5170 | box-sizing: border-box;
5171 | }
5172 | .toggle:hover {
5173 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
5174 | }
5175 | .toggle input {
5176 | position: absolute;
5177 | left: 0;
5178 | top: 0;
5179 | width: 100%;
5180 | height: 100%;
5181 | z-index: 6;
5182 | opacity: 0;
5183 | cursor: pointer;
5184 | }
5185 | .toggle label {
5186 | height: 50px;
5187 | width: 50px;
5188 | position: absolute;
5189 | border-radius: 50%;
5190 | border: 10px solid #2752dd;
5191 | right: 0;
5192 | box-sizing: border-box;
5193 | transition: transform 0.25s 0.2s ease-out , border 0.2s ease-out , right 0.2s ease-out;
5194 | transform: rotate(-135deg);
5195 | }
5196 | .toggle label:after {
5197 | content: '';
5198 | position: absolute;
5199 | left: 50%;
5200 | top: 100%;
5201 | width: 10px;
5202 | height: 25px;
5203 | background: #2752dd;
5204 | box-sizing: border-box;
5205 | transform: translateX(-50%);
5206 | transition: 0.2s ease-out;
5207 | }
5208 | .toggle label:before {
5209 | content: '';
5210 | position: absolute;
5211 | box-sizing: border-box;
5212 | border-bottom: 10px solid #2752dd;
5213 | border-right: 10px solid #2752dd;
5214 | top: 37px;
5215 | left: 3px;
5216 | width: 25px;
5217 | height: 25px;
5218 | transform: rotate(45deg);
5219 | transition: 0.2s ease-out;
5220 | }
5221 | .toggle input:checked + label {
5222 | border-color: #fc2695;
5223 | right: 75px;
5224 | transform: rotate(0deg);
5225 | }
5226 | .toggle input:checked + label:after {
5227 | background: #fc2695;
5228 | height: 35px;
5229 | }
5230 | .toggle input:checked + label:before {
5231 | border-right: none;
5232 | border-color: #fc2695;
5233 | transform: rotate(0deg);
5234 | top: 32px;
5235 | }
5236 | `,
5237 | },
5238 |
5239 | {
5240 | id: "modelShX1",
5241 | css: `.toggle {
5242 | position: relative;
5243 | box-sizing: border-box;
5244 | }
5245 | .toggle input[type="checkbox"] {
5246 | position: absolute;
5247 | left: 0;
5248 | top: 0;
5249 | z-index: 10;
5250 | width: 100%;
5251 | height: 100%;
5252 | cursor: pointer;
5253 | opacity: 0;
5254 | }
5255 | .toggle label {
5256 | position: relative;
5257 | display: flex;
5258 | align-items: center;
5259 | box-sizing: border-box;
5260 | }
5261 | .toggle label:before {
5262 | content: '';
5263 | width: 70px;
5264 | height: 40px;
5265 | background: #fff;
5266 | border: 2px solid #DDD;
5267 | box-shadow: inset -30px 0 0 #666;
5268 | position: relative;
5269 | display: inline-block;
5270 | border-radius: 20px;
5271 | box-sizing: border-box;
5272 | transition: 0.25s ease-in;
5273 | }
5274 |
5275 | .toggle label:after {
5276 | content: '';
5277 | width: 20px;
5278 | height: 20px;
5279 | position: absolute;
5280 | left: 10px;
5281 | top: 10px;
5282 | border-radius: 50%;
5283 | background: #FFF;
5284 | box-shadow: inset -8px -5px #333;
5285 | transition: 0.2s ease-in-out;
5286 | }
5287 |
5288 | .toggle input[type="checkbox"]:checked + label:before {
5289 | box-shadow: inset 30px 0 0 #ffeb00;
5290 | }
5291 | .toggle input[type="checkbox"]:checked + label:after {
5292 | box-shadow: inset 0 0 0 2px #FFF;
5293 | background: #ffbc00;
5294 | left: 39px;
5295 | top: 8px;
5296 | border: 2px dashed #FFF;
5297 | }
5298 | `,
5299 | },
5300 |
5301 |
5302 |
5303 |
5304 | {
5305 | id: "modelShXLa2",
5306 | css: `.toggle {
5307 | position: relative;
5308 | box-sizing: border-box;
5309 | }
5310 | .toggle input[type="checkbox"] {
5311 | position: absolute;
5312 | left: 0;
5313 | top: 0;
5314 | z-index: 10;
5315 | width: 100%;
5316 | height: 100%;
5317 | cursor: pointer;
5318 | opacity: 0;
5319 | }
5320 | .toggle label {
5321 | position: relative;
5322 | display: flex;
5323 | align-items: center;
5324 | box-sizing: border-box;
5325 | }
5326 | .toggle label:before {
5327 | content: '';
5328 | width: 70px;
5329 | height: 40px;
5330 | background: #fff;
5331 | border: 2px solid #b3c5fe;
5332 | box-shadow: inset -30px 0 0 #b3c5fe;
5333 | position: relative;
5334 | display: inline-block;
5335 | border-radius: 20px;
5336 | box-sizing: border-box;
5337 | transition: 0.25s ease-in;
5338 | }
5339 |
5340 | .toggle label:after {
5341 | content: "";
5342 | width: 4px;
5343 | height: 4px;
5344 | position: absolute;
5345 | left: 12px;
5346 | top: 15px;
5347 | background: #FFF;
5348 | border-radius: 7px;
5349 | border: 5px solid #b3c5fe;
5350 | transition: 0.2s ease-in-out;
5351 | box-shadow: -2px -4px 0 -2px #fff,
5352 | 0px -8px 0 -4px #fff,
5353 | 0px -8px 0 -2px #b3c5fe;
5354 | }
5355 |
5356 | .toggle input[type="checkbox"]:checked + label:before {
5357 | box-shadow: inset 30px 0 0 #215aff;
5358 | border-color: #215aff;
5359 | }
5360 | .toggle input[type="checkbox"]:checked + label:after {
5361 | left: 45px;
5362 | border-color: #215aff;
5363 | box-shadow: 0px -8px 0 -4px #fff,
5364 | 0px -8px 0 -2px #215aff;
5365 | }
5366 | `
5367 | },
5368 | {
5369 | id: "modelShX2",
5370 | css: `.toggle {
5371 | position: relative;
5372 | box-sizing: border-box;
5373 | }
5374 | .toggle input[type="checkbox"] {
5375 | position: absolute;
5376 | left: 0;
5377 | top: 0;
5378 | z-index: 10;
5379 | width: 100%;
5380 | height: 100%;
5381 | cursor: pointer;
5382 | opacity: 0;
5383 | }
5384 | .toggle label {
5385 | position: relative;
5386 | display: flex;
5387 | align-items: center;
5388 | box-sizing: border-box;
5389 | }
5390 | .toggle label:before {
5391 | content: '';
5392 | width: 84px;
5393 | height: 42px;
5394 | position: relative;
5395 | display: inline-block;
5396 | background: #ffed00;
5397 | border-radius: 46px;
5398 | border: 2px solid #ffd000;
5399 | transition: 0.2s ease-in;
5400 | box-sizing: border-box;
5401 | }
5402 | .toggle label:after {
5403 | content: '🔔';
5404 | position: absolute;
5405 | width: 32px;
5406 | height: 32px;
5407 | left: 8px;
5408 | top: 6px;
5409 | z-index: 2;
5410 | display: grid;
5411 | place-content: center;
5412 | font-size: 30px;
5413 | box-sizing: border-box;
5414 | transition: 0.2s ease-in;
5415 | }
5416 | .toggle input[type="checkbox"]:checked + label:before {
5417 | background: #CCC;
5418 | border-color: #BBB;
5419 | }
5420 | .toggle input[type="checkbox"]:checked + label:after {
5421 | content: '🔕' ;
5422 | transform: translatex(34px);
5423 | }
5424 | `
5425 | },
5426 | {
5427 | id: "modelEM10",
5428 | css: `.toggle {
5429 | position: relative;
5430 | box-sizing: border-box;
5431 | }
5432 | .toggle input[type="checkbox"] {
5433 | position: absolute;
5434 | left: 0;
5435 | top: 0;
5436 | z-index: 10;
5437 | width: 100%;
5438 | height: 100%;
5439 | cursor: pointer;
5440 | opacity: 0;
5441 | }
5442 | .toggle label {
5443 | position: relative;
5444 | display: flex;
5445 | align-items: center;
5446 | box-sizing: border-box;
5447 | }
5448 | .toggle label:before {
5449 | content: '';
5450 | width: 84px;
5451 | height: 42px;
5452 | position: relative;
5453 | display: inline-block;
5454 | background: #ffed00;
5455 | border-radius: 46px;
5456 | border: 2px solid #ffd000;
5457 | box-sizing: border-box;
5458 | }
5459 | .toggle label:after {
5460 | content: '😞';
5461 | position: absolute;
5462 | width: 32px;
5463 | height: 32px;
5464 | left: 4px;
5465 | top: 6px;
5466 | z-index: 2;
5467 | display: grid;
5468 | place-content: center;
5469 | font-size: 32px;
5470 | box-sizing: border-box;
5471 | transition: 0.2s ease-in;
5472 | }
5473 | .toggle input[type="checkbox"]:checked + label:after {
5474 | content: '😊';
5475 | transform: rotate(360deg);
5476 | left: 48px;
5477 | }
5478 | `,
5479 | },
5480 | {
5481 | id: "modelEM12",
5482 | css: `.toggle {
5483 | position: relative;
5484 | box-sizing: border-box;
5485 | }
5486 | .toggle input[type="checkbox"] {
5487 | position: absolute;
5488 | left: 0;
5489 | top: 0;
5490 | z-index: 10;
5491 | width: 100%;
5492 | height: 100%;
5493 | cursor: pointer;
5494 | opacity: 0;
5495 | }
5496 | .toggle label {
5497 | position: relative;
5498 | display: flex;
5499 | align-items: center;
5500 | box-sizing: border-box;
5501 | }
5502 | .toggle label:before {
5503 | content: '';
5504 | width: 84px;
5505 | height: 42px;
5506 | position: relative;
5507 | display: inline-block;
5508 | background: #ffed00;
5509 | border-radius: 46px;
5510 | border: 2px solid #ffd000;
5511 | box-sizing: border-box;
5512 | }
5513 | .toggle label:after {
5514 | content: '👎';
5515 | position: absolute;
5516 | width: 32px;
5517 | height: 32px;
5518 | left: 4px;
5519 | top: 6px;
5520 | z-index: 2;
5521 | display: grid;
5522 | place-content: center;
5523 | font-size: 32px;
5524 | box-sizing: border-box;
5525 | transition: 0.2s ease-in;
5526 | }
5527 | .toggle input[type="checkbox"]:checked + label:after {
5528 | transform: rotateX(180deg) translate(-3px , 3px);
5529 | left: 48px;
5530 | }
5531 | `,
5532 | },
5533 | {
5534 | id: "modelEMLs1",
5535 | css: `.toggle {
5536 | position: relative;
5537 | box-sizing: border-box;
5538 | height: 36px;
5539 | }
5540 | .toggle input[type="checkbox"] {
5541 | position: absolute;
5542 | left: 0;
5543 | top: 0;
5544 | z-index: 10;
5545 | width: 100%;
5546 | height: 100%;
5547 | cursor: pointer;
5548 | opacity: 0;
5549 | }
5550 | .toggle label {
5551 | position: relative;
5552 | display: flex;
5553 | height: 100%;
5554 | align-items: center;
5555 | box-sizing: border-box;
5556 | }
5557 | .toggle label:before {
5558 | content: "";
5559 | width: 80px;
5560 | height: 8px;
5561 | position: relative;
5562 | display: inline-block;
5563 | box-shadow: inset 0 0 #00afff;
5564 | border-radius: 46px;
5565 | border: 1px solid #b6c4d0;
5566 | transition: 0.2s cubic-bezier(0.4, 0, 1, 1);
5567 | box-sizing: border-box;
5568 | }
5569 | .toggle label:after {
5570 | content:'🔇' ;
5571 | line-height: 1;
5572 | position: absolute;
5573 | left: 0;
5574 | top: -2px;
5575 | z-index: 2;
5576 | display: grid;
5577 | place-content: center;
5578 | font-size: 32px;
5579 | box-sizing: border-box;
5580 | transition: 0.2s cubic-bezier(0.4, 0, 1, 1);
5581 | }
5582 | .toggle input[type="checkbox"]:checked + label:before {
5583 | box-shadow: inset 80px 0 #00afff;
5584 | }
5585 | .toggle input[type="checkbox"]:checked + label:after {
5586 | content: '🔊' ;
5587 | transform: translatex(60px);
5588 | }
5589 | `,
5590 | },
5591 | {
5592 | id: "modelEM13",
5593 | css: `.toggle {
5594 | position: relative;
5595 | box-sizing: border-box;
5596 | }
5597 | .toggle input[type="checkbox"] {
5598 | position: absolute;
5599 | left: 0;
5600 | top: 0;
5601 | z-index: 10;
5602 | width: 100%;
5603 | height: 100%;
5604 | cursor: pointer;
5605 | opacity: 0;
5606 | }
5607 | .toggle label {
5608 | position: relative;
5609 | display: flex;
5610 | align-items: center;
5611 | box-sizing: border-box;
5612 | }
5613 | .toggle label:before {
5614 | content: '';
5615 | width: 84px;
5616 | height: 42px;
5617 | position: relative;
5618 | display: inline-block;
5619 | border:2px solid #999;
5620 | border-radius: 20px;
5621 | box-sizing: border-box;
5622 | }
5623 | .toggle label:after {
5624 | content: '🔓';
5625 | position: absolute;
5626 | width: 32px;
5627 | height: 32px;
5628 | left: 6px;
5629 | top: 6px;
5630 | z-index: 2;
5631 | display: grid;
5632 | place-content: center;
5633 | font-size: 32px;
5634 | box-sizing: border-box;
5635 | transition: 0.2s ease-in;
5636 | }
5637 | .toggle input[type="checkbox"]:checked + label:after {
5638 | content: '🔒';
5639 | left: 48px;
5640 | }
5641 | `,
5642 | },
5643 | {
5644 | id: "modelChkBx1",
5645 | css: `.toggle {
5646 | position: relative;
5647 | box-sizing: border-box;
5648 | }
5649 | .toggle input[type="checkbox"] {
5650 | position: absolute;
5651 | left: 0;
5652 | top: 0;
5653 | z-index: 10;
5654 | width: 100%;
5655 | height: 100%;
5656 | cursor: pointer;
5657 | opacity: 0;
5658 | }
5659 | .toggle label {
5660 | position: relative;
5661 | display: flex;
5662 | align-items: center;
5663 | height: 30px;
5664 | box-sizing: border-box;
5665 | }
5666 | .toggle label:before {
5667 | content: "";
5668 | width: 28px;
5669 | height: 28px;
5670 | background: #CCC;
5671 | margin-right: 5px;
5672 | display: inline-block;
5673 | transition: 0.2s ease-in;
5674 | }
5675 | .toggle label:after {
5676 | content: "";
5677 | position: absolute;
5678 | left: 10px;
5679 | top: 5px;
5680 | z-index: 2;
5681 | width: 8px;
5682 | height: 16px;
5683 | border-bottom: 2px solid #FFF;
5684 | border-right: 2px solid #FFF;
5685 | transform: rotate(45deg);
5686 | box-sizing: border-box;
5687 | opacity: 0;
5688 | transition: 0.2s ease-in;
5689 | }
5690 | .toggle input[type="checkbox"]:checked + label:before {
5691 | background-color: #009688;
5692 | }
5693 | .toggle input[type="checkbox"]:checked + label:after {
5694 | opacity: 1;
5695 | }
5696 | `,
5697 | },
5698 | {
5699 | id: "modelChkBx2",
5700 | css: `.toggle {
5701 | position: relative;
5702 | box-sizing: border-box;
5703 | }
5704 | .toggle input[type="checkbox"] {
5705 | position: absolute;
5706 | left: 0;
5707 | top: 0;
5708 | z-index: 10;
5709 | width: 100%;
5710 | height: 100%;
5711 | cursor: pointer;
5712 | opacity: 0;
5713 | }
5714 | .toggle label {
5715 | position: relative;
5716 | display: flex;
5717 | align-items: center;
5718 | height: 30px;
5719 | box-sizing: border-box;
5720 | }
5721 | .toggle label:before {
5722 | content: "";
5723 | width: 26px;
5724 | height: 26px;
5725 | margin-right: 5px;
5726 | border-radius: 4px;
5727 | box-sizing: border-box;
5728 | border: 2px solid #1565C0;
5729 | display: inline-block;
5730 | transition: 0.2s ease-in;
5731 | }
5732 | .toggle label:after {
5733 | content: "";
5734 | position: absolute;
5735 | left: 10px;
5736 | top: 5px;
5737 | z-index: 2;
5738 | width: 8px;
5739 | height: 16px;
5740 | border-bottom: 2px solid #FFF;
5741 | border-right: 2px solid #FFF;
5742 | transform: rotate(45deg);
5743 | box-sizing: border-box;
5744 | opacity: 0;
5745 | transition: 0.2s 0.2s ease-in;
5746 | }
5747 | .toggle input[type="checkbox"]:checked + label:before {
5748 | background-color: #1565C0;
5749 | }
5750 | .toggle input[type="checkbox"]:checked + label:after {
5751 | opacity: 1;
5752 | }
5753 | `,
5754 | },
5755 | {
5756 | id: "modelChkBx3",
5757 | css: `.toggle {
5758 | position: relative;
5759 | box-sizing: border-box;
5760 | }
5761 | .toggle input[type="checkbox"] {
5762 | position: absolute;
5763 | left: 0;
5764 | top: 0;
5765 | z-index: 10;
5766 | width: 100%;
5767 | height: 100%;
5768 | cursor: pointer;
5769 | opacity: 0;
5770 | }
5771 | .toggle label {
5772 | position: relative;
5773 | display: flex;
5774 | align-items: center;
5775 | height: 30px;
5776 | box-sizing: border-box;
5777 | }
5778 | .toggle label:before {
5779 | content: "";
5780 | width: 26px;
5781 | height: 26px;
5782 | margin-right: 5px;
5783 | background: #fff;
5784 | box-sizing: border-box;
5785 | border: 2px solid #333;
5786 | display: inline-block;
5787 | transition: 0.2s ease-in;
5788 | }
5789 | .toggle label:after {
5790 | content: "";
5791 | position: absolute;
5792 | left: 13px;
5793 | top: -2px;
5794 | z-index: 2;
5795 | width: 10px;
5796 | height: 22px;
5797 | border-bottom: 3px solid #3330;
5798 | border-right: 3px solid #3330;
5799 | box-shadow: 0 0 #fff0;
5800 | background: #fff0;
5801 | transform: rotate(45deg);
5802 | box-sizing: border-box;
5803 | transition: background 0.2s ease-in, box-shadow 0.2s ease-in;
5804 | }
5805 | .toggle input[type="checkbox"]:checked + label:after {
5806 | border-color: #333;
5807 | box-shadow: 6px 0 #fff;
5808 | background: #fff;
5809 | transition: border 0.3s ease-in;
5810 | }
5811 | `,
5812 | },
5813 | {
5814 | id: "modelChkBx4",
5815 | css: `.toggle {
5816 | position: relative;
5817 | box-sizing: border-box;
5818 | }
5819 | .toggle input[type="checkbox"] {
5820 | position: absolute;
5821 | left: 0;
5822 | top: 0;
5823 | z-index: 10;
5824 | width: 100%;
5825 | height: 100%;
5826 | cursor: pointer;
5827 | opacity: 0;
5828 | }
5829 | .toggle label {
5830 | position: relative;
5831 | display: flex;
5832 | align-items: center;
5833 | height: 30px;
5834 | box-sizing: border-box;
5835 | }
5836 | .toggle label:before {
5837 | content: "";
5838 | width: 26px;
5839 | height: 26px;
5840 | margin-right: 5px;
5841 | background: #38b2ac;
5842 | border-radius: 6px;
5843 | box-sizing: border-box;
5844 | display: inline-block;
5845 | transition: 0.2s ease-in;
5846 | }
5847 | .toggle label:after {
5848 | content: "";
5849 | position: absolute;
5850 | left: 5px;
5851 | top: 14px;
5852 | z-index: 2;
5853 | width: 16px;
5854 | height: 0px;
5855 | border-bottom: 2px solid #fff;
5856 | border-left: 2px solid #fff;
5857 | transform: translateY(0px) rotate(0deg);
5858 | box-sizing: border-box;
5859 | transition: 0.2s cubic-bezier(0.55, 0.06, 0.68, 0.19);
5860 | }
5861 | .toggle input[type="checkbox"]:checked + label:after {
5862 | height: 8px;
5863 | transform: translateY(-5px) rotate(-45deg);
5864 | }
5865 | `,
5866 | },
5867 | {
5868 | id: "modelChkBx5",
5869 | css: `.toggle {
5870 | position: relative;
5871 | box-sizing: border-box;
5872 | }
5873 | .toggle input[type="checkbox"] {
5874 | position: absolute;
5875 | left: 0;
5876 | top: 0;
5877 | z-index: 10;
5878 | width: 100%;
5879 | height: 100%;
5880 | cursor: pointer;
5881 | opacity: 0;
5882 | }
5883 | .toggle label {
5884 | position: relative;
5885 | display: flex;
5886 | align-items: center;
5887 | height: 30px;
5888 | box-sizing: border-box;
5889 | }
5890 | .toggle label:before {
5891 | content: "";
5892 | background: #ecf0f3;
5893 | box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6;
5894 | cursor: pointer;
5895 | position: relative;
5896 | display: flex;
5897 | justify-content: center;
5898 | align-items: center;
5899 | border-radius: 0.5rem;
5900 | width: 32px;
5901 | height: 32px;
5902 | transition: 0.2s ease-in;
5903 | }
5904 | .toggle label:after {
5905 | content: "";
5906 | position: absolute;
5907 | left: 8px;
5908 | top: 14px;
5909 | z-index: 2;
5910 | width: 16px;
5911 | height: 8px;
5912 | transform: translateY(-5px) rotate(-45deg);
5913 | border-bottom: 2px solid #0003;
5914 | border-left: 2px solid #0003;
5915 | box-sizing: border-box;
5916 | transition: 0.2s ease-in;
5917 | }
5918 | .toggle input[type="checkbox"]:checked + label:before {
5919 | background: #ecf0f3;
5920 | box-shadow: 4px 4px 4px 0px #d1d9e6 inset, -4px -4px 4px 0px #f4f8ff inset;
5921 | }
5922 | .toggle input[type="checkbox"]:checked + label:after {
5923 | border-color: #6d5dfc;
5924 | }
5925 | `,
5926 | },
5927 | {
5928 | id: "modelChkBx6",
5929 | css: `.toggle {
5930 | position: relative;
5931 | box-sizing: border-box;
5932 | }
5933 | .toggle input[type="checkbox"] {
5934 | position: absolute;
5935 | left: 0;
5936 | top: 0;
5937 | z-index: 10;
5938 | width: 100%;
5939 | height: 100%;
5940 | cursor: pointer;
5941 | opacity: 0;
5942 | }
5943 | .toggle label {
5944 | position: relative;
5945 | display: flex;
5946 | align-items: center;
5947 | height: 30px;
5948 | box-sizing: border-box;
5949 | }
5950 | .toggle label:before {
5951 | content: "";
5952 | background: #ecf0f3;
5953 | box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6;
5954 | cursor: pointer;
5955 | position: relative;
5956 | display: flex;
5957 | justify-content: center;
5958 | align-items: center;
5959 | border-radius: 6px;
5960 | width: 32px;
5961 | height: 32px;
5962 | transition: 0.2s ease-in;
5963 | }
5964 | .toggle label:after {
5965 | content: "";
5966 | position: absolute;
5967 | left: 8px;
5968 | top: 8px;
5969 | z-index: 2;
5970 | width: 16px;
5971 | height: 16px;
5972 | border-radius: 4px;
5973 | background: #0001;
5974 | box-sizing: border-box;
5975 | transition: 0.2s ease-in;
5976 | }
5977 | .toggle input[type="checkbox"]:checked + label:before {
5978 | background: #ecf0f3;
5979 | box-shadow: 4px 4px 4px 0px #d1d9e6 inset, -4px -4px 4px 0px #f4f8ff inset;
5980 | }
5981 | .toggle input[type="checkbox"]:checked + label:after {
5982 | background: #6d5dfc;
5983 | }
5984 | `,
5985 | },
5986 | {
5987 | id: "modelChkBx7",
5988 | css: `.toggle {
5989 | position: relative;
5990 | box-sizing: border-box;
5991 | }
5992 | .toggle input[type="checkbox"] {
5993 | position: absolute;
5994 | left: 0;
5995 | top: 0;
5996 | z-index: 10;
5997 | width: 100%;
5998 | height: 100%;
5999 | cursor: pointer;
6000 | opacity: 0;
6001 | }
6002 | .toggle label {
6003 | position: relative;
6004 | display: flex;
6005 | align-items: center;
6006 | height: 30px;
6007 | box-sizing: border-box;
6008 | }
6009 | .toggle label:before {
6010 | content: "";
6011 | background: #ecf0f3;
6012 | box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6;
6013 | cursor: pointer;
6014 | position: relative;
6015 | display: flex;
6016 | justify-content: center;
6017 | align-items: center;
6018 | border-radius: 50%;
6019 | width: 32px;
6020 | height: 32px;
6021 | transition: 0.2s ease-in;
6022 | }
6023 | .toggle label:after {
6024 | content: "";
6025 | position: absolute;
6026 | left: 8px;
6027 | top: 8px;
6028 | z-index: 2;
6029 | width: 16px;
6030 | height: 16px;
6031 | border-radius: 50%;
6032 | background: #0001;
6033 | box-sizing: border-box;
6034 | transition: 0.2s ease-in;
6035 | }
6036 | .toggle input[type="checkbox"]:checked + label:before {
6037 | background: #ecf0f3;
6038 | box-shadow: 4px 4px 4px 0px #d1d9e6 inset, -4px -4px 4px 0px #f4f8ff inset;
6039 | }
6040 | .toggle input[type="checkbox"]:checked + label:after {
6041 | background: #6d5dfc;
6042 | }
6043 | `,
6044 | },
6045 | {
6046 | id: "modelChkBx8",
6047 | css: `.toggle {
6048 | position: relative;
6049 | box-sizing: border-box;
6050 | }
6051 | .toggle input[type="checkbox"] {
6052 | position: absolute;
6053 | left: 0;
6054 | top: 0;
6055 | z-index: 10;
6056 | width: 100%;
6057 | height: 100%;
6058 | cursor: pointer;
6059 | opacity: 0;
6060 | }
6061 | .toggle label {
6062 | position: relative;
6063 | display: flex;
6064 | align-items: center;
6065 | height: 30px;
6066 | box-sizing: border-box;
6067 | }
6068 | .toggle label:before {
6069 | content: "";
6070 | background: #ecf0f3;
6071 | box-shadow: 0 0 0 0 #FFF inset;
6072 | cursor: pointer;
6073 | position: relative;
6074 | display: flex;
6075 | justify-content: center;
6076 | align-items: center;
6077 | border-radius: 4px;
6078 | box-sizing: border-box;
6079 | border: 1px solid #d1d9e6;
6080 | width: 32px;
6081 | height: 32px;
6082 | transition: 0.3s cubic-bezier(1, 0.19, 0, 1.84);
6083 | }
6084 | .toggle input[type="checkbox"]:checked + label:before {
6085 | background: #673AB7;
6086 | border-color: #673AB7;
6087 | box-shadow:0 0 0 6px #FFF inset;
6088 | }
6089 | `,
6090 | },
6091 | {
6092 | id: "modelChkBx9",
6093 | css: `.toggle {
6094 | position: relative;
6095 | box-sizing: border-box;
6096 | }
6097 | .toggle input[type="checkbox"] {
6098 | position: absolute;
6099 | left: 0;
6100 | top: 0;
6101 | z-index: 10;
6102 | width: 100%;
6103 | height: 100%;
6104 | cursor: pointer;
6105 | opacity: 0;
6106 | }
6107 | .toggle label {
6108 | position: relative;
6109 | display: flex;
6110 | align-items: center;
6111 | height: 30px;
6112 | box-sizing: border-box;
6113 | }
6114 | .toggle label:before {
6115 | content: "";
6116 | width: 26px;
6117 | height: 26px;
6118 | margin-right: 5px;
6119 | background: #7986CB;
6120 | border-radius: 50%;
6121 | box-sizing: border-box;
6122 | display: inline-block;
6123 | transition: 0.2s ease-in;
6124 | }
6125 | .toggle label:after {
6126 | content: "";
6127 | position: absolute;
6128 | left: 5px;
6129 | top: 14px;
6130 | z-index: 2;
6131 | width: 16px;
6132 | height: 0px;
6133 | border-bottom: 2px solid #fff;
6134 | border-left: 2px solid #fff;
6135 | transform: translateY(0px) rotate(0deg);
6136 | box-sizing: border-box;
6137 | transition: 0.2s cubic-bezier(0.55, 0.06, 0.68, 0.19);
6138 | }
6139 | .toggle input[type="checkbox"]:checked + label:before {
6140 | background: #3D5AFE;
6141 | }
6142 | .toggle input[type="checkbox"]:checked + label:after {
6143 | height: 8px;
6144 | transform: translateY(-5px) rotate(-45deg);
6145 | }
6146 | `,
6147 | },
6148 | {
6149 | id: "modelChkBx10",
6150 | css: `.toggle {
6151 | position: relative;
6152 | box-sizing: border-box;
6153 | }
6154 | .toggle input[type="checkbox"] {
6155 | position: absolute;
6156 | left: 0;
6157 | top: 0;
6158 | z-index: 10;
6159 | width: 100%;
6160 | height: 100%;
6161 | cursor: pointer;
6162 | opacity: 0;
6163 | }
6164 | .toggle label {
6165 | position: relative;
6166 | display: flex;
6167 | align-items: center;
6168 | height: 30px;
6169 | box-sizing: border-box;
6170 | }
6171 | .toggle label:before {
6172 | content: "";
6173 | width: 26px;
6174 | height: 26px;
6175 | margin-right: 5px;
6176 | box-shadow: 0 0 0 2px #00897B , inset 0 0 0 2px #00897B;
6177 | border-radius: 50%;
6178 | box-sizing: border-box;
6179 | display: inline-block;
6180 | transition: 0.2s ease-in;
6181 | }
6182 | .toggle label:after {
6183 | content: "";
6184 | position: absolute;
6185 | left: 5px;
6186 | top: 14px;
6187 | z-index: 2;
6188 | width: 16px;
6189 | height: 0px;
6190 | border-bottom: 2px solid #fff;
6191 | border-left: 2px solid #fff;
6192 | transform: translateY(0px) rotate(0deg);
6193 | box-sizing: border-box;
6194 | transition: 0.2s 0.1s cubic-bezier(0.55, 0.06, 0.68, 0.19);
6195 | }
6196 | .toggle input[type="checkbox"]:checked + label:before {
6197 | box-shadow: 0 0 0 2px #00897B , inset 0 0 0 15px #00897B;
6198 | }
6199 | .toggle input[type="checkbox"]:checked + label:after {
6200 | height: 8px;
6201 | transform: translateY(-5px) rotate(-45deg);
6202 | }
6203 | `,
6204 | },
6205 | {
6206 | id: "modelChkBx11",
6207 | css: `.toggle {
6208 | position: relative;
6209 | box-sizing: border-box;
6210 | }
6211 | .toggle input[type="checkbox"] {
6212 | position: absolute;
6213 | left: 0;
6214 | top: 0;
6215 | z-index: 10;
6216 | width: 100%;
6217 | height: 100%;
6218 | cursor: pointer;
6219 | opacity: 0;
6220 | }
6221 | .toggle label {
6222 | position: relative;
6223 | display: flex;
6224 | align-items: center;
6225 | height: 30px;
6226 | box-sizing: border-box;
6227 | }
6228 | .toggle label:before {
6229 | content: "";
6230 | width: 26px;
6231 | height: 26px;
6232 | margin-right: 5px;
6233 | border: 2px solid #00897B;
6234 | border-radius: 50%;
6235 | box-sizing: border-box;
6236 | display: inline-block;
6237 | transition: 0.2s ease-in;
6238 | }
6239 | .toggle label:after {
6240 | content: "";
6241 | position: absolute;
6242 | left: 5px;
6243 | top: 14px;
6244 | z-index: 2;
6245 | width: 16px;
6246 | height: 0px;
6247 | border-bottom: 2px solid #0000;
6248 | border-left: 2px solid #0000;
6249 | transform: translateY(0px) rotate(0deg);
6250 | box-sizing: border-box;
6251 | transition: 0.2s cubic-bezier(0.55, 0.06, 0.68, 0.19);
6252 | }
6253 | .toggle input[type="checkbox"]:checked + label:before {
6254 | background: #00897B;
6255 | animation: 0.3s splash ease-in;
6256 | }
6257 | .toggle input[type="checkbox"]:checked + label:after {
6258 | height: 8px;
6259 | border-color: #FFF;
6260 | transform: translateY(-5px) rotate(-45deg);
6261 | }
6262 | @keyframes splash{
6263 | 0% {box-shadow: 0 0 0 0 rgba(0, 137, 123, 1)}
6264 | 50% {box-shadow: 0 0 0 10px rgba(0, 137, 123, 0.5)}
6265 | 100% {box-shadow: 0 0 0 20px rgba(0, 137, 123, 0)}
6266 | }
6267 |
6268 | `,
6269 | },
6270 |
6271 | {
6272 | id: "modelShpX1",
6273 | css: `.toggle {
6274 | position: relative;
6275 | box-sizing: border-box;
6276 | }
6277 | .toggle input[type="checkbox"] {
6278 | position: absolute;
6279 | left: 0;
6280 | top: 0;
6281 | z-index: 10;
6282 | width: 100%;
6283 | height: 100%;
6284 | cursor: pointer;
6285 | opacity: 0;
6286 | }
6287 | .toggle label {
6288 | position: relative;
6289 | display: flex;
6290 | align-items: center;
6291 | box-sizing: border-box;
6292 | }
6293 | .toggle label:before {
6294 | content: "";
6295 | width: 64px;
6296 | height: 64px;
6297 | position: relative;
6298 | display: inline-block;
6299 | border: 1px solid #b6c4d0;
6300 | transition: 0.2s ease-in;
6301 | box-sizing: border-box;
6302 | clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
6303 | background-color: #ccc;
6304 | }
6305 | .toggle input[type="checkbox"]:checked + label:before {
6306 | box-shadow: inset 80px 0 #FFCA28;
6307 | }
6308 | `,
6309 | },
6310 | {
6311 | id: "modelShpHrt2",
6312 | css: `.toggle {
6313 | position: relative;
6314 | box-sizing: border-box;
6315 | }
6316 | .toggle input[type="checkbox"] {
6317 | position: absolute;
6318 | left: 0;
6319 | top: 0;
6320 | z-index: 10;
6321 | width: 100%;
6322 | height: 100%;
6323 | cursor: pointer;
6324 | opacity: 0;
6325 | }
6326 | .toggle label {
6327 | position: relative;
6328 | display: flex;
6329 | align-items: center;
6330 | box-sizing: border-box;
6331 | }
6332 | .toggle label:before {
6333 | content: "";
6334 | width: 64px;
6335 | height: 64px;
6336 | position: relative;
6337 | display: inline-block;
6338 | border: 1px solid #b6c4d0;
6339 | transition: 0.2s ease-in;
6340 | box-sizing: border-box;
6341 | clip-path: polygon(48.595% 85.365%, 15.785% 52.815%, 15.58945% 52.6185%, 12.68962% 48.99466%, 12.305% 48.375%, 10.57963% 44.86051%, 9.35896% 40.38282%, 9.08571% 35.74977%, 9.76901% 31.15918%, 11.37828% 26.80595%, 13.84412% 22.87395%, 15.775% 20.7%, 17.05533% 19.52258%, 20.87248% 16.88208%, 25.14556% 15.07038%, 29.69731% 14.16234%, 31.94% 14.055%, 34.33933% 14.174%, 38.88594% 15.10612%, 43.14179% 16.95734%, 46.93771% 19.62896%, 50% 22.815%, 50.13928% 22.64012%, 53.40377% 19.34025%, 57.24963% 16.74118%, 61.54157% 14.97537%, 66.10584% 14.13355%, 68.06% 14.055%, 70.74723% 14.20914%, 75.28062% 15.20472%, 79.51742% 17.09965%, 83.2818% 19.81486%, 84.225% 20.7%, 86.42617% 23.22899%, 88.81355% 27.2091%, 90.33651% 31.59327%, 90.92925% 36.19641%, 90.56441% 40.82313%, 89.25522% 45.27574%, 87.69% 48.385%, 87.0678% 49.36971%, 84.215% 52.82%, 51.405% 85.37%, 51.05969% 85.64527%, 48.595% 85.365%, 31.94% 18.05%);
6342 | background-color: #ccc;
6343 | }
6344 | .toggle input[type="checkbox"]:checked + label:before {
6345 | box-shadow: inset 0 -80px #F44336;
6346 | }
6347 | `,
6348 | },
6349 | {
6350 | id: "modelEM14",
6351 | css: `.toggle {
6352 | position: relative;
6353 | box-sizing: border-box;
6354 | }
6355 | .toggle input[type="checkbox"] {
6356 | position: absolute;
6357 | left: 0;
6358 | top: 0;
6359 | z-index: 10;
6360 | width: 100%;
6361 | height: 100%;
6362 | cursor: pointer;
6363 | opacity: 0;
6364 | }
6365 | .toggle label {
6366 | position: relative;
6367 | display: flex;
6368 | align-items: center;
6369 | box-sizing: border-box;
6370 | }
6371 | .toggle label:before {
6372 | content: '🔓';
6373 | font-size: 36px;
6374 | position: relative;
6375 | display: inline-block;
6376 | }
6377 |
6378 | .toggle input[type="checkbox"]:checked + label:before {
6379 | content: '🔒';
6380 | }
6381 | `,
6382 | },
6383 | {
6384 | id: "modelEM15",
6385 | css: `.toggle {
6386 | position: relative;
6387 | box-sizing: border-box;
6388 | }
6389 | .toggle input[type="checkbox"] {
6390 | position: absolute;
6391 | left: 0;
6392 | top: 0;
6393 | z-index: 10;
6394 | width: 100%;
6395 | height: 100%;
6396 | cursor: pointer;
6397 | opacity: 0;
6398 | }
6399 | .toggle label {
6400 | position: relative;
6401 | display: flex;
6402 | align-items: center;
6403 | box-sizing: border-box;
6404 | }
6405 | .toggle label:before {
6406 | content: '👎';
6407 | font-size: 36px;
6408 | position: relative;
6409 | display: inline-block;
6410 | }
6411 |
6412 | .toggle input[type="checkbox"]:checked + label:before {
6413 | content: '👍';
6414 | }
6415 | `,
6416 | },
6417 |
6418 | {
6419 | id: "modelEM18",
6420 | css: `.toggle {
6421 | position: relative;
6422 | box-sizing: border-box;
6423 | }
6424 | .toggle input[type="checkbox"] {
6425 | position: absolute;
6426 | left: 0;
6427 | top: 0;
6428 | z-index: 10;
6429 | width: 100%;
6430 | height: 100%;
6431 | cursor: pointer;
6432 | opacity: 0;
6433 | }
6434 | .toggle label {
6435 | position: relative;
6436 | display: flex;
6437 | align-items: center;
6438 | box-sizing: border-box;
6439 | }
6440 | .toggle label:before {
6441 | content: '🔔';
6442 | font-size: 36px;
6443 | position: relative;
6444 | display: inline-block;
6445 | }
6446 | .toggle input[type="checkbox"]:checked + label:before {
6447 | content: '🔕';
6448 | }
6449 | `,
6450 | },
6451 | {
6452 | id: "modelEM19",
6453 | css: `.toggle {
6454 | position: relative;
6455 | box-sizing: border-box;
6456 | }
6457 | .toggle input[type="checkbox"] {
6458 | position: absolute;
6459 | left: 0;
6460 | top: 0;
6461 | z-index: 10;
6462 | width: 100%;
6463 | height: 100%;
6464 | cursor: pointer;
6465 | opacity: 0;
6466 | }
6467 | .toggle label {
6468 | position: relative;
6469 | display: flex;
6470 | align-items: center;
6471 | box-sizing: border-box;
6472 | }
6473 | .toggle label:before {
6474 | content: '🔈';
6475 | font-size: 36px;
6476 | position: relative;
6477 | display: inline-block;
6478 | }
6479 | .toggle input[type="checkbox"]:checked + label:before {
6480 | content: '🔇';
6481 | }
6482 | `,
6483 | },
6484 | {
6485 | id: "modelEM20",
6486 | css: `.toggle {
6487 | position: relative;
6488 | box-sizing: border-box;
6489 | }
6490 | .toggle input[type="checkbox"] {
6491 | position: absolute;
6492 | left: 0;
6493 | top: 0;
6494 | z-index: 10;
6495 | width: 100%;
6496 | height: 100%;
6497 | cursor: pointer;
6498 | opacity: 0;
6499 | }
6500 | .toggle label {
6501 | position: relative;
6502 | display: flex;
6503 | align-items: center;
6504 | box-sizing: border-box;
6505 | }
6506 | .toggle label:before {
6507 | content: '📷';
6508 | font-size: 36px;
6509 | position: relative;
6510 | display: inline-block;
6511 | }
6512 | .toggle input[type="checkbox"]:checked + label:after {
6513 | content: '';
6514 | position: absolute;
6515 | left: 17px;
6516 | top: 5px;
6517 | width: 4px;
6518 | height: 45px;
6519 | transform: rotate(-45deg);
6520 | background: red;
6521 | box-sizing: border-box;
6522 | }
6523 | `,
6524 | },
6525 | {
6526 | id: "modelEM21",
6527 | css: `.toggle {
6528 | position: relative;
6529 | box-sizing: border-box;
6530 | }
6531 | .toggle input[type="checkbox"] {
6532 | position: absolute;
6533 | left: 0;
6534 | top: 0;
6535 | z-index: 10;
6536 | width: 100%;
6537 | height: 100%;
6538 | cursor: pointer;
6539 | opacity: 0;
6540 | }
6541 | .toggle label {
6542 | position: relative;
6543 | display: flex;
6544 | align-items: center;
6545 | box-sizing: border-box;
6546 | }
6547 | .toggle label:before {
6548 | content: '📱';
6549 | font-size: 36px;
6550 | position: relative;
6551 | display: inline-block;
6552 | }
6553 | .toggle input[type="checkbox"]:checked + label:after {
6554 | content: '';
6555 | position: absolute;
6556 | left: 15px;
6557 | top: 4px;
6558 | width: 4px;
6559 | height: 45px;
6560 | transform: rotate(-45deg);
6561 | background: red;
6562 | box-sizing: border-box;
6563 | }
6564 | `,
6565 | },
6566 |
6567 | {
6568 | id: "modelEM22",
6569 | css: `.toggle {
6570 | position: relative;
6571 | box-sizing: border-box;
6572 | }
6573 | .toggle input[type="checkbox"] {
6574 | position: absolute;
6575 | left: 0;
6576 | top: 0;
6577 | z-index: 10;
6578 | width: 100%;
6579 | height: 100%;
6580 | cursor: pointer;
6581 | opacity: 0;
6582 | }
6583 | .toggle label {
6584 | position: relative;
6585 | display: flex;
6586 | align-items: center;
6587 | box-sizing: border-box;
6588 | }
6589 | .toggle label:before {
6590 | content: '🚬';
6591 | font-size: 36px;
6592 | position: relative;
6593 | box-sizing: border-box;
6594 | display: inline-block;
6595 | }
6596 | .toggle input[type="checkbox"]:checked + label:after {
6597 | content: '❌';
6598 | position: absolute;
6599 | font-size: 20px;
6600 | left: 9px;
6601 | top: 24px;
6602 | box-sizing: border-box;
6603 | }
6604 |
6605 | `,
6606 | },
6607 |
6608 |
6609 |
6610 |
6611 |
6612 |
6613 |
6614 |
6615 |
6616 |
6617 |
6618 | ]
--------------------------------------------------------------------------------