progressive-enhancement/switch.html at main · Safae-e/progressive-enhancement · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!doctype html>
<html lang="nl">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
		<title>Switch control / Progressive Enhancement / FDND</title>
		<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
		<link href="assets/styles.css" rel="stylesheet">
		<style>
			/* Schrijf hier gewoon je CSS voor dit component */

			/* De box voor de switch */
		    .switch {
		      position: relative;
		      display: inline-block;
		      width: 60px;
		      height: 34px;
		    }

			/* De checkbox */
			    .switch input {
			      display: none
			    }

			 /* De balk van de switch */
			    .slider {
			      position: absolute;
			      top: 0;
			      left: 0;
			      right: 0;
			      bottom: 0;
			      background-color: #737272;
			      border-radius: 34px;
			    }

				/* Slider rondje */
				.slider:before {
			      position: absolute;
			      content: "";
			      height: 26px;
			      width: 26px;
			      border-radius: 50%;
			      left: 4px;
			      bottom: 4px;
			      background-color: white;
			      transition: 0.2s;
			    }


				input:checked + .slider {
        	      background-color: #5ee4b1;
        	    }

			    /* rondje gaat naar rechts */
			    input:checked + .slider:before {
			      transform: translateX(26px);
			    }


					/* Hint: Dit component kun je volledig met HTML en CSS bouwen */

					/* Hint: Hoe ver ga je qua styling? Vraag jezelf dit altijd af */
		</style>
	</head>
	<body>
		<h1>Switch control</h1>

		<label class="switch">
			<input type="checkbox">
			<span class="slider"></span>
		  </label>

		<!-- Hint: Safari heeft hiervoor iets bedacht, maar is dat al een standaard?
		     Wat gebeurt er in browsers die dat nog niet ondersteunen? -->

		<details open>
			<summary>Demo video</summary>
			<video src="assets/switch.mp4" width="119" height="67" controls muted autoplay loop>
				<a href="assets/switch.mp4">assets/switch.mp4</a>
			</video>
		</details>
	</body>
</html>